/* ----------------------------------------------
   RESET & BASE
---------------------------------------------- */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:"Poppins", system-ui, sans-serif;
    background:#f6f3ef;
    color:#1b1b1b;
    line-height:1.6;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
    color:inherit;
}

.container{
    width:90%;
    max-width:1200px;
    margin:0 auto;
}

/* ----------------------------------------------
   VARIABLES
---------------------------------------------- */
:root{
    --brand:#936A2C;
    --brand-2:#a97b33;
    --brand-3:#c59a57;

    --bg:#f6f3ef;
    --bg-soft:#fbf9f6;
    --white:#ffffff;

    --text:#1b1b1b;
    --text-soft:#4e4e4e;
    --text-light:#777777;

    --line:rgba(0,0,0,.08);
    --line-strong:rgba(0,0,0,.14);

    --shadow-sm:0 8px 22px rgba(0,0,0,.06);
    --shadow-md:0 15px 40px rgba(0,0,0,.10);
    --shadow-lg:0 22px 55px rgba(0,0,0,.14);

    --radius:18px;
    --radius-sm:12px;
    --radius-pill:999px;
}

/* ----------------------------------------------
   COOKIE BANNER
---------------------------------------------- */
.cookie-banner{
    position:fixed;
    left:50%;
    bottom:16px;
    transform:translateX(-50%);
    z-index:9999;

    display:flex;
    align-items:center;
    gap:12px;

    padding:10px 16px;
    border-radius:999px;

    background:rgba(255,255,255,.96);
    color:var(--text);
    border:1px solid rgba(0,0,0,.08);
    box-shadow:var(--shadow-md);

    font-size:.85rem;
    text-align:center;
}

.cookie-banner a{
    text-decoration:underline;
    font-weight:600;
}

.cookie-banner button{
    border:none;
    background:var(--brand);
    color:#fff;
    padding:8px 14px;
    border-radius:999px;
    cursor:pointer;
    font-weight:700;
    transition:.25s ease;
}

.cookie-banner button:hover{
    background:var(--brand-2);
    transform:translateY(-1px);
}

/* ----------------------------------------------
   NAVBAR
---------------------------------------------- */
.navbar{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;

    background:#ffffff;   /* fond blanc */
    border-bottom:1px solid rgba(0,0,0,.08);
}

.nav-container{
    width:90%;
    max-width:1200px;
    margin:0 auto;
    min-height:78px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.nav-logo{
    display:flex;
    align-items:center;
    flex-shrink:0;
}

.nav-logo img{
    height:48px;
    width:auto;
}

.nav-links{
    list-style:none;
    display:flex;
    align-items:center;
    gap:18px;
}

.nav-links li{
    display:flex;
    align-items:center;
}

.nav-links a{
    position:relative;
    font-size:.95rem;
    font-weight:600;
    color:var(--text);
    transition:.25s ease;
}

.nav-links a:not(.nav-cta):not(.nav-phone)::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-4px;
    width:0;
    height:2px;
    background:var(--brand);
    transition:width .25s ease;
}

.nav-links a:not(.nav-cta):not(.nav-phone):hover::after{
    width:100%;
}

.nav-cta{
    background:var(--brand);
    color:#fff !important;
    padding:11px 18px;
    border-radius:999px;
    font-weight:700;
    box-shadow:var(--shadow-sm);
    transition:.25s ease;
}

.nav-cta:hover{
    background:var(--brand-2);
    transform:translateY(-1px);
}

.nav-phone{
    display:flex;
    align-items:center;
    gap:8px;

    padding:10px 14px;
    border-radius:999px;

    border:1px solid rgba(0,0,0,.10);
    background:#fff;
    color:var(--text);
    font-weight:600;
    transition:.25s ease;
}

.nav-phone:hover{
    border-color:rgba(147,106,44,.35);
    box-shadow:var(--shadow-sm);
}

.nav-toggle{
    display:none;
    flex-direction:column;
    gap:4px;
    background:none;
    border:none;
    cursor:pointer;
}

.nav-toggle span{
    width:24px;
    height:2px;
    border-radius:999px;
    background:var(--text);
    transition:.25s ease;
}

/* ----------------------------------------------
   HERO
---------------------------------------------- */
.hero{
    min-height:100vh;
    padding:120px 20px 70px 20px;

    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    position:relative;

    background:
        linear-gradient(rgba(0,0,0,.58), rgba(0,0,0,.58)),
        url('/assets/img/6603-fichier-1773048712928.jpg') center/cover no-repeat;
}

.hero .overlay{
    display:none;
}

.hero-inner{
    max-width:900px;
    color:#fff;
    position:relative;
    z-index:2;
}

.hero h1{
    font-size:clamp(2.4rem, 6vw, 4.2rem);
    line-height:1.08;
    margin-bottom:12px;
    font-weight:700;
    letter-spacing:.3px;
}

