/* ==========================================================================
   HISTOIRES D’EAUX — feuille de styles
   Sommaire : 1. Variables  2. Base  3. Mise en page  4. Le fil (tuyau)
   5. Boutons et liens  6. En-tête  7. Hero  8. Plaque  9. Le réseau (maison)
   10. Chapitres  11. Situations  12. Artisan  13. Avis  14. Zone
   15. Appel final  16. Pied de page  17. Barre mobile et retour en haut
   18. Pages intérieures  19. Formulaire  20. Mouvement, impression
   21. En-têtes photo, clichés, loupe
   ========================================================================== */

/* 1. VARIABLES ------------------------------------------------------------ */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
/* Police de secours calée sur les mesures de Bricolage : pas de saut de mise en page au chargement. */
@font-face {
  font-family: "Bricolage Secours";
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 97%;
  ascent-override: 96%;
  descent-override: 28%;
  line-gap-override: 0%;
}

:root {
  /* Couleurs : une échelle de températures, du froid au chaud */
  --nuit: #10283a;          /* derrière le mur */
  --nuit-2: #173a52;
  --mineral: #2a5c78;       /* eau froide, sur fond clair */
  --froid: #86bbd8;         /* eau froide, sur fond nuit */
  --cuivre: #b5673a;        /* accent chaud : traits, puces, pastilles */
  --cuivre-fonce: #8a4520;  /* cuivre lisible en texte */
  --cuivre-clair: #e6a476;  /* cuivre, sur fond nuit */
  --anthracite: #1d2930;
  --gris: #55626a;
  --gris-clair: #a9b8c1;
  --blanc: #faf8f4;
  --trait: rgba(29, 41, 48, 0.16);
  --trait-clair: rgba(241, 238, 232, 0.2);

  /* Tons de fond : le fond de page glisse de l’un à l’autre pendant le défilement */
  --ton-pierre: #f1eee8;
  --ton-froid: #e2eaed;
  --ton-chaud: #f0e1d2;
  --ton-clair: #faf8f4;

  /* Typographie */
  --police: "Bricolage Grotesque", "Bricolage Secours", system-ui, sans-serif;
  --t-geant: clamp(2.375rem, 1.35rem + 5.1vw, 5.5rem);
  --t-titre: clamp(1.875rem, 1.3rem + 2.6vw, 3.25rem);
  --t-sous-titre: clamp(1.3125rem, 1.15rem + 0.7vw, 1.625rem);
  --t-chapo: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --t-texte: 1.0625rem;
  --t-petit: 0.9375rem;
  --t-note: 0.8125rem;

  /* Espacements */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4.5rem;
  --e-9: clamp(4.5rem, 3rem + 7vw, 8.5rem);

  /* Rayons, ombres, largeurs */
  --r-1: 2px;
  --r-2: 4px;
  --ombre-flottant: 0 6px 24px rgba(16, 40, 58, 0.16), 0 1px 2px rgba(16, 40, 58, 0.12);
  --l-page: 80rem;
  --l-texte: 38rem;

  /* Le fil : marge gauche réservée au tuyau */
  --bord-g: 2.75rem;
  --bord-d: 1.125rem;
  --fil-x: 1rem;
  --decal: max(0px, (100vw - var(--l-page)) / 2);

  --entete-h: 4rem;
  --p: 1; /* progression du défilement (0 à 1), pilotée par le script */
}

@media (min-width: 48em) {
  :root {
    --bord-g: 5.5rem;
    --bord-d: 2.5rem;
    --fil-x: 2rem;
    --entete-h: 4.75rem;
  }
}
@media (min-width: 80em) {
  :root {
    --bord-g: 7.5rem;
    --bord-d: 4rem;
    --fil-x: 2.75rem;
  }
}

/* 2. BASE ----------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--entete-h) + 1rem);
}
body {
  margin: 0;
  background-color: var(--ton-pierre);
  color: var(--anthracite);
  font-family: var(--police);
  font-size: var(--t-texte);
  font-weight: 400;
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
}
ul,
ol {
  padding: 0;
  list-style: none;
}
img,
svg {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
a {
  color: inherit;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
}
:focus-visible {
  outline: 3px solid var(--cuivre);
  outline-offset: 3px;
  border-radius: var(--r-1);
}
::selection {
  background: var(--mineral);
  color: var(--blanc);
}
[hidden] {
  display: none !important;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.evitement {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--nuit);
  color: var(--blanc);
  border-radius: var(--r-2);
  transform: translateY(-200%);
}
.evitement:focus {
  transform: none;
}

/* Titres */
.t-geant,
.t-titre,
.t-sous-titre {
  font-weight: 600;
  text-wrap: balance;
}
.t-geant {
  font-size: var(--t-geant);
  line-height: 0.98;
  letter-spacing: -0.03em;
  font-weight: 550;
}
.t-titre {
  font-size: var(--t-titre);
  line-height: 1.04;
  letter-spacing: -0.022em;
}
.t-sous-titre {
  font-size: var(--t-sous-titre);
  line-height: 1.18;
  letter-spacing: -0.012em;
}
.chapo {
  font-size: var(--t-chapo);
  line-height: 1.5;
  max-width: var(--l-texte);
  text-wrap: pretty;
}
.texte {
  max-width: var(--l-texte);
  text-wrap: pretty;
}
.texte + .texte {
  margin-top: var(--e-4);
}
.note {
  font-size: var(--t-note);
  line-height: 1.5;
  color: var(--gris);
}
.insec {
  white-space: nowrap;
}

/* 3. MISE EN PAGE ---------------------------------------------------------- */
main {
  position: relative;
  isolation: isolate;
}
.cadre {
  position: relative;
  z-index: 2;
  max-width: var(--l-page);
  margin-inline: auto;
  padding-left: var(--bord-g);
  padding-right: var(--bord-d);
}
.bloc {
  padding-block: var(--e-9);
}
.bloc--serre {
  padding-block: var(--e-8);
}
/* Sans script, chaque bloc porte son ton ; avec script, le fond de page prend le relais. */
[data-ton="pierre"] { background-color: var(--ton-pierre); }
[data-ton="froid"] { background-color: var(--ton-froid); }
[data-ton="chaud"] { background-color: var(--ton-chaud); }
[data-ton="clair"] { background-color: var(--ton-clair); }
.js [data-ton] {
  background-color: transparent;
}

/* 4. LE FIL --------------------------------------------------------------- */
/* Un tuyau court sur toute la page, à gauche. En pointillé : il est « derrière le mur ».
   L’eau le remplit au fil du défilement, du bleu froid au cuivre. */
