@font-face{
  font-family:'PoliceTitre';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('police-titre.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:'PoliceLibelle';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('police-libelle.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;
}

:root{
  --nuit:#0b0d11;               /* le plus profond : le tableau, le pied */
  --fond:#14171c;               /* le fond de page */
  --fond-alt:#1b1f25;           /* la bande de contact */
  --carte:#242931;              /* les panneaux posés sur le fond */
  --module:#d8dade;             /* le corps d'un disjoncteur : gris clair */
  --module-joint:#a9aeb4;       /* la couture entre deux modules */
  --rail:#8f979f;               /* le profilé métal */
  --creme:#f3f1e9;              /* texte sur les surfaces sombres */
  --creme-doux:#b3b1a6;
  --marque:#f5c518;             /* LE jaune — sa demande du 01.08.2026 */
  --marque-clair:#ffdb55;
  --filet:#31353d;
  --papier:#f0ede4;             /* la seule bande claire : l'avis, le rapport */
  --encre:#14171c;              /* texte sur le papier et sur les modules */
  --encre-douce:#4e545d;
  --texte-bouton:#14171c;       /* sur le jaune */
  --wa:#25d366;

  --barre:color-mix(in srgb,var(--nuit) 85%,transparent);
  --barre-filet:color-mix(in srgb,var(--creme) 16%,transparent);

  --police-titre:'PoliceTitre',"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --police-libelle:'PoliceLibelle',"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --police-texte:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --rayon:4px;
  --rayon-bouton:10px;
  --filet-ep:1px;
  --assise:3px;
  --pas:14px;                   /* LE PAS DU MODULE — le décor unique */
  --largeur:1120px;
  --gouttiere:clamp(1rem,3vw,2rem);
  --zone:clamp(1.5rem,4vw,2.5rem);      /* 24 → 40 px */
  --section:clamp(3rem,7vw,5rem);       /* 48 → 80 px, la même partout */
  --hauteur-bandeau:78svh;
}

:root{
  --ombre:0 1px 2px color-mix(in srgb,var(--nuit) 24%,transparent),
          0 12px 28px color-mix(in srgb,var(--nuit) 38%,transparent);
  --ombre-haute:0 1px 2px color-mix(in srgb,var(--nuit) 24%,transparent),
          0 18px 40px color-mix(in srgb,var(--nuit) 50%,transparent);
  --lumiere:inset 0 1px 0 rgba(255,255,255,.10);
  --lumiere-clair:inset 0 1px 0 rgba(255,255,255,.85);
  --nuit-haut:color-mix(in srgb,var(--nuit) 92%,white);
  --fond-haut:color-mix(in srgb,var(--fond) 92%,white);
  --fond-alt-haut:color-mix(in srgb,var(--fond-alt) 92%,white);
  --carte-haut:color-mix(in srgb,var(--carte) 92%,white);
  --module-bas:color-mix(in srgb,var(--module) 92%,var(--nuit));
  --papier-bas:color-mix(in srgb,var(--papier) 92%,var(--nuit));
  --marque-haut:color-mix(in srgb,var(--marque) 92%,white);
  --marque-bas:color-mix(in srgb,var(--marque) 92%,var(--nuit));
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--police-texte);
  font-size:clamp(1rem,.95rem + .2vw,1.06rem);
  line-height:1.62;
  color:var(--creme);
  -webkit-font-smoothing:antialiased;

  background-color:var(--fond);
  position:relative;
}

