/* CSS Document */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
html{
    scroll-behavior:smooth;
}
body{
    font-family:'Montserrat',sans-serif;
    background:#0d0d0d;
    color:white;
    overflow-x:hidden;
}
img{
    max-width:100%;
}
body::before{
    content:'';
    position:fixed;
    width:700px;
    height:700px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(201,168,97,0.16) 0%, rgba(201,168,97,0) 70%);
    top:-250px;
    right:-250px;
    z-index:-1;
}
header{
    position:fixed;
    top:0;
    width:100%;
    padding:18px 8%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:rgba(10,10,10,0.78);
    backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(255,255,255,0.05);
    z-index:1000;
}






.logo{
    display:flex;
    align-items:center;
    text-decoration:none;
}

.logo img{
    height:60px;
    width:auto;
    display:block;
    transition:.3s;
}

.logo:hover img{
    transform:scale(1.03);
}




nav a{
    color:white;
    text-decoration:none;
    margin-left:35px;
    position:relative;
}
nav a::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-8px;
    width:0;
    height:2px;
    background:#c9a861;
    transition:0.3s;
}
nav a:hover::after{
    width:100%;
}
.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:140px 8% 80px;
    
   /* background:
        linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.78)),
        url('https://images.unsplash.com/photo-1505693416388-ac5ce068fe85?q=80&w=1800&auto=format&fit=crop') center/cover;
    */
    background:
        linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.78)),
        url('images/fond.jpg') center/cover;
}
.hero-content{
    max-width:980px;
}
.hero h1{
    font-size:5rem;
    line-height:1.1;
    margin-bottom:30px;
    font-weight:800;
}
.hero h1 span{
    color:#c9a861;
}
.hero p{
    font-size:1.2rem;
    line-height:1.9;
    color:rgba(255,255,255,0.72);
    margin-bottom:45px;
}
.buttons{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}
.btn{
    display:inline-block;
    padding:18px 36px;
    border-radius:50px;
    text-decoration:none;
    font-weight:700;
    transition:0.35s;
}
.btn-gold{
    background:#c9a861;
    color:#111;
}
.btn-gold:hover{
    transform:translateY(-5px);
    box-shadow:0 20px 40px rgba(201,168,97,0.35);
}
.btn-outline{
    border:1px solid rgba(255,255,255,0.15);
    color:white;
    background:rgba(255,255,255,0.03);
}
.btn-outline:hover{
    background:rgba(255,255,255,0.08);
}
section{
    padding:110px 8%;
}
.section-title{
    text-align:center;
    margin-bottom:70px;
}
.section-title h2{
    font-size:3rem;
    margin-bottom:20px;
}
.section-title p{
    max-width:750px;
    margin:auto;
    line-height:1.9;
    color:rgba(255,255,255,0.72);
}
.services{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;
}
.card{
    background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
    border:1px solid rgba(255,255,255,0.08);
    border-radius:28px;
    padding:40px 30px;
    transition:0.35s;
}
.card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(0,0,0,0.35);
    border-color:rgba(201,168,97,0.3);
}
.card h3{
    margin-bottom:18px;
    font-size:1.4rem;
}
.card p{
    line-height:1.8;
    color:rgba(255,255,255,0.72);
}
.gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:30px;
}
.gallery-item{
    position:relative;
    overflow:hidden;
    border-radius:28px;
    height:420px;
}
.slider-image{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:opacity 0.4s ease;
}
.overlay{
    position:absolute;
    bottom:0;
    width:100%;
    padding:30px;
    background:linear-gradient(to top, rgba(0,0,0,0.92), transparent);
}
.overlay p{
    color:rgba(255,255,255,0.72);
    margin-top:10px;
}
.slider-controls{
    position:absolute;
    top:50%;
    width:100%;
    display:flex;
    justify-content:space-between;
    transform:translateY(-50%);
    padding:0 15px;
    z-index:5;
}
.slider-btn{
    width:48px;
    height:48px;
    border:none;
    border-radius:50%;
    background:rgba(0,0,0,0.45);
    color:white;
    cursor:pointer;
    font-size:1.3rem;
}
.slider-btn:hover{
    background:#c9a861;
    color:#111;
}
.about{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
}
.about img{
    border-radius:28px;
}
.about-content h2{
    font-size:3rem;
    margin-bottom:25px;
}
.about-content p{
    color:rgba(255,255,255,0.72);
    line-height:1.9;
    margin-bottom:25px;
}
.contact-section{
    background:linear-gradient(145deg,#151515,#0d0d0d);
}
form{
    max-width:760px;
    margin:auto;
}
.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}
input,
textarea{
    width:100%;
    padding:18px;
    border:none;
    border-radius:18px;
    background:#1a1a1a;
    color:white;
    font-family:'Montserrat',sans-serif;
    margin-bottom:20px;
}
textarea{
    height:180px;
    resize:none;
}
.captcha-box{
    display:flex;
    align-items:center;
    gap:15px;
    background:#1a1a1a;
    padding:20px;
    border-radius:18px;
    margin-bottom:25px;
}
.captcha-label{
    color:#c9a861;
    font-weight:700;
}
#captchaQuestion{
    color:#c9a861;
    font-weight:700;
}
footer{
    padding:50px 8%;
    text-align:center;
    color:rgba(255,255,255,0.5);
}
@media(max-width:900px){
    .hero h1{
        font-size:3.2rem;
    }
    .about{
        grid-template-columns:1fr;
    }
    .form-grid{
        grid-template-columns:1fr;
    }
}
@media(max-width:700px){

    .menu-toggle{

        display:block;

    }

    nav{

        position:fixed;

        top:0;
        right:-100%;

        width:280px;
        height:100vh;

        background:rgba(15,15,15,.98);

        backdrop-filter:blur(15px);

        display:flex;

        flex-direction:column;

        justify-content:center;

        align-items:center;

        gap:35px;

        transition:.4s;

        box-shadow:-15px 0 40px rgba(0,0,0,.45);

    }

    nav.active{

        right:0;

    }

    nav a{

        margin:0;

        font-size:1.15rem;

    }

    .hero h1{

        font-size:2.4rem;

    }

    .section-title h2,
    .about-content h2{

        font-size:2rem;

    }

}
    
    /*=========================================================
PROJETS
=========================================================*/

