/* =====================================================================
   « Tableau » : feuille commune aux 4 sites de mise en relation électriciens
   Refonte du 06/11/2026. Idée : le site est un tableau électrique.
   Deux gabarits HTML coexistent : A (conteneur/heros/cartes…) et B (wrap/hero/grid…).
   Polices : Barlow et Barlow Condensed (SIL OFL), auto-hébergées.
   ===================================================================== */

@font-face{font-family:"Barlow";src:url(/fonts/barlow-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url(/fonts/barlow-400-italique.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Barlow";src:url(/fonts/barlow-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url(/fonts/barlow-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url(/fonts/barlow-700.woff2) format("woff2");font-weight:700 900;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/fonts/barlow-condensed-600.woff2) format("woff2");font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/fonts/barlow-condensed-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/fonts/barlow-condensed-800.woff2) format("woff2");font-weight:800 900;font-style:normal;font-display:swap}

/* ---------- jetons ---------- */
:root{
  --fond:#F3F4F1; --panneau:#E8EAE6; --plaque:#FCFCFA;
  --encre:#15181B; --encre-douce:#4B5258; --trait:#C9CEC9; --trait-fort:#868D88;
  --accent:#FFB800; --accent-fonce:#E8A600; --sur-accent:#15181B;
  --rail:#D3D7D2; --fente:#E3E6E1;
  --nuit:#15181B; --nuit-2:#1E2226; --nuit-texte:#EEF0EC; --nuit-douce:#A9B0AA; --nuit-trait:#2E3438;
  --alerte:#B42318;
  --rayon:6px; --largeur:1200px; --gouttiere:clamp(16px,4vw,40px);
  --titre:"Barlow Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --texte:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  /* le module photos (<webartisans-devis>) prendra ces couleurs une fois branché */
  --wa-accent:var(--accent); --wa-accent-texte:var(--sur-accent); --wa-fond:var(--plaque);
  --wa-texte:var(--encre); --wa-sourdine:var(--encre-douce); --wa-bord:var(--trait-fort); --wa-rayon:var(--rayon);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --fond:#0F1113; --panneau:#15181B; --plaque:#1B1F22;
    --encre:#ECEEEA; --encre-douce:#A9B0AA; --trait:#2E3438; --trait-fort:#5B6369;
    --rail:#2A2F33; --fente:#121416;
    --nuit:#08090A; --nuit-2:#141719; --nuit-trait:#22272B;
    --alerte:#FF8A7A;
  }
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;background:var(--fond);color:var(--encre);font:400 1.0625rem/1.62 var(--texte);font-kerning:normal;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
@media (min-width:768px){body{font-size:1.125rem}}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-thickness:1.5px;text-underline-offset:3px}
p a,li a,dd a,.avis a,details a,.encart a,.bareme a,.note a{color:var(--encre);font-weight:600;text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:4px}
p a:hover,li a:hover,details a:hover{text-decoration-color:currentColor}
:focus-visible{outline:3px solid var(--encre);outline-offset:3px;box-shadow:0 0 0 7px var(--accent);border-radius:4px}
::selection{background:var(--accent);color:var(--sur-accent)}
h1,h2,h3,h4{font-family:var(--titre);color:var(--encre);margin:0;text-wrap:balance}
h1{font-weight:800;font-size:clamp(2.55rem,1.55rem + 3.7vw,4.5rem);line-height:1.01;letter-spacing:-.012em}
h2{font-weight:700;font-size:clamp(1.9rem,1.35rem + 1.9vw,2.8rem);line-height:1.04;letter-spacing:-.006em;margin-bottom:.6em}
h3{font-weight:700;font-size:1.42rem;line-height:1.12;margin-bottom:.45em}
p{margin:0 0 1em}
strong,b{font-weight:600}
em{font-style:italic}
.ico-svg{display:inline-block;width:1em;height:1em;flex:none;vertical-align:-.14em}
.conteneur,.wrap{width:100%;max-width:var(--largeur);margin-inline:auto;padding-inline:var(--gouttiere)}
section{padding-block:clamp(56px,7vw,104px)}
section.grise,section.alt{background:var(--panneau)}
:is(.conteneur,.wrap) > p,:is(.conteneur,.wrap) > ul:not(.badges),:is(.conteneur,.wrap) > ol:not(.steps),article > p,article > ul{max-width:72ch}
.sub{font-size:1.15rem;color:var(--encre-douce);max-width:62ch}

/* ---------- bandeau du haut ---------- */
.bandeau{background:var(--nuit);color:var(--nuit-texte);font-size:.94rem;font-weight:500;line-height:1.4;text-align:center;padding:9px var(--gouttiere)}
.bandeau .ico-svg{color:var(--accent);margin-right:4px}
.bandeau a{color:var(--accent);font-weight:700;text-decoration:none;white-space:nowrap}
.bandeau a:hover{text-decoration:underline}

/* ---------- en-tête ---------- */
header{position:relative;z-index:20;background:var(--fond);border-bottom:1px solid var(--trait)}
@media (min-width:960px){header{position:sticky;top:0}}
.entete,.head{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;min-height:74px}
.logo{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:46px;padding-left:42px;color:var(--encre);text-decoration:none;font-family:var(--titre);font-weight:700;font-size:1.38rem;line-height:1}
.logo span{display:block;margin-top:5px;font-family:var(--texte);font-weight:600;font-size:.72rem;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;color:var(--encre-douce)}
.logo::before{content:"";position:absolute;left:0;top:50%;width:28px;height:40px;margin-top:-20px;border:2px solid var(--encre);border-radius:5px;background:var(--plaque)}
.logo::after{content:"";position:absolute;left:9px;top:50%;width:10px;height:13px;margin-top:-12px;border-radius:2px;background:var(--accent);box-shadow:0 0 0 2px var(--encre)}
.logo .ico-svg{display:none}
.tel-entete,.tel-head{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 18px;background:var(--accent);color:var(--sur-accent);border:2px solid var(--sur-accent);border-radius:var(--rayon);font-family:var(--titre);font-weight:700;font-size:1.28rem;font-variant-numeric:tabular-nums;text-decoration:none;white-space:nowrap;box-shadow:0 2px 0 var(--sur-accent);transition:background-color .15s,transform .1s,box-shadow .1s}
.tel-entete:hover,.tel-head:hover{background:var(--accent-fonce)}
.tel-entete:active,.tel-head:active{transform:translateY(2px);box-shadow:none}
@media (max-width:560px){.tel-entete,.tel-head{font-size:1.05rem;padding:0 12px;min-height:44px}.logo{font-size:1.2rem;padding-left:36px}.logo::before{width:24px;height:34px;margin-top:-17px}.logo::after{left:7px;width:10px;height:11px;margin-top:-10px}.logo span{font-size:.66rem}}

/* menu : gabarit A (barre sous l'en-tête) */
nav.principal{background:var(--fond);border-bottom:1px solid var(--trait)}
nav.principal ul{list-style:none;margin:0;padding:0;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
nav.principal ul::-webkit-scrollbar{display:none}
@media (max-width:900px){nav.principal ul,.head nav{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}}
nav.principal a{display:flex;align-items:center;min-height:50px;padding:0 14px;color:var(--encre-douce);font-weight:500;font-size:1rem;text-decoration:none;white-space:nowrap;border-bottom:3px solid transparent;margin-bottom:-1px}
nav.principal li:first-child a{padding-left:0}
nav.principal a:hover{color:var(--encre)}
nav.principal a.actif{color:var(--encre);font-weight:700;border-bottom-color:var(--encre)}
/* menu : gabarit B (dans l'en-tête) */
.head nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.head nav::-webkit-scrollbar{display:none}
.head nav a{display:flex;align-items:center;min-height:46px;padding:0 12px;color:var(--encre-douce);font-weight:500;font-size:1rem;text-decoration:none;white-space:nowrap;border-radius:var(--rayon)}
.head nav a:hover{color:var(--encre);background:var(--panneau)}
@media (max-width:1020px){.head{flex-wrap:wrap;padding-top:10px}.head nav{order:3;width:calc(100% + 2 * var(--gouttiere));margin:0 calc(-1 * var(--gouttiere));padding:0 var(--gouttiere);border-top:1px solid var(--trait)}.head nav a:first-child{padding-left:0}}

/* ---------- haut de page ---------- */
.ouverture{background:var(--fond);padding-block:clamp(30px,4vw,56px) clamp(44px,5.5vw,84px);border-bottom:1px solid var(--trait)}
.ouverture > :is(.conteneur,.wrap){display:grid;grid-template-columns:minmax(0,1fr);row-gap:22px}
.ouverture h1{max-width:17ch}
.ouverture h1 + p{margin-top:4px}
.ouverture p{margin:0}
.sous-titre,.ouverture > :is(.conteneur,.wrap) > p:not(.avertissement){font-size:1.14rem;line-height:1.58;color:var(--encre-douce);max-width:60ch}
.page-accueil .ouverture h1{font-size:clamp(2.8rem,1.6rem + 3.9vw,4.6rem)}
@media (min-width:960px){
  .ouverture > :is(.conteneur,.wrap){grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(40px,5vw,72px);align-items:start}
  .ouverture > :is(.conteneur,.wrap) > *{grid-column:1}
  .ouverture > :is(.conteneur,.wrap) > h1{grid-column:1 / -1;grid-row:1;max-width:none;margin-bottom:8px}
  .ouverture .haut-visuel{grid-column:2;grid-row:2 / span 6;align-self:start}
  .ouverture .badges{grid-column:1 / -1}
}
/* plaque d'avertissement : « ce site ne réalise pas les travaux » */
.avertissement{position:relative;padding:15px 18px 15px 58px;background:var(--plaque);border:1.5px solid var(--encre);border-radius:var(--rayon);font-size:.98rem;line-height:1.52;color:var(--encre);max-width:62ch}
.avertissement::before{content:"";position:absolute;left:15px;top:15px;width:28px;height:28px;border-radius:4px;background:var(--accent);box-shadow:inset 0 0 0 1.5px var(--sur-accent)}
.avertissement::after{content:"";position:absolute;left:19px;top:19px;width:20px;height:20px;background:var(--sur-accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M240.26,186.1,152.81,34.23h0a28.74,28.74,0,0,0-49.62,0L15.74,186.1a27.45,27.45,0,0,0,0,27.71A28.31,28.31,0,0,0,40.55,228h174.9a28.31,28.31,0,0,0,24.79-14.19A27.45,27.45,0,0,0,240.26,186.1Zm-20.8,15.7a4.46,4.46,0,0,1-4,2.2H40.55a4.46,4.46,0,0,1-4-2.2,3.56,3.56,0,0,1,0-3.73L124,46.2a4.77,4.77,0,0,1,8,0l87.44,151.87A3.56,3.56,0,0,1,219.46,201.8ZM116,136V104a12,12,0,0,1,24,0v32a12,12,0,0,1-24,0Zm28,40a16,16,0,1,1-16-16A16,16,0,0,1,144,176Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M240.26,186.1,152.81,34.23h0a28.74,28.74,0,0,0-49.62,0L15.74,186.1a27.45,27.45,0,0,0,0,27.71A28.31,28.31,0,0,0,40.55,228h174.9a28.31,28.31,0,0,0,24.79-14.19A27.45,27.45,0,0,0,240.26,186.1Zm-20.8,15.7a4.46,4.46,0,0,1-4,2.2H40.55a4.46,4.46,0,0,1-4-2.2,3.56,3.56,0,0,1,0-3.73L124,46.2a4.77,4.77,0,0,1,8,0l87.44,151.87A3.56,3.56,0,0,1,219.46,201.8ZM116,136V104a12,12,0,0,1,24,0v32a12,12,0,0,1-24,0Zm28,40a16,16,0,1,1-16-16A16,16,0,0,1,144,176Z'/%3E%3C/svg%3E") center/contain no-repeat}
.avertissement strong{font-weight:700}

/* boutons d'appel */
.cta-groupe{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:6px}
.btn-appel,.cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:60px;padding:0 28px;background:var(--accent);color:var(--sur-accent);border:2px solid var(--sur-accent);border-radius:var(--rayon);font-family:var(--titre);font-weight:700;font-size:1.5rem;line-height:1.1;letter-spacing:.005em;font-variant-numeric:tabular-nums;text-decoration:none;box-shadow:0 3px 0 var(--sur-accent);transition:background-color .15s,transform .1s,box-shadow .1s;cursor:pointer}
.btn-appel:hover,.cta:hover{background:var(--accent-fonce)}
.btn-appel:active,.cta:active{transform:translateY(3px);box-shadow:none}
.cta{flex-wrap:wrap;text-align:center}
.cta small{flex-basis:100%;font-family:var(--texte);font-weight:500;font-size:.82rem;line-height:1.3;padding-bottom:8px}
.ouverture .cta{justify-self:start;padding-top:8px}
.btn-secondaire{display:inline-flex;align-items:center;min-height:48px;color:var(--encre);font-weight:600;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:6px}
.btn-secondaire:hover{text-decoration-color:currentColor}

/* le rail : les trois garanties de l'accueil deviennent des modules */
.ouverture .badges{order:5;position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:30px 0 6px;padding:0;list-style:none}
.ouverture .badges::before{content:"";position:absolute;left:-18px;right:-18px;top:50%;height:22px;margin-top:-11px;background:repeating-linear-gradient(90deg,transparent 0 20px,var(--fente) 20px 34px),var(--rail);border-block:1.5px solid var(--trait-fort);border-radius:2px}
.ouverture .badges > *{position:relative;display:flex;align-items:center;min-height:96px;margin-left:-1.5px;padding:14px 18px 14px 70px;background:var(--plaque);border:1.5px solid var(--encre);font-family:var(--titre);font-weight:600;font-size:1.22rem;line-height:1.12;color:var(--encre)}
.ouverture .badges > :first-child{margin-left:0;border-radius:var(--rayon) 0 0 var(--rayon)}
.ouverture .badges > :last-child{border-radius:0 var(--rayon) var(--rayon) 0}
.ouverture .badges .ico-svg{display:none}
.ouverture .badges > *::before{content:"";position:absolute;left:20px;top:50%;width:30px;height:58px;margin-top:-29px;border:1.5px solid var(--encre);border-radius:5px;background:var(--fente)}
.ouverture .badges > *::after{content:"";position:absolute;left:26px;top:50%;width:18px;height:22px;margin-top:-25px;border-radius:3px;background:var(--encre);box-shadow:inset 0 -5px 0 var(--accent);transition:transform .38s cubic-bezier(.3,1.7,.5,1)}
.ouverture .badges > :nth-child(2)::after{transition-delay:.12s}
.ouverture .badges > :nth-child(3)::after{transition-delay:.24s}
.js .badges:not(.sous-tension) > *::after{transform:translateY(26px);box-shadow:inset 0 -5px 0 var(--trait-fort)}
@media (max-width:700px){
  .ouverture .badges{grid-template-columns:1fr;margin-inline:6px}
  .ouverture .badges::before{left:50%;right:auto;top:-14px;bottom:-14px;width:22px;height:auto;margin:0 0 0 -11px;background:repeating-linear-gradient(0deg,transparent 0 20px,var(--fente) 20px 34px),var(--rail);border-block:0;border-inline:1.5px solid var(--trait-fort)}
  .ouverture .badges > *{margin:-1.5px 0 0;min-height:84px}
  .ouverture .badges > :first-child{margin-top:0;border-radius:var(--rayon) var(--rayon) 0 0}
  .ouverture .badges > :last-child{border-radius:0 0 var(--rayon) var(--rayon)}
}

/* visuel de droite : photo, carte ou coffret */
.haut-visuel{min-width:0}
.haut-photo .photo-page{margin:0}
.haut-photo{display:flex;flex-direction:column;gap:24px}
.haut-photo .badges{margin:0}
@media (min-width:960px){
  .haut-photo .badges{order:2;grid-template-columns:repeat(3,minmax(0,1fr))}
  .haut-photo .badges > *{min-height:88px;padding:12px 12px 12px 54px;font-size:1.06rem}
  .haut-photo .badges > *::before{left:13px;width:28px;height:54px;margin-top:-27px}
  .haut-photo .badges > *::after{left:18px;width:18px;height:20px;margin-top:-23px}
  .haut-photo .badges::before{left:-14px;right:-14px}
}
.photo-page{margin:0 auto;max-width:var(--largeur)}
.photo-page img{width:100%;aspect-ratio:16/9;object-fit:cover;border:1.5px solid var(--encre);border-radius:var(--rayon);background:var(--panneau)}
.photo-page figcaption{margin-top:8px;font-size:.8rem;color:var(--encre-douce)}
@media (max-width:959px){.haut-photo{order:9}}

.coffret{display:flex;justify-content:center;padding:6px 0}
.coffret-capot{display:grid;gap:30px;width:min(100%,500px);padding:32px 28px 26px;background:var(--plaque);border:2px solid var(--encre);border-radius:var(--rayon);box-shadow:10px 10px 0 var(--panneau)}
.coffret-rail{position:relative;display:flex;justify-content:center;padding-bottom:24px}
.coffret-rail::before{content:"";position:absolute;left:-28px;right:-28px;top:42px;height:20px;background:repeating-linear-gradient(90deg,transparent 0 18px,var(--fente) 18px 30px),var(--rail);border-block:1.5px solid var(--trait-fort)}
.coffret-rail::after{content:"";position:absolute;left:0;right:0;bottom:0;height:14px;border:1.5px solid var(--encre);border-radius:2px;background:repeating-linear-gradient(90deg,transparent 0 35px,var(--trait) 35px 36.5px),var(--plaque)}
.mod{position:relative;z-index:1;width:38px;height:106px;margin-left:-1.5px;background:var(--plaque);border:1.5px solid var(--encre);border-radius:3px}
.mod:first-child{margin-left:0}
.mod-2{width:74px}
.mod::before{content:"";position:absolute;left:50%;top:27px;width:20px;height:48px;margin-left:-10px;border:1.5px solid var(--encre);border-radius:3px;background:var(--fente)}
.mod::after{content:"";position:absolute;left:50%;top:31px;width:14px;height:18px;margin-left:-7px;border-radius:2px;background:var(--encre);box-shadow:inset 0 -4px 0 var(--accent);transition:transform .34s cubic-bezier(.3,1.7,.5,1);transition-delay:calc(var(--i,0) * 70ms + 150ms)}
.mod-2.diff{background:linear-gradient(var(--accent),var(--accent)) right 8px top 8px / 10px 10px no-repeat,var(--plaque)}
.mod.vide::before,.mod.vide::after{display:none}
.mod.vide{background:repeating-linear-gradient(0deg,transparent 0 9px,var(--trait) 9px 10.5px),var(--plaque)}
.js .coffret:not(.sous-tension) .mod::after{transform:translateY(23px);box-shadow:inset 0 -4px 0 var(--trait-fort)}
@media (max-width:959px){.page-guide .haut-visuel,.page-contact .haut-visuel,.page-introuvable .haut-visuel{display:none}}

/* cartes de zone (contours officiels geo.api.gouv.fr) */
.haut-carte,.zone-carte{background:var(--plaque);border:1.5px solid var(--encre);border-radius:var(--rayon);padding:10px;overflow:hidden}
.carte-zone{display:block;width:100%;height:auto;max-height:520px}
.carte-zone .fond{fill:var(--panneau);stroke:var(--trait);stroke-width:1;stroke-linejoin:round}
.carte-zone .couverte{fill:var(--plaque);stroke:var(--encre);stroke-width:1.6;stroke-linejoin:round;transition:fill .2s}
.carte-zone .centre{fill:var(--accent);stroke:var(--sur-accent);stroke-width:2.2;stroke-linejoin:round}
.carte-zone .site{stroke-width:3.2}
.carte-zone .couverte.allumee,.carte-zone .couverte.survol{fill:color-mix(in srgb,var(--accent) 42%,var(--plaque))}
.carte-zone .fil{fill:none;stroke:var(--encre);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .9s cubic-bezier(.6,0,.2,1),stroke-width .2s}
.carte-zone .fil.allume,.carte-zone .fil.survol{stroke-width:4.5}
.js .zone-communes:not(.sous-tension) .carte-zone .fil{stroke-dashoffset:1}
.carte-zone .borne{fill:var(--plaque);stroke:var(--encre);stroke-width:2.2}
.carte-zone .borne.survol{fill:var(--accent)}
.carte-zone .borne-centre{fill:var(--sur-accent);stroke:var(--accent);stroke-width:3.5}
@media (max-width:959px){.haut-carte{order:9}}

/* ---------- cartes : modules (accueil) et étiquettes (guides) ---------- */
.cartes,.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px;margin-block:26px 8px}
.carte,.card{min-width:0;background:var(--plaque);border:1.5px solid var(--trait);border-radius:var(--rayon);padding:0 22px 20px;color:var(--encre)}
.carte > h3,.card > h3{margin:0 -22px 14px;padding:16px 22px 13px;border-bottom:1.5px solid var(--encre);font-size:1.38rem}
.carte h3 .ico-svg,.card .ico{display:none}
.carte p:last-child,.card p:last-child{margin-bottom:0}
.carte figure{margin:16px 0}
a.card{text-decoration:none;transition:border-color .15s,transform .15s}
a.card:hover{border-color:var(--encre)}
.lien{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--encre);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:5px}
.lien:hover{text-decoration-color:currentColor}

/* modules sur rail (services de l'accueil) */
.modules{position:relative;gap:0;margin-top:34px;padding-top:0}
.modules::before{content:"";position:absolute;left:-16px;right:-16px;top:52px;height:22px;background:repeating-linear-gradient(90deg,transparent 0 20px,var(--fente) 20px 34px),var(--rail);border-block:1.5px solid var(--trait-fort);border-radius:2px}
.modules > :is(.carte,.card){position:relative;display:flex;flex-direction:column;margin-left:-1.5px;padding:24px 24px 26px;border:1.5px solid var(--encre);border-radius:0}
.modules > :first-child{margin-left:0;border-radius:var(--rayon) 0 0 var(--rayon)}
.modules > :last-child{border-radius:0 var(--rayon) var(--rayon) 0}
.modules > * > h3{display:flex;align-items:center;min-height:78px;margin:0 -24px 16px;padding:0 24px 18px 82px;border-bottom:1.5px solid var(--encre);font-size:1.5rem}
.modules > *::before{content:"";position:absolute;left:24px;top:24px;width:34px;height:60px;border:1.5px solid var(--encre);border-radius:5px;background:var(--fente)}
.modules > *::after{content:"";position:absolute;left:31px;top:29px;width:20px;height:22px;border-radius:3px;background:var(--encre);box-shadow:inset 0 -5px 0 var(--accent)}
.modules > :is(.carte,.card):hover::after,.modules > :is(.carte,.card):focus-within::after,a.card:focus-visible::after{animation:clic .42s cubic-bezier(.3,1.5,.5,1)}
.modules > :is(.carte,.card):hover{background:color-mix(in srgb,var(--plaque) 70%,var(--fond))}
.modules > * > p:last-child{margin-top:auto;padding-top:6px}
@keyframes clic{0%{transform:none}45%{transform:translateY(24px)}100%{transform:none}}
@media (max-width:760px){
  .modules{grid-template-columns:1fr;margin-inline:4px}
  .modules::before{left:41px;right:auto;top:-14px;bottom:-14px;width:22px;height:auto;background:repeating-linear-gradient(0deg,transparent 0 20px,var(--fente) 20px 34px),var(--rail);border-block:0;border-inline:1.5px solid var(--trait-fort)}
  .modules > :is(.carte,.card){margin:-1.5px 0 0}
  .modules > :first-child{margin-top:0;border-radius:var(--rayon) var(--rayon) 0 0}
  .modules > :last-child{border-radius:0 0 var(--rayon) var(--rayon)}
}

/* ---------- listes à bornes carrées ---------- */
.liste,article ul,section .wrap > ul:not(.badges),details ul{list-style:none;padding:0;margin:0 0 1.2em}
.liste li,article ul li,section .wrap > ul:not(.badges) li,details ul li{position:relative;padding:7px 0 7px 32px}
.liste li::before,article ul li::before,section .wrap > ul:not(.badges) li::before,details ul li::before{content:"";position:absolute;left:3px;top:.95em;width:11px;height:11px;border:2px solid var(--encre);border-radius:2px;background:var(--accent)}
:is(section,article) ol:not(.steps){padding-left:1.3em}
:is(section,article) ol:not(.steps) li{padding:4px 0 4px 6px}
:is(section,article) ol:not(.steps) li::marker{font-family:var(--titre);font-weight:800}

/* ---------- étapes reliées par un fil ---------- */
.etapes,.steps{--n:3;position:relative;counter-reset:etape;display:grid;gap:30px;margin:34px 0 0;padding:0;list-style:none}
.etape,.steps > li{position:relative;padding-left:70px;min-height:52px}
.etape p:last-child,.steps > li p:last-child{margin-bottom:0}
.etape::before,.steps > li::before{counter-increment:etape;content:counter(etape);position:absolute;z-index:1;left:0;top:-6px;display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:var(--plaque);border:2px solid var(--encre);font-family:var(--titre);font-weight:800;font-size:1.45rem;color:var(--encre);transition:background-color .25s,color .25s}
.etapes::before,.steps::before,.etapes::after,.steps::after{content:"";position:absolute;left:24px;top:22px;bottom:22px;width:3px;background:var(--trait)}
.etapes::after,.steps::after{background:var(--accent);transform-origin:50% 0;transition:transform 1.2s cubic-bezier(.6,0,.2,1)}
.js :is(.etapes,.steps):not(.sous-tension)::after{transform:scaleY(0)}
.sous-tension > :is(.etape,li)::before{background:var(--accent);color:var(--sur-accent);border-color:var(--sur-accent)}
.sous-tension > :nth-child(2)::before{transition-delay:.4s}
.sous-tension > :nth-child(3)::before{transition-delay:.8s}
.sous-tension > :nth-child(4)::before{transition-delay:1.1s}
.sous-tension > :nth-child(5)::before{transition-delay:1.3s}
.sous-tension > :nth-child(6)::before{transition-delay:1.5s}
.steps > li h3{font-size:1.45rem}
@media (min-width:900px){
  :is(.etapes,.steps):has(> :nth-child(4):last-child){--n:4}
  :is(.etapes,.steps):not(:has(> :nth-child(5))){grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:36px}
  :is(.etapes,.steps):not(:has(> :nth-child(5))) > *{padding:74px 0 0}
  :is(.etapes,.steps):not(:has(> :nth-child(5)))::before,:is(.etapes,.steps):not(:has(> :nth-child(5)))::after{left:24px;right:calc((100% - (var(--n) - 1) * 36px) / var(--n) - 26px);top:24px;bottom:auto;width:auto;height:3px}
  :is(.etapes,.steps):not(:has(> :nth-child(5)))::after{transform-origin:0 50%}
  .js :is(.etapes,.steps):not(:has(> :nth-child(5))):not(.sous-tension)::after{transform:scaleX(0)}
  :is(.etapes,.steps):not(:has(> :nth-child(5))) > *::before{top:0}
}

/* ---------- communes ---------- */
.zone-communes > :is(.conteneur,.wrap){display:grid;grid-template-columns:minmax(0,1fr);gap:0 56px}
.zone-communes .cartes{grid-template-columns:1fr;gap:0;margin-top:18px}
.zone-communes .carte{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:-1.5px;padding:10px 18px;border-color:var(--encre);border-radius:0}
.zone-communes .carte:first-child{margin-top:0;border-radius:var(--rayon) var(--rayon) 0 0}
.zone-communes .carte:last-child{border-radius:0 0 var(--rayon) var(--rayon)}
.zone-communes .carte > h3{margin:0;padding:0;border:0;font-size:1.35rem}
.zone-communes .carte p{margin:0}
.zone-communes .carte.survol{background:color-mix(in srgb,var(--accent) 22%,var(--plaque))}
.zone-carte{margin-top:28px}
@media (min-width:960px){
  .zone-communes > :is(.conteneur,.wrap) > *{grid-column:1}
  .zone-communes .zone-carte{grid-column:2;grid-row:1 / span 8;margin-top:0;align-self:start}
}
.zones{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.zones a{display:inline-flex;align-items:center;min-height:48px;padding:0 18px;background:var(--plaque);border:1.5px solid var(--encre);border-radius:var(--rayon);font-family:var(--titre);font-weight:700;font-size:1.25rem;color:var(--encre);text-decoration:none}
.zones a:hover,.zones a.survol{background:var(--accent);color:var(--sur-accent)}
.note{font-size:.95rem;color:var(--encre-douce)}

/* ---------- questions fréquentes ---------- */
details{border-bottom:1.5px solid var(--encre)}
h2 + details,details:first-of-type{border-top:1.5px solid var(--encre)}
summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:64px;padding:16px 2px;list-style:none;cursor:pointer;font-weight:600;font-size:1.1rem;line-height:1.38}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex:0 0 30px;height:30px;border:1.5px solid var(--encre);border-radius:4px;background:linear-gradient(var(--encre),var(--encre)) center/12px 2px no-repeat,linear-gradient(var(--encre),var(--encre)) center/2px 12px no-repeat,var(--plaque);transition:background-color .2s}
details[open] > summary::after{background:linear-gradient(var(--sur-accent),var(--sur-accent)) center/12px 2px no-repeat,var(--accent);border-color:var(--sur-accent)}
summary:hover{color:var(--encre-douce)}
details > :not(summary){max-width:68ch}
details > p:last-child{padding-bottom:10px}
@media (min-width:960px){
  :is(.conteneur,.wrap):has(> details){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);column-gap:72px;align-items:start}
  :is(.conteneur,.wrap):has(> details) > *{grid-column:2}
  :is(.conteneur,.wrap):has(> details) > h2{grid-column:1;grid-row:1 / span 40;position:sticky;top:112px}
}