body::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  --goutte:max(0px,calc((100vw - var(--largeur)) / 2));
  background-image:
    radial-gradient(36% 5.5% at 10% 2.5%,rgba(247,243,235,.10) 0,transparent 74%),
    radial-gradient(36% 5.5% at 10% 2.5%,rgba(4,6,9,.10) 0,transparent 74%),
    radial-gradient(30% 4.5% at 88% 9%,rgba(247,243,235,.10) 0,transparent 74%),
    radial-gradient(30% 4.5% at 88% 9%,rgba(4,6,9,.10) 0,transparent 74%),
    radial-gradient(42% 6% at 31% 17%,rgba(247,243,235,.10) 0,transparent 74%),
    radial-gradient(42% 6% at 31% 17%,rgba(4,6,9,.10) 0,transparent 74%),
    radial-gradient(28% 5% at 92% 26%,rgba(247,243,235,.10) 0,transparent 74%),
    radial-gradient(28% 5% at 92% 26%,rgba(4,6,9,.10) 0,transparent 74%),
    radial-gradient(38% 5.5% at 15% 34%,rgba(247,243,235,.10) 0,transparent 74%),
    radial-gradient(38% 5.5% at 15% 34%,rgba(4,6,9,.10) 0,transparent 74%),
    radial-gradient(34% 5% at 70% 42%,rgba(247,243,235,.10) 0,transparent 74%),
    radial-gradient(34% 5% at 70% 42%,rgba(4,6,9,.10) 0,transparent 74%),
    radial-gradient(40% 6% at 24% 51%,rgba(247,243,235,.10) 0,transparent 74%),
    radial-gradient(40% 6% at 24% 51%,rgba(4,6,9,.10) 0,transparent 74%),
    radial-gradient(26% 4.5% at 90% 59%,rgba(247,243,235,.10) 0,transparent 74%),
    radial-gradient(26% 4.5% at 90% 59%,rgba(4,6,9,.10) 0,transparent 74%),
    radial-gradient(44% 6% at 46% 67%,rgba(247,243,235,.10) 0,transparent 74%),
    radial-gradient(44% 6% at 46% 67%,rgba(4,6,9,.10) 0,transparent 74%),
    radial-gradient(32% 5% at 12% 76%,rgba(247,243,235,.10) 0,transparent 74%),
    radial-gradient(32% 5% at 12% 76%,rgba(4,6,9,.10) 0,transparent 74%),
    radial-gradient(36% 5.5% at 78% 84%,rgba(247,243,235,.10) 0,transparent 74%),
    radial-gradient(36% 5.5% at 78% 84%,rgba(4,6,9,.10) 0,transparent 74%),
    radial-gradient(42% 6% at 38% 94%,rgba(247,243,235,.10) 0,transparent 74%),
    radial-gradient(42% 6% at 38% 94%,rgba(4,6,9,.10) 0,transparent 74%);
  background-size:100% 100%;
  background-position:left top;
  background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(90deg,#000 0,
    rgba(0,0,0,.92) var(--goutte),rgba(0,0,0,.11) 46%,
    rgba(0,0,0,.11) 54%,rgba(0,0,0,.92) calc(100% - var(--goutte)),#000 100%);
  mask-image:linear-gradient(90deg,#000 0,
    rgba(0,0,0,.92) var(--goutte),rgba(0,0,0,.11) 46%,
    rgba(0,0,0,.11) 54%,rgba(0,0,0,.92) calc(100% - var(--goutte)),#000 100%);
}

img,svg{max-width:100%;height:auto;display:block}
figure{margin:0;max-width:100%}      /* une image cassée ne fait pas déborder */

h1,h2,h3{font-family:var(--police-titre);font-weight:600;line-height:1.12;
  margin:0 0 .5em;text-wrap:balance;letter-spacing:-.015em}
p{margin:0 0 1rem}
a{color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
dl,dd,dt{margin:0}

.plaque__no,.tableau dd,.poste__no,.module__no,.etape__pastille,
.jalon,.marque__sous{
  font-family:var(--police-libelle);
  font-variant-numeric:lining-nums tabular-nums;
}

.colonne{width:100%;max-width:var(--largeur);margin-inline:auto;
  padding-inline:var(--gouttiere)}

.evite{position:absolute;left:0;top:0;z-index:60;
  background:var(--marque);color:var(--texte-bouton);
  padding:.75rem 1rem;text-decoration:none;
  border-radius:0 0 var(--rayon) 0;
  transform:translateY(-150%)}
.evite:focus{transform:none}

:where(a,button):focus-visible{outline:3px solid var(--marque);outline-offset:2px}

.ruban{
  margin:0;padding:.55rem var(--gouttiere);
  background:var(--nuit);color:var(--creme-doux);
  font-family:var(--police-libelle);font-size:.78rem;
  letter-spacing:.04em;text-align:center;
}
.ruban a{color:var(--marque-clair)}

.haut{position:sticky;top:0;z-index:40}
.nav{
  background:var(--barre);
  border-bottom:var(--filet-ep) solid var(--barre-filet);
  box-shadow:var(--lumiere),0 12px 28px color-mix(in srgb,var(--nuit) 38%,transparent);
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .nav{-webkit-backdrop-filter:blur(16px) saturate(1.15);
    backdrop-filter:blur(16px) saturate(1.15)}
}
.nav__dedans{
  width:100%;max-width:var(--largeur);margin-inline:auto;
  padding:.5rem var(--gouttiere);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.marque{text-decoration:none;display:block;padding:.25rem 0;min-height:44px}
.marque__nom{display:block;font-family:var(--police-titre);font-size:1.06rem;
  letter-spacing:.01em;color:var(--creme)}
.marque__sous{display:block;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--marque-clair)}

#nav-toggle{
  width:44px;height:44px;display:grid;place-content:center;gap:5px;
  background:none;border:var(--filet-ep) solid var(--barre-filet);
  border-radius:var(--rayon-bouton);cursor:pointer;
  transition:background-color .24s ease,border-color .24s ease;
}
#nav-toggle:hover{background:color-mix(in srgb,var(--creme) 9%,transparent);
  border-color:var(--marque-clair)}
