/* ============================================================
   EKF Sud Plomberie — Design system partagé (5 pages)
   Direction : éditorial clair (Stitch) + hero immersif "glace" (Apple).
   Palette unique, accent unique (laiton) → zéro incohérence.
   ============================================================ */

:root{
  --surface:#F7F5F0;        /* fond crème */
  --container:#EBE6DF;      /* fond alterné chaud */
  --primary:#3E3B32;        /* brun foncé — texte / blocs sombres */
  --on-surface:#2A2822;
  --variant:#5A554C;        /* texte secondaire */
  --outline:#D4CECB;
  --brass:#B07B53;          /* accent UNIQUE (laiton) */
  --brass-soft:#C79A6B;
  --ink:#13110E;            /* hero sombre */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* transition douce entre les pages (fondu natif Chromium/Brave) */
@view-transition{navigation:auto}
body{margin:0;background:var(--surface);color:var(--on-surface);
  font-family:Inter,system-ui,sans-serif;font-weight:300;-webkit-font-smoothing:antialiased;line-height:1.6;
  animation:pagein .45s ease both}
@keyframes pagein{from{opacity:0}to{opacity:1}}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.font-headline{font-family:Montserrat,sans-serif}
.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24;vertical-align:middle}

.wrap{max-width:1200px;margin-inline:auto;padding-inline:20px}
@media(min-width:768px){.wrap{padding-inline:40px}}
.eyebrow{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--brass);font-weight:500}
.rule{width:64px;height:1px;background:var(--brass);opacity:.6}
.muted{color:var(--variant)}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;border-radius:999px;font-weight:500;
  font-size:.875rem;padding:.85rem 1.6rem;cursor:pointer;border:1px solid transparent;transition:.25s;white-space:nowrap}
.btn-primary{background:var(--primary);color:var(--surface)}
.btn-primary:hover{background:#4f4b40;transform:translateY(-1px)}
.btn-light{background:var(--surface);color:var(--primary);border-color:var(--outline)}
.btn-light:hover{background:#fff;transform:translateY(-1px)}
.btn-ghost{border-color:currentColor;background:transparent}
.btn-ghost:hover{background:rgba(0,0,0,.04)}
.btn-onhero{background:rgba(255,255,255,.92);color:var(--primary)}
.btn-onhero:hover{background:#fff;transform:translateY(-1px)}
.pill{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--outline);
  border-radius:999px;padding:.45rem .9rem;font-size:.85rem;color:var(--variant)}
.stars{color:var(--brass-soft);letter-spacing:2px}

/* ---------- NAV ---------- */
#topwrap{position:fixed;top:0;inset-inline:0;z-index:50}
#nav{position:relative;height:76px;display:flex;align-items:center;
  transition:background .4s,border-color .4s,color .4s;border-bottom:1px solid transparent;color:#fff}
#nav .brand{font-family:Montserrat,sans-serif;font-weight:500;font-size:1.15rem;letter-spacing:-.01em;
  text-shadow:0 1px 14px rgba(0,0,0,.45)}
#nav .brand b{font-weight:600}
#nav .navlink{position:relative;font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.8;transition:.2s;padding-bottom:4px}
#nav .navlink:hover{opacity:1}
#nav .navlink.active{opacity:1}
#nav .navlink.active::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;border-radius:2px;background:var(--brass-soft)}
#nav.scrolled .navlink.active::after{background:var(--brass)}
#mobnav a.active{color:var(--brass-soft)}
#nav.scrolled{background:rgba(247,245,240,.82);backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);border-bottom-color:var(--outline);color:var(--primary)}
#nav.scrolled .brand{text-shadow:none}
#nav.scrolled .navlink{opacity:.7;color:var(--primary)}
#nav.scrolled .navlink:hover,#nav.scrolled .navlink.active{opacity:1}
/* langue + burger */
.lang{display:inline-flex;border:1px solid currentColor;border-radius:999px;overflow:hidden;font-size:11px;opacity:.9}
.lang button{padding:.3rem .6rem;color:inherit;background:transparent;cursor:pointer;border:0;letter-spacing:.08em;font-weight:500}
.lang button.on{background:currentColor}
.lang button.on span{color:var(--surface)}
#nav.scrolled .lang button.on{background:var(--primary)}
#nav.scrolled .lang button.on span{color:var(--surface)}
.burger{display:none;width:42px;height:42px;border:1px solid currentColor;border-radius:999px;
  align-items:center;justify-content:center;background:transparent;color:inherit;cursor:pointer}
#mobnav{position:fixed;inset:0;z-index:70;background:rgba(19,17,14,.97);backdrop-filter:blur(10px);
  display:flex;flex-direction:column;justify-content:center;gap:1.3rem;padding:2rem;
  opacity:0;visibility:hidden;transition:opacity .3s}