.projects-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
    gap:35px;
}

.project-card{

    background:#141414;

    border-radius:28px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.06);

    transition:.35s;

    display:flex;

    flex-direction:column;
}

.project-card:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 60px rgba(0,0,0,.45);

    border-color:rgba(201,168,97,.4);
}

.project-image{

    overflow:hidden;

    height:270px;
}

.project-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;
}

.project-card:hover img{

    transform:scale(1.05);
}

.project-body{

    padding:30px;
}

.project-category{

    display:inline-block;

    background:#c9a861;

    color:#111;

    padding:6px 14px;

    border-radius:30px;

    font-size:.75rem;

    font-weight:700;

    margin-bottom:18px;

    text-transform:uppercase;

    letter-spacing:1px;
}

.project-body h3{

    font-size:1.6rem;

    margin-bottom:18px;
}

.project-body p{

    color:rgba(255,255,255,.72);

    line-height:1.8;

    margin-bottom:25px;
}

.project-features{

    list-style:none;

    margin-bottom:30px;
}

.project-features li{

    margin-bottom:12px;

    color:#d8d8d8;
}

.project-button{

    display:inline-block;

    padding:16px 30px;

    border-radius:40px;

    text-decoration:none;

    background:#c9a861;

    color:#111;

    font-weight:700;

    transition:.3s;
}

.project-button:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 30px rgba(201,168,97,.35);
}
    
    
    /*=========================================================
PAGE PROJET
=========================================================*/

.project-hero{

    position:relative;

    min-height:50vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    overflow:hidden;

     

}

.project-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(0,0,0,.55),
        rgba(0,0,0,.75)
    );

}

.project-hero-content{

    position:relative;

    z-index:2;

    max-width:900px;

    padding:40px;
}

.project-hero h1{

    font-size:4.5rem;

    margin-bottom:25px;

    line-height:1.1;
}

.project-hero p{

    font-size:1.25rem;

    color:rgba(255,255,255,.75);

    margin-bottom:35px;

    line-height:1.8;
}

.project-badges{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

    margin-bottom:40px;
}

.project-badge{

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(10px);

    border:1px solid rgba(255,255,255,.1);

    padding:12px 24px;

    border-radius:40px;

    font-size:.9rem;
}
   .project-stats{

    margin-top:-50px;

    position:relative;

    z-index:20;

    display:grid;

   grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

    gap:25px;

    padding:0 8%;
}

.stat-card{

    background:#171717;

    border-radius:25px;

    padding:35px;

    text-align:center;

    border:1px solid rgba(255,255,255,.08);

    transition:.3s;
}

.stat-card:hover{

    transform:translateY(-8px);

    border-color:#c9a861;
}

.stat-number{

    font-size:2rem;

    font-weight:bold;

    color:#c9a861;

    margin-bottom:15px;
} 
    
    /*=========================================================
LIGHTBOX
=========================================================*/

.galerie-photo{

    position:relative;
    overflow:hidden;
    border-radius:28px;

    cursor:pointer;

    transition:.35s;
}

.galerie-photo:hover{

    transform:scale(1.02);

}

/*=========================================================
DESCRIPTION SUR LES MINIATURES
=========================================================*/