.nav-toggle__trait{display:block;width:20px;height:2px;background:var(--creme)}

#nav-links{display:flex;align-items:center;gap:.25rem 1.25rem;flex-wrap:wrap}
#nav-links a{
  display:inline-flex;align-items:center;min-height:44px;padding:.25rem .25rem;
  font-family:var(--police-libelle);font-size:.86rem;letter-spacing:.03em;
  color:var(--creme);text-decoration:none;
  border-bottom:2px solid transparent;transition:color .22s ease,border-color .22s ease;
}
#nav-links a:hover{color:var(--marque-clair);border-bottom-color:var(--marque-clair)}
#nav-links a.btn{border-bottom:0}
#nav-links a.btn:hover{color:var(--texte-bouton)}

@media (max-width:61.99rem){
  #nav-toggle{order:2}
  #nav-links{display:none;order:3;flex-basis:100%;flex-direction:column;
    align-items:stretch;gap:0;padding-bottom:.5rem}
  #nav-links.is-open{display:flex}
  #nav-links li{border-top:var(--filet-ep) solid var(--barre-filet)}
  #nav-links a{padding:.6rem .25rem;border-bottom:0}
  #nav-links a.btn{margin-top:.75rem;justify-content:center}
  html:not(.js) #nav-toggle{display:none}
  html:not(.js) #nav-links{display:flex}
}
@media (min-width:62rem){ #nav-toggle{display:none} }

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:44px;padding:.7rem 1.25rem;
  font-family:var(--police-libelle);font-size:.9rem;letter-spacing:.02em;
  text-decoration:none;border-radius:var(--rayon-bouton);
  border:var(--filet-ep) solid transparent;cursor:pointer;
  transition:background-image .24s ease,box-shadow .24s ease,transform .24s ease,
    border-color .24s ease,color .24s ease;
}
.btn--plein{
  background-image:linear-gradient(180deg,var(--marque-haut) 0%,var(--marque) 100%);
  color:var(--texte-bouton);box-shadow:var(--lumiere-clair),var(--ombre);
}
.btn--plein:hover{background-image:linear-gradient(180deg,var(--marque) 0%,var(--marque-bas) 100%);
  box-shadow:var(--lumiere-clair),var(--ombre-haute)}
.btn--grand{padding:.95rem 1.5rem;font-size:1rem}
.btn--ligne{
  color:var(--creme);border-color:rgba(255,255,255,.28);
  background-image:linear-gradient(180deg,
    color-mix(in srgb,var(--creme) 8%,transparent) 0%,
    color-mix(in srgb,var(--creme) 4%,transparent) 100%);
}
.btn--ligne:hover{border-color:var(--marque-clair);color:var(--marque-clair)}
.btn--wa{background-image:linear-gradient(180deg,
    color-mix(in srgb,var(--wa) 92%,white) 0%,var(--wa) 100%);
  color:#0b2b16;box-shadow:var(--lumiere-clair),var(--ombre)}
.btn--wa:hover{box-shadow:var(--lumiere-clair),var(--ombre-haute)}

.jalon{
  display:inline-block;margin:0 0 .6rem;
  font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--encre-douce);
}
.jalon::before{
  content:'';display:inline-block;width:22px;height:var(--assise);
  margin-right:.6rem;vertical-align:.22em;background:var(--encre);
}
.jalon--sombre{color:var(--creme-doux)}
.jalon--sombre::before{background:var(--marque)}

