/* Moreau Électricité (démo) : "le site est le schéma électrique de la maison". Source de design : design/DESIGN.md */

/* Polices auto-hébergées (OFL, licences dans assets/fonts/) */
@font-face{font-family:"Big Shoulders Display";font-weight:900;font-display:swap;src:url(assets/fonts/big-shoulders-display-latin-900.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:400;font-display:swap;src:url(assets/fonts/barlow-latin-400.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:500;font-display:swap;src:url(assets/fonts/barlow-latin-500.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:600;font-display:swap;src:url(assets/fonts/barlow-latin-600.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:700;font-display:swap;src:url(assets/fonts/barlow-latin-700.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:800;font-display:swap;src:url(assets/fonts/barlow-latin-800.woff2) format("woff2")}

:root{
  --ink:#101214; --ink-2:#3D454B; --paper:#EEF1EC; --paper-2:#E2E7E2; --cell:#F7F9F6; --grid:#D3DCD6;
  --current:#FFCF1A; --red:#B01E17; --mute:#A9B2B8; --pale:#FFF6CC;
  --f-disp:"Big Shoulders Display",Impact,sans-serif; --f-txt:"Barlow",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --side:max(16px,calc((100vw - 1240px) / 2));       /* marge extérieure */
  --bx:10px;                                         /* x du jeu de barres */
  --cx:34px;                                         /* le contenu commence à droite de la barre */
}
@media (min-width:900px){:root{--bx:max(28px,calc((100vw - 1240px) / 2 - 24px));--cx:calc(var(--bx) + 72px)}}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font:400 1.0625rem/1.6 var(--f-txt);font-variant-numeric:tabular-nums;background-color:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1.5px;text-underline-offset:3px}
p{margin:0 0 12px}
ul,ol{margin:0;padding:0}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;left:12px;top:12px;width:auto;height:auto;clip:auto;z-index:60;padding:12px 16px;background:var(--current);color:var(--ink);font-weight:700;outline-color:var(--ink)}

/* Typographie : titres, libellés courts et boutons en capitales ; texte de lecture jamais */
h1,h2,h3{font-family:var(--f-disp);font-weight:900;text-transform:uppercase;line-height:1.05;margin:0}
h1{font-size:clamp(3.25rem,16vw,8.75rem)}
h2{font-size:clamp(2.5rem,10.5vw,5rem)}
h3{font-size:1.75rem;line-height:1.1}
.note{font:600 .875rem/1.35 var(--f-txt);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2)}
.lead{font-size:1.1875rem;line-height:1.5;max-width:44ch}
.demo-note{font:500 .875rem/1.45 var(--f-txt);color:var(--ink-2)}
.txt-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700}
.txt-link::after{content:"→"}

/* ---------- Signature : la feuille et son jeu de barres ---------- */
.sheet{position:relative}
.bus{position:absolute;top:0;bottom:0;left:var(--bx);width:5px;margin-left:-1px;background:var(--ink);z-index:2;pointer-events:none}
.bus::after{content:"";position:absolute;left:1px;right:1px;top:0;height:calc(var(--p,1) * 100%);background:var(--current);transition:height .15s linear}
.bus .meter{position:absolute;top:14px;left:1.5px;transform:translateX(-50%);width:20px;height:20px;border:2px solid var(--ink);border-radius:50%;background:var(--current);z-index:1}
.bus .meter span{display:none}
@media (min-width:900px){.bus .meter{width:46px;height:46px;top:20px;display:grid;place-items:center;font:700 .875rem/1 var(--f-txt);background:var(--cell)}.bus .meter span{display:inline}}
.circuit{position:relative;padding:56px var(--side) 56px var(--cx)}
@media (min-width:900px){.circuit{padding-top:104px;padding-bottom:104px}}
/* un départ : dérivation depuis la barre jusqu'à l'étiquette, avec point de jonction */
.q{position:relative;display:flex;align-items:center;gap:10px;margin:0 0 18px;font:700 .875rem/1.2 var(--f-txt);letter-spacing:.08em;text-transform:uppercase}
.q::before{content:"";position:absolute;top:50%;right:calc(100% + 6px);width:calc(var(--cx) - var(--bx) - 6px);height:5px;margin-top:-2.5px;background:var(--current);border-block:1px solid var(--ink);transition:background .5s var(--ease)}
.q::after{content:"";position:absolute;top:50%;left:calc(var(--bx) - var(--cx) - 3.5px);width:11px;height:11px;margin-top:-5.5px;border-radius:50%;background:var(--ink)}
.q b{flex:none;display:inline-grid;place-items:center;min-width:44px;height:30px;padding:0 8px;border:2px solid var(--ink);background:var(--current);transition:background .5s}
.alt{background:var(--paper-2)}
.head{margin-bottom:36px;max-width:900px}
.head > p:not(.q){margin-top:16px;max-width:60ch}

/* Boutons : encre par défaut, mis sous tension (jaune) au survol */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border:2px solid var(--ink);border-radius:0;font:700 1.0625rem/1.1 var(--f-txt);text-transform:uppercase;letter-spacing:.04em;text-decoration:none;text-align:center;white-space:nowrap;cursor:pointer;transition:background .15s,color .15s}
.btn svg{width:20px;height:20px;flex:none}
.btn-call{background:var(--ink);color:var(--paper)}
.btn-call:hover{background:var(--current);color:var(--ink)}
.btn-line{background:var(--cell);color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.btn-sm{min-height:44px;padding:0 16px;font-size:.9375rem}
.btn-row{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:599px){.btn{white-space:normal;padding-block:8px}}

/* Barre démo + en-tête */
.demobar{background:var(--ink);color:var(--mute);font:500 .875rem/1.35 var(--f-txt)}
.demobar .in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:4px var(--side)}
.demobar p{margin:0}
.demobar strong{color:var(--current)}
.demobar :focus-visible{outline-color:var(--current)}
.motion-btn{flex:none;min-height:44px;padding:0 12px;background:transparent;color:var(--paper);border:1px solid #59626A;font:600 .875rem var(--f-txt);cursor:pointer}
.motion-btn:hover{border-color:var(--current)}
.motion-btn[aria-pressed="false"]{color:var(--mute)}
.long{display:none}
@media (min-width:640px){.long{display:inline}.short{display:none}}
.hdr{position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:2px solid var(--ink)}
.hdr .in{display:flex;align-items:center;gap:12px;min-height:64px;padding:0 var(--side)}
.logo{display:flex;align-items:center;gap:10px;min-height:44px;margin-right:auto;text-decoration:none}
.logo svg{width:36px;height:36px;flex:none}
.logo b{display:block;font:900 1.75rem/.9 var(--f-disp);text-transform:uppercase}
.logo small{display:block;font:600 .875rem/1.2 var(--f-txt);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.nav{display:none}
.nav a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;text-decoration:none;font:700 .9375rem var(--f-txt);text-transform:uppercase;letter-spacing:.05em}
.nav a span{font-weight:500;color:var(--ink-2)}
.nav a:hover,.nav a[aria-current="page"]{background:var(--current)}
.menu-btn{min-height:44px;min-width:44px;padding:0 12px;border:2px solid var(--ink);background:var(--cell);color:var(--ink);font:700 .9375rem var(--f-txt);text-transform:uppercase;cursor:pointer}
.menu-btn[aria-expanded="true"]{background:var(--current)}
.menu{display:none;border-top:1px solid var(--ink)}
.menu.open{display:block}
.menu a{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 var(--side);border-bottom:1px solid var(--grid);background:var(--paper);font:700 1.125rem var(--f-txt);text-transform:uppercase;text-decoration:none}
.menu a span{font-weight:500;color:var(--ink-2)}
.menu a[aria-current="page"]{background:var(--current)}
.hdr-call .num{display:none}
@media (min-width:1000px){.nav{display:flex}.menu-btn,.menu{display:none!important}.hdr-call .num{display:inline}}

/* ---------- Héros : un folio avec cartouche, pas « titre + 2 boutons + photo » ---------- */
.hero{padding-top:24px;padding-bottom:48px}
.hero-grid{display:grid;gap:28px}
.hero h1{position:relative;z-index:3;order:1;line-height:1.05}
.hero h1 .l{display:block}
.hero h1 em{font-style:normal}
.kicker{display:block;width:max-content;max-width:100%;margin-bottom:14px;padding:4px 10px;background:var(--current);border:2px solid var(--ink);font:700 1rem/1.2 var(--f-txt);letter-spacing:.08em}
.proof{order:1;margin:0;font-weight:600;line-height:1.4}
.proof b{font-weight:800}
.proof .stars{color:var(--ink);font-size:1.125rem}
.hero .shot{order:2}
.hero .lead{order:3;margin:0}
.hero .brief{order:4}
.dim{position:relative;display:inline-block;padding-bottom:32px}
.dim::after{content:attr(data-cote);position:absolute;left:0;right:0;top:calc(100% - 30px);height:10px;border:1.5px solid var(--red);border-bottom:0;padding-top:6px;font:600 .875rem/1 var(--f-txt);letter-spacing:.06em;color:var(--red);text-align:center;text-transform:uppercase;white-space:nowrap}
/* photo avec repères de coupe et repères numérotés */
.shot{position:relative;margin:0;padding:12px}
.shot::before{content:"";position:absolute;inset:0;pointer-events:none;--k:linear-gradient(var(--ink),var(--ink));
  background:var(--k) 0 0/22px 2px no-repeat,var(--k) 0 0/2px 22px no-repeat,var(--k) 100% 0/22px 2px no-repeat,var(--k) 100% 0/2px 22px no-repeat,
  var(--k) 0 100%/22px 2px no-repeat,var(--k) 0 100%/2px 22px no-repeat,var(--k) 100% 100%/22px 2px no-repeat,var(--k) 100% 100%/2px 22px no-repeat}
.shot .frame{position:relative;background:var(--ink);overflow:hidden}
.shot .frame img{width:100%;aspect-ratio:3/2;object-fit:cover}
.pin{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border:2px solid var(--red);border-radius:50%;background:var(--cell);color:var(--red);display:grid;place-items:center;font:700 .9375rem/1 var(--f-txt)}
@media (max-width:519px){.pin{width:28px;height:28px;margin:-14px 0 0 -14px;font-size:.875rem}}
.shot figcaption{margin-top:12px}
.legend-pins{list-style:none;display:grid;gap:6px}
.legend-pins li{display:grid;grid-template-columns:30px 1fr;gap:8px;align-items:center;font-weight:600;line-height:1.3}
.legend-pins li span{display:grid;place-items:center;width:26px;height:26px;border:2px solid var(--red);border-radius:50%;color:var(--red);font:700 .875rem/1 var(--f-txt)}
/* cartouche = preuves + appel */
.cartouche{display:grid;grid-template-columns:1fr 1fr;border:2px solid var(--ink);background:var(--cell);margin:0;position:relative;z-index:3}
.cartouche > div{padding:10px 12px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);min-width:0}
.cartouche > div:nth-last-child(-n+2){border-bottom:0}
.cartouche > div:nth-child(2n){border-right:0}
.cartouche dt{font:600 .875rem/1.2 var(--f-txt);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.cartouche dd{margin:4px 0 0;font-weight:700;line-height:1.25}
.stars{letter-spacing:.06em}
.nw{white-space:nowrap}
.cart-cta{display:grid;border:2px solid var(--ink);border-top:0;position:relative;z-index:3}
.cart-cta .btn{width:100%;border:0;min-height:60px}
.cart-cta .btn + .btn{border-top:1px solid var(--ink)}
.brief .demo-note{margin:10px 0 0}
@media (min-width:900px){
  .hero{padding-top:36px;padding-bottom:96px}
  .hero-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:40px}
  .hero h1{grid-column:1/-1;grid-row:1}
  .hero h1 .l2{margin-left:8.33%}
  .hero .lead{grid-column:1/6;grid-row:2;align-self:start;padding-top:12px}
  .hero .brief{grid-column:1/6;grid-row:3;align-self:start}
  .hero .shot{grid-column:6/13;grid-row:2/4}
  .proof{display:none}
  .cartouche{grid-template-columns:1fr 1fr 1fr}
  .cartouche > div:nth-child(2n){border-right:1px solid var(--ink)}
  .cartouche > div:nth-child(3n){border-right:0}
  .cartouche > div:nth-last-child(-n+3){border-bottom:0}
  .cart-cta{grid-template-columns:1.3fr 1fr}
  .cart-cta .btn + .btn{border-top:0;border-left:1px solid var(--ink)}
}
/* grand écran : le cartouche remonte à côté des lignes courtes du titre */
@media (min-width:1280px){
  .hero .brief{grid-column:8/13;grid-row:1;align-self:end}
  .hero .lead{grid-column:1/5}
  .hero .shot{grid-column:5/13;grid-row:2}
}