.fil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.fil__tube,
.fil__eau {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--decal) + var(--fil-x) - 1px);
  width: 2px;
}
.fil__tube {
  background: repeating-linear-gradient(to bottom, rgba(109, 132, 146, 0.55) 0 7px, transparent 7px 13px);
}
.fil__eau {
  background: linear-gradient(
    to bottom,
    #4f8fb3 0%,
    #4f8fb3 30%,
    #7d9aa6 40%,
    #c47a47 50%,
    #c47a47 62%,
    #b99a80 74%,
    #8fa3ac 100%
  );
  clip-path: inset(0 0 calc(100% - var(--p) * 100%) 0);
}
.fil__goutte {
  position: absolute;
  top: calc(var(--p) * 100%);
  left: calc(var(--decal) + var(--fil-x));
  width: 9px;
  height: 9px;
  margin: -4px 0 0 -4.5px;
  border-radius: 0 50% 50% 50%;
  transform: rotate(45deg);
  background: var(--goutte, #4f8fb3);
  opacity: 0;
  transition: opacity 0.3s;
}
.js .fil__goutte {
  opacity: 1;
}

/* Piquage : la dérivation qui relie le fil à un titre de section */
.piquage {
  position: relative;
}
.piquage::before {
  content: "";
  position: absolute;
  top: 0.56em;
  left: calc(var(--fil-x) - var(--bord-g));
  width: calc(var(--bord-g) - var(--fil-x) - 0.7rem);
  height: 2px;
  background: currentColor;
  opacity: 0.32;
}
.piquage::after {
  content: "";
  position: absolute;
  top: calc(0.56em - 4px);
  left: calc(var(--fil-x) - var(--bord-g) - 5px);
  width: 10px;
  height: 10px;
  border-radius: var(--r-1);
  background: var(--cuivre);
}

/* 5. BOUTONS ET LIENS ----------------------------------------------------- */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 3.25rem;
  padding: 0.7rem 1.4rem;
  border: 1.5px solid transparent;
  border-radius: var(--r-2);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  transition: color 0.25s, border-color 0.25s;
}
/* Micro-interaction : le bouton se remplit par le bas, comme un niveau d’eau qui monte. */
.btn::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.btn:hover::before,
.btn:focus-visible::before {
  transform: scaleY(1);
}
.btn svg {
  flex: none;
  width: 1.15em;
  height: 1.15em;
}
.btn--plein {
  background: var(--nuit);
  color: var(--blanc);
}
.btn--plein::before {
  background: var(--mineral);
}
.btn--tel {
  border-color: var(--nuit);
  color: var(--nuit);
}
.btn--tel::before {
  background: var(--cuivre-fonce);
}
.btn--tel:hover,
.btn--tel:focus-visible {
  color: var(--blanc);
  border-color: var(--cuivre-fonce);
}
.btn--tel {
  flex-wrap: wrap;
  row-gap: 0.1rem;
}
.btn__txt,
.btn__num {
  white-space: nowrap;
}
.btn__num {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.sur-nuit .btn--plein {
  background: var(--blanc);
  color: var(--nuit);
}
.sur-nuit .btn--plein::before {
  background: var(--froid);
}
.sur-nuit .btn--tel {
  border-color: var(--blanc);
  color: var(--blanc);
}
.sur-nuit .btn--tel::before {
  background: var(--cuivre-clair);
}
.sur-nuit .btn--tel:hover,
.sur-nuit .btn--tel:focus-visible {
  color: var(--nuit);
  border-color: var(--cuivre-clair);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
}

.lien {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color 0.2s;
}
.lien:hover {
  text-decoration-color: currentColor;
}
/* Lien d’action : un trait qui s’allonge, comme un tube qu’on prolonge */
.lien-suite {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--mineral);
  padding-block: 0.4rem;
}
.lien-suite::after {
  content: "";
  flex: none;
  width: 1.75rem;
  height: 2px;
  background: currentColor;
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.lien-suite:hover::after,
.lien-suite:focus-visible::after {
  transform: scaleX(1.7);
}
.chaud .lien-suite {
  color: var(--cuivre-fonce);
}
.sur-nuit .lien-suite {
  color: var(--froid);
}

/* 6. EN-TÊTE --------------------------------------------------------------- */
.entete {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--entete-h);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), background-color 0.25s, box-shadow 0.25s;
}
.entete--pose {
  background-color: color-mix(in srgb, var(--fond, var(--ton-pierre)) 96%, transparent);
  box-shadow: 0 1px 0 var(--trait);
}
.entete--cache {
  transform: translateY(-100%);
}
.entete__in {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  height: 100%;
  max-width: var(--l-page);
  margin-inline: auto;
  padding-left: var(--bord-g);
  padding-right: var(--bord-d);
}
/* Signature typographique provisoire : le nom, et l’apostrophe devenue goutte. */
.marque {
  display: inline-flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-right: auto;
  text-decoration: none;
  line-height: 1;
}
.marque__nom {
  display: inline-flex;
  align-items: baseline;
  font-size: clamp(1.125rem, 0.9rem + 1.2vw, 1.3125rem);
  font-weight: 650;
  letter-spacing: -0.025em;
  white-space: nowrap;
}
.marque__goutte {
  flex: none;
  align-self: flex-start;
  width: 0.3em;
  height: 0.42em;
  margin: 0.02em 0.03em 0 0.02em;
  fill: var(--cuivre);
}
.marque__metier {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--gris);
  white-space: nowrap;
}
.nav {
  display: none;
}
.nav__liste {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.6vw, 1.75rem);
}
.nav__lien {
  position: relative;
  display: block;
  padding-block: 0.5rem;
  font-size: var(--t-petit);
  font-weight: 500;
  text-decoration: none;
}
.nav__lien::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.15rem;
  height: 2px;
  background: var(--cuivre);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.nav__lien:hover::after,
.nav__lien[aria-current="page"]::after {
  transform: scaleX(1);
}
.nav__zone {
  display: none;
}
.entete__tel {
  display: none;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--t-petit);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  white-space: nowrap;
}
.entete__tel svg {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--cuivre-fonce);
}
.entete .btn {
  display: none;
  min-height: 2.75rem;
  padding: 0.5rem 1.1rem;
  font-size: var(--t-petit);
}
.entete__rond {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1.5px solid var(--nuit);
  border-radius: var(--r-2);
  background: none;
  color: var(--nuit);
  text-decoration: none;
}
.entete__rond svg {
  width: 1.25rem;
  height: 1.25rem;
}
.entete__rond--plein {
  background: var(--nuit);
  color: var(--blanc);
}
@media (min-width: 48em) {
  .entete__in {
    gap: var(--e-5);
  }
}
@media (min-width: 68em) {
  .nav {
    display: block;
  }
  .entete__tel {
    display: inline-flex;
  }
  .entete .btn {
    display: inline-flex;
  }
  .entete__rond {
    display: none;
  }
}
@media (min-width: 84em) {
  .nav__zone {
    display: block;
  }
}

/* Menu mobile */
.menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  padding: 0 var(--bord-d) calc(1.5rem + env(safe-area-inset-bottom)) var(--bord-g);
  background: var(--nuit);
  color: var(--blanc);
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-1rem);
  transition: opacity 0.3s, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s 0.35s;
}
.menu--ouvert {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 0.3s, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.menu::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--fil-x) - 1px);
  width: 2px;
  background: linear-gradient(to bottom, var(--froid), var(--cuivre-clair));
  opacity: 0.7;
}
.menu__haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  height: var(--entete-h);
}
.menu .marque__metier {
  color: var(--gris-clair);
}
.menu .marque__goutte {
  fill: var(--cuivre-clair);
}
.menu .entete__rond {
  display: grid;
  border-color: var(--blanc);
  color: var(--blanc);
}
.menu__liste {
  margin-block: var(--e-6) auto;
}
.menu__lien {
  position: relative;
  display: block;
  padding-block: 0.7rem;
  font-size: 1.75rem;
  font-weight: 550;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-decoration: none;
}
.menu__lien[aria-current="page"] {
  color: var(--cuivre-clair);
}
.menu__lien small {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--t-petit);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--gris-clair);
}
.menu__bas {
  display: grid;
  gap: var(--e-3);
  margin-top: var(--e-6);
}
.menu__adresse {
  margin-top: var(--e-3);
  font-size: var(--t-petit);
  color: var(--gris-clair);
}

/* 7. HERO ------------------------------------------------------------------ */
.hero {
  position: relative;
  padding-top: calc(var(--entete-h) + clamp(1.5rem, 5vw, 4.5rem));
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
}
/* La saignée : le mur est ouvert, on voit le tuyau d’arrivée d’eau. */
.saignee {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--decal);
  z-index: 1;
  width: calc(var(--fil-x) * 2);
  background: var(--nuit);
  box-shadow: inset 5px 0 8px -5px rgba(0, 0, 0, 0.55), inset -5px 0 8px -5px rgba(0, 0, 0, 0.55);
}
.saignee::before {
  /* le tube */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: clamp(5px, 0.7vw, 9px);
  transform: translateX(-50%);
  background: linear-gradient(to right, #a9d2e8 0 22%, var(--froid) 22% 100%);
}
.saignee__collier {
  position: absolute;
  left: 50%;
  width: clamp(13px, 1.6vw, 21px);
  height: clamp(5px, 0.5vw, 7px);
  transform: translateX(-50%);
  border-radius: 1px;
  background: #d9dee0;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
.saignee__collier:nth-child(1) {
  top: 24%;
}
.saignee__collier:nth-child(2) {
  top: 72%;
}
.hero__grille {
  display: grid;
  gap: var(--e-6);
}
.hero__metier {
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.1875rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--mineral);
}
.hero__accroche {
  margin-top: var(--e-3);
  max-width: 11.5em;
}
.hero .chapo {
  margin-top: var(--e-5);
}
.hero .actions {
  margin-top: var(--e-6);
}
.hero .actions .btn {
  flex: 1 1 15rem;
}
@media (min-width: 36em) {
  .hero .actions .btn {
    flex: 0 1 auto;
  }
}
@media (min-width: 62em) {
  .hero__grille {
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 23rem);
    align-items: end;
    gap: var(--e-8);
  }
}

/* 8. PLAQUE ---------------------------------------------------------------- */
/* Inspirée des plaques signalétiques rivetées sur les chauffe-eau et les chaudières. */
.plaque {
  position: relative;
  padding: 1.35rem 1.5rem 1.2rem;
  border: 1.5px solid var(--anthracite);
  border-radius: var(--r-2);
  background: color-mix(in srgb, var(--blanc) 55%, transparent);
}
.plaque::before,
.plaque::after {
  /* rivets */
  content: "";
  position: absolute;
  top: 0.5rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--anthracite);
  opacity: 0.55;
}
.plaque::before {
  left: 0.5rem;
}
.plaque::after {
  right: 0.5rem;
}
.plaque__note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.75rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--trait);
}
.plaque__chiffre {
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}
.plaque__chiffre small {
  font-size: 0.5em;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--gris);
}
.etoiles {
  display: inline-flex;
  gap: 2px;
  color: var(--cuivre);
}
.etoiles svg {
  width: 1rem;
  height: 1rem;
}
.plaque__source {
  flex-basis: 100%;
  margin-top: 0.35rem;
  font-size: var(--t-note);
  color: var(--gris);
}
.plaque__lignes {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 1.25rem;
  margin-top: 0.9rem;
  font-size: var(--t-petit);
  line-height: 1.35;
}
.plaque__lignes dt {
  color: var(--gris);
}
.plaque__lignes dd {
  font-weight: 600;
}


