/* PLUME ÉTUDES — Habillage commun aux pages de lecture
 * (à propos, prestations, FAQ, mentions légales, test) + pied de page du site.
 * Le mode slide ne s'applique pas ici : ce sont des pages qu'on lit, pas qu'on avance.
 *
 * UNE SEULE GRILLE POUR TOUT LE SITE (--largeur-page) : l'en-tête, le corps et
 * le pied de page commencent sur la même verticale. Avant, l'en-tête était
 * calée sur 1100 px et le corps sur 720 px : le logo et le titre de la page
 * ne s'alignaient pas, avec 190 px d'écart de chaque côté. Sur un site dont la
 * charte s'appelle « le plan coté », c'est le défaut qu'on voit en premier.
 */

/* Rail commun : la même largeur et les mêmes marges pour les trois zones. */
.header-top__inner,
.header-main,
.page,
.footer__inner,
.footer__legal {
  max-width: var(--largeur-page);
  margin-inline: auto;
  padding-inline: clamp(var(--e-4), 4vw, var(--marge-page));
}

/* ═══════════════════════════════════════════════════════════════
   EN-TÊTE — commune aux six pages
   Le logo est inliné en SVG (jamais en <img>) : c'est la seule façon
   qu'il hérite de currentColor et reste lisible en inversé.
   ═══════════════════════════════════════════════════════════════ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--papier);
  border-bottom: var(--trait-cote) solid var(--encre);
  padding-top: var(--safe-haut);
}

/* Bandeau fin (ordinateur) : qui l'on est et comment joindre un humain.
   Le public hésite face aux sollicitations du secteur : l'identité légale et
   le numéro, visibles avant tout le reste, rassurent plus qu'un slogan.
   Sur téléphone, le numéro est dans l'en-tête et la barre du pouce. */
.header-top {
  display: none;
  background-color: var(--papier-gris);
  border-bottom: var(--trait-fin) solid var(--cote-faible);
  font-size: var(--t-legende);
  color: var(--gris);
}

@media (min-width: 1000px) {
  .header-top {
    display: block;
  }

  /* La marge de sécurité du haut (encoche) n'a pas de sens sur ordinateur :
     elle laissait une bande blanche de 8 px au-dessus du bandeau gris. */
  .site-header {
    padding-top: 0;
  }
}

.header-top__inner {
  padding-block: 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
}

.header-top__note {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

.header-top__tel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--encre);
  font-weight: var(--gr-valeur);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  white-space: nowrap;
}

.header-top__tel svg {
  color: var(--tirage);
}

.header-top__tel:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Barre principale */
.header-main {
  padding-block: var(--e-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-6);
}

.logo {
  display: inline-flex;
  align-items: center;
  color: var(--encre);
  text-decoration: none;
  flex-shrink: 0;
}

.logo svg {
  display: block;
  height: 42px;             /* plume graduée (390 × 74) : 221 px */
  width: auto;
}

.logo:hover {
  color: var(--texte);
}

/* La signature du logo était peinte en dur dans le SVG de chaque page.
   Elle passe par le token, et bascule au jaune de chantier sur fond encre :
   le bleu de tirage ne s'emploie pas sur fond sombre (charte §02). */
.logo__baseline {
  fill: var(--tirage);
}

.footer .logo__baseline {
  fill: var(--chantier);
}

/* Plume graduée : le trait sous la plume est un aplat de jaune de
   chantier, sur fond papier comme sur fond encre. */
.logo__trait {
  fill: var(--chantier);
}

/* Numéro de l'en-tête : téléphone uniquement (voir « En-tête du téléphone ») */
.header__tel {
  display: none;
}

/* Navigation — visible sur ordinateur, repliée sur téléphone */
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--e-5);
  margin-left: auto;
}

.site-nav__link {
  font-size: var(--t-courant);
  color: var(--encre);
  text-decoration: none;
  padding: var(--e-1) 0;
  border-bottom: var(--trait-fort) solid transparent;
  white-space: nowrap;
}

.site-nav__link:hover {
  border-bottom-color: var(--encre);
  color: var(--encre);
}

/* Page courante : le visiteur doit savoir où il est */
.site-nav__link[aria-current="page"] {
  border-bottom-color: var(--encre);
  font-weight: var(--gr-cote);
}

/* Le bouton de l'en-tête est un raccourci permanent, pas l'action principale
   de la page : il reste petit et sombre. L'action principale, elle, est
   toujours .btn-plein (aplat de jaune de chantier). */
.header__cta {
  padding: 12px 18px;
  border: var(--trait-fin) solid var(--encre);
  background-color: var(--encre);
  color: var(--papier);
  font-size: var(--t-valeur);   /* 15 px : 13 px se lisait mal à côté d'un menu en 17 px */
  line-height: var(--li-valeur);
  font-weight: var(--gr-cote);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.header__cta:hover {
  background-color: var(--papier);
  color: var(--encre);
}

/* Bouton du menu — masqué sur ordinateur */
.header__burger {
  display: none;
  background: none;
  border: var(--trait-fin) solid var(--cote-faible);
  padding: 8px;
  cursor: pointer;
  color: var(--encre);
  line-height: 0;
}

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

/* ── L'EN-TÊTE ENTRE 901 ET 1150 PX ──────────────────────────────────────
   Le logo (196 px), les cinq entrées de navigation (631 px) et le bouton
   (168 px) réclament 1 125 px avec les écarts et les marges : sur un écran
   de 1 024 px — un portable très courant — le bouton sortait du cadre et
   toute la page se mettait à défiler latéralement. Les écarts se resserrent
   dans cette bande, la navigation reste entière. Au-delà de 1 150 px, tout
   retrouve son blanc ; en dessous de 1 000 px, aucun resserrement ne suffit
   et la navigation passe au menu, comme sur téléphone. */
@media (min-width: 1000px) and (max-width: 1150px) {
  /* Plus de marge propre à cette bande : l'en-tête reste sur le rail, aligné
     avec le bandeau, le fil d'Ariane et le titre de la page. */
  .header-main {
    gap: var(--e-4);
  }

  .site-nav {
    gap: var(--e-3);
  }

  .header__cta {
    padding-inline: var(--e-3);
  }

  .logo svg {
    height: 37px;             /* 195 px : la plume graduée tient à 1 024 px */
  }
}

@media (max-width: 999px) {
  .header-main {
    gap: var(--e-4);
  }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background-color: var(--papier);
    border-bottom: var(--trait-cote) solid var(--encre);
    padding: var(--e-2) var(--e-4) var(--e-6);
  }

  /* Le déroulant « .is-open » a disparu avec le panneau latéral : sur
     téléphone, la navigation de l'en-tête reste masquée, c'est le menu
     qui la porte. */

  .site-nav__link {
    padding: var(--e-4) 0;
    border-bottom: var(--trait-fin) solid var(--cote-faible);
    font-size: var(--t-titre-3);
  }

  .site-nav__link:hover,
  .site-nav__link[aria-current="page"] {
    border-bottom-color: var(--cote-faible);
  }

  .header__burger {
    display: block;
    order: 3;
  }

  .header__cta {
    order: 2;
    margin-left: auto;
  }

  /* Sur la page du simulateur, le CTA de l'en-tête pointe vers la page où
     on se trouve déjà : redondant, et le burger + le bouton ne tenaient
     plus sur 375 px (le burger sortait du cadre). Le burger seul suffit
     à rouvrir le menu. */
  .page-simulateur .header__cta {
    display: none;
  }

  .logo svg {
    height: 33px;
  }
}