.titre2{font-size:clamp(1.7rem,1.2rem + 2.2vw,2.6rem);margin-bottom:.5em;
  color:var(--encre)}
.titre2--clair{color:var(--creme)}
.para{color:var(--encre-douce);max-width:60ch}
.para--clair{color:var(--creme-doux)}
.para--large{max-width:68ch}

.bandeau,.departs,.travaux,.controle,.geste,.chantiers,.contact,.pied{position:relative}
.bandeau::after,.departs::after,.travaux::after,.controle::after,.geste::after,
.chantiers::after,.contact::after,.pied::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  --goutte:max(0px,calc((100% - var(--largeur)) / 2));
  --joue-masque:linear-gradient(90deg,#000 0,
    rgba(0,0,0,.92) var(--goutte),
    rgba(0,0,0,.09) 46%,
    rgba(0,0,0,.09) 54%,
    rgba(0,0,0,.92) calc(100% - var(--goutte)),#000 100%);
  background-image:none;
}
main > section,.pied{--joue-onde:transparent;--joue-onde-basse:transparent}

.departs,.travaux,.geste,.contact,.pied{
  --joue-fond:color-mix(in srgb,var(--creme) 9%,transparent);
  --joue-trait:color-mix(in srgb,var(--creme) 7%,transparent);
  --joue-onde:color-mix(in srgb,var(--creme) 5.5%,transparent);
  --joue-onde-basse:color-mix(in srgb,var(--creme) 3.5%,transparent);
  --joue-arete:rgba(4,6,9,.44);
}
.controle{
  --joue-fond:color-mix(in srgb,var(--nuit) 13%,transparent);
  --joue-trait:color-mix(in srgb,var(--nuit) 5%,transparent);
  --joue-onde:color-mix(in srgb,var(--nuit) 6%,transparent);
  --joue-onde-basse:color-mix(in srgb,var(--nuit) 4%,transparent);
  --joue-arete:rgba(255,255,255,.56);
}
.chantiers,.bandeau{
  --joue-fond:color-mix(in srgb,var(--creme) 7%,transparent);
  --joue-trait:transparent;
  --joue-onde:transparent;
  --joue-onde-basse:transparent;
  --joue-arete:transparent;
}
.departs__tete,.departs .colonne,.travaux__grille,.controle .colonne,
.geste .colonne,.chantiers .colonne,.contact .colonne,.pied__dedans{
  position:relative;z-index:1}

.peigne{
  display:block;width:100%;height:8px;
  background-image:
    linear-gradient(var(--marque),var(--marque)),
    repeating-linear-gradient(90deg,var(--marque) 0 2px,transparent 2px var(--pas));
  background-size:100% 3px,100% 8px;
  background-position:left top,left top;
  background-repeat:no-repeat;
}

.bandeau{
  position:relative;
  min-height:var(--hauteur-bandeau);
  display:flex;align-items:flex-end;
  padding:calc(var(--section) + 1rem) 0 calc(var(--section) + 1.5rem);
  background:var(--nuit);
}
.bandeau__fond{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  object-position:50% 44%;
}
.bandeau__voile{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--nuit) 42%,transparent) 0%,
    color-mix(in srgb,var(--nuit) 84%,transparent) 100%);
}
.signature--bandeau{position:absolute;inset:0;z-index:1;overflow:hidden;
  pointer-events:none;
}
.signature--bandeau svg{display:block;width:100%;height:100%}
.circuit .piste{fill:none;stroke:var(--marque);stroke-width:2;
  stroke-linecap:square;stroke-linejoin:miter}
.circuit .pad{fill:none;stroke:var(--marque);stroke-width:2.4}
.circuit .borne-nue{fill:none;stroke:var(--marque);stroke-width:2}
.circuit--hero .circuit__reseau{opacity:.34}
.circuit--hero .piste--vive{stroke:var(--marque-clair);stroke-width:2.6;
  stroke-linecap:round;opacity:.85;
  stroke-dasharray:130 1200;stroke-dashoffset:1330;
  animation:elec-impulsion 6.5s linear infinite}
