/* Chauffage Verlinde : feuille de style.
   Univers : la fonte des radiateurs (encre et surfaces sombres), le plâtre des pièces de coron
   l'hiver (fond), la flamme bleue d'une chaudière qui marche (seule couleur d'action), le jaune
   du gaz réservé à l'alerte. Titres en Familjen Grotesk (une fonte à pièges d'encre, comme une
   pièce coulée), texte en Fira Sans. Angles de 3 px au plus, aucune ombre portée décorative. */

@font-face {
  font-family: "Familjen Grotesk";
  src: url("fonts/familjen-grotesk-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  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: "Fira Sans";
  src: url("fonts/fira-sans-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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: "Fira Sans";
  src: url("fonts/fira-sans-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  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 {
  /* Couleurs */
  --fond: #EEF0EE;          /* plâtre d'hiver */
  --papier: #F8F9F8;
  --zinc: #E1E5E4;
  --trait: #C5CBCA;
  --trait-doux: #D7DCDB;
  --encre: #17191C;         /* fonte */
  --encre-douce: #4A5156;
  --fonte: #17191C;
  --fonte-2: #1F2227;
  --fonte-3: #2A2E34;
  --fonte-trait: #3A3F46;
  --sur-fonte: #ECEEEC;
  --sur-fonte-doux: #A8AFB3;
  --flamme: #2050FF;        /* la flamme bleue : seule couleur d'action */
  --flamme-fonce: #1838CC;
  --flamme-claire: #8AA4FF;
  --flamme-voile: #E3E8FF;
  --sur-flamme: #F7F8FF;
  --jaune-gaz: #F5C400;     /* alerte gaz uniquement */
  --erreur: #B3261E;
  --erreur-sombre: #FF9C8F;
  --zone-1: #7D95FF;
  --zone-2: #AEBDFF;
  --zone-3: #D9E0FF;

  /* Typographie */
  --police-titre: "Familjen Grotesk", "Arial Narrow", Arial, sans-serif;
  --police-texte: "Fira Sans", "Segoe UI", Arial, sans-serif;
  --t-hero: clamp(2.35rem, 1.45rem + 3.7vw, 4.6rem);
  --t-1: clamp(2rem, 1.45rem + 2.3vw, 3.3rem);
  --t-2: clamp(1.6rem, 1.25rem + 1.45vw, 2.45rem);
  --t-3: clamp(1.2rem, 1.08rem + 0.5vw, 1.5rem);
  --t-texte: clamp(1rem, 0.96rem + 0.18vw, 1.0875rem);
  --t-petit: 0.9rem;

  /* Rythme */
  --gouttiere: clamp(16px, 4vw, 40px);
  --section: clamp(56px, 7vw, 112px);
  --rayon: 3px;
  --entete-h: 68px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --duree: 220ms;
  color-scheme: light;
}

/* Lenis (règles reprises de /_commun/vendor/lenis.css : une feuille bloquante de moins) */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Base                                                                 */
/* ------------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--entete-h) + var(--brnsg-barre, 0px) + 16px);
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--police-texte);
  font-size: var(--t-texte);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
}

h1,
h2,
h3,
h4 {
  font-family: var(--police-titre);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.022em;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

img,
svg,
picture {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--flamme);
  outline-offset: 3px;
}

::selection {
  background: var(--flamme);
  color: var(--sur-flamme);
}

html {
  scrollbar-color: var(--encre-douce) var(--zinc);
}

ul,
ol {
  margin: 0;
  padding: 0;
}

address {
  font-style: normal;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

.visuellement-cache {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.evitement {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 9995;
  background: var(--flamme);
  color: var(--sur-flamme);
  padding: 10px 16px;
  border-radius: var(--rayon);
  font-weight: 600;
  text-decoration: none;
}

.evitement:focus {
  top: calc(var(--brnsg-barre, 0px) + 8px);
}

.colonne {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--gouttiere);
}

/* Icônes (traits) */
.icone {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icone-lien {
  width: 0.85em;
  height: 0.85em;
  margin-left: 0.25em;
  display: inline-block;
  vertical-align: -0.05em;
}

/* Pastille d'état d'ouverture (remplie par horaires.js) */
.pastille {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sur-fonte-doux);
  flex: none;
}

[data-brnsg-horaires] {
  font-variant-numeric: tabular-nums;
}

*:has(> [data-brnsg-horaires][data-etat="ouvert"]) > .pastille,
.pastille:has(+ span [data-brnsg-horaires][data-etat="ouvert"]),
.pastille:has(+ [data-brnsg-horaires][data-etat="ouvert"]) {
  background: #3CC47C;
  box-shadow: 0 0 0 3px rgba(60, 196, 124, 0.22);
}

/* ------------------------------------------------------------------ */
/* Boutons et liens                                                     */
/* ------------------------------------------------------------------ */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 22px;
  border: 2px solid transparent;
  border-radius: var(--rayon);
  font-family: var(--police-texte);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duree) var(--ease), border-color var(--duree) var(--ease), color var(--duree) var(--ease), transform 120ms var(--ease);
}

.bouton:active {
  transform: translateY(1px);
}

.bouton--flamme {
  background: var(--flamme);
  color: var(--sur-flamme);
}

.bouton--flamme:hover {
  background: var(--flamme-fonce);
  text-decoration: none;
}

.bouton--ligne {
  border-color: currentColor;
  background: transparent;
}

.bouton--ligne:hover {
  background: var(--encre);
  border-color: var(--encre);
  color: var(--fond);
  text-decoration: none;
}

.section--fonte .bouton--ligne:hover,
.gaz .bouton--ligne:hover {
  background: var(--sur-fonte);
  border-color: var(--sur-fonte);
  color: var(--encre);
}

.bouton--gaz {
  background: var(--jaune-gaz);
  color: var(--encre);
  text-align: left;
}

.bouton--gaz:hover {
  background: #FFD84D;
  text-decoration: none;
}

.bouton--petit {
  min-height: 44px;
  padding: 10px 18px;
  font-size: 0.95rem;
}

.bouton--large {
  min-height: 54px;
  padding: 14px 26px;
  font-size: 1.05rem;
}

.bouton[disabled] {
  background: var(--trait);
  color: var(--encre-douce);
  cursor: not-allowed;
}

.bouton[aria-busy="true"] {
  cursor: progress;
  opacity: 0.85;
}

.bouton-lien {
  background: none;
  border: 0;
  padding: 10px 2px;
  min-height: 44px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.bouton-lien:hover {
  text-decoration-thickness: 2px;
}

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--trait);
}

.lien-fleche .icone-fleche {
  transition: transform var(--duree) var(--ease);
}

.lien-fleche:hover .icone-fleche,
a:hover .lien-fleche .icone-fleche {
  transform: translateX(4px);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 28px;
}

.source {
  font-size: var(--t-petit);
  color: var(--encre-douce);
  text-decoration-color: var(--trait);
}

.section--fonte .source,
.gaz .source,
.pied .source {
  color: var(--sur-fonte-doux);
  text-decoration-color: var(--fonte-trait);
}

.liste-coches,
.liste-moins {
  list-style: none;
  display: grid;
  gap: 10px;
}

.liste-coches li,
.liste-moins li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.liste-coches .icone {
  color: var(--flamme);
  stroke-width: 2.4;
  margin-top: 0.22em;
}

.section--fonte .liste-coches .icone {
  color: var(--flamme-claire);
}

.liste-moins .icone {
  color: var(--encre-douce);
  stroke-width: 2.4;
  margin-top: 0.22em;
}

.notes {
  list-style: none;
  display: grid;
  gap: 10px;
  margin-top: 22px;
  font-size: 0.95rem;
  color: var(--encre-douce);
}

.notes li {
  padding-left: 18px;
  position: relative;
}

.notes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 2px;
  background: var(--trait);
}

.section--fonte .notes {
  color: var(--sur-fonte-doux);
}

.section--fonte .notes li::before {
  background: var(--fonte-trait);
}

/* ------------------------------------------------------------------ */
/* Sections                                                             */
/* ------------------------------------------------------------------ */

.section {
  padding: var(--section) 0;
}