@media (max-width: 560px) {
  .header-top__note {
    display: none;
  }

  .header-top__inner {
    justify-content: flex-end;
  }

  /* ── En-tête du téléphone (référence : iPhone 13 mini, 375 × 629 visibles)
     Mesuré avant : 90 px de haut, logo à 27 px (signature illisible),
     bouton collé au bord droit, burger coupé. Le logo, le bouton et le
     burger ne tiennent pas ensemble sur 343 px utiles.
     Partout où la barre du pouce existe, elle porte déjà l'action (Simulateur)
     et le menu : l'en-tête ne garde que la marque, en grand, et le numéro —
     un public qui hésite veut voir qu'un humain répond. 64 px de haut au
     lieu de 90 : 26 px de page en plus sur le premier écran. */
  .header-main {
    padding-block: var(--e-2);
    gap: var(--e-3);
  }

  .logo svg {
    height: 34px;             /* 179 px de large */
  }

  /* Décidé ici, plus par le script. Avant, l'en-tête s'affichait avec le
     burger et le bouton, puis page.js les retirait et faisait apparaître le
     numéro : l'en-tête changeait sous les yeux du visiteur à chaque visite
     (la principale source de sautillement du site). La barre du pouce est
     désormais sur toutes les pages : ces deux commandes y sont déjà. */
  .header-main .header__burger,
  .header-main .header__cta {
    display: none;
  }

  .header__tel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--cible-min);
    margin-left: auto;
    color: var(--encre);
    font-size: var(--t-valeur);
    font-weight: var(--gr-valeur);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    white-space: nowrap;
  }

  .header__tel svg {
    flex-shrink: 0;
    color: var(--tirage);
  }

}

/* ═══════════════════════════════════════════════════════════════
   CORPS DE PAGE
   Le conteneur fait la largeur du site ; le PARAGRAPHE, lui, garde sa
   longueur de ligne. Ce sont deux choses différentes, et les confondre
   donnait soit un texte illisible sur 1120 px, soit une colonne de
   720 px perdue au milieu d'un écran de 1440.
   ═══════════════════════════════════════════════════════════════ */

.page {
  padding-block: var(--e-12) var(--e-20);
  counter-reset: chapitre;
}

/* Tout ce qui se lit tient dans la colonne de texte. Les blocs qui ont
   leur propre mise en page (relevés, encadré d'action, sommaire) s'en
   affranchissent explicitement plus bas. */
.page > p,
.page > ul,
.page > ol,
.page > h1,
.page > h2,
.page > h3,
.page > .page__kicker,
.page > .page__lead {
  max-width: var(--colonne-texte);
}

/* ── Sur-titre : une seule écriture de sur-titre pour tout le site.
   11 px, graisse 600, +0,18 em, bleu de tirage (charte §03). Il y en avait
   deux : celui-ci en 13 px gris à +0,08 em, et le .surtitre correct de
   tokens.css employé seulement sur l'accueil. */
.page__kicker {
  font-size: var(--t-surtitre);
  font-weight: var(--gr-cote);
  line-height: var(--li-surtitre);
  letter-spacing: var(--il-cote);
  text-transform: uppercase;
  color: var(--tirage);
  margin-bottom: var(--e-3);
}

/* ── Titre de page : porté par une cote pleine largeur, comme sur l'accueil.
   Un seul système de titre pour les six pages. */
.page h1 {
  margin-bottom: var(--e-6);
}

/* Le chapô : même corps que le sous-titre mais graisse 300 — la hiérarchie
   vient de la graisse, jamais d'un second caractère (charte §01). */
.page__lead {
  font-size: var(--t-titre-3);
  font-weight: var(--gr-fin);
  line-height: var(--li-courant);
  color: var(--encre);
  margin-bottom: var(--e-12);
}

/* ── Chapitre — numéroté et coté, exactement comme les sections de la charte.
   Avant, h2 et h3 partageaient la graisse 800, la couleur encre et la casse :
   sur une page qui en aligne vingt, plus rien ne disait où commençait un
   sujet. La hiérarchie vient maintenant de la position sur la cote :
   cote pleine largeur + numéro pour le chapitre, court repère pour le
   sous-chapitre. */
.page h2 {
  counter-increment: chapitre;
  position: relative;
  margin-top: var(--e-20);
  margin-bottom: var(--e-6);
  scroll-margin-top: calc(var(--entete-h) + var(--e-6));
}

/* ── Sous-chapitre : graisse 700 (pas 800) et un court trait au-dessus.
   Assez proche pour appartenir au même plan, assez différent pour qu'on
   ne confonde jamais un chapitre et sa subdivision. */
.page h3 {
  position: relative;
  font-weight: var(--gr-valeur);
  margin-top: var(--e-10);
  margin-bottom: var(--e-3);
  padding-top: var(--e-4);
}

.page h3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--e-12);
  height: var(--trait-fin);
  background-color: var(--cote);
}

/* Listes au filet — jamais de puce décorative, jamais d'emoji */
.page ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

.page ul li {
  position: relative;
  padding-left: var(--e-6);
  line-height: var(--li-courant);
  margin-bottom: var(--e-2);
}

.page ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 12px;
  border-bottom: var(--trait-fin) solid var(--gris);
}

/* ── Le relevé : il occupe toute la largeur utile, pas la colonne de texte.
   C'est un tableau de mesures, il se lit en balayant les valeurs de haut en
   bas — il lui faut donc la place d'aligner ses valeurs à droite. */
.page > .releve {
  max-width: none;
  margin: var(--e-8) 0;
  border-top: var(--trait-fin) solid var(--cote-faible);
}

.page > .releve .releve__ligne {
  border-bottom: var(--trait-fin) solid var(--cote-faible);
}

/* Téléphone : libellé et valeur refusaient de rétrécir — une valeur longue
   (adresse, SIRET, durée de conservation) poussait la page à 529 px de large
   sur un écran de 375. La valeur passe sous son libellé, calée à droite. */
@media (max-width: 560px) {
  .page > .releve .releve__ligne {
    flex-wrap: wrap;
    row-gap: var(--e-1);
  }

  .page > .releve .releve__valeur {
    flex: 1 1 100%;
    overflow-wrap: anywhere;
  }
}

/* Question / réponse (FAQ) — chaque bloc est autonome, bon pour la lecture et le GEO */
.qa {
  max-width: var(--colonne-texte);
  margin-bottom: var(--e-10);
  padding-bottom: var(--e-10);
  border-bottom: var(--trait-fin) solid var(--cote-faible);
  counter-increment: chapitre;
}

.qa:last-of-type {
  border-bottom: none;
}

.qa__q {
  position: relative;
  font-size: var(--t-titre-3);
  font-weight: var(--gr-valeur);
  color: var(--encre);
  line-height: var(--li-titre-3);
  margin-bottom: var(--e-4);
}

/* La question est portée par un vrai h2 : Google et les lecteurs d'écran en
   ont besoin. Mais c'est le bloc .qa qui compte les questions — sans cette
   ligne, le h2 incrémente une seconde fois et la numérotation saute de deux. */
.qa h2.qa__q {
  counter-increment: none;
  margin-top: 0;
  margin-bottom: var(--e-4);
  scroll-margin-top: calc(var(--header-h, 113px) + var(--e-6));
}

