@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:600;
  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:#0c161b;               /* le local technique, la cave, le pied */
  --encre:#141d22;              /* texte courant */
  --encre-douce:#425058;        /* texte secondaire — jamais plus clair */
  --fond:#e8eef0;               /* gris d'eau, froid */
  --fond-alt:#d5e2e6;           /* le second niveau : la bande de contact */
  --carte:#ffffff;
  --marque:#0c5163;             /* bleu profond : boutons, plaques, repères */
  --marque-fonce:#083b48;       /* survol des boutons */
  --filet:#c2ced3;
  --creme:#eef4f5;              /* texte sur les surfaces sombres */
  --creme-doux:#aebcc2;         /* ⛔ jamais sur --marque : 4,54 / 4,09 */
  --texte-bouton:#ffffff;
  --wa:#25d366;

  --laiton:#c8804a;             /* le chaud, sur surface sombre */
  --laiton-clair:#dda071;       /* le chaud, en plein sur du nuit */
  --laiton-fonce:#8f5323;       /* le chaud, sur surface claire */
  --eau:#7cc0d6;                /* le froid, sur surface sombre */
  --eau-clair:#b8e0eb;          /* le froid, en plein sur du nuit */
  --eau-fonce:#17607a;          /* le froid, sur surface claire */
  --patine:#3f7f6f;

  --tube-cuivre-couche:linear-gradient(180deg,
    #46240f 0%, #7a4520 12%, #c8804a 27%, #f0c39b 38%,
    #c8804a 39%, #a3652f 62%, #6d3a17 86%, #3a1d0c 100%);
  --tube-cuivre-debout:linear-gradient(90deg,
    #46240f 0%, #7a4520 12%, #c8804a 27%, #f0c39b 38%,
    #c8804a 39%, #a3652f 62%, #6d3a17 86%, #3a1d0c 100%);
  --tube-eau-couche:linear-gradient(180deg,
    #06222c 0%, #12556c 12%, #7cc0d6 27%, #e2f2f8 38%,
    #7cc0d6 39%, #3a8ba5 62%, #12556c 86%, #06222c 100%);
  --tube-eau-debout:linear-gradient(90deg,
    #06222c 0%, #12556c 12%, #7cc0d6 27%, #e2f2f8 38%,
    #7cc0d6 39%, #3a8ba5 62%, #12556c 86%, #06222c 100%);

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

  --police-titre:'PoliceTitre',Rockwell,"Roboto Slab",Georgia,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:12px;
  --rayon-bouton:10px;
  --rayon-pilule:999px;
  --filet-ep:1px;
  --assise:3px;
  --coiffe:6px;                 /* la hauteur d'un tube qui coiffe un panneau */
  --gaine-chaud:color-mix(in srgb,var(--laiton-fonce) 10%,transparent);
  --gaine-froid:color-mix(in srgb,var(--eau-fonce) 9%,transparent);
  --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, le pas courant */
  --section-serre:clamp(2rem,4vw,2.75rem);  /* 32 → 44 px */
  --section-large:clamp(3.75rem,9vw,6.5rem);/* 60 → 104 px */
  --hauteur-bandeau:74svh;
}

:root{
  --ombre:0 1px 2px color-mix(in srgb,var(--nuit) 8%,transparent),
          0 12px 28px color-mix(in srgb,var(--nuit) 14%,transparent);
  --ombre-haute:0 1px 2px color-mix(in srgb,var(--nuit) 8%,transparent),
          0 18px 40px color-mix(in srgb,var(--nuit) 20%,transparent);
  --lumiere:inset 0 1px 0 rgba(255,255,255,.10);
  --lumiere-clair:inset 0 1px 0 rgba(255,255,255,.9);
  --fond-bas:color-mix(in srgb,var(--fond) 92%,var(--nuit));
  --fond-alt-bas:color-mix(in srgb,var(--fond-alt) 92%,var(--nuit));
  --nuit-haut:color-mix(in srgb,var(--nuit) 92%,white);
  --marque-haut:color-mix(in srgb,var(--marque) 96%,white);
}

*,*::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(--encre);
  -webkit-font-smoothing:antialiased;

  background-color:var(--fond);
  background-image:
    linear-gradient(90deg,
      transparent 0 4%,
      var(--gaine-chaud) 4% calc(4% + 1px),
      transparent calc(4% + 1px) calc(4% + 6px),
      var(--gaine-froid) calc(4% + 6px) calc(4% + 7px),
      transparent calc(4% + 7px) 13%,
      var(--gaine-chaud) 13% calc(13% + 1px),
      transparent calc(13% + 1px) calc(13% + 6px),
      var(--gaine-froid) calc(13% + 6px) calc(13% + 7px),
      transparent calc(13% + 7px) 27%,
      var(--gaine-chaud) 27% calc(27% + 1px),
      transparent calc(27% + 1px) calc(27% + 6px),
      var(--gaine-froid) calc(27% + 6px) calc(27% + 7px),
      transparent calc(27% + 7px) 38%,
      var(--gaine-chaud) 38% calc(38% + 1px),
      transparent calc(38% + 1px) calc(38% + 6px),
      var(--gaine-froid) calc(38% + 6px) calc(38% + 7px),
      transparent calc(38% + 7px) 56%,
      var(--gaine-chaud) 56% calc(56% + 1px),
      transparent calc(56% + 1px) calc(56% + 6px),
      var(--gaine-froid) calc(56% + 6px) calc(56% + 7px),
      transparent calc(56% + 7px) 71%,
      var(--gaine-chaud) 71% calc(71% + 1px),
      transparent calc(71% + 1px) calc(71% + 6px),
      var(--gaine-froid) calc(71% + 6px) calc(71% + 7px),
      transparent calc(71% + 7px) 88%,
      var(--gaine-chaud) 88% calc(88% + 1px),
      transparent calc(88% + 1px) calc(88% + 6px),
      var(--gaine-froid) calc(88% + 6px) calc(88% + 7px),
      transparent calc(88% + 7px) 100%);
  background-size:100% 100%;
  background-repeat:no-repeat;
  background-attachment:scroll;
}

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.14;
  margin:0 0 .5em;text-wrap:balance;letter-spacing:-.005em}
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,.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(--eau-fonce);outline-offset:2px}