.section--zinc {
  background: var(--zinc);
}

.section--fonte {
  background: var(--fonte);
  color: var(--sur-fonte);
}

.section--serre {
  padding-top: 24px;
}

.section-tete {
  max-width: 760px;
  margin-bottom: clamp(28px, 4vw, 48px);
}

.titre-section {
  font-size: var(--t-2);
  margin-bottom: 18px;
}

.chapo {
  font-size: clamp(1.05rem, 1rem + 0.25vw, 1.2rem);
  color: var(--encre-douce);
  line-height: 1.55;
}

.section--fonte .chapo {
  color: var(--sur-fonte-doux);
}

/* ------------------------------------------------------------------ */
/* En-tête                                                              */
/* ------------------------------------------------------------------ */

.entete {
  position: sticky;
  top: var(--brnsg-barre, 0px);
  z-index: 900;
  background: var(--fonte);
  color: var(--sur-fonte);
  border-bottom: 1px solid var(--fonte-3);
  transition: transform 320ms var(--ease);
}

.entete--cachee {
  transform: translateY(-100%);
}

.entete__grille {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: var(--entete-h);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: none;
}

.logo__texte {
  display: grid;
  line-height: 1;
}

.logo__nom {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: -0.03em;
}

/* Le point du i est la flamme bleue de la veilleuse. */
.logo__i {
  position: relative;
  display: inline-block;
}

.logo__i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0.06em;
  width: 0.2em;
  height: 0.2em;
  background: var(--flamme-claire);
  border-radius: 0 50% 50% 50%;
  transform: translateX(-50%) rotate(45deg);
}

.logo:hover .logo__i::after {
  background: #B8C7FF;
}

.logo__metier {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sur-fonte-doux);
  margin-top: 4px;
}

.nav {
  margin-left: auto;
}

.nav__liste {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav__liste a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--rayon);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--sur-fonte);
  position: relative;
}

.nav__liste a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 2px;
  background: var(--flamme-claire);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duree) var(--ease);
}

.nav__liste a:hover::after,
.nav__liste a[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav__gaz {
  display: none;
}

.entete__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.entete__tel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 12px;
  border-radius: var(--rayon);
  background: var(--flamme);
  color: var(--sur-flamme);
  text-decoration: none;
  min-height: 48px;
  transition: background-color var(--duree) var(--ease);
}

.entete__tel:hover {
  background: var(--flamme-fonce);
}

.entete__tel-texte {
  display: grid;
  line-height: 1.15;
}

.entete__numero {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.entete__statut {
  font-size: 0.74rem;
  opacity: 0.92;
  white-space: nowrap;
}

.menu-bouton {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--fonte-trait);
  border-radius: var(--rayon);
  color: var(--sur-fonte);
  cursor: pointer;
}

.menu-bouton__traits {
  position: relative;
  width: 18px;
  height: 2px;
  background: currentColor;
  transition: background-color var(--duree);
}

.menu-bouton__traits::before,
.menu-bouton__traits::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
  transition: transform var(--duree) var(--ease);
}

.menu-bouton__traits::before {
  top: -6px;
}

.menu-bouton__traits::after {
  top: 6px;
}

.menu-bouton[aria-expanded="true"] .menu-bouton__traits {
  background: transparent;
}

.menu-bouton[aria-expanded="true"] .menu-bouton__traits::before {
  transform: translateY(6px) rotate(45deg);
}

.menu-bouton[aria-expanded="true"] .menu-bouton__traits::after {
  transform: translateY(-6px) rotate(-45deg);
}

.menu-bouton__texte {
  font-weight: 600;
  font-size: 0.9rem;
}

@media (max-width: 1060px) {
  .menu-bouton {
    display: inline-flex;
  }

  .nav {
    position: fixed;
    left: 0;
    right: 0;
    top: calc(var(--entete-h) + var(--brnsg-barre, 0px));
    bottom: 0;
    margin: 0;
    background: var(--fonte);
    border-top: 1px solid var(--fonte-3);
    padding: 20px var(--gouttiere) 40px;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--duree) var(--ease), transform var(--duree) var(--ease), visibility 0s linear var(--duree);
  }

  .nav--ouverte {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity var(--duree) var(--ease), transform var(--duree) var(--ease);
  }

  .nav__liste {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__liste a {
    font-family: var(--police-titre);
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    padding: 14px 0;
    border-bottom: 1px solid var(--fonte-3);
    border-radius: 0;
  }

  .nav__liste a::after {
    left: 0;
    right: auto;
    width: 40px;
    bottom: 10px;
  }

  .nav__gaz {
    display: flex;
    gap: 10px;
    margin-top: 28px;
    color: var(--sur-fonte-doux);
    font-size: 0.95rem;
  }

  .nav__gaz .icone {
    color: var(--jaune-gaz);
    margin-top: 0.2em;
  }

  body.menu-ouvert {
    overflow: hidden;
  }
}