/* 9. LE RÉSEAU (MAISON EN COUPE) ------------------------------------------ */
.reseau {
  position: relative;
  padding-block: var(--e-9);
  background-color: var(--nuit) !important;
  color: var(--blanc);
}
.reseau .chapo {
  margin-top: var(--e-4);
  color: #d5dee3;
}
.reseau__entete {
  max-width: 46rem;
}
.reseau__scene {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-4);
  margin-top: var(--e-6);
}
.reseau__plan {
  display: contents;
}
.reseau__dessin {
  margin-left: calc(var(--fil-x) - var(--bord-g) + 0.9rem);
  margin-right: calc(0.4rem - var(--bord-d));
  padding-block: 0.25rem;
  background: var(--nuit);
}
/* Sur mobile, le dessin puis les onglets restent en vue pendant qu’on lit le récit. */
@media (max-width: 61.99em) and (min-height: 40em) {
  .js .reseau__dessin {
    position: sticky;
    top: 0;
    z-index: 4;
  }
  .js .histoires {
    position: sticky;
    top: var(--dessin-h, 0px);
    z-index: 3;
  }
}

.plan {
  width: 100%;
  height: auto;
  overflow: visible;
}
.plan path,
.plan rect,
.plan circle {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.plan__sol path {
  stroke: rgba(233, 238, 240, 0.28);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}
.plan__murs path {
  stroke: #2c4a5f;
  stroke-width: 11;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}
.plan__murs .fin {
  stroke-width: 5;
}
.plan__murs .moyen {
  stroke-width: 7;
}
.plan__objets path,
.plan__objets rect,
.plan__objets circle {
  stroke: rgba(233, 238, 240, 0.66);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  transition: stroke 0.35s, fill 0.35s;
}
.plan__objets .leger {
  stroke: rgba(233, 238, 240, 0.3);
  stroke-width: 1;
}
.plan__objets .plein {
  fill: var(--nuit);
}
.plan__objets .on path,
.plan__objets .on rect,
.plan__objets .on circle,
.plan__objets.on path,
.plan__objets.on circle {
  stroke: #fff;
}
.plan__objets .on .leger {
  stroke: rgba(255, 255, 255, 0.6);
}
#o-rad-rdc.on > path:first-child,
#o-rad-etage.on > path:first-child,
#o-ballon.on > rect,
#o-chaleur.on > rect {
  fill: rgba(230, 164, 118, 0.22);
  stroke: var(--cuivre-clair);
}
#o-vanne.on .plein {
  fill: var(--cuivre-clair);
  stroke: var(--cuivre-clair);
}

