/* Béton Meulox — site 2026 (Vision Production)
   Noir béton, bronze du logo, gris acier. Effet « plancher mouillé » : reflets, lueurs, flocons. */
:root{color-scheme:dark;
  --noir:#0a0a0b; --noir-2:#111113; --noir-3:#18181b; --ligne:rgba(255,255,255,.08);
  --texte:#ecebe8; --doux:#a9a7a1; --pale:#6f6d68;
  --bronze:#c8933f; --bronze-2:#e9bf72; --bronze-3:#8a5f22; --acier:#9aa0a6;
  --grad-bronze:linear-gradient(100deg,#8a5f22 0%,#c8933f 25%,#f3d18f 45%,#c8933f 62%,#7a521b 80%,#e9bf72 100%);
  --r:22px; --r-s:14px;
  --f-titre:"Big Shoulders Display","Arial Narrow",sans-serif;
  --f-texte:"Inter",system-ui,-apple-system,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;
  --pad:clamp(20px,5vw,72px);
  --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--noir);color:var(--texte);font:400 17px/1.65 var(--f-texte);overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--bronze);color:#000}
.wrap{width:min(1280px,100%);margin:0 auto;padding:0 var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px;top:8px;z-index:999;background:var(--bronze);color:#000;padding:10px 16px;border-radius:10px}
.skip:focus{left:8px}

/* ---------- typographie ---------- */
.label{font:500 12px/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--bronze-2);display:inline-flex;align-items:center;gap:10px}
.label::before{content:"";width:26px;height:1px;background:currentColor;opacity:.7}
.h1,.h2,.h3{font-family:var(--f-titre);font-weight:800;text-transform:uppercase;line-height:.9;letter-spacing:.005em}
.h1{font-size:clamp(58px,10.5vw,168px)}
.h2{font-size:clamp(42px,6.4vw,96px)}
.h3{font-size:clamp(26px,2.6vw,38px);line-height:1}
.or{background:var(--grad-bronze);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:coulee 9s ease-in-out infinite}
@keyframes coulee{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.lead{font-size:clamp(18px,1.6vw,21px);color:var(--doux);max-width:60ch}
.muted{color:var(--doux)}
p+p{margin-top:1em}

/* ---------- boutons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:12px;padding:17px 26px;border-radius:999px;font:700 14px/1 var(--f-texte);letter-spacing:.08em;text-transform:uppercase;overflow:hidden;isolation:isolate;transition:transform .35s var(--ease),box-shadow .35s}
.btn svg{width:18px;height:18px;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn--or{color:#140d03;background:var(--grad-bronze);background-size:200% 100%;box-shadow:0 10px 40px -10px rgba(200,147,63,.65),inset 0 1px 0 rgba(255,255,255,.45)}
.btn--or:hover{background-position:100% 0;transform:translateY(-2px);box-shadow:0 16px 50px -10px rgba(233,191,114,.8),inset 0 1px 0 rgba(255,255,255,.5)}
.btn--or::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 62%);transform:translateX(-120%);transition:transform .9s var(--ease);z-index:-1}
.btn--or:hover::after{transform:translateX(120%)}
.btn--ghost{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.03);backdrop-filter:blur(10px)}
.btn--ghost:hover{border-color:var(--bronze);color:var(--bronze-2)}

/* ---------- en-tête ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;transition:background .4s,backdrop-filter .4s,border-color .4s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(10,10,11,.72);backdrop-filter:blur(18px) saturate(140%);border-color:var(--ligne)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:84px;gap:24px}
.nav__logo img{height:64px;width:auto;filter:drop-shadow(0 4px 18px rgba(200,147,63,.25))}
.nav__liens{display:flex;gap:30px;font:600 13px/1 var(--f-texte);letter-spacing:.12em;text-transform:uppercase}
.nav__liens a{position:relative;color:var(--doux);transition:color .3s;padding:8px 0}
.nav__liens a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--bronze);transition:right .4s var(--ease)}
.nav__liens a:hover,.nav__liens a[aria-current]{color:var(--texte)}
.nav__liens a:hover::after,.nav__liens a[aria-current]::after{right:0}
.nav__cta{display:flex;align-items:center;gap:18px}
.nav__tel{font:600 15px/1 var(--f-texte);color:var(--texte);display:flex;align-items:center;gap:8px}
.nav__tel svg{width:16px;height:16px;color:var(--bronze)}
.nav .btn{padding:13px 20px;font-size:12px}
.burger{display:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--ligne);place-items:center}
.burger span{display:block;width:18px;height:1.5px;background:var(--texte);margin:4px auto;transition:transform .35s}
.menu-mobile{position:fixed;inset:0;z-index:49;background:rgba(8,8,9,.97);backdrop-filter:blur(20px);display:flex;flex-direction:column;justify-content:center;padding:100px var(--pad) 40px;gap:8px;clip-path:circle(0% at calc(100% - 46px) 42px);transition:clip-path .7s var(--ease)}
.menu-mobile.open{clip-path:circle(150% at calc(100% - 46px) 42px)}
.menu-mobile a{font:800 clamp(38px,9vw,60px)/1.05 var(--f-titre);text-transform:uppercase}
.menu-mobile a:hover{color:var(--bronze-2)}
.menu-mobile .btn{margin-top:28px;align-self:flex-start;font:700 14px/1 var(--f-texte)}
body.menu-ouvert .burger span:first-child{transform:translateY(3px) rotate(45deg)}
body.menu-ouvert .burger span:last-child{transform:translateY(-3px) rotate(-45deg)}

/* ---------- héros ---------- */
.hero{position:relative;min-height:clamp(640px,100svh,940px);display:flex;align-items:flex-end;padding:140px 0 70px;overflow:hidden;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);animation:kb 22s ease-out forwards}
@keyframes kb{to{transform:scale(1)}}
.hero__media::after{content:"";position:absolute;inset:0;background:
  radial-gradient(120% 80% at 70% 20%,transparent 0%,rgba(10,10,11,.35) 55%,rgba(10,10,11,.92) 100%),
  linear-gradient(180deg,rgba(10,10,11,.55) 0%,rgba(10,10,11,.1) 35%,rgba(10,10,11,.85) 78%,var(--noir) 100%)}