@media (max-width: 560px) {
  :root {
    --entete-h: 62px;
  }

  .entete__grille {
    gap: 10px;
  }

  .logo__nom {
    font-size: 1.35rem;
  }

  .logo__metier {
    display: none;
  }

  .entete__tel {
    padding: 6px 10px;
    gap: 8px;
    min-height: 46px;
  }

  .entete__tel .icone {
    display: none;
  }

  .entete__numero {
    font-size: 1rem;
  }

  .entete__statut {
    font-size: 0.68rem;
  }

  .menu-bouton {
    padding: 8px 10px;
  }

  .menu-bouton__texte {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (max-width: 359px) {
  .entete__statut {
    display: none;
  }
}

/* ------------------------------------------------------------------ */
/* Hero et courbe de la nuit                                            */
/* ------------------------------------------------------------------ */

.hero {
  position: relative;
  isolation: isolate;
  background: var(--fonte);
  color: var(--sur-fonte);
  min-height: clamp(660px, calc(100svh - var(--entete-h) - var(--brnsg-barre, 0px)), 900px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__photo,
.hero__photo img {
  width: 100%;
  height: 100%;
}

.hero__photo img {
  object-fit: cover;
  object-position: 62% 40%;
}

.hero__voile {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(14, 16, 19, 0.9) 0%, rgba(14, 16, 19, 0.72) 34%, rgba(14, 16, 19, 0.25) 66%, rgba(14, 16, 19, 0.1) 100%),
    linear-gradient(180deg, rgba(14, 16, 19, 0.35) 0%, rgba(14, 16, 19, 0) 30%, rgba(14, 16, 19, 0) 55%, rgba(14, 16, 19, 0.55) 100%);
}

.hero__contenu {
  position: relative;
  padding-top: clamp(36px, 4.4vw, 76px);
  padding-bottom: calc(17.4vw + 56px);
  flex: 1;
}

.hero__titre {
  font-size: var(--t-hero);
  max-width: 13.5em;
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.hero__chapo {
  font-size: clamp(1.06rem, 0.98rem + 0.4vw, 1.3rem);
  max-width: 36em;
  margin-top: 22px;
  color: #D9DDDC;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 32px;
}

.hero__tel {
  display: grid;
  gap: 2px;
  text-decoration: none;
}

.hero__tel-numero {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.2rem);
  letter-spacing: 0.005em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hero__tel:hover .hero__tel-numero {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.12em;
}

.hero__tel-etat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  color: var(--sur-fonte-doux);
}

.hero__courbe {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  margin: 0;
  z-index: 1;
}

.courbe-hero {
  position: relative;
}

.courbe-hero svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.courbe-hero--etroite {
  display: none;
}

.courbe__remplissage {
  fill: var(--fond);
}

.courbe__froid,
.courbe__chaud {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.courbe__froid {
  stroke: #9AA3A8;
}

.courbe__chaud {
  stroke: var(--flamme);
  stroke-width: 3;
}

.courbe__point {
  fill: var(--sur-fonte);
  stroke: var(--fonte);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.courbe__tige {
  stroke: rgba(236, 238, 236, 0.45);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.courbe__evenement--relance .courbe__point {
  fill: var(--flamme);
  stroke: var(--fond);
  stroke-width: 2.5;
}

/* Étiquettes HTML posées sur le tracé : taille fixe, quelle que soit la largeur de l'écran. */
.courbe__etiquettes,
.courbe__graduations {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.courbe__etiquette {
  position: absolute;
  transform: translate(-6px, -100%);
  padding-bottom: 2px;
  white-space: nowrap;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--sur-fonte);
  text-shadow: 0 1px 3px rgba(14, 16, 19, 0.85), 0 0 1px rgba(14, 16, 19, 0.9);
}

.courbe__etiquette--fin {
  transform: translate(calc(-100% + 6px), -100%);
}

.courbe__etiquette--dessous {
  transform: translate(-50%, 12px);
}

.courbe__etiquette--claire {
  color: var(--encre);
  text-shadow: none;
}

.courbe__graduations span {
  position: absolute;
  bottom: 3px;
  transform: translateX(-50%);
  font-size: 0.74rem;
  color: var(--encre-douce);
  font-variant-numeric: tabular-nums;
}

.hero__legende {
  position: absolute;
  left: calc(max(0px, (100% - 1240px) / 2) + var(--gouttiere));
  top: 0;
  transform: translateY(calc(-100% - 4px));
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--sur-fonte-doux);
}

@media (max-width: 760px) {
  .hero {
    min-height: 640px;
  }

  /* La courbe étroite garde ses proportions (400 x 160) : sa hauteur suit la largeur, la place
     réservée sous le texte aussi (étiquette « 1 h 40 » à 34,5 % de la largeur du bas du hero). */
  .hero__contenu {
    padding-top: 36px;
    padding-bottom: max(176px, calc(34.5vw + 30px));
  }

  .hero__voile {
    background:
      linear-gradient(180deg, rgba(14, 16, 19, 0.88) 0%, rgba(14, 16, 19, 0.7) 45%, rgba(14, 16, 19, 0.42) 75%, rgba(14, 16, 19, 0.3) 100%);
  }

  .hero__photo img {
    object-position: 50% 50%;
  }

  .courbe-hero--large {
    display: none;
  }

  .courbe-hero--etroite {
    display: block;
  }

  .courbe__etiquette {
    font-size: 0.74rem;
  }

  .hero__legende-court {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .hero__actions .bouton {
    width: 100%;
  }
}

/* ------------------------------------------------------------------ */
/* Tête des pages intérieures                                           */
/* ------------------------------------------------------------------ */

.page-tete {
  padding: clamp(36px, 5vw, 72px) 0 clamp(40px, 5vw, 80px);
}

.page-tete__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

.page-titre {
  font-size: var(--t-1);
  letter-spacing: -0.03em;
  max-width: 14em;
}

.page-chapo {
  font-size: clamp(1.06rem, 1rem + 0.3vw, 1.25rem);
  color: var(--encre-douce);
  max-width: 34em;
  margin-top: 20px;
}

.page-tete__etat {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  font-size: 0.95rem;
  color: var(--encre-douce);
}

.page-tete__image {
  position: relative;
}

.page-tete__image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--rayon);
}

.page-tete--simple {
  padding-bottom: 20px;
}

.page-tete--simple .page-titre {
  max-width: none;
}

.page-tete--404 {
  min-height: 52vh;
  display: flex;
  align-items: center;
}

.code-erreur {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 1rem;
  color: var(--flamme);
  margin-bottom: 14px;
}

@media (max-width: 860px) {
  .page-tete__grille {
    grid-template-columns: 1fr;
  }

  .page-tete__image {
    order: -1;
  }

  .page-tete__image img {
    aspect-ratio: 3 / 2;
  }
}

/* ------------------------------------------------------------------ */
/* Diagnostic                                                           */
/* ------------------------------------------------------------------ */

.diagnostic-grille {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.25fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.diagnostic-intro {
  position: sticky;
  top: calc(var(--entete-h) + var(--brnsg-barre, 0px) + 28px);
}

.diagnostic-intro .titre-section {
  font-size: var(--t-1);
}

.diagnostic-intro__faits {
  margin-top: 26px;
}

.diagnostic-intro__faits {
  list-style: none;
  display: grid;
  gap: 12px;
}

.diagnostic-intro__faits li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.diagnostic-intro__faits .icone {
  color: var(--flamme);
  stroke-width: 2.4;
  margin-top: 0.22em;
}

.diagnostic-intro__etat {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--trait);
  color: var(--encre-douce);
  font-size: 0.95rem;
}

.diagnostic {
  position: relative;
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: clamp(20px, 3vw, 36px);
}

/* Progression en éléments de radiateur : chacun se remplit de bleu, du pied vers le haut. */
.diagnostic__progression {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 38px;
  margin-bottom: 18px;
  padding-bottom: 4px;
  border-bottom: 3px solid var(--encre);
  width: max-content;
}

.diagnostic__progression .element {
  position: relative;
  width: 14px;
  height: 32px;
  border-radius: 3px 3px 0 0;
  background: var(--zinc);
  border: 1px solid var(--trait);
  border-bottom: 0;
  overflow: hidden;
}

.diagnostic__progression .element::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--flamme);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 420ms var(--ease);
}

.diagnostic__progression .element.est-chaud::after {
  transform: scaleY(1);
}

.diagnostic__progression .element:nth-child(2) {
  height: 34px;
}

.question {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.question__legende {
  display: grid;
  gap: 6px;
  padding: 0;
  margin-bottom: 18px;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: var(--t-3);
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.question__numero {
  font-family: var(--police-texte);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--encre-douce);
}

.question__aide {
  color: var(--encre-douce);
  font-size: 0.95rem;
  margin: -6px 0 16px;
}

.js .question[data-question]:not(.question--active):not(.question--fixe) {
  display: none;
}

.question__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}

.question[data-question="1"] .question__nav {
  justify-content: flex-end;
}

.no-js .question__nav {
  display: none;
}

/* Tuiles de choix (radios natives, utilisables au clavier et au lecteur d'écran) */
.tuiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.tuiles--compactes,
.tuiles--deux {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tuiles--ligne {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.tuile {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 44px 14px 16px;
  min-height: 64px;
  background: #FFFFFF;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  cursor: pointer;
  transition: border-color var(--duree) var(--ease), background-color var(--duree) var(--ease), box-shadow var(--duree) var(--ease);
}

.tuile input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.tuile__corps {
  display: grid;
  gap: 3px;
}

.tuile__libelle {
  font-weight: 600;
  line-height: 1.25;
}

.tuile__aide {
  font-size: 0.86rem;
  color: var(--encre-douce);
  line-height: 1.35;
}

.tuile__coche {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--trait);
  display: grid;
  place-items: center;
  transition: background-color var(--duree), border-color var(--duree);
}

.tuile__coche .icone {
  width: 13px;
  height: 13px;
  stroke-width: 2.8;
  color: var(--sur-flamme);
  opacity: 0;
}

.tuile:hover {
  border-color: var(--encre);
}

.tuile::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  width: 4px;
  border-radius: var(--rayon) 0 0 var(--rayon);
  background: var(--flamme);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 260ms var(--ease);
}

.tuile:has(input:checked) {
  border-color: var(--flamme);
  background: var(--flamme-voile);
  box-shadow: inset 0 0 0 1px var(--flamme);
}

.tuile:has(input:checked)::before {
  transform: scaleY(1);
}

.tuile:has(input:checked) .tuile__coche {
  background: var(--flamme);
  border-color: var(--flamme);
}

.tuile:has(input:checked) .tuile__coche .icone {
  opacity: 1;
}

.tuile:has(input:focus-visible) {
  outline: 3px solid var(--flamme);
  outline-offset: 2px;
}

.tuile--gaz {
  grid-column: 1 / -1;
  border-left: 4px solid var(--jaune-gaz);
  padding-left: 14px;
}

.tuile--gaz::before {
  display: none;
}

.tuile--ligne {
  min-height: 52px;
  align-items: center;
}

.section--fonte .tuile {
  background: var(--fonte-2);
  border-color: var(--fonte-trait);
  color: var(--sur-fonte);
}

.section--fonte .tuile__aide {
  color: var(--sur-fonte-doux);
}

.section--fonte .tuile:hover {
  border-color: var(--sur-fonte-doux);
}

.section--fonte .tuile__coche {
  border-color: var(--fonte-trait);
}

.section--fonte .tuile:has(input:checked) {
  background: #1B2550;
  border-color: var(--flamme-claire);
  box-shadow: inset 0 0 0 1px var(--flamme-claire);
}

.section--fonte .tuile::before {
  background: var(--flamme-claire);
}

.section--fonte .tuile:has(input:checked) .tuile__coche {
  background: var(--flamme-claire);
  border-color: var(--flamme-claire);
}

.section--fonte .tuile:has(input:checked) .tuile__coche .icone {
  color: var(--encre);
}

.champ--code {
  margin-top: 16px;
  max-width: 320px;
}

.diagnostic__sans-js {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--zinc);
  border-radius: var(--rayon);
}

/* Bloc odeur de gaz */
.gaz {
  background: var(--fonte);
  color: var(--sur-fonte);
  border-radius: var(--rayon);
  overflow: hidden;
}

.gaz__bandeau {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  background: var(--jaune-gaz);
  color: var(--encre);
}

.gaz__bandeau .icone {
  width: 26px;
  height: 26px;
  stroke-width: 2.2;
}

.gaz__titre {
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.55rem);
  letter-spacing: -0.015em;
}