/* Les quatre réseaux se distinguent par la couleur ET par le tracé. */
.plan__reseau path {
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  opacity: 0.34;
  transition: opacity 0.45s, stroke-width 0.3s;
}
.plan .ef { stroke: var(--froid); }
.plan .ec { stroke: var(--cuivre-clair); stroke-dasharray: 9 4; }
.plan .ch { stroke: #ee8f5f; stroke-dasharray: 12 3 2 3; }
.plan .ch.retour { stroke: #c9907a; }
.plan .ev { stroke: #b4bec4; stroke-dasharray: 1.5 5; }
.plan__reseau path.on {
  opacity: 1;
  stroke-width: 3.25;
}
/* Le flux : un éclat qui parcourt le tronçon dans le sens de l’eau. */
.plan__reseau path.flux {
  stroke: #fff;
  stroke-width: 3.25;
  stroke-dasharray: 10 38;
  opacity: 0;
}
.plan__reseau path.flux.on {
  opacity: 0.85;
  animation: flux 1.5s linear infinite;
}
@keyframes flux {
  from { stroke-dashoffset: 48; }
  to { stroke-dashoffset: 0; }
}
/* Entrée en scène : la première fois, le réseau se dessine. */
.js .plan:not(.plan--pret) .plan__reseau path {
  opacity: 0;
}
.plan__fuite {
  opacity: 0;
  transition: opacity 0.3s;
}
.plan--fuite .plan__fuite {
  opacity: 1;
}
.plan__fuite circle {
  fill: var(--cuivre-clair);
  stroke: none;
}
.plan__fuite .onde {
  fill: none;
  stroke: var(--cuivre-clair);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
}
.plan--fuite .plan__fuite .onde {
  animation: onde 1.8s ease-out infinite;
}
@keyframes onde {
  from { transform: scale(1); opacity: 0.9; }
  to { transform: scale(4.2); opacity: 0; }
}
.plan__textes text {
  fill: rgba(233, 238, 240, 0.72);
  font-size: 30px;
  font-weight: 500;
}
@media (min-width: 48em) {
  .plan__textes text {
    font-size: 24px;
  }
}
.plan__zones rect {
  fill: transparent;
  stroke: none;
  cursor: pointer;
}
.plan__zones rect:hover {
  stroke: rgba(255, 255, 255, 0.4);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  vector-effect: non-scaling-stroke;
}
html:not(.js) .plan__zones {
  display: none;
}

.legende {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  order: 3;
  margin-top: var(--e-4);
  font-size: var(--t-note);
  color: #c5d0d6;
}
.legende li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.legende__trait {
  width: 1.75rem;
  height: 3px;
  border-radius: 2px;
}
.legende__trait--ef { background: var(--froid); }
.legende__trait--ec { background: repeating-linear-gradient(90deg, var(--cuivre-clair) 0 9px, transparent 9px 13px); }
.legende__trait--ch { background: repeating-linear-gradient(90deg, #ee8f5f 0 12px, transparent 12px 15px, #ee8f5f 15px 17px, transparent 17px 20px); }
.legende__trait--ev { background: repeating-linear-gradient(90deg, #b4bec4 0 2px, transparent 2px 6px); }

/* Onglets : les histoires */
.histoires {
  display: flex;
  gap: 0.5rem;
  margin-left: calc(var(--fil-x) - var(--bord-g) + 0.9rem);
  margin-right: calc(-1 * var(--bord-d));
  padding: 0.25rem var(--bord-d) 0.5rem 0.25rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  background: var(--nuit);
}
.histoires::-webkit-scrollbar {
  display: none;
}
html:not(.js) .histoires {
  display: none;
}
.histoires__onglet {
  flex: none;
  scroll-snap-align: start;
  display: grid;
  gap: 0.05rem;
  min-height: 3.25rem;
  padding: 0.45rem 0.9rem;
  border: 1.5px solid rgba(241, 238, 232, 0.28);
  border-radius: var(--r-2);
  background: none;
  color: var(--blanc);
  text-align: left;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}
.histoires__heure {
  font-size: var(--t-note);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  color: #b9c6cd;
}
.histoires__nom {
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
}
.histoires__onglet:not([aria-selected="true"]):hover {
  border-color: var(--blanc);
}
.histoires__onglet[aria-selected="true"] {
  border-color: var(--blanc);
  background: var(--blanc);
  color: var(--nuit);
}
.histoires__onglet[aria-selected="true"] .histoires__heure {
  color: var(--mineral);
}
.histoires__onglet--alerte[aria-selected="true"] {
  border-color: var(--cuivre-clair);
  background: var(--cuivre-clair);
}
.histoires__onglet--alerte[aria-selected="true"] .histoires__heure {
  color: var(--nuit);
}

.recit {
  padding-top: var(--e-4);
}
.recit > * + * {
  margin-top: var(--e-4);
}
.recit p {
  max-width: 36rem;
  color: #dbe3e7;
}
.recit h3 {
  color: var(--blanc);
}
.recit .recit__sur {
  margin-top: var(--e-5);
  font-size: var(--t-note);
  color: #b9c6cd;
}
.recit__trajet {
  margin-top: 0.4rem;
}
.recit__trajet li {
  font-size: var(--t-petit);
  font-weight: 500;
}
/* entre deux étapes : un bout de tube */
.recit__trajet li + li::before {
  content: "";
  display: block;
  width: 2px;
  height: 0.6rem;
  margin: 0.2rem 0 0.2rem 0.4rem;
  background: var(--froid);
  opacity: 0.75;
}
.recit--chaud .recit__trajet li + li::before {
  background: var(--cuivre-clair);
}
@media (min-width: 36em) {
  .recit__trajet {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 0.4rem;
  }
  .recit__trajet li {
    display: inline-flex;
    align-items: center;
  }
  .recit__trajet li + li::before {
    width: 1rem;
    height: 2px;
    margin: 0 0.5rem;
  }
}
.recit .recit__role {
  color: var(--blanc);
}
.recit__role strong {
  font-weight: 600;
  color: var(--froid);
}
.recit--alerte .recit__role strong {
  color: var(--cuivre-clair);
}
.recit__avis {
  padding-left: var(--e-4);
  border-left: 2px solid var(--cuivre-clair);
}
.recit__avis p {
  color: var(--blanc);
}
.recit__avis footer {
  margin-top: 0.35rem;
  font-size: var(--t-note);
  color: #b9c6cd;
}
html:not(.js) .recit + .recit {
  margin-top: var(--e-5);
  border-top: 1px solid var(--trait-clair);
}
.reseau__note {
  margin-top: var(--e-6);
  max-width: 34rem;
  color: #b9c6cd;
}

@media (min-width: 62em) {
  .reseau__scene {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--e-7);
    align-items: start;
    margin-top: var(--e-7);
  }
  .reseau__plan {
    display: block;
    order: 2;
    position: sticky;
    top: calc(var(--entete-h) + 0.5rem);
  }
  .reseau__dessin {
    margin: 0;
    padding: 0;
  }
  .legende {
    margin-top: var(--e-3);
  }
  .histoires {
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    border-top: 1px solid var(--trait-clair);
  }
  .histoires__onglet {
    position: relative;
    grid-template-columns: 5.5rem 1fr;
    align-items: baseline;
    min-height: 3.5rem;
    padding: 0.85rem 1rem;
    border: 0;
    border-bottom: 1px solid var(--trait-clair);
    border-radius: 0;
  }
  .histoires__nom {
    font-size: var(--t-chapo);
  }
  .histoires__onglet:not([aria-selected="true"]):hover {
    background: rgba(241, 238, 232, 0.07);
  }
  .recit {
    padding-top: var(--e-6);
  }
}

/* 10. CHAPITRES : PLOMBERIE, CHAUFFAGE, SANITAIRE ------------------------- */
.chapitre {
  padding-block: var(--e-8) clamp(3.5rem, 2rem + 6vw, 7rem);
}
.chapitre__grille {
  display: grid;
  gap: var(--e-6);
}
.chapitre__phrase {
  margin-top: var(--e-4);
  max-width: 20em;
  color: var(--mineral);
}
.chaud .chapitre__phrase {
  color: var(--cuivre-fonce);
}
.chapitre .texte {
  margin-top: var(--e-4);
}
.points {
  display: grid;
  gap: 0.6rem;
  max-width: var(--l-texte);
  margin-top: var(--e-5);
}
/* Puce : un bout de tube et son raccord */
.points li {
  position: relative;
  padding-left: 2rem;
  font-weight: 500;
  line-height: 1.4;
}
.points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 1rem;
  height: 2px;
  background: var(--mineral);
}
.points li::after {
  content: "";
  position: absolute;
  left: 1rem;
  top: calc(0.66em - 3px);
  width: 8px;
  height: 8px;
  border-radius: var(--r-1);
  background: var(--mineral);
}
.chaud .points li::before,
.chaud .points li::after {
  background: var(--cuivre);
}
.chapitre .lien-suite {
  margin-top: var(--e-5);
}
@media (min-width: 62em) {
  .chapitre__grille {
    align-items: center;
    gap: var(--e-8);
  }
  .chapitre--a .chapitre__grille {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }
  .chapitre--b .chapitre__grille {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: start;
    row-gap: var(--e-6);
  }
  .chapitre--b .chapitre__texte {
    display: contents;
  }
  .chapitre--b .chapitre__texte > h2 {
    grid-column: 1 / -1;
  }
  .chapitre--b .chapitre__phrase {
    grid-column: 1 / -1;
    margin-top: calc(-1 * var(--e-3));
  }
  .chapitre--b .cliche {
    grid-column: 1;
    grid-row: 3 / span 3;
  }
  .chapitre--b .chapitre__texte > .texte,
  .chapitre--b .chapitre__texte > .points,
  .chapitre--b .chapitre__texte > .lien-suite {
    grid-column: 2;
    margin-top: 0;
    align-self: start;
  }
  .chapitre--b .chapitre__grille {
    grid-template-rows: auto auto auto auto 1fr;
    row-gap: var(--e-5);
  }
  .chapitre--c .chapitre__grille {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }
}

/* 11. SITUATIONS ----------------------------------------------------------- */
.situations .chapo {
  margin-top: var(--e-4);
}
.situations__liste {
  margin-top: var(--e-6);
  border-top: 1.5px solid var(--anthracite);
}
.situation {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: var(--e-4);
  padding: 1.05rem 0.5rem 1.05rem 1.1rem;
  border-bottom: 1px solid var(--trait);
  text-decoration: none;
}
/* repère de température : bleu pour l’eau, cuivre pour la chaleur, gris pour les projets */
.situation::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24%;
  bottom: 24%;
  width: 3px;
  border-radius: 2px;
  background: var(--mineral);
}
.situation--chaud::before {
  background: var(--cuivre);
}
.situation--neutre::before {
  background: var(--gris-clair);
}
.situation::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--blanc) 75%, transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.situation:hover::after,
.situation:focus-visible::after {
  transform: scaleX(1);
}
.situation__dit {
  grid-column: 1;
  font-size: var(--t-sous-titre);
  font-weight: 550;
  line-height: 1.2;
  letter-spacing: -0.012em;
}
.situation__vers {
  grid-column: 1;
  grid-row: 2;
  margin-top: 0.2rem;
  font-size: var(--t-note);
  color: var(--gris);
}
.situation svg {
  grid-row: 1 / span 2;
  grid-column: 2;
  width: 1.4rem;
  height: 1.4rem;
  color: var(--mineral);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.situation--chaud svg {
  color: var(--cuivre-fonce);
}
.situation:hover svg,
.situation:focus-visible svg {
  transform: translateX(0.35rem);
}
.situations__autre {
  margin-top: var(--e-5);
}
@media (min-width: 48em) {
  .situation {
    grid-template-columns: 1fr auto auto;
    padding-block: 1.3rem;
  }
  .situation__vers {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
  }
  .situation svg {
    grid-row: 1;
    grid-column: 3;
  }
}

/* 12. ARTISAN --------------------------------------------------------------- */
.artisan__grille {
  display: grid;
  gap: var(--e-7);
}
.artisan .chapo {
  margin-top: var(--e-5);
}
.artisan .texte {
  margin-top: var(--e-4);
}
.artisan .lien-suite {
  margin-top: var(--e-5);
}
.preuves {
  padding-top: var(--e-4);
  border-top: 1.5px solid var(--anthracite);
}
.preuves__titre {
  font-size: var(--t-petit);
  color: var(--gris);
}
.preuves__liste > div {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: var(--e-4);
  padding-block: var(--e-4);
  border-bottom: 1px solid var(--trait);
}
.preuves__liste dt {
  font-weight: 600;
}
.preuves__liste dd {
  font-size: var(--t-chapo);
  line-height: 1.35;
}
.preuves__liste cite {
  display: block;
  margin-top: 0.3rem;
  font-size: var(--t-note);
  font-style: normal;
  color: var(--gris);
}
@media (min-width: 62em) {
  .artisan__grille {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: var(--e-8);
    align-items: start;
  }
}

/* 13. AVIS ------------------------------------------------------------------ */
.avis__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.9rem;
  margin-top: var(--e-4);
}
.avis__chiffre {
  font-size: var(--t-sous-titre);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.avis__source {
  font-size: var(--t-petit);
  color: var(--gris);
}
.avis__liste {
  display: grid;
  gap: var(--e-6);
  margin-top: var(--e-7);
}
.temoin {
  display: flex;
  flex-direction: column;
  padding-top: var(--e-5);
  border-top: 1.5px solid var(--anthracite);
}
.temoin blockquote p {
  max-width: 40rem;
  font-size: var(--t-chapo);
  line-height: 1.5;
  text-wrap: pretty;
}
.temoin blockquote p + p,
.temoin blockquote p + div p,
.temoin__suite p + p {
  margin-top: 0.75em;
}
.temoin--grand blockquote > p:first-child {
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.125rem);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.018em;
}
/* « Lire la suite » : dépliage fluide, sans hauteur codée en dur */
.js .temoin__suite {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.js .temoin__suite > div {
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s 0.5s;
}
.js .temoin--ouvert .temoin__suite {
  grid-template-rows: 1fr;
}
.js .temoin--ouvert .temoin__suite > div {
  visibility: visible;
  transition-delay: 0s;
}
.temoin__plus {
  align-self: flex-start;
  min-height: 2.75rem;
  margin-top: var(--e-2);
  padding: 0.4rem 0;
  border: 0;
  background: none;
  font-weight: 600;
  color: var(--mineral);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
.temoin figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.75rem;
  margin-top: var(--e-4);
  font-size: var(--t-petit);
}
.temoin figcaption span {
  color: var(--gris);
}
.avis__pied {
  margin-top: var(--e-6);
}
@media (min-width: 62em) {
  .avis__liste {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--e-8);
  }
  .temoin--grand {
    grid-row: span 2;
  }
  /* Sur grand écran, l’avis principal a la place de s’afficher en entier. */
  .js .temoin--grand .temoin__suite {
    grid-template-rows: 1fr;
  }
  .js .temoin--grand .temoin__suite > div {
    visibility: visible;
  }
  .temoin--grand .temoin__plus {
    display: none;
  }
}

/* 14. ZONE : LES NOURRICES -------------------------------------------------- */
/* Une nourrice distribue l’eau vers chaque pièce. Ici, chaque départ est un quartier ou une commune. */
.zone__grille {
  display: grid;
  gap: var(--e-6);
}
.zone .chapo {
  margin-top: var(--e-4);
}
.zone .texte {
  margin-top: var(--e-4);
}
.zone .lien-suite {
  margin-top: var(--e-4);
}
.zone__nourrices {
  display: grid;
  gap: var(--e-6);
}
.nourrice__nom {
  padding-bottom: 0.5rem;
  font-weight: 600;
}
.nourrice__sorties {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.25rem, 1fr));
  --tube: var(--mineral);
}
.nourrice--chaud .nourrice__sorties {
  --tube: var(--cuivre);
}
.nourrice__sorties li {
  position: relative;
  padding: 1.6rem 0.5rem 0.9rem 1rem;
  border-top: 4px solid var(--tube);
  font-size: var(--t-petit);
  font-weight: 500;
  line-height: 1.3;
}
.nourrice__sorties li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0.3rem;
  width: 2px;
  height: 1.2rem;
  background: var(--tube);
}
.nourrice__sorties li::after {
  content: "";
  position: absolute;
  top: 1.1rem;
  left: calc(0.3rem - 3px);
  width: 8px;
  height: 8px;
  border-radius: var(--r-1);
  background: var(--tube);
}
@media (min-width: 62em) {
  .zone__grille {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--e-7) var(--e-8);
    align-items: start;
  }
  .zone .cliche {
    grid-column: 1 / -1;
  }
}