/* Le numéro de la question, dans le style d'un libellé de cote. */
.qa__q::before {
  content: counter(chapitre, decimal-leading-zero);
  display: block;
  margin-bottom: var(--e-2);
  font-size: var(--t-surtitre);
  font-weight: var(--gr-cote);
  letter-spacing: var(--il-cote);
  color: var(--tirage);
}

/* La ligne de relevé est définie une seule fois, dans tokens.css : libellé,
   trait d'attache, valeur. Elle n'est pas redéclarée ici — la redéclarer
   ajoutait un filet SOUS la ligne en plus du trait d'attache, soit deux
   traits pour une seule information. */

/* ═══════════════════════════════════════════════════════════════
   VISUELS — filet, jamais d'ombre ni d'arrondi
   Une image de chantier est une pièce du dossier : elle est encadrée
   d'un filet et légendée comme une cote. Tant que ce ne sont pas les
   photos du client, la légende le dit — on ne fait pas passer une image
   de démonstration pour une référence (charte §07).
   ═══════════════════════════════════════════════════════════════ */

.figure-cote {
  margin: var(--e-8) 0;
  max-width: none;
}

.figure-cote img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: var(--trait-fin) solid var(--cote);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  filter: saturate(0.92);
}

.figure-cote figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-2) var(--e-4);
  margin-top: var(--e-2);
  padding-top: var(--e-2);
  border-top: var(--trait-fin) solid var(--cote-faible);
  font-size: var(--t-surtitre);
  font-weight: var(--gr-cote);
  letter-spacing: var(--il-cote);
  text-transform: uppercase;
  color: var(--tirage);
}

/* La mention d'honnêteté, en clair et non en petits caractères. */
.figure-cote .demo {
  color: var(--gris);
  font-weight: var(--gr-fin);
  letter-spacing: 0;
  text-transform: none;
  font-style: italic;
  font-size: var(--t-legende);
}

/* Deux visuels en regard, quand un seul ne dit pas assez. */
.visuels {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-6);
  margin: var(--e-8) 0;
}

@media (min-width: 720px) {
  .visuels {
    grid-template-columns: 1fr 1fr;
  }
}

.visuels .figure-cote {
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   ENCADRÉ D'ACTION EN FIN DE PAGE
   C'est le point d'arrivée de la lecture : il porte le bandeau de
   chantier, seul endroit de la page où le jaune apparaît en aplat.
   ═══════════════════════════════════════════════════════════════ */

.page__cta {
  max-width: none;
  margin-top: var(--e-20);
  padding: var(--e-10);
  border: var(--trait-cote) solid var(--encre);
  background-color: var(--papier);
}

.page__cta h2 {
  counter-increment: none;
  margin-top: 0;
  margin-bottom: var(--e-4);
  padding-top: 0;
  border-top: none;
  max-width: var(--colonne-texte);
}

.page__cta h2::before,
.page__cta h2::after {
  content: none;
}

.page__cta p {
  max-width: var(--colonne-texte);
}

.page__cta .btn-plein,
.page__cta .btn-vide {
  margin-top: var(--e-4);
}

@media (max-width: 560px) {
  .page__cta {
    padding: var(--e-6);
  }

  .page__cta .btn-plein,
  .page__cta .btn-vide {
    display: flex;
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FIL D'ARIANE
   Sous l'en-tête, en libellé de cote : le visiteur qui arrive par
   Google sur une page profonde doit savoir où il est tombé.
   ═══════════════════════════════════════════════════════════════ */

/* Le filet court sur toute la largeur, comme celui de l'en-tête ; c'est
   .ariane__inner qui se cale sur le rail. Le conteneur portait lui aussi la
   largeur et la marge de page : le fil commençait 48 px à droite du logo. */
.ariane {
  padding: 0;
  font-size: var(--t-surtitre);
  font-weight: var(--gr-cote);
  letter-spacing: var(--il-cote);
  text-transform: uppercase;
  color: var(--gris);
  border-bottom: var(--trait-fin) solid var(--cote-faible);
}

.ariane a {
  color: var(--tirage);
  text-decoration: none;
}

.ariane a:hover {
  color: var(--encre);
  text-decoration: underline;
}

.ariane [aria-current="page"] {
  color: var(--encre);
}

/* ═══════════════════════════════════════════════════════════════
   LE RAIL — colonne latérale des pages longues
   Deux blocs, dans cet ordre : l'amorce du test (qui capte), puis la
   nomenclature (qui situe). Il occupe la marge que la colonne de
   texte laissait vide, et il suit la lecture : le visiteur convaincu
   au milieu de la page n'a plus à remonter pour agir.
   Sur téléphone, tout redevient une seule colonne, l'amorce en tête.
   ═══════════════════════════════════════════════════════════════ */

.rail {
  display: flex;
  flex-direction: column;
  gap: var(--e-8);
  margin-bottom: var(--e-12);
}

/* ── L'amorce du test ────────────────────────────────────────────────
   Aplat de jaune de chantier, encre par-dessus : c'est l'emploi que la
   charte réserve au bouton d'action et au bandeau du panneau de chantier
   (§02, §06). Sur ce jaune, tout s'écrit en encre — jamais en blanc.
   Les deux boutons portent la première question du test ; la réponse
   part dans l'URL et le test reprend à la question 2. */
.amorce {
  background-color: var(--chantier);
  color: var(--encre);
  padding: var(--e-6);
  border: var(--trait-cote) solid var(--chantier);
}

.amorce__titre {
  font-size: var(--t-titre-3);
  font-weight: var(--gr-titre);
  line-height: var(--li-titre-3);
  color: var(--encre);
  margin-bottom: var(--e-2);
}

.amorce__surtitre {
  font-size: var(--t-surtitre);
  font-weight: var(--gr-cote);
  letter-spacing: var(--il-cote);
  text-transform: uppercase;
  color: var(--encre);
  margin-bottom: var(--e-4);
  padding-bottom: var(--e-2);
  border-bottom: var(--trait-fin) solid var(--encre);
}

.amorce__question {
  font-size: var(--t-legende);
  color: var(--encre);
  margin-bottom: var(--e-3);
}

.amorce__choix {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

/* Sur le jaune, l'action s'inverse : aplat d'encre, papier par-dessus. */
.amorce__choix a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  min-height: var(--cible-min);
  padding: var(--e-3) var(--e-4);
  background-color: var(--encre);
  color: var(--papier);
  border: var(--trait-cote) solid var(--encre);
  font-size: var(--t-courant);
  font-weight: var(--gr-cote);
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition);
}

.amorce__choix a:hover {
  background-color: var(--chantier);
  color: var(--encre);
}

.amorce__choix a:focus-visible {
  outline: var(--trait-fort) solid var(--encre);
  outline-offset: 2px;
}

.amorce__note {
  margin-top: var(--e-4);
  font-size: var(--t-legende);
  line-height: var(--li-legende);
  color: var(--encre);
}

/* ═══════════════════════════════════════════════════════════════
   SOMMAIRE DE PAGE — la nomenclature du plan
   ═══════════════════════════════════════════════════════════════ */

.sommaire {
  padding-top: var(--e-4);
  border-top: var(--trait-cote) solid var(--encre);
  /* Le sommaire est un bloc, pas un paragraphe : il lui faut sa respiration,
     sinon le texte qui suit vient coller à la dernière entrée. */
  margin-block: var(--e-8) var(--e-12);
  max-width: var(--colonne-texte);
}

.sommaire__titre {
  font-size: var(--t-surtitre);
  font-weight: var(--gr-cote);
  letter-spacing: var(--il-cote);
  text-transform: uppercase;
  color: var(--tirage);
  margin-bottom: var(--e-3);
}

.sommaire ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: renvoi;
}

.sommaire li {
  counter-increment: renvoi;
  border-bottom: var(--trait-fin) solid var(--cote-faible);
}

.sommaire a {
  display: flex;
  align-items: baseline;
  gap: var(--e-3);
  padding: var(--e-3) 0;
  font-size: var(--t-legende);
  color: var(--encre);
  text-decoration: none;
}

.sommaire a::before {
  content: counter(renvoi, decimal-leading-zero);
  font-weight: var(--gr-cote);
  letter-spacing: var(--il-cote);
  color: var(--tirage);
  flex: 0 0 auto;
}

.sommaire a:hover {
  color: var(--tirage);
}

/* ── La page en deux colonnes ────────────────────────────────────────
   Deux tiers de lecture, un tiers de rail. C'est ce qui manquait : une
   colonne unique centrée sur un écran de 1440 px se lit comme un
   document de traitement de texte, quel que soit le soin typographique.
   Si le navigateur ne connaît pas :has(), le rail se pose simplement en
   tête de page — la lecture reste entière. */
@media (min-width: 1024px) {
  .page:has(.rail) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    column-gap: var(--e-16);
    align-items: start;
  }

  .page:has(.rail) > * {
    grid-column: 1;
  }

  .rail {
    grid-column: 2;
    grid-row: 1 / -1;
    position: sticky;
    top: calc(var(--entete-h) + var(--e-6));
    max-height: calc(100vh - var(--entete-h) - var(--e-12));
    overflow-y: auto;
    margin-bottom: 0;
  }
}