.gaz__corps {
  padding: 22px 22px 26px;
}

.gaz__etapes {
  list-style: none;
  counter-reset: etape;
  display: grid;
  gap: 10px;
  margin-bottom: 22px;
}

.gaz__etapes li {
  counter-increment: etape;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  align-items: baseline;
}

.gaz__etapes li::before {
  content: counter(etape);
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--jaune-gaz);
}

.gaz .bouton--gaz {
  width: 100%;
  justify-content: flex-start;
}

.gaz__vital {
  margin-top: 18px;
  font-weight: 600;
}

.gaz__apres {
  color: var(--sur-fonte-doux);
}

.gaz__source {
  font-size: 0.85rem;
  color: var(--sur-fonte-doux);
  margin-top: 16px;
}

.gaz--diagnostic {
  margin: -6px 0 0;
}

.gaz .bouton-lien {
  color: var(--sur-fonte);
  margin-top: 8px;
}

/* Résultat du diagnostic */
.resultat__titre {
  font-size: var(--t-2);
  margin-bottom: 10px;
}

.resultat__texte {
  color: var(--encre-douce);
  max-width: 36em;
}

.resultat__creneau {
  margin-top: 22px;
  padding: 20px 22px 16px;
  background: var(--fonte);
  color: var(--sur-fonte);
  border-radius: var(--rayon);
}

.resultat__libelle {
  font-size: 0.85rem;
  color: var(--sur-fonte-doux);
  margin-bottom: 4px;
}

.resultat__heure {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.15rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.resultat__zone {
  color: var(--sur-fonte-doux);
  font-size: 0.95rem;
}

.frise {
  margin-top: 14px;
}

.frise svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.frise__base {
  stroke: var(--fonte-trait);
  stroke-width: 1;
}

.frise__froid {
  fill: none;
  stroke: #9AA3A8;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.frise__chaud {
  fill: none;
  stroke: var(--flamme-claire);
  stroke-width: 3;
  stroke-linecap: round;
}

.frise__creneau {
  fill: rgba(138, 164, 255, 0.16);
}

.frise__point {
  fill: var(--sur-fonte);
  stroke: var(--fonte);
  stroke-width: 2;
}

.frise__point--chaud {
  fill: var(--flamme-claire);
}

.frise__texte {
  font-family: var(--police-texte);
  font-size: 12.5px;
  fill: var(--sur-fonte-doux);
}

.frise__texte--fort {
  fill: var(--sur-fonte);
  font-weight: 600;
}

.resultat__prix {
  margin-top: 18px;
  padding-left: 14px;
  border-left: 3px solid var(--flamme);
}

.resultat__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  margin-top: 20px;
}

.resultat__conseils {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--trait);
}

.resultat__sous-titre {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 12px;
}

.conseils {
  list-style: none;
  display: grid;
  gap: 10px;
}

.conseils li {
  position: relative;
  padding-left: 22px;
}

.conseils li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--flamme);
}

.resultat__co {
  margin-top: 16px;
  font-size: 0.92rem;
  color: var(--encre-douce);
}

.resultat__formulaire {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--trait);
}

.resultat__recommencer {
  margin-top: 18px;
}

@media (max-width: 960px) {
  .diagnostic-grille {
    grid-template-columns: 1fr;
  }

  .diagnostic-intro {
    position: static;
  }

  .diagnostic-intro__faits,
  .diagnostic-intro__etat {
    display: none;
  }
}

@media (max-width: 560px) {
  .tuiles,
  .tuiles--compactes,
  .tuiles--deux {
    grid-template-columns: 1fr;
  }

  .diagnostic {
    padding: 18px 16px 22px;
    margin: 0 calc(var(--gouttiere) * -0.5);
  }

  .resultat__actions .bouton {
    width: 100%;
  }
}

/* ------------------------------------------------------------------ */
/* Formulaires                                                          */
/* ------------------------------------------------------------------ */

.formulaire {
  display: grid;
  gap: 16px;
}

.champ {
  display: grid;
  gap: 6px;
  min-width: 0;
  border: 0;
  margin: 0;
  padding: 0;
}

.champ > label,
.champ > legend {
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0;
}

.champ--tuiles legend {
  margin-bottom: 8px;
}

.champ__optionnel {
  font-weight: 400;
  color: var(--encre-douce);
}

.champ__aide {
  font-size: 0.86rem;
  color: var(--encre-douce);
  margin: 0;
}

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  background: #FFFFFF;
  border: 1px solid #8F979B;
  border-radius: var(--rayon);
  color: var(--encre);
  font-size: 1rem;
  transition: border-color var(--duree), box-shadow var(--duree);
}

.champ textarea {
  resize: vertical;
  min-height: 104px;
}

.champ input:hover,
.champ select:hover,
.champ textarea:hover {
  border-color: var(--encre);
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--flamme);
  box-shadow: 0 0 0 3px rgba(32, 80, 255, 0.25);
}

.champ input[aria-invalid="true"],
.champ select[aria-invalid="true"] {
  border-color: var(--erreur);
  box-shadow: 0 0 0 1px var(--erreur);
}

.champ input::placeholder {
  color: #737A7E;
}

.select-enveloppe {
  position: relative;
}

.select-enveloppe select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  cursor: pointer;
}

.select-enveloppe::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--encre);
  border-bottom: 2px solid var(--encre);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.champ-rangee {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: end;
}

.champ__erreur {
  color: var(--erreur);
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0;
}

.formulaire__erreur:empty {
  display: none;
}

.champ-piege {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.consentement {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 0.9rem;
  color: var(--encre-douce);
  line-height: 1.5;
  cursor: pointer;
}

.consentement input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--flamme);
  cursor: pointer;
}

.formulaire__note {
  font-size: 0.88rem;
  color: var(--encre-douce);
  margin: 0;
}

.formulaire__succes {
  padding: 22px;
  border: 2px solid var(--flamme);
  background: var(--flamme-voile);
  border-radius: var(--rayon);
}

.formulaire__succes-titre {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-weight: 600;
}

.formulaire__succes-titre .icone {
  color: var(--flamme);
  stroke-width: 2.6;
  width: 22px;
  height: 22px;
  margin-top: 1px;
}

.formulaire .bouton--large {
  width: 100%;
}

.section--formulaire {
  background: var(--fond);
}