.hero__reflet{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,240,210,.10) 46%,rgba(255,255,255,.16) 50%,rgba(255,240,210,.08) 54%,transparent 65%);background-size:250% 100%;animation:reflet 7s ease-in-out infinite;mix-blend-mode:screen}
@keyframes reflet{0%{background-position:120% 0}60%,100%{background-position:-60% 0}}
.hero__lueur{position:absolute;width:60vmax;height:60vmax;border-radius:50%;background:radial-gradient(circle,rgba(200,147,63,.22),transparent 60%);left:var(--mx,60%);top:var(--my,40%);transform:translate(-50%,-50%);z-index:-1;pointer-events:none;transition:left .6s var(--ease),top .6s var(--ease);mix-blend-mode:screen}
.hero__haut{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.pastille{display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(10,10,11,.45);backdrop-filter:blur(12px);font:500 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--texte)}
.pastille i{width:7px;height:7px;border-radius:50%;background:var(--bronze-2);box-shadow:0 0 0 0 rgba(233,191,114,.7);animation:pouls 2.2s infinite}
@keyframes pouls{70%{box-shadow:0 0 0 10px rgba(233,191,114,0)}100%{box-shadow:0 0 0 0 rgba(233,191,114,0)}}
.hero h1{max-width:13ch}
.hero h1 .ligne{display:block;overflow:hidden;padding-top:.08em;margin-top:-.08em}
.hero h1 .ligne>span{display:inline-block;transform:translateY(105%);animation:monte 1.1s var(--ease) forwards}
.hero h1 .ligne:nth-child(2)>span{animation-delay:.12s}
.hero h1 .ligne:nth-child(3)>span{animation-delay:.24s}
@keyframes monte{to{transform:none}}
.hero__bas{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:end;margin-top:34px}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hero__defiler{position:absolute;right:var(--pad);bottom:34px;font:500 11px/1 var(--f-mono);letter-spacing:.3em;text-transform:uppercase;color:var(--doux);writing-mode:vertical-rl;display:flex;align-items:center;gap:14px}
.hero__defiler::after{content:"";width:1px;height:60px;background:linear-gradient(var(--bronze),transparent);animation:goutte 2s ease-in-out infinite}
@keyframes goutte{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- bandeau défilant ---------- */
.ruban{border-block:1px solid var(--ligne);background:var(--noir-2);overflow:hidden;padding:22px 0}
.ruban__piste{display:flex;gap:48px;width:max-content;animation:defile 38s linear infinite;font:800 clamp(22px,2.4vw,32px)/1 var(--f-titre);text-transform:uppercase;letter-spacing:.02em;color:var(--doux)}
.ruban__piste span{display:flex;align-items:center;gap:48px}
.ruban__piste span::after{content:"";width:12px;height:12px;background:var(--grad-bronze);transform:rotate(45deg)}
@keyframes defile{to{transform:translateX(-50%)}}
.ruban:hover .ruban__piste{animation-play-state:paused}

/* ---------- sections ---------- */
.section{padding:clamp(64px,8vw,120px) 0;position:relative}
.section--pale{background:linear-gradient(180deg,var(--noir) 0%,var(--noir-2) 20%,var(--noir-2) 80%,var(--noir) 100%)}
.entete{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.entete .h2{margin-top:18px}

/* chiffres / promesses */
.promesses{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne)}
.promesse{padding:36px 28px;border-right:1px solid var(--ligne);position:relative}
.promesse:last-child{border-right:0}
.promesse strong{display:block;font:800 clamp(34px,3.6vw,54px)/1 var(--f-titre);text-transform:uppercase}
.promesse span{display:block;margin-top:10px;color:var(--doux);font-size:15px}

/* ---------- sélecteur de finition ---------- */
.finitions{display:grid;grid-template-columns:.9fr 1.3fr;gap:clamp(28px,4vw,60px);align-items:stretch}
.finitions__onglets{display:flex;flex-direction:column;gap:6px}
.onglet{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:16px;text-align:left;padding:22px 22px;border-radius:var(--r-s);border:1px solid transparent;transition:background .35s,border-color .35s}
.onglet b{font:500 12px/1 var(--f-mono);color:var(--pale)}
.onglet strong{font:800 clamp(24px,2.3vw,34px)/1 var(--f-titre);text-transform:uppercase;color:var(--doux);transition:color .3s}
.onglet em{font-style:normal;font:500 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--pale)}
.onglet[aria-selected=true]{background:linear-gradient(90deg,rgba(200,147,63,.12),rgba(200,147,63,.02));border-color:rgba(200,147,63,.35)}
.onglet[aria-selected=true] strong{color:var(--texte)}
.onglet[aria-selected=true] b{color:var(--bronze-2)}
.onglet:hover strong{color:var(--texte)}
.finitions__scene{position:relative;border-radius:var(--r);overflow:hidden;min-height:620px;background:var(--noir-3);border:1px solid var(--ligne)}
.panneau{position:absolute;inset:0;opacity:0;visibility:hidden;clip-path:circle(0% at 15% 85%);transition:clip-path 1.1s var(--ease),opacity .2s .9s,visibility 0s 1.1s}
.panneau.actif{opacity:1;visibility:visible;clip-path:circle(150% at 15% 85%);transition:clip-path 1.1s var(--ease),opacity 0s,visibility 0s}
.panneau img{width:100%;height:100%;object-fit:cover}
.panneau::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(10,10,11,.92))}
.panneau__texte{position:absolute;left:0;right:0;bottom:0;padding:clamp(24px,3vw,40px);z-index:2}
.panneau__texte p{color:#d6d4cf;max-width:52ch}
.panneau__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.panneau__tags span{padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px);font:500 12px/1 var(--f-mono);letter-spacing:.06em}

/* ---------- services ---------- */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.carte{position:relative;border-radius:var(--r);overflow:hidden;min-height:470px;display:flex;flex-direction:column;justify-content:flex-end;padding:30px;border:1px solid var(--ligne);isolation:isolate;transform-style:preserve-3d;transition:transform .5s var(--ease),border-color .4s}
.carte img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.2s var(--ease),filter .6s}
.carte::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,10,11,.05) 25%,rgba(10,10,11,.88) 82%)}
.carte::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(420px circle at var(--x,50%) var(--y,50%),rgba(255,236,200,.16),transparent 45%);opacity:0;transition:opacity .4s}
.carte:hover{border-color:rgba(200,147,63,.45)}
.carte:hover::after{opacity:1}
.carte:hover img{transform:scale(1.07)}
.carte .num{position:absolute;top:24px;left:30px;font:500 12px/1 var(--f-mono);color:var(--bronze-2);letter-spacing:.2em}
.carte .fleche{position:absolute;top:22px;right:22px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(10,10,11,.5);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px);transition:background .4s,transform .4s var(--ease)}
.carte .fleche svg{width:18px;height:18px}
.carte:hover .fleche{background:var(--bronze);color:#140d03;transform:rotate(-45deg)}
.carte p{color:#cfcdc8;font-size:15px;margin-top:10px}
.carte--large{grid-column:span 2}

/* ---------- processus ---------- */
.processus{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:start}
.processus__media{position:sticky;top:110px;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;border:1px solid var(--ligne)}
.processus__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .9s var(--ease),transform 1.4s var(--ease)}
.processus__media img.actif{opacity:1;transform:none}
.processus__media .compteur{position:absolute;left:22px;bottom:20px;z-index:2;font:800 110px/1 var(--f-titre);color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.55)}
.etapes{display:flex;flex-direction:column}
.etape{padding:42px 0;border-top:1px solid var(--ligne);opacity:.35;transition:opacity .5s}
.etape.actif{opacity:1}
.etape .label{margin-bottom:16px}
.etape p{color:var(--doux);margin-top:14px;max-width:48ch}