.ruban{
  margin:0;padding:.55rem var(--gouttiere);
  background:var(--marque);color:var(--creme);
  font-family:var(--police-libelle);font-size:.78rem;
  letter-spacing:.04em;text-align:center;
}
.ruban a,.pied__demo a{display:inline-block;padding:4px 5px;margin:-4px 0}
.ruban a{color:var(--eau-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) 14%,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(--eau-clair)}

#nav-toggle{
  width:44px;height:44px;display:grid;place-content:center;gap:4px;
  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(--eau-clair)}
.nav-toggle__trait{display:block;width:22px;height:5px;
  border-radius:var(--rayon-pilule);
  background-image:var(--tube-eau-couche)}

#nav-links{display:flex;align-items:center;gap:.25rem 1.1rem;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:.84rem;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(--eau-clair);border-bottom-color:var(--eau-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.4rem;
  font-family:var(--police-libelle);font-size:.9rem;letter-spacing:.02em;
  text-decoration:none;border-radius:var(--rayon-pilule);
  border:var(--filet-ep) solid transparent;cursor:pointer;
  transition:background-color .24s ease,box-shadow .24s ease,transform .24s ease;
}
.btn--plein{
  background-image:linear-gradient(180deg,var(--marque-haut) 0%,var(--marque) 100%);
  color:var(--texte-bouton);box-shadow:var(--lumiere),var(--ombre);
}
.btn--plein:hover{background-image:linear-gradient(180deg,var(--marque) 0%,var(--marque-fonce) 100%);
  box-shadow:var(--lumiere),var(--ombre-haute)}