/* ---------- Peurs : un relevé réglé, deux colonnes sur bureau ---------- */
.fears{list-style:none;display:grid;border-top:3px solid var(--ink)}
.fears li{padding:22px 0 18px;border-bottom:1px solid var(--ink)}
.fears h3{font-size:clamp(1.625rem,6vw,2rem);margin-bottom:10px}
.fears p{max-width:52ch;margin:0}
@media (min-width:900px){.fears{grid-template-columns:1fr 1fr;column-gap:56px}.fears li{padding:28px 0 22px}}

/* ---------- Services : un vrai schéma. Choisir un départ ferme son disjoncteur et allume sa lampe (onglets WAI-ARIA) ---------- */
.schema-wrap{display:grid;gap:28px}
.schema{position:relative;display:grid}
.schema::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ink)}
.feeder{position:relative;display:grid;grid-template-columns:118px 1fr;align-items:center;gap:6px;width:100%;min-height:64px;padding:0 8px 0 0;background:transparent;border:0;text-align:left;color:var(--ink);font:inherit;text-decoration:none;cursor:pointer}
.feeder .symw{position:relative;width:118px;height:48px}
.feeder svg{position:absolute;width:48px;height:118px;left:35px;top:-35px;transform:rotate(-90deg);overflow:visible}
.feeder svg .w{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:square}
.feeder svg .blade{transform-origin:24px 66px;transform:rotate(-34deg)}
.feeder svg .lamp{fill:var(--cell);stroke:var(--ink);stroke-width:3}
.feeder .txt{display:grid;line-height:1.15}
.feeder .code{font:600 .875rem var(--f-txt);letter-spacing:.08em;color:var(--ink-2)}
.feeder .name{justify-self:start;padding:2px 4px;margin-left:-4px;font:900 1.625rem/1.1 var(--f-disp);text-transform:uppercase}
.feeder .from{font:700 .9375rem/1.3 var(--f-txt)}
.feeder:hover .name{text-decoration:underline;text-decoration-thickness:2px}
.feeder[aria-selected="true"] .blade,.feeder.is-cur .blade{transform:none}
.feeder[aria-selected="true"] .lamp,.feeder.is-cur .lamp{fill:var(--current)}
.feeder[aria-selected="true"] .name,.feeder.is-cur .name{background:var(--current)}
.feeder[aria-selected="true"] .code,.feeder.is-cur .code{color:var(--ink)}
/* sommaire de la page Services : sans JS, tous les départs sont sous tension */
html:not(.js) .schema-nav .feeder .blade{transform:none}
html:not(.js) .schema-nav .feeder .lamp{fill:var(--current)}
.spec{border:2px solid var(--ink);background:var(--cell)}
.spec[hidden]{display:none}
.spec-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px;margin:0;padding:10px 14px;background:var(--ink);color:var(--paper);font:700 .875rem/1.3 var(--f-txt);letter-spacing:.08em;text-transform:uppercase}
.spec-head span:last-child{color:var(--current)}
.spec h3{padding:18px 16px 8px;font-size:2.25rem}
.spec > p:not(.spec-head){margin:0;padding:0 16px 16px}
.spec dl{margin:0;border-top:1px solid var(--ink)}
.spec dl div{display:grid;grid-template-columns:104px 1fr;border-bottom:1px solid var(--ink)}
.spec dt{padding:10px 12px;border-right:1px solid var(--ink);font:600 .875rem/1.4 var(--f-txt);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.spec dd{margin:0;padding:10px 14px;font-weight:600}
.spec dd.price{font:900 2.25rem/1 var(--f-disp)}
.spec dd.price small{display:block;font:500 .9375rem/1.4 var(--f-txt);color:var(--ink-2);margin-top:6px;text-transform:none}
.spec .btn-row{padding:14px 16px 16px}
.schema-foot{margin-top:18px}
.schema-foot .demo-note{margin:0 0 4px}
@media (min-width:900px){
  .schema-wrap{grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:56px;align-items:start}
  .schema{grid-template-columns:repeat(5,minmax(0,1fr))}
  .schema::before{right:0;bottom:auto;width:auto;height:3px}
  .feeder{grid-template-columns:1fr;justify-items:center;text-align:center;gap:10px;padding:0 4px 10px}
  .feeder .symw{width:48px;height:118px}
  .feeder svg{left:0;top:0;transform:none}
  .feeder .txt{justify-items:center}
  .feeder .name{justify-self:center;margin-left:0;font-size:1.375rem}
  .feeder .from{font-size:.875rem}
}
/* page Services : le schéma sert de sommaire, sur toute la largeur */
.schema-nav{margin-top:28px;max-width:760px}

/* ---------- Urgence = signalétique de chantier ---------- */
.urgent{background:var(--current);border-block:8px solid var(--ink)}
.urg-title{display:flex;align-items:center;gap:16px}
.urg-title svg{width:clamp(56px,14vw,96px);height:auto;flex:none}
.urgent .q b{background:var(--ink);color:var(--current)}
.urgent .q::before{background:var(--ink)}
.urg-grid{display:grid;gap:28px}
.urgent h2{font-size:clamp(2.5rem,10vw,4.5rem)}
.proc{list-style:none;margin:22px 0 26px;border-top:2px solid var(--ink);counter-reset:s}
.proc li{display:grid;grid-template-columns:56px 1fr;gap:14px;padding:14px 0;border-bottom:2px solid var(--ink)}
.proc li::before{counter-increment:s;content:counter(s);font:900 3.25rem/.8 var(--f-disp)}
.proc b{display:block;font-size:1.1875rem;font-weight:800;line-height:1.3}
.proc p{margin:0}
.urg-photo{margin:0;border:3px solid var(--ink);background:var(--ink)}
.urg-photo img{width:100%;aspect-ratio:3/2;object-fit:cover}
.urg-photo figcaption{padding:8px 12px;color:var(--current);font:600 .9375rem var(--f-txt)}
.urg-small{margin-top:16px;max-width:58ch}
.urg-small p{font-size:.9375rem;margin:0 0 6px}
.btn-big{min-height:60px;font-size:1.1875rem;white-space:normal}
@media (min-width:900px){.urg-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center}}