/* ---------- galerie ---------- */
.filtres{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.filtre{padding:11px 18px;border-radius:999px;border:1px solid var(--ligne);font:600 13px/1 var(--f-texte);letter-spacing:.06em;color:var(--doux);transition:all .3s}
.filtre[aria-pressed=true],.filtre:hover{color:#140d03;background:var(--bronze-2);border-color:var(--bronze-2)}
.galerie{columns:3 320px;column-gap:14px}
.galerie figure{break-inside:avoid;margin-bottom:14px;border-radius:var(--r-s);overflow:hidden;position:relative;cursor:zoom-in;border:1px solid var(--ligne);transition:opacity .5s,transform .5s var(--ease)}
.galerie figure.cache{display:none}
.galerie img{width:100%;height:auto;transition:transform 1s var(--ease)}
.galerie figure:hover img{transform:scale(1.05)}
.galerie figcaption{position:absolute;left:12px;bottom:12px;padding:8px 12px;border-radius:999px;background:rgba(10,10,11,.6);backdrop-filter:blur(10px);font:500 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;opacity:0;transform:translateY(6px);transition:all .4s var(--ease)}
.galerie figure:hover figcaption{opacity:1;transform:none}
.visionneuse{position:fixed;inset:0;z-index:200;background:rgba(5,5,6,.94);backdrop-filter:blur(14px);display:grid;place-items:center;padding:4vmin;opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
.visionneuse.open{opacity:1;visibility:visible;transition:opacity .4s}
.visionneuse img,.visionneuse video{max-height:88vh;max-width:92vw;border-radius:14px;box-shadow:0 30px 120px rgba(0,0,0,.6)}
.visionneuse button{position:absolute;top:20px;right:20px;width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.2);font-size:22px}

/* ---------- vidéo + pourquoi ---------- */
.duo{display:grid;grid-template-columns:auto 1fr;gap:clamp(40px,7vw,110px);align-items:center}
.cell{position:relative;width:min(340px,80vw);aspect-ratio:9/19;border-radius:46px;padding:12px;background:linear-gradient(145deg,#2a2a2e,#0d0d0f);box-shadow:0 50px 120px -30px rgba(200,147,63,.35),inset 0 0 0 1px rgba(255,255,255,.08)}
.cell video{width:100%;height:100%;object-fit:cover;border-radius:36px}
.cell::before{content:"";position:absolute;top:22px;left:50%;transform:translateX(-50%);width:90px;height:24px;border-radius:20px;background:#000;z-index:2}
.cell__son{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;padding:10px 16px;border-radius:999px;background:rgba(10,10,11,.6);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);font:600 12px/1 var(--f-texte);letter-spacing:.08em;text-transform:uppercase}
.raisons{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
.raison{padding:26px;border-radius:var(--r-s);background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.01));border:1px solid var(--ligne)}
.raison svg{width:30px;height:30px;color:var(--bronze-2);margin-bottom:16px}
.raison h3{font:800 24px/1.05 var(--f-titre);text-transform:uppercase}
.raison p{color:var(--doux);font-size:15px;margin-top:8px}

/* ---------- estimateur ---------- */
.estimateur{display:grid;grid-template-columns:1.1fr 1fr;border-radius:28px;overflow:hidden;border:1px solid rgba(200,147,63,.3);background:radial-gradient(120% 140% at 0% 0%,rgba(200,147,63,.16),transparent 55%),var(--noir-2)}
.estimateur__g{padding:clamp(30px,4vw,56px)}
.estimateur__d{padding:clamp(30px,4vw,56px);background:rgba(0,0,0,.25);border-left:1px solid var(--ligne);display:flex;flex-direction:column;justify-content:center}
.champs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}
.champ{display:flex;flex-direction:column;gap:8px}
.champ--plein{grid-column:1/-1}
.champ label{font:500 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--doux)}
.champ input,.champ select,.champ textarea{width:100%;padding:16px 18px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);color:var(--texte);font:500 16px/1.3 var(--f-texte);transition:border-color .3s,background .3s;appearance:none}
.champ select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23c8933f' stroke-width='1.6'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center}
.champ select option{background:#151517}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:0;border-color:var(--bronze);background:rgba(200,147,63,.06)}
.surface{font:800 clamp(80px,11vw,150px)/.85 var(--f-titre);letter-spacing:-.01em}
.surface small{font-size:.32em;color:var(--doux);margin-left:6px}
.puces{list-style:none;margin-top:24px;display:grid;gap:12px}
.puces li{display:flex;gap:12px;color:var(--doux)}
.puces li::before{content:"";flex:none;width:8px;height:8px;margin-top:9px;transform:rotate(45deg);background:var(--grad-bronze)}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,6vw,90px)}
.faq details,.faq-liste details{border-bottom:1px solid var(--ligne)}
.faq summary,.faq-liste summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:26px 0;font:700 clamp(18px,1.6vw,21px)/1.35 var(--f-texte)}
.faq summary::-webkit-details-marker,.faq-liste summary::-webkit-details-marker{display:none}
.faq summary i,.faq-liste summary i{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--ligne);position:relative;transition:transform .4s var(--ease),background .3s}
.faq summary i::before,.faq summary i::after,.faq-liste summary i::before,.faq-liste summary i::after{content:"";position:absolute;inset:50% 8px auto;height:1.5px;background:var(--texte);transform:translateY(-50%)}
.faq summary i::after,.faq-liste summary i::after{transform:translateY(-50%) rotate(90deg);transition:transform .4s}
.faq details[open] summary i,.faq-liste details[open] summary i{background:var(--bronze);border-color:var(--bronze)}
.faq details[open] summary i::after,.faq-liste details[open] summary i::after{transform:translateY(-50%) rotate(0)}
.faq .reponse,.faq-liste .reponse{padding:0 0 26px;color:var(--doux);max-width:70ch}

/* ---------- zones ---------- */
.zones{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.zones a,.zones span{padding:12px 18px;border-radius:999px;border:1px solid var(--ligne);color:var(--doux);font-weight:500;transition:all .3s}
.zones a:hover{border-color:var(--bronze);color:var(--texte)}

/* ---------- appel final ---------- */
.final{position:relative;overflow:hidden;border-radius:32px;padding:clamp(50px,8vw,120px) clamp(28px,6vw,90px);isolation:isolate;border:1px solid rgba(200,147,63,.3)}
.final img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.final::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(10,10,11,.95) 0%,rgba(10,10,11,.75) 50%,rgba(10,10,11,.35) 100%)}
.final .h2{max-width:14ch}
.final__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}

/* ---------- pied ---------- */
.pied{padding:90px 0 40px;border-top:1px solid var(--ligne);margin-top:clamp(90px,12vw,170px)}
.pied__grille{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.pied h4{font:500 12px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--bronze-2);margin-bottom:20px}
.pied ul{list-style:none;display:grid;gap:12px;color:var(--doux)}
.pied a:hover{color:var(--texte)}
.pied__geant{font:800 clamp(80px,19vw,300px)/.8 var(--f-titre);text-transform:uppercase;letter-spacing:-.01em;margin-top:70px;text-align:center;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 85%);-webkit-background-clip:text;background-clip:text;color:transparent;user-select:none}
.pied__bas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding-top:26px;border-top:1px solid var(--ligne);color:var(--pale);font-size:14px}