@keyframes elec-impulsion{from{stroke-dashoffset:1330}to{stroke-dashoffset:-140}}
@media (prefers-reduced-motion:reduce){
  .circuit--hero .piste--vive{animation:none;stroke-dasharray:none;
    stroke-dashoffset:0;opacity:.55}
}
.bandeau__dedans{position:relative;z-index:2}
.bandeau .peigne{position:absolute;left:0;right:0;bottom:0;z-index:3}

.verre{
  position:relative;max-width:44rem;
  padding:var(--zone);
  padding-left:calc(var(--zone) + 1rem);
  background:color-mix(in srgb,var(--nuit) 86%,transparent);
  border:var(--filet-ep) solid rgba(255,255,255,.14);
  border-radius:var(--rayon);
  box-shadow:var(--lumiere),var(--ombre);
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .verre{-webkit-backdrop-filter:blur(16px) saturate(1.15);
    backdrop-filter:blur(16px) saturate(1.15)}
}
.verre::after{
  content:'';position:absolute;left:0;right:0;top:0;height:40%;
  pointer-events:none;border-radius:var(--rayon) var(--rayon) 0 0;
  background:linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,0) 100%);
}
.rail-marque{
  position:absolute;left:0;top:0;bottom:0;width:6px;
  border-radius:var(--rayon) 0 0 var(--rayon);
  background-color:var(--marque);
  background-image:repeating-linear-gradient(180deg,
    color-mix(in srgb,var(--nuit) 60%,transparent) 0 2px,
    transparent 2px var(--pas));
}

.bandeau__titre{
  margin:0 0 .8rem;color:var(--creme);
  font-size:clamp(2.1rem,1.3rem + 4.2vw,3.9rem);line-height:1.06;
}
.bandeau__titre span{display:block}
.bandeau__accent{
  color:var(--marque-clair);
  background-color:#ffdb55;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .bandeau__accent{-webkit-text-fill-color:currentColor}
}
.bandeau__intro{color:var(--creme-doux);max-width:46ch;margin-bottom:1.5rem}
.bandeau__actes{display:flex;flex-wrap:wrap;gap:.75rem}

.departs{
  padding-top:var(--section);
  padding-bottom:calc(var(--section) + 3rem);   /* le panneau des travaux remonte ici */
  background-color:var(--fond);
}
.departs__tete{display:grid;gap:var(--zone);align-items:start;
  padding-bottom:var(--zone)}
.departs__photo{aspect-ratio:3 / 2}

.departs__rangee{display:grid;gap:var(--zone);align-items:end}
.modules{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:0;row-gap:16px}
.module{position:relative;padding-top:11px;text-align:center}
.module::before{
  content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--marque);transform-origin:left;
}
.module::after{
  content:'';position:absolute;left:0;right:0;top:3px;height:8px;
  background-image:linear-gradient(180deg,
    color-mix(in srgb,var(--rail) 92%,white) 0%,var(--rail) 100%);
}
.module__corps{
  position:relative;display:block;
  height:clamp(104px,13vw,146px);
  background-image:linear-gradient(180deg,var(--module) 0%,var(--module-bas) 100%);
  border-right:var(--filet-ep) solid var(--module-joint);
  box-shadow:var(--lumiere-clair);
}
.module:last-child .module__corps{border-right:0}
.module__fente{
  position:absolute;left:50%;top:20px;margin-left:-9px;
  width:18px;height:36px;background:var(--nuit);
  box-shadow:inset 0 1px 0 rgba(0,0,0,.5);
}
.module__manette{
  position:absolute;left:2px;right:2px;top:2px;height:16px;
  background:var(--creme);
}
.module--general .module__manette{background:var(--marque)}
.module__no{
  position:absolute;left:0;right:0;bottom:6px;
  font-size:.6rem;letter-spacing:.08em;color:var(--encre-douce);
}
.module__quoi{
  display:block;padding:8px 2px 0;
  font-family:var(--police-libelle);font-size:clamp(.55rem,1.5vw,.62rem);
  line-height:1.25;letter-spacing:.03em;
  text-transform:uppercase;color:var(--creme-doux);
}
.departs__legende{
  margin:var(--zone) 0 0;color:var(--creme-doux);max-width:62ch;font-size:.95rem;
}