#mobnav.open{opacity:1;visibility:visible}
#mobnav a{transform:translateY(8px);opacity:0;transition:opacity .4s,transform .4s,color .2s}
#mobnav.open a{transform:none;opacity:1}
#mobnav.open a:nth-child(2){transition-delay:.05s}#mobnav.open a:nth-child(3){transition-delay:.1s}
#mobnav.open a:nth-child(4){transition-delay:.15s}#mobnav.open a:nth-child(5){transition-delay:.2s}
#mobnav.open a:nth-child(6){transition-delay:.25s}
body.nav-open{overflow:hidden}
#mobnav a{color:#fff;font-family:Montserrat,sans-serif;font-weight:300;font-size:1.7rem}
@media(max-width:1023px){.nav-desktop{display:none!important}.burger{display:inline-flex}}

/* ---------- HERO (image plein écran, Ken Burns, texte directement sur l'image) ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:var(--ink)}
.hero.short{min-height:62svh}
.hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:kb 30s cubic-bezier(.2,.6,.2,1) forwards}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(19,17,14,.42) 0%,rgba(19,17,14,.04) 30%,rgba(19,17,14,.30) 62%,rgba(19,17,14,.78) 100%)}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.14)}}

/* texte hero posé sur l'image (fin, discret, lisible via ombre) */
.hero-content{position:relative;z-index:2;color:#fff;max-width:40rem;padding-bottom:8vh}
.hero.short .hero-content{padding-bottom:6vh}
.hero-eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(255,255,255,.85);text-shadow:0 1px 10px rgba(0,0,0,.5)}
.hero-eyebrow .dot{width:6px;height:6px;border-radius:999px;background:var(--brass-soft)}
.hero-h1{font-family:Montserrat,sans-serif;font-weight:200;letter-spacing:-.01em;line-height:1.04;margin:1rem 0 0;
  font-size:clamp(2.2rem,6vw,4rem);text-shadow:0 2px 30px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.4)}
.hero.short .hero-h1{font-size:clamp(1.9rem,5vw,3rem)}
.hero-sub{margin:1rem 0 0;max-width:34rem;color:rgba(255,255,255,.92);font-weight:300;text-shadow:0 1px 14px rgba(0,0,0,.55)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin-top:1.6rem}
.hero-trust{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.1rem;font-size:.82rem;
  color:rgba(255,255,255,.8);text-shadow:0 1px 10px rgba(0,0,0,.5)}
.hero-quick{display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .85rem;border-radius:999px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px);font-size:.8rem;color:#fff}
.hero-quick .material-symbols-outlined{font-size:16px;color:var(--brass-soft)}

/* carte glace Apple — fond clair translucide, texte sombre lisible */
.glass{background:rgba(247,245,240,.72);backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);border:1px solid rgba(255,255,255,.65);
  border-radius:30px;box-shadow:0 26px 70px -30px rgba(19,17,14,.55),inset 0 1px 0 rgba(255,255,255,.7);color:var(--primary)}
.glass-dark{background:rgba(19,17,14,.42);backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);border:1px solid rgba(255,255,255,.18);
  border-radius:24px;color:#fff}

/* ---------- Cartes / sections ---------- */
.card{background:#fff;border:1px solid var(--outline);border-radius:22px}
.card-soft{background:var(--container);border-radius:22px}
.section{padding-block:88px}
.section-sm{padding-block:56px}

/* helpers de mise en page */
.grid{display:grid;gap:24px}
.g2,.g3,.g4{grid-template-columns:1fr}
@media(min-width:768px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}}
.tac{text-align:center}.mxa{margin-inline:auto}.stack{display:grid;gap:1rem}
.lede{font-size:1.05rem;color:var(--variant);max-width:42rem}
h2.title{font-family:Montserrat,sans-serif;font-weight:300;font-size:clamp(1.9rem,4vw,3rem);letter-spacing:-.01em;line-height:1.1;margin:.6rem 0 0}
h3.sub{font-family:Montserrat,sans-serif;font-weight:400;font-size:1.25rem;margin:0}
.bg-container{background:var(--container)}
.bg-dark{background:var(--primary);color:var(--surface)}

/* images organiques (Stitch) */
.organic-a{border-radius:5rem 0 5rem 0;overflow:hidden}
.organic-b{border-radius:0 5rem 0 5rem;overflow:hidden}
@media(max-width:767px){.organic-a,.organic-b{border-radius:2rem}}
.zoomimg{overflow:hidden;border-radius:20px}
.zoomimg img{transition:transform 5s cubic-bezier(.2,.6,.2,1);width:100%;height:100%;object-fit:cover}
.zoomimg:hover img{transform:scale(1.08)}