.formulaire-grille {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.formulaire-intro {
  position: sticky;
  top: calc(var(--entete-h) + var(--brnsg-barre, 0px) + 28px);
}

.formulaire-carte {
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: clamp(20px, 3vw, 36px);
}

@media (max-width: 860px) {
  .formulaire-grille {
    grid-template-columns: 1fr;
  }

  .formulaire-intro {
    position: static;
  }
}

@media (max-width: 560px) {
  .champ-rangee {
    grid-template-columns: 1fr;
  }

  .formulaire-carte {
    padding: 18px 16px 22px;
    margin: 0 calc(var(--gouttiere) * -0.5);
  }
}

/* Récapitulatif de contrat (entretien) */
.recap {
  margin-top: 26px;
  padding: 20px 22px;
  background: var(--fonte);
  color: var(--sur-fonte);
  border-radius: var(--rayon);
}

.recap__libelle {
  font-size: 0.85rem;
  color: var(--sur-fonte-doux);
  margin-bottom: 4px;
}

.recap__prix {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.8rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}

.recap__unite {
  font-family: var(--police-texte);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--sur-fonte-doux);
}

.recap__detail {
  color: var(--sur-fonte-doux);
  font-size: 0.95rem;
}

.estimation-jointe {
  margin-top: 22px;
  padding: 16px 18px;
  border-left: 3px solid var(--flamme);
  background: var(--papier);
}

.estimation-jointe__titre {
  font-weight: 600;
  margin-bottom: 4px;
}

/* ------------------------------------------------------------------ */
/* Tableaux                                                             */
/* ------------------------------------------------------------------ */

.tableau-enveloppe {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.97rem;
}

.tableau th,
.tableau td {
  text-align: left;
  vertical-align: top;
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid var(--trait);
}

.tableau thead th {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--encre-douce);
  border-bottom: 2px solid var(--encre);
  padding-top: 0;
}

.tableau tbody th {
  font-weight: 600;
}

.tableau__prix {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 1.12rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tableau--tarifs td:last-child {
  color: var(--encre-douce);
}

.tableau--compact th,
.tableau--compact td {
  padding: 8px 18px 8px 0;
}

.tarifs-grille {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.tarifs-intro__source {
  margin-top: 16px;
}

@media (max-width: 860px) {
  .tarifs-grille {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .tableau--tarifs thead {
    display: none;
  }

  .tableau--tarifs,
  .tableau--tarifs tbody,
  .tableau--tarifs tr,
  .tableau--tarifs th,
  .tableau--tarifs td {
    display: block;
  }

  .tableau--tarifs tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--trait);
  }

  .tableau--tarifs th,
  .tableau--tarifs td {
    padding: 0;
    border: 0;
  }

  .tableau--tarifs td:last-child {
    grid-column: 1 / -1;
    font-size: 0.92rem;
  }
}

/* Contrats d'entretien : tableau sur grand écran, cartes empilées sur mobile */
.tableau--contrats th:not(:first-child),
.tableau--contrats td {
  padding-left: 12px;
}

.tableau__formule {
  display: block;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: -0.01em;
  color: var(--encre);
}

.tableau__unite {
  display: block;
  font-weight: 400;
}

.tableau__tva {
  display: block;
  font-weight: 400;
  font-size: 0.84rem;
  color: var(--encre-douce);
}

.tableau--contrats .tableau__prix {
  font-size: 1.5rem;
}

.tableau__inclus ul {
  list-style: none;
  display: grid;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--encre-douce);
}

.tableau__inclus li {
  padding-left: 14px;
  position: relative;
}

.tableau__inclus li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 2px;
  background: var(--flamme);
}

.contrats-cartes {
  display: none;
  list-style: none;
  gap: 14px;
}

.contrat-carte {
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 18px 18px 14px;
}

.contrat-carte__titre {
  font-size: 1.25rem;
  margin-bottom: 2px;
}

.contrat-carte__tva {
  font-size: 0.85rem;
  color: var(--encre-douce);
  margin-bottom: 10px;
}

.contrat-carte dl {
  margin: 0;
  display: grid;
  gap: 0;
}

.contrat-carte dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--trait-doux);
}

.contrat-carte dt {
  font-weight: 600;
}

.contrat-carte dd {
  margin: 0;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 1.1rem;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .tableau-enveloppe--contrats {
    display: none;
  }

  .contrats-cartes {
    display: grid;
  }
}

.notes--ligne {
  margin-top: 24px;
}

/* ------------------------------------------------------------------ */
/* Services (accueil)                                                   */
/* ------------------------------------------------------------------ */

.services {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  grid-template-areas:
    "grand haut1"
    "grand haut2"
    "large large";
  gap: 14px;
}

.service:nth-child(1) {
  grid-area: grand;
}

.service:nth-child(2) {
  grid-area: haut1;
}

.service:nth-child(3) {
  grid-area: haut2;
}

.service:nth-child(4) {
  grid-area: large;
}

.service {
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  overflow: hidden;
  transition: border-color var(--duree) var(--ease);
}

.service:hover {
  border-color: var(--encre);
}

.service__lien {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
}

.service__image {
  overflow: hidden;
  background: var(--zinc);
}

.service__image img {
  width: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}

.service:hover .service__image img {
  transform: scale(1.035);
}

.service--grand .service__image img {
  aspect-ratio: 4 / 3;
}

.service--haut {
  display: grid;
}

.service--haut .service__lien {
  flex-direction: row;
}

.service--haut .service__image {
  flex: 0 0 42%;
}

.service--haut .service__image picture,
.service--haut .service__image img {
  height: 100%;
}

.service--haut .service__image img {
  aspect-ratio: auto;
  min-height: 210px;
}

.service--large .service__lien {
  flex-direction: row;
}

.service--large .service__image {
  flex: 0 0 38%;
}

.service--large .service__image img {
  aspect-ratio: 16 / 9;
  height: 100%;
}

.service__texte {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.service__titre {
  font-size: var(--t-3);
}

.service__texte p {
  margin: 0;
  color: var(--encre-douce);
}

.service__texte .lien-fleche {
  margin-top: auto;
  color: var(--encre);
  text-decoration-color: var(--flamme);
}

.service--grand .service__titre {
  font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem);
}

@media (max-width: 900px) {
  .services {
    grid-template-columns: 1fr;
    grid-template-areas: "grand" "haut1" "haut2" "large";
  }

  .service--haut .service__lien,
  .service--large .service__lien {
    flex-direction: column;
  }

  .service--haut .service__image img,
  .service--large .service__image img {
    aspect-ratio: 3 / 2;
    min-height: 0;
  }
}

/* ------------------------------------------------------------------ */
/* Duos image / texte, encadrés                                         */
/* ------------------------------------------------------------------ */

.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 6vw, 88px);
  align-items: center;
}

.duo--inverse .duo__image {
  order: 2;
}

.duo__image img {
  width: 100%;
  border-radius: var(--rayon);
  object-fit: cover;
}

.duo__image--large img {
  aspect-ratio: 3 / 2;
}

.duo__texte .titre-section {
  margin-bottom: 20px;
}

.duo__source {
  margin-top: 6px;
}

.section--fonte .duo__texte p {
  color: #D3D7D6;
}

@media (max-width: 860px) {
  .duo {
    grid-template-columns: 1fr;
  }

  .duo--inverse .duo__image {
    order: 0;
  }

  .duo__image img {
    max-height: 520px;
  }
}

.encadre {
  margin-top: 28px;
  padding: 18px 20px;
  border: 1px solid var(--trait);
  border-left: 4px solid var(--flamme);
  background: var(--papier);
  border-radius: var(--rayon);
}

.encadre__titre {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 6px;
}

.encadre__source {
  margin-top: 10px;
}

/* ------------------------------------------------------------------ */
/* Visite, étapes, histoire, périmètre, accès                           */
/* ------------------------------------------------------------------ */

.visite {
  margin: 0;
  display: grid;
  gap: 0;
}

.visite__etape {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--trait);
}

.visite__etape:last-child {
  border-bottom: 1px solid var(--trait);
}

.visite dt {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 1.1rem;
}

.visite dd {
  margin: 0;
  color: var(--encre-douce);
}