.travaux{padding:0 0 var(--section)}
.travaux__grille{display:grid;gap:var(--zone);align-items:start}
.panneau{
  position:relative;margin-top:calc(-1 * var(--section));
  background-image:linear-gradient(180deg,var(--carte-haut) 0%,var(--carte) 100%);
  padding:var(--zone);
  border-radius:var(--rayon);
  border-top:var(--assise) solid var(--marque);
  box-shadow:var(--lumiere),var(--ombre);
}
.postes{margin-top:var(--zone);display:grid;gap:0}
.poste{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:.25rem 1rem;align-items:baseline;
  padding:1rem 0;
  border-top:var(--filet-ep) solid var(--filet);
}
.poste:first-child{border-top:0;padding-top:0}
.poste__no{
  font-size:.78rem;letter-spacing:.1em;color:var(--creme-doux);
  padding-top:.35rem;
}
.poste h3{grid-column:2;margin:0 0 .25rem;font-size:1.16rem;color:var(--creme)}
.poste p{grid-column:2;margin:0;color:var(--creme-doux);font-size:.95rem}

.cadre{
  position:relative;overflow:hidden;border-radius:var(--rayon);
  box-shadow:var(--lumiere),var(--ombre);
}
.cadre img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.travaux__photo{aspect-ratio:4 / 3}

.controle{
  padding-block:var(--section);
  background-color:var(--papier);
  border-top:var(--assise) solid var(--nuit);
  border-bottom:var(--assise) solid var(--nuit);
  color:var(--encre);
}
.etapes{
  position:relative;display:grid;gap:var(--zone);
  margin:var(--section) 0 var(--zone);
}
.etapes::before{
  content:'';position:absolute;pointer-events:none;
  left:19px;top:20px;bottom:20px;width:2px;
  background-image:repeating-linear-gradient(180deg,
    color-mix(in srgb,var(--encre) 42%,transparent) 0 7px,
    transparent 7px var(--pas));
}
.etape{
  display:grid;grid-template-columns:40px minmax(0,1fr);gap:0 16px;
  align-items:start;
}
.etape__pastille{
  grid-row:1 / span 2;position:relative;z-index:1;
  display:grid;place-content:center;
  width:40px;height:40px;border-radius:50%;
  background:var(--nuit);color:var(--creme);
  font-size:.8rem;letter-spacing:.04em;
  box-shadow:var(--ombre);
}
.etape--nous .etape__pastille{background:var(--marque);color:var(--texte-bouton)}
.etape__nom{grid-column:2;margin:0 0 .3rem;font-size:1.12rem;color:var(--encre)}
.etape__texte{grid-column:2;margin:0;color:var(--encre-douce);font-size:.95rem}
.controle__note{
  margin:0;color:var(--encre-douce);max-width:64ch;font-size:.92rem;
  padding-top:1.5rem;border-top:var(--filet-ep) solid color-mix(in srgb,var(--encre) 18%,transparent);
}

.geste{
  padding-block:var(--section);
  background-color:var(--fond);
}
.geste::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(58% 68% at 26% 0%,
    color-mix(in srgb,var(--marque) 6%,transparent) 0%,
    color-mix(in srgb,var(--marque) 0%,transparent) 70%);
}
.enfouis{
  display:grid;gap:var(--zone);
  margin-top:var(--section);
  grid-template-columns:minmax(0,1fr);
}
.enfoui{
  padding-top:1rem;
  border-top:var(--assise) solid color-mix(in srgb,var(--marque) 45%,transparent);
}
.enfoui__nom{margin:0 0 .35rem;color:var(--creme);font-size:1.12rem}
.enfoui__texte{margin:0;color:var(--creme-doux);font-size:.95rem}

.paire{display:grid;gap:var(--zone);margin-top:var(--section);align-items:end}
.paire__large{aspect-ratio:4 / 3}
.paire__haute{aspect-ratio:3 / 4}

