/* Genere par tools/build.ps1 a partir de v2.css, v3-home.css, v3-pages.css, v3-aube.css (+ v2-home.css pour l'accueil). Ne pas modifier ici. */
/* BINARVA V2 « Nuancier » : feuille de style unique du site (voir DESIGN.md).
   Fond blanc pur ; la couleur vit dans les lames de nuancier, l'éventail, les photos et les actions. */

/* Polices hébergées sur le site (Bricolage Grotesque et Figtree, licence SIL Open Font License). */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-600-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-600-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(/assets/fonts/figtree-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(/assets/fonts/figtree-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============ Jetons ============ */
:root{
  /* V3 « BINARVA aujourd'hui » : l'encre bleu nuit de la montagne, l'orange des pubs et du devis, le vert WhatsApp */
  --blanc:#FFFFFF; --fusain:#1E2130; --fusain-2:#4A4D5C; --fusain-3:#696C79;
  --trait:rgba(30,33,48,.13); --trait-2:rgba(30,33,48,.26); --champ:#CDD0D8;
  --orange:#E2622B; --terre:#C24E1C; --terre-2:#A23F12; --ocre:#C8832B; --ocre-t:#8F5815; --lichen:#5E6B4C; --lauze:#4F5357; --ardoise:#3E5266;
  --brume:#F3F4F7; --neige:#E8EAF0;
  --aube:linear-gradient(180deg,#B66A57 0%,#DB8762 48%,#F2AE84 100%);
  --wa:#13874A; --wa-2:#0F703D; --wa-vif:#25D366;
  --wrap:1240px; --pad:clamp(20px,4vw,56px); --sec:clamp(72px,8vw,120px);
  --r:10px; --ease:cubic-bezier(.2,.8,.2,1); --rebond:cubic-bezier(.34,1.56,.64,1);
  --fs-h1:clamp(42px,5.4vw,80px); --fs-h2:clamp(32px,3.8vw,56px); --fs-h3:clamp(21px,1.7vw,27px);
  --grain:url("/assets/img/grain.webp");
  /* Noms hérités, utilisés par le JavaScript et quelques styles en ligne */
  --ink:var(--fusain); --ink-2:#343849; --muted:var(--fusain-2); --line:var(--trait); --line-2:var(--trait-2);
  --paper:var(--blanc); --stone:var(--blanc); --stone-2:var(--neige); --field:var(--blanc); --field-line:var(--champ);
}
/* Le mot qui compte, en orange BINARVA (comme dans les pubs) */
.o{color:var(--orange)}

/* ============ Base ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
body{margin:0;background:var(--blanc);color:var(--fusain);font:400 17px/1.6 Figtree,system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--terre);color:#fff}
img,video{display:block;max-width:100%;height:auto}
[hidden]{display:none!important}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,.h2,.h3,.disp{font-family:"Bricolage Grotesque",Figtree,sans-serif;font-optical-sizing:auto;font-weight:750;letter-spacing:-.025em;line-height:1.02;margin:0;text-wrap:balance;color:var(--fusain)}
h1{font-size:var(--fs-h1);font-weight:800}
.h2{font-size:var(--fs-h2)}
.h3{font-size:var(--fs-h3);line-height:1.1;letter-spacing:-.015em}
p{margin:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
:focus-visible{outline:2.5px solid var(--terre);outline-offset:3px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none}
svg{flex:none}
.wrap{max-width:calc(var(--wrap) + 2 * var(--pad));margin:0 auto;padding:0 var(--pad)}
.sec{padding:var(--sec) 0}
.sec + .sec{border-top:1px solid var(--trait)}
.lead{font-size:clamp(17.5px,1.3vw,20px);line-height:1.55;color:var(--fusain-2);max-width:52ch}
.intro{font-size:clamp(17px,1.25vw,19px);line-height:1.6;color:var(--fusain-2);max-width:58ch}
.body{font-size:17px;line-height:1.65;color:var(--fusain-2);max-width:66ch}
.body strong,.intro strong,.lead strong{color:var(--fusain);font-weight:650}
.note{font-size:14px;line-height:1.55;color:var(--fusain-3);max-width:68ch}
.link{color:var(--fusain);font-weight:650;text-decoration:underline;text-decoration-color:var(--terre);text-decoration-thickness:2px;text-underline-offset:5px}
.link:hover{color:var(--terre)}
.sec-head{display:grid;gap:16px;margin-bottom:clamp(36px,4.5vw,60px);max-width:780px}
.sec-head--split{max-width:none;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:20px 48px}
.sec-head .h2{max-width:20ch}
.cols2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.sticky-head{position:sticky;top:110px}
.kind{margin:0;font-size:15px;font-weight:650;color:var(--fusain-2)}
.ph{display:inline-block;padding:1px 8px;border:1.5px dashed var(--ocre-t);border-radius:4px;color:var(--ocre-t);font-size:.9em;font-weight:600}
html.hide-ph [data-ph-block]:not([data-ph-ok]){display:none!important}
.empty{padding:40px;border:1.5px dashed var(--trait-2);border-radius:var(--r);text-align:center;color:var(--fusain-2)}

/* ============ Icônes ============ */
svg.i,.btn svg,.tel svg,.hdr-menu svg,.mbar svg,.x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ============ Boutons ============ */
.btn,.cta,.hdr-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border-radius:var(--r);border:1.5px solid var(--fusain);background:var(--fusain);color:#fff;font:700 16px/1.15 Figtree,sans-serif;text-decoration:none;cursor:pointer;text-align:center;transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.btn:hover,.hdr-cta:hover{background:#343849;border-color:#343849}
.cta,.btn--terre{background:var(--terre);border-color:var(--terre);color:#fff;min-height:56px;font-size:16.5px}
.cta:hover,.btn--terre:hover{background:var(--terre-2);border-color:var(--terre-2)}
.btn--ink{background:var(--fusain);border-color:var(--fusain);color:#fff}
.btn--line{background:transparent;color:var(--fusain);border-color:var(--fusain)}
.btn--line:hover{background:var(--fusain);color:#fff}
.btn--white{background:#fff;border-color:#fff;color:var(--fusain)}
.btn--white:hover{background:var(--neige);border-color:var(--neige)}
.btn--wa{background:var(--wa);color:#fff;border-color:var(--wa)}
.btn--wa:hover{background:var(--wa-2);border-color:var(--wa-2)}
/* Le gros bouton WhatsApp des pubs : l'action principale de BINARVA */
.wa-big{display:inline-flex;align-items:center;gap:14px;min-height:68px;padding:10px 26px 10px 18px;border-radius:14px;background:var(--wa);color:#fff;text-decoration:none;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 14px 28px -16px rgba(19,135,74,.85);transition:background .2s var(--ease),transform .25s var(--ease)}
.wa-big:hover{background:var(--wa-2);transform:translateY(-2px)}
.wa-big:active{transform:translateY(0) scale(.98)}
.wa-big svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.wa-big span{display:grid;line-height:1.1;text-align:left}
.wa-big small{font-size:13.5px;font-weight:650;opacity:.92}
.wa-big b{font:800 clamp(22px,2vw,27px)/1.1 "Bricolage Grotesque",Figtree,sans-serif;letter-spacing:-.01em;font-variant-numeric:lining-nums;white-space:nowrap}
/* Coches vertes « Aperçu gratuit · Devis gratuit » */
.oks{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;margin:0;padding:0;font-size:15px;font-weight:700;color:var(--fusain)}
.oks li{display:inline-flex;align-items:center;gap:8px}
.oks li::before{content:"";width:20px;height:20px;border-radius:50%;background:var(--wa) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8.5'/%3E%3C/svg%3E") center/13px no-repeat;flex:none}
.btn[disabled],.cta[disabled]{opacity:.5;cursor:not-allowed}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* ============ En-tête ============ */
.hdr{position:relative;z-index:30;background:var(--blanc);border-bottom:1px solid var(--trait)}
.hdr,.lp-hdr{display:flex;align-items:center;gap:28px;height:80px;padding:0 var(--pad);max-width:none}
.logo{display:inline-flex;align-items:center;gap:12px;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:21px;letter-spacing:.16em;text-decoration:none;color:var(--fusain);line-height:1;white-space:nowrap}
.logo img{width:44px;height:44px;border-radius:50%;box-shadow:0 0 0 1px rgba(30,33,48,.06)}
.hdr nav,.lp-hdr nav{display:flex;align-items:center;gap:22px;margin-left:auto}
.hdr .links,.topbar .links{display:flex;gap:24px}
.hdr .links a,.topbar .links a{text-decoration:none;font-weight:550;font-size:15.5px}
.hdr .links a:hover,.topbar .links a:hover,.links a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--terre);text-decoration-thickness:2px;text-underline-offset:7px}
.tel{display:inline-flex;align-items:center;gap:8px;font-weight:700;text-decoration:none;white-space:nowrap}
.hdr-cta{min-height:46px;padding:0 18px;font-size:15px;background:var(--terre);border-color:var(--terre)}
.hdr-cta:hover{background:var(--terre-2);border-color:var(--terre-2)}
.hdr-wa{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 16px;border-radius:var(--r);background:var(--wa);color:#fff;font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap;transition:background .2s var(--ease)}
.hdr-wa:hover{background:var(--wa-2)}
.hdr-wa svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hdr-menu{display:none}

.topbar{position:fixed;left:0;right:0;top:0;z-index:40;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--trait);transform:translateY(-100%);transition:transform .3s var(--ease)}
.topbar.on{transform:none}
.topbar .in{display:flex;align-items:center;gap:28px;height:66px}
.topbar nav{display:flex;align-items:center;gap:22px;margin-left:auto}
.topbar .logo{font-size:19px}
.topbar .logo img{width:36px;height:36px}
.topbar .hdr-cta,.topbar .hdr-wa{min-height:42px}
.mbar{display:none}
.menu{position:fixed;inset:0;z-index:60;display:grid;align-content:end;background:rgba(30,33,48,.55);opacity:0;pointer-events:none;transition:opacity .25s}
.menu.on{opacity:1;pointer-events:auto}
.menu-panel{position:relative;margin:10px;padding:12px;border-radius:10px;background:#fff;display:grid;transform:translateY(16px);transition:transform .3s var(--ease)}
.menu.on .menu-panel{transform:none}
.menu-panel a{display:flex;align-items:center;min-height:54px;padding:0 14px;border-radius:var(--r);text-decoration:none;font-size:18px;font-weight:650}
.menu-panel a:hover{background:var(--brume)}
.x{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r);border:1.5px solid var(--trait-2);background:#fff;cursor:pointer;color:var(--fusain)}
.menu-panel .x{position:absolute;right:12px;top:12px}

/* ============ Pied de page ============ */
/* Fond clair (Osman n'aime pas le noir) : la « carte de fin » des pubs, puis les liens */
.foot{position:relative;background:#fff;color:var(--fusain-2);padding:0 0 32px;font-size:15px;border-top:1px solid var(--trait);overflow:hidden}
.foot::before{content:"";position:absolute;left:50%;top:-260px;width:min(1100px,140vw);height:620px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(242,174,132,.42),rgba(242,174,132,0));pointer-events:none}
.foot>.wrap{position:relative}
.foot a{color:var(--fusain);text-decoration:none}
.foot a:hover{text-decoration:underline;text-decoration-color:var(--terre);text-decoration-thickness:2px;text-underline-offset:5px}
.endcard{display:grid;justify-items:center;gap:18px;padding:clamp(56px,7vw,96px) 0 clamp(48px,6vw,80px);text-align:center}
.endcard-logo{width:148px;height:148px;border-radius:50%;box-shadow:0 22px 40px -22px rgba(30,33,48,.55)}
.endcard-t{font:800 clamp(40px,5vw,68px)/1 "Bricolage Grotesque",sans-serif;letter-spacing:-.03em;color:var(--fusain)}
.endcard .wa-big{min-height:78px;padding:12px 32px 12px 22px}
.endcard .wa-big b{font-size:clamp(26px,2.6vw,32px)}
.foot .wa-big,.foot .wa-big:hover{color:#fff;text-decoration:none}
.endcard-n{font-size:15px;color:var(--fusain-2)}
.foot .oks{display:flex;justify-content:center}
.endcard-n a{font-weight:650}
.foot-top{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:40px;padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--trait)}
.foot-brand{display:grid;gap:18px;align-content:start;justify-items:start}
.foot-brand .logo{font-size:20px}
.foot-brand .logo img{width:40px;height:40px}
.foot-brand p{max-width:36ch;line-height:1.6}
.foot h2{font:750 19px/1.2 "Bricolage Grotesque",sans-serif;letter-spacing:-.01em;color:var(--fusain);margin:0 0 14px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:40px;padding-top:24px;border-top:1px solid var(--trait);font-size:14px}
.foot-bottom ul{display:flex;flex-wrap:wrap;gap:8px 20px}
.foot .btn--white,.foot .btn--white:hover{color:var(--fusain);text-decoration:none}
.foot-villes{display:flex;flex-wrap:wrap;gap:8px 20px;margin:40px 0 0;padding-top:24px;border-top:1px solid var(--trait)}
.foot-villes b{color:var(--fusain);font-weight:700}

/* ============ Fil d'Ariane, en-têtes de pages ============ */
.crumbs{display:flex;flex-wrap:wrap;gap:6px 10px;list-style:none;margin:0 0 22px;padding:0;font-size:14.5px;color:var(--fusain-2)}
.crumbs li+li::before{content:"/";margin-right:10px;color:var(--trait-2)}
.crumbs a{text-decoration:none;font-weight:600}
.crumbs a:hover{text-decoration:underline}
.phero{padding:clamp(32px,4vw,56px) 0 var(--sec)}
.phero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.phero h1{margin-bottom:20px}
.phero .lead{margin-bottom:28px}
.phero-more{margin:-6px 0 18px;font-size:15.5px}
.mini-trust{display:flex;flex-wrap:wrap;gap:8px 28px;list-style:none;margin:22px 0 0;padding:0;font-size:15px;font-weight:600;color:var(--fusain-2)}
.mini-trust li{display:inline-flex;align-items:center;gap:8px;color:var(--fusain)}

/* ============ Lame de nuancier ============ */
.lame{position:relative;background:#fff;border:1px solid var(--trait);border-radius:var(--r) var(--r) 4px 4px;padding:26px 22px 24px}
.lame::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:10px;border-radius:var(--r) var(--r) 0 0;background:var(--c,var(--ocre)) var(--grain)}

/* ============ Champs et formulaires ============ */
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field label{font-size:14px;font-weight:650;color:var(--fusain)}
.field input,.field select,.field textarea,.lead-form textarea{width:100%;min-height:52px;padding:0 14px;border-radius:var(--r);border:1.5px solid var(--champ);background:#fff;appearance:none;-webkit-appearance:none;font-size:16px}
.field textarea,.lead-form textarea{min-height:110px;padding:12px 14px;resize:vertical}
.field select{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231E2130' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 14px center;padding-right:38px}
.field input::placeholder,.field textarea::placeholder{color:#8B867D}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible,.lead-form textarea:focus-visible{border-color:var(--fusain);box-shadow:0 0 0 3px rgba(194,78,28,.18)}
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.optional{font-weight:400;color:var(--fusain-3)}
.err{margin:0;font-size:14.5px;font-weight:600;color:#9B2D17}
.err:empty{display:none}
.alt{margin:12px 0 0;text-align:center;font-size:14.5px;color:var(--fusain-2)}
.alt a{color:var(--fusain);font-weight:700}
.consent{font-size:13.5px;color:var(--fusain-3);margin:12px 0 0}
.consent a{color:var(--fusain)}

.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills label{position:relative;cursor:pointer}
.pills input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.pills span{display:inline-flex;align-items:center;min-height:44px;padding:0 15px;border:1.5px solid var(--champ);border-radius:var(--r);background:#fff;font-size:15px;font-weight:600}
.pills label:hover span{border-color:var(--fusain)}
.pills input:checked+span{background:var(--fusain);border-color:var(--fusain);color:#fff}
.pills input:focus-visible+span{outline:2.5px solid var(--terre);outline-offset:2px}

.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tile{position:relative;cursor:pointer}
.tile input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.tile span{display:grid;gap:3px;height:100%;padding:14px 16px 14px 18px;border:1.5px solid var(--champ);border-radius:var(--r);background:#fff}
.tile b{font-size:16px;line-height:1.3}
.tile small{font-size:13.5px;line-height:1.4;color:var(--fusain-2)}
.tile:hover span{border-color:var(--fusain)}
.tile input:checked+span{border-color:var(--terre);box-shadow:inset 0 0 0 1px var(--terre);background:#FBF1EC}
.tile input:focus-visible+span{outline:2.5px solid var(--terre);outline-offset:2px}

/* ============ Carte d'estimation (pages services) ============ */
.card{background:#fff;border:1px solid var(--trait);border-radius:var(--r);padding:24px}
.card h2,.card .form-t{font:750 24px/1.15 "Bricolage Grotesque",sans-serif;letter-spacing:-.015em;margin:0 0 4px}
.card .sub{margin:0;font-size:14.5px;color:var(--fusain-2)}
.bcard{display:grid;gap:14px;max-width:540px;position:relative}
.bcard::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:8px;border-radius:var(--r) var(--r) 0 0;background:var(--grain),linear-gradient(90deg,var(--ocre) 0 25%,var(--terre) 25% 50%,var(--lichen) 50% 75%,var(--lauze) 75%)}
.bform{display:grid;gap:12px}
.best{display:grid;gap:3px;padding:14px 16px;border-radius:var(--r);border:1.5px solid var(--fusain)}
.best-l{font-size:13.5px;font-weight:650;color:var(--fusain-2)}
.best-v{font:800 clamp(28px,2.4vw,34px)/1.05 "Bricolage Grotesque",sans-serif;letter-spacing:-.02em;font-variant-numeric:lining-nums}
.best-n{font-size:13px;line-height:1.45;color:var(--fusain-2)}
.bcard .alt{margin:0}

/* ============ Avant / après ============ */
.cmp{position:relative;overflow:hidden;border-radius:var(--r);background:#23262F;touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none;--p:50%}
.cmp-layer{position:absolute;inset:0;overflow:hidden}
.cmp-layer>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmp-before{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.cmp-canvas{position:absolute;left:0;top:0;transform-origin:0 0}
.cmp-canvas img{position:absolute;left:0;top:0;max-width:none}
.cmp-line{position:absolute;top:0;bottom:0;left:var(--p);width:3px;margin-left:-1.5px;background:#fff;pointer-events:none;box-shadow:0 0 12px rgba(0,0,0,.25)}
.cmp-knob{position:absolute;top:50%;left:var(--p);width:20px;height:68px;margin:-34px 0 0 -10px;border-radius:4px;background:#fff;color:var(--fusain);display:grid;place-items:center;pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,.28)}
.cmp-knob svg{width:14px;height:14px}
.cmp-tag{position:absolute;top:14px;padding:7px 11px;border-radius:4px;font-size:13px;font-weight:700;pointer-events:none}
.cmp-tag--l{left:14px;background:var(--lauze);color:#fff}
.cmp-tag--r{right:14px;background:#fff;color:var(--fusain)}
.cmp[data-ready] .hint{display:none}
.cmp-solo{margin:0;border-radius:var(--r);overflow:hidden;background:var(--neige)}
.cmp-solo img{width:100%;height:auto}

/* ============ Listes ============ */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ticks li{position:relative;padding-left:28px;font-size:16px;line-height:1.5}
.ticks li::before{content:"";position:absolute;left:0;top:.18em;width:20px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C24E1C' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/20px no-repeat}
.spec{list-style:none;margin:0;padding:0;border-top:1px solid var(--trait)}
.spec li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:20px;padding:20px 0;border-bottom:1px solid var(--trait)}
.spec h3{font:700 17px/1.35 Figtree,sans-serif;letter-spacing:0}
.spec p{font-size:15.5px;color:var(--fusain-2)}
.next{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:n}
.next li{display:grid;grid-template-columns:30px 1fr;gap:8px;font-size:15.5px;color:var(--fusain-2);counter-increment:n}
.next li::before{content:counter(n);display:grid;place-items:center;width:24px;height:24px;border-radius:4px;background:var(--fusain);color:#fff;font-size:13px;font-weight:700}
.kv{display:grid;margin:0;border-top:1px solid var(--trait)}
.kv div{display:grid;grid-template-columns:140px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--trait);font-size:15.5px}
.kv dt{color:var(--fusain-2)}
.kv dd{margin:0;font-weight:650}

/* ============ Signes (pages services) ============ */
.signs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;list-style:none;margin:0;padding:0;border-top:1px solid var(--trait)}
.signs li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:4px 16px;padding:20px 0;border-bottom:1px solid var(--trait)}
.signs li::before{content:"";grid-row:span 2;width:22px;height:22px;margin-top:2px;border-radius:4px;background:var(--c,var(--ocre)) var(--grain)}
.signs li:nth-child(3n+2){--c:var(--terre)}
.signs li:nth-child(3n){--c:var(--lichen)}
.signs h3{font-size:21px}
.signs p{font-size:15.5px;color:var(--fusain-2)}

/* ============ Finitions ============ */
.finishes{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.finish{display:grid;gap:8px;align-content:start}
.finish .tex{aspect-ratio:3/4;border-radius:var(--r) var(--r) 4px 4px;overflow:hidden;background:#E8E1D4;position:relative}
.finish .tex svg{width:100%;height:100%;display:block}
.finish h3{font-size:19px}
.finish p{font-size:14.5px;color:var(--fusain-2)}

/* ============ Dessins techniques ============ */
.fig-draw{margin:0;display:grid;gap:18px;padding:clamp(18px,2.4vw,30px);border-radius:var(--r);border:1px solid var(--trait);background:#fff}
.fig-draw svg{width:100%;height:auto}
.legend{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:lg}
.legend li{display:grid;grid-template-columns:26px 1fr;gap:10px;font-size:14.5px;color:var(--fusain-2);counter-increment:lg}
.legend li::before{content:counter(lg);display:grid;place-items:center;width:22px;height:22px;border-radius:4px;background:var(--fusain);color:#fff;font-size:12px;font-weight:700}

/* ============ Réalisations ============ */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:28px}
.pc{display:grid;gap:16px;align-content:start}
.pc-img{position:relative;display:block;width:100%;padding:0;border:0;border-radius:var(--r);overflow:hidden;background:var(--stone-2);aspect-ratio:4/3;cursor:pointer}
.pc-img img{width:100%;height:100%;object-fit:cover}
.pc-img .cue,.pf-media .cue{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:4px;background:#fff;color:var(--fusain);font-size:14px;font-weight:700}
.pc-img .cue svg,.pf-media .cue svg{width:16px;height:16px}
.pc-meta{display:grid;gap:8px}
.pc-meta .h3{font-size:clamp(22px,1.9vw,28px)}
.pc-meta p{font-size:15.5px;color:var(--fusain-2)}
.pf{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,4vw,56px);align-items:start}
.pf-media{position:relative;display:block;width:100%;padding:0;border:0;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;cursor:pointer;background:var(--stone-2)}
.pf-media img{width:100%;height:100%;object-fit:cover}
.pf-body{display:grid;gap:20px;min-width:0}
.facts,.case-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;border-top:1px solid var(--trait)}
.case-facts{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-top:28px}
.facts div,.case-facts div{padding:14px 16px 14px 0;border-bottom:1px solid var(--trait)}
.facts dt,.case-facts dt{font-size:13.5px;color:var(--fusain-2);margin-bottom:3px}
.facts dd,.case-facts dd{margin:0;font-weight:650}
.crops{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.crops li{display:grid;gap:8px;min-width:0}
.crop{aspect-ratio:1;border-radius:var(--r);background-color:var(--stone-2);background-repeat:no-repeat}
.crops span{font-size:13.5px;color:var(--fusain-2)}
.details-band{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.details-band li{display:grid;gap:10px}
.details-band .crop{aspect-ratio:1}
.details-band b{font-size:17px}
.details-band span{font-size:15px;color:var(--fusain-2)}
.tabs{display:inline-flex;flex-wrap:wrap;gap:6px}
.tab{min-height:44px;padding:0 16px;border:1.5px solid var(--champ);border-radius:var(--r);background:#fff;font-weight:650;cursor:pointer}
.tab[aria-selected="true"],.tab[aria-pressed="true"]{background:var(--fusain);border-color:var(--fusain);color:#fff}
.tab .n{margin-left:6px;opacity:.7}
.more-link{margin:32px 0 0}
.case-cmp .cmp{box-shadow:0 30px 60px -36px rgba(30,33,48,.6)}
.band{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:center;padding:clamp(28px,4vw,44px);border-radius:var(--r);border:1px solid var(--trait);position:relative;overflow:hidden}

/* Étapes photo, galerie, agrandissement */
.steps-photo{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);list-style:none;margin:0;padding:0}
.steps-photo li{display:grid;gap:10px;align-content:start;min-width:0}
.sp-img{position:relative;display:block;width:100%;padding:0;border:0;border-radius:var(--r);overflow:hidden;aspect-ratio:3/4;background:var(--stone-2);cursor:zoom-in}
.sp-img img{width:100%;height:100%;object-fit:cover}
.sp-l{display:flex;align-items:center;gap:10px;margin:0;font-size:16px;font-weight:700}
.sp-l span{display:grid;place-items:center;width:26px;height:26px;border-radius:4px;background:var(--fusain);color:#fff;font-size:13px}
.sp-t{margin:0;font-size:14.5px;color:var(--fusain-2)}
.steps-photo--mini{gap:8px}
.steps-photo--mini .sp-img{aspect-ratio:1}
.steps-photo--mini .sp-t{display:none}
.gallery-grid{columns:3 260px;column-gap:16px}
.gal-item{break-inside:avoid;margin:0 0 18px;display:grid;gap:8px}
.gal-item button{display:block;width:100%;padding:0;border:0;border-radius:var(--r);overflow:hidden;cursor:zoom-in;background:var(--stone-2)}
.gal-item img{width:100%;height:auto}
.gal-item figcaption{font-size:14px;color:var(--fusain-2)}
.gal-item figcaption b{color:var(--fusain)}
.lb{width:min(1100px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 24px);padding:0;border:0;background:transparent;overflow:visible}
.lb::backdrop{background:rgba(17,19,28,.9)}
.lb figure{margin:0;display:grid;gap:12px;justify-items:center}
.lb img{max-width:100%;max-height:calc(100dvh - 150px);width:auto;height:auto;border-radius:var(--r)}
.lb figcaption{max-width:70ch;text-align:center;color:#E8EAF0}
.lb figcaption span{display:block;margin-top:4px;font-size:13.5px;color:#B4B7C2}
.lb-nav{position:fixed;top:12px;right:12px;display:flex;gap:8px}
.lb :focus-visible{outline-color:#fff}
.dlg{width:min(1120px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border:0;border-radius:10px;background:#fff;color:var(--fusain);overflow:auto}
.dlg::backdrop{background:rgba(17,19,28,.6)}
.dlg-head{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px clamp(18px,3vw,32px);background:rgba(255,255,255,.96);border-bottom:1px solid var(--trait)}
.dlg-body{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:28px;padding:clamp(18px,3vw,32px)}
.dlg-side{display:grid;gap:20px;align-content:start}

/* Autres chantiers (bande de photos) */
.strip{margin-top:clamp(40px,5vw,64px)}
.strip-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:16px 0 0;padding:0;list-style:none}
.strip-list figure{display:grid;gap:10px;margin:0}
.strip-list img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r)}
.strip-list figcaption{font-size:14.5px;color:var(--fusain-2)}

/* ============ Preuves, entreprise ============ */
.proofs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.proof{display:grid;gap:10px;align-content:start;padding:22px;border:1px solid var(--trait);border-radius:var(--r)}
.proof svg{width:26px;height:26px;color:var(--terre)}
.proof h3{font-size:20px}
.proof p{font-size:15px;color:var(--fusain-2)}
.why{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:start}
.why-lead{position:sticky;top:110px;display:grid;gap:20px}
.why-lead .quote{font:700 clamp(24px,2.2vw,32px)/1.25 "Bricolage Grotesque",sans-serif;letter-spacing:-.015em}
.family-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:6px 0 0;border-top:1px solid var(--trait)}
.family-stats div{padding:16px 16px 0 0}
.family-stats dt{font:800 40px/1 "Bricolage Grotesque",sans-serif}
.family-stats dd{margin:6px 0 0;font-size:14.5px;color:var(--fusain-2)}
.why-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--trait)}
.why-list li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding:24px 0;border-bottom:1px solid var(--trait)}
.why-list svg{width:28px;height:28px;color:var(--terre);fill:none;stroke:currentColor;stroke-width:1.7}
.why-list h3{font:700 18px/1.3 Figtree,sans-serif;letter-spacing:0;margin:0 0 6px}
.why-list p{font-size:15.5px;color:var(--fusain-2)}

/* ============ Questions ============ */
.faq{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(32px,6vw,96px);align-items:start}
.faq-side{position:sticky;top:110px;display:grid;gap:18px;justify-items:start}
.qa{border-top:1px solid var(--trait)}
.qa details{border-bottom:1px solid var(--trait)}
.qa summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;cursor:pointer;list-style:none;font-size:18px;font-weight:650;line-height:1.35}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";flex:none;width:22px;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C24E1C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/22px no-repeat;transition:transform .25s var(--ease)}
.qa details[open] summary::after{transform:rotate(180deg)}
.qa .a{padding:0 0 22px;display:grid;gap:12px}
.qa .a p{font-size:16px;line-height:1.7;color:var(--fusain-2);max-width:66ch}
.qa .a strong{color:var(--fusain)}

/* ============ Contact et devis ============ */
.contact{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,96px);align-items:start}
.contact-side{display:grid;gap:26px;align-content:start}
.big-tel{display:inline-flex;align-items:center;gap:12px;font:800 clamp(32px,3.4vw,46px)/1 "Bricolage Grotesque",sans-serif;letter-spacing:-.02em;text-decoration:none;color:var(--fusain)}
.big-tel svg{width:28px;height:28px;color:var(--terre)}
.direct{display:grid;gap:12px;justify-items:start;padding-top:22px;border-top:1px solid var(--trait)}
.card--wide{max-width:none}
.wiz [hidden]{display:none!important}
.wiz-form{display:grid;gap:18px}
.wiz-head{display:grid;gap:4px}
.wiz-prog{height:6px;margin:14px 0 6px;border-radius:2px;background:var(--neige);overflow:hidden}
.wiz-prog i{display:block;height:100%;background:var(--terre);transform-origin:left;transform:scaleX(.25);transition:transform .35s var(--ease)}
.wiz-count{margin:0;font-size:13.5px;font-weight:650;color:var(--fusain-2)}
.wiz-step{display:grid;gap:18px;min-width:0;margin:0;padding:0;border:0}
.wiz-q{float:left;width:100%;margin:0 0 2px;padding:0;font:750 clamp(23px,2vw,28px)/1.12 "Bricolage Grotesque",sans-serif;letter-spacing:-.015em;color:var(--fusain)}
.wiz-q:focus{outline:none}
.wiz-step>.wiz-q+*{clear:both}
.wiz-group{display:grid;gap:10px;min-width:0;margin:0;padding:0;border:0}
.wiz-group>legend,.wiz-label{float:left;width:100%;margin:0 0 2px;padding:0;font-size:14.5px;font-weight:650}
.wiz-group>legend+*{clear:both}
.wiz-note{font-size:14px;line-height:1.5;color:var(--fusain-2)}
.wiz-note b{color:var(--fusain)}
.wiz-recap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:12px 14px;border-radius:var(--r);background:var(--brume);font-size:14.5px}
.wiz-recap b{font-weight:700}
.wiz-recap i{display:inline-block;width:16px;height:16px;border-radius:3px;background:var(--c);vertical-align:-3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.shots{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.thumbs{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.thumbs li{position:relative;width:76px;height:76px}
.thumbs img{width:100%;height:100%;object-fit:cover;border-radius:var(--r)}
.thumbs button{position:absolute;top:-8px;right:-8px;width:26px;height:26px;border-radius:50%;border:0;background:var(--fusain);color:#fff;cursor:pointer;font-weight:700}
.add-shot{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 16px;border:1.5px dashed var(--fusain-3);border-radius:var(--r);cursor:pointer;font-weight:650}
.add-shot:hover,.add-shot:focus-within{border-color:var(--fusain);border-style:solid}
.add-shot input{position:absolute;opacity:0;width:1px;height:1px}
.add-shot svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.est{display:grid;gap:4px;padding:16px 18px;border-radius:var(--r);border:1.5px solid var(--fusain)}
.est-l{font-size:14px;font-weight:650;color:var(--fusain-2)}
.est-v{font:800 clamp(28px,2.6vw,36px)/1.05 "Bricolage Grotesque",sans-serif;letter-spacing:-.02em}
.est-n{font-size:13px;line-height:1.5;color:var(--fusain-2)}
.wiz-nav{display:flex;gap:10px}
.wiz-nav .cta{flex:1}
.wiz-nav .btn{min-height:56px}
.wiz-trust{display:grid;gap:6px;margin:0;padding:12px 0 0;border-top:1px solid var(--trait);font-size:14px;color:var(--fusain-2)}
.wiz-trust b{color:var(--fusain)}
.done{display:none;gap:12px}
form.sent>:not(.done){display:none!important}
form.sent .done{display:grid}
.done-t{font-size:clamp(26px,2.4vw,32px)}
.done p{color:var(--fusain-2)}
.done-recap{display:grid;gap:6px;padding:14px 16px;border-radius:var(--r);background:var(--brume);font-size:15px}

/* Ancien formulaire hero/contact (formulaires simples) */
.qform{display:grid;gap:12px}
.lead-form{display:grid;gap:14px}

/* ============ Calcul de pertes de chaleur ============ */
.calc{display:grid;gap:18px;padding:clamp(22px,3vw,34px);border-radius:var(--r);border:1px solid var(--trait);position:relative}
.calc::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:10px;border-radius:var(--r) var(--r) 0 0;background:var(--ardoise) var(--grain)}
.calc .field input{max-width:220px}
.calc-out{display:grid;gap:6px;padding-top:16px;border-top:1px solid var(--trait)}
.calc-out p{color:var(--fusain-2);font-size:15.5px}
.calc-out .big{font:800 clamp(32px,3.2vw,44px)/1.05 "Bricolage Grotesque",sans-serif;letter-spacing:-.02em;color:var(--fusain)}
.callout{padding:18px 20px;border-radius:var(--r);border:1px solid var(--trait);background:#fff}

/* ============ Guides et articles ============ */
.guides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.guide{display:grid;gap:10px;align-content:start;padding:22px 20px 22px;border:1px solid var(--trait);border-radius:var(--r);text-decoration:none;position:relative;transition:border-color .2s}
.guide:hover{border-color:var(--fusain)}
.guide h3{font-size:21px;line-height:1.15}
.guide p{font-size:15px;color:var(--fusain-2)}
.guide .more{font-weight:700;text-decoration:underline;text-decoration-color:var(--terre);text-decoration-thickness:2px;text-underline-offset:5px}
.article{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:clamp(32px,5vw,72px);align-items:start}
.article-meta{font-size:14px;color:var(--fusain-3)}
.prose{max-width:70ch}
.prose>*+*{margin-top:1.05em}
.prose h2{font-size:clamp(26px,2.4vw,34px);margin-top:1.8em}
.prose h3{font-size:22px;margin-top:1.4em}
.prose p,.prose li{font-size:17px;line-height:1.75;color:#33312C}
.prose ul,.prose ol{padding-left:1.2em}
.prose li+li{margin-top:.4em}
.prose li::marker{color:var(--terre)}
.prose strong{color:var(--fusain)}
.prose a:not(.btn){color:var(--fusain);font-weight:650;text-decoration-color:var(--terre);text-decoration-thickness:2px;text-underline-offset:4px}
.table-wrap{overflow-x:auto}
.prose table{width:100%;border-collapse:collapse;font-size:15.5px}
.prose th,.prose td{text-align:left;padding:12px 12px 12px 0;border-bottom:1px solid var(--trait);vertical-align:top}
.prose th{font-weight:700}
.toc{position:sticky;top:110px;display:grid;gap:12px;padding:20px;border:1px solid var(--trait);border-radius:var(--r)}
.toc p{font-weight:700}
.toc ol{margin:0;padding-left:1.2em;display:grid;gap:8px;font-size:15px}
.toc a{text-decoration:none;color:var(--fusain-2)}
.toc a:hover{color:var(--fusain);text-decoration:underline}
.checklist{list-style:none;padding:0!important}
.checklist li{position:relative;padding-left:30px}
.checklist li::before{content:"";position:absolute;left:0;top:.3em;width:20px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C24E1C' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/20px no-repeat}
.cta-box{display:grid;gap:12px;justify-items:start;padding:24px;border-radius:var(--r);border:1.5px solid var(--fusain);margin:2em 0}
.legal{max-width:76ch}
.legal h1{margin-bottom:24px}
.legal h2{font-size:24px;margin:2em 0 .6em}
.legal p{line-height:1.7;color:#33312C;margin:0 0 1em}

/* ============ Simulateur (page dédiée) ============ */
.sim{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.sim [hidden]{display:none!important}
.sim-nav{position:sticky;top:100px;display:grid;gap:6px;list-style:none;margin:0;padding:0}
.sim-nav button{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:center;width:100%;min-height:50px;padding:6px 10px;border:0;border-radius:var(--r);background:none;text-align:left;color:var(--fusain-2);font-weight:600;cursor:pointer;counter-increment:sn}
.sim-nav{counter-reset:sn}
.sim-nav button::before{content:counter(sn);display:grid;place-items:center;width:26px;height:26px;border-radius:4px;border:1.5px solid var(--champ);font-size:13px}
.sim-nav button[aria-current="step"]{color:var(--fusain);background:var(--brume)}
.sim-nav button[aria-current="step"]::before,.sim-nav button.done::before{background:var(--fusain);border-color:var(--fusain);color:#fff}
.sim-nav button:disabled{opacity:.45;cursor:not-allowed}
.progress{display:none}
.sim-panel{display:grid;gap:22px}
.sim-step{display:grid;gap:22px}
.sim-step header{display:grid;gap:8px}
.sim-step header p{color:var(--fusain-2)}
.drop{position:relative;display:grid;place-items:center;gap:8px;min-height:240px;padding:28px;border:2px dashed var(--fusain-3);border-radius:var(--r);text-align:center;cursor:pointer}
.drop.over,.drop:hover{border-color:var(--terre);border-style:solid}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop b{font-size:18px}
.drop span{font-size:14.5px;color:var(--fusain-2)}
.preview{display:grid;gap:12px;justify-items:start}
.preview img{max-height:420px;width:auto;max-width:100%;border-radius:var(--r)}
.check{position:relative;display:block;cursor:pointer}
.sim .check{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--fusain-2)}
.sim .check input{width:20px;height:20px;margin-top:2px;accent-color:var(--terre)}
.fams{display:flex;flex-wrap:wrap;gap:8px}
.fam{min-height:42px;padding:0 14px;border:1.5px solid var(--champ);border-radius:var(--r);background:#fff;font-weight:650;cursor:pointer}
.fam[aria-pressed="true"]{background:var(--fusain);border-color:var(--fusain);color:#fff}
.swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
.swt{position:relative;display:grid;gap:8px;cursor:pointer}
.swt input{position:absolute;opacity:0}
.swt i{height:110px;border-radius:var(--r) var(--r) 4px 4px;background:var(--c) var(--grain);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.swt span{font-size:14.5px;font-weight:650}
.swt small{display:block;font-weight:400;color:var(--fusain-3)}
.swt input:checked+i{outline:3px solid var(--fusain);outline-offset:3px}
.swt input:focus-visible+i{outline:3px solid var(--terre);outline-offset:3px}
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.opt{position:relative;display:grid;gap:6px;cursor:pointer}
.opt input{position:absolute;opacity:0}
.opt .tex{aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:#E8E1D4}
.opt .tex svg{width:100%;height:100%;display:block}
.opt b{font-size:16px}
.opt span{font-size:14px;color:var(--fusain-2)}
.opt input:checked~.tex{outline:3px solid var(--fusain);outline-offset:3px}
.recap{display:grid;grid-template-columns:140px 1fr;gap:20px;align-items:center}
.recap img{width:140px;height:140px;object-fit:cover;border-radius:var(--r)}
.recap dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0}
.recap dt{color:var(--fusain-2)}
.recap dd{margin:0;font-weight:650;display:flex;align-items:center;gap:8px}
.recap dd i{width:16px;height:16px;border-radius:3px;background:var(--c)}
.busy{display:grid;justify-items:center;gap:12px;padding:40px 20px;text-align:center}
.ring{width:46px;height:46px;border-radius:50%;border:3px solid var(--neige);border-top-color:var(--terre);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.alert{padding:16px 18px;border-radius:var(--r);border:1.5px solid #9B2D17;color:#6F2010;font-weight:600}
.alert.info{border-color:var(--ardoise);color:var(--ardoise)}
.disclaimer{font-size:13.5px;color:var(--fusain-3)}
.result{display:grid;gap:18px}
.history{display:flex;gap:10px;flex-wrap:wrap}
.history button{display:grid;gap:6px;width:110px;padding:0;border:0;background:none;cursor:pointer;font-size:13px;text-align:left}
.history img{width:110px;height:110px;object-fit:cover;border-radius:var(--r)}
.history button[aria-current="true"] img{outline:3px solid var(--fusain);outline-offset:2px}
.sim-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:22px;border-top:1px solid var(--trait)}
.sim-sub{display:grid;gap:14px;padding:22px;border:1px solid var(--trait);border-radius:var(--r)}

/* ============ Pages d'annonces ============ */
.lp-hdr{border-bottom:1px solid var(--trait)}
.lp-hero{padding:clamp(24px,3vw,48px) 0 var(--sec)}
.lp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.lp-hero h1{margin-bottom:18px}
.lp-hero .lead{margin-bottom:24px}
.lp-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.lp-cta .or{font-size:15px;color:var(--fusain-2)}
.lp-cta .or a{color:var(--fusain);font-weight:700}
.lp-foot{padding:28px var(--pad) 40px;text-align:center;font-size:13.5px;color:var(--fusain-2);border-top:1px solid var(--trait)}
.lp-foot p{margin:0 auto 10px;max-width:70ch}
.lp-foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px}
.lp-foot a{color:var(--fusain-2)}
body.lp .topbar{display:none}

/* ============ Bandeau de consentement ============ */
.consent-bar{position:fixed;left:12px;bottom:12px;z-index:70;width:min(560px,calc(100vw - 24px));display:grid;gap:12px;padding:18px;border-radius:var(--r);background:#fff;border:1px solid var(--trait-2);box-shadow:0 8px 12px -8px rgba(30,33,48,.3)}
.consent-bar p{margin:0;font-size:14.5px;line-height:1.55}
.consent-bar .btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.consent-bar .btn{min-height:46px}

/* ============ Réactif ============ */
@media (max-width:1100px){
  .hdr .links{display:none}
  .topbar .links{display:none}
  .foot-top{grid-template-columns:1fr 1fr}
  .guides{grid-template-columns:1fr 1fr}
  .finishes{grid-template-columns:repeat(3,minmax(0,1fr))}
  .steps-photo{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(220px,32%);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
  .steps-photo li{scroll-snap-align:start}
  .article{grid-template-columns:minmax(0,1fr)}
  .toc{display:none}
}
@media (max-width:860px){
  .hdr,.lp-hdr{height:66px;gap:12px}
  .logo{font-size:17px;gap:10px;letter-spacing:.14em}
  .logo img{width:38px;height:38px}
  .hdr .hdr-cta,.hdr .tel-n{display:none}
  .hdr .hdr-wa{width:44px;padding:0;justify-content:center}
  .hdr .hdr-wa span{display:none}
  .hdr .tel{width:44px;height:44px;justify-content:center;border:1.5px solid var(--trait-2);border-radius:var(--r)}
  .hdr-menu{display:grid;place-items:center;width:44px;height:44px;border:1.5px solid var(--trait-2);border-radius:var(--r);background:#fff;cursor:pointer}
  .topbar{display:none}
  .mbar{position:fixed;left:10px;right:10px;bottom:10px;z-index:40;display:grid;grid-template-columns:auto auto 1.15fr 1fr;gap:8px;padding:8px;border-radius:10px;background:rgba(255,255,255,.97);border:1px solid var(--trait-2);box-shadow:0 6px 12px -6px rgba(30,33,48,.3);transform:translateY(130%);transition:transform .3s var(--ease)}
  .mbar.on{transform:none}
  .mbar a,.mbar button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:48px;padding:0 14px;white-space:nowrap;border-radius:var(--r);border:1.5px solid var(--trait-2);background:#fff;font-weight:700;font-size:15px;text-decoration:none;color:var(--fusain);cursor:pointer}
  .mbar .wa{background:var(--wa);border-color:var(--wa);color:#fff;padding:0 10px}
  .mbar .go{background:var(--terre);border-color:var(--terre);color:#fff;padding:0 8px;font-size:14.5px}
  .mbar .wa{font-size:14.5px}
  body.has-mbar{padding-bottom:84px}
  .cols2,.phero-grid,.lp-grid,.pf,.why,.faq,.contact,.dlg-body,.sec-head--split{grid-template-columns:minmax(0,1fr)}
  .sticky-head,.why-lead,.faq-side{position:static}
  .contact-side{display:contents}
  .contact-side > :first-child{order:0}
  .contact .card{order:1}
  .contact-side > :not(:first-child){order:2}
  .lp-hero .cmp,.phero-grid > .cmp,.lp-grid > [data-project-compare],.phero-grid > [data-project-compare]{order:-1}
  .signs{grid-template-columns:minmax(0,1fr)}
  .strip-list{grid-template-columns:1fr 1fr;gap:12px}
  .details-band,.crops{grid-template-columns:repeat(3,minmax(0,1fr))}
  .spec li{grid-template-columns:minmax(0,1fr);gap:4px}
  .band{grid-template-columns:minmax(0,1fr)}
  .sim{grid-template-columns:minmax(0,1fr)}
  .sim-nav{display:none}
  .progress{display:block;font-size:14px;font-weight:650;color:var(--fusain-2)}
  .progress .bar{height:6px;margin-top:8px;border-radius:2px;background:var(--neige);overflow:hidden}
  .progress .bar i{display:block;height:100%;width:calc(var(--w,.2) * 100%);background:var(--terre)}
}
@media (max-width:560px){
  .row2,.tiles{grid-template-columns:minmax(0,1fr)}
  .foot-top{grid-template-columns:minmax(0,1fr)}
  .guides{grid-template-columns:minmax(0,1fr)}
  .finishes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps-photo{grid-auto-columns:76%}
  .recap{grid-template-columns:minmax(0,1fr)}
  .lp-cta .btn{width:100%}
  .kv div{grid-template-columns:110px 1fr}
}

/* ============ Dessins techniques (coupes) ============ */
.draw .lbl{font:600 13px Figtree,sans-serif;fill:var(--fusain-2)}
.draw .mk circle{fill:var(--terre)}
.draw .mk text{font:700 13px Figtree,sans-serif;fill:#fff;text-anchor:middle}
.draw .ink{stroke:var(--fusain);stroke-width:1.2;fill:none}
.draw .thin{stroke:var(--fusain);stroke-width:.8;fill:none}
.legend li::before{background:var(--terre)}

/* ============ Simulateur (page) : conseils et confidentialité ============ */
.tips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;list-style:none;margin:0;padding:0}
.tips li{display:grid;gap:8px;padding:16px;border-radius:var(--r);border:1px solid var(--trait);font-size:14px;line-height:1.45;color:var(--fusain-2)}
.tips svg{width:22px;height:22px;color:var(--terre);fill:none;stroke:currentColor;stroke-width:1.7}
.tips b{color:var(--fusain);font-size:15px}
.privacy{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--fusain-2)}
.privacy svg{width:18px;height:18px;margin-top:2px;color:var(--terre);fill:none;stroke:currentColor;stroke-width:1.8}
.ui-row{display:flex;align-items:center;justify-content:space-between;gap:12px}

/* ============ « Et votre façade ? » (cases à cocher) ============ */
.checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.checks .check{position:relative;display:block;cursor:pointer}
.checks .check input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.checks .check span{display:grid;grid-template-columns:24px minmax(0,1fr);gap:4px 14px;height:100%;padding:18px 20px;border:1.5px solid var(--champ);border-radius:var(--r);background:#fff;transition:border-color .15s,box-shadow .15s}
.checks .check span::before{content:"";grid-row:span 2;width:22px;height:22px;margin-top:1px;border-radius:4px;border:1.5px solid var(--fusain-3);background:#fff center/14px no-repeat}
.checks .check b{font-size:16.5px;line-height:1.3}
.checks .check small{grid-column:2;font-size:14.5px;line-height:1.5;color:var(--fusain-2)}
.checks .check:hover span{border-color:var(--fusain)}
.checks .check input:checked+span{border-color:var(--terre);box-shadow:inset 0 0 0 1px var(--terre)}
.checks .check input:checked+span::before{border-color:var(--terre);background-color:var(--terre);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.checks .check input:focus-visible+span{outline:2.5px solid var(--terre);outline-offset:3px}
.checks-out{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:16px;padding:20px 24px;border-radius:var(--r);border:1.5px solid var(--fusain)}
.checks-msg{margin:0;max-width:64ch;font-size:16px;font-weight:650;line-height:1.55}

/* ============ Bénéfices (bande sombre, pages de pub) ============ */
.benefits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;list-style:none;margin:0;padding:0}
.benefits--4{grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--trait)}
.benefits li{display:grid;gap:10px;align-content:start;padding:28px 28px 0 0}
.benefits--4 li+li{padding-left:28px;border-left:1px solid var(--trait)}
.benefits svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:var(--terre)}
.benefits h3{font-size:22px;line-height:1.15}
.benefits p{font-size:15.5px;line-height:1.6;color:var(--fusain-2)}

/* ============ Réactif (compléments) ============ */
@media (max-width:1100px){
  .tips{grid-template-columns:repeat(2,minmax(0,1fr))}
  .benefits--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .benefits--4 li:nth-child(3){padding-left:0;border-left:0}
}
@media (max-width:860px){
  .checks{grid-template-columns:minmax(0,1fr)}
  .checks-out .btn{width:100%}
}
@media (max-width:560px){
  .tips{grid-template-columns:minmax(0,1fr)}
  .benefits,.benefits--4{grid-template-columns:minmax(0,1fr)}
  .benefits--4 li,.benefits--4 li+li{padding:24px 0 0;border-left:0}
}

/* ============ Autres chantiers (page Réalisations) ============ */
.others{list-style:none;margin:0;padding:0;columns:4 240px;column-gap:20px}
.others li{break-inside:avoid;margin:0 0 28px;display:grid;gap:10px}
.others img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r)}
.others li:nth-child(3n+2) img{aspect-ratio:4/3.4}
.others li:nth-child(4n+3) img{aspect-ratio:3/4.6}
.others li:nth-child(5n) img{aspect-ratio:1/1}
.others p{display:grid;gap:3px;font-size:14.5px;color:var(--fusain-2)}
.others b{font:750 18px/1.2 "Bricolage Grotesque",sans-serif;color:var(--fusain)}

@media (max-width:860px){.others{columns:2 150px;column-gap:12px}.others b{font-size:16px}}

/* ============ Pages ville ============ */
.ville-fig{margin:0;padding:0;overflow:hidden}
.ville-fig img{width:100%;aspect-ratio:4/4.6;object-fit:cover}
.ville-fig figcaption{padding:14px 18px 0;font-size:14.5px;color:var(--fusain-2)}
.ville-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--trait)}
.ville-list li{border-bottom:1px solid var(--trait)}
.ville-list a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font-weight:650;font-size:17px;text-decoration:none}
.ville-list a::after{content:"";flex:none;width:22px;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C24E1C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/22px no-repeat}
.ville-list a:hover{color:var(--terre)}
.ville-hub{list-style:none;margin:40px 0 0;padding:0;border-top:1px solid var(--trait);max-width:980px}
.ville-hub li{border-bottom:1px solid var(--trait)}
.ville-hub a{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr) 22px;gap:8px 28px;align-items:center;padding:24px 0;text-decoration:none}
.ville-hub a::after{content:"";width:22px;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C24E1C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/22px no-repeat}
.ville-hub b{display:flex;align-items:center;gap:14px;font:800 clamp(24px,2.4vw,32px)/1.05 "Bricolage Grotesque",sans-serif;letter-spacing:-.015em}
.ville-hub b::before{content:"";width:22px;height:22px;border-radius:4px;background:var(--c) var(--grain);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);flex:none}
.ville-hub span{font-size:15px;color:var(--fusain-2)}
.ville-hub a:hover b{color:var(--terre)}

@media (max-width:560px){.ville-hub a{grid-template-columns:minmax(0,1fr) 22px}.ville-hub span{grid-column:1}}

/* ============ Corrections petits écrans ============ */
@media (max-width:560px){
  .lp-hdr .tel span{display:none}
  .lp-hdr .tel{width:44px;height:44px;justify-content:center;border:1.5px solid var(--trait-2);border-radius:var(--r)}
  .lp-hdr .hdr-wa{padding:0 12px}
  .details-band{grid-template-columns:minmax(0,1fr)}
  .details-band .crop{aspect-ratio:16/10}
}
@media (max-width:380px){.lp-hdr .hdr-wa{font-size:0;gap:0}.lp-hdr .hdr-wa svg{width:22px;height:22px}}

/* ============ Avant / après : place réservée et première image affichée sans attendre le script ============ */
[data-project-compare]{position:relative;overflow:hidden;border-radius:var(--r);background:#23262F}
[data-project-compare="pavillon-n29"]{aspect-ratio:820/1000}
[data-project-compare="pavillon-n29"][data-view-key="viewHero"]{aspect-ratio:820/900}
[data-project-compare="maison-parpaing"]{aspect-ratio:940/800}
.cmp-pre{position:absolute;max-width:none;width:176.59%;height:auto;left:-36.59%;top:-5%}
[data-view-key="viewHero"] .cmp-pre{top:-10%}
@media (max-width:860px){
  [data-project-compare="pavillon-n29"],[data-project-compare="pavillon-n29"][data-view-key="viewHero"]{aspect-ratio:800/620}
  [data-project-compare="maison-parpaing"]{aspect-ratio:900/700}
  .cmp-pre,[data-view-key="viewHero"] .cmp-pre{width:181%;left:-40%;top:-9.68%}
}

/* Place réservée aux fiches de chantier insérées par le script (évite les sauts de mise en page) */
[data-projects="grid"]:empty{min-height:560px}
@media (max-width:860px){[data-projects="grid"]:empty{min-height:1140px}}
.case-facts:empty{min-height:68px}
@media (max-width:860px){.case-facts:empty{min-height:204px}}
#all-projects .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,40px)}
#all-projects .pc-img{aspect-ratio:4/3.1}
@media (max-width:860px){#all-projects .pgrid{grid-template-columns:minmax(0,1fr)}}

/* ============ Motion design (V3) ============ */
/* En-tête : le logo s'assemble au chargement */
.hdr .logo img{animation:logo-in .9s cubic-bezier(.34,1.56,.64,1) .1s both}
.hdr .logo span{animation:mot-in 1.1s cubic-bezier(.16,1,.3,1) .3s both}
@keyframes logo-in{from{clip-path:circle(0% at 50% 50%);transform:rotate(-35deg) scale(.6)}to{clip-path:circle(50% at 50% 50%);transform:none}}
@keyframes mot-in{from{letter-spacing:.7em;opacity:0}to{opacity:1}}

/* Le bouton WhatsApp respire, une onde part de temps en temps */
.wa-big{position:relative;isolation:isolate}
.wa-big::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;animation:onde 3.2s cubic-bezier(.16,1,.3,1) 1.5s infinite}
@keyframes onde{0%{box-shadow:0 0 0 0 rgba(19,135,74,.38)}60%,100%{box-shadow:0 0 0 16px rgba(19,135,74,0)}}
.endcard .wa-big{animation:souffle 3.2s ease-in-out 1.5s infinite}
@keyframes souffle{0%,100%{transform:scale(1)}18%{transform:scale(1.04)}36%{transform:scale(1)}}

/* Carte de fin : le logo se construit (cercle tracé, ciel, montagne qui monte, lettres une à une), la brume dérive */
.lb{position:relative;width:180px;height:180px}
.lb-ring{position:absolute;left:-8px;top:-8px;width:196px;height:196px;overflow:visible}
.lb-ring circle{fill:none;stroke:var(--orange);stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:0;opacity:.55}
.lb-disc{position:absolute;inset:0;border-radius:50%;overflow:hidden;clip-path:circle(50% at 50% 50%);background:#B66A57;box-shadow:0 26px 44px -24px rgba(30,33,48,.6)}
.lb-art{position:absolute;inset:0;width:100%;height:100%}
.lb-mist{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.lb-mist path{animation:brume 9s ease-in-out infinite alternate}
.lb-mist path:nth-of-type(2){animation-duration:12s;animation-delay:-4s}
.lb-mist path:nth-of-type(3){animation-duration:15s;animation-delay:-8s}
@keyframes brume{from{transform:translateX(-4%)}to{transform:translateX(4%)}}
.lb-word{position:absolute;left:0;right:0;top:15%;display:flex;justify-content:center;gap:.3em;font:700 18px/1 "Bricolage Grotesque",sans-serif;color:#fff;text-shadow:0 1px 8px rgba(90,40,25,.3)}
.lb-word i{font-style:normal;display:inline-block}
.lb.armed .lb-ring circle{stroke-dashoffset:1}
.lb.armed .lb-disc{clip-path:circle(0% at 50% 50%)}
.lb.armed .lb-art{transform:translateY(18%) scale(1.18)}
.lb.armed .lb-word i{transform:translateY(140%);opacity:0}
.lb.in .lb-ring circle{stroke-dashoffset:0;transition:stroke-dashoffset 1.2s cubic-bezier(.65,0,.35,1)}
.lb.in .lb-disc{clip-path:circle(50% at 50% 50%);transition:clip-path 1s cubic-bezier(.16,1,.3,1) .3s}
.lb.in .lb-art{transform:none;transition:transform 1.6s cubic-bezier(.16,1,.3,1) .35s}
.lb.in .lb-word i{transform:none;opacity:1;transition:transform .75s cubic-bezier(.34,1.56,.64,1),opacity .3s;transition-delay:calc(1s + var(--i) * 70ms)}

/* BINARVA V3 « BINARVA aujourd'hui » : accueil aligné sur les pubs (aperçu gratuit avant travaux, WhatsApp,
   vrai chantier en vidéo, avant/après entier, carte de fin claire). Chargé après v2-home.css. */

/* ---------- Héros : l'offre, puis la façade qui change sous le doigt ---------- */
.h3ro{padding:clamp(24px,3vw,44px) 0 clamp(64px,7vw,104px)}
.h3ro-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:clamp(32px,5vw,88px);align-items:center}
.h3ro-copy{display:grid;justify-items:start;align-content:center}
.h3ro h1{font-size:clamp(44px,5.3vw,80px);line-height:.98;letter-spacing:-.035em;max-width:11.5ch}
/* Petite ligne au-dessus du titre : qui on est, avant le métier */
.h3ro .h1-sur{display:block;width:max-content;max-width:100%;margin:0 0 14px;font:800 clamp(14px,1.25vw,17px)/1.2 "Bricolage Grotesque",Figtree,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#783217}
/* L'aperçu gratuit passe en bonus, sous le bouton de devis */
.h3ro .stamp--bonus{margin:24px 0 0;padding:10px 16px 11px;background:#FBF3EA;color:var(--fusain);font-size:clamp(15px,1.3vw,18px);letter-spacing:.01em}
.stamp--bonus span{color:#783217}
.stamp{display:inline-block;margin:22px 0 0;padding:9px 20px 10px;border-radius:12px;background:var(--wa);color:#fff;font:800 clamp(22px,2.1vw,30px)/1 "Bricolage Grotesque",sans-serif;letter-spacing:.02em;text-transform:uppercase;transform:rotate(-3deg);box-shadow:0 14px 24px -16px rgba(30,33,48,.7);animation:tampon .55s var(--rebond) .45s both}
a.stamp{text-decoration:none;cursor:pointer}
@keyframes tampon{from{opacity:0;transform:rotate(-9deg) scale(1.7)}to{opacity:1;transform:rotate(-3deg) scale(1)}}
.h3ro .lead{margin:22px 0 20px;max-width:46ch}
.h3ro-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 16px}
.h3ro-cta .btn{min-height:68px;padding:0 26px;font-size:16.5px;border-radius:14px}
.h3ro .oks{margin:0 0 28px}

.conf{margin:0;justify-self:end;display:grid;gap:14px;width:min(560px,calc((100svh - 200px) * .744),46vw)}
.conf-stage{position:relative;aspect-ratio:1116/1500;border-radius:20px;overflow:hidden;background:#CFDBEA;box-shadow:0 2px 0 rgba(30,33,48,.05),0 44px 70px -46px rgba(30,33,48,.75);isolation:isolate}
.conf-view{position:absolute;inset:0;overflow:hidden}
.conf-img,.conf-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.conf-layer{z-index:1;will-change:clip-path}
.conf-ring{position:absolute;z-index:2;border-radius:50%;border:3px solid rgba(255,255,255,.95);box-shadow:0 0 22px 4px rgba(255,255,255,.75),inset 0 0 18px 2px rgba(255,255,255,.55);transform:translate(-50%,-50%);pointer-events:none}
.conf-pin{position:absolute;z-index:3;left:14px;top:14px;display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 10px;border-radius:9px;background:rgba(255,255,255,.94);font-size:13.5px;font-weight:700;color:var(--fusain);box-shadow:0 6px 16px -10px rgba(30,33,48,.6)}
.conf-pin i{width:9px;height:9px;border-radius:50%;background:var(--orange)}
.conf-chip{position:absolute;z-index:3;left:14px;top:58px;display:flex;align-items:center;gap:11px;min-width:168px;padding:9px 16px 9px 9px;border-radius:12px;background:#fff;box-shadow:0 14px 26px -16px rgba(30,33,48,.7)}
.conf-chip>i{width:34px;height:34px;border-radius:7px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);transition:background .3s}
.conf-chip span{display:grid;line-height:1.15}
.conf-chip small{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fusain-3)}
.conf-chip b{font-size:16.5px;font-weight:750}
.conf-chip.pop{animation:pop .5s var(--ease)}
@keyframes pop{0%{transform:scale(.86)}100%{transform:scale(1)}}
.conf-tap{position:absolute;z-index:4;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:rgba(255,255,255,.38);border:2.5px solid #fff;box-shadow:0 8px 20px -6px rgba(30,33,48,.55);opacity:0;transition:left .5s var(--ease),top .5s var(--ease),opacity .25s,transform .18s;pointer-events:none}
.conf-tap.on{opacity:1}
.conf-tap.press{transform:scale(.78)}
.conf-panel{position:absolute;z-index:3;left:12px;right:12px;bottom:12px;display:grid;gap:7px;padding:12px;border-radius:14px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 18px 34px -22px rgba(30,33,48,.8)}
.conf-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.conf-k{width:100px;font-size:13px;font-weight:700;color:var(--fusain-2)}
.conf-row label{position:relative;cursor:pointer}
.conf-row input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.conf-row label>span{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 12px;border-radius:9px;border:1.5px solid var(--champ);background:#fff;font-size:14px;font-weight:650;white-space:nowrap;transition:background .2s,border-color .2s,color .2s,transform .2s var(--ease)}
.conf-row label>span i{width:16px;height:16px;border-radius:4px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.conf-row label:hover>span{border-color:var(--fusain)}
.conf-row input:checked+span{background:var(--fusain);border-color:var(--fusain);color:#fff}
.conf-row input:focus-visible+span{outline:2.5px solid var(--orange);outline-offset:2px}
.conf-row input:active+span{transform:scale(.95)}
.conf figcaption{font-size:14.5px;line-height:1.5;color:var(--fusain-2)}

/* ---------- Comment ça marche : la conversation WhatsApp ---------- */
.apx{background:linear-gradient(180deg,var(--brume),#fff 85%)}
.apx-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,6vw,100px);align-items:center}
.phone{justify-self:center;display:grid;grid-template-rows:auto 1fr auto;width:min(350px,100%);aspect-ratio:9/17.6;border-radius:44px;border:11px solid var(--fusain);background:#EFEAE2;overflow:hidden;box-shadow:0 50px 80px -50px rgba(30,33,48,.85);font-family:Figtree,system-ui,sans-serif}
.phone-top{display:flex;align-items:center;gap:10px;padding:16px 16px 12px;background:#fff;border-bottom:1px solid rgba(0,0,0,.06)}
.phone-top img{width:38px;height:38px;border-radius:50%}
.phone-top span{display:grid;line-height:1.2;flex:1}
.phone-top b{font-size:16px}
.phone-top small{font-size:12.5px;color:#667781}
.phone-top svg{width:20px;height:20px;fill:none;stroke:#54656F;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.phone-chat{display:flex;flex-direction:column;justify-content:flex-end;gap:7px;padding:14px 12px;background:#EFEAE2 radial-gradient(rgba(0,0,0,.035) 1.2px,transparent 1.3px) 0 0/18px 18px;overflow:hidden}
.msg{position:relative;max-width:80%;padding:7px 10px 18px;border-radius:10px;font-size:14.5px;line-height:1.38;color:#111B21;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.msg.me{align-self:flex-end;background:#D9FDD3;border-top-right-radius:3px}
.msg.them{align-self:flex-start;background:#fff;border-top-left-radius:3px}
.msg.pic{padding:4px 4px 20px;width:62%}
.msg.pic img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:7px}
.msg.them.pic{padding-bottom:22px}
.msg.them.pic img{margin-bottom:6px}
.msg time{position:absolute;right:8px;bottom:4px;display:inline-flex;align-items:center;gap:3px;font-size:11px;color:#54656F}
.ticks2{display:inline-block;width:16px;height:11px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11' fill='none' stroke='%238696A0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6l3 3 6-7M6 8l1 1 6-7'/%3E%3C/svg%3E") center/16px no-repeat;transition:filter .3s}
.msg.lu .ticks2{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11' fill='none' stroke='%2353BDEB' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6l3 3 6-7M6 8l1 1 6-7'/%3E%3C/svg%3E")}
.msg-tag{position:absolute;left:10px;top:10px;z-index:1;display:inline-flex;align-items:center;gap:6px;padding:4px 9px 4px 7px;border-radius:7px;background:#fff;font-size:11.5px;font-weight:700;color:var(--fusain);box-shadow:0 4px 10px -6px rgba(0,0,0,.5)}
.msg-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange)}
.typing{display:none}
.phone-bar{display:flex;align-items:center;gap:8px;padding:8px 10px 14px;background:#EFEAE2}
.phone-bar span{flex:1;padding:10px 16px;border-radius:22px;background:#fff;font-size:14px;color:#54656F}
.phone-bar i{width:42px;height:42px;border-radius:50%;background:var(--wa-vif) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E") center/20px no-repeat}
/* Animation de la conversation (activée par le script, sinon tout est visible) */
.phone.js-chat .msg{opacity:0;transform:translateY(14px) scale(.94);transform-origin:bottom right;transition:opacity .35s var(--ease),transform .45s var(--ease)}
.phone.js-chat .msg.them{transform-origin:bottom left}
.phone.js-chat .msg.in{opacity:1;transform:none}
.phone.js-chat .msg.gone{display:none}
.phone.js-chat .typing{display:flex;gap:4px;padding:12px 14px}
.typing i{width:7px;height:7px;border-radius:50%;background:#8696A0;animation:saute 1.1s infinite}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
@keyframes saute{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-5px);opacity:1}}

.apx-text{display:grid;gap:30px;justify-items:start}
.apx-text .h2{max-width:15ch}
.flow{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--trait);width:100%}
.flow li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:18px;padding:20px 0;border-bottom:1px solid var(--trait)}
.flow svg{width:52px;height:52px;padding:12px;border-radius:14px;background:#FDEEE6;color:var(--terre);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.flow h3{font:750 21px/1.15 "Bricolage Grotesque",sans-serif;letter-spacing:-.01em;margin:2px 0 6px}
.flow p{font-size:16px;line-height:1.55;color:var(--fusain-2);max-width:52ch}

/* ---------- Le vrai chantier, en vidéo ---------- */
.swash{position:relative;white-space:nowrap;color:var(--orange);padding-bottom:.08em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M3 11C48 4 120 2 197 8' fill='none' stroke='%23E2622B' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 100%/0% .26em;transition:background-size .9s var(--ease) .2s}
.swash.in{background-size:100% .26em}
.clips{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,28px);align-items:start}
.clips li:nth-child(even){margin-top:44px}
.clips--sm{grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
.clips--sm li:nth-child(even){margin-top:28px}
.clips--sm .clip{border-radius:16px}
.clips--sm figcaption{font-size:14px}
.clips--sm figcaption b{font-size:18px}
.clips figure{margin:0;display:grid;gap:14px}
.clip{position:relative;aspect-ratio:9/16;border-radius:20px;overflow:hidden;background:#23262F;box-shadow:0 34px 60px -42px rgba(30,33,48,.8)}
.clip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tag-ch{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:7px;padding:5px 10px 5px 5px;border-radius:9px;background:rgba(255,255,255,.94);font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--fusain)}
.tag-ch img{width:18px;height:18px;border-radius:50%}
.tag-ch--line{position:static;background:#fff;border:1px solid var(--trait-2)}
.clips figcaption{display:grid;gap:4px;font-size:15px;line-height:1.5;color:var(--fusain-2)}
.clips figcaption b{font:750 21px/1.15 "Bricolage Grotesque",sans-serif;letter-spacing:-.01em;color:var(--fusain)}

/* ---------- Avant / après : les deux photos entières ---------- */
.ba{display:grid;grid-template-columns:minmax(0,1.778fr) minmax(0,.75fr);gap:clamp(12px,1.6vw,20px);align-items:start}
.ba figure{position:relative;margin:0;border-radius:20px;overflow:hidden;background:var(--neige)}
.ba img{width:100%;height:auto}
.ba-tag{position:absolute;left:16px;top:16px;z-index:1;padding:7px 16px 8px;border-radius:10px;background:var(--fusain);color:#fff;font:800 clamp(18px,1.7vw,24px)/1 "Bricolage Grotesque",sans-serif;letter-spacing:.03em;text-transform:uppercase;transform:rotate(-2deg);box-shadow:0 10px 20px -12px rgba(30,33,48,.8)}
.ba-tag--apres{background:var(--wa)}
.ba-n{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:18px 0 0;font-size:14.5px;color:var(--fusain-2)}
.ba-day{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px) minmax(0,300px);gap:clamp(12px,1.6vw,20px);align-items:center;margin-top:clamp(48px,6vw,80px);padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--trait)}
.ba-day-t{display:grid;gap:14px;justify-items:start;max-width:44ch}
.ba-day-t p{font-size:16.5px;line-height:1.6;color:var(--fusain-2)}
.ba-day figure{position:relative;margin:0;border-radius:18px;overflow:hidden;background:var(--neige)}
.ba-day figure img{width:100%;height:auto}

/* ---------- L'équipe ---------- */
.eqx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,100px);align-items:center}
.eqx-photos{position:relative;padding:0 clamp(40px,6vw,90px) clamp(60px,6vw,90px) 0}
.eqx-photos figure{margin:0}
.eqx-main img{width:100%;aspect-ratio:3/3.6;object-fit:cover;border-radius:20px;box-shadow:0 40px 70px -48px rgba(30,33,48,.8)}
.eqx-detail{position:absolute;right:0;bottom:0;width:44%;display:grid;gap:8px}
.eqx-detail img{width:100%;aspect-ratio:3/3.4;object-fit:cover;border-radius:16px;border:6px solid #fff;box-shadow:0 24px 40px -24px rgba(30,33,48,.7)}
.eqx-detail figcaption{font-size:13.5px;line-height:1.45;color:var(--fusain-2)}
/* L'équipe sans photos (demande d'Osman) : le texte seul, en ligne lisible */
/* Équipe sans photos : le texte à gauche, les engagements dans un encadré à droite (la largeur est remplie) */
.eqx--texte{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.eqx--texte .qui-text{max-width:60ch}
.eqx-ticks{gap:16px;padding:clamp(24px,3vw,40px);border:1px solid var(--trait);border-radius:20px;background:#FBF3EA}
/* Avant / après : le titre à gauche, les deux photos à droite */
.bax-grid{align-items:center}
.bax-grid .sec-head{margin-bottom:0}
@media (min-width:861px){ .bax-grid{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)} .bax-grid .ba-pp{max-width:none} }
/* Avant / après : la maison en parpaing, puis l'enduit fini, côte à côte */
.ba-pp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.6vw,20px);max-width:860px}
.ba-pp figure{position:relative;margin:0;border-radius:clamp(12px,1.6vw,18px);overflow:hidden;background:var(--neige)}
.ba-pp img{display:block;width:100%;height:auto}

/* ---------- Réactif ---------- */
@media (max-width:1100px){
  .h3ro-grid{grid-template-columns:minmax(0,1fr) minmax(0,.95fr)}
  .conf{width:100%}
  .conf-k{width:100%}
}
@media (max-width:860px){
  .h3ro{padding-top:20px}
  .h3ro-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .h3ro-copy{display:contents}
  .h3ro h1{order:1;font-size:clamp(38px,10.4vw,56px);max-width:none}
  .stamp{order:2;justify-self:start;margin:16px 0 18px}
  /* Téléphone : le métier, les garanties, puis le bouton vert, tout dans le premier écran ; l'aperçu en bonus juste avant la maison */
  .h3ro .lead{order:2;margin:14px 0 14px;font-size:17px}
  .h3ro .oks{order:3;margin:0 0 18px}
  .h3ro-cta{order:4;margin:0 0 16px}
  .h3ro-cta .btn--line{display:none}
  .h3ro .stamp--bonus{order:5;margin:0 0 16px;font-size:15px}
  .conf{order:6;justify-self:stretch;width:100%}
  .h3ro-cta .wa-big{width:100%;justify-content:center}
  .h3ro-cta .btn{width:100%;min-height:56px}
  .conf-img,.conf-layer{object-position:50% 22%}
  .conf-panel{position:static;padding:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;gap:10px}
  .conf-stage{overflow:visible;border-radius:0;background:none;box-shadow:none;aspect-ratio:auto;display:grid;gap:14px}
  .conf-view{position:relative;aspect-ratio:4/4.5;border-radius:18px;overflow:hidden;background:#CFDBEA}
  .conf-row{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:6px}
  .conf-k{grid-column:1/-1;width:auto}
  .conf-chip{top:54px;min-width:0}
  .apx-grid,.eqx{grid-template-columns:minmax(0,1fr)}
  .bax-grid .sec-head{margin-bottom:28px}
  .phone{width:min(340px,100%)}
  .clips{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(220px,68%);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;margin-right:calc(var(--pad) * -1);padding-right:var(--pad)}
  .clips li{scroll-snap-align:start}
  .clips li:nth-child(n){margin-top:0}
  .ba{grid-template-columns:minmax(0,1fr)}
  .ba-day{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ba-day-t{grid-column:1/-1}
  .clips--sm{grid-auto-columns:minmax(170px,46%)}
  .eqx-photos{padding:0 56px 70px 0}
}
@media (prefers-reduced-motion:reduce){
  .stamp{animation:none}
  .swash{background-size:100% .26em}
}

/* ======================= Motion design (V3) ======================= */
/* Titre du héros : chaque mot monte depuis sa ligne */
.wr{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.wr>span{display:inline-block;animation:monte .9s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0) * 70ms + 80ms)}
@keyframes monte{from{transform:translateY(108%)}to{transform:none}}
/* Titres de section : la ligne monte une fois, à l'arrivée */
.rise{clip-path:inset(0 0 100% 0);transform:translateY(.45em);transition:clip-path .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.rise.in{clip-path:inset(-.2em -.2em -.3em -.2em);transform:none}

/* Héros : la maison qui se refait */
.conf-cv{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.conf-cue{position:absolute;z-index:3;right:14px;top:14px;display:inline-flex;white-space:nowrap;align-items:center;gap:9px;padding:7px 12px 7px 10px;border-radius:9px;background:var(--fusain);color:#fff;font-size:13.5px;font-weight:700;box-shadow:0 8px 18px -10px rgba(30,33,48,.8);transition:opacity .4s,transform .4s var(--ease)}
.conf-cue i{position:relative;width:12px;height:16px;border:2px solid #fff;border-radius:7px}
.conf-cue i::after{content:"";position:absolute;left:50%;top:3px;width:2px;height:4px;margin-left:-1px;border-radius:1px;background:#fff;animation:molette 1.4s ease-in-out infinite}
@keyframes molette{0%{transform:none;opacity:1}70%{transform:translateY(5px);opacity:0}100%{transform:none;opacity:0}}
.conf-cue.off{opacity:0;transform:translateY(-6px);pointer-events:none}

/* Les quatre gestes en grand écran (ordinateur, avec GSAP) */
.gx-on .clips{display:none}
.gx{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:center;height:calc(100vh - 66px);padding:24px 0}
.gx-words{list-style:none;margin:0;padding:0;display:grid;gap:4px;justify-items:end;text-align:right}
.gx-words li{position:relative;font:800 clamp(40px,4.6vw,78px)/1.02 "Bricolage Grotesque",sans-serif;letter-spacing:-.035em;color:rgba(30,33,48,.5);transition:color .35s var(--ease),transform .5s var(--ease)}
.gx-words li.on{color:var(--fusain);transform:translateX(-10px)}
.gx-words li::after{content:"";position:absolute;right:0;bottom:-.02em;width:100%;height:.14em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M3 11C48 4 120 2 197 8' fill='none' stroke='%23E2622B' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 100% 100%/0% 100%;transition:background-size .55s var(--ease) .1s}
.gx-words li.on::after{background-size:100% 100%}
.gx-stage{position:relative;height:calc(100vh - 66px - 64px);max-height:860px;aspect-ratio:9/16;border-radius:24px;overflow:hidden;background:#23262F;box-shadow:0 50px 80px -50px rgba(30,33,48,.9)}
.gx-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.gx-stage video.on{opacity:1}
.gx-stage .tag-ch{z-index:2}
.gx-side{display:grid;gap:22px;justify-items:start;align-content:center;max-width:340px}
.gx-cap{font-size:clamp(17px,1.35vw,21px);line-height:1.5;color:var(--fusain-2);min-height:3em}
.gx-bar{width:100%;max-width:260px;height:4px;border-radius:2px;background:var(--neige);overflow:hidden}
.gx-bar i{display:block;height:100%;background:var(--orange);transform-origin:left;transform:scaleX(var(--p,.25));transition:transform .5s var(--ease)}

/* Le même mur, le matin et le soir : le soleil traverse, l'heure tourne */
.ba-day.is-live{grid-template-columns:minmax(0,1fr) minmax(0,360px)}
.ba-day.is-live figure:last-of-type{display:none}
.day-cv{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.ba-day figure .ba-tag{transition:background .3s}
.day-clock{display:grid;gap:6px;width:min(320px,100%);justify-self:stretch;margin-top:6px}
.day-clock svg{width:100%;height:auto;overflow:visible}
.day-arc{fill:none;stroke:var(--trait-2);stroke-width:2;stroke-dasharray:2 7;stroke-linecap:round}
.day-run{fill:none;stroke:var(--orange);stroke-width:3;stroke-linecap:round}
.day-sun{fill:var(--orange);stroke:#fff;stroke-width:4}
.ba-day-t .day-time{font:800 clamp(44px,4.4vw,64px)/1 "Bricolage Grotesque",sans-serif;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--fusain)}

@media (max-width:860px){
  .ba-day.is-live{grid-template-columns:minmax(0,1fr)}
  .ba-day.is-live figure:first-of-type{max-width:420px}
  .day-clock{max-width:240px}
}
@media (max-width:860px){
  .conf-cue{top:auto;right:auto;left:50%;bottom:12px;transform:translateX(-50%)}
  .conf-cue.off{transform:translate(-50%,6px)}
}

/* BINARVA V3 : modèle commun des pages intérieures. Simple et visuel : un titre court, une phrase, le bouton,
   une vraie vidéo ou photo, puis le travail en images, un avant / après réel, le prix, trois questions, le contact.
   Plus de dessins ni de textures dessinées : uniquement les photos et vidéos d'Osman. */

/* ---------- Héros de page ---------- */
.ph3{padding:clamp(18px,2.4vw,36px) 0 clamp(56px,6vw,96px)}
.ph3-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:clamp(32px,5vw,88px);align-items:center}
.ph3-copy{display:grid;justify-items:start;align-content:center}
.ph3 .crumbs{margin-bottom:18px}
.ph3 h1{font-size:clamp(40px,4.7vw,72px);line-height:1;letter-spacing:-.035em;max-width:14ch}
.ph3 .lead{margin:20px 0 28px;max-width:44ch}
.ph3-cta{display:flex;flex-wrap:wrap;gap:12px 14px;align-items:center}
.ph3-cta .btn{min-height:68px;padding:0 24px;border-radius:14px;font-size:16.5px}
.ph3 .oks{margin-top:22px}
.ph3-media{position:relative;margin:0;aspect-ratio:4/5;max-height:calc(100svh - 150px);justify-self:end;width:100%;border-radius:22px;overflow:hidden;background:var(--neige);box-shadow:0 44px 70px -46px rgba(30,33,48,.75)}
.ph3-media>video,.ph3-media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph3-media .tag-ch{z-index:2}

/* ---------- Le travail en images : une image, un mot, une ligne ---------- */
.steps3{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);align-items:start}
.steps3--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.steps3 li{display:grid;gap:12px;align-content:start;min-width:0}
.steps3 li:nth-child(even){margin-top:36px}
.steps3 .m{position:relative;aspect-ratio:3/4;border-radius:18px;overflow:hidden;background:#23262F;box-shadow:0 30px 50px -40px rgba(30,33,48,.8)}
.steps3 .m>video,.steps3 .m>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.steps3 b{display:block;font:800 clamp(20px,1.7vw,24px)/1.1 "Bricolage Grotesque",sans-serif;letter-spacing:-.015em;color:var(--fusain)}
.steps3 p{font-size:15.5px;line-height:1.5;color:var(--fusain-2)}
.note3{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:clamp(24px,3vw,36px) 0 0;font-size:16px;color:var(--fusain-2);max-width:72ch}
.note3 b{color:var(--fusain)}

/* ---------- Avant / après : deux photos de même format ---------- */
.ba--eq{grid-template-columns:repeat(2,minmax(0,1fr));max-width:780px}

/* ---------- Vous choisissez avant les travaux (aperçus) ---------- */
.choix{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,80px);align-items:center}
.choix-t{display:grid;gap:20px;justify-items:start}
.choix-t .h2{max-width:14ch}
.choix-imgs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.choix-imgs li{display:grid;gap:10px}
.choix-imgs li:nth-child(2){margin-top:32px}
.choix-imgs .m{position:relative;aspect-ratio:3/4;border-radius:16px;overflow:hidden;background:var(--neige)}
.choix-imgs img{width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.choix-imgs .conf-pin{left:10px;top:10px;font-size:12px;padding:5px 9px 5px 8px}
.choix-imgs b{font-size:15.5px}

/* ---------- Le prix : une fourchette claire et l'estimation ---------- */
.prix{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.prix-t{display:grid;gap:18px;justify-items:start}
.prix-v{font:800 clamp(44px,5vw,76px)/1 "Bricolage Grotesque",sans-serif;letter-spacing:-.035em;color:var(--fusain)}
.prix-v small{display:block;margin-top:10px;font:650 16px/1.4 Figtree,sans-serif;letter-spacing:0;color:var(--fusain-2)}
.prix .bcard{max-width:none}

/* ---------- Bande « Envoyez une photo » ---------- */
.cta3{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;align-items:center;padding:clamp(28px,4vw,48px);border-radius:24px;background:#fff;border:1px solid var(--trait);overflow:hidden}
.cta3::before{content:"";position:absolute;right:-120px;top:-160px;width:520px;height:420px;background:radial-gradient(closest-side,rgba(242,174,132,.35),rgba(242,174,132,0));pointer-events:none}
.cta3>*{position:relative}
.cta3 .h3{font-size:clamp(26px,2.4vw,36px);max-width:22ch}
.cta3 p:not(.h3){margin-top:8px;color:var(--fusain-2);max-width:52ch}

/* ---------- Le calcul des pertes, plus simple ---------- */
.calc3{display:grid;gap:18px;padding:clamp(22px,3vw,34px);border-radius:22px;background:#fff;border:1px solid var(--trait);box-shadow:0 30px 60px -48px rgba(30,33,48,.6)}
.calc3 .field input{max-width:240px;font-size:20px;font-weight:700}
.calc3 .big{font:800 clamp(36px,3.6vw,52px)/1.05 "Bricolage Grotesque",sans-serif;letter-spacing:-.03em;color:var(--orange)}

/* ---------- Questions : trois, pas plus ---------- */
.faq3{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(32px,6vw,96px);align-items:start}
.faq3 .qa summary{font-size:19px}

/* ---------- Les décorations du nuancier V2 disparaissent (plus de bandes ni de carrés dessinés) ---------- */
.lame::before,.bcard::before,.calc::before{display:none}
.signs li::before,.ville-hub b::before{display:none}
.signs li{grid-template-columns:minmax(0,1fr)}
.lame{border-radius:18px}

/* ---------- Réactif ---------- */
@media (max-width:1100px){
  .steps3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps3 li:nth-child(even){margin-top:0}
}
@media (max-width:860px){
  .ph3-grid,.choix,.prix,.faq3,.cta3{grid-template-columns:minmax(0,1fr)}
  .ph3-grid{gap:0}
  .ph3-copy{display:contents}
  .ph3 .crumbs{order:0}
  .ph3 h1{order:1;font-size:clamp(36px,9.6vw,52px)}
  .ph3 .lead{order:2;margin:16px 0 22px}
  /* Le bouton vert avant la photo : dans le premier écran du téléphone */
  .ph3-cta{order:3;margin:0 0 6px}
  .ph3 .oks{margin-bottom:22px}
  .ph3-media{order:5;aspect-ratio:4/4.3;max-height:none;justify-self:stretch}
  .ph3 .oks{order:4}
  .ph3-cta .wa-big,.ph3-cta .btn{width:100%;justify-content:center}
  .steps3{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(200px,64%);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;margin-right:calc(var(--pad) * -1);padding-right:var(--pad)}
  .steps3 li{scroll-snap-align:start}
  .choix-imgs li:nth-child(2){margin-top:0}
  .cta3 .wa-big{width:100%;justify-content:center}
  /* Barre du bas : tient sur les petits téléphones (360 px et moins) */
  .mbar{grid-template-columns:44px 44px minmax(0,1.1fr) minmax(0,1fr);gap:6px}
  .mbar [data-menu-open],.mbar a[href^="tel:"]{padding:0}
  .mbar .wa,.mbar .go{padding:0 6px;font-size:clamp(13px,3.8vw,14.5px)}
  /* Pages de pub : pas de menu, le visiteur reste sur l'offre */
  body.lp .mbar{grid-template-columns:44px minmax(0,1.2fr) minmax(0,1fr)}
  body.lp .mbar [data-menu-open]{display:none}
}

/* ---------- La matière à la lumière rasante (WebGL, matiere.js) ---------- */
.mat{position:relative;margin:0;aspect-ratio:1;border-radius:18px;overflow:hidden;background:#d9d3cc;cursor:crosshair;box-shadow:0 30px 50px -40px rgba(22,38,62,.8)}
.mat img{width:100%;height:100%;object-fit:cover}
.mat-cv{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.mats li:nth-child(even){margin-top:36px}

/* ---------- Le final de chaque page : on commence quand ? (WhatsApp d'abord, le rappel ensuite) ---------- */
.contact3-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,88px);align-items:center}
.contact3-media{position:relative;margin:0;aspect-ratio:4/5;max-height:calc(100svh - 140px);border-radius:24px;overflow:hidden;background:#d9b39c;box-shadow:0 44px 70px -46px rgba(22,38,62,.8)}
.contact3-media video,.contact3-media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.contact3-box{display:grid;gap:20px;justify-items:start}
.contact3-box .h2{max-width:14ch}
.contact3-or{font-size:17px;color:var(--fusain-2)}
.contact3-or a{font:800 22px/1 "Bricolage Grotesque",sans-serif;color:var(--fusain);text-decoration:none;white-space:nowrap}
.rappel{display:grid;gap:14px;width:100%;max-width:620px;padding:clamp(18px,2.4vw,26px);border-radius:20px;background:#fff;box-shadow:0 26px 50px -40px rgba(22,38,62,.7)}
.rappel-t{font:750 20px/1.2 "Bricolage Grotesque",sans-serif;color:var(--fusain)}
.rappel-f{display:grid;grid-template-columns:1fr 1fr 130px;gap:10px}
.rappel .btn{justify-self:start;min-height:52px}
.rappel .consent{margin:0}
.rappel .done{gap:8px}
.rappel.sent:not(.demo) .done--wa,.rappel.sent.demo .done:not(.done--wa){display:none}
.rappel .done--wa .wa-big{justify-self:start;margin-top:4px}
.rappel .done p:not(.h3){color:var(--fusain-2)}
.contact3-mail{font-size:15px;color:var(--fusain-2)}
.contact3-mail a{font-weight:650;color:var(--fusain)}
@media (max-width:860px){
  .contact3-grid{grid-template-columns:minmax(0,1fr)}
  .contact3-media{order:2;aspect-ratio:4/4.4;max-height:none}
  .contact3-box .wa-big{width:100%;justify-content:center}
  .rappel-f{grid-template-columns:1fr}
  .rappel .btn{width:100%}
}

/* Parties basses des pages : le navigateur ne les calcule qu’à l’approche de l’écran (téléphone moins figé au chargement) */
.cv{content-visibility:auto;contain-intrinsic-size:auto 1000px}
/* Formulaire de rappel : la case à corriger est signalée, le message juste dessous */
.rappel [aria-invalid="true"]{border-color:#9B2D17;box-shadow:0 0 0 3px rgba(155,45,23,.14)}
.rappel .field .err{margin-top:6px}
.contact3-oks{gap:6px 16px;font-size:14.5px}
/* Téléphone : moins de vide entre les parties (la page est plus courte, on garde le fil) */
@media (max-width:600px){:root{--sec:52px}.sec-head{margin-bottom:28px}}
/* Pied de page : liens assez hauts pour le doigt (WCAG 2.2, 24 px minimum) */
@media (max-width:860px){.foot ul{gap:2px}.foot ul a,.foot-villes a{display:inline-block;padding:9px 0}}
/* Bouton pause / lecture des vidéos (discret, en bas à droite) */
.vid-pp{position:absolute;right:10px;bottom:10px;z-index:3;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:10px;background:rgba(22,38,62,.58);color:#fff;cursor:pointer}
.vid-pp svg{width:18px;height:18px;fill:currentColor}
.vid-pp:hover{background:rgba(22,38,62,.78)}
.vid-pp:focus-visible{outline:3px solid #fff;outline-offset:2px}
/* Conversation d'exemple sans heures : moins de marge sous les messages reçus */
.msg.them:not(.pic){padding-bottom:8px}
.msg.them.pic{padding-bottom:10px}

/* ---------- « Composez votre façade » (24/10/2026) ----------
   La photo du pavillon modèle reste visible pendant qu'on choisit (collée en haut, aussi sur téléphone).
   Les calques sont empilés sur la photo ; la teinte est peinte en JS (canvas) : lumière de l'enduit × couleur. */
.cpz-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.cpz-side{position:sticky;top:96px;display:grid;gap:12px;justify-items:center}
.cpz-stage{position:relative;width:100%;max-width:calc((100vh - 170px) * 1116 / 1500);aspect-ratio:1116/1500;border-radius:18px;overflow:hidden;background:var(--fond-3);isolation:isolate;box-shadow:0 34px 60px -40px rgba(22,38,62,.75)}
.cpz-stage img{display:block}
.cpz-base{width:100%;height:100%;object-fit:cover}
.cpz-l{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s var(--ease);pointer-events:none}
.cpz-l.on{opacity:1}
.cpz-orig .cpz-l{opacity:0 !important}
.cpz-stage.is-loading::after{content:"";position:absolute;right:14px;top:14px;width:22px;height:22px;border-radius:50%;border:3px solid rgba(255,255,255,.6);border-top-color:var(--nuit);animation:cpz-spin .8s linear infinite;z-index:4}
@keyframes cpz-spin{to{transform:rotate(1turn)}}
.cpz-tools{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.cpz-tool{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--trait-2);background:var(--carte);color:var(--nuit);font:700 14.5px/1 Figtree,sans-serif;cursor:pointer}
.cpz-tool svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cpz-tool[aria-pressed="true"]{background:var(--nuit);border-color:var(--nuit);color:#fff}
.cpz-panel{display:grid;gap:22px;min-width:0}
.cpz-g{border:0;margin:0;padding:0;display:grid;gap:10px;min-width:0}
.cpz-g legend{padding:0;margin-bottom:10px;font:800 clamp(17px,1.4vw,19px)/1.2 "Bricolage Grotesque",sans-serif;color:var(--fusain)}
.cpz-g.is-off{opacity:.45}
.cpz-opts{display:flex;flex-wrap:wrap;gap:8px}
.cpz-opts label{position:relative;cursor:pointer}
.cpz-opts input{position:absolute;opacity:0;width:1px;height:1px}
.cpz-opts span{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 15px;border-radius:999px;border:1.5px solid var(--trait-2);background:var(--carte);color:var(--fusain);font:650 15px/1.1 Figtree,sans-serif;transition:background .2s,color .2s,border-color .2s}
.cpz-opts input:checked + span{background:var(--nuit);border-color:var(--nuit);color:#fff}
.cpz-opts input:focus-visible + span{outline:3px solid var(--braise);outline-offset:2px}
.cpz-ico{width:18px;height:18px;border-radius:50%;background:var(--c,#ddd);box-shadow:inset 0 0 0 1px rgba(22,38,62,.18);flex:none}
.cpz-ico--brique{background:repeating-linear-gradient(0deg,#b0532f 0 5px,#e8d8c8 5px 6px)}
.cpz-ico--sable{background:repeating-linear-gradient(0deg,#d8b98c 0 5px,#f3ead8 5px 6px)}
.cpz-ico--pierre{background:linear-gradient(135deg,#e7dcc3,#cdbb95)}
.cpz-teinte{display:grid;gap:8px}
.cpz-teinte[hidden]{display:none}
.cpz-k{margin:0;font-size:15px;color:var(--fusain-2)}
.cpz-k b{color:var(--fusain)}
.cpz-fam{border-top:1px solid var(--trait)}
.cpz-fam summary{cursor:pointer;padding:11px 2px;font:700 15px/1.2 Figtree,sans-serif;color:var(--fusain);list-style-position:inside}
.cpz-fam summary small{font-weight:600;color:var(--fusain-3);margin-left:4px}
.cpz-sw{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:9px;padding:2px 2px 14px}
.cpz-t{aspect-ratio:1;width:100%;border-radius:50%;border:0;background:var(--c);box-shadow:inset 0 0 0 1.5px rgba(22,38,62,.16);cursor:pointer;transition:transform .15s var(--ease)}
.cpz-t:hover{transform:scale(1.08)}
.cpz-t[aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px rgba(22,38,62,.16),0 0 0 3px var(--fond),0 0 0 5.5px var(--nuit)}
.cpz-t:focus-visible{outline:3px solid var(--braise);outline-offset:3px}
.cpz-note{margin:0;font-size:14.5px;line-height:1.5;color:var(--fusain-2)}
.cpz-note--small{font-size:13px;color:var(--fusain-3)}
.cpz-reset{background:none;border:0;padding:0;color:var(--nuit);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
.cpz-sum{border-radius:16px;background:var(--carte);padding:16px 18px;box-shadow:0 0 0 1px var(--carte-trait)}
.cpz-sum ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.cpz-sum li{display:flex;justify-content:space-between;gap:16px;font-size:15px;color:var(--fusain-2)}
.cpz-sum li b{color:var(--fusain);text-align:right}
.cpz-wa{justify-self:start}
/* Plein écran */
.cpz-dlg{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#0f1622;color:#fff;overflow:hidden}
.cpz-dlg::backdrop{background:rgba(10,14,22,.9)}
.cpz-zv{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;touch-action:none;cursor:grab}
.cpz-stage--z{flex:none;border-radius:6px;transform-origin:center;box-shadow:none}
.cpz-zbar{position:absolute;right:16px;top:16px;display:flex;gap:8px;z-index:5}
.cpz-zbar button{min-width:48px;min-height:48px;padding:0 16px;border-radius:999px;border:0;background:rgba(255,248,243,.95);color:var(--nuit);font:800 18px/1 Figtree,sans-serif;cursor:pointer}
.cpz-zhint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);margin:0;padding:8px 14px;border-radius:999px;background:rgba(15,22,34,.7);font-size:13px;white-space:nowrap;pointer-events:none}
@media (max-width:860px){
  .cpz-grid{grid-template-columns:minmax(0,1fr);gap:18px}
  /* La photo reste en haut pendant qu'on choisit : fond plein, boutons posés sur la photo pour qu'elle prenne moins de place */
  .cpz-side{top:0;z-index:6;padding:8px 0 10px;margin:0 calc(var(--pad) * -1);background:var(--fond);box-shadow:0 16px 18px -18px rgba(22,38,62,.45)}
  .cpz-stage{max-width:min(72vw,calc(40vh * 1116 / 1500));border-radius:14px}
  .cpz-tools{position:absolute;left:0;right:0;bottom:20px;z-index:7;gap:8px;pointer-events:none}
  .cpz-tool{pointer-events:auto;min-height:38px;padding:0 12px;font-size:13px;background:rgba(255,248,243,.93);border-color:rgba(22,38,62,.2);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .cpz-wa{justify-self:stretch}
  .cpz-zhint{white-space:normal;width:max-content;max-width:90vw;text-align:center}
}
@media (prefers-reduced-motion:reduce){.cpz-l,.cpz-tint,.cpz-t{transition:none}}
/* Héros : un seul bouton vers le configurateur (les réglages du héros étaient trop compliqués, Osman 24/10/2026) */
.conf figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:14px}
.conf-go{flex:none}
/* Avant / aperçu du pavillon jaune */
.ba-jaune{width:100%;max-width:540px;margin:0 auto}
.ba-jaune > img{display:block;width:100%;height:auto;border-radius:var(--r)}

/* BINARVA V3 « Aube » : une seule famille de couleurs, celle du logo (18/10/2026).
   Osman : « BINARVA c'est plutôt orange » puis « il faut bien harmoniser les couleurs, voir du blanc puis cette couleur, ça perturbe ».
   Règles :
   - tout est dans la même lumière d'aube : page pêche très claire, sections un ton plus soutenu, ciel du logo en haut et en bas ;
   - jamais de coupure franche : les sections se fondent en dégradé, le ciel du héros finit exactement dans la couleur de la page ;
   - pas de blanc pur en grand : les cartes sont en blanc chaud ;
   - un seul orange profond pour les mots qui comptent, le bleu nuit de la montagne pour le texte et les boutons, le vert WhatsApp un peu posé ;
   - les photos et vidéos de chantier reçoivent un léger étalonnage chaud (jamais les aperçus, où la couleur compte).
   Chargé en dernier. */
:root{
  --fond:#FBEEE6; --fond-2:#F7DFD0; --fond-3:#F2CDB8;
  --carte:#FFF8F3; --carte-trait:rgba(22,38,62,.07);
  --ciel-1:#C9806A; --ciel-2:#E2A083; --ciel-3:#F1C3A9;
  --nuit:#16263E; --nuit-2:#2A3650;
  --fusain:#16263E; --fusain-2:#3F4559; --fusain-3:#525769;
  --trait:rgba(22,38,62,.12); --trait-2:rgba(22,38,62,.26); --champ:#D9C3B6;
  --braise:#A2441F;
  --wa:#167A4A; --wa-2:#11663D;
  --neige:#F3E2D7; --brume:#F7E8DE;
  --aube:linear-gradient(180deg,var(--ciel-1) 0%,var(--ciel-2) 30%,var(--ciel-3) 62%,var(--fond) 100%);
  --vers-2:linear-gradient(180deg,var(--fond) 0,var(--fond-2) 140px,var(--fond-2) calc(100% - 140px),var(--fond) 100%);
}
body{background:var(--fond)}
::selection{background:var(--nuit);color:#fff}
.o{color:var(--braise)}
.sec + .sec{border-top:0}

/* En-tête : dans la couleur de ce qu'il y a dessous */
.hdr{background:var(--ciel-1);border-bottom:0}
.lp-hdr{background:var(--ciel-1);border-bottom:0}
.topbar{background:rgba(251,238,230,.94);border-bottom:1px solid var(--trait)}
.menu-panel{background:var(--carte)}

/* Boutons : bleu nuit (devis) et vert WhatsApp, rien d'autre */
.hdr-cta,.cta,.btn--terre,.btn,.btn--ink{background:var(--nuit);border-color:var(--nuit);color:#fff}
.hdr-cta:hover,.cta:hover,.btn--terre:hover,.btn:hover,.btn--ink:hover{background:var(--nuit-2);border-color:var(--nuit-2)}
.btn--line{background:transparent;color:var(--nuit);border-color:var(--nuit)}
.btn--line:hover{background:var(--nuit);color:#fff}
.btn--white{background:var(--carte);border-color:var(--carte);color:var(--nuit)}
.mbar{background:rgba(255,248,243,.97)}
.mbar a,.mbar button{background:var(--carte)}
.mbar .go{background:var(--nuit);border-color:var(--nuit)}
.mbar .wa{background:var(--wa);border-color:var(--wa)}
.wa-big{box-shadow:0 14px 26px -18px rgba(22,38,62,.7)}
@keyframes onde{0%{box-shadow:0 0 0 0 rgba(22,122,74,.3)}60%,100%{box-shadow:0 0 0 14px rgba(22,122,74,0)}}
.link{text-decoration-color:var(--braise)}
.link:hover{color:var(--braise)}

/* Cartes, formulaires, encadrés : blanc chaud, jamais blanc pur */
.card,.bcard,.calc,.calc3,.callout,.cta3,.guide,.toc,.proof,.dlg,.rappel,.article,.consent-bar{background:var(--carte);border-color:var(--carte-trait)}
.field input,.field select,.field textarea{background:#fff;border-color:var(--champ)}
.cta3{border:0;box-shadow:0 30px 60px -54px rgba(22,38,62,.7)}
.cta3::before{display:none}
.conf-panel{background:rgba(255,248,243,.9)}
.conf-pin,.conf-chip,.tag-ch,.msg-tag{background:rgba(255,248,243,.95)}
.tag-ch--line{background:var(--carte)}
.flow svg{background:var(--carte);color:var(--braise)}
.qa,.qa details{border-color:var(--trait)}

/* Héros : le ciel du logo, qui se termine pile dans la couleur de la page */
.h3ro,.ph3,.phero{background:var(--aube)}
.h3ro h1,.ph3 h1{color:var(--nuit)}
.h3ro .lead,.ph3 .lead,.ph3 .crumbs,.conf figcaption{color:var(--nuit-2)}
.ph3 .crumbs a{color:var(--nuit)}

/* Sections qui alternent : un ton plus soutenu, fondu en haut et en bas (aucune ligne de coupure) */
.apx,#details,#avant-apres,#equipe,#matiere,#prix,#cout,#video,.contact3{background:var(--vers-2)}
.sec--paper,.sec--stone{background:transparent}

/* Accents orange profond, plus de blanc pur dans les tracés */
.swash{color:var(--braise);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M3 11C48 4 120 2 197 8' fill='none' stroke='%23A2441F' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E")}
.gx-words li{color:rgba(22,38,62,.5)}
.gx-words li.on{color:var(--nuit)}
.gx-words li::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M3 11C48 4 120 2 197 8' fill='none' stroke='%23A2441F' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E")}
.gx-bar{background:var(--fond-3)}
.gx-bar i{background:var(--braise)}
.day-arc{stroke:rgba(22,38,62,.28)}
.day-run{stroke:var(--braise)}
.day-sun{fill:var(--carte);stroke:var(--braise);stroke-width:3}
.conf-pin i,.msg-tag::before{background:var(--braise)}
.phone{border-color:var(--nuit)}

/* Les photos et vidéos de chantier, dans la même lumière chaude (jamais les aperçus de façade) */
.steps3 .m>img,.steps3 .m>video,.clip video,.gx-stage video,.ph3-media>img,.ph3-media>video,.contact3-media>img,.contact3-media>video,
.ba img,.ba-day img,.ba-pp img,.eqx-photos img,.real2 img,.others img,.pc-img img,.pf-media img,.sp-img img,.chantier-stage img,.mat img{filter:sepia(.1) saturate(1.06) brightness(1.01)}
.choix-imgs img,.conf-img,.conf-layer,.msg.pic img,.ph3-media>img[src*="/apercu/"]{filter:none}
.ph3-media,.steps3 .m,.clip,.contact3-media,.ba figure,.mat,.gx-stage{background:var(--fond-3)}

/* Pied de page : la page remonte dans le ciel du logo, la carte de fin dans l'aube */
.foot{background:linear-gradient(180deg,var(--fond) 0%,var(--ciel-3) 22%,var(--ciel-2) 52%,var(--ciel-1) 100%);border-top:0;color:var(--nuit)}
.foot::before{display:none}
.endcard-t{color:var(--nuit)}
.endcard-n,.foot-brand p,.foot-bottom{color:var(--nuit)}
.foot a{color:var(--nuit)}
.foot-top,.foot-villes,.foot-bottom{border-top-color:rgba(22,38,62,.16)}
.lb-ring circle{stroke:var(--braise);opacity:.5}

/* Guides : le texte long sur une grande carte chaude */
.article{border-radius:24px;padding:clamp(22px,4vw,56px)}
.toc{background:var(--fond-2)}

/* Lisibilité sur le ciel du haut de page (contraste AA) : mot clé du titre en terre cuite profonde, chemin et sur-titre en bleu nuit */
.h3ro h1 .o,.ph3 h1 .o,.phero h1 .o{color:#783217}
.ph3 .crumbs,.phero .crumbs,.phero .crumbs a,.phero .kind,.ph3 .kind{color:var(--nuit)}

/* BINARVA V2 « Nuancier » : composants propres à l'accueil (simulateur, éventail, chantier au défilement,
   réalisations, équipe, engagements, avis). Chargé uniquement par la page d'accueil. */

/* ---------- Héros : simulateur ---------- */
.hero2{padding:clamp(28px,3.5vw,52px) 0 clamp(64px,7vw,104px)}
.hero2-grid{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:clamp(36px,5vw,80px);align-items:start}
.hero2 h1{font-size:clamp(40px,4.3vw,64px);line-height:1}
.hero2 h1 span{display:block}
.hero2 h1 .nw{display:inline;white-space:nowrap}
.hero2 .lead{margin:22px 0 28px}
.simh{display:grid;gap:16px;max-width:560px}
.simh-photo{position:relative;display:flex;align-items:center;gap:16px;min-height:76px;padding:12px 18px;border:2px dashed var(--fusain);border-radius:var(--r);background:#fff;cursor:pointer;transition:background .2s}
.simh-photo:hover,.simh-photo:focus-within{border-style:solid;background:var(--brume)}
.simh-photo:focus-within{outline:2.5px solid var(--terre);outline-offset:3px}
.simh-photo input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.simh-photo svg{width:30px;height:30px;color:var(--terre);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.simh-photo b{display:block;font-size:17.5px;line-height:1.25}
.simh-photo small{display:block;font-size:14px;color:var(--fusain-2)}
.simh-row{display:grid;grid-template-columns:88px minmax(0,1fr);gap:14px;align-items:center}
.simh-k{font-size:14.5px;font-weight:700}
.seg{display:flex;flex-wrap:wrap}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.seg span{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 16px;border:1.5px solid var(--champ);margin-left:-1.5px;background:#fff;font-size:15px;font-weight:650}
.seg label:first-child span{margin-left:0;border-radius:var(--r) 0 0 var(--r)}
.seg label:last-child span{border-radius:0 var(--r) var(--r) 0}
.seg label:hover span{border-color:var(--fusain);position:relative;z-index:1}
.seg input:checked+span{background:var(--fusain);border-color:var(--fusain);color:#fff;position:relative;z-index:2}
.seg input:focus-visible+span{outline:2.5px solid var(--terre);outline-offset:2px;z-index:3}
.simh-teinte{font-size:15px;color:var(--fusain-2)}
.simh-teinte b{color:var(--fusain)}
.simh-consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--fusain-2)}
.simh-consent input{width:20px;height:20px;margin-top:1px;accent-color:var(--terre)}
.simh-go{display:grid;gap:10px}
.simh-go .cta{width:100%;min-height:60px;font-size:17px}
.simh-status{font-size:14px;line-height:1.5;color:var(--fusain-2);min-height:3em}
.hero2 .mini-trust{margin-top:18px}

.hero2-visual{position:relative;margin:0;padding:0 0 0 clamp(16px,2vw,40px)}
.stage{position:relative;aspect-ratio:820/900}
.stage:has(.userpic){aspect-ratio:auto}
.stage .cmp{border-radius:var(--r);box-shadow:0 2px 0 rgba(30,33,48,.06),0 34px 60px -40px rgba(30,33,48,.6)}
.stage.is-busy{opacity:.6;transition:opacity .3s}
.userpic{position:relative;border-radius:var(--r);overflow:hidden;background:#23262F}
.userpic img{width:100%;max-height:78vh;object-fit:contain}
.hero2-visual figcaption{margin:16px 0 0 clamp(150px,13vw,190px);font-size:14.5px;line-height:1.5;color:var(--fusain-2);min-height:3em}

/* L'éventail : lames tenues par un rivet, la teinte choisie se lève */
.fan{position:absolute;left:-10px;bottom:24px;width:230px;height:250px;z-index:5;pointer-events:none}
.blade{position:absolute;left:84px;bottom:0;width:56px;height:216px;padding:12px 0 0;border:0;border-radius:var(--r) var(--r) 4px 4px;background:var(--c) var(--grain);box-shadow:0 1px 0 rgba(0,0,0,.18),0 10px 18px -12px rgba(0,0,0,.55);transform-origin:28px 192px;transform:rotate(var(--a));transition:transform .35s var(--ease);cursor:pointer;pointer-events:auto}
.blade span{display:block;writing-mode:vertical-rl;transform:rotate(180deg);margin:0 auto;font:700 12.5px/1 Figtree,sans-serif;color:var(--fusain);white-space:nowrap}
.blade::after{content:"";position:absolute;left:22px;bottom:18px;width:12px;height:12px;border-radius:50%;background:var(--fusain);box-shadow:inset 0 1px 1px rgba(255,255,255,.35)}
.blade:hover{transform:rotate(var(--a)) translateY(-8px)}
.blade[aria-checked="true"]{z-index:3;transform:rotate(var(--a)) translateY(-30px);box-shadow:0 1px 0 rgba(0,0,0,.18),0 18px 26px -14px rgba(0,0,0,.6)}
.blade:focus-visible{outline:3px solid var(--terre);outline-offset:2px}
.fan.still .blade{transition:none}

/* ---------- Un chantier, étape par étape ---------- */
.chantier-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,5vw,80px);align-items:center}
.chantier-text{display:grid;gap:22px;align-content:center}
.chantier-steps{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px}
.chantier-steps li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:2px 16px;align-items:start;padding:12px 0}
.chantier-steps li::before{content:"";grid-row:span 2;width:22px;height:22px;margin-top:1px;border-radius:4px;background:var(--c) var(--grain);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.chantier-steps li b{font:750 21px/1.15 "Bricolage Grotesque",sans-serif;letter-spacing:-.01em}
.chantier-steps li span{font-size:15px;color:var(--fusain-2)}
.chantier-steps li:not(.on) b{color:var(--fusain-3)}
.chantier-steps li:not(.on) span{color:var(--fusain-3)}
.chantier-steps li:not(.on)::before{opacity:.4}
[data-chantier].is-static .chantier-steps li b{color:var(--fusain)}
[data-chantier].is-static .chantier-steps li::before{opacity:1}
.chantier-stage{position:relative;height:min(calc(100vh - 150px),720px);min-height:420px;border-radius:var(--r);overflow:hidden;background:#23262F;box-shadow:0 34px 60px -40px rgba(30,33,48,.6)}
.ch-l{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ch-edge{position:absolute;top:0;bottom:0;left:0;width:14px;margin-left:-7px;background:linear-gradient(90deg,#5d6368 0,#c9ced2 30%,#f4f6f7 48%,#a9b0b5 70%,#585e63 100%);box-shadow:-18px 0 22px -8px rgba(255,255,255,.55),2px 0 3px rgba(0,0,0,.35);opacity:0;pointer-events:none}
.ch-tag{position:absolute;left:14px;top:14px;padding:7px 12px;border-radius:4px;background:#fff;color:var(--fusain);font-size:14px;font-weight:700}
[data-chantier].is-static .chantier-steps li{opacity:1}
[data-chantier].is-static .chantier-stage{height:auto;min-height:0;aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px;background:none;box-shadow:none;overflow:visible}
[data-chantier].is-static .ch-l{position:static;aspect-ratio:4/4.2;border-radius:var(--r)}
[data-chantier].is-static .ch-edge,[data-chantier].is-static .ch-tag{display:none}

/* ---------- Réalisations ---------- */
.real2{display:grid;grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,1fr));gap:18px;align-items:start}
.real2 a{text-decoration:none;color:inherit;display:grid;align-content:start}
.real2-main{padding:0 0 22px!important;overflow:hidden}
.real2-side{gap:12px}
.real2-side:nth-child(3){margin-top:56px}
.real2-side:nth-child(4){margin-top:24px}
.real2-side img{border-radius:var(--r);transition:transform .4s var(--ease)}
.real2-side:hover img{transform:translateY(-4px)}
.real2-side .real2-t{padding:0}
.real2-main::before{z-index:2}
.real2-main{grid-column:auto}
.real2-ba{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.real2-ba img{width:100%;aspect-ratio:3/4.2;object-fit:cover}
.real2-side img{width:100%;aspect-ratio:3/4;object-fit:cover}
.real2-side:nth-child(3) img{aspect-ratio:3/3.6}
.real2-t{display:grid;gap:6px;padding:18px 20px 0}
.real2-t b{font:750 20px/1.15 "Bricolage Grotesque",sans-serif;letter-spacing:-.01em}
.real2-main .real2-t b{font-size:clamp(24px,2.2vw,32px)}
.real2-t span{font-size:15px;color:var(--fusain-2)}
.real2-t .more{color:var(--fusain);font-weight:700;text-decoration:underline;text-decoration-color:var(--terre);text-decoration-thickness:2px;text-underline-offset:5px}

/* ---------- Qui vient chez vous ---------- */
.qui{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5vw,80px);align-items:center}
.qui-photos{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.qui-slot{margin:0;display:grid;place-items:center;aspect-ratio:3/4;padding:24px;text-align:center;border:2px dashed var(--fusain-3);border-radius:var(--r);background:var(--brume)}
.qui-slot:nth-child(2){margin-top:48px}
.qui-slot figcaption{display:grid;gap:6px;font-size:14.5px;color:var(--fusain-2)}
.qui-slot figcaption b{font:750 19px/1.15 "Bricolage Grotesque",sans-serif;color:var(--fusain)}
.qui-slot.has-photo{padding:0;border:0;background:none;display:block;overflow:hidden}
.qui-slot.has-photo img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r)}
.qui-text{display:grid;gap:18px}
.qui-text .lead{margin:0}
.qui-text .ticks{margin-top:8px}

/* ---------- Engagements et avis ---------- */
.engs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
.engs li:nth-child(2){margin-top:28px}
.engs li:nth-child(3){margin-top:56px}
.engs h3{font-size:22px}
.eng-v{margin:12px 0 10px;font:800 clamp(26px,2.4vw,34px)/1.05 "Bricolage Grotesque",sans-serif;letter-spacing:-.02em;color:var(--terre)}
.engs p:not(.eng-v){font-size:15.5px;color:var(--fusain-2)}
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:18px}
.review{margin:0;display:grid;gap:16px}
.review blockquote{margin:0;font-size:17px;line-height:1.6}
.review figcaption{display:grid;gap:2px;font-size:14.5px;color:var(--fusain-2)}
.review figcaption b{color:var(--fusain)}

/* ---------- Réactif (accueil) ---------- */
@media (max-width:1100px){
  .real2{grid-template-columns:repeat(3,minmax(0,1fr))}
  .real2-main{grid-column:1/-1}
  .real2-main .real2-ba img{aspect-ratio:4/3.4}
}
@media (max-width:860px){
  .hero2-grid,.chantier-grid,.qui{grid-template-columns:minmax(0,1fr)}
  .hero2-visual{order:-1;padding:0}
  .stage{aspect-ratio:800/620}

  .hero2-visual figcaption{margin:12px 0 0;font-size:13.5px;min-height:0}
  .fan{position:relative;left:auto;bottom:auto;width:100%;height:190px;margin:4px 0 0;transform:none}
  .blade{left:calc(50% - 22px);width:44px;height:168px;padding-top:9px;transform-origin:22px 150px}
  .blade span{font-size:11px}
  .blade::after{left:17px;bottom:13px;width:10px;height:10px}
  .blade[aria-checked="true"]{transform:rotate(var(--a)) translateY(-18px)}
  .hero2{padding-top:16px}
  .simh-row{grid-template-columns:minmax(0,1fr);gap:8px}
  .seg span{padding:0 13px;font-size:14.5px}
  .engs{grid-template-columns:minmax(0,1fr)}
  .engs li:nth-child(n){margin-top:0}
}
@media (max-width:560px){
  .real2{grid-template-columns:1fr 1fr;gap:12px}
  .real2-side:last-child{display:none}
  .real2-t{padding:14px 14px 0}
  .real2-t b{font-size:17px}
}
@media (max-width:860px){.chantier-stage{height:auto;aspect-ratio:4/4.6;min-height:0}}

@media (max-width:860px){
  .real2-side:nth-child(n){margin-top:0}
  .qui-slot:nth-child(2){margin-top:28px}
  /* Tant que les photos de l'équipe manquent, le texte passe devant ; une vraie photo reprend la tête */
  .qui-photos{order:2}
  .qui-photos:has(.has-photo){order:0}
}