@media (max-width: 560px) {
  .visite__etape {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

.etapes {
  list-style: none;
  counter-reset: etape;
  display: grid;
  gap: 0;
  margin-bottom: 24px;
}

.etapes__item {
  counter-increment: etape;
  position: relative;
  padding: 14px 0 14px 46px;
  border-top: 1px solid var(--trait);
}

.etapes__item::before {
  content: counter(etape);
  position: absolute;
  left: 0;
  top: 13px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--encre);
  border-radius: 50%;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 0.95rem;
}

.etapes__titre {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 1.12rem;
  margin-bottom: 2px;
}

.etapes__item p:last-child {
  color: var(--encre-douce);
}

.histoire {
  list-style: none;
  display: grid;
  gap: 0;
  position: relative;
}

.histoire__item {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 18px;
  padding: 16px 0;
  border-top: 1px solid var(--trait);
}

.histoire__annee {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.histoire__item:last-child .histoire__annee {
  color: var(--flamme);
}

.perimetre__colonnes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 5vw, 64px);
  margin-top: 12px;
}

.perimetre__titre {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--encre);
}

@media (max-width: 700px) {
  .perimetre__colonnes {
    grid-template-columns: 1fr;
  }
}

.acces {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(28px, 6vw, 88px);
}

.acces__adresse {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem);
  line-height: 1.15;
  margin-bottom: 14px;
}

.acces__bloc p {
  color: #D3D7D6;
}

.acces__infos {
  margin: 24px 0 0;
  display: grid;
  gap: 0;
}

.acces__infos div {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--fonte-trait);
}

.acces__infos dt {
  font-weight: 600;
}

.acces__infos dd {
  margin: 0;
  color: var(--sur-fonte-doux);
}

.acces__etat {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 1.3rem;
  margin-bottom: 18px;
}

.acces__horaires {
  list-style: none;
  display: grid;
  margin-bottom: 18px;
}

.acces__horaires li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--fonte-trait);
}

.acces__horaires li span:last-child {
  text-align: right;
  color: var(--sur-fonte-doux);
}

.acces__gaz {
  margin-top: 18px;
  padding-left: 14px;
  border-left: 3px solid var(--jaune-gaz);
}