/* ---------- Avant / après : indice A → indice B, un vrai bouton interrupteur ---------- */
.ba{position:relative;margin:0}
.ba .frame{position:relative;background:var(--ink)}
.ba .frame img{width:100%;aspect-ratio:4/3;object-fit:cover}
.ba .frame .after{position:absolute;inset:0;height:100%;opacity:0}
.ba.is-after .after{opacity:1}
.ba .rev{position:absolute;top:12px;left:12px;padding:6px 10px;background:var(--cell);border:2px solid var(--ink);font:700 .875rem var(--f-txt);letter-spacing:.06em;text-transform:uppercase}
.ba .rev .a{display:none}.ba.is-after .rev .a{display:inline}.ba.is-after .rev .b{display:none}
.ba.is-after .rev{background:var(--current)}
.switch{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;margin-top:10px;padding:6px 14px 6px 8px;background:var(--cell);border:2px solid var(--ink);font:700 .9375rem var(--f-txt);text-transform:uppercase;letter-spacing:.05em;color:var(--ink);cursor:pointer;text-align:left}
.switch svg{width:64px;height:40px;flex:none;overflow:visible}
.switch svg .w{fill:none;stroke:var(--ink);stroke-width:3}
.switch svg .dot{fill:var(--ink)}
.switch .blade{transform-origin:20px 26px;transform:rotate(-30deg)}
.switch[aria-pressed="true"] .blade{transform:none}
.switch .st{display:flex;gap:6px 12px;flex-wrap:wrap}
.switch .st i{font-style:normal}
.switch[aria-pressed="false"] .on,.switch[aria-pressed="true"] .off{color:var(--ink-2);font-weight:500;text-decoration:line-through}
.switch:hover{background:var(--current)}
.single{margin:0;border:2px solid var(--ink);background:var(--ink)}
.single img{width:100%;aspect-ratio:4/3;object-fit:cover}
.single figcaption{padding:10px 12px;background:var(--cell);border-top:2px solid var(--ink);font:600 .9375rem/1.4 var(--f-txt)}
/* fiche chantier : Lieu · Durée · Budget */
.meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:16px 0;border:2px solid var(--ink);background:var(--cell)}
.meta div{padding:8px 10px;border-right:1px solid var(--ink);min-width:0}
.meta div:last-child{border-right:0}
.meta dt{font:600 .875rem var(--f-txt);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.meta dd{margin:0;font-weight:700;line-height:1.3}
@media (max-width:479px){.meta{grid-template-columns:1fr 1fr}.meta div:first-child{grid-column:1/-1;border-right:0;border-bottom:1px solid var(--ink)}}
/* accueil : deux planches côte à côte */
.pair{display:grid;gap:48px}
.pair h3{font-size:clamp(1.75rem,6vw,2.25rem);margin-top:22px}
.pair .btn{margin-top:4px}
.more{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin-top:36px}
.more .demo-note{margin:0}
@media (min-width:900px){.pair{grid-template-columns:1fr 1fr;gap:56px}}

/* ---------- Avis = procès-verbal de réception : un registre réglé, pas des cartes ---------- */
.score{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;margin-top:16px;font-weight:700}
.pv{width:100%;border-collapse:collapse;border-top:3px solid var(--ink);background:var(--cell)}
.pv caption{text-align:left;padding:0 0 10px}
.pv th,.pv td{text-align:left;vertical-align:top;padding:14px 12px;border-bottom:1px solid var(--ink)}
.pv thead th{font:600 .875rem var(--f-txt);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);border-bottom:2px solid var(--ink)}
.pv td.ref{font:900 1.5rem/1 var(--f-disp)}
.pv td.who b{display:block}
.pv td.who span{color:var(--ink-2)}
.pv td.mark{white-space:nowrap;font-weight:700}
.pv td.mark span{display:inline-block;padding:2px 8px;background:var(--current);border:2px solid var(--ink)}
.pv td.txt{max-width:56ch}
@media (max-width:719px){
  .pv thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .pv tbody tr{display:grid;grid-template-columns:auto 1fr auto;gap:6px 12px;padding:14px 12px;border-bottom:1px solid var(--ink)}
  .pv td{padding:0;border:0}
  .pv td.txt{grid-column:1/-1;order:3}
  .pv td.job{grid-column:1/-1;order:2;color:var(--ink-2)}
}