/* ---------- pages intérieures ---------- */
.page-hero{position:relative;padding:190px 0 90px;overflow:hidden;isolation:isolate;min-height:70svh;display:flex;align-items:flex-end}
.page-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.page-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,10,11,.6),rgba(10,10,11,.4) 40%,var(--noir))}
.fil{font:500 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--doux);margin-bottom:24px}
.fil a:hover{color:var(--bronze-2)}
.contenu{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(30px,6vw,90px);align-items:start}
.prose h2{font:800 clamp(32px,3.6vw,52px)/.95 var(--f-titre);text-transform:uppercase;margin:56px 0 18px}
.prose h2:first-child{margin-top:0}
.prose h3{font:700 21px/1.3 var(--f-texte);margin:30px 0 10px}
.prose p,.prose li{color:var(--doux)}
.prose ul{margin:14px 0 0 0;list-style:none;display:grid;gap:10px}
.prose ul li{padding-left:22px;position:relative}
.prose ul li::before{content:"";position:absolute;left:0;top:10px;width:8px;height:8px;transform:rotate(45deg);background:var(--grad-bronze)}
.prose strong{color:var(--texte)}
.encadre{position:sticky;top:110px;padding:30px;border-radius:var(--r);border:1px solid rgba(200,147,63,.3);background:radial-gradient(120% 100% at 0 0,rgba(200,147,63,.14),transparent 60%),var(--noir-2)}
.encadre h3{font:800 30px/1 var(--f-titre);text-transform:uppercase}
.encadre p{color:var(--doux);margin:12px 0 22px}
.encadre .btn{width:100%;justify-content:center}
.encadre .btn+.btn{margin-top:10px}
.bande-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}
.bande-photos img{border-radius:var(--r-s);aspect-ratio:4/5;object-fit:cover;width:100%;border:1px solid var(--ligne)}
.tableau{width:100%;border-collapse:collapse;margin-top:18px;font-size:15px}
.tableau th,.tableau td{text-align:left;padding:14px 12px;border-bottom:1px solid var(--ligne)}
.tableau th{font:500 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--bronze-2)}
.tableau td{color:var(--doux)}
.tableau td:first-child{color:var(--texte);font-weight:600}

/* ---------- formulaire contact ---------- */
.formulaire{padding:clamp(28px,4vw,50px);border-radius:28px;border:1px solid var(--ligne);background:var(--noir-2)}
.formulaire .btn{margin-top:22px}
.note{font-size:13px;color:var(--pale);margin-top:14px}
.merci{display:none;padding:22px;border-radius:14px;background:rgba(200,147,63,.1);border:1px solid rgba(200,147,63,.4);margin-top:18px}

/* ---------- flocons (canvas) ---------- */
.flocons{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.55}