.btn--grand{padding:.95rem 1.7rem;font-size:1rem}
.btn--ligne{
  color:var(--creme);border-color:rgba(255,255,255,.42);
  background-image:linear-gradient(180deg,
    color-mix(in srgb,var(--nuit) 88%,white) 0%,var(--nuit) 100%);
  box-shadow:var(--lumiere),var(--ombre);
}
.btn--ligne:hover{border-color:var(--eau-clair);box-shadow:var(--lumiere),var(--ombre-haute)}
.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),var(--ombre)}
.btn--wa:hover{box-shadow:var(--lumiere),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:5px;
  margin-right:.6rem;vertical-align:.18em;
  border-radius:var(--rayon-pilule);
  background-image:var(--tube-cuivre-couche);
}
.jalon--sombre{color:var(--eau-clair)}
.jalon--sombre::before{background-image:var(--tube-eau-couche)}
.jalon--eau{color:var(--eau-clair)}
.jalon--eau::before{background-image:var(--tube-eau-couche)}

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

.bandeau,.temps,.eaux,.travaux,.chantiers,.contact,.pied{position:relative}
.bandeau::after,.temps::after,.eaux::after,.travaux::after,
.chantiers::after,.contact::after,.pied::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  --goutte-l:max(0px,calc((100% - var(--largeur)) / 2));
  --joue-masque:linear-gradient(90deg,#000 0,
    rgba(0,0,0,.92) var(--goutte-l),
    rgba(0,0,0,.09) 46%,
    rgba(0,0,0,.09) 54%,
    rgba(0,0,0,.92) calc(100% - var(--goutte-l)),#000 100%);
  background-image:
    linear-gradient(90deg,
      var(--relief-ombre) 0%,transparent 6%,
      var(--relief-jour) 17%,transparent 30%,
      var(--relief-ombre) 39%,transparent 52%,
      var(--relief-jour) 68%,transparent 78%,
      var(--relief-ombre) 83%,transparent 94%,
      var(--relief-jour) 100%),
    linear-gradient(90deg,var(--joue-fond) 0,transparent var(--goutte-l),
      transparent calc(100% - var(--goutte-l)),var(--joue-fond) 100%);
  background-size:100% 100%,100% 100%;
  background-position:left top,left top;
  background-repeat:no-repeat,no-repeat;
  -webkit-mask-image:var(--joue-masque);
  mask-image:var(--joue-masque);
}
.temps,.travaux,.contact{
  --joue-fond:color-mix(in srgb,var(--nuit) 30%,transparent);
  --joue-chaud:color-mix(in srgb,var(--laiton-fonce) 22%,transparent);
  --joue-froid:color-mix(in srgb,var(--eau-fonce) 18%,transparent);
  --joue-arete:rgba(255,255,255,.56);
  --relief-ombre:color-mix(in srgb,var(--nuit) 5%,transparent);
  --relief-jour:rgba(255,255,255,.34);
}
.eaux,.pied,.bandeau{
  --joue-fond:color-mix(in srgb,var(--eau-clair) 9%,transparent);
  --joue-chaud:color-mix(in srgb,var(--laiton-clair) 20%,transparent);
  --joue-froid:color-mix(in srgb,var(--eau-clair) 16%,transparent);
  --joue-arete:rgba(4,10,14,.42);
  --relief-ombre:rgba(4,10,14,.17);
  --relief-jour:color-mix(in srgb,var(--eau-clair) 5%,transparent);
}
.bandeau{
  --joue-chaud:color-mix(in srgb,var(--laiton-clair) 10%,transparent);
  --joue-froid:color-mix(in srgb,var(--eau-clair) 8%,transparent);
}
.chantiers{
  --joue-fond:color-mix(in srgb,var(--nuit) 26%,transparent);
  --joue-chaud:color-mix(in srgb,var(--eau-clair) 8%,transparent);
  --joue-froid:color-mix(in srgb,var(--eau-clair) 14%,transparent);
  --joue-arete:transparent;
  --relief-ombre:rgba(4,10,14,.15);
  --relief-jour:color-mix(in srgb,var(--eau-clair) 6%,transparent);
}
.temps .colonne,.eaux .colonne,.travaux__grille,
.chantiers .colonne,.mosaique,.contact .colonne,
.pied__dedans{position:relative;z-index:1}