/* 15. APPEL FINAL ------------------------------------------------------------ */
.appel .t-geant {
  max-width: 13em;
}
.appel .chapo {
  margin-top: var(--e-5);
}
.appel .actions {
  margin-top: var(--e-6);
}
.appel .actions .btn {
  flex: 1 1 15rem;
}
@media (min-width: 36em) {
  .appel .actions .btn {
    flex: 0 1 auto;
  }
}
.appel__adresse {
  margin-top: var(--e-6);
  font-style: normal;
  color: var(--gris);
}

/* 16. PIED DE PAGE ------------------------------------------------------------ */
.pied {
  position: relative;
  padding-block: var(--e-8) calc(var(--e-6) + 4.5rem + env(safe-area-inset-bottom));
  background: var(--nuit);
  color: #d5dee3;
  font-size: var(--t-petit);
}
.pied .cadre {
  z-index: auto;
}
.pied__haut {
  display: grid;
  gap: var(--e-6);
}
.pied__nom {
  display: inline-flex;
  align-items: baseline;
  font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--blanc);
  white-space: nowrap;
}
.pied__nom .marque__goutte {
  fill: var(--cuivre-clair);
}
.pied__metier {
  max-width: 22rem;
  margin-top: var(--e-3);
}
.pied__nap {
  font-style: normal;
  line-height: 1.7;
}
.pied__nap strong {
  color: var(--blanc);
  font-weight: 600;
}
.pied__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-5);
}
.pied__nav li + li {
  margin-top: 0.55rem;
}
.pied a {
  display: inline-block;
  padding-block: 0.15rem;
}
.pied__bas {
  display: grid;
  gap: var(--e-3);
  margin-top: var(--e-7);
  padding-top: var(--e-5);
  border-top: 1px solid var(--trait-clair);
  font-size: var(--t-note);
  color: #b9c6cd;
}
.pied__liens {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
}
@media (min-width: 62em) {
  .pied__haut {
    grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr);
    gap: var(--e-7);
  }
}
@media (min-width: 68em) {
  .pied {
    padding-bottom: var(--e-6);
  }
}

/* 17. BARRE MOBILE ET RETOUR EN HAUT ------------------------------------------ */
.barre {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--nuit);
  box-shadow: 0 -4px 20px rgba(16, 40, 58, 0.2);
  transform: translateY(110%);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
html:not(.js) .barre,
.barre--visible {
  transform: none;
}
.barre__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.5rem;
  font-weight: 600;
  text-decoration: none;
}
.barre__btn svg {
  width: 1.15rem;
  height: 1.15rem;
}
.barre__btn--tel {
  background: var(--blanc);
  color: var(--nuit);
}
.barre__btn--devis {
  background: var(--nuit);
  color: var(--blanc);
}
.haut {
  position: fixed;
  right: 0.9rem;
  bottom: calc(4.4rem + env(safe-area-inset-bottom));
  z-index: 41;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1.5px solid var(--nuit);
  border-radius: var(--r-2);
  background: var(--blanc);
  color: var(--nuit);
  box-shadow: var(--ombre-flottant);
  opacity: 0;
  transform: translateY(0.75rem);
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.haut--visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.haut svg {
  width: 1.25rem;
  height: 1.25rem;
  transition: transform 0.25s;
}
.haut:hover svg {
  transform: translateY(-3px);
}
@media (min-width: 68em) {
  .barre {
    display: none;
  }
  .haut {
    right: 1.5rem;
    bottom: 1.5rem;
  }
}


/* 18. PAGES INTÉRIEURES ---------------------------------------------------- */
.tete {
  position: relative;
  padding-top: calc(var(--entete-h) + clamp(1.25rem, 4vw, 3.5rem));
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
}
.saignee--chaud::before {
  background: linear-gradient(to right, #f0bf9c 0 22%, var(--cuivre-clair) 22% 100%);
}
.saignee--tiede::before {
  background: linear-gradient(to right, #dfe6e9 0 22%, #b9c8cf 22% 100%);
}
.ariane ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.5rem;
  font-size: var(--t-note);
  color: var(--gris);
}
.ariane li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--gris-clair);
}
.ariane a {
  text-underline-offset: 0.2em;
}
.tete__grille {
  display: grid;
  gap: var(--e-6);
}
.tete h1 {
  margin-top: var(--e-4);
}
.tete__phrase {
  margin-top: var(--e-3);
  color: var(--mineral);
}
.tete h1 .tete__phrase {
  display: block;
}
.chaud .tete__phrase {
  color: var(--cuivre-fonce);
}
.tete .chapo {
  margin-top: var(--e-5);
}
.tete .actions {
  margin-top: var(--e-6);
}
.tete .actions .btn {
  flex: 1 1 15rem;
}
@media (min-width: 36em) {
  .tete .actions .btn {
    flex: 0 1 auto;
  }
}
@media (min-width: 62em) {
  .tete__grille {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--e-8);
    align-items: end;
  }
  .tete__grille--seule {
    grid-template-columns: minmax(0, 1fr);
  }
}

.section-titre + .chapo {
  margin-top: var(--e-4);
}
.suite-bloc {
  margin-top: var(--e-6);
}
.suite-texte {
  margin-top: var(--e-4);
}
/* Titre et image côte à côte */
.duo {
  display: grid;
  gap: var(--e-6);
}
@media (min-width: 62em) {
  .duo {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: var(--e-8);
    align-items: end;
  }
}

/* Fiches d’intervention : une liste à filets, pas des cartes. */
.fiches {
  margin-top: var(--e-6);
  border-top: 1.5px solid var(--anthracite);
}
.fiche {
  display: grid;
  gap: var(--e-3);
  padding-block: var(--e-5);
  border-bottom: 1px solid var(--trait);
  scroll-margin-top: calc(var(--entete-h) + 1rem);
}
.fiche:target {
  background: linear-gradient(to right, color-mix(in srgb, var(--blanc) 80%, transparent), transparent);
}
.fiche__titre {
  position: relative;
  align-self: start;
  padding-left: 1.1rem;
}
.fiche__titre::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  bottom: 0.2em;
  width: 3px;
  border-radius: 2px;
  background: var(--mineral);
}
.chaud .fiche__titre::before {
  background: var(--cuivre);
}
.fiche__corps > * + * {
  margin-top: var(--e-3);
}
.fiche__corps p {
  max-width: var(--l-texte);
  text-wrap: pretty;
}
.citation {
  max-width: var(--l-texte);
  padding-left: var(--e-4);
  border-left: 2px solid var(--cuivre);
}
.citation p {
  font-size: var(--t-chapo);
  line-height: 1.4;
}
.citation footer {
  margin-top: 0.35rem;
  font-size: var(--t-note);
  color: var(--gris);
}
@media (min-width: 62em) {
  .fiche {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: var(--e-7);
    padding-block: var(--e-6);
  }
}