.hero-subtitle{
    font-size:clamp(1.1rem, 2.3vw, 1.4rem);
    color:rgba(255,255,255,.96);
    margin-bottom:14px;
    font-weight:500;
}

.hero-zone{
    font-size:1.05rem;
    color:rgba(255,255,255,.90);
    margin-bottom:10px;
}

.hero-assurance{
    max-width:800px;
    margin:0 auto 28px auto;
    font-size:1rem;
    color:rgba(255,255,255,.90);
}

.hero-actions{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap;
}

.btn-hero{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:12px 26px;
    border-radius:999px;
    background:var(--brand);
    color:#fff;
    font-weight:700;
    box-shadow:var(--shadow-md);
    transition:.25s ease;
}

.btn-hero:hover{
    background:var(--brand-2);
    transform:translateY(-2px);
}

.btn-hero-outline{
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.35);
    color:#fff;
    box-shadow:none;
}

.btn-hero-outline:hover{
    background:rgba(255,255,255,.20);
    border-color:rgba(255,255,255,.50);
}

/* ----------------------------------------------
   SECTIONS
---------------------------------------------- */
.section{
    padding:90px 0;
}

.section-title{
    text-align:center;
    font-size:clamp(1.9rem, 3vw, 2.5rem);
    color:var(--text);
    margin-bottom:18px;
    line-height:1.2;
}

.section-title::after{
    content:"";
    display:block;
    width:72px;
    height:4px;
    border-radius:999px;
    background:var(--brand);
    margin:14px auto 0 auto;
}

.seo{
    color:var(--text-soft);
}

/* ----------------------------------------------
   ABOUT
---------------------------------------------- */
.about{
    background:var(--white);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

.about .container{
    max-width:980px;
}

.about p{
    font-size:1.03rem;
    color:var(--text-soft);
    margin:0 auto 18px auto;
    text-align:center;
}

.about strong{
    color:var(--text);
}

/* ----------------------------------------------
   ZONE
---------------------------------------------- */
.zone{
    background:var(--bg-soft);
}

.zone .container{
    max-width:980px;
}

.zone p{
    text-align:center;
    font-size:1.03rem;
    color:var(--text-soft);
    margin-bottom:16px;
}

/* ----------------------------------------------
   SERVICES
---------------------------------------------- */
.services{
    background:var(--bg);
}

.cards{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
    gap:24px;
    margin-top:10px;
}

.card{
    background:var(--white);
    border:1px solid rgba(0,0,0,.06);
    border-radius:20px;
    padding:24px;
    box-shadow:var(--shadow-sm);
    transition:.28s ease;
    height:100%;
}

.card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-md);
    border-color:rgba(147,106,44,.24);
}

.card h3{
    font-size:1.15rem;
    color:var(--text);
    margin-bottom:10px;
    line-height:1.3;
}

.card p{
    color:var(--text-soft);
    font-size:.97rem;
}

.card strong{
    color:var(--text);
}

/* ----------------------------------------------
   GALERIE / REALISATIONS
---------------------------------------------- */
.realisation-gallery{
    margin-top:48px;
}

.realisation-gallery h3{
    text-align:center;
    font-size:1.45rem;
    color:var(--text);
    margin-bottom:24px;
}

.realisation-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:18px;
}

.realisation-grid img{
    width:100%;
    height:260px;
    object-fit:cover;
    border-radius:18px;
    background:#fff;
    border:1px solid rgba(0,0,0,.06);
    box-shadow:var(--shadow-sm);
    transition:.28s ease;
}

.realisation-grid img:hover{
    transform:translateY(-5px);
    box-shadow:var(--shadow-md);
}

/* ----------------------------------------------
   CONTACT
---------------------------------------------- */
.contact{
    background:var(--white);
}

.contact .section-title{
    margin-bottom:20px;
}

.contact-form{
    max-width:760px;
    margin:0 auto;
    background:var(--white);
    padding:30px;
    border-radius:22px;
    border:1px solid rgba(0,0,0,.07);
    box-shadow:var(--shadow-md);
}

.field-row{
    display:flex;
    gap:15px;
    margin-bottom:15px;
}

.field-row input{
    flex:1;
}