.strie{
  display:block;width:100%;height:11px;
  background-image:
    var(--tube-cuivre-couche),
    linear-gradient(color-mix(in srgb,var(--patine) 60%,transparent),
                    color-mix(in srgb,var(--patine) 60%,transparent)),
    var(--tube-eau-couche);
  background-size:100% 5px,100% 1px,100% 5px;
  background-position:left top,left 5px,left bottom;
  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) + 2rem);
  background:var(--nuit);
}
.bandeau__fond{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
}
@media (max-width:640px){
  .bandeau__fond{object-position:20% 50%}
}
.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%);
}
.bandeau__dedans{position:relative;z-index:2}

.verre{
  position:relative;max-width:44rem;
  padding:var(--zone);
  padding-left:calc(var(--zone) + 1rem);
  background:color-mix(in srgb,var(--nuit) 82%,transparent);
  border:var(--filet-ep) solid rgba(255,255,255,.14);
  border-radius:var(--rayon);
  box-shadow:var(--lumiere);
}
@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%);
}
.marque-tubes{
  position:absolute;left:0;top:0;bottom:0;width:12px;
  border-radius:var(--rayon) 0 0 var(--rayon);
  background-image:var(--tube-cuivre-debout),var(--tube-eau-debout);
  background-size:5px 100%,5px 100%;
  background-position:left top,right top;
  background-repeat:no-repeat;
}

.bandeau .jalon{color:var(--eau-clair)}
.bandeau .jalon::before{background:var(--eau)}
.bandeau__titre{
  margin:0 0 .8rem;color:var(--creme);
  font-size:clamp(2rem,1.25rem + 3.9vw,3.6rem);line-height:1.08;
}
.bandeau__titre span{display:block}
.bandeau__accent{
  color:var(--eau-clair);
  background:linear-gradient(180deg,var(--eau-clair) 0%,var(--eau) 100%);
  -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}

.temps{
  margin-top:calc(-1 * var(--section));
  padding:var(--zone) 0 var(--section-serre);
}
.temps__duo{display:grid;gap:var(--zone);align-items:start}
.tempo{
  position:relative;
  padding:calc(var(--zone) + var(--coiffe)) var(--zone) var(--zone);
  border-radius:var(--rayon);
}
.tempo::before{
  content:'';position:absolute;left:0;right:0;top:0;height:var(--coiffe);
  border-radius:var(--rayon) var(--rayon) 0 0;
}
.tempo--vite{
  background-image:linear-gradient(180deg,var(--nuit-haut) 0%,var(--nuit) 100%);
  box-shadow:var(--lumiere),var(--ombre);
}
.tempo--vite::before{background-image:var(--tube-cuivre-couche)}
.tempo--pose{
  background:var(--carte);
  box-shadow:var(--lumiere-clair),var(--ombre);
}
.tempo--pose::before{background-image:var(--tube-eau-couche)}