/* Étapes numérotées (uniquement pour de vraies séquences). */
.etapes {
  display: grid;
  gap: var(--e-5);
  margin-top: var(--e-6);
  counter-reset: etape;
}
.etape {
  position: relative;
  padding: var(--e-4) 0 0 3.25rem;
  border-top: 1.5px solid var(--anthracite);
  counter-increment: etape;
}
.etape::before {
  content: counter(etape);
  position: absolute;
  left: 0;
  top: 0.55rem;
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--mineral);
}
.chaud .etape::before {
  color: var(--cuivre-fonce);
}
.etape h3 {
  font-size: var(--t-chapo);
  font-weight: 600;
  line-height: 1.3;
}
.etape p {
  margin-top: 0.4rem;
  max-width: 30rem;
}
@media (min-width: 62em) {
  .etapes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--e-6);
  }
}

/* Signes et pistes (chauffage) */
.signes {
  margin-top: var(--e-6);
  border-top: 1.5px solid var(--anthracite);
}
.signes > div {
  display: grid;
  gap: 0.3rem;
  padding-block: var(--e-4);
  border-bottom: 1px solid var(--trait);
}
.signes dt {
  font-size: var(--t-chapo);
  font-weight: 600;
  line-height: 1.3;
}
.signes dd {
  max-width: var(--l-texte);
}
@media (min-width: 48em) {
  .signes > div {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--e-6);
    align-items: baseline;
  }
}

/* Schéma de la boucle de chauffage */
.boucle {
  margin-top: var(--e-6);
}
.boucle svg {
  width: 100%;
  max-width: 42rem;
  height: auto;
}
.boucle .trait {
  fill: none;
  stroke: var(--anthracite);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.boucle .trait--fin {
  stroke-width: 1;
  opacity: 0.45;
}
.boucle .depart,
.boucle .retour {
  fill: none;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.boucle .depart {
  stroke: var(--cuivre);
}
.boucle .retour {
  stroke: var(--mineral);
  stroke-dasharray: 10 5;
}
.boucle text {
  fill: var(--anthracite);
  font-size: 22px;
  font-weight: 500;
}
.boucle .petit {
  font-size: 19px;
  fill: var(--gris);
}
.boucle figcaption {
  margin-top: var(--e-3);
}

/* Liste à cocher (préparer sa demande) */
.reperes {
  display: grid;
  gap: 0;
  margin-top: var(--e-6);
  border-top: 1.5px solid var(--anthracite);
}
.reperes li {
  position: relative;
  padding: var(--e-4) 0 var(--e-4) 2.25rem;
  border-bottom: 1px solid var(--trait);
}
.reperes li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: calc(var(--e-4) + 0.3em);
  width: 0.85rem;
  height: 0.45rem;
  border-left: 2.5px solid var(--mineral);
  border-bottom: 2.5px solid var(--mineral);
  transform: rotate(-45deg);
}
.reperes strong {
  font-weight: 600;
}
@media (min-width: 62em) {
  .reperes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--e-8);
  }
}

/* Renvois vers les autres pages */
.renvois {
  display: grid;
  gap: 0;
  margin-top: var(--e-6);
  border-top: 1.5px solid var(--anthracite);
}
.renvoi {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.2rem var(--e-4);
  align-items: center;
  padding: var(--e-5) 0.5rem var(--e-5) 0;
  border-bottom: 1px solid var(--trait);
  text-decoration: none;
}
.renvoi::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--blanc) 75%, transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.renvoi:hover::after,
.renvoi:focus-visible::after {
  transform: scaleX(1);
}
.renvoi__nom {
  font-size: var(--t-sous-titre);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.2;
}
.renvoi__desc {
  grid-column: 1;
  color: var(--gris);
  font-size: var(--t-petit);
}
.renvoi svg {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 1.4rem;
  height: 1.4rem;
  color: var(--mineral);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.renvoi:hover svg,
.renvoi:focus-visible svg {
  transform: translateX(0.35rem);
}
@media (min-width: 62em) {
  .renvois {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--e-8);
  }
}

/* Fiche d’identité (page entreprise) */
.identite {
  display: grid;
  gap: var(--e-7);
}
.identite .plaque__lignes {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: 0;
}
.identite .plaque__lignes dt {
  margin-top: 0.7rem;
  font-size: var(--t-note);
}
.identite .plaque__lignes dt:first-child {
  margin-top: 0;
}
@media (min-width: 30em) {
  .identite .plaque__lignes {
    grid-template-columns: auto 1fr;
    gap: 0.6rem 1.25rem;
  }
  .identite .plaque__lignes dt {
    margin-top: 0;
    font-size: inherit;
  }
}
.identite .plaque__titre {
  padding-bottom: 0.8rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid var(--trait);
  font-size: var(--t-chapo);
  font-weight: 600;
}
.identite .note {
  margin-top: var(--e-3);
}
@media (min-width: 62em) {
  .identite {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: var(--e-8);
    align-items: start;
  }
}

/* 19. FORMULAIRE -------------------------------------------------------------- */
.contact__grille {
  display: grid;
  gap: var(--e-7);
}
@media (min-width: 62em) {
  .contact__grille {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: var(--e-8);
    align-items: start;
  }
}
.form {
  display: grid;
  gap: var(--e-5);
  margin-top: var(--e-6);
  scroll-margin-top: calc(var(--entete-h) + 1rem);
}
.form__duo {
  display: grid;
  gap: var(--e-5);
}
@media (min-width: 36em) {
  .form__duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.champ > label,
.champ__titre {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 600;
}
.champ__option {
  font-weight: 400;
  color: var(--gris);
}
.champ input[type="text"],
.champ input[type="tel"],
.champ input[type="email"],
.champ select,
.champ textarea {
  display: block;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--gris);
  border-radius: var(--r-2);
  background: var(--blanc);
  font-size: 1rem; /* 16 px minimum : pas de zoom automatique sur iPhone */
  line-height: 1.4;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.champ textarea {
  min-height: 9rem;
  resize: vertical;
}
.champ select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--anthracite) 50%), linear-gradient(135deg, var(--anthracite) 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 50%, calc(100% - 0.9rem) 50%;
  background-size: 0.35rem 0.35rem;
  background-repeat: no-repeat;
}
.champ input:hover,
.champ select:hover,
.champ textarea:hover {
  border-color: var(--anthracite);
}
.champ input:focus-visible,
.champ select:focus-visible,
.champ textarea:focus-visible {
  outline: none;
  border-color: var(--mineral);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mineral) 30%, transparent);
}
.champ [aria-invalid="true"] {
  border-color: #a1321f;
  box-shadow: 0 0 0 3px rgba(161, 50, 31, 0.16);
}
.champ__aide {
  margin-top: 0.35rem;
  font-size: var(--t-note);
  color: var(--gris);
}
.champ__erreur {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.4rem;
  font-size: var(--t-petit);
  font-weight: 500;
  color: #8f2a19;
}
.champ__erreur::before {
  content: "!";
  flex: none;
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  border-radius: 50%;
  background: #8f2a19;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}
.champ--fichier input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.depot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
}
.depot__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.5rem 1rem;
  border: 1.5px dashed var(--gris);
  border-radius: var(--r-2);
  background: color-mix(in srgb, var(--blanc) 60%, transparent);
  font-weight: 600;
  cursor: pointer;
}
.depot__btn svg {
  width: 1.2rem;
  height: 1.2rem;
}
.champ--fichier input:focus-visible + .depot .depot__btn {
  outline: 3px solid var(--cuivre);
  outline-offset: 3px;
}
.depot__nom {
  font-size: var(--t-petit);
  color: var(--gris);
}
.form__piege {
  position: absolute;
  left: -9999px;
}
.form__fin {
  display: grid;
  gap: var(--e-4);
}
.form__fin .btn {
  justify-self: start;
  min-width: 14rem;
}
.form__fin .btn:disabled {
  opacity: 0.7;
  cursor: progress;
}
.alerte {
  padding: var(--e-4) var(--e-5);
  border: 1.5px solid #8f2a19;
  border-left-width: 5px;
  border-radius: var(--r-2);
  background: #fbefec;
  color: #5e1b10;
}
.alerte ul {
  margin-top: 0.4rem;
  padding-left: 1.1rem;
  list-style: disc;
}
.alerte a {
  color: inherit;
}
.confirmation {
  padding: var(--e-6);
  border: 1.5px solid var(--mineral);
  border-left-width: 5px;
  border-radius: var(--r-2);
  background: color-mix(in srgb, var(--blanc) 70%, transparent);
}
.confirmation > * + * {
  margin-top: var(--e-3);
}
.confirmation:focus {
  outline: none;
}
.coordonnees {
  display: grid;
  gap: var(--e-5);
  padding-top: var(--e-4);
  border-top: 1.5px solid var(--anthracite);
}
.coordonnees h2,
.coordonnees h3 {
  font-size: var(--t-petit);
  font-weight: 500;
  color: var(--gris);
}
.coordonnees__gros {
  display: inline-block;
  margin-top: 0.2rem;
  font-size: var(--t-sous-titre);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.coordonnees address {
  margin-top: 0.2rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5;
}
.coordonnees .lien-suite {
  margin-top: 0.3rem;
}
.suite-liste {
  display: grid;
  gap: var(--e-3);
  margin-top: 0.5rem;
  counter-reset: suite;
}
.suite-liste li {
  position: relative;
  padding-left: 2rem;
  counter-increment: suite;
}
.suite-liste li::before {
  content: counter(suite);
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 600;
  color: var(--mineral);
}

/* Pages de texte (mentions légales, confidentialité) */
.prose {
  max-width: 44rem;
}
.prose h2 {
  margin-top: var(--e-7);
  font-size: var(--t-sous-titre);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.012em;
}
.prose h2:first-child {
  margin-top: 0;
}
.prose p,
.prose ul,
.prose dl {
  margin-top: var(--e-4);
}
.prose ul {
  padding-left: 1.2rem;
  list-style: disc;
}
.prose li + li {
  margin-top: 0.35rem;
}
.prose dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.15rem;
}
.prose dt {
  margin-top: 0.6rem;
  font-size: var(--t-petit);
  color: var(--gris);
}
.prose dd {
  font-weight: 500;
}
.prose a {
  text-underline-offset: 0.22em;
}
.a-confirmer {
  padding: 0.05em 0.35em;
  border-radius: var(--r-1);
  background: #fde9a8;
  color: #4d3a00;
  font-weight: 600;
}