/* ── BANDEAU DE TITRE ────────────────────────────────────────────────
   Le titre d'une page de prestations se pose SUR le sujet, pas au-dessus
   d'une page blanche. Photo en fond, voile d'encre par-dessus, titre en
   papier : c'est la composition du hero de l'accueil, ramenée à la
   hauteur d'un bandeau. */
.banniere {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 300px;
  margin-bottom: var(--e-12);
  background-color: var(--encre);
  overflow: hidden;

  /* Le bandeau déborde du rail d'exactement la marge de la page, et son
     texte la reprend en padding. Résultat : le titre tombe au pixel près
     sur la même verticale que le texte du corps — il était 40 px plus à
     droite, et c'est le genre d'écart qu'on ne sait pas nommer mais qu'on
     voit. La photo gagne au passage 96 px de largeur. Le calcul est le
     négatif exact du padding du parent : aucun risque de débordement. */
  margin-inline: calc(-1 * clamp(var(--e-4), 4vw, var(--marge-page)));
}

.banniere__vue {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Le bandeau ne montre qu'un peu plus de la moitié de la photo. Recadré
     au centre, on gardait le ciel et on coupait la maison. On descend le
     point d'ancrage : le sujet reste dans le cadre. */
  object-position: 50% 62%;
  filter: saturate(0.9);
}

/* Le voile. Sans lui, un titre blanc sur une photo de fin de journée tombe
   sous le seuil de contraste. Dégradé plutôt qu'aplat : la maison reste
   lisible en haut du bandeau, l'encre se densifie là où se pose le titre. */
/* Deux voiles superposés plutôt qu'un seul dégradé vertical opaque. Avant,
   le bas du bandeau virait à l'aplat d'encre : la photo ne servait plus à
   rien sur la moitié de sa surface. Le voile horizontal densifie le côté du
   texte, le voile vertical ne fait que rattraper le contraste sous le
   titre. La maison reste visible à droite — c'est le même principe que sur
   la page d'annonce, et les deux pages se ressemblent enfin. */
.banniere::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Le voile général reste LÉGER : son rôle n'est plus de rendre le texte
     lisible — c'est le bloc de texte qui s'en charge, avec son propre fond
     dégradé (voir .banniere__texte). Ici on ne fait qu'asseoir l'image dans
     la palette et donner un peu de densité du côté du titre.

     Historique, pour ne pas refaire le chemin : le voile d'origine était un
     aplat à 0,84 qui noyait la photo. Le premier correctif l'a allégé, et a
     fait tomber le contraste du sur-titre à 1,7 pour un seuil de 4,5 — on
     avait échangé l'accessibilité contre la photo. La bonne réponse était
     de séparer les deux rôles. */
  background-image:
    linear-gradient(100deg,
      rgba(14, 42, 69, .40) 0%,
      rgba(14, 42, 69, .26) 40%,
      rgba(14, 42, 69, .10) 75%,
      rgba(14, 42, 69, .04) 100%);
}

/* Le bloc de texte porte sa propre protection : un dégradé qui monte de
   l'encre vers le transparent, sur toute la largeur du bandeau. C'est lui
   qui garantit le contraste, quelle que soit la photo — et il laisse tout
   le haut de l'image parfaitement net. Un rectangle sombre derrière le
   seul texte se verrait ; sur toute la largeur, avec un fondu haut, il ne
   se voit pas. */
.banniere__texte {
  position: relative;
  z-index: 1;
  flex: 1;
  padding-block: var(--e-16) var(--e-6);
  padding-inline: clamp(var(--e-4), 4vw, var(--marge-page));
  color: var(--papier);
  background-image: linear-gradient(to top,
    rgba(14, 42, 69, .92) 0%,
    rgba(14, 42, 69, .86) 40%,
    rgba(14, 42, 69, .55) 72%,
    rgba(14, 42, 69, 0) 100%);
}

/* Sur l'encre, le libellé de cote passe en jaune de chantier — jamais en
   bleu de tirage, illisible sur ce fond (charte §02). */
.banniere__cote {
  margin: 0 0 var(--e-2);
  font-size: var(--t-surtitre);
  font-weight: var(--gr-cote);
  letter-spacing: var(--il-cote);
  text-transform: uppercase;
  color: var(--chantier);
}

.banniere h1 {
  margin: 0;
  color: var(--papier);
  /* La mesure se pose sur le TITRE, pas sur son conteneur : un « ch » vaut
     la largeur d'un chiffre dans la police COURANTE de l'élément. Posée sur
     le bloc, elle valait 24 caractères de texte de corps — et coupait
     « Nos prestations » en deux. */
  max-width: 18ch;
  text-wrap: balance;
  letter-spacing: -0.01em;
}

@media (min-width: 720px) {
  .banniere { min-height: 420px; }
  .banniere__texte { padding-block: var(--e-20) var(--e-10); }
}

/* Sur un dossier, le bandeau traverse les deux colonnes : un titre posé sur
   une photo n'a de force qu'en pleine largeur. L'encart d'action descend
   donc d'une rangée, sinon il se poserait par-dessus. On passe par une
   classe et non par :has() — un navigateur sans :has() laisserait les deux
   blocs superposés. */
@media (min-width: 1024px) {
  .page--dossier .banniere { grid-column: 1 / -1; }
  .page--dossier .page__aside { grid-row: 2 / span 200; }
}