/* feed Instagram */
.feed{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;grid-auto-flow:row dense}
@media(min-width:768px){.feed{grid-template-columns:repeat(4,1fr);gap:16px;grid-auto-rows:220px}}
.feed .big{grid-column:span 2;grid-row:span 2}
.feed .tall{grid-row:span 2}
.feed figure{position:relative;margin:0;overflow:hidden;border-radius:18px;background:#ddd}
.feed figure img{width:100%;height:100%;object-fit:cover;transition:transform 5s cubic-bezier(.2,.6,.2,1)}
.feed figure:hover img{transform:scale(1.07)}
.feed figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px;font-size:.72rem;letter-spacing:.04em;
  color:#fff;background:linear-gradient(0deg,rgba(19,17,14,.6),transparent);opacity:0;transition:.3s}
.feed figure:hover figcaption{opacity:1}
@media(max-width:767px){.feed{grid-auto-rows:150px}.feed .big{grid-row:span 2}}

/* ---------- Reveal au scroll ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}
.scroll-hint{animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(7px);opacity:1}}

/* ---------- FOOTER ---------- */
#footer{background:var(--container);border-top:1px solid var(--outline);color:var(--variant)}
#footer .brand{font-family:Montserrat,sans-serif;font-weight:600;color:var(--primary);font-size:1.3rem}
#footer .foot-grid{display:grid;gap:40px;grid-template-columns:1fr}
@media(min-width:760px){#footer .foot-grid{grid-template-columns:2.2fr 1fr 1fr;gap:48px}}
#footer .col-title{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--variant);opacity:.7}
#footer ul{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.6rem}
#footer ul a{color:var(--variant);transition:.18s}
#footer ul a:hover{color:var(--primary)}
#footer .foot-links a{display:inline-flex;align-items:center;gap:.45rem}
#footer .foot-links a::before{content:"›";color:var(--brass)}
#footer .foot-links a:hover{transform:translateX(2px)}
#footer a:hover{color:var(--primary)}

/* bandeau test */
#testbar{background:#fef3c7;color:#92400e;font-size:12px;text-align:center;padding:7px 14px}

/* ============================================================
   MODAL DEVIS — clair, animé, 1 clic = étape suivante
   ============================================================ */
#modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
#modal.open{opacity:1;visibility:visible;transition:opacity .3s ease}
#modal .ovl{position:absolute;inset:0;background:rgba(19,17,14,.55);backdrop-filter:blur(5px)}
#modal .card-modal{position:relative;width:92%;max-width:520px;margin:16px;background:var(--surface);
  border-radius:26px;padding:26px;box-shadow:0 40px 100px -30px rgba(19,17,14,.6);
  transform:translateY(24px) scale(.96);transition:transform .4s cubic-bezier(.16,1,.3,1);color:var(--on-surface)}
#modal.open .card-modal{transform:none}
@media(min-width:768px){#modal .card-modal{padding:34px}}
.q-close{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:999px;border:1px solid var(--outline);
  background:#fff;color:var(--variant);cursor:pointer;display:grid;place-items:center}
.q-close:hover{color:var(--primary)}
.q-bar-track{height:6px;border-radius:999px;background:var(--outline);overflow:hidden;margin-top:14px}
.q-bar{height:100%;border-radius:999px;background:var(--brass);width:0;transition:width .7s cubic-bezier(.16,1,.3,1)}
.q-pct{font-weight:600;font-size:.95rem;color:var(--primary);font-variant-numeric:tabular-nums}

.qstep{display:none;animation:stepin .38s cubic-bezier(.16,1,.3,1)}
.qstep.active{display:block}
@keyframes stepin{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}

/* choix = grosse cible cliquable, 1 clic = avance */
.choice{display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;cursor:pointer;
  background:#fff;border:1px solid var(--outline);border-radius:16px;padding:.95rem 1.05rem;
  font-size:.95rem;color:var(--on-surface);transition:.18s;font-weight:400}
.choice:hover{border-color:var(--brass);transform:translateY(-1px);box-shadow:0 8px 24px -16px rgba(19,17,14,.5)}
.choice .ic{color:var(--brass)}
.choice .arrow{margin-left:auto;color:var(--outline);transition:.18s}
.choice:hover .arrow{color:var(--brass);transform:translateX(3px)}
.choice.sel{border-color:var(--brass);background:rgba(176,123,83,.08)}

.qin{width:100%;background:#fff;border:1px solid var(--outline);border-radius:14px;
  padding:.85rem 1rem;font-size:.95rem;color:var(--on-surface);outline:none;font-family:inherit}
.qin:focus{border-color:var(--brass);box-shadow:0 0 0 3px rgba(176,123,83,.12)}
.qin::placeholder{color:#a8a298}
.qfield label{display:block;font-size:.78rem;letter-spacing:.04em;color:var(--variant);margin:0 0 .35rem .2rem;font-weight:500}

#acList{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:5;background:#fff;
  border:1px solid var(--outline);border-radius:14px;overflow:hidden;box-shadow:0 18px 40px -20px rgba(19,17,14,.4)}
#acList button{display:flex;gap:.55rem;align-items:center;width:100%;text-align:left;padding:.65rem .9rem;
  color:var(--on-surface);font-size:.88rem;background:#fff;border:0;cursor:pointer}
#acList button:hover{background:var(--container)}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero .bg{animation:none}.scroll-hint{animation:none}.qstep{animation:none}html{scroll-behavior:auto}
}