.chantiers{padding-top:var(--section)}
.chantiers .colonne{padding-bottom:var(--zone)}
.chantiers .titre2{color:var(--creme)}
.chantiers .jalon{color:var(--creme-doux)}
.chantiers .jalon::before{background:var(--marque)}
.bandes{display:grid;gap:2px;background:var(--fond)}
.bandes__une{
  overflow:hidden;background:var(--nuit);
}
.bandes__une img{
  width:100%;height:clamp(180px,22vw,290px);object-fit:cover;
  object-position:center 45%;
}
.bandes__une:nth-child(2) img{object-position:center 40%}
.bandes__une:nth-child(3) img{object-position:center 35%}

.contact{
  padding-block:var(--section);
  background-color:var(--fond);
  border-top:var(--assise) solid var(--marque);
}
.contact__deux{display:grid;gap:var(--zone);margin-top:var(--zone);align-items:start}
.carte{
  background-image:linear-gradient(180deg,var(--carte-haut) 0%,var(--carte) 100%);
  padding:var(--zone);border-radius:var(--rayon);
  box-shadow:var(--lumiere),var(--ombre);
}
.fiche__titre{
  margin:0 0 1rem;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  font-family:var(--police-libelle);color:var(--creme-doux);
}

.plaques{display:grid;gap:.75rem;margin-bottom:1.25rem}
.plaque{
  display:block;min-height:56px;padding:.6rem 1rem;
  text-decoration:none;border-radius:var(--rayon-bouton);
  border:var(--filet-ep) solid color-mix(in srgb,var(--creme) 20%,transparent);
  color:var(--creme);
  transition:background-color .24s ease,box-shadow .24s ease,transform .24s ease;
}
.plaque__quoi{display:block;font-family:var(--police-libelle);
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--creme-doux)}
.plaque__no{display:block;font-size:1.24rem;letter-spacing:.01em}
.plaque--appel{
  background-image:linear-gradient(180deg,var(--marque-haut) 0%,var(--marque) 100%);
  border-color:transparent;color:var(--texte-bouton);
  box-shadow:var(--lumiere-clair),var(--ombre);
}
.plaque--appel .plaque__quoi{color:var(--texte-bouton);opacity:.78}
.plaque--appel:hover{box-shadow:var(--lumiere-clair),var(--ombre-haute)}
.plaque:not(.plaque--appel):hover{background-color:color-mix(in srgb,var(--creme) 7%,transparent)}

.tableau{display:grid}
.tableau__ligne{
  display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:.25rem 1rem;
  padding:.5rem .5rem;border-top:var(--filet-ep) dotted var(--filet);
}
.tableau__ligne:first-child{border-top:0}
.tableau dt{font-family:var(--police-libelle);font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--creme-doux);padding-top:.15rem}
.tableau dd{color:var(--creme)}
.tableau dd a{display:inline-block;padding-block:.2rem;
  text-decoration:none;border-bottom:var(--filet-ep) solid var(--filet)}
.tableau dd a:hover{border-bottom-color:var(--marque)}
.tableau--horaires .tableau__ligne--ferme dd{color:var(--creme-doux)}
.tableau__ligne--aujourdhui{background:color-mix(in srgb,var(--marque) 12%,transparent);
  border-radius:var(--rayon)}
.tableau__aujourdhui{
  display:inline-block;margin-left:.5rem;padding:.05rem .4rem;
  font-family:var(--police-libelle);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--texte-bouton);background:var(--marque);
  border-radius:var(--rayon);
}
@media (max-width:26rem){
  .tableau__ligne{grid-template-columns:minmax(0,1fr)}
}

.pied{
  background-color:var(--fond);
  color:var(--creme-doux);
}
.pied .peigne{position:absolute;left:0;right:0;top:0;z-index:1}
.pied__dedans{padding-block:var(--section)}
.pied__nom{margin:0;font-family:var(--police-titre);font-size:1.5rem;color:var(--creme)}
.pied__lieu{margin:.15rem 0 1.25rem;font-family:var(--police-libelle);
  font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--marque-clair)}
.pied__demo{margin:0;padding-top:1.25rem;font-size:.82rem;
  border-top:var(--filet-ep) solid color-mix(in srgb,var(--creme) 16%,transparent)}
.pied__demo a{color:var(--marque-clair)}