/* ── LE NUMÉRO DE CHAPITRE (pages en dossier) ────────────────────────
   Sur une page longue, le lecteur doit pouvoir dire où il en est sans
   remonter au sommaire. Le numéro affiché sur le titre est exactement
   celui de l'entrée du sommaire : 03 dans la liste, 03 sur le titre. */
.page--dossier > h2::before {
  content: counter(chapitre, decimal-leading-zero);
  display: block;
  margin-bottom: var(--e-2);
  font-size: var(--t-surtitre);
  font-weight: var(--gr-cote);
  letter-spacing: var(--il-cote);
  color: var(--tirage);
}

/* L'encart d'action porte un h2 lui aussi. Sans cette ligne il consomme le
   numéro 01, et plus rien ne correspond entre le sommaire et les titres. */
.page__aside h2 { counter-increment: none; }

/* ── LA FICHE D'UN DISPOSITIF ────────────────────────────────────────
   Trois lignes, les mêmes pour les six aides : qui verse, y a-t-il une
   condition de revenu, et quand le dossier doit partir. C'est ce qu'on
   vient chercher, et ça se lit sans lire le paragraphe. */
.fiche-aide {
  margin: var(--e-4) 0 var(--e-6);
  max-width: var(--colonne-texte);
  border-top: var(--trait-cote) solid var(--encre);
}

.fiche-aide .releve__ligne {
  padding: var(--e-2) 0;
  border-bottom: var(--trait-fin) solid var(--cote-faible);
}

.fiche-aide .releve__label {
  font-size: var(--t-legende);
  font-weight: var(--gr-cote);
  letter-spacing: var(--il-cote);
  text-transform: uppercase;
  color: var(--gris);
}

/* Même repli que les relevés des pages légales : sur un petit écran, la
   valeur passe sous son libellé plutôt que d'élargir la page. */
@media (max-width: 560px) {
  .fiche-aide .releve__ligne {
    flex-wrap: wrap;
    row-gap: var(--e-1);
  }

  .fiche-aide .releve__valeur {
    flex: 1 1 100%;
    text-align: left;
    overflow-wrap: anywhere;
  }

  .fiche-aide .releve__attache { display: none; }
}

/* ── LA VUE D'UN POSTE DE TRAVAUX ────────────────────────────────────
   Sur la page des prestations, chaque poste s'ouvre sur sa photo, et
   cette photo déborde volontairement la colonne de texte : c'est ce
   décalage qui distingue un dossier illustré d'un document de
   traitement de texte. La désaturation légère est la même que sur les
   cartes de l'accueil — sans elle, cinq photos de provenances
   différentes ne font pas série. */
.poste__vue {
  display: block;
  width: 100%;
  max-width: 880px;
  height: auto;
  margin-block: var(--e-6) var(--e-8);
  filter: saturate(0.92);
}

/* ── LE RENVOI DE FIN DE POSTE ───────────────────────────────────────
   Deux sorties au bas de chaque poste, et les mêmes partout : les aides,
   et le test. Le visiteur qui vient de lire SA prestation n'a pas à
   remonter chercher un bouton. */
.poste__renvoi {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--e-8);
  margin-top: var(--e-8);
  padding-top: var(--e-3);
  border-top: var(--trait-cote) solid var(--encre);
  max-width: var(--colonne-texte);
}

.poste__renvoi a {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible-min);
  font-size: var(--t-legende);
  font-weight: var(--gr-cote);
  letter-spacing: var(--il-cote);
  text-transform: uppercase;
  color: var(--tirage);
  text-decoration: none;
}

/* Le trait qui s'allonge au survol : le même geste que « En savoir plus »
   sur l'accueil, pour que les deux pages se répondent. */
.poste__renvoi a::after {
  content: "";
  width: var(--e-6);
  height: var(--trait-cote);
  margin-left: var(--e-3);
  background-color: currentColor;
  transition: width var(--transition);
}

.poste__renvoi a:hover { color: var(--encre); }
.poste__renvoi a:hover::after { width: var(--e-10); }

/* ═══════════════════════════════════════════════════════════════
   PIED DE PAGE
   Il n'y en avait aucun sur l'accueil et sur le test : la page se
   terminait sur du blanc. Les quatre autres pages en avaient trois
   versions différentes, d'une ligne, en 13 px gris. Un bureau d'études
   se termine par ses coordonnées, sa zone d'intervention et ses
   qualifications : c'est la preuve qu'il existe.

   Aplat d'encre — le seul renversement admis par la charte (§02).
   Sur ce fond : texte en blanc, libellés de cote en jaune de chantier,
   jamais de bleu de tirage.
   ═══════════════════════════════════════════════════════════════ */

.footer {
  background-color: var(--encre);
  color: var(--papier);
  font-size: var(--t-legende);
  line-height: var(--li-legende);
  margin-top: var(--e-20);
}

/* La grille du pied de page. Elle contient CINQ blocs — la marque, puis
   À propos, Services, Ressources et Contact — et elle était déclarée sur
   trois colonnes : les deux derniers retombaient sur une seconde rangée
   décalée, avec un trou au milieu. Trois paliers, et chacun tombe juste :
   une colonne sur téléphone, deux sur grand téléphone et tablette, cinq
   sur ordinateur avec la marque plus large que les listes. */
.footer__inner {
  padding-block: var(--e-16) var(--e-10);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-10);
}

/* 400 px et non 560 : empilé sur une seule colonne, le pied de page faisait
   1 686 px de haut, soit deux écrans de téléphone. Deux colonnes dès les
   grands téléphones le ramènent à une hauteur lisible, sans tasser les
   libellés — en dessous de 400 px on reste sur une colonne, où « Politique
   de confidentialité » ne tiendrait pas. */
@media (min-width: 400px) {
  .footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e-8) var(--e-10);
  }

  /* La marque et sa phrase prennent toute la largeur : coupées en deux,
     elles ne se lisent plus. */
  .footer__marque {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1000px) {
  .footer__inner {
    /* Les colonnes ne sont pas égales, et c'est voulu : la marque porte une
       phrase, la colonne Contact porte une adresse e-mail qui ne doit jamais
       se couper en deux, les trois listes du milieu n'ont que des libellés
       courts. Cinq colonnes égales cassaient l'e-mail ; 1.3fr pour la marque
       lui donnait cinq lignes de 196 px. */
    grid-template-columns:
      minmax(0, 1.6fr)
      repeat(3, minmax(0, 1fr))
      minmax(0, 1.3fr);
    gap: var(--e-10) var(--e-8);
    align-items: start;
  }

  .footer__marque {
    grid-column: auto;
    padding-right: var(--e-6);
  }
}

.footer__marque svg {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  color: var(--papier);
}

.footer__phrase {
  margin-top: var(--e-5);
  max-width: 32ch;
  font-size: var(--t-courant);
  line-height: var(--li-courant);
  color: var(--papier);
}

.footer__titre {
  font-size: var(--t-surtitre);
  font-weight: var(--gr-cote);
  line-height: var(--li-surtitre);
  letter-spacing: var(--il-cote);
  text-transform: uppercase;
  color: var(--chantier);
  margin-bottom: var(--e-4);
  padding-bottom: var(--e-2);
  border-bottom: var(--trait-fin) solid var(--cote-encre);
}

.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer li {
  padding: var(--e-2) 0;
  border-bottom: var(--trait-fin) solid var(--cote-encre);
}

.footer li:last-child {
  border-bottom: none;
}