.signes{
  position:relative;
  --fuite:.9rem;                    /* ce que la colonne dépasse sous la liste */
  margin:0 0 calc(var(--zone) + 2.6rem);  /* la place où la goutte tombe */
}
.signe{
  position:relative;padding:.55rem 0 .55rem 34px;
  color:var(--creme);font-size:.95rem;line-height:1.5;
}
.signe::before{
  content:'';position:absolute;left:0;top:18px;width:20px;height:5px;
  border-radius:var(--rayon-pilule);
  background-image:var(--tube-cuivre-couche);
}
.signes::before{
  content:'';position:absolute;left:0;top:18px;bottom:calc(-1 * var(--fuite));
  width:5px;z-index:1;
  background-image:var(--tube-cuivre-debout);
}
.signes::after{
  content:'';position:absolute;left:-3px;
  bottom:calc(-1 * var(--fuite) - 10px);
  width:11px;height:10px;
  border-radius:58% 58% 50% 50% / 74% 74% 42% 42%;
  background-image:linear-gradient(180deg,#e2f2f8 0%,#9fd2e3 46%,#3a8ba5 100%);
  box-shadow:0 0 7px color-mix(in srgb,var(--eau) 40%,transparent);
}
.tempo__note{
  margin:1.25rem 0 0;padding-top:1.25rem;
  border-top:var(--filet-ep) solid rgba(255,255,255,.14);
  color:var(--creme-doux);font-size:.9rem;
}

.demarche{display:grid;gap:0;margin-top:var(--zone)}
.demarche__pas{
  position:relative;
  display:grid;grid-template-columns:22px minmax(0,1fr);
  gap:.2rem 1rem;align-items:start;
  padding:1rem 0;
  border-top:var(--filet-ep) solid var(--filet);
}
.demarche__pas:first-child{border-top:0;padding-top:0}
.demarche__pas::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:5px;z-index:1;
  background-image:var(--tube-eau-debout);
}
.demarche__pas:first-child::before{top:calc(.5rem + 2.5px)}
.demarche__pas:last-child::before{bottom:auto;height:calc(1rem + .62rem + 2.5px)}
.demarche__pas:first-child:last-child::before{display:none}
.demarche__tube{
  display:block;width:22px;height:5px;margin-top:.62rem;
  border-radius:var(--rayon-pilule);
  background-image:var(--tube-eau-couche);
}
.demarche__pas:first-child .demarche__tube{margin-top:.5rem}
.demarche__nom{grid-column:2;margin:0 0 .2rem;font-size:1.08rem}
.demarche__texte{grid-column:2;margin:0;color:var(--encre-douce);font-size:.93rem}

.eaux{
  padding-bottom:var(--section-large);   /* la bande signature : la plus ample */
  background-image:linear-gradient(#0c161b,#0c161b);
}
.eaux .strie{position:absolute;left:0;right:0;top:0;z-index:2}
.eaux::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(52% 58% at 16% 2%,
      color-mix(in srgb,var(--laiton) 8%,transparent) 0%,
      color-mix(in srgb,var(--laiton) 0%,transparent) 72%),
    radial-gradient(52% 58% at 86% 8%,
      color-mix(in srgb,var(--eau) 7%,transparent) 0%,
      color-mix(in srgb,var(--eau) 0%,transparent) 72%);
}
.eaux__intro{padding-top:var(--section-large)}
.eaux__duo{display:grid;gap:var(--zone);margin-top:var(--zone)}

.conduite{
  position:relative;margin:0;
  padding:calc(var(--zone) + var(--coiffe)) var(--zone) var(--zone);
  border-radius:var(--rayon);
  background-color:color-mix(in srgb,var(--creme) 5%,transparent);
  border:var(--filet-ep) solid rgba(255,255,255,.10);
  box-shadow:var(--lumiere);
  overflow:hidden;
}
.conduite__tube{
  position:absolute;left:0;right:0;top:0;height:var(--coiffe);display:block;
  transform-origin:left center;
}
.conduite__tube::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
}
.conduite--chaud .conduite__tube{background-image:var(--tube-cuivre-couche)}
.conduite--chaud .conduite__tube::after{
  background:color-mix(in srgb,var(--patine) 55%,transparent)}
.conduite--froid .conduite__tube{background-image:var(--tube-eau-couche)}

.conduite--chaud{background-image:radial-gradient(108% 84% at 0% 0%,
  color-mix(in srgb,var(--laiton) 13%,transparent) 0%,transparent 62%)}
.conduite--froid{background-image:radial-gradient(108% 84% at 100% 0%,
  color-mix(in srgb,var(--eau) 13%,transparent) 0%,transparent 62%)}

.conduite__nom{margin:0 0 .5rem;color:var(--creme);font-size:1.18rem}
.conduite p{margin:0;color:var(--creme-doux);font-size:.95rem;max-width:46ch}
.conduite p + p{margin-top:.7rem}