@media (max-width: 860px) {
  .acces {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .acces__infos div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* ------------------------------------------------------------------ */
/* Obligations légales et sources                                       */
/* ------------------------------------------------------------------ */

.loi-grille {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.loi-intro {
  position: sticky;
  top: calc(var(--entete-h) + var(--brnsg-barre, 0px) + 28px);
}

.loi {
  list-style: none;
  display: grid;
  gap: 0;
}

.loi__item {
  padding: 18px 0;
  border-top: 1px solid var(--trait);
}

.loi__item:last-child {
  border-bottom: 1px solid var(--trait);
}

.loi__texte {
  font-size: 1.04rem;
  margin-bottom: 8px;
}

.loi__verifie {
  margin-top: 16px;
  font-size: 0.88rem;
  color: var(--encre-douce);
}

@media (max-width: 860px) {
  .loi-grille {
    grid-template-columns: 1fr;
  }

  .loi-intro {
    position: static;
  }
}

/* ------------------------------------------------------------------ */
/* Graphique détaillé (page dépannage)                                  */
/* ------------------------------------------------------------------ */

.graphique {
  margin: 0;
}

.graphique__cadre {
  position: relative;
}

.graphique__svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.graphique__grille {
  stroke: var(--fonte-3);
  stroke-width: 1;
}

.graphique__axe {
  font-family: var(--police-texte);
  font-size: 14px;
  fill: var(--sur-fonte-doux);
  font-variant-numeric: tabular-nums;
}

.graphique__zone-chaude {
  fill: rgba(138, 164, 255, 0.1);
}

.graphique__froid,
.graphique__chaud {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.graphique__froid {
  stroke: #9AA3A8;
  stroke-width: 2.5;
}

.graphique__chaud {
  stroke: var(--flamme-claire);
  stroke-width: 3;
}

.graphique__tige {
  stroke: var(--fonte-trait);
  stroke-width: 1;
}

.graphique__point {
  fill: var(--sur-fonte);
  stroke: var(--fonte);
  stroke-width: 2;
}

.graphique__evenement--relance .graphique__point {
  fill: var(--flamme-claire);
}

.graphique__etiquette {
  font-family: var(--police-texte);
  font-size: 15px;
  fill: var(--sur-fonte);
}

.graphique__heure {
  font-weight: 600;
  fill: var(--flamme-claire);
}

.graphique__curseur-ligne {
  stroke: var(--sur-fonte-doux);
  stroke-width: 1;
}

.graphique__curseur-point {
  fill: var(--flamme-claire);
  stroke: var(--fonte);
  stroke-width: 2;
}

.graphique__capteur {
  fill: transparent;
  cursor: crosshair;
}

.graphique__bulle {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 6px 10px;
  background: var(--sur-fonte);
  color: var(--encre);
  border-radius: var(--rayon);
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

.graphique__legende {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 18px;
  font-size: 0.92rem;
  color: var(--sur-fonte-doux);
}

.graphique__cle {
  display: inline-block;
  width: 22px;
  height: 3px;
  border-radius: 2px;
  vertical-align: middle;
}

.graphique__cle--froid {
  background: #9AA3A8;
}

.graphique__cle--chaud {
  background: var(--flamme-claire);
  margin-left: 12px;
}

.graphique__table {
  margin-top: 18px;
  color: var(--sur-fonte);
}

.graphique__table summary {
  cursor: pointer;
  font-weight: 600;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.graphique__table .tableau {
  max-width: 360px;
  margin-top: 8px;
}

.graphique__table .tableau th,
.graphique__table .tableau td {
  border-color: var(--fonte-3);
  color: var(--sur-fonte);
}

.graphique__table .tableau thead th {
  border-color: var(--sur-fonte-doux);
  color: var(--sur-fonte-doux);
}

@media (max-width: 760px) {
  .graphique__cadre {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(var(--gouttiere) * -1);
    padding: 0 var(--gouttiere);
  }

  .graphique__svg {
    min-width: 720px;
  }
}

/* ------------------------------------------------------------------ */
/* Carte de la zone                                                     */
/* ------------------------------------------------------------------ */

.carte {
  width: 100%;
  height: auto;
}

.carte__commune {
  stroke: var(--fond);
  stroke-width: 1.4;
  stroke-linejoin: round;
  transition: fill 180ms var(--ease);
}

.carte__commune--z1 {
  fill: var(--zone-1);
}

.carte__commune--z2 {
  fill: var(--zone-2);
}

.carte__commune--z3 {
  fill: var(--zone-3);
}

.carte__commune.est-active,
.carte__commune:hover {
  fill: var(--flamme);
}

.carte__nom {
  font-family: var(--police-texte);
  font-size: 19px;
  font-weight: 600;
  fill: var(--encre);
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(238, 240, 238, 0.55);
  stroke-width: 3px;
}

.carte__depot-halo {
  fill: rgba(23, 25, 28, 0.16);
}

.carte__depot-point {
  fill: var(--encre);
  stroke: var(--sur-fonte);
  stroke-width: 2;
}

.carte--compacte .carte__nom {
  font-size: 24px;
}

.carte__depot-texte {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 21px;
  fill: var(--encre);
  paint-order: stroke;
  stroke: rgba(238, 240, 238, 0.9);
  stroke-width: 4px;
}

.carte__echelle path {
  fill: none;
  stroke: var(--encre);
  stroke-width: 1.6;
}

.carte__echelle text {
  font-family: var(--police-texte);
  font-size: 17px;
  fill: var(--encre);
}

.legende-zones {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 22px 0;
}

.legende-zones li {
  display: flex;
  gap: 12px;
  align-items: center;
}

.legende-zones__cle {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 2px;
  flex: none;
  border: 1px solid rgba(23, 25, 28, 0.15);
}

.legende-zones__cle--z1 {
  background: var(--zone-1);
}

.legende-zones__cle--z2 {
  background: var(--zone-2);
}

.legende-zones__cle--z3 {
  background: var(--zone-3);
}

.zone-accueil {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

@media (max-width: 860px) {
  .zone-accueil {
    grid-template-columns: 1fr;
  }
}

.zone-grille {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

.zone-carte {
  position: relative;
}

.zone-carte__bulle {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 8px 12px;
  background: var(--fonte);
  color: var(--sur-fonte);
  border-radius: var(--rayon);
  font-size: 0.88rem;
  line-height: 1.35;
  pointer-events: none;
  max-width: 240px;
}

.zone-carte__source {
  margin-top: 10px;
  font-size: 0.8rem;
  color: var(--encre-douce);
}

.zone-reponse {
  margin-top: 14px;
  padding: 16px 18px;
  min-height: 92px;
  background: var(--papier);
  border: 1px solid var(--trait);
  border-left: 4px solid var(--trait);
  border-radius: var(--rayon);
  transition: border-color var(--duree);
}

.zone-reponse.est-trouvee {
  border-left-color: var(--flamme);
}

.zone-reponse__commune {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 1.3rem;
  margin-bottom: 4px;
}

.zone-reponse__liste {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.zone-recherche__hors {
  font-size: 0.92rem;
  color: var(--encre-douce);
}

.zone-listes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
}

.zone-liste__titre {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-3);
  margin-bottom: 8px;
}

.zone-liste__delai {
  font-weight: 600;
  margin-bottom: 2px;
}

.zone-liste__forfait {
  color: var(--encre-douce);
  font-size: 0.95rem;
}

.zone-liste__communes {
  list-style: none;
  margin-top: 14px;
  border-top: 2px solid var(--encre);
}

.commune {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 8px 4px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--trait);
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms var(--ease);
}

.commune:hover,
.commune.est-active {
  background: var(--flamme-voile);
}

.commune__cp {
  font-size: 0.86rem;
  color: var(--encre-douce);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .zone-grille {
    grid-template-columns: 1fr;
  }

  .zone-listes {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------ */
/* Avis                                                                 */
/* ------------------------------------------------------------------ */

.avis-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 40px;
  margin-bottom: clamp(24px, 4vw, 44px);
}

.avis-tete .titre-section {
  margin: 0;
}

.avis-tete__note {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
}

.avis-tete__chiffre {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
}

.avis-tete__texte {
  color: var(--encre-douce);
}

.avis-liste {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 14px;
}

.avis {
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.avis:first-child {
  grid-row: 1 / span 2;
  justify-content: center;
  gap: 20px;
  background: transparent;
  border: 0;
  border-left: 4px solid var(--flamme);
  border-radius: 0;
  padding: 8px 0 8px clamp(22px, 3vw, 40px);
}

.avis:first-child .avis__texte {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.95rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.avis:first-child .avis__auteur {
  margin-top: 0;
}

.avis__note {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--flamme);
  margin: 0;
}

.avis__texte {
  margin: 0;
}

.avis__auteur {
  margin: auto 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 0.9rem;
  color: var(--encre-douce);
}

.avis__nom {
  font-weight: 600;
  color: var(--encre);
}

@media (max-width: 800px) {
  .avis-liste {
    grid-template-columns: 1fr;
  }

  .avis:first-child {
    grid-row: auto;
  }
}

/* ------------------------------------------------------------------ */
/* Portraits                                                            */
/* ------------------------------------------------------------------ */

.portraits {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
}

.portrait:nth-child(even) {
  margin-top: 48px;
}

.portrait__image {
  overflow: hidden;
  border-radius: var(--rayon);
  background: var(--trait);
}

.portrait__image img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.portrait__nom {
  font-size: var(--t-3);
  margin-top: 14px;
}

.portrait__role {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--flamme);
  margin: 2px 0 8px;
}

.portrait__texte {
  font-size: 0.95rem;
  color: var(--encre-douce);
}

@media (max-width: 900px) {
  .portraits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .portrait:nth-child(even) {
    margin-top: 32px;
  }
}

/* ------------------------------------------------------------------ */
/* FAQ                                                                  */
/* ------------------------------------------------------------------ */

.faq-grille {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: start;
}

.faq {
  border-top: 2px solid var(--encre);
}

.faq__item {
  border-bottom: 1px solid var(--trait);
}

.faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px 0;
  min-height: 56px;
  cursor: pointer;
  list-style: none;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__signe {
  position: relative;
  width: 16px;
  height: 16px;
  flex: none;
}

.faq__signe::before,
.faq__signe::after {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 16px;
  height: 2px;
  background: currentColor;
  transition: transform var(--duree) var(--ease);
}

.faq__signe::after {
  transform: rotate(90deg);
}

.faq__item[open] .faq__signe::after {
  transform: rotate(0deg);
}

.faq__reponse {
  padding: 0 0 20px;
  color: var(--encre-douce);
  max-width: 44em;
}

@media (max-width: 860px) {
  .faq-grille {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------ */
/* Estimateur de remplacement                                           */
/* ------------------------------------------------------------------ */

.estimateur-grille {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.35fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.estimateur-intro p {
  color: #D3D7D6;
}

.estimateur-intro .liste-coches {
  margin-top: 22px;
}

.estimateur {
  display: grid;
  gap: 26px;
}

.section--fonte .question__legende {
  color: var(--sur-fonte);
}

.estimation {
  padding: 22px 24px;
  border: 1px solid var(--fonte-trait);
  border-radius: var(--rayon);
  background: var(--fonte-2);
  min-height: 120px;
}

.estimation__vide {
  color: var(--sur-fonte-doux);
}

.estimation__libelle {
  color: var(--sur-fonte-doux);
  margin-bottom: 6px;
}

.estimation__prix {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: 10px;
}

.estimation__tva {
  font-weight: 600;
  color: var(--flamme-claire);
}

.estimation__note {
  color: var(--sur-fonte-doux);
  margin-bottom: 18px;
}

@media (max-width: 960px) {
  .estimateur-grille {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------ */
/* Pied de page                                                         */
/* ------------------------------------------------------------------ */

.pied {
  background: var(--fonte);
  color: var(--sur-fonte);
  padding: clamp(48px, 6vw, 88px) 0 28px;
  font-size: 0.95rem;
}

.pied a {
  text-decoration-color: var(--fonte-trait);
}

.pied__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.1fr) minmax(0, 0.8fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
}

.pied__bloc p {
  margin-bottom: 8px;
  color: var(--sur-fonte-doux);
}

.logo--pied {
  margin-bottom: 18px;
}

.pied__adresse {
  color: var(--sur-fonte-doux);
  margin-bottom: 8px;
}

.pied__tel a {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--sur-fonte);
  text-decoration: none;
  white-space: nowrap;
}

.pied__tel a:hover {
  text-decoration: underline;
}

.pied__titre {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--sur-fonte) !important;
  margin-bottom: 12px !important;
}

.pied__titre--suite {
  margin-top: 22px;
}

.pied__horaires,
.pied__liens {
  list-style: none;
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
  color: var(--sur-fonte-doux);
}

.pied__horaires li {
  display: grid;
  gap: 0;
}

.pied__horaires li span:first-child {
  color: var(--sur-fonte);
}

.pied__liens a {
  display: inline-block;
  padding: 3px 0;
  color: var(--sur-fonte);
  text-decoration: none;
}

.pied__liens a:hover {
  text-decoration: underline;
}

.pied__statut {
  color: var(--sur-fonte) !important;
  font-weight: 600;
}

.pied__gaz {
  padding-left: 12px;
  border-left: 3px solid var(--jaune-gaz);
}

.pied__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--fonte-3);
  color: var(--sur-fonte-doux);
  font-size: 0.88rem;
}

.pied__legal p {
  margin: 0;
}

@media (max-width: 960px) {
  .pied__grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .pied__grille {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------ */
/* Barre d'actions mobile                                               */
/* ------------------------------------------------------------------ */

.barre-mobile {
  display: none;
}

@media (max-width: 760px) {
  .barre-mobile {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--brnsg-onglet, 0px);
    z-index: 800;
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 8px;
    padding: 8px var(--gouttiere) calc(8px + env(safe-area-inset-bottom));
    background: var(--fonte);
    border-top: 1px solid var(--fonte-3);
    transition: transform 280ms var(--ease);
  }

  .barre-mobile a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    border-radius: var(--rayon);
    font-weight: 600;
    text-decoration: none;
  }

  .barre-mobile__tel {
    background: var(--flamme);
    color: var(--sur-flamme);
  }

  .barre-mobile__diag {
    border: 1px solid var(--fonte-trait);
    color: var(--sur-fonte);
  }

  .barre-mobile--cachee,
  body.menu-ouvert .barre-mobile {
    transform: translateY(110%);
  }

  body {
    padding-bottom: calc(66px + var(--brnsg-onglet, 0px) + env(safe-area-inset-bottom));
  }
}

/* ------------------------------------------------------------------ */
/* Pages légales                                                        */
/* ------------------------------------------------------------------ */

.texte-legal {
  max-width: 820px;
}

.texte-legal h2 {
  font-size: var(--t-3);
  margin: 36px 0 12px;
}

.texte-legal h2:first-child {
  margin-top: 0;
}

.texte-legal ul {
  padding-left: 1.2em;
  margin: 0 0 1em;
  display: grid;
  gap: 6px;
}

.texte-legal a {
  text-decoration-color: var(--flamme);
}

/* ------------------------------------------------------------------ */
/* Mouvement : états initiaux (classe js-motion posée seulement hors    */
/* prefers-reduced-motion ; motion.js la retire si GSAP manque)          */
/* ------------------------------------------------------------------ */

/* Entrée du texte du hero en CSS : déplacement seul, le texte reste lisible dès la première image. */
@media (prefers-reduced-motion: no-preference) {
  .hero__titre,
  .hero__chapo,
  .hero__actions {
    animation: hero-monte 760ms var(--ease) both;
  }

  .hero__chapo {
    animation-delay: 90ms;
  }

  .hero__actions {
    animation-delay: 170ms;
  }
}

@keyframes hero-monte {
  from {
    transform: translateY(14px);
  }
}

.js-motion .courbe-hero [data-trace],
.js-motion .courbe__evenement,
.js-motion .courbe__etiquette,
.js-motion .courbe__graduations,
.js-motion .hero__legende {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .entete,
  .barre-mobile,
  .brnsg-barre,
  .hero__courbe,
  .diagnostic__progression {
    display: none !important;
  }

  body {
    background: #FFFFFF;
  }
}

/* Ce que comprend chaque formule d'entretien */
.contrats-inclus {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 36px);
  margin-top: 32px;
}

.contrats-inclus__titre {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 1.1rem;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 2px solid var(--encre);
}

.contrats-inclus .liste-coches {
  font-size: 0.95rem;
}

@media (max-width: 860px) {
  .contrats-inclus {
    grid-template-columns: 1fr;
  }
}

/* Page dépannage : le diagnostic dès le premier écran */
.page-tete--diagnostic {
  padding-top: clamp(32px, 4vw, 64px);
}

.page-tete--diagnostic .page-titre {
  font-size: var(--t-1);
}

.tel-grand {
  display: inline-grid;
  gap: 4px;
  margin-top: 26px;
  text-decoration: none;
}

.tel-grand__numero {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem);
  line-height: 1;
  letter-spacing: 0.005em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tel-grand:hover .tel-grand__numero {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.12em;
}

.tel-grand__etat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  color: var(--encre-douce);
}

.page-tete--diagnostic .diagnostic-intro__faits {
  margin-top: 30px;
}

@media (max-width: 960px) {
  .page-tete--diagnostic .diagnostic-intro__faits {
    display: none;
  }
}

/* Bloc gaz de la page dépannage */
.gaz-grille {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.gaz-intro p {
  max-width: 34em;
}

.gaz-intro__image {
  margin-top: 26px;
}

.gaz-intro__image img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--rayon);
}

@media (max-width: 860px) {
  .gaz-grille {
    grid-template-columns: 1fr;
  }
}

/* Tarifs : photo sous l'introduction, lien vers le détail */
.tarifs-intro__image {
  margin-top: 28px;
}

.tarifs-intro__image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--rayon);
}

.tarifs-detail__suite {
  margin-top: 22px;
}

/* Duos : image en portrait, image étirée à la hauteur du texte */
.duo__image--portrait img {
  aspect-ratio: 4 / 5;
  max-height: 640px;
}

.duo--haut {
  align-items: stretch;
}

.duo--haut .duo__image picture,
.duo--haut .duo__image img {
  height: 100%;
}

.duo--haut .duo__image img {
  min-height: 420px;
  object-fit: cover;
}

@media (max-width: 860px) {
  .duo--haut .duo__image img {
    min-height: 0;
    height: auto;
    aspect-ratio: 3 / 2;
  }
}

/* Tuile plomberie : exemples de prix */
.service__exemples {
  list-style: none;
  display: grid;
  gap: 0;
  margin: 4px 0 6px;
  border-top: 1px solid var(--trait);
}

.service__exemples li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--trait);
  font-size: 0.95rem;
}