/* L'astérisque du pied de page : la précision qui accompagne le lien
   « Recrutement », sans bordure pour ne pas se confondre avec une entrée
   de la liste. */
.footer li.coordonnees__note {
  border-bottom: none;
  font-size: var(--t-legende);
  line-height: var(--li-legende);
  color: var(--cote);
}

.footer a {
  color: var(--papier);
  text-decoration: none;
}

.footer a:hover {
  color: var(--chantier);
}

.footer a:focus-visible {
  outline: var(--trait-fort) solid var(--chantier);
  outline-offset: 2px;
}

/* La ligne de relevé, sur fond encre : libellé clair, trait atténué,
   valeur en jaune. Même brique que partout ailleurs. */
.footer .releve__ligne {
  padding: var(--e-2) 0;
  border-bottom: var(--trait-fin) solid var(--cote-encre);
}

.footer .releve__ligne:last-child {
  border-bottom: none;
}

.footer .releve__label {
  font-size: var(--t-legende);
  color: var(--papier);
}

.footer .releve__attache {
  background-color: var(--cote-encre);
}

.footer .releve__valeur {
  font-size: var(--t-legende);
  color: var(--chantier);
}

/* Sur fond sombre, le gris des mentions « à compléter » tombe à 1,5:1.
   La valeur en attente d'inscription passe donc en jaune de chantier —
   c'est déjà son rôle dans la charte (§02). */
.footer [data-maquette] {
  border-bottom-color: var(--cote-encre);
}

.footer [data-maquette]::after,
.footer .a-completer {
  color: var(--chantier);
}

/* Bas de page : la ligne administrative. */
.footer__legal {
  padding-block: var(--e-5);
  border-top: var(--trait-fin) solid var(--cote-encre);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-6);
  justify-content: space-between;
  color: var(--papier);
}

.footer__legal a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════════
   BARRE DU POUCE — commune à toutes les pages (téléphone et tablette)
   Elle vivait dans le <style> de l'accueil seul : sur les autres pages,
   le visiteur perdait l'appel et le simulateur dès qu'il changeait de page.
   L'action principale (Simulateur) est l'aplat de jaune de chantier,
   encre par-dessus — jamais du texte jaune sur blanc (1,9:1).
   ═══════════════════════════════════════════════════════════════ */
.navbar-mobile {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--papier);
  border-top: var(--trait-cote) solid var(--encre);
  display: flex;
  align-items: stretch;
  height: calc(64px + var(--safe-bas));
  z-index: 50;
}

.navbar-mobile__item {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: var(--cible-min);
  padding-bottom: var(--safe-bas);   /* l'aplat jaune descend jusqu'au bord */
  color: var(--encre);
  text-decoration: none;
  font-family: inherit;
  font-size: var(--t-legende);
  font-weight: var(--gr-cote);
  cursor: pointer;
  border: none;
  background: none;
}

.navbar-mobile__item + .navbar-mobile__item {
  border-left: var(--trait-fin) solid var(--cote-faible);
}

.navbar-mobile__item:hover {
  color: var(--tirage);
}

.navbar-mobile__item--primary {
  background-color: var(--chantier);
  font-weight: var(--gr-valeur);
}

.navbar-mobile__item--primary:hover {
  color: var(--encre);
}

.navbar-mobile__item--primary + .navbar-mobile__item {
  border-left-color: transparent;
}

/* La marque « à compléter » (tokens.css) casse une barre de hauteur fixe :
   le numéro reste marqué data-maquette, seule la légende visible disparaît. */
.navbar-mobile__item[data-maquette] {
  border-bottom: none;
}

.navbar-mobile__item[data-maquette]::after {
  content: none;
}

@media (min-width: 901px) {
  .navbar-mobile {
    display: none !important;
  }
}

/* Le pied de page se termine au-dessus de la barre du pouce, jamais dessous. */
.footer {
  padding-bottom: var(--safe-bas);
}

body.a-barre-mobile .footer {
  padding-bottom: calc(var(--navbar-h, 64px) + var(--safe-bas));
}

@media (min-width: 901px) {
  body.a-barre-mobile .footer {
    padding-bottom: 0;
  }
}

@media (max-width: 480px) {
  .page {
    padding-top: var(--e-8);
  }

  .footer__inner {
    padding-block: var(--e-10) var(--e-8);
  }
}

/* ═══════════════════════════════════════════════════════════════
   COLONNE D'ACTION — l'encart qui reste visible pendant la lecture

   Un visiteur qui lit une page de prestations est en train de se décider.
   S'il doit remonter en haut pour agir, il ne le fait pas. L'encart le
   suit, et il ne demande RIEN : il pose la première question du test,
   celle à laquelle on répond sans réfléchir (propriétaire ou locataire).
   Le lien porte déjà la réponse, le test s'ouvre donc à la question 2.

   Aplat de jaune de chantier avec l'encre par-dessus : c'est l'action
   principale, et c'est le seul emploi du jaune que la charte autorise.
   ═══════════════════════════════════════════════════════════════ */

.page__aside {
  background-color: var(--chantier);
  color: var(--encre);
  padding: var(--e-6);
  margin-block: var(--e-8);
}

.page__aside .surtitre {
  color: var(--encre);
  opacity: 0.75;
}

.page__aside h2 {
  font-size: var(--t-titre-3);
  line-height: var(--li-titre-3);
  color: var(--encre);
  margin-block: var(--e-3) var(--e-4);
  padding-top: 0;
  border-top: none;
}

.page__aside h2::before,
.page__aside h2::after {
  content: none;
}

.page__aside p {
  font-size: var(--t-legende);
  line-height: var(--li-legende);
  color: var(--encre);
  max-width: none;
}

.aside__choix {
  display: grid;
  gap: var(--e-2);
  margin-bottom: var(--e-4);
}

.aside__choix a {
  display: block;
  padding: var(--e-3) var(--e-4);
  background-color: var(--encre);
  color: var(--papier);
  font-size: var(--t-courant);
  font-weight: var(--gr-cote);
  text-align: center;
  text-decoration: none;
  min-height: var(--cible-min);
  border: var(--trait-cote) solid var(--encre);
}

.aside__choix a:hover {
  background-color: var(--papier);
  color: var(--encre);
}

/* Le trait de cote de l'encart, en encre sur le jaune */
.page__aside .aside__cote {
  height: var(--trait-cote);
  background-color: var(--encre);
  opacity: 0.35;
  margin-bottom: var(--e-4);
}

@media (min-width: 1000px) {
  /* Deux colonnes : la lecture à gauche, l'action à droite.
     Tous les enfants directs vont en colonne 1 — sauf l'encart, qui occupe
     la seconde piste sur toute la hauteur et s'y colle. */
  .page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    column-gap: var(--e-16);
    align-items: start;
  }

  .page > * {
    grid-column: 1;
  }

  .page__aside {
    grid-column: 2;
    /* « 1 / -1 » ne fonctionne PAS ici : sans grid-template-rows, la grille
       n'a aucune ligne explicite, et -1 se résout sur la ligne 1. L'encart
       n'occupait donc qu'UNE ligne, dont sa hauteur écartait le titre de
       395 px. Un span large couvre toutes les lignes implicites. */
    grid-row: 1 / span 200;
    align-self: start;
    position: sticky;
    /* --header-h est mesuré au chargement ; la valeur de repli sert
       le temps que le script tourne. */
    top: calc(var(--header-h, 113px) + var(--e-4));
    margin-block: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FIL D'ARIANE
   Il dit où l'on est. Sur un site de six pages c'est peu utile en soi,
   mais un visiteur qui arrive de la publicité sur une page profonde n'a
   aucun autre repère.
   ═══════════════════════════════════════════════════════════════ */

.ariane {
  border-bottom: var(--trait-fin) solid var(--cote-faible);
  font-size: var(--t-legende);
}

.ariane__inner {
  max-width: var(--largeur-page);
  margin-inline: auto;
  padding: var(--e-3) clamp(var(--e-4), 4vw, var(--marge-page));
}

.ariane ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
}