.eaux__mot{margin:var(--zone) 0 0;color:var(--creme);max-width:62ch;font-size:.98rem}

.travaux{padding-block:var(--section)}
.travaux__grille{display:grid;gap:var(--zone);align-items:stretch}
.panneau{
  position:relative;
  background:var(--carte);
  padding:calc(var(--zone) + var(--coiffe)) var(--zone) var(--zone);
  border-radius:var(--rayon);
  box-shadow:var(--lumiere-clair),var(--ombre);
}
.panneau::before{
  content:'';position:absolute;left:0;right:0;top:0;height:var(--coiffe);
  border-radius:var(--rayon) var(--rayon) 0 0;
  background-image:var(--tube-eau-couche);
}
.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(--encre-douce);
  padding-top:.35rem;
}
.poste h3{grid-column:2;margin:0 0 .25rem;font-size:1.14rem}
.poste p{grid-column:2;margin:0;color:var(--encre-douce);font-size:.94rem}

.cadre{
  position:relative;overflow:hidden;border-radius:var(--rayon);
  padding:7px;
  background:linear-gradient(150deg,#F4F7F8 0%,#D7E0E4 46%,#EDF2F4 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.85),
    0 0 0 1px rgba(20,44,56,.16),
    var(--lumiere-clair),var(--ombre);
}   /* G-E : plus aucune transition au repos — c'est elle qui animait la photo */
.cadre img{border-radius:calc(var(--rayon) - 5px);
  box-shadow:0 0 0 1px rgba(20,44,56,.22)}
.cadre img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.travaux__paire{display:grid;gap:var(--zone)}
.travaux__geste{aspect-ratio:4 / 3}
.travaux__matiere{aspect-ratio:3 / 4}
@media (min-width:62rem){
  .travaux__paire{grid-template-rows:.85fr 1.15fr;min-height:100%}
  .travaux__geste,.travaux__matiere{aspect-ratio:auto;min-height:0}
}

.chantiers{
  padding-block:var(--section-serre);   /* la mosaïque porte, pas le bleu autour */
  background-image:linear-gradient(#0c5163,#0c5163);
}
.chantiers .colonne{padding-bottom:var(--zone)}
.mosaique{
  display:grid;gap:2px;
  padding-inline:0;
}
.mosaique figure{
  position:relative;overflow:hidden;background:var(--marque-fonce);
}   /* G-E : aucune transition */
.mosaique img{
  width:100%;height:100%;object-fit:cover;object-position:50% 50%;
}   /* G-E : aucune transition, aucun survol */
.mosaique__grande{aspect-ratio:3 / 2}
.mosaique__une{aspect-ratio:16 / 9}

.contact{
  padding-block:var(--section-large) var(--section-serre);
  background-color:#d5e2e6;
}
.contact::before{
  content:'';position:absolute;left:0;right:0;top:0;height:var(--coiffe);
  z-index:1;pointer-events:none;
  background-image:var(--tube-eau-couche);
}
.contact__deux{display:grid;gap:var(--zone);margin-top:var(--zone);align-items:start}
.carte{
  background:var(--carte);padding:var(--zone);border-radius:var(--rayon);
  box-shadow:var(--lumiere-clair),var(--ombre);
}
.fiche__titre{
  margin:0 0 1rem;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  font-family:var(--police-libelle);color:var(--encre-douce);
}

.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 var(--filet);
  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;opacity:.85}
.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),var(--ombre);
}
.plaque--appel:hover{box-shadow:var(--lumiere),var(--ombre-haute)}
.plaque:not(.plaque--appel):hover{background:color-mix(in srgb,var(--marque) 6%,transparent)}
.plaque--seule{display:block;width:100%;min-height:64px}
.plaque--seule .plaque__no{font-size:1.5rem}

.tableau{display:grid}
.tableau__ligne{
  display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:.25rem 1rem;
  padding:.5rem 0;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(--encre-douce);padding-top:.15rem}
