:root{
  --night:#0D1B2A; --gold:#D4AF37; --cream:#F8F7F4;
  --card:#ffffff; --border:#e8e2d6; --muted:#5a6675; --lightgray:#eef1f4;
  --radius:0.625rem;
  --font-heading:"Fraunces",ui-serif,Georgia,serif;
  --font-body:"Inter",ui-sans-serif,system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--cream);color:var(--night);-webkit-font-smoothing:antialiased;line-height:1.5}
h1,h2,h3,h4{font-family:var(--font-heading);letter-spacing:-0.01em;font-weight:600}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.container{max-width:80rem;margin:0 auto;padding-left:1.25rem;padding-right:1.25rem}
@media(min-width:640px){.container{padding-left:2rem;padding-right:2rem}}
.text-balance{text-wrap:balance}.text-pretty{text-wrap:pretty}.italic{font-style:italic}.gold{color:var(--gold)}
.reveal{opacity:0;transform:translateY(1.5rem);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.is-visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
.icon{stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon-fill{fill:currentColor}

/* Navbar */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s,box-shadow .3s,backdrop-filter .3s}
.nav.scrolled{background:rgba(248,247,244,.9);backdrop-filter:blur(8px);box-shadow:0 1px 0 rgba(13,27,42,.06)}
.nav-inner{max-width:80rem;margin:0 auto;padding:0 1.25rem;height:4rem;display:flex;align-items:center;justify-content:space-between}
@media(min-width:1024px){.nav-inner{padding:0 2rem;height:5rem}}
.brand{display:flex;align-items:center;gap:.625rem}
.brand-mark{display:flex;height:2.75rem;width:2.75rem;align-items:center;justify-content:center;border-radius:.5rem;background:var(--night);color:var(--gold);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.brand-mark svg{height:1.25rem;width:1.25rem}
.brand-mark img{width:100%;height:100%;object-fit:contain;display:block}
.brand-name{font-family:var(--font-heading);font-size:1.05rem;font-weight:600;color:var(--night);line-height:1.1}
.brand-sub{font-size:.62rem;text-transform:uppercase;letter-spacing:.22em;color:var(--gold);font-weight:500}
.nav-links{display:none;align-items:center;gap:2rem;list-style:none}
@media(min-width:1024px){.nav-links{display:flex}}
.nav-links a{font-size:.875rem;font-weight:500;color:var(--muted);transition:color .2s;position:relative;padding:.5rem 0}
.nav-links a:hover,.nav-links a.active{color:var(--night)}
.nav-links a.active::after{content:"";position:absolute;bottom:-.125rem;left:0;height:1px;width:100%;background:var(--gold)}
.nav-cta{display:none;align-items:center;gap:.75rem}
@media(min-width:1024px){.nav-cta{display:flex}}
.nav-phone{display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:500;color:var(--night);transition:color .2s}
.nav-phone:hover{color:var(--gold)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:9999px;font-size:.875rem;font-weight:600;transition:background .2s,color .2s,border-color .2s;cursor:pointer;border:none;font-family:inherit}
.btn-dark{background:var(--night);color:var(--cream);padding:.625rem 1.25rem}
.btn-dark:hover{background:var(--gold);color:var(--night)}
.btn-gold{background:var(--gold);color:var(--night);padding:1rem 1.75rem}
.btn-gold:hover{background:var(--cream)}
.btn-outline{border:1px solid rgba(248,247,244,.3);color:var(--cream);padding:1rem 1.75rem}
.btn-outline:hover{background:rgba(248,247,244,.1)}
.nav-toggle{display:block;background:none;border:none;cursor:pointer;color:var(--night);padding:.5rem}
@media(min-width:1024px){.nav-toggle{display:none}}
.mobile-menu{max-height:0;opacity:0;overflow:hidden;transition:max-height .3s,opacity .3s;background:var(--cream);border-top:1px solid var(--border)}
@media(min-width:1024px){.mobile-menu{display:none}}
.mobile-menu.open{max-height:32rem;opacity:1}
.mobile-menu-inner{padding:1.25rem;display:flex;flex-direction:column;gap:.25rem}
.mobile-menu-inner a{padding:.75rem .75rem;border-radius:.5rem;font-size:1rem;font-weight:500;color:var(--night);transition:background .2s}
.mobile-menu-inner a:hover{background:var(--lightgray)}
.mobile-menu-inner a.active{background:var(--night);color:var(--cream)}
.mobile-cta{margin-top:.5rem;background:var(--gold);color:var(--night);padding:.75rem 1.25rem;border-radius:9999px;text-align:center;font-size:.875rem;font-weight:600}

/* Sections & headings */
.section{padding:5rem 0}
@media(min-width:768px){.section{padding:7rem 0}}
.section-heading{max-width:42rem;margin:0 auto;text-align:center}
.eyebrow{display:flex;align-items:center;gap:.75rem;justify-content:center;margin-bottom:1rem}
.eyebrow .rule{height:1px;width:2rem;background:rgba(212,175,55,.6)}
.eyebrow span{color:var(--gold);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.2em}
.section-heading h2{font-size:1.875rem;line-height:1.1;color:var(--night);text-wrap:balance}
@media(min-width:640px){.section-heading h2{font-size:2.25rem}}
@media(min-width:768px){.section-heading h2{font-size:2.6rem}}
.section-heading .intro{margin-top:1.25rem;font-size:1.125rem;line-height:1.7;color:var(--muted);text-wrap:pretty}
.section-heading.light h2{color:var(--cream)}
.section-heading.light .intro{color:rgba(248,247,244,.7)}

/* Page hero */
.page-hero{position:relative;padding-top:8rem;padding-bottom:4rem;background:var(--night);overflow:hidden}
@media(min-width:768px){.page-hero{padding-top:10rem;padding-bottom:5rem}}
.page-hero .glow1{position:absolute;top:-5rem;right:-5rem;height:20rem;width:20rem;border-radius:9999px;background:rgba(212,175,55,.1);filter:blur(60px);pointer-events:none}
.page-hero .glow2{position:absolute;bottom:-8rem;left:-5rem;height:18rem;width:18rem;border-radius:9999px;background:rgba(212,175,55,.05);filter:blur(60px);pointer-events:none}
.page-hero .inner{position:relative;max-width:80rem;margin:0 auto;padding:0 1.25rem}
@media(min-width:640px){.page-hero .inner{padding:0 2rem}}
.page-hero .eyebrow{justify-content:flex-start;margin-bottom:1.25rem}
.page-hero h1{font-size:2.25rem;line-height:1.05;color:var(--cream);text-wrap:balance;max-width:48rem}
@media(min-width:640px){.page-hero h1{font-size:3rem}}
@media(min-width:768px){.page-hero h1{font-size:3.4rem}}
.page-hero .intro{margin-top:1.5rem;max-width:42rem;font-size:1.125rem;color:rgba(248,247,244,.7);line-height:1.7;text-wrap:pretty}
.page-hero .cta-wrap{margin-top:2rem}

/* Services rows */
.svc-rows{display:flex;flex-direction:column;gap:1.5rem}
.svc-row{display:grid;gap:2rem;align-items:center;border:1px solid var(--border);background:var(--card);border-radius:1.5rem;padding:1.75rem}
@media(min-width:768px){.svc-row{grid-template-columns:repeat(12,1fr);padding:2.5rem}}
.svc-row .head{grid-column:1/-1}
@media(min-width:768px){.svc-row .head{grid-column:span 4}}
.svc-row .body{grid-column:1/-1}
@media(min-width:768px){.svc-row .body{grid-column:span 8}}
@media(min-width:768px){.svc-row.rev .head{order:2}.svc-row.rev .body{order:1}}
.svc-row .row-icon{display:flex;height:3.5rem;width:3.5rem;align-items:center;justify-content:center;border-radius:1rem;background:var(--night);color:var(--gold);margin-bottom:1.25rem}
.svc-row h2{font-size:1.5rem;font-weight:600;color:var(--night)}
.svc-row .row-price{display:inline-block;margin-top:.75rem;border-radius:9999px;background:rgba(212,175,55,.15);color:var(--gold);padding:.375rem 1rem;font-size:.875rem;font-weight:600}
.svc-row .body p{font-size:1rem;line-height:1.7;color:var(--muted)}
.svc-row .body ul{margin-top:1.25rem;list-style:none;display:grid;gap:.75rem}
@media(min-width:640px){.svc-row .body ul{grid-template-columns:repeat(2,1fr)}}
.svc-row .body li{display:flex;align-items:flex-start;gap:.625rem;font-size:.875rem;color:rgba(13,27,42,.85)}
.svc-row .body li svg{height:1rem;width:1rem;margin-top:.125rem;flex-shrink:0;color:var(--gold)}

/* About */
.story-grid{display:grid;gap:3rem;align-items:center;grid-template-columns:1fr}
@media(min-width:1024px){.story-grid{grid-template-columns:repeat(2,1fr)}}
.story-img{overflow:hidden;border-radius:1.5rem;box-shadow:0 20px 60px rgba(13,27,42,.12)}
.story-img img{width:100%;height:28rem;object-fit:cover}
.story h2{font-size:1.875rem;line-height:1.1;color:var(--night);text-wrap:balance}
@media(min-width:640px){.story h2{font-size:2.25rem}}
.story p{margin-top:1.25rem;font-size:1rem;line-height:1.7;color:var(--muted);text-wrap:pretty}
.values{background:rgba(238,241,244,.6)}
.values-grid{margin-top:3.5rem;display:grid;gap:1.5rem;grid-template-columns:1fr}
@media(min-width:640px){.values-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.values-grid{grid-template-columns:repeat(4,1fr)}}
.value-card{height:100%;border-radius:1rem;background:var(--card);border:1px solid var(--border);padding:1.75rem;transition:border-color .3s,transform .3s}
.value-card:hover{border-color:rgba(212,175,55,.5);transform:translateY(-4px)}
.value-card .ic{display:flex;height:3rem;width:3rem;align-items:center;justify-content:center;border-radius:.75rem;background:var(--night);color:var(--gold);margin-bottom:1.25rem}
.value-card h3{font-size:1.125rem;font-weight:600;color:var(--night)}
.value-card p{margin-top:.625rem;font-size:.875rem;line-height:1.6;color:var(--muted)}
.about-cta-box{max-width:64rem;margin:0 auto;padding:0 1.25rem}
@media(min-width:640px){.about-cta-box{padding:0 2rem}}
.about-cta-box .box{border-radius:1.5rem;background:var(--night);color:var(--cream);padding:2.5rem;text-align:center}
@media(min-width:768px){.about-cta-box .box{padding:3.5rem}}
.about-cta-box h2{font-size:1.875rem;color:var(--cream);text-wrap:balance}
@media(min-width:640px){.about-cta-box h2{font-size:2.25rem}}
.about-cta-box p{margin-top:1.25rem;font-size:1.125rem;color:rgba(248,247,244,.7);max-width:36rem;margin-left:auto;margin-right:auto}

/* Zone */
.zone-grid{display:grid;gap:2.5rem;align-items:center;grid-template-columns:1fr}
@media(min-width:1024px){.zone-grid{grid-template-columns:repeat(2,1fr)}}
.zone-img-box{overflow:hidden;border-radius:1.5rem;box-shadow:0 20px 60px rgba(13,27,42,.12)}
.zone-img-box img{width:100%;height:26rem;object-fit:cover}
.zone-eyebrow{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}
.zone-eyebrow .rule{height:1px;width:2rem;background:rgba(212,175,55,.6)}
.zone-eyebrow span{color:var(--gold);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.2em}
.zone h2{font-size:1.875rem;line-height:1.1;color:var(--night);text-wrap:balance}
@media(min-width:640px){.zone h2{font-size:2.25rem}}
.zone p.lead{margin-top:1.25rem;font-size:1.125rem;line-height:1.7;color:var(--muted);text-wrap:pretty}
.zone-note{margin-top:1.5rem;display:flex;align-items:center;gap:.75rem;border-radius:.75rem;background:rgba(212,175,55,.1);border:1px solid rgba(212,175,55,.3);padding:1rem 1.25rem}
.zone-note svg{height:1.25rem;width:1.25rem;color:var(--gold);flex-shrink:0}
.zone-note p{font-size:.875rem;color:rgba(13,27,42,.85)}
.zone-cards{margin-top:4rem;display:grid;gap:1.5rem;grid-template-columns:1fr}
@media(min-width:640px){.zone-cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.zone-cards{grid-template-columns:repeat(4,1fr)}}
.zone-card{height:100%;border-radius:1rem;border:1px solid var(--border);background:var(--card);padding:1.5rem;transition:border-color .3s,transform .3s}
.zone-card:hover{border-color:rgba(212,175,55,.5);transform:translateY(-4px)}
.zone-card .row{display:flex;align-items:center;gap:.625rem;margin-bottom:.75rem}
.zone-card .ic{display:flex;height:2.25rem;width:2.25rem;align-items:center;justify-content:center;border-radius:.5rem;background:rgba(13,27,42,.05);color:var(--night);transition:background .3s,color .3s}
.zone-card:hover .ic{background:var(--gold);color:var(--night)}
.zone-card h3{font-size:1.125rem;font-weight:600;color:var(--night)}
.zone-card p{font-size:.875rem;line-height:1.6;color:var(--muted)}

/* CTA strip */
.cta-strip{background:var(--night);color:var(--cream);padding:4rem 0}
@media(min-width:768px){.cta-strip{padding:5rem 0}}
.cta-strip .inner{max-width:48rem;margin:0 auto;padding:0 1.25rem;text-align:center}
@media(min-width:640px){.cta-strip .inner{padding:0 2rem}}
.cta-strip h2{font-size:1.875rem;color:var(--cream);text-wrap:balance}
@media(min-width:640px){.cta-strip h2{font-size:2.25rem}}
.cta-strip p{margin-top:1.25rem;font-size:1.125rem;color:rgba(248,247,244,.7)}
.cta-strip .actions{margin-top:2rem;display:flex;flex-direction:column;gap:1rem;justify-content:center}
@media(min-width:640px){.cta-strip .actions{flex-direction:row;align-items:center}}

/* Contact */
.contact-grid{display:grid;gap:3rem;grid-template-columns:1fr}
@media(min-width:1024px){.contact-grid{grid-template-columns:2fr 3fr}}
.contact-info h2{font-size:1.5rem;font-weight:600;color:var(--night)}
.contact-info>p{margin-top:.75rem;font-size:1rem;line-height:1.7;color:var(--muted);text-wrap:pretty}
.info-list{margin-top:2rem;display:flex;flex-direction:column;gap:1rem}
.info-card{display:flex;align-items:flex-start;gap:1rem;border:1px solid var(--border);background:var(--card);border-radius:1rem;padding:1.25rem}
.info-card .ic{display:flex;height:2.75rem;width:2.75rem;flex-shrink:0;align-items:center;justify-content:center;border-radius:.75rem;background:var(--night);color:var(--gold)}
.info-card .label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.info-card .value{margin-top:.25rem;font-weight:500;color:var(--night)}
.info-card a.value:hover{color:var(--gold)}
.contact-form-wrap{border:1px solid var(--border);background:var(--card);border-radius:1.5rem;padding:1.75rem;box-shadow:0 12px 40px rgba(13,27,42,.06)}
@media(min-width:768px){.contact-form-wrap{padding:2.5rem}}
.contact-form-wrap h2{font-size:1.5rem;font-weight:600;color:var(--night)}
.contact-form-wrap .sub{margin-top:.5rem;font-size:.875rem;color:var(--muted)}
.form{margin-top:1.75rem;display:flex;flex-direction:column;gap:1.25rem}
.form-row{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media(min-width:640px){.form-row{grid-template-columns:repeat(2,1fr)}}
.field label{display:block;font-size:.875rem;font-weight:500;color:var(--night);margin-bottom:.375rem}
.field .req{color:var(--gold)}
.field input,.field textarea{width:100%;border-radius:.75rem;border:1px solid var(--border);background:rgba(248,247,244,.5);padding:.75rem 1rem;font-size:.875rem;color:var(--night);font-family:inherit}
.field input::placeholder,.field textarea::placeholder{color:rgba(90,102,117,.6)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 2px rgba(212,175,55,.2)}
.field textarea{resize:none;min-height:7rem}
.form-submit{align-self:flex-start}
.form-note{font-size:.75rem;color:var(--muted)}
.form-success{border-radius:1rem;border:1px solid rgba(212,175,55,.4);background:rgba(212,175,55,.05);padding:2rem;text-align:center}
.form-success .ic{height:3rem;width:3rem;color:var(--gold);margin:0 auto 1rem}
.form-success h3{font-size:1.25rem;font-weight:600;color:var(--night)}
.form-success p{margin-top:.75rem;font-size:.875rem;color:var(--muted);line-height:1.6}
.form-success a{color:var(--gold);font-weight:500}
.form-success .again{margin-top:1.5rem;font-size:.875rem;font-weight:500;color:var(--night);text-decoration:underline;cursor:pointer;background:none;border:none;font-family:inherit}
.form-success .again:hover{color:var(--gold)}

/* Footer */
.footer{background:var(--night);color:rgba(248,247,244,.8)}
.footer-inner{max-width:80rem;margin:0 auto;padding:3.5rem 1.25rem}
@media(min-width:768px){.footer-inner{padding:5rem 2rem}}
.footer-grid{display:grid;gap:2.5rem;grid-template-columns:1fr}
@media(min-width:768px){.footer-grid{grid-template-columns:repeat(4,1fr)}}
.footer-brand{grid-column:span 1}
@media(min-width:768px){.footer-brand{grid-column:span 2}}
.footer-brand .brand-row{display:flex;align-items:center;gap:.625rem}
.footer-brand .brand-mark{background:var(--gold);color:var(--night)}
.footer-brand .name{font-family:var(--font-heading);font-size:1.125rem;font-weight:600;color:var(--cream)}
.footer-brand p{margin-top:1rem;max-width:28rem;font-size:.875rem;line-height:1.6;color:rgba(248,247,244,.6)}
.footer h3{font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--gold);margin-bottom:1rem}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:.625rem;font-size:.875rem}
.footer ul a,.footer ul li{color:rgba(248,247,244,.7);transition:color .2s}
.footer ul a:hover{color:var(--gold)}
.footer-contact li{display:flex;align-items:flex-start;gap:.625rem}
.footer-contact svg{height:1rem;width:1rem;margin-top:.125rem;flex-shrink:0;color:rgba(212,175,55,.8)}
.footer-bottom{margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(248,247,244,.1);display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:.75rem;font-size:.75rem;color:rgba(248,247,244,.5)}
@media(min-width:640px){.footer-bottom{flex-direction:row}}

/* Logo Clé du Sud : version sombre/clair selon l'état du header */
.brand-mark{
  position:relative;
  overflow:hidden;
  border-radius:12px;
  flex:0 0 auto;
  box-shadow:0 2px 10px rgba(13,27,42,.10);
}
.brand-mark img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:inherit;
  transition:opacity .25s ease, transform .25s ease;
}
.brand-mark .logo-dark{position:absolute;inset:0;opacity:1}
.brand-mark .logo-light{position:absolute;inset:0;opacity:0}
.site-header.scrolled .brand-mark .logo-dark{opacity:0}
.site-header.scrolled .brand-mark .logo-light{opacity:1}
.site-header.scrolled .brand-mark{box-shadow:0 2px 8px rgba(13,27,42,.08)}


  /* Footer — logo officiel Clé du Sud */
  .footer-brand .brand-mark{
    background:transparent !important;
    color:inherit;
    overflow:hidden;
    border-radius:12px;
    box-shadow:0 2px 10px rgba(0,0,0,.18);
  }
  .footer-brand .brand-mark img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    border-radius:inherit;
  }


/* Logo blanc officiel : affichage sans zoom/crop */
.brand-mark img.logo-light,
.footer-brand .brand-mark img{
  object-fit:contain !important;
  object-position:center !important;
  transform:none !important;
}