.ariane li {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--e-2);
  color: var(--gris);
}

.ariane li::before {
  content: none;
}

/* Le séparateur : un trait, pas un chevron — c'est la grammaire du plan. */
.ariane li + li::before {
  content: "";
  display: block;
  width: 10px;
  height: var(--trait-fin);
  background-color: var(--cote);
}

.ariane a {
  color: var(--tirage);
  text-decoration: none;
}

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

.ariane [aria-current="page"] {
  color: var(--gris);
}

/* Téléphone : l'interlettrage des capitales faisait passer « Accueil —
   Questions fréquentes » sur deux lignes à 375 px. */
@media (max-width: 560px) {
  .ariane {
    letter-spacing: 0.08em;
  }
}

/* Le sommaire est déjà stylé plus haut (compteur « renvoi »). Ne pas le
   redéclarer ici : deux compteurs se superposaient et affichaient « 01 00 »
   devant chaque entrée. */

/* Le saut d'ancre doit s'arrêter SOUS le header collant, sinon le titre
   visé se retrouve caché derrière lui. */
.page h2[id] {
  scroll-margin-top: calc(var(--header-h, 113px) + var(--e-6));
}

/* ── Zone d'intervention ─────────────────────────────────────────────
   La carte et sa légende disent la même chose de deux façons : le tracé
   pour situer d'un coup d'œil, la liste pour lire — et pour les lecteurs
   d'écran, chez qui la carte n'est qu'un titre et une description.
   Aucune couleur inventée : les deux zones couvertes sont deux degrés
   d'encre, la zone hors périmètre est hachurée en gris de cote. */
.zone {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-6);
  align-items: center;
  margin-bottom: var(--e-5);
}

.zone__carte {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  margin: 0 auto;
}

.zone__marque {
  font-family: var(--police);
  font-size: 21px;
  font-weight: var(--gr-titre);
  letter-spacing: var(--il-marque);
  text-anchor: middle;
}

/* Chaque libellé prend la couleur qui se lit sur SON aplat — pas une
   couleur commune. Le blanc sur le jaune ne ferait que 1,9:1. */
.zone__marque--encre  { fill: var(--encre); }
.zone__marque--papier { fill: var(--papier); }
.zone__marque--h3     { fill: var(--zone-h3); }

.zone__legende {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Chaque ligne est une fiche de relevé : pastille, sigle, territoire,
   état. Le sigle garde une largeur fixe pour que les colonnes s'alignent
   d'une ligne à l'autre. */
.zone__ligne {
  display: grid;
  grid-template-columns: 14px 2.2rem 1fr auto;
  align-items: baseline;
  gap: var(--e-3);
  padding: var(--e-3) 0;
  border-bottom: var(--trait-fin) solid var(--cote-faible);
}

.zone__ligne:first-child { border-top: var(--trait-fin) solid var(--cote-faible); }

.zone__pastille {
  width: 14px;
  height: 14px;
  align-self: center;
  border: var(--trait-fin) solid var(--encre);
}

.zone__pastille--h1 { background-color: var(--zone-h1); }
.zone__pastille--h2 { background-color: var(--zone-h2); }
.zone__pastille--h3 {
  background-color: var(--zone-h3);
  background-image: repeating-linear-gradient(45deg,
    rgba(255, 255, 255, 0.38) 0, rgba(255, 255, 255, 0.38) 1.4px,
    transparent 1.4px, transparent 5px);
}

.zone__nom {
  font-size: var(--t-valeur);
  font-weight: var(--gr-titre);
  color: var(--encre);
}

.zone__ou {
  font-size: var(--t-legende);
  line-height: var(--li-legende);
  color: var(--texte);
}

.zone__etat {
  font-size: var(--t-surtitre);
  font-weight: var(--gr-cote);
  letter-spacing: var(--il-cote);
  text-transform: uppercase;
  color: var(--tirage);
  white-space: nowrap;
}

/* Le hors-périmètre se lit tout de suite : la ligne s'éteint. */
.zone__ligne--hors .zone__nom,
.zone__ligne--hors .zone__ou { color: var(--gris); }
.zone__ligne--hors .zone__etat { color: var(--gris); }

.zone__note {
  font-size: var(--t-legende);
  line-height: var(--li-legende);
  color: var(--gris);
  margin: 0;
}

/* Sur ordinateur, la carte et la légende se lisent côte à côte. */
@media (min-width: 901px) {
  .zone__carte { max-width: 420px; }
}

/* ═══════════════════════════════════════════════════════════════
   LE PRINCIPE
   Le bloc qui explique une technique en deux phrases, sous un filet.
   Il remplace les croquis retirés à la demande du client : les dessins
   sortent de l'affichage, les fichiers restent dans assets/schemas/ et
   reviennent tels quels le jour où on les remet.
   Aucune valeur chiffrée n'y figure : ce qui se mesure sur place porte la
   mention « à relever », comme partout ailleurs sur le site.
   ═══════════════════════════════════════════════════════════════ */

.principe {
  margin-block: var(--e-8);
  max-width: var(--colonne-texte);
  padding-top: var(--e-3);
  border-top: var(--trait-cote) solid var(--encre);
}

.principe p {
  margin: 0 0 var(--e-3);
  font-size: var(--t-valeur);
  line-height: var(--li-courant);
  color: var(--texte);
}

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

.principe .principe__note {
  font-size: var(--t-legende);
  color: var(--texte);
}

.principe .principe__cote {
  font-size: var(--t-surtitre);
  font-weight: var(--gr-cote);
  letter-spacing: var(--il-cote);
  text-transform: uppercase;
  color: var(--tirage);
  margin-bottom: var(--e-1);
}

/* ── ÉCRITURE DE DISPLAY (pages de lecture) ─────────────────────────────
   Même traitement de titre que sur l'accueil : très grand, resserré, et
   des retours à la ligne équilibrés. Ce qu'on emprunte à Apple s'arrête
   là — ni angle arrondi ni ombre douce, la charte les proscrit.

   Ces pages restent alignées à gauche : ce sont des pages de lecture
   suivie, et un paragraphe centré sur dix lignes se lit mal. Seul
   l'accueil centre ses ouvertures de section. */
@media (min-width: 901px) {
  .page h1,
  .page h2 {
    letter-spacing: -0.022em;
    text-wrap: balance;
  }

  .page h1 {
    letter-spacing: -0.028em;
  }

  .page__lead {
    text-wrap: pretty;
  }
}

/* ── CONFORT TACTILE (téléphone) ────────────────────────────────────────
   Les mêmes cibles que sur l'accueil, pour les pages de lecture. Elles
   étaient restées à leur taille de texte : 16 px de haut pour un lien de
   pied de page, 28 pour le logo, 38 pour le bouton d'en-tête. Le minimum
   tenable est 44 px (Apple HIG, WCAG 2.5.5) — et la charte se donnait déjà
   48 px avec --cible-min, sans l'appliquer ici. */
@media (max-width: 900px) {
  .logo {
    display: inline-flex;
    align-items: center;
    min-height: var(--cible-min);
  }

  .header__cta,
  .header__burger {
    min-height: var(--cible-min);
  }

  .header__burger {
    min-width: var(--cible-min);
  }

  /* Les listes du pied de page : un lien de 16 px se vise mal au pouce.
     Le filet de séparation rend en plus la colonne lisible d'un coup d'œil. */
  .footer li > a,
  .footer li > span {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-block: 0;
  }

  .footer li + li > a,
  .footer li + li > span {
    border-top: var(--trait-fin) solid rgba(255, 255, 255, 0.12);
  }

  .ariane a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* La ligne légale n'est pas une liste : ses deux liens échappaient à la
   règle ci-dessus. */
@media (max-width: 900px) {
  .footer__legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ── LE MENU DU TÉLÉPHONE ───────────────────────────────────────────────
   Repris de clickfusion.fr : un panneau qui vient de la droite, par-dessus
   la page, plutôt qu'un déroulant coincé sous l'en-tête. Sur un rail de
   story — où l'en-tête est fixe et le contenu défile dessous — un déroulant
   se retrouvait à cheval sur deux plans.

   Adapté à la charte PLUME : aplat d'encre, texte en papier, angles nets,
   aucune ombre. Chaque entrée fait 52 px de haut. */
.menu-plein {
  position: fixed;
  inset: 0;
  z-index: 400;
  visibility: hidden;
}

.menu-plein.est-ouvert { visibility: visible; }

.menu-plein__voile {
  position: absolute;
  inset: 0;
  background-color: var(--encre);
  opacity: 0;
  transition: opacity 280ms ease;
}

.menu-plein.est-ouvert .menu-plein__voile { opacity: 0.55; }

.menu-plein__panneau {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(86%, 340px);
  display: flex;
  flex-direction: column;
  background-color: var(--encre);
  color: var(--papier);
  padding: var(--e-5) var(--e-5) calc(var(--e-5) + var(--safe-bas));
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.menu-plein.est-ouvert .menu-plein__panneau { transform: none; }

.menu-plein__haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--e-4);
}

.menu-plein__haut span {
  font-size: var(--t-surtitre);
  font-weight: var(--gr-cote);
  letter-spacing: var(--il-cote);
  text-transform: uppercase;
  color: var(--cote);
}

.menu-plein__fermer {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  margin-right: calc(var(--e-3) * -1);
  background: none;
  border: none;
  color: var(--cote);
  cursor: pointer;
}

.menu-plein__fermer svg { width: 22px; height: 22px; }

.menu-plein__item {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  min-height: 52px;
  padding: var(--e-3) 0;
  border-bottom: var(--trait-fin) solid var(--cote-encre);
  color: var(--papier);
  font-size: var(--t-courant);
  text-decoration: none;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  width: 100%;
  text-align: left;
  font-family: var(--police);
  cursor: pointer;
}

.menu-plein__item svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--chantier);
}