.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(--encre-douce)}
.tableau__ligne--aujourdhui{background:color-mix(in srgb,var(--fond-alt) 70%,transparent);
  border-radius:var(--rayon);padding-inline:.6rem;margin-inline:-.6rem;
  border-top-color:transparent}
.tableau__ligne--aujourdhui + .tableau__ligne{border-top-color:transparent}
.tableau__aujourdhui{
  display:block;width:max-content;margin:.3rem 0 .1rem;padding:.1rem .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-bouton);
}
@media (max-width:26rem){
  .tableau__ligne{grid-template-columns:minmax(0,1fr)}
}

.pied{
  background-image:linear-gradient(#0c161b,#0c161b);
  color:var(--creme-doux);
}
.pied .strie{position:absolute;left:0;right:0;top:0;z-index:2}
.pied__dedans{padding-block:var(--section-serre)}
.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(--eau-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(--eau-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 .conduite .conduite__tube{transform:scaleX(0)}
.js .conduite.est-vu .conduite__tube{transform:none;
  transition:transform .55s cubic-bezier(.4,0,.2,1);transition-delay:.16s}

@keyframes goutte-qui-tombe{
  0%  {transform:translateY(0) scale(.24);opacity:0;
       animation-timing-function:cubic-bezier(.2,.8,.3,1)}
  8%  {transform:translateY(0) scale(1);opacity:1;
       animation-timing-function:linear}
  22% {transform:translateY(0) scale(1);opacity:1;
       animation-timing-function:cubic-bezier(.55,0,.9,.55)}
  30% {transform:translateY(13px) scale(.94);opacity:1;
       animation-timing-function:cubic-bezier(.4,0,1,.6)}
  36% {transform:translateY(24px) scale(.86);opacity:0}
  100%{transform:translateY(24px) scale(.86);opacity:0}
}
.js .tempo--vite.est-vu .signes::after{
  transform-origin:top center;
  animation:goutte-qui-tombe 5.6s ease-in-out .8s infinite;
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{transform:none;transition:opacity .5s ease}
  .js .reveal.est-vu{transform:none}
  .js .conduite .conduite__tube,
  .js .conduite.est-vu .conduite__tube{transform:none;transition:none}
  .js .tempo--vite.est-vu .signes::after{animation:none;transform:none}
  .plaque,.btn{transition:box-shadow .24s ease,background-color .24s ease}
}

@media (min-width:34rem){          /* 544 px */
  .plaques{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:48rem){          /* 768 px — iPad portrait */
  .eaux__duo{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--zone)}
  .mosaique{
    grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
    padding-inline:max(var(--gouttiere),
      calc((100% - var(--largeur)) / 2 + var(--gouttiere)));
  }
  .mosaique__grande{grid-row:span 2;aspect-ratio:auto}
  .mosaique__grande img{position:absolute;inset:0}
  .mosaique__une{aspect-ratio:16 / 10}
}
@media (min-width:62rem){          /* 992 px */
  .temps__duo{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    gap:var(--section)}
  .travaux__grille{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
    gap:var(--section)}
  .contact__deux{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
    gap:var(--section)}
  .eaux__duo{gap:var(--section)}
  .verre{padding:calc(var(--zone) + .5rem);
    padding-left:calc(var(--zone) + 1.5rem)}
}

@media (max-width:37.5rem){
  .bandeau{
    display:block;min-height:0;
    padding:0 0 var(--section-serre);
  }
  .bandeau__fond{
    position:static;width:100%;height:auto;
    aspect-ratio:16/10;object-position:20% 50%;
  }
  .bandeau__voile{display:none}
  .bandeau__dedans{margin-top:calc(-1 * var(--zone))}
  .verre{
    max-width:none;
    background:color-mix(in srgb,var(--nuit) 96%,transparent);
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
}

.haut .nav{background-color:rgba(12,22,27,0.76)}
.haut{margin-bottom:-71px}