.service__prix {
  font-family: var(--police-titre);
  font-weight: 700;
  white-space: nowrap;
}

/* Liste d'obligations enveloppée (liste et date de vérification) */
.loi-liste {
  min-width: 0;
}

/* Plan d'accès (OpenStreetMap) */
.plan {
  margin: 22px 0 14px;
}

.plan__svg {
  width: 100%;
  height: auto;
  border-radius: var(--rayon);
}

.plan__fond {
  fill: var(--fonte-2);
}

.plan__stade {
  fill: #252B33;
  stroke: var(--fonte-trait);
  stroke-width: 1.5;
}

.plan__rue {
  fill: none;
  stroke: #3A4048;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plan__grande {
  fill: none;
  stroke: #6B737A;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plan__rail {
  fill: none;
  stroke: #59606A;
  stroke-width: 2.5;
  stroke-dasharray: 10 7;
}

.plan__rue-nom {
  font-family: var(--police-texte);
  font-size: 19px;
  font-weight: 600;
  fill: var(--sur-fonte);
  paint-order: stroke;
  stroke: var(--fonte-2);
  stroke-width: 5px;
  stroke-linejoin: round;
}

.plan__repere circle {
  fill: var(--sur-fonte-doux);
}

.plan__repere text {
  font-family: var(--police-texte);
  font-size: 19px;
  fill: var(--sur-fonte-doux);
  paint-order: stroke;
  stroke: var(--fonte-2);
  stroke-width: 5px;
}

.plan__depot-halo {
  fill: rgba(138, 164, 255, 0.22);
}

.plan__depot-point {
  fill: var(--flamme);
  stroke: var(--sur-flamme);
  stroke-width: 3;
}

.plan__depot-texte {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 26px;
  fill: var(--sur-fonte);
  paint-order: stroke;
  stroke: var(--fonte-2);
  stroke-width: 6px;
}

.plan__depot-adresse {
  font-family: var(--police-texte);
  font-size: 19px;
  fill: var(--sur-fonte-doux);
  paint-order: stroke;
  stroke: var(--fonte-2);
  stroke-width: 5px;
}

.plan__echelle path {
  fill: none;
  stroke: var(--sur-fonte);
  stroke-width: 2;
}

.plan__echelle text {
  font-family: var(--police-texte);
  font-size: 18px;
  fill: var(--sur-fonte);
}

.plan__source {
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--sur-fonte-doux);
}

/* Prix du contrat rappelé dans le formulaire, près des choix */
.recap-ligne {
  margin: 0;
  padding: 12px 16px;
  background: var(--fonte);
  color: var(--sur-fonte);
  border-radius: var(--rayon);
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

/* Carte sur petit écran : moins de noms, plus grands */
@media (max-width: 560px) {
  .carte__nom {
    display: none;
  }

  .carte__nom--majeur {
    display: inline;
    font-size: 34px;
  }

  .carte--compacte .carte__nom--majeur {
    font-size: 36px;
  }

  .carte__depot-texte {
    font-size: 32px;
  }

  .carte__echelle text {
    font-size: 28px;
  }
}

/* Très petit écran : les heures se colleraient à l'étiquette de la relance. */
@media (max-width: 359px) {
  .courbe-hero--etroite .courbe__graduations {
    display: none;
  }
}

/* Tablette et petit bureau : la courbe est plus basse, les heures laissent la place à
   l'étiquette de la relance (elles la touchent sous 1 170 px environ). */
@media (min-width: 761px) and (max-width: 1240px) {
  .courbe-hero--large .courbe__graduations {
    display: none;
  }
}