.menu-plein__item[aria-current="page"] { color: var(--chantier); }

.menu-plein__item:hover,
.menu-plein__item:focus-visible { color: var(--chantier); }


.menu-plein__cta {
  margin-top: auto;
  padding-top: var(--e-5);
}

.menu-plein__cta .btn-plein { width: 100%; }

/* Le panneau disparaît quand la navigation entière tient dans l'en-tête,
   c'est-à-dire à partir de 1 000 px — le même seuil que le bouton menu.
   Il était coupé à 901 px : entre 901 et 999, le bouton s'affichait et
   n'ouvrait rien. */
@media (min-width: 1000px) {
  .menu-plein { display: none; }
}

/* ── MENTION FRANCE RÉNOV' ─────────────────────────────────────────────────
   Affichage imposé par l'arrêté du 7 juillet 2026 (art. L. 122-26 du Code de
   la consommation), applicable au 1er octobre 2026 à tout support de promotion
   proposant des travaux de rénovation énergétique.

   Elle est soulignée d'un filet jaune et précédée de son propre intitulé :
   un visiteur doit voir d'un coup d'œil que ce n'est pas nous qui parlons,
   mais le service public. Seule l'ADRESSE est un lien — la phrase entière
   soulignée devenait un pavé illisible sur deux lignes.
   Ce n'est pas un élément décoratif : ne pas le masquer, ne pas le griser,
   ne pas réécrire le texte. */
.france-renov {
  max-width: var(--largeur-page);
  margin-inline: auto;
  margin-block: 0;
  padding: var(--e-5) 0 var(--e-6);
  padding-inline: clamp(var(--e-4), 4vw, var(--marge-page));
  border-top: var(--trait-fin) solid var(--cote-encre);
  font-size: var(--t-legende);
  line-height: var(--li-legende);
  color: var(--papier);
}

/* L'intitulé : un bandeau court, en jaune de chantier, posé au-dessus de
   la phrase. C'est la seule façon de distinguer une mention réglementaire
   d'une ligne de plus dans un pied de page déjà dense. */
.france-renov__titre {
  display: block;
  margin-bottom: var(--e-2);
  padding-left: var(--e-3);
  border-left: var(--trait-fort) solid var(--chantier);
  font-size: var(--t-surtitre);
  font-weight: var(--gr-cote);
  line-height: var(--li-surtitre);
  letter-spacing: var(--il-cote);
  text-transform: uppercase;
  color: var(--chantier);
}

.france-renov a {
  color: var(--papier);
  text-decoration: underline;
  text-decoration-color: var(--chantier);
  text-underline-offset: 3px;
  white-space: nowrap;
}

.france-renov a:hover {
  color: var(--chantier);
}

/* ── BAS DE PAGE : LA LIGNE ADMINISTRATIVE ────────────────────────────────
   Elle était collée à la mention au-dessus et séparée par un filet, ce qui
   faisait deux traits de suite. Un seul suffit, porté par la mention. */
.footer__legal {
  border-top: none;
  padding-block: var(--e-4) var(--e-6);
  color: var(--cote);
}

.footer__legal a {
  color: var(--cote);
}

.footer__legal a:hover {
  color: var(--chantier);
}

/* Les coordonnées ne se coupent pas au milieu : un e-mail ou un numéro
   scindé sur deux lignes a l'air d'une erreur d'affichage. Sur les très
   petites largeurs, on laisse le navigateur reprendre la main plutôt que
   de provoquer un débordement horizontal. */
.footer .coordonnees a {
  white-space: nowrap;
}

@media (max-width: 400px) {
  .footer .coordonnees a {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* « Gérer mes traceurs » : un bouton, pas un lien — il n'ouvre aucune page,
   il rouvre le bandeau de consentement. Sans ce point d'entrée, la seule
   façon de revenir sur son choix était d'aller vider les données du site
   dans les réglages du navigateur : ce n'est « aussi simple que donner »
   pour personne, et la CNIL comme la règle de consentement de Google pour
   l'Europe demandent que ça le soit. */
.footer__legal [data-traceurs] {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.footer__legal [data-traceurs]:hover {
  color: var(--chantier);
}

.footer__legal [data-traceurs]:focus-visible {
  outline: var(--trait-fort) solid var(--chantier);
  outline-offset: 2px;
}