/* Mode démonstration (aperçu local ou sur vd-studio.fr/preview/) */
.demo {
  padding: var(--e-3) var(--e-4);
  border: 1.5px dashed var(--mineral);
  border-radius: var(--r-2);
  font-size: var(--t-petit);
}
.message .demo {
  margin-top: var(--e-5);
  max-width: var(--l-texte);
}

/* Page 404 et page de remerciement */
.message {
  min-height: 62vh;
  display: grid;
  align-content: center;
}
.message .chapo {
  margin-top: var(--e-5);
}
.message .actions {
  margin-top: var(--e-6);
}


/* 20. MOUVEMENT, IMPRESSION ----------------------------------------------- */
/* Révélations au défilement (activées par le script, donc absentes si le mouvement est réduit). */
.anime .piquage::before {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s;
}
.anime .piquage::after {
  transform: scale(0);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.anime .piquage.vu::before,
.anime .piquage.vu::after {
  transform: none;
}
/* Photos : la photo n’est jamais masquée (sinon le navigateur retarde son téléchargement).
   Un voile flou, tiré d’une miniature intégrée à la page, la recouvre ; dès qu’elle est chargée
   et à l’écran, le voile se retire de haut en bas en 0,7 s (l’essentiel visible dès 0,25 s)
   et la photo se pose doucement pendant 1,5 s. */
.photo {
  position: relative;
  isolation: isolate;
  display: block;
  overflow: hidden;
  border-radius: var(--r-2);
}
.photo::before,
.photo::after {
  content: "";
  position: absolute;
  inset: -8%;
  background: var(--apercu) center / cover no-repeat;
  filter: blur(14px);
}
.photo::before {
  z-index: -1; /* derrière la photo : visible pendant son chargement */
}
.photo::after {
  display: none;
}
@media (prefers-reduced-motion: no-preference) {
  .js .photo::after {
    display: block;
    z-index: 1;
    clip-path: inset(0 0 0 0);
    transition: clip-path 0.7s cubic-bezier(0.25, 0.8, 0.25, 1), visibility 0s 0.7s;
  }
  .js .photo.vu::after {
    clip-path: inset(100% 0 0 0);
    visibility: hidden;
  }
  .js .photo img {
    transition: transform 1.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .js .photo:not(.vu) img {
    transform: scale(1.06);
  }
}

/* 21. EN-TÊTES PHOTO, CLICHÉS, LOUPE ------------------------------------- */
/* En-tête photo : la photo occupe le fond, un voile de la couleur de la page garde le texte lisible.
   Sur grand écran, la photo n’occupe que la partie droite et se fond dans le voile à gauche. */
.tete--photo {
  --voile: 16 40 58; /* bleu nuit */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: rgb(var(--voile)) !important;
  color: var(--blanc);
}
.tete--chaud {
  --voile: 46 28 20; /* braise */
}
.fond-photo {
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--entete-h) + var(--bande) + 14rem); /* sur mobile, la photo ne couvre que le haut : elle reste nette */
  z-index: 0;
  overflow: hidden;
}
.fond-photo::before,
.fond-photo::after {
  content: "";
  position: absolute;
  inset: 0;
}
.fond-photo::before {
  inset: -8%;
  z-index: -1;
  background: var(--apercu) center / cover no-repeat;
  filter: blur(18px);
}
/* Sur mobile : photo bien visible dans la bande du haut, voile dense dès que le texte commence */
.fond-photo::after {
  background: linear-gradient(
    180deg,
    rgb(var(--voile) / 0.45) 0,
    rgb(var(--voile) / 0.25) calc(var(--entete-h) + var(--bande) * 0.35),
    rgb(var(--voile) / 0.88) calc(var(--entete-h) + var(--bande) + 0.25rem),
    rgb(var(--voile) / 0.94) 75%,
    rgb(var(--voile)) 100%
  );
}
.fond-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--cadrage, 50% 50%);
}
.tete--photo .cadre {
  position: relative;
  z-index: 2;
}
.tete--photo .saignee {
  z-index: 1;
  background: rgb(var(--voile));
}
/* Sur mobile, une bande de photo bien visible avant le texte */
.tete--photo {
  --bande: 24vw;
  padding-top: calc(var(--entete-h) + var(--bande));
}
.hero.tete--photo {
  --bande: 32vw;
}
.tete--photo .hero__metier,
.tete--photo .tete__phrase {
  color: var(--froid);
}
.tete--chaud .tete__phrase {
  color: var(--cuivre-clair);
}
.tete--photo .chapo {
  color: #dfe6ea;
}
.tete--photo .ariane ol {
  color: #c5d0d6;
}
.tete--photo .ariane li + li::before {
  color: #8fa3ac;
}
.tete--photo .plaque {
  border-color: transparent;
  background: var(--ton-pierre);
  color: var(--anthracite);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6);
}
/* Grand écran : la colonne de texte reste sur le voile plein, la photo commence là où le texte finit. */
@media (min-width: 62em) {
  .tete--photo {
    --colonne: min(38rem, 46vw);
    padding-top: calc(var(--entete-h) + clamp(3rem, 7vw, 7rem));
  }
  .fond-photo {
    left: calc(var(--decal) + var(--bord-g) + var(--colonne) - 6rem);
    bottom: 0;
    height: auto;
  }
  .fond-photo::after {
    background:
      linear-gradient(90deg, rgb(var(--voile)) 0, rgb(var(--voile) / 0.86) 6rem, rgb(var(--voile) / 0.25) 16rem, rgb(var(--voile) / 0.08) 100%),
      linear-gradient(180deg, rgb(var(--voile) / 0.5) 0%, transparent 22%, transparent 72%, rgb(var(--voile) / 0.85) 100%);
  }
  .tete__texte,
  .hero__texte {
    max-width: var(--colonne);
  }
  .hero.tete--photo {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: min(100svh, 58rem);
  }
  .hero.tete--photo .cadre {
    width: 100%;
  }
  .tete.tete--photo {
    min-height: min(78svh, 40rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .tete.tete--photo .cadre {
    width: 100%;
  }
}

/* En-tête fixe en clair tant qu’il survole la photo (avec le script ; sans lui, il reste opaque) */
html:not(.js) .entete {
  background-color: var(--ton-pierre);
  box-shadow: 0 1px 0 var(--trait);
}
.js .entete-photo .entete:not(.entete--pose) {
  color: var(--blanc);
}
.js .entete-photo .entete:not(.entete--pose) .marque__metier {
  color: #c5d0d6;
}
.js .entete-photo .entete:not(.entete--pose) .marque__goutte,
.js .entete-photo .entete:not(.entete--pose) .entete__tel svg {
  fill: var(--cuivre-clair);
  color: var(--cuivre-clair);
}
.js .entete-photo .entete:not(.entete--pose) .btn--plein {
  background: var(--blanc);
  color: var(--nuit);
}
.js .entete-photo .entete:not(.entete--pose) .btn--plein::before {
  background: var(--froid);
}
.js .entete-photo .entete:not(.entete--pose) .entete__rond {
  border-color: var(--blanc);
  color: var(--blanc);
}
.js .entete-photo .entete:not(.entete--pose) .entete__rond--plein {
  background: var(--blanc);
  color: var(--nuit);
}

/* Entrée : le texte monte comme un niveau d’eau, la photo se pose */
@media (prefers-reduced-motion: no-preference) {
  .tete--photo .fond-photo img {
    animation: photo-pose 2.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .tete--photo [data-entree] {
    animation: niveau 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
    animation-delay: calc(var(--i, 0) * 90ms + 80ms);
  }
  .tete--photo .plaque[data-entree] {
    animation-name: plaque-pose;
  }
}
@keyframes photo-pose {
  from {
    transform: scale(1.09);
  }
}
@keyframes niveau {
  from {
    opacity: 0;
    transform: translateY(0.9rem);
    clip-path: inset(100% 0 0 0);
  }
  to {
    clip-path: inset(-1rem -1rem -1rem -1rem);
  }
}
@keyframes plaque-pose {
  from {
    opacity: 0;
    transform: translateX(1.5rem);
  }
}

/* Cliché : une photo cadrée avec un coude (comme un tube cintré), un tube qui l’épouse,
   une loupe sur un détail du métier et un léger effet de profondeur au défilement. */
.cliche {
  --coude: clamp(2.5rem, 5vw, 5.5rem);
  --tube: var(--cuivre);
  --ecart: 10px;
  --r-loupe: 2.75rem;
  margin: 0;
}
.cliche--froid {
  --tube: var(--mineral);
}
.cliche__zone {
  position: relative;
}
/* le tube qui épouse le coude */
.cliche__zone::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: calc(-1 * var(--ecart));
  right: calc(-1 * var(--ecart));
  width: 58%;
  height: 62%;
  border-top: 3px solid var(--tube);
  border-right: 3px solid var(--tube);
  border-top-right-radius: calc(var(--coude) + var(--ecart));
  pointer-events: none;
}
.cliche__cadre {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-2) var(--coude) var(--r-2) var(--r-2);
  background: #c9d3d8;
}
.cliche__plan {
  position: absolute;
  inset: 0;
}
.cliche__plan img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--cadrage, 50% 50%);
  border-radius: 0;
}
.cliche--miroir .cliche__zone::before {
  right: auto;
  left: calc(-1 * var(--ecart));
  border-right: 0;
  border-left: 3px solid var(--tube);
  border-top-right-radius: 0;
  border-top-left-radius: calc(var(--coude) + var(--ecart));
}
.cliche--miroir .cliche__cadre {
  border-radius: var(--coude) var(--r-2) var(--r-2) var(--r-2);
}
.cliche__legende {
  display: flex;
  gap: 0.6rem;
  max-width: 30rem;
  margin-top: var(--e-4);
  font-size: var(--t-petit);
  line-height: 1.45;
  color: var(--gris);
}
/* petit cercle : renvoie à la loupe */
.cliche__legende::before {
  content: "";
  flex: none;
  width: 0.85rem;
  height: 0.85rem;
  margin-top: 0.2rem;
  border: 2px solid var(--tube);
  border-radius: 50%;
}
.js .cliche[data-detail] .cliche__legende {
  margin-top: calc(var(--e-4) + var(--r-loupe));
}
.cliche--bande .cliche__cadre {
  aspect-ratio: 16 / 10;
}
.cliche--bande .cliche__zone::before {
  width: 34%;
}
.bande-photo {
  padding-block: var(--e-6) var(--e-8);
}