/* ---------- apparitions ---------- */
.js [data-r]{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.js [data-r].vu{opacity:1;transform:none}
[data-r="2"]{transition-delay:.1s}[data-r="3"]{transition-delay:.2s}[data-r="4"]{transition-delay:.3s}

/* ---------- barre mobile ---------- */
.barre-mobile{display:none}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .nav__liens,.nav__tel{display:none}
  .burger{display:grid}
  .services{grid-template-columns:1fr 1fr}
  .carte--large{grid-column:span 2}
  .pied__grille{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  body{font-size:16px}
  .entete,.hero__bas,.finitions,.processus,.duo,.estimateur,.faq,.contenu{grid-template-columns:1fr}
  .promesses{grid-template-columns:1fr 1fr}
  .promesse:nth-child(2){border-right:0}
  .promesse:nth-child(-n+2){border-bottom:1px solid var(--ligne)}
  .finitions__scene{min-height:480px}
  .processus__media{position:relative;top:0;aspect-ratio:4/3}
  .etape{opacity:1;padding:30px 0}
  .services{grid-template-columns:1fr}
  .carte--large{grid-column:auto}
  .carte{min-height:400px}
  .cell{margin:0 auto}
  .raisons{grid-template-columns:1fr}
  .estimateur__d{border-left:0;border-top:1px solid var(--ligne)}
  .champs{grid-template-columns:1fr}
  .encadre{position:relative;top:0}
  .bande-photos{grid-template-columns:1fr 1fr}
  .hero__defiler{display:none}
  .nav__cta .btn{display:none}
  .barre-mobile{display:grid;grid-template-columns:1fr 1.4fr;gap:8px;position:fixed;left:10px;right:10px;bottom:10px;z-index:60;padding:8px;border-radius:999px;background:rgba(14,14,16,.85);backdrop-filter:blur(16px);border:1px solid var(--ligne)}
  .barre-mobile a{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;border-radius:999px;font:700 13px/1 var(--f-texte);letter-spacing:.06em;text-transform:uppercase}
  .barre-mobile a:first-child{border:1px solid rgba(255,255,255,.16)}
  .barre-mobile a:last-child{background:var(--grad-bronze);color:#140d03}
  .pied{padding-bottom:110px}
}
@media (max-width:520px){
  .pied__grille{grid-template-columns:1fr}
  .promesse{padding:26px 18px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-r]{opacity:1;transform:none}
  .hero h1 .ligne>span{transform:none}
}

/* ---------- intro : le logo roule comme une meule (repris de la vidéo Béton_08) ---------- */
.intro{position:fixed;inset:0;z-index:300;background:#050506;overflow:hidden;cursor:pointer}
.intro canvas{position:absolute;inset:0;width:100%;height:100%}
/* Logo 563×338 : anneau centré (281,168), rayon 94–140 ; texte entre y 140 et 214 */
.roue{position:absolute;left:0;top:0;width:min(560px,86vw);aspect-ratio:563/338;will-change:transform;z-index:2}
.roue img{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 18px 40px rgba(0,0,0,.6))}
.roue__disque{transform-origin:49.9% 49.85%;will-change:transform}

.intro__pct{position:absolute;left:50%;bottom:8vh;transform:translateX(-50%);z-index:3;font:500 12px/1 var(--f-mono);letter-spacing:.4em;color:#a9a7a1;text-transform:uppercase;transition:opacity .4s}
.intro__pct b{color:#f3d18f;font-weight:500}
.intro__passer{position:absolute;right:22px;top:22px;z-index:3;font:500 11px/1 var(--f-mono);letter-spacing:.3em;text-transform:uppercase;color:#6f6d68;padding:10px 14px;border:1px solid rgba(255,255,255,.12);border-radius:999px;transition:opacity .4s}
.intro.sortie .intro__pct,.intro.sortie .intro__passer{opacity:0}
html.intro-active body{overflow:hidden}
html.intro-active:not(.intro-sortie) .hero h1 .ligne>span,html.intro-active:not(.intro-sortie) .hero__media img{animation-play-state:paused}
html:not(.intro-active) .intro{display:none}

/* ---------- reel de chantier dans le héros ---------- */
.hero__reel{position:absolute;right:var(--pad);top:50%;transform:translateY(-46%) rotate(2.5deg);width:clamp(220px,19vw,300px);aspect-ratio:9/16;border-radius:26px;overflow:hidden;border:1px solid rgba(255,255,255,.18);
  box-shadow:0 40px 100px -20px rgba(0,0,0,.8),0 0 0 8px rgba(10,10,11,.35),0 30px 90px -30px rgba(200,147,63,.55);z-index:1;animation:flotte 7s ease-in-out infinite}
.hero__reel video{width:100%;height:100%;object-fit:cover}
.hero__reel::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.18) 0%,transparent 35%);pointer-events:none}
.hero__reel figcaption{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(10,10,11,.6);backdrop-filter:blur(10px);font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
.hero__reel figcaption i{width:7px;height:7px;border-radius:50%;background:#ff3b30;box-shadow:0 0 0 0 rgba(255,59,48,.7);animation:pouls 1.8s infinite}
@keyframes flotte{0%,100%{transform:translateY(-46%) rotate(2.5deg)}50%{transform:translateY(-50%) rotate(1deg)}}
.hero .wrap{position:relative;z-index:2}
@media (max-width:1180px){.hero__reel{display:none}}

/* ---------- avis ---------- */
.avis{display:grid;grid-template-columns:.8fr 1.4fr;gap:clamp(30px,5vw,70px);align-items:center}
.avis__note{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.avis__chiffre{font:900 clamp(110px,14vw,200px)/.8 var(--f-titre);margin-top:10px}
.avis__etoiles{color:var(--bronze-2);letter-spacing:.18em;font-size:20px}
.avis__note .btn{margin-top:10px}
.avis__cartes{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.avis__carte{padding:30px;border-radius:var(--r);background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));border:1px solid var(--ligne);display:flex;flex-direction:column;gap:16px}
.avis__carte p{font:700 clamp(22px,2vw,28px)/1.2 var(--f-texte);color:var(--texte)}
.avis__carte footer{font:500 12px/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--doux);margin-top:auto}

/* ---------- comparatif ---------- */
.comparatif{border-radius:24px;border:1px solid var(--ligne);overflow:hidden;background:var(--noir-2)}
.comparatif__ligne{display:grid;grid-template-columns:1fr 1.1fr 1.1fr;align-items:center;border-top:1px solid var(--ligne)}
.comparatif__ligne>*{padding:20px 24px}
.comparatif__ligne:first-child{border-top:0}
.comparatif__tete strong{font:800 clamp(20px,2vw,28px)/1 var(--f-titre);text-transform:uppercase}
.comparatif__tete strong:nth-child(2){background:linear-gradient(180deg,rgba(200,147,63,.2),rgba(200,147,63,.06));color:var(--bronze-2)}
.comparatif__ligne span{color:var(--doux);font-weight:500}
.comparatif__ligne b{font-weight:600;display:flex;align-items:center;gap:10px}
.comparatif__ligne b.oui{background:rgba(200,147,63,.06);color:var(--texte)}
.comparatif__ligne b.oui::before{content:"✓";flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--grad-bronze);color:#140d03;font-size:13px}
.comparatif__ligne b.non{color:var(--pale)}
.comparatif__ligne b.non::before{content:"✕";flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--ligne);font-size:12px}
@media (max-width:860px){
  .avis,.avis__cartes{grid-template-columns:1fr}
  .comparatif__ligne{grid-template-columns:1fr 1fr}
  .comparatif__ligne>span{grid-column:1/-1;padding-bottom:0}
  .comparatif__tete span{display:none}
  .comparatif__ligne>*{padding:14px 16px}
}
@media (min-width:1181px){.hero__bas{max-width:calc(100% - clamp(260px,23vw,360px))}}

/* ---------- capsules vidéo ---------- */
.capsules{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px 0 10px}
.capsules::-webkit-scrollbar{display:none}
.capsules__piste{display:flex;gap:16px;width:max-content;padding:0 max(var(--pad),calc((100vw - 1280px)/2 + var(--pad)))}
.capsule{position:relative;flex:none;width:clamp(200px,20vw,270px);aspect-ratio:9/16;border-radius:22px;overflow:hidden;border:1px solid var(--ligne);background:var(--noir-3);scroll-snap-align:start;cursor:pointer;transition:transform .5s var(--ease),border-color .4s}
.capsule img,.capsule video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.capsule::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,10,11,.75));pointer-events:none}
.capsule:hover{transform:translateY(-6px);border-color:rgba(200,147,63,.5)}
.capsule__jouer{position:absolute;left:50%;top:50%;z-index:2;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;display:grid;place-items:center;background:rgba(10,10,11,.45);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(8px);color:#fff;transition:transform .4s var(--ease),background .3s,opacity .3s}
.capsule__jouer svg{width:24px;height:24px;margin-left:3px}
.capsule:hover .capsule__jouer{transform:scale(1.1);background:var(--bronze);color:#140d03}
.capsule.joue .capsule__jouer{opacity:0}
.capsules__nav{display:flex;align-items:center;gap:10px;margin-top:22px}
.capsules__fleche{width:52px;height:52px;border-radius:50%;border:1px solid var(--ligne);display:grid;place-items:center;transition:all .3s}
.capsules__fleche svg{width:20px;height:20px}
.capsules__fleche:hover{background:var(--bronze-2);color:#140d03;border-color:var(--bronze-2)}
.capsules__nav .muted{margin-left:8px;font:500 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
.visionneuse video{max-height:88vh;max-width:92vw;border-radius:14px;background:#000}

.prose .zones{margin-top:14px}
.bande-photos a{display:block;border-radius:var(--r-s);overflow:hidden}
.bande-photos a img{transition:transform .8s var(--ease)}
.bande-photos a:hover img{transform:scale(1.05)}
.page-hero .lead{max-width:62ch}
.contenu>*{min-width:0}.prose{overflow-wrap:anywhere}

/* ---------- plateforme de soumission / rendez-vous ---------- */
.rdv{padding:140px 0 clamp(70px,9vw,120px);background:radial-gradient(90% 60% at 80% 0%,rgba(200,147,63,.13),transparent 60%)}
.rdv__grille{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr);gap:clamp(28px,4vw,60px);align-items:start}
.rdv__progres{display:flex;align-items:center;gap:14px;margin:30px 0 22px;font:500 12px/1 var(--f-mono);letter-spacing:.14em;color:var(--doux)}
.rdv__progres b{color:var(--bronze-2)}
.rdv__barre{flex:1;height:4px;border-radius:9px;background:rgba(255,255,255,.08);overflow:hidden}
.rdv__barre i{display:block;height:100%;width:14%;background:var(--grad-bronze);border-radius:9px;transition:width .6s var(--ease)}
.etape-rdv{border:0;display:none;animation:entre .5s var(--ease)}
.etape-rdv.actif{display:block}
@keyframes entre{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.etape-rdv legend{font:800 clamp(28px,3vw,42px)/1 var(--f-titre);text-transform:uppercase;margin-bottom:10px;padding:0}
.aide{color:var(--doux);margin:0 0 18px}
.choix{display:grid;gap:12px;margin-top:18px}
.choix input{position:absolute;opacity:0;pointer-events:none}
.choix label{cursor:pointer;display:block}
.choix--photos{grid-template-columns:repeat(3,minmax(0,1fr))}
.choix--photos span{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;border:1px solid var(--ligne);background:var(--noir-2);transition:border-color .3s,transform .3s var(--ease),box-shadow .3s;height:100%}
.choix--photos img{aspect-ratio:4/3;object-fit:cover;width:100%;transition:transform .8s var(--ease)}
.choix--photos b{padding:14px 16px 0;font-weight:700}
.choix--photos small{padding:4px 16px 0;color:var(--doux);font-size:13px}
.choix--photos span::after{content:"";display:block;height:14px}
.choix--photos label:hover span{transform:translateY(-3px);border-color:rgba(200,147,63,.4)}
.choix--photos label:hover img{transform:scale(1.05)}
.choix--photos input:checked+span{border-color:var(--bronze-2);box-shadow:0 0 0 2px var(--bronze-2),0 18px 50px -20px rgba(200,147,63,.6)}
.choix--pastilles{display:flex;flex-wrap:wrap}
.choix--pastilles span{display:inline-flex;align-items:center;gap:8px;padding:13px 18px;border-radius:999px;border:1px solid var(--ligne);background:var(--noir-2);font-weight:600;transition:all .25s}
.choix--pastilles label:hover span{border-color:rgba(200,147,63,.5)}
.choix--pastilles input:checked+span{background:var(--grad-bronze);color:#140d03;border-color:transparent}
.choix input:focus-visible+span{outline:2px solid var(--bronze-2);outline-offset:3px}
.mesures{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-top:8px}
.mesures .champ{width:140px}
.mesures__x{font:800 34px/1 var(--f-titre);color:var(--pale);padding-bottom:12px}
.mesures__total{margin-left:auto;font:800 clamp(64px,8vw,110px)/.8 var(--f-titre);background:var(--grad-bronze);-webkit-background-clip:text;background-clip:text;color:transparent}
.mesures__total small{font-size:.3em;-webkit-text-fill-color:var(--doux);margin-left:6px}
.case{display:flex;gap:10px;align-items:flex-start;margin-top:16px;color:var(--doux);cursor:pointer}
.case input{margin-top:4px;accent-color:var(--bronze)}
.depot{display:block;padding:26px;border-radius:16px;border:1.5px dashed rgba(255,255,255,.18);text-align:center;color:var(--doux);cursor:pointer;transition:all .25s}
.depot b{color:var(--texte)}
.depot:hover,.depot.survol{border-color:var(--bronze-2);background:rgba(200,147,63,.06)}
.vignettes{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.vignettes figure{position:relative;width:86px;height:86px;border-radius:12px;overflow:hidden;border:1px solid var(--ligne)}
.vignettes img{width:100%;height:100%;object-fit:cover}
.vignettes button{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;background:rgba(10,10,11,.75);font-size:15px;line-height:1}
.jours{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin:6px 0 16px}
.jours input{position:absolute;opacity:0}
.jours label{cursor:pointer}
.jours span{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;border-radius:14px;border:1px solid var(--ligne);background:var(--noir-2);transition:all .25s}
.jours small{font:500 10px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--doux)}
.jours b{font:800 26px/1 var(--f-titre)}
.jours label:hover span{border-color:rgba(200,147,63,.5)}
.jours input:checked+span{background:var(--grad-bronze);color:#140d03;border-color:transparent}
.jours input:checked+span small{color:#3a2a10}
.rdv__erreur{color:#ff8a7a;min-height:24px;margin-top:18px;font-weight:600}
.rdv__nav{display:flex;justify-content:space-between;gap:12px;margin-top:8px}
.rdv__fin{text-align:left;padding:10px 0;animation:entre .6s var(--ease)}
.rdv__coche{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:var(--grad-bronze);color:#140d03;margin-bottom:22px;box-shadow:0 20px 60px -20px rgba(200,147,63,.8)}
.rdv__coche svg{width:38px;height:38px}
.rdv__suite{margin:26px 0;padding-left:0;list-style:none;counter-reset:s;display:grid;gap:12px}
.rdv__suite li{counter-increment:s;display:flex;gap:14px;align-items:baseline;color:var(--doux)}
.rdv__suite li::before{content:counter(s);flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--bronze);color:var(--bronze-2);font-weight:700}
.rdv__suite b{color:var(--texte)}
.rdv__cote{position:sticky;top:110px;display:grid;gap:14px}
.recap{padding:26px;border-radius:22px;border:1px solid rgba(200,147,63,.3);background:radial-gradient(120% 100% at 0 0,rgba(200,147,63,.14),transparent 60%),var(--noir-2)}
.recap dl{margin-top:16px;display:grid}
.recap dl div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--ligne)}
.recap dt{color:var(--doux)}
.recap dd{font-weight:600;text-align:right}
.recap__conseil{margin-top:16px;color:var(--bronze-2);font-size:15px}
.confiance{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.confiance li{padding:16px;border-radius:16px;border:1px solid var(--ligne);background:var(--noir-2)}
.confiance b{display:block;font:800 26px/1 var(--f-titre)}
.confiance span{color:var(--doux);font-size:13px}
.recap__avis{padding:20px;border-radius:16px;border:1px solid var(--ligne);font-weight:600}
.recap__avis footer{margin-top:8px;font:500 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--doux)}
@media (max-width:960px){.rdv__grille{grid-template-columns:1fr}.rdv__cote{position:relative;top:0;order:2}}
@media (max-width:640px){.choix--photos{grid-template-columns:1fr 1fr}.jours{grid-template-columns:repeat(4,minmax(0,1fr))}.mesures__total{margin-left:0;width:100%}.rdv__nav .btn{padding:15px 18px}}
.reco{padding:22px 24px;border-radius:20px;border:1px solid rgba(200,147,63,.4);background:radial-gradient(120% 120% at 0 0,rgba(200,147,63,.16),transparent 60%),var(--noir-2);margin-bottom:26px}
.reco h3{font:800 clamp(24px,2.4vw,32px)/1 var(--f-titre);text-transform:uppercase;margin:12px 0}
.reco ul{list-style:none;display:grid;gap:8px}
.reco li{display:flex;gap:10px;color:var(--doux)}
.reco li::before{content:"✓";flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--grad-bronze);color:#140d03;font-size:11px;margin-top:2px}
.reco__prix{margin-top:14px;color:var(--texte)}
.reco__prix b{color:var(--bronze-2)}
.reseaux{display:flex;gap:10px;margin-top:20px}
.reseaux a{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--ligne);color:var(--texte);transition:all .3s var(--ease)}
.reseaux a svg{width:20px;height:20px}
.reseaux a:hover{background:var(--grad-bronze);color:#140d03;border-color:transparent;transform:translateY(-3px)}
.reseaux a[href$="_URL"]{display:none}

/* ---------- pages de service : étapes + portfolio (2026-10-25) ---------- */
.etapes-svc{list-style:none;padding:0;margin:18px 0 10px;display:grid;gap:12px}
.etapes-svc li{display:grid;grid-template-columns:54px 1fr;gap:16px;align-items:start;padding:18px 20px;border:1px solid var(--ligne);border-radius:var(--r-s)}
.etapes-svc__n{font:800 30px/1 var(--f-titre);color:var(--bronze-2)}
.etapes-svc h3{font:700 18px/1.3 var(--f-texte);margin:2px 0 6px}
.etapes-svc p{margin:0;color:var(--doux)}
.galerie--svc{columns:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
.galerie--svc figure{margin:0}
.galerie--svc img{aspect-ratio:4/5;object-fit:cover;height:100%}
@media (max-width:700px){.galerie--svc{grid-template-columns:1fr 1fr}}

/* ---------- pages de finitions (2026-10-25) ---------- */
.capsules-grille{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
.capsules-grille .capsule{width:auto}
@media (max-width:800px){.capsules-grille{grid-template-columns:repeat(2,1fr)}}
.panneau__lien{margin-top:18px;align-self:flex-start}

/* ---------- ouverture des pages (2026-10-25, demande de JF : « clean quand on ouvre les pages ») ---------- */
/* Passage d'une page à l'autre : fondu croisé natif (Chrome, Edge, Safari 18+) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-sort .32s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-entre .7s var(--ease) both}
@keyframes vt-sort{to{opacity:0;transform:translateY(-10px);filter:blur(4px)}}
@keyframes vt-entre{from{opacity:0;transform:translateY(16px)}}
/* Navigateurs sans transition native : petit fondu de sortie avant de changer de page */
body{transition:opacity .28s ease,transform .28s ease}
body.sortie{opacity:0;transform:translateY(-8px)}

/* En-tête des pages intérieures : photo qui recule, texte qui monte en cascade */
.page-hero img{transform:scale(1.14);filter:brightness(.6) blur(6px);animation:ph-photo 1.9s var(--ease) .05s forwards}
@keyframes ph-photo{to{transform:scale(1.02);filter:none}}
.page-hero .wrap>*{opacity:0;transform:translateY(30px);animation:ph-monte 1s var(--ease) forwards}
.page-hero .fil{animation-delay:.15s}
.page-hero .h1{animation-delay:.28s;clip-path:inset(0 0 100% 0);animation-name:ph-titre;animation-duration:1.2s}
.page-hero .lead{animation-delay:.5s}
.page-hero .hero__actions{animation-delay:.64s}
@keyframes ph-monte{to{opacity:1;transform:none}}
@keyframes ph-titre{to{opacity:1;transform:none;clip-path:inset(0 0 -20% 0)}}
/* Filet de bronze qui balaie le bas de l'en-tête */
.page-hero .wrap{position:relative}
.page-hero::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:1;background:var(--grad-bronze);transform:scaleX(0);transform-origin:left;animation:ph-filet 1.4s var(--ease) .5s forwards}
@keyframes ph-filet{to{transform:scaleX(1)}}

/* Barre de lecture en haut des pages intérieures */
.progression{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;background:var(--grad-bronze);transform:scaleX(0);transform-origin:left;pointer-events:none}

/* Apparitions des pages intérieures : un peu plus courtes, en cascade */
.js [data-r].r-auto{transform:translateY(24px);transition:opacity .8s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.js .galerie--svc figure[data-r].r-auto,.js .capsules-grille .capsule[data-r].r-auto,.js .nuancier__ech[data-r].r-auto{transform:translateY(30px) scale(.96)}
.js [data-r].r-auto.vu{transform:none}
.js .prose>h2[data-r].r-auto{clip-path:inset(0 0 100% 0);transition:opacity .8s var(--ease),transform .9s var(--ease),clip-path 1s var(--ease)}
.js .prose>h2[data-r].r-auto.vu{clip-path:inset(0 0 -20% 0)}
.js .etapes-svc li[data-r].r-auto{transform:translateX(-24px)}
.js .etapes-svc li[data-r].r-auto.vu{transform:none}

@media (prefers-reduced-motion:reduce){
  .page-hero img,.page-hero .wrap>*{opacity:1;transform:none;filter:none;clip-path:none}
  .page-hero::before{transform:none}
  .progression{display:none}
}

/* ---------- nuancier : échantillons générés (2026-10-25) ---------- */
.nuancier{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:22px}
.nuancier__ech{position:relative;padding:0;border:1px solid var(--ligne);border-radius:var(--r-s);overflow:hidden;background:var(--noir-2);cursor:zoom-in;text-align:left;color:inherit;font:inherit;transition:transform .5s var(--ease),border-color .4s,box-shadow .5s}
.nuancier__ech canvas{display:block;width:100%;aspect-ratio:1;opacity:0;transform:scale(1.06);transition:opacity .8s var(--ease),transform 1.2s var(--ease)}
.nuancier__ech.pret canvas{opacity:1;transform:none}
.nuancier__ech:hover{transform:translateY(-4px);border-color:rgba(200,147,63,.55);box-shadow:0 18px 40px -18px rgba(0,0,0,.8)}
.nuancier__nom{display:flex;flex-direction:column;gap:4px;padding:12px 14px}
.nuancier__nom b{font-weight:600;font-size:15px;color:var(--texte)}
.nuancier__nom em{font:500 10px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--bronze-2);font-style:normal}
@media (max-width:520px){.nuancier{grid-template-columns:repeat(2,1fr);gap:10px}}

/* ---------- onglet « Nos services » (2026-10-26, même liste que btminc.ca) ---------- */
.svc-pro{margin-top:clamp(80px,10vw,140px)}
.svc-onglets{display:grid;grid-template-columns:.85fr 1.35fr;gap:clamp(24px,3.5vw,50px);align-items:stretch}
.svc-onglets__liste{display:flex;flex-direction:column;gap:4px}
.svc-onglet{display:grid;grid-template-columns:34px 26px 1fr;align-items:center;gap:14px;text-align:left;padding:15px 18px;border-radius:var(--r-s);border:1px solid transparent;color:var(--doux);transition:background .35s,border-color .35s,color .3s}
.svc-onglet b{font:500 11px/1 var(--f-mono);color:var(--pale)}
.svc-onglet svg{width:24px;height:24px;color:var(--pale);transition:color .3s,transform .5s var(--ease)}
.svc-onglet strong{font:800 clamp(19px,1.7vw,25px)/1.05 var(--f-titre);text-transform:uppercase}
.svc-onglet:hover{background:rgba(255,255,255,.03)}
.svc-onglet[aria-selected="true"]{background:linear-gradient(100deg,rgba(200,147,63,.16),rgba(200,147,63,.02));border-color:rgba(200,147,63,.4);color:var(--texte)}
.svc-onglet[aria-selected="true"] svg{color:var(--bronze-2);transform:rotate(-8deg) scale(1.1)}
.svc-onglet[aria-selected="true"] b{color:var(--bronze-2)}
.svc-onglets__scene{position:relative;min-height:560px;border-radius:var(--r);overflow:hidden;border:1px solid var(--ligne)}
.svc-panneau{position:absolute;inset:0;opacity:0;visibility:hidden;clip-path:inset(0 0 0 100%);transition:clip-path .9s var(--ease),opacity .2s .8s,visibility 0s .9s}
.svc-panneau.actif{opacity:1;visibility:visible;clip-path:inset(0 0 0 0);transition:clip-path .9s var(--ease),opacity 0s,visibility 0s}
.svc-panneau img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 1.6s var(--ease)}
.svc-panneau.actif img{transform:scale(1)}
.svc-panneau::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,11,.15),rgba(10,10,11,.55) 45%,rgba(10,10,11,.95))}
.svc-panneau__texte{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:clamp(24px,3.5vw,44px)}
.svc-panneau__texte .h3{margin:14px 0 12px;font-size:clamp(30px,3.2vw,48px)}
.svc-panneau__texte p{color:var(--doux);max-width:520px;margin-bottom:22px}
.svc-panneau.actif .svc-panneau__texte>*{animation:entre .7s var(--ease) both}
.svc-panneau.actif .svc-panneau__texte>:nth-child(2){animation-delay:.08s}.svc-panneau.actif .svc-panneau__texte>:nth-child(3){animation-delay:.16s}.svc-panneau.actif .svc-panneau__texte>:nth-child(4){animation-delay:.24s}
@media (max-width:900px){
  .svc-onglets{grid-template-columns:1fr}
  .svc-onglets__liste{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
  .svc-onglet{flex:none;scroll-snap-align:start;grid-template-columns:auto auto;gap:10px}
  .svc-onglet b{display:none}
  .svc-onglets__scene{min-height:460px}
}

/* ---------- moins « fait par l'IA » (2026-10-26, demande de JF) : on garde le noir, le bronze et les gros titres ---------- */
.or{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--bronze-2);animation:none}
.btn--or::after{display:none}
.carte{transform:none!important}
.carte .fleche{background:rgba(10,10,11,.7);backdrop-filter:none}
.hero__surtitre{font:500 13px/1.4 var(--f-texte);color:var(--doux);margin-bottom:26px;letter-spacing:.02em}
.entete .h2{margin-top:0}
.svc-onglet{grid-template-columns:26px 1fr}
.onglet{grid-template-columns:1fr auto}
.raison h3{margin-top:0}
.galerie figcaption{font-family:var(--f-texte);letter-spacing:.02em;text-transform:none;font-size:13px}
.hero__surtitre{color:var(--texte);text-shadow:0 1px 12px rgba(0,0,0,.8)}
.processus__media .compteur{display:none}

/* ---------- nuancier de flocons Torginol (2026-10-26) ---------- */
.vis__legende{position:absolute;left:0;right:0;bottom:22px;text-align:center;color:var(--texte);font-weight:600;font-size:16px;text-shadow:0 2px 14px #000}
.collections__filtres{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 8px}
.collections__btn{padding:11px 16px;border-radius:999px;border:1px solid var(--ligne);color:var(--doux);font-weight:500;font-size:14px;transition:all .3s}
.collections__btn[aria-pressed="true"]{border-color:var(--bronze);color:var(--texte);background:rgba(200,147,63,.12)}
.collection{margin-top:30px}
.collection h3{font:800 26px/1 var(--f-titre);text-transform:uppercase;margin:0 0 8px}
.collection>p{color:var(--doux);margin:0}
.nuancier__nom small{display:block;color:var(--doux);font-size:12.5px;line-height:1.35;font-weight:400;margin-top:2px}

/* 2026-11-04 : un fieldset garde par défaut la largeur de son contenu (min-width:min-content) → la page Soumission débordait sur cellulaire */
fieldset,.etape-rdv{min-width:0;max-width:100%}
.rdv__principal,.rdv form{min-width:0}

/* 2026-11-05 : diaporama du fond de l'accueil (une photo toutes les 3 s, fondu) */
.hero__media[data-diapo] img{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
.hero__media[data-diapo] img.actif{opacity:1}

/* ---------- 2026-11-07 : micro-animations des touches et des passages (demande de JF, sobres : noir + bronze) ---------- */
/* Touche enfoncée : petit « clic » physique */
.btn:active,.filtre:active,.collections__btn:active,.zones a:active,.svc-onglet:active,.onglet:active,.choix--pastilles label:active span,.capsules__fleche:active{transform:scale(.96);transition-duration:.12s}
.btn--or:active{transform:translateY(0) scale(.97)}
/* Onde de bronze au clic */
.btn,.filtre,.collections__btn,.svc-onglet,.onglet{position:relative;overflow:hidden;isolation:isolate}
.onde{position:absolute;border-radius:50%;pointer-events:none;z-index:-1;width:12px;height:12px;margin:-6px 0 0 -6px;background:rgba(233,191,114,.45);transform:scale(0);animation:onde .65s cubic-bezier(.2,.7,.3,1) forwards}
.btn--or .onde{background:rgba(255,255,255,.55)}
@keyframes onde{to{transform:scale(var(--o,30));opacity:0}}
/* Contour clavier visible et propre */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--bronze-2);outline-offset:3px;border-radius:6px}
.btn:focus-visible{border-radius:999px}
/* Pastilles des villes : petite levée */
.zones a{display:inline-block;transition:all .3s,transform .35s var(--ease)}
.zones a:hover{transform:translateY(-2px);background:rgba(200,147,63,.08)}
/* Questions fréquentes : ouverture en douceur (Chrome/Edge récents ; ailleurs ça s'ouvre normalement) */
:root{interpolate-size:allow-keywords}
.faq details::details-content,.faq-liste details::details-content{block-size:0;overflow:hidden;transition:block-size .5s var(--ease),content-visibility .5s allow-discrete}
.faq details[open]::details-content,.faq-liste details[open]::details-content{block-size:auto}
.faq details[open] p,.faq-liste details[open] p{animation:entre .55s var(--ease) both}
.faq summary,.faq-liste summary{transition:color .3s}
.faq summary:hover,.faq-liste summary:hover{color:var(--bronze-2)}
/* Galerie : les photos revenues après un filtre apparaissent en cascade */
.galerie figure.revient{animation:revient .6s var(--ease) both;animation-delay:var(--d,0s)}
@keyframes revient{from{opacity:0;transform:translateY(18px) scale(.97)}}
/* Visionneuse : la photo s'ouvre en grandissant */
.visionneuse img,.visionneuse video{transform:scale(.94);transition:transform .5s var(--ease)}
.visionneuse.open img,.visionneuse.open video{transform:none}
/* Accueil : le texte du héros s'efface doucement quand on défile (navigateurs récents) */
@supports (animation-timeline:scroll()){
  .hero>.wrap{animation:hero-part linear both;animation-timeline:scroll(root);animation-range:0 85vh}
  @keyframes hero-part{to{opacity:.15;transform:translateY(-60px)}}
}
@media (prefers-reduced-motion:reduce){
  .onde{display:none}
  .galerie figure.revient{animation:none}
  .hero>.wrap{animation:none}
  .faq details::details-content,.faq-liste details::details-content{transition:none}
}
/* 2026-11-07 : les accents des gros titres (É, À) étaient coupés par le masque des animations → on laisse de la place en haut */
.hero h1 .ligne{padding-top:.22em;margin-top:-.22em}
@keyframes ph-titre{to{opacity:1;transform:none;clip-path:inset(-35% -4% -25% -4%)}}
.js .prose>h2[data-r].r-auto.vu{clip-path:inset(-35% -4% -25% -4%)}
/* 2026-11-10 : bannière de consentement (Loi 25), visible seulement si un outil de mesure est configuré */
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:300;max-width:720px;margin:0 auto;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;padding:18px 20px;border-radius:16px;background:rgba(17,17,19,.96);border:1px solid rgba(200,147,63,.35);box-shadow:0 20px 60px rgba(0,0,0,.6);font-size:14px;color:var(--doux)}
.consent p{margin:0;flex:1 1 320px}.consent a{color:var(--bronze-2)}.consent div{display:flex;gap:10px}.consent .btn{padding:12px 18px;font-size:12px}
@media (max-width:640px){.consent{bottom:84px}}