/* ---------- appel final : l'interrupteur général ---------- */
.encart-appel,.bande{position:relative;display:grid;gap:16px;justify-items:start;background:var(--nuit);color:var(--nuit-texte);border-radius:var(--rayon);padding:clamp(28px,4.5vw,60px)}
.bande{border-radius:0;padding-inline:max(var(--gouttiere),calc((100% - var(--largeur)) / 2 + var(--gouttiere)))}
.encart-appel h2,.bande h2{color:var(--nuit-texte);margin:0;max-width:22ch}
.encart-appel p,.bande p{color:var(--nuit-douce);margin:0;max-width:56ch}
.encart-appel .btn-appel,.bande .cta{margin-top:10px;font-size:clamp(1.65rem,1.2rem + 1.6vw,2.5rem);min-height:72px;padding:0 30px;border-color:var(--accent);box-shadow:0 4px 0 #000}
.encart-appel .btn-appel:active,.bande .cta:active{transform:translateY(4px)}
.interrupteur{position:relative;width:84px;height:132px;border:2px solid var(--nuit-texte);border-radius:var(--rayon);background:var(--nuit-2)}
.interrupteur::before{content:"";position:absolute;left:50%;top:26px;width:42px;height:80px;margin-left:-21px;border:2px solid var(--nuit-douce);border-radius:5px;background:#0B0C0E}
.interrupteur::after{content:"";position:absolute;left:12px;right:12px;bottom:9px;height:4px;border-radius:2px;background:var(--nuit-trait)}
.interrupteur-manette{position:absolute;left:50%;top:31px;width:30px;height:34px;margin-left:-15px;border-radius:4px;background:var(--accent);box-shadow:inset 0 -6px 0 var(--accent-fonce);transition:transform .5s cubic-bezier(.3,1.6,.5,1) .15s}
.js :is(.encart-appel,.bande):not(.sous-tension) .interrupteur-manette{transform:translateY(36px);background:var(--nuit-douce);box-shadow:none}
@media (min-width:800px){
  .encart-appel,.bande{grid-template-columns:auto minmax(0,1fr);column-gap:48px;align-items:center}
  .encart-appel > *,.bande > *{grid-column:2}
  .encart-appel > .interrupteur,.bande > .interrupteur{grid-column:1;grid-row:1 / span 3;width:108px;height:170px}
  .interrupteur::before{top:34px;width:52px;height:104px;margin-left:-26px}
  .interrupteur-manette{top:40px;width:38px;height:44px;margin-left:-19px}
  .js :is(.encart-appel,.bande):not(.sous-tension) .interrupteur-manette{transform:translateY(46px)}
}
.encart{background:var(--plaque);border:1.5px solid var(--encre);border-radius:var(--rayon);padding:18px 22px;margin:22px 0;max-width:72ch}

/* ---------- schémas existants : posés sur une plaque, recolorés sans toucher au dessin ---------- */
figure[data-schema]{margin:30px 0;max-width:700px;background:#FCFCFA;border:1.5px solid var(--encre);border-radius:var(--rayon);padding:18px 18px 14px;color:#15181B;color-scheme:light}
figure[data-schema="banner"]{max-width:none}
figure[data-schema] svg{display:block;width:100%;height:auto}
figure[data-schema] figcaption{margin-top:10px;font-size:.88rem;line-height:1.5;color:#4B5258}
.carte figure[data-schema]{margin:16px 0 4px;padding:10px}
figure[data-schema] svg :is([fill="#0f2b46" i],[fill="#12263f" i],[fill="#143642" i],[fill="#22303c" i],[fill="#22303e" i],[fill="#1b3a5c" i],[fill="#2c4a70" i]){fill:#15181B}
figure[data-schema] svg :is([stroke="#0f2b46" i],[stroke="#12263f" i],[stroke="#143642" i],[stroke="#22303c" i],[stroke="#22303e" i],[stroke="#1b3a5c" i],[stroke="#2c4a70" i]){stroke:#15181B}
figure[data-schema] svg :is([stop-color="#0f2b46" i],[stop-color="#12263f" i],[stop-color="#143642" i],[stop-color="#1b3a5c" i],[stop-color="#2c4a70" i]){stop-color:#15181B}
figure[data-schema] svg :is([fill="#1d4e7e" i],[fill="#1f5f6b" i]){fill:#3A4147}
figure[data-schema] svg :is([stroke="#1d4e7e" i],[stroke="#1f5f6b" i]){stroke:#3A4147}
figure[data-schema] svg :is([stop-color="#1d4e7e" i],[stop-color="#1f5f6b" i]){stop-color:#3A4147}
figure[data-schema] svg :is([fill="#ffc934" i],[fill="#ffc93c" i],[fill="#ffb703" i],[fill="#ffd21f" i]){fill:#FFB800}
figure[data-schema] svg :is([stroke="#ffc934" i],[stroke="#ffc93c" i],[stroke="#ffb703" i],[stroke="#ffd21f" i]){stroke:#FFB800}
figure[data-schema] svg :is([stop-color="#ffc934" i],[stop-color="#ffc93c" i],[stop-color="#ffb703" i],[stop-color="#ffd21f" i]){stop-color:#FFB800}
figure[data-schema] svg [fill="#fff3c9" i]{fill:#FFF0C2}
figure[data-schema] svg [fill="#55636e" i]{fill:#4B5258}
figure[data-schema] svg [stroke="#55636e" i]{stroke:#4B5258}
figure[data-schema] svg :is([fill="#9aa8b4" i],[fill="#b7c2cd" i]){fill:#9AA19C}
figure[data-schema] svg :is([stroke="#9aa8b4" i],[stroke="#b7c2cd" i]){stroke:#9AA19C}
figure[data-schema] svg :is([fill="#eef2f6" i],[fill="#e3e9ef" i],[fill="#f8fafc" i],[fill="#e8f1fb" i],[fill="#f7fafd" i],[fill="#e2e8ef" i],[fill="#dfeaea" i],[fill="#eaf2f2" i],[fill="#f7fafa" i]){fill:#EEF0EC}
figure[data-schema] svg :is([stop-color="#eef2f6" i],[stop-color="#e3e9ef" i],[stop-color="#f8fafc" i],[stop-color="#e8f1fb" i],[stop-color="#f7fafd" i],[stop-color="#e2e8ef" i],[stop-color="#dfeaea" i],[stop-color="#eaf2f2" i],[stop-color="#f7fafa" i]){stop-color:#EEF0EC}

/* ---------- page contact et encadrés ---------- */
.avis{background:var(--plaque);border:1.5px solid var(--encre);border-left-width:6px;border-radius:var(--rayon);padding:16px 20px;margin:22px 0;max-width:72ch}
.avis-alerte{border-left-color:var(--alerte)}
.avis p:last-child{margin-bottom:0}
.plaque-numero{display:inline-block;background:var(--plaque);border:2px solid var(--encre);border-radius:var(--rayon);padding:12px 18px;font-weight:700;color:var(--encre)}
.lien-fort{color:var(--encre);font-weight:800;text-decoration-color:var(--accent);text-decoration-thickness:3px}
.bareme{background:var(--plaque);border:1.5px solid var(--trait);border-radius:var(--rayon);padding:18px 22px;margin:22px 0;max-width:72ch}
article{max-width:none}
table{border-collapse:collapse;width:100%;max-width:72ch;margin:18px 0;font-size:1rem}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--trait)}
th{font-family:var(--titre);font-weight:700;font-size:1.1rem}

/* ---------- emplacement réservé au module photos (masqué tant qu'il n'est pas branché) ---------- */
.emplacement-photos{padding-block:clamp(40px,5vw,72px)}
.emplacement-photos.apercu > :is(.conteneur,.wrap){min-height:220px;display:grid;place-items:center;border:2px dashed var(--trait-fort);border-radius:var(--rayon);max-width:calc(var(--largeur) - 2 * var(--gouttiere))}
.emplacement-photos.apercu > :is(.conteneur,.wrap)::before{content:"Emplacement réservé : demande avec photos (module à brancher)";font-family:var(--titre);font-weight:700;font-size:1.4rem;color:var(--encre-douce);text-align:center;padding:20px}

/* ---------- pied de page ---------- */
footer{background:var(--nuit);color:var(--nuit-douce);padding-block:60px 44px;font-size:.96rem;line-height:1.6}
footer h4{display:flex;align-items:center;gap:8px;margin:0 0 14px;color:var(--nuit-texte);font-family:var(--titre);font-weight:700;font-size:1.25rem;line-height:1.15}
footer h4 .ico-svg{color:var(--accent)}
footer p{margin:0 0 .8em}
footer a{color:var(--nuit-texte);text-decoration:none;border-bottom:1px solid var(--nuit-trait);line-height:2}
footer a:hover{border-bottom-color:var(--accent)}
footer .ico-svg{color:var(--accent)}
.colonnes-pied,.cols{display:grid;gap:34px;grid-template-columns:1fr}
@media (min-width:640px){.colonnes-pied,.cols{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.colonnes-pied,.cols{grid-template-columns:2fr 1fr 1fr 1fr}.colonnes-pied:has(> :nth-child(3):last-child){grid-template-columns:2fr 1fr 1fr}}
.cols > div > a{display:table}
.pied-transparence{color:var(--nuit-texte);font-weight:500}
footer .legal{margin-top:36px;padding-top:20px;border-top:1px solid var(--nuit-trait);font-size:.86rem}

/* ---------- barre d'appel du téléphone ---------- */
.barre-appel-mobile,.tel-fixe{display:none}
@media (max-width:767px){
  .barre-appel-mobile{display:block;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--accent);border-top:2px solid var(--sur-accent);padding-bottom:env(safe-area-inset-bottom)}
  .barre-appel-mobile a,a.tel-fixe{display:flex;align-items:center;justify-content:center;gap:10px;min-height:60px;color:var(--sur-accent);font-family:var(--titre);font-weight:700;font-size:1.38rem;font-variant-numeric:tabular-nums;text-decoration:none}
  a.tel-fixe{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--accent);border-top:2px solid var(--sur-accent);padding-bottom:env(safe-area-inset-bottom)}
  body{padding-bottom:calc(62px + env(safe-area-inset-bottom))}
}

/* ---------- barre de lecture (le courant avance) ---------- */
.avancement{position:fixed;z-index:40;top:0;left:0;right:0;height:3px;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
@supports (animation-timeline:scroll()){
  .page-guide .avancement,.page-commune .avancement{animation:avance linear both;animation-timeline:scroll(root)}
}
@keyframes avance{to{transform:scaleX(1)}}

/* ---------- mentions légales et page introuvable ---------- */
.page-legal section h2{margin-top:1.2em}
.page-legal section h2:first-child{margin-top:0}

/* ---------- moins de mouvement ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .avancement{display:none}
}
@media print{.bandeau,.barre-appel-mobile,.tel-fixe,.avancement,.haut-visuel,.interrupteur{display:none!important}body{background:#fff;color:#000}}