.contact-form input,
.contact-form textarea{
    width:100%;
    border:1px solid rgba(0,0,0,.12);
    border-radius:14px;
    background:#fcfcfc;
    color:var(--text);
    padding:14px 15px;
    font-size:.96rem;
    font-family:inherit;
    outline:none;
    transition:.25s ease;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{
    color:#8a8a8a;
}

.contact-form input:focus,
.contact-form textarea:focus{
    border-color:rgba(147,106,44,.80);
    box-shadow:0 0 0 4px rgba(147,106,44,.14);
    background:#fff;
}

.contact-form textarea{
    min-height:160px;
    resize:vertical;
}

.btn-submit{
    margin-top:10px;
    border:none;
    background:var(--brand);
    color:#fff;
    padding:13px 26px;
    border-radius:999px;
    font-weight:700;
    cursor:pointer;
    transition:.25s ease;
    box-shadow:var(--shadow-sm);
}

.btn-submit:hover{
    background:var(--brand-2);
    transform:translateY(-1px);
}

/* ----------------------------------------------
   FOOTER
---------------------------------------------- */
footer{
    background:#fff;
    color:var(--text);
    padding:60px 0 20px 0;
    border-top:1px solid rgba(0,0,0,.06);
}

.footer-top{
    width:90%;
    max-width:1300px;
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    gap:36px;
}

.footer-col{
    flex:1;
}

.footer-col h4{
    font-size:1.08rem;
    margin-bottom:14px;
    color:var(--text);
}

.footer-col p{
    color:var(--text-soft);
    margin-bottom:10px;
    line-height:1.6;
}

.footer-col ul{
    list-style:none;
}

.footer-col ul li{
    margin-bottom:10px;
}

.footer-col a{
    color:var(--text);
    text-decoration:underline;
    text-underline-offset:2px;
}

.footer-col a:hover{
    color:var(--brand);
}

.footer-bottom{
    width:90%;
    max-width:1300px;
    margin:28px auto 0 auto;
    padding-top:16px;
    border-top:1px solid rgba(0,0,0,.08);

    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:14px;

    text-align:center;
    font-size:.92rem;
    color:var(--text-soft);
}

.footer-bottom a{
    text-decoration:underline;
}

.footer-sep{
    opacity:.35;
}

/* ----------------------------------------------
   POPUP CONFIRM
---------------------------------------------- */
.popup-confirm{
    position:fixed;
    inset:0;
    z-index:9999;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,.45);
    padding:20px;
}

.popup-confirm.active{
    display:flex;
}

.popup-content{
    width:100%;
    max-width:420px;
    background:#fff;
    border-radius:18px;
    padding:30px 24px;
    text-align:center;
    box-shadow:var(--shadow-lg);
    border:1px solid rgba(0,0,0,.08);
}

.popup-content h3{
    color:var(--text);
    margin-bottom:10px;
    font-size:1.35rem;
}

.popup-content p{
    color:var(--text-soft);
    margin-bottom:20px;
}

.popup-btn{
    border:none;
    background:var(--brand);
    color:#fff;
    padding:11px 22px;
    border-radius:999px;
    font-weight:700;
    cursor:pointer;
    transition:.25s ease;
}

.popup-btn:hover{
    background:var(--brand-2);
}

/* ----------------------------------------------
   UTILITAIRES
---------------------------------------------- */
strong{
    font-weight:700;
}

/* ----------------------------------------------
   RESPONSIVE
---------------------------------------------- */
@media (max-width:980px){
    .footer-top{
        flex-direction:column;
        gap:26px;
    }

    .footer-col{
        text-align:center;
    }
}

@media (max-width:860px){
    .nav-toggle{
        display:flex;
    }

    .nav-links{
        position:absolute;
        top:100%;
        right:0;
        min-width:260px;

        display:none;
        flex-direction:column;
        align-items:flex-start;
        gap:12px;

        padding:16px 18px;
        background:#fff;
        border:1px solid rgba(0,0,0,.08);
        border-top:none;
        border-radius:0 0 0 18px;
        box-shadow:var(--shadow-md);
    }

    .navbar.nav-open .nav-links{
        display:flex;
    }

    .nav-links li{
        width:100%;
    }

    .nav-links a{
        width:100%;
    }

    .nav-phone,
    .nav-cta{
        justify-content:center;
        text-align:center;
    }
}

@media (max-width:768px){
    .section{
        padding:75px 0;
    }

    .hero{
        min-height:92vh;
        padding-top:110px;
    }

    .hero-actions{
        flex-direction:column;
    }

    .btn-hero{
        width:100%;
        max-width:320px;
    }

    .field-row{
        flex-direction:column;
    }

    .contact-form{
        padding:22px;
    }

    .realisation-grid img{
        height:220px;
    }
}

@media (max-width:560px){
    .container{
        width:92%;
    }

    .nav-container{
        width:92%;
        min-height:72px;
    }

    .nav-logo img{
        height:42px;
    }

    .cookie-banner{
        width:calc(100% - 20px);
        border-radius:18px;
        padding:12px;
        flex-direction:column;
    }

    .section-title{
        margin-bottom:16px;
    }

    .cards{
        gap:18px;
    }

    .card{
        padding:20px;
    }

    .footer-bottom{
        gap:8px;
    }

    .footer-sep{
        display:none;
    }
}

/* GALERIE PHOTOS */

.realisation-gallery{
    margin-top:50px;
}

.realisation-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
    gap:20px;
}

.realisation-grid img{
    width:100%;
    height:260px;
    object-fit:cover;
    border-radius:14px;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
    transition:.3s;
}

.realisation-grid img:hover{
    transform:translateY(-5px);
}