.js .reveal{opacity:0;transform:translateY(14px);
  transition:opacity .6s ease,transform .6s ease;
  transition-delay:calc(var(--i,0) * 80ms)}
.js .reveal.est-vu{opacity:1;transform:none}

.js .module.reveal{opacity:1;transform:none;transition:none}
.js .module::before{transform:scaleX(0)}
.js .module.est-vu::before{transform:none;
  transition:transform .45s ease calc(var(--i,0) * 30ms)}
.js .module .module__manette{transform:translateY(16px)}
.js .module.est-vu .module__manette{transform:none;
  transition:transform .34s cubic-bezier(.34,1.15,.64,1) calc(var(--i,0) * 30ms + 100ms)}

.js .module .module__quoi{color:color-mix(in srgb,var(--creme-doux) 24%,transparent)}
.js .module .module__no{color:color-mix(in srgb,var(--encre-douce) 26%,transparent)}
.js .module.est-allume .module__quoi{
  animation:elec-allumage .62s ease calc(var(--i,0) * 30ms + 220ms) both}
.js .module.est-allume .module__no{
  animation:elec-allumage-no .5s ease calc(var(--i,0) * 30ms + 220ms) both}
@keyframes elec-allumage{
  0%{color:color-mix(in srgb,var(--creme-doux) 24%,transparent);text-shadow:none}
  40%{color:var(--marque-clair);
      text-shadow:0 0 12px color-mix(in srgb,var(--marque) 50%,transparent)}
  100%{color:var(--creme-doux);text-shadow:none}
}
@keyframes elec-allumage-doux{
  0%{color:color-mix(in srgb,var(--creme-doux) 24%,transparent)}
  100%{color:var(--creme-doux)}
}
@keyframes elec-allumage-no{
  0%{color:color-mix(in srgb,var(--encre-douce) 26%,transparent)}
  100%{color:var(--encre-douce)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{transform:none;transition:opacity .5s ease}
  .js .reveal.est-vu{transform:none}
  .js .module::before,
  .js .module.est-vu::before{transform:none;transition:none}
  .js .module .module__manette,
  .js .module.est-vu .module__manette{transform:none;transition:none}
  .js .module.est-allume .module__quoi{
    animation:elec-allumage-doux .7s ease calc(var(--i,0) * 30ms + 220ms) both}
  .cadre,.plaque,.btn,.bandes__une img{transition:box-shadow .24s ease,background-color .24s ease}
}

@media (min-width:34rem){          /* 544 px */
  .enfouis{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--section)}
  .plaques{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bandes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:48rem){          /* 768 px — iPad portrait */
  .paire{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:stretch}
  .paire__haute{position:relative;aspect-ratio:auto}
  .paire__haute img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .modules{grid-template-columns:repeat(8,minmax(0,1fr))}
  .etapes{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--zone)}
  .etapes::before{
    left:20px;right:calc((100% - 3 * var(--zone)) / 4 - 20px);
    top:19px;bottom:auto;width:auto;height:2px;
    background-image:repeating-linear-gradient(90deg,
      color-mix(in srgb,var(--encre) 42%,transparent) 0 7px,
      transparent 7px var(--pas));
  }
  .etape{display:block}
  .etape__pastille{margin-bottom:16px}
}
@media (min-width:62rem){          /* 992 px — le trou 761-1000 est couvert */
  .departs__tete{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
    gap:var(--section)}
  .travaux__grille{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
    gap:var(--section)}
  .travaux__photo{margin-top:var(--section)}
  .contact__deux{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
    gap:var(--section)}
  .verre{padding:calc(var(--zone) + .5rem);
    padding-left:calc(var(--zone) + 1.5rem)}
}

@media (max-width:600px){
  .bandeau{display:block;min-height:0;padding:0 0 calc(var(--section) + 1.5rem)}
  .bandeau__fond{position:relative;height:40vh;max-height:330px}
  .bandeau__voile{inset:0 0 auto 0;height:40vh;max-height:330px}
  .signature--bandeau{inset:0 0 auto 0;height:40vh;max-height:330px}
  .bandeau__dedans{margin-top:-26px}
}

.haut .nav{background-color:rgba(11,13,17,0.76)}
.haut{margin-bottom:-71px}

#nav-links a.btn.btn--plein{color:#0b0d11}