/* ---------- Équipe : plaque signalétique (information, jamais un contrôle) ---------- */
.about{display:grid;gap:28px}
.about .shot .frame img{aspect-ratio:4/5}
.plate{position:relative;margin:22px 0 14px;padding:24px 22px 18px;background:linear-gradient(135deg,#DCE0E2,#C4CBCE);border:1px solid #8E979C;color:var(--ink)}
.plate::before,.plate::after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:#6F787D}
.plate::before{top:8px;left:8px}.plate::after{bottom:8px;right:8px}
.plate dl{margin:0;display:grid;gap:12px}
.plate dl div{display:grid;gap:4px;border-bottom:1px solid #8E979C;padding-bottom:10px}
.plate dl div:last-child{border-bottom:0;padding-bottom:0}
.plate dt{font:800 .9375rem/1.3 var(--f-txt);letter-spacing:.06em;text-transform:uppercase}
.plate dt span{display:block;font-weight:600;font-size:.875rem;letter-spacing:.06em;color:#2A3035}
.plate dd{margin:0;line-height:1.45}
.plate dd small{display:block;margin-top:2px;font-size:.9375rem;font-weight:600;color:#2A3035}
@media (min-width:640px){.plate dl div{grid-template-columns:170px 1fr;gap:16px}}
@media (min-width:900px){.about{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center}}

/* ---------- Étapes ---------- */
.steps{list-style:none;display:grid;border-top:3px solid var(--ink);counter-reset:s}
.steps li{display:grid;grid-template-columns:56px 1fr;align-content:start;gap:14px;padding:20px 0;border-bottom:1px solid var(--ink)}
.steps li::before{counter-increment:s;content:counter(s);font:900 3.5rem/.8 var(--f-disp)}
.steps h3{font-size:1.625rem;margin-bottom:8px}
.steps p{margin:0}
@media (min-width:900px){.steps{grid-template-columns:repeat(3,1fr);column-gap:40px}.steps li{grid-template-columns:1fr;border-bottom:0;padding-top:24px}}

/* ---------- Zone : légende de plan ---------- */
.zone{display:grid;gap:28px}
.zone .head{margin-bottom:0}
.legend{list-style:none;display:grid;grid-template-columns:1fr 1fr;column-gap:16px;align-content:start;border-top:2px solid var(--ink)}
.legend li{display:flex;gap:10px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--ink);font-weight:600;line-height:1.3}
.legend li span{font:500 .875rem var(--f-txt);color:var(--ink-2);min-width:32px}
.legend li.main{font-weight:800}.legend li.main span{color:var(--ink)}
@media (min-width:900px){.zone{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px}.legend{grid-template-columns:repeat(3,1fr);column-gap:24px}}

/* ---------- Questions : details/summary réglés ---------- */
.faq{border-top:3px solid var(--ink);max-width:900px}
.faq details{border-bottom:1px solid var(--ink)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;padding:12px 0;font:700 1.1875rem/1.35 var(--f-txt);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:28px;height:28px;border:2px solid var(--ink);background:
  linear-gradient(var(--ink),var(--ink)) center/14px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) center/2px 14px no-repeat,var(--cell)}
.faq details[open] summary::after{background:linear-gradient(var(--ink),var(--ink)) center/14px 2px no-repeat,var(--current)}
.faq summary:hover{text-decoration:underline;text-decoration-thickness:2px}
.faq details > div{padding:0 0 18px;max-width:68ch}
.faq details > div p{margin:0}
.faq-note{margin-top:16px}

/* ---------- Fin de ligne ---------- */
.end{background:var(--ink);color:var(--paper)}
.end .q b{background:var(--current);color:var(--ink);border-color:var(--current)}
.end .q::after{background:var(--current)}
.end p{color:var(--mute);max-width:52ch}
.end h2 + p{margin-top:16px}
.end h2{font-size:clamp(2.5rem,8vw,4.5rem);max-width:18ch}
.end .btn-call{background:var(--current);color:var(--ink);border-color:var(--current)}
.end .btn-call:hover{background:var(--paper)}
.end .btn-line{background:transparent;color:var(--paper);border-color:var(--paper)}
.end .btn-line:hover{background:var(--paper);color:var(--ink)}
.end :focus-visible{outline-color:var(--current)}
.end-grid{display:grid;gap:22px}
@media (min-width:900px){.end-grid{grid-template-columns:1fr auto;align-items:end}}

/* ---------- Pied = cartouche pleine largeur ---------- */
.ftr{background:var(--paper);border-top:3px solid var(--ink);padding:0 var(--side) 96px}
.ftr .tb{display:grid;border-left:2px solid var(--ink);border-right:2px solid var(--ink);background:var(--cell)}
.ftr .tb > div{padding:16px;border-bottom:1px solid var(--ink)}
.ftr h2{font-size:1.25rem;margin-bottom:8px}
.ftr p{margin:0 0 6px}
.ftr ul{list-style:none;display:grid;gap:2px}
.ftr ul a{display:inline-flex;align-items:center;min-height:44px}
.ftr .logo{margin-bottom:8px}
.ftr .legal{font-size:.875rem;color:var(--ink-2);margin:0}
@media (min-width:900px){.ftr{padding-bottom:0}.ftr .tb{grid-template-columns:1.6fr 1fr 1fr 1fr}.ftr .tb > div{border-right:1px solid var(--ink)}.ftr .tb > div:nth-child(4){border-right:0}.ftr .tb > div.legal-row{grid-column:1/-1;border-right:0}}

/* Barre d'appel mobile */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:1.3fr 1fr;gap:8px;padding:8px var(--side) calc(8px + env(safe-area-inset-bottom));background:var(--paper);border-top:2px solid var(--ink)}
@media (max-width:899px){html{scroll-padding-bottom:84px}}
@media (min-width:900px){.callbar{display:none}}

/* ---------- Pages intérieures : tête de folio ---------- */
.folio{padding-top:28px;padding-bottom:40px;border-bottom:3px solid var(--ink)}
.crumbs{font:500 .9375rem var(--f-txt);margin:0 0 10px}
.crumbs a{display:inline-flex;align-items:center;min-height:44px}
.folio h1{font-size:clamp(2.5rem,10vw,5.75rem);max-width:15ch;margin:10px 0 18px}
.folio .lead{max-width:56ch}
.folio .demo-note{margin-top:14px}
.folio h1{text-wrap:balance}
@media (min-width:900px){
  .folio h1{max-width:none;font-size:clamp(2.5rem,4.6vw,4.25rem)}
  .folio{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto auto 1fr;column-gap:56px;align-items:start}
  .folio > *{grid-column:1}
  .folio > .folio-card{grid-column:2;grid-row:1/span 3}
  .folio > .folio-card.tall{grid-row:1/span 4}
  .folio > .schema-nav,.folio > .subnav{grid-column:1/-1}
}
.folio-card{margin:8px 0 0}
@media (max-width:899px){.folio-card.desk{display:none}}
.folio-card dd a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.folio .btn-row{margin-top:20px}
.subnav{display:flex;flex-wrap:wrap;margin-top:24px;border:2px solid var(--ink);width:max-content;max-width:100%;background:var(--cell)}
.subnav a{flex:1 0 auto;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);margin-bottom:-1px;font:700 .875rem var(--f-txt);letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.subnav a:hover{background:var(--current)}
/* rappel de danger : pictogramme W012 + phrase, sur aplat jaune */
.danger{display:flex;gap:14px;align-items:center;max-width:640px;margin-top:22px;padding:12px 16px;background:var(--current);border:2px solid var(--ink);font-weight:700;line-height:1.4}
.danger svg{width:44px;height:auto;flex:none}
.danger p{margin:0}

/* Réalisations : une planche par chantier */
.project{display:grid;gap:22px}
.project + .project{border-top:3px solid var(--ink)}
.project > .q{margin:0}
.project h2{font-size:clamp(2.25rem,9vw,3.75rem)}
.project .btn-row{margin-top:8px}
.thumb{margin:6px 0 14px;display:flex;gap:12px;align-items:center}
.thumb img{width:132px;aspect-ratio:4/3;object-fit:cover;border:2px solid var(--ink)}
.thumb figcaption{font:600 .9375rem/1.35 var(--f-txt)}
@media (min-width:900px){.project{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center}.project.flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.project.flip > figure{order:2}.project > .q{grid-column:1/-1;margin-bottom:-24px}}

/* Services : un bloc par service */
.svc{display:grid;gap:28px}
.svc + .svc{border-top:3px solid var(--ink)}
.svc h2{font-size:clamp(2.25rem,9vw,4rem);margin-bottom:12px}
.svc .hook{font:700 1.1875rem/1.4 var(--f-txt);margin-bottom:14px}
.svc ul{list-style:none;margin:16px 0 22px;display:grid;gap:6px}
.svc ul li{position:relative;padding-left:26px}
.svc ul li::before{content:"";position:absolute;left:0;top:.5em;width:12px;height:12px;border:2px solid var(--ink);background:var(--current)}
.svc .spec{margin-bottom:18px}
.svc .spec dd.price{font-size:2rem}
.svc .side{display:grid;gap:18px;align-content:start}
.svc .side img{width:100%;aspect-ratio:4/3;object-fit:cover;border:2px solid var(--ink)}
.box{border:2px solid var(--ink);background:var(--cell)}
.box h3{padding:14px 16px 6px;font-size:1.5rem}
.box p{margin:0;padding:0 16px 16px}
.box.warn{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;background:var(--current)}
.box.warn svg{width:40px;height:auto;flex:none;margin-top:2px}
.box.warn p{padding:0;font-weight:600}
.svc .txt-link{margin-top:2px}
@media (min-width:900px){.svc{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:start}.svc .side{position:sticky;top:96px}}

/* Contact : le formulaire est un bon d'intervention en cases réglées */
.contact-grid{display:grid;gap:32px}
@media (min-width:900px){.contact-grid{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:48px;align-items:start}}
.order{border:3px solid var(--ink);background:var(--cell)}
.order-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;margin:0;padding:12px 16px;background:var(--ink);color:var(--paper);font:700 .875rem var(--f-txt);letter-spacing:.08em;text-transform:uppercase}
.order-top b{color:var(--current)}
.order h2{padding:18px 16px 6px;font-size:clamp(2rem,7vw,2.75rem)}
.order .intro{margin:0;padding:0 16px 14px;border-bottom:1px solid var(--ink)}
.order form{display:grid}
.cell{display:grid;gap:6px;padding:12px 16px 14px;border:0;border-bottom:1px solid var(--ink);margin:0;min-width:0}
.cell > label:not(.drop-zone),.cell legend,.cell .lbl{padding:0;font:700 .9375rem var(--f-txt);color:var(--ink)}
.cell legend{float:left;width:100%;margin-bottom:6px}
.req{color:var(--red)}
.help{font:500 .875rem/1.45 var(--f-txt);color:var(--ink-2);margin:0}
.cell input:not([type=radio]):not([type=file]):not([type=checkbox]),.cell textarea{width:100%;min-height:48px;padding:8px 0;border:0;border-bottom:2px solid var(--ink);border-radius:0;background:transparent;font:500 1.125rem var(--f-txt);color:var(--ink)}
.cell textarea{min-height:120px;resize:vertical}
.cell input:focus,.cell textarea:focus{outline:none;background:var(--pale);box-shadow:0 3px 0 var(--red)}
.cell textarea::placeholder{color:#5F686F}
.err{margin:0;font:700 .9375rem/1.4 var(--f-txt);color:var(--red)}
.err[hidden]{display:none}
.cell [aria-invalid="true"]{border-bottom-color:var(--red)!important;background:#FBEAE8!important}
.two{display:grid}
@media (min-width:640px){.two{grid-template-columns:1fr 1fr}.two .cell:first-child{border-right:1px solid var(--ink)}}
.chips{display:flex;flex-wrap:wrap;gap:8px;clear:both}
.chips label{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:2px solid var(--ink);background:var(--paper);font:700 .9375rem/1.2 var(--f-txt);color:var(--ink);cursor:pointer}
.chips input{position:absolute;inset:-2px;width:calc(100% + 4px);height:calc(100% + 4px);margin:0;opacity:0;cursor:pointer}
.chips label:hover{background:var(--pale)}
.chips label:has(input:checked){background:var(--current)}
.chips label:has(input:focus-visible){outline:3px solid var(--red);outline-offset:2px}
.chips.bad label{border-color:var(--red)}
.drop-zone{position:relative;display:grid;place-items:center;gap:4px;min-height:112px;padding:16px;border:2px dashed var(--ink);background:var(--paper);text-align:center;cursor:pointer}
.drop-zone input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.drop-zone:hover{background:var(--pale)}
.drop-zone:focus-within{outline:3px solid var(--red);outline-offset:2px}
.drop-zone b{font:900 1.375rem var(--f-disp);text-transform:uppercase}
.consent{display:flex;gap:12px;align-items:flex-start;min-height:44px;padding:4px 0;font-size:1rem;cursor:pointer}
.consent input{width:24px;height:24px;margin:2px 0 0;accent-color:var(--ink);flex:none;cursor:pointer}
.privacy{margin:0}
.privacy a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.order .send{display:grid;gap:12px;padding:16px}
.order .send .btn{width:100%}
.send-note{margin:0;font:600 .9375rem/1.4 var(--f-txt)}
/* messages : même famille que la nomenclature (en-tête encre, cadre plein), pas de bande latérale */
.form-msg,.err-sum{margin:16px 16px 0;border:2px solid var(--ink);background:var(--paper)}
.form-msg[hidden],.err-sum[hidden]{display:none}
.form-msg > p:not(.spec-head),.err-sum > p:not(.spec-head){margin:0;padding:12px 14px 4px;font-weight:600}
.form-msg > p:last-child{padding-bottom:14px}
.err-sum{border-color:var(--red)}
.err-sum .spec-head{background:var(--red)}
.err-sum .spec-head span:last-child{color:var(--paper)}
.err-sum ul{list-style:none;padding:4px 14px 14px;display:grid}
.err-sum a{display:inline-flex;align-items:center;min-height:44px;color:var(--red);font-weight:700}
.side-card{border:2px solid var(--ink);background:var(--cell);padding:18px}
.side-card + .side-card{margin-top:16px}
.side-card.ink{background:var(--ink);color:var(--paper)}
.side-card.ink .note{color:var(--current)}
.side-card.ink .demo-note{color:var(--mute)}
.side-card.ink .btn-call{background:var(--current);color:var(--ink);border-color:var(--current);width:100%}
.side-card.ink .btn-call:hover{background:var(--paper)}
.side-card.ink :focus-visible{outline-color:var(--current)}
.side-card h2{font-size:1.75rem;margin-bottom:10px}
.side-card dl{margin:14px 0 0;display:grid;gap:10px}
.side-card dt{font:600 .875rem var(--f-txt);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.side-card dd{margin:0}
.side-card dd a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.side-card .proc{margin:10px 0 0}
.side-card .proc li{grid-template-columns:40px 1fr}
.side-card .proc li::before{font-size:2.5rem}

/* Sans JS : on cache les contrôles qui ne feraient rien et on montre tout le détail */
html:not(.js) .motion-btn,html:not(.js) .switch{display:none}
html:not(.js) .spec[hidden]{display:block;margin-top:16px}

/* ---------- Mouvement ----------
   État par défaut = état final (sans JS, ou « Animations : désactivées »).
   data-fx="full" : mouvement complet. data-fx="soft" (le système demande moins de mouvement) : fondus et allumages, sans déplacement ni scintillement. */
html[data-fx="full"] .feeder svg .blade{transition:transform .35s cubic-bezier(.5,1.7,.4,1)}
html[data-fx="full"] .switch .blade{transition:transform .3s cubic-bezier(.5,1.7,.4,1)}
html[data-fx="soft"] .feeder svg .blade,html[data-fx="soft"] .switch .blade{transition:transform .2s ease-out}
html[data-fx]:not([data-fx="off"]) .feeder svg .lamp{transition:fill .3s}
html[data-fx]:not([data-fx="off"]) .feeder .name{transition:background .3s}
html[data-fx]:not([data-fx="off"]) .ba .frame .after{transition:opacity .45s var(--ease)}
/* le courant descend : départs éteints tant que le courant ne les a pas atteints (les deux modes) */
html[data-fx]:not([data-fx="off"]) .circuit:not(.is-on) .q::before{background:var(--ink)}
html[data-fx]:not([data-fx="off"]) .circuit:not(.is-on) .q b{background:var(--cell);color:var(--ink)}
html[data-fx]:not([data-fx="off"]) .end:not(.is-on) .q b{background:var(--ink);color:var(--paper);border-color:var(--paper)}
html[data-fx]:not([data-fx="off"]) .end:not(.is-on) .q::before{background:#3D454B}
html[data-fx]:not([data-fx="off"]) .urgent:not(.is-on) .q b{background:var(--current);color:var(--ink)}
/* apparitions */
html[data-fx]:not([data-fx="off"]) .rv{transition:opacity .7s var(--ease),transform .7s var(--ease)}
html[data-fx]:not([data-fx="off"]) .rv:not(.is-in){opacity:0}
html[data-fx="full"] .rv:not(.is-in){transform:translateY(24px)}
html[data-fx]:not([data-fx="off"]) .rv.d1{transition-delay:.12s}
html[data-fx]:not([data-fx="off"]) .rv.d2{transition-delay:.24s}
/* héros complet : les lignes du titre se tracent, la cote s'ouvre, la photo s'allume en scintillant, les repères apparaissent */
html[data-fx="full"] .hero h1 .l{animation:draw .8s var(--ease) both}
html[data-fx="full"] .hero h1 .l2{animation-delay:.14s}
html[data-fx="full"] .hero h1 .l3{animation-delay:.28s}
html[data-fx="full"] .dim::after{animation:cote .6s 1s var(--ease) both}
html[data-fx="full"] .hero .frame img{animation:lightOn 1.6s .6s both}
html[data-fx="full"] .pin{animation:pop .4s var(--ease) both}
html[data-fx="full"] .pin.p1{animation-delay:1.8s}
html[data-fx="full"] .pin.p2{animation-delay:1.95s}
html[data-fx="full"] .pin.p3{animation-delay:2.1s}
html[data-fx="full"] .hero .brief{animation:rise .7s 1.2s var(--ease) both}
/* héros doux : mêmes étapes en fondus, sans tracé ni scintillement */
html[data-fx="soft"] .hero h1 .l{animation:fade .6s both}
html[data-fx="soft"] .hero h1 .l2{animation-delay:.15s}
html[data-fx="soft"] .hero h1 .l3{animation-delay:.3s}
html[data-fx="soft"] .dim::after{animation:fade .6s .7s both}
html[data-fx="soft"] .hero .frame img{animation:dimUp 1.2s .3s both}
html[data-fx="soft"] .pin{animation:fade .5s 1.3s both}
html[data-fx="soft"] .hero .brief{animation:fade .6s .8s both}
@keyframes draw{from{clip-path:inset(-40% 100% -60% 0)}to{clip-path:inset(-40% 0 -60% 0)}}
@keyframes cote{from{clip-path:inset(0 50% -24px 50%)}to{clip-path:inset(0 0 -24px 0)}}
@keyframes lightOn{0%,40%{filter:brightness(.2) saturate(.5)}43%{filter:brightness(1.12)}47%{filter:brightness(.45)}52%{filter:brightness(1.05)}57%{filter:brightness(.8)}64%,100%{filter:none}}
@keyframes dimUp{from{filter:brightness(.35) saturate(.6)}to{filter:none}}
@keyframes pop{from{transform:scale(0)}70%{transform:scale(1.15)}to{transform:scale(1)}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
html[data-fx="off"] *,html[data-fx="off"] *::before,html[data-fx="off"] *::after{animation:none!important;transition:none!important}

/* pages légales : texte courant sur 720 px */
.folio + .legal-text{padding-top:32px}
@media (max-width:899px){.folio + .legal-text{padding-top:24px}}
.legal-text{max-width:calc(720px + var(--cx) + var(--side));font:400 1rem/1.6 var(--f-txt)}
.legal-text h2{font-size:clamp(1.5rem,5vw,2rem);line-height:1.05;margin:36px 0 10px}
.legal-text p,.legal-text ul{margin:0 0 12px}
.legal-text ul{padding-left:1.2em}
.legal-text li{margin:0 0 6px}
.legal-text a{text-decoration:underline;text-underline-offset:3px}