/* La loupe (ajoutée par le script) */
.loupe__repere,
.loupe__trait,
.loupe__verre {
  position: absolute;
  pointer-events: none;
}
.loupe__repere {
  z-index: 2;
  width: 1.4rem;
  height: 1.4rem;
  margin: -0.7rem 0 0 -0.7rem;
  border: 2px solid var(--blanc);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--tube), 0 2px 10px rgba(0, 0, 0, 0.35);
}
.loupe__trait {
  z-index: 3;
  height: 2px;
  margin-top: -1px;
  background: var(--blanc);
  box-shadow: 0 0 0 1px var(--tube);
  transform-origin: left center;
}
.loupe__verre {
  z-index: 4;
  width: calc(var(--r-loupe) * 2);
  height: calc(var(--r-loupe) * 2);
  margin: calc(-1 * var(--r-loupe)) 0 0 calc(-1 * var(--r-loupe));
  overflow: hidden;
  border: 3px solid var(--blanc);
  border-radius: 50%;
  background: #c9d3d8;
  box-shadow: 0 0 0 3px var(--tube), 0 14px 30px -10px rgba(0, 0, 0, 0.5);
}
.loupe__verre img {
  position: absolute;
  max-width: none;
  border-radius: 0;
}
.cliche--suit .loupe__repere,
.cliche--suit .loupe__trait,
.cliche--suit .loupe__verre img {
  transition: none !important;
}
@media (prefers-reduced-motion: no-preference) {
  .js .cliche__zone::before {
    clip-path: inset(0 100% 100% 0);
    transition: clip-path 1.1s cubic-bezier(0.25, 0.8, 0.25, 1) 0.15s;
  }
  .js .cliche--miroir .cliche__zone::before {
    clip-path: inset(0 0 100% 100%);
  }
  .js .cliche.vu .cliche__zone::before {
    clip-path: inset(-4px -4px -4px -4px);
  }
  .loupe__repere {
    scale: 0;
    transition: scale 0.35s cubic-bezier(0.3, 1.5, 0.5, 1) 0.45s, left 0.35s ease, top 0.35s ease;
  }
  .loupe__trait {
    scale: 0 1;
    transition: scale 0.45s cubic-bezier(0.25, 0.8, 0.25, 1) 0.7s;
  }
  .loupe__verre {
    opacity: 0;
    scale: 0.6;
    transition: opacity 0.35s ease 0.95s, scale 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) 0.95s;
  }
  .loupe__verre img {
    transition: left 0.35s ease, top 0.35s ease;
  }
  .cliche.vu .loupe__repere,
  .cliche.vu .loupe__trait,
  .cliche.vu .loupe__verre {
    opacity: 1;
    scale: 1;
  }
  /* le repère respire doucement : il invite à explorer la photo */
  .cliche.vu .loupe__repere::after {
    content: "";
    position: absolute;
    inset: -2px;
    border: 2px solid var(--blanc);
    border-radius: 50%;
    animation: respire 2.6s ease-out 1.6s infinite;
  }
}
@keyframes respire {
  from {
    transform: scale(1);
    opacity: 0.8;
  }
  to {
    transform: scale(2.4);
    opacity: 0;
  }
}
@media (min-width: 62em) {
  .cliche {
    --r-loupe: 4.25rem;
    --ecart: 14px;
  }
  .js .cliche[data-detail] .cliche__legende {
    margin-top: var(--e-4);
  }
  .cliche--bande .cliche__cadre {
    aspect-ratio: 16 / 7;
  }
  .cliche--etroite .cliche__cadre {
    aspect-ratio: 16 / 6;
  }
}
/* Les bandes s’étendent jusqu’au bord droit de l’écran */
.cliche--bande {
  margin-right: calc(-1 * (var(--bord-d) + var(--decal)));
}
.cliche--bande .cliche__cadre {
  border-radius: var(--coude) 0 0 0;
}
.cliche--bande .cliche__zone::before {
  right: auto;
  left: calc(-1 * var(--ecart));
  border-right: 0;
  border-left: 3px solid var(--tube);
  border-top-right-radius: 0;
  border-top-left-radius: calc(var(--coude) + var(--ecart));
  height: 70%;
}
.cliche--bande .cliche__legende {
  padding-right: var(--bord-d);
}

/* Un peu de chaleur autour des chapitres */
.chapitre {
  position: relative;
}
.chapitre::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.chapitre--a::before {
  background: radial-gradient(55% 60% at 82% 40%, rgba(134, 187, 216, 0.22), transparent 70%);
}
.chapitre--b::before {
  background: radial-gradient(60% 60% at 22% 45%, rgba(230, 164, 118, 0.3), transparent 72%);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}
@media print {
  .entete,
  .menu,
  .barre,
  .haut,
  .fil,
  .saignee {
    display: none !important;
  }
  body {
    background: #fff !important;
    color: #000;
  }
  .reseau,
  .pied {
    background: #fff !important;
    color: #000;
  }
}