.galerie-legende{

    position:absolute;
    left:0;
    right:0;
    bottom:0;

    padding:16px 18px;

    background:linear-gradient(
    to top,
    rgba(0,0,0,.95) 0%,
    rgba(0,0,0,.75) 45%,
    rgba(0,0,0,.15) 85%,
    transparent 100%
);

    color:#fff;

    font-size:.82rem;
    line-height:1.4;

    white-space:nowrap;
    overflow:hidden;
    /*text-overflow:ellipsis;*/

    /* Disparition progressive du texte */
    -webkit-mask-image: linear-gradient(to right, #000 60%, transparent 100%);
    mask-image: linear-gradient(to right, #000 60%, transparent 100%);

    pointer-events:none;
    
    
    
}

.galerie-photo:hover .galerie-legende{

    opacity:1;
    padding-bottom:24px;

}

#lightbox{

    position:fixed;
    inset:0;

    background:rgba(0,0,0,.95);

    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;

    padding:40px;

    z-index:99999;

    opacity:0;
    visibility:hidden;

    transition:.35s;
}

#lightbox.active{

    opacity:1;
    visibility:visible;

}

#lightbox.active{

    opacity:1;

    visibility:visible;
}

#lightbox img{

    max-width:90%;

    max-height:75vh;

    border-radius:18px;

    box-shadow:0 20px 80px rgba(0,0,0,.6);

    animation:zoomPhoto .35s;
}

@keyframes zoomPhoto{

    from{

        transform:scale(.8);

        opacity:0;
    }

    to{

        transform:scale(1);

        opacity:1;
    }

}

#closeLightbox{

    position:absolute;

    top:35px;

    right:50px;

    color:white;

    font-size:55px;

    cursor:pointer;

    transition:.3s;
}

#closeLightbox:hover{

    color:#c9a861;

    transform:rotate(90deg);
}
    
    #lightboxCaption{

    color:white;

    text-align:center;

    margin-top:25px;

    font-size:1.15rem;

    max-width:750px;

    line-height:1.8;

    padding:0 30px;

    color:rgba(255,255,255,.85);

}

/*=========================================================
TEMOIGNAGE
=========================================================*/

.testimonial{

    max-width:1000px;

    margin:80px auto;

    padding:70px 60px;

    text-align:center;

    background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));

    border:1px solid rgba(255,255,255,.08);

    border-radius:30px;

    position:relative;

    overflow:hidden;

}

.testimonial::before{

    content:"“";

    position:absolute;

    top:10px;

    left:40px;

    font-size:9rem;

    color:rgba(201,168,97,.18);

    font-family:Georgia, serif;

    line-height:1;

}

.testimonial blockquote{

    font-size:1.55rem;

    line-height:2;

    font-style:italic;

    color:white;

    max-width:820px;

    margin:0 auto 35px;

}

.testimonial-author{

    font-size:1.1rem;

    color:#c9a861;

    font-weight:700;

    letter-spacing:1px;

}

.testimonial-author span{

    display:block;

    margin-top:8px;

    font-size:.95rem;

    font-weight:400;

    color:rgba(255,255,255,.6);

}

.project-section{

    padding-top:20px;

    padding-bottom:80px;

}

/*=========================================================
RESPONSIVE PAGE PROJET
=========================================================*/

@media (max-width:1200px){

    .project-stats{
        grid-template-columns:repeat(2,1fr);
    }

}

@media (max-width:900px){

    .project-hero h1{
        font-size:3.2rem;
    }

    .project-stats{

        margin-top:40px;

        grid-template-columns:repeat(2,1fr);

        gap:18px;

        padding:0 5%;
    }

    .stat-card{

        padding:28px 18px;

    }

    .stat-number{

        font-size:1.8rem;

    }

}

@media (max-width:600px){

    .project-hero{

        min-height:60vh;

    }

    .project-hero-content{

        padding:25px;

    }

    .project-hero h1{

        font-size:2.4rem;

    }

    .project-hero p{

        font-size:1.05rem;

    }

    .project-stats{

        grid-template-columns:repeat(2,1fr);

        gap:15px;

        padding:0 20px;

        margin-top:30px;

    }

    .stat-card{

        padding:20px 10px;

        border-radius:18px;

    }

    .stat-number{

        font-size:1.6rem;

    }

    .stat-card p{

        font-size:.95rem;

        line-height:1.35;

    }

}
/*
@media(max-width:700px){

    .logo img{
        height:42px;
    }

}
*/
/*=========================================================
MENU MOBILE
=========================================================*/

.menu-toggle{

    display:none;

    width:42px;
    height:32px;

    cursor:pointer;

    position:relative;

    z-index:5000;

}

.menu-toggle span{

    position:absolute;

    width:100%;
    height:3px;

    background:white;

    left:0;

    transition:.35s;

    border-radius:5px;

}

.menu-toggle span:nth-child(1){

    top:0;

}

.menu-toggle span:nth-child(2){

    top:14px;

}

.menu-toggle span:nth-child(3){

    top:28px;

}

/* Animation en X */

.menu-toggle.active span:nth-child(1){

    transform:rotate(45deg);

    top:14px;

}

.menu-toggle.active span:nth-child(2){

    opacity:0;

}

.menu-toggle.active span:nth-child(3){

    transform:rotate(-45deg);

    top:14px;

}


.menu-toggle{
    display:block !important;
    position:fixed !important;
    top:20px;
    right:20px;
    width:50px;
    height:50px;
    background:transparent !important;
    z-index:999999 !important;
}

.menu-toggle span{
   background:white !important;
}