/* ==========================================================================
   datab.fr — feuille de style des maquettes, v5 (v4 « de la poigne » corrigé)
   Sommaire
     1. Polices
     2. Variables (couleurs, rythme, tailles) et points de rupture
     3. Base
     4. Grille, fonds, filets de section
     5. Typographie
     6. Composants
     7. Écrans
     8. Adaptations par point de rupture (992px, 768px, 560px, 360px)
   Points de rupture : 1200px · 992px · 768px · 560px · 360px
   ========================================================================== */


/* ==========================================================================
   1. Polices — Manrope seule, fichiers locaux
   ========================================================================== */

@font-face {
  font-family: "Manrope";
  src: url("assets/manrope-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Manrope";
  src: url("assets/manrope-latin.woff2") format("woff2");
  font-weight: 200 800;
  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;
}


/* ==========================================================================
   2. Variables
   ========================================================================== */

/* Ordinateur (≥ 1200px) */
:root {
  /* Couleurs de la charte */
  --ink: #16181a;
  --ink-mid: #36393d;
  --ink-soft: #6e7378;
  --accent: #916449;
  --accent-clair: #b08870;
  --papier-alt: #f5f3f0;
  --papier: #ffffff;
  --ligne: #e3ded7;           /* filets entre lignes de liste */
  --filet: #16181a;           /* filet de tête de section (v4 § 3.3) */
  --bord-champ: #8d8880;      /* bordure des champs et de la barre de recherche (v4 § 3.3) */
  --erreur: #b3261e;          /* états d'erreur uniquement */

  /* Couleurs courantes selon le fond (redéfinies par les fonds, voir § 4) */
  --titre: var(--ink);
  --texte: var(--ink-mid);
  --lien: var(--ink);
  --lien-survol: var(--accent);
  --eyebrow: var(--accent);
  --contour: var(--accent);
  --prix-couleur: var(--accent);
  --legende: #6e7378;         /* légende sur Papier */
  --etiquette-num: var(--accent);
  --etiquette-texte: #6e7378;
  --survol-ligne: #f5f3f0;    /* survol d'une ligne de liste sur Papier */

  /* Rythme (v3 § 4.4) */
  --largeur-max: 1320px;
  --marge: 24px;
  --espace-section: 80px;
  --espace-bloc: 24px;
  --espace-titre: 16px;
  --espace-paragraphe: 18px;
  --hauteur-entete: 72px;
  --mesure: 31em;             /* environ 60 caractères en corps 17px */

  /* Rayons */
  --rayon-interactif: 100px;
  --rayon-carte: 2px;

  /* Tailles de texte (v4 § 3.1) */
  --display: 88px;
  --chiffre: 96px;
  --h1: 52px;
  --h2: 28px;
  --h3: 22px;
  --lead: 20px;
  --corps: 17px;
  --prix: 40px;
  --bouton: 16px;
  --hauteur-bouton: 48px;

  /* Transition unique : 120 ms, fond et bordure seulement (v3 § 4.6) */
  --transition: background-color 120ms, border-color 120ms;
}

/* Tablette (768 – 1199px) */
@media (width < 1200px) {
  :root {
    --largeur-max: 100%;
    --marge: 24px;
    --espace-section: 64px;
    --espace-bloc: 24px;
    --espace-titre: 16px;
    --espace-paragraphe: 18px;
    --hauteur-entete: 68px;
    --display: 64px;
    --chiffre: 64px;
    --h1: 42px;
    --h2: 26px;
    --h3: 21px;
    --lead: 20px;
    --corps: 17px;
    --prix: 34px;
    --bouton: 16px;
  }
}

/* Téléphone (< 768px) */
@media (width < 768px) {
  :root {
    --marge: 20px;
    --espace-section: 48px;
    --espace-bloc: 20px;
    --espace-titre: 16px;
    --espace-paragraphe: 16px;
    --hauteur-entete: 60px;
    --display: 48px;
    --chiffre: 56px;
    --h1: 34px;
    --h2: 24px;
    --h3: 19px;
    --lead: 18px;
    --corps: 16px;
    --prix: 30px;
    --bouton: 15px;
    --hauteur-bouton: 44px;
  }
}


/* ==========================================================================
   3. Base
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--texte);
  font-family: "Manrope", sans-serif;
  font-size: var(--corps);
  font-weight: 400;
  font-variant-numeric: tabular-nums;   /* tout nombre affiché est tabulé */
  line-height: 1.65;
  text-align: left;
}

h1, h2, h3, p, ul, ol, dl, dd, blockquote, figure, fieldset, legend {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}

fieldset {
  border: 0;
  min-width: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 2px;
}

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

.hors-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.evitement {
  position: absolute;
  left: var(--marge);
  top: -100px;
  background: var(--papier);
  padding: 8px 16px;
}

.evitement:focus {
  top: 8px;
  z-index: 10;
}


/* ==========================================================================
   4. Grille, fonds, filets de section
   ========================================================================== */

.conteneur {
  max-width: calc(var(--largeur-max) + 2 * var(--marge));
  margin-inline: auto;
  padding-inline: var(--marge);
}

/* Espace entre deux sections : 80px / 64px / 48px.
   Moitié haute + moitié basse : deux sections voisines sont séparées de
   exactement var(--espace-section), le filet de la seconde au milieu. */
.section {
  position: relative;
  padding-block: calc(var(--espace-section) / 2);
}

/* Section serrée (résultat de l'estimation : moins de 300px de haut) */
.section--serree {
  padding-block: 20px;
}

/* Filet de tête de section : 1px Ink, largeur du conteneur, en tête de chaque
   section sauf la première de la page ; même filet en tête du pied de page. */
main > .section:not(:first-child)::before,
.pied::before {
  content: "";
  position: absolute;
  top: 0;
  left: max(var(--marge), calc((100% - var(--largeur-max)) / 2));
  right: max(var(--marge), calc((100% - var(--largeur-max)) / 2));
  height: 1px;
  background: var(--filet);
}

/* Première section sous l'en-tête quand elle porte un fil d'Ariane */
.section--tete {
  padding-top: var(--espace-bloc);
}

/* Les trois fonds */
.fond-papier {
  background: var(--papier);
}

.fond-alt {
  background: var(--papier-alt);
  --legende: #36393d;         /* légende sur Papier alt */
  --etiquette-texte: #36393d; /* #6e7378 sur Papier alt ne tient pas le AA */
  --survol-ligne: #ffffff;
}

/* Section Encre : jamais plus de 400px d'un seul tenant (v4 § 3.2) */
.fond-encre {
  background: var(--ink);
  color: #ffffff;
  --titre: #ffffff;
  --texte: #ffffff;
  --lien: #ffffff;
  --lien-survol: var(--accent-clair);
  --eyebrow: var(--accent-clair);
  --contour: var(--accent-clair);
  --prix-couleur: #ffffff;
  --legende: #e3ded7;         /* légende sur Encre */
  --ligne: rgba(255, 255, 255, .35);
  --filet: rgba(255, 255, 255, .35);
  --etiquette-num: var(--accent-clair);
  --etiquette-texte: #e3ded7;
  --survol-ligne: rgba(255, 255, 255, .08);
}

/* Surface blanche posée sur un fond de couleur : retour aux couleurs de Papier */
.carte,
.panneau {
  color: var(--ink-mid);
  --titre: var(--ink);
  --texte: var(--ink-mid);
  --lien: var(--ink);
  --lien-survol: var(--accent);
  --eyebrow: var(--accent);
  --contour: var(--accent);
  --prix-couleur: var(--accent);
  --legende: #6e7378;
  --ligne: #e3ded7;
  --filet: #16181a;
  --survol-ligne: #f5f3f0;
}

/* Espace entre deux blocs d'une même section : 24px / 24px / 20px */
.pile > * + * {
  margin-top: var(--espace-bloc);
}

.grille-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--espace-bloc);
}

/* Deux colonnes 5/12 – 7/12 séparées par un filet */
.duo {
  display: grid;
  grid-template-columns: 5fr 7fr;
  align-items: start;
}

.duo > * {
  padding-top: var(--espace-bloc);
}

.duo > * + * {
  padding-left: var(--espace-bloc);
  border-left: 1px solid var(--ligne);
}

/* Deux colonnes 7/12 – 5/12 sans filet (texte à gauche, carte à droite) */
.duo-carte {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--espace-bloc) calc(2 * var(--espace-bloc));
  align-items: center;
}

/* Filet clair : 1px Ligne, toute la largeur du conteneur */
.filet {
  border: 0;
  border-top: 1px solid var(--ligne);
  margin: 0;
  width: 100%;
}

/* Ligne de titre d'une section : titre à gauche, mention à droite, filet Ink dessous */
.tete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px var(--espace-bloc);
  padding-bottom: var(--espace-titre);
  border-bottom: 1px solid var(--filet);
}

.tete > * {
  margin-top: 0;
}

.tete + * {
  margin-top: var(--espace-bloc);
}

.section--serree .tete {
  padding-bottom: 12px;
}

/* Colonnes de registre : cellules séparées par des filets verticaux */
.registre {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.registre--2 {
  grid-template-columns: repeat(2, 1fr);
}

.registre > * {
  max-width: none;
  margin-top: 0;
  padding: var(--espace-bloc) var(--espace-bloc) 4px;
  border: 0;
  border-left: 1px solid var(--ligne);
}

.registre > :first-child {
  padding-left: 0;
  border-left: 0;
}

/* Les lignes, listes et colonnes de registre s'accrochent au filet du titre */
.tete + :is(.registre, .lignes, .liste, .duo, .bandeau) {
  margin-top: 0;
}


/* ==========================================================================
   5. Typographie
   ========================================================================== */

/* Display : une fois par page (titre de l'accueil, 167, médiane de la fiche,
   80, nombre de postes de l'estimation) */
.display {
  font-size: var(--display);
  font-weight: 200;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1.02;
  color: var(--titre);
  max-width: none;
  white-space: nowrap;
}

h1, .h1 {
  font-size: var(--h1);
  font-weight: 200;
  letter-spacing: -0.032em;
  line-height: 1.08;
  color: var(--titre);
  max-width: 16em;
}

h1.display {
  font-size: var(--display);
  letter-spacing: -0.04em;
  line-height: 1.02;
  max-width: none;
  white-space: normal;
}

/* H2 : 28px / 26px / 24px en graisse 500 — seconde graisse de titre (v4 § 3.1) */
h2, .h2 {
  font-size: var(--h2);
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.15;
  color: var(--titre);
}

h3, .h3 {
  font-size: var(--h3);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--titre);
}

/* Longueur de ligne du texte de lecture : 60 caractères */
p, blockquote, li {
  max-width: var(--mesure);
}

/* Espace entre un titre et son texte : 16px */
:is(h1, h2, h3) + * {
  margin-top: var(--espace-titre);
}

/* Espace entre deux paragraphes : 18px / 18px / 16px */
p + p {
  margin-top: var(--espace-paragraphe);
}

.lead {
  font-size: var(--lead);
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1.5;
}

/* Chiffre clé : 96px / 64px / 56px. Trois rangées — mot d'avant, nombre, unité —
   pour que les nombres de colonnes voisines partagent la même ligne de base. */
.chiffre {
  display: grid;
  grid-template-rows: 20px auto auto;
  font-size: var(--chiffre);
  font-weight: 200;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--titre);
  white-space: nowrap;
}

.chiffre__avant {
  grid-row: 1;
  align-self: end;
}

.chiffre__nombre {
  grid-row: 2;
}

.chiffre__apres {
  grid-row: 3;
  margin-top: 4px;
}

.chiffre .unite {
  line-height: 1.2;
}

.chiffre + p {
  margin-top: var(--espace-titre);
}

/* Prix mis en avant : 40px / 34px / 30px */
.prix {
  font-size: var(--prix);
  font-weight: 200;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--titre);
  white-space: nowrap;
}

/* Le prix du site se lit en Accent (blanc sur Encre) */
.accent-texte {
  color: var(--prix-couleur);
}

/* L'unité suit le chiffre à la taille du corps, jamais à celle du chiffre */
.unite {
  font-size: var(--corps);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--texte);
}

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.17em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--eyebrow);
}

.eyebrow + * {
  margin-top: var(--espace-titre);
}

/* Étiquette de section numérotée (accueil) : « 01 · LIBELLÉ » */
.etiquette {
  color: var(--etiquette-texte);
}

.etiquette__num {
  color: var(--etiquette-num);
}

.legende {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--legende);
}

strong {
  font-weight: 600;
  color: var(--titre);
}

/* Lien texte */
a {
  color: var(--lien);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--lien-survol);
}

a:focus-visible,
summary:focus-visible,
input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--contour);
}

blockquote {
  padding-left: 24px;
  border-left: 1px solid var(--ligne);
}

blockquote + blockquote {
  margin-top: var(--espace-bloc);
}

.registre > blockquote + blockquote {
  margin-top: 0;
}


/* ==========================================================================
   6. Composants
   ========================================================================== */

/* --- En-tête : 72px / 68px / 60px ; filet dessous, jamais d'ombre -------- */

.entete {
  position: relative;
  background: var(--papier);
  border-bottom: 1px solid #e3ded7;
  box-shadow: none;
}

.entete__barre {
  display: flex;
  align-items: center;
  gap: 40px;
  height: var(--hauteur-entete);
}

/* Logotype : du texte, en capitales fines et espacées (v5, décision 6) */
.marque {
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}

.nav {
  display: flex;
  gap: 32px;
}

.entete__compte {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
}

/* Lien de navigation */
.nav__lien {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
}

.nav__lien[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

/* Menu mobile : <details> natif, sans JavaScript (affiché sous 992px) */
.menu {
  display: none;
}

.menu__panneau {
  position: absolute;
  top: var(--hauteur-entete);
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px var(--marge);
  background: var(--papier);
  border-top: 1px solid var(--ligne);
  border-bottom: 1px solid var(--filet);
}

/* --- Boutons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--hauteur-bouton);      /* 48px, téléphone 44px */
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: 100px;
  font-size: var(--bouton);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition);
}

/* Bouton plein */
.btn--plein {
  background: var(--ink);
  color: #ffffff;
}

.btn--plein:hover {
  background: var(--accent);
  color: #ffffff;
}

.btn--plein:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn--plein:disabled,
.btn--plein[aria-disabled="true"] {
  background: #e3ded7;
  color: #6e7378;
  cursor: default;
}

/* Bouton plein sur fond Encre — le fond Ink y serait invisible */
.fond-encre .btn--plein {
  background: #ffffff;
  color: var(--ink);
}

.fond-encre .btn--plein:hover {
  background: var(--accent-clair);
  color: var(--ink);
}

.fond-encre .btn--plein:focus-visible {
  outline: 2px solid var(--accent-clair);
  outline-offset: 2px;
}

/* Bouton fantôme (fond clair) */
.btn--fantome {
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
}

.btn--fantome:hover {
  background: var(--papier-alt);
  color: var(--ink);
}

.btn--fantome:focus-visible {
  outline: 2px solid var(--accent);
}

.btn--fantome:disabled,
.btn--fantome[aria-disabled="true"] {
  border-color: var(--ligne);
  color: var(--ink-soft);
  cursor: default;
}

/* Bouton fantôme inversé (sur fond Encre) */
.btn--inverse {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .5);
  color: #ffffff;
}

.btn--inverse:hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, .08);
  color: #ffffff;
}

.btn--inverse:focus-visible {
  outline: 2px solid var(--accent-clair);
}

.btn--inverse:disabled,
.btn--inverse[aria-disabled="true"] {
  border-color: rgba(255, 255, 255, .25);
  color: rgba(255, 255, 255, .5);
  cursor: default;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* --- Tag / filtre -------------------------------------------------------- */

.tag {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  background: #ffffff;
  border: 1px solid var(--bord-champ);
  border-radius: 100px;
  font-size: 14px;
  line-height: 1;
  color: var(--ink-mid);
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition);
}

.tag:hover {
  border-color: var(--ink);
  color: var(--ink-mid);
}

.tag:focus-visible {
  outline: 2px solid var(--accent);
}

/* Tag actif (y compris un repli ouvert) */
.tag--actif,
details[open] > summary.tag {
  background: var(--ink);
  border-color: var(--ink);
  color: #ffffff;
}

summary {
  list-style: none;
  width: fit-content;
  cursor: pointer;
}

summary::-webkit-details-marker {
  display: none;
}

details[open] > summary + * {
  margin-top: var(--espace-bloc);
}

.repli__lien {
  font-size: 15px;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.repli__lien:hover {
  color: var(--accent);
}

details[open] > summary.repli__lien + * {
  margin-top: 16px;
}

/* Repli discret : un état de la maquette qu'on ne montre pas d'emblée */
.repli__lien--discret {
  font-size: 13px;
  color: var(--legende);
}

/* --- Carte : survol = bordure Ink ---------------------------------------- */

.carte {
  display: block;
  background: #ffffff;
  border: 1px solid #e3ded7;
  border-radius: 2px;
  padding: 24px;
  box-shadow: none;
  transition: var(--transition);
}

/* Carte posée sur Papier : la bordure claire ne s'y verrait pas */
.carte--forte {
  border-color: var(--bord-champ);
}

.carte:hover {
  border-color: #16181a;
}

a.carte {
  color: var(--ink-mid);
  text-decoration: none;
}

a.carte:hover {
  color: var(--ink-mid);
}

a.carte:focus-visible {
  outline: 2px solid var(--accent);
}

/* --- Champs -------------------------------------------------------------- */

.champ {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Label de champ */
.champ label {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink-soft);
}

.fond-alt .champ label {
  color: var(--ink-mid);
}

.champ input,
.champ select {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  background: #ffffff;
  border: 1px solid var(--bord-champ);
  border-radius: 2px;
  font-size: 17px;
  color: var(--ink);
  transition: var(--transition);
}

.champ input::placeholder {
  color: var(--ink-soft);
  opacity: 1;
}

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

/* Focus clavier d'un champ : bordure 2px Ink (pas de contour Accent) */
.champ input:focus,
.champ select:focus {
  outline: none;
  border: 2px solid var(--ink);
  padding: 0 15px;
}

.champ input:disabled,
.champ select:disabled {
  background: var(--papier-alt);
}

/* Champ en erreur */
.champ input[aria-invalid="true"] {
  border: 2px solid #b3261e;
  padding: 0 15px;
}

.champ__erreur {
  font-size: 14px;
  line-height: 1.3;
  color: #b3261e;
}

/* Champ suivi de son unité */
.champ__saisie {
  display: flex;
  align-items: center;
  gap: 12px;
}

.champ__unite {
  flex: none;
  width: 2em;
  color: var(--ink-mid);
}

.case {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.case input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 4px 0 0;
  accent-color: var(--ink);
}

.formulaire > * + * {
  margin-top: 24px;
}

.grille-champs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: start;
}

.grille-champs--2 {
  grid-template-columns: repeat(2, 1fr);
}

/* Sept champs sans trou : quatre sur la première rangée, trois sur la seconde */
.grille-champs--7 {
  grid-template-columns: repeat(12, 1fr);
}

.grille-champs--7 > * {
  grid-column: span 3;
}

.grille-champs--7 > :nth-child(n + 5) {
  grid-column: span 4;
}

/* --- Barre de recherche -------------------------------------------------- */

.recherche__barre {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 16px;
  align-items: end;
}

/* Recherche libre : le champ prend toute la largeur, le bouton est en fin de bloc */
.recherche__barre--libre {
  grid-template-columns: 1fr;
}

/* Panneau du bloc de recherche : le champ libre, les trois listes et le bouton
   forment un seul outil, encadre d'un filet (v5) */
.recherche {
  background: var(--papier);
  border: 1px solid var(--ligne);
  border-radius: 2px;
  padding: 24px;
}

.recherche > * + * {
  margin-top: var(--espace-bloc);
}

/* --- Fil d'Ariane -------------------------------------------------------- */

.ariane {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
  color: var(--ink-soft);
}

.ariane li + li::before {
  content: "/";
  margin-right: 8px;
}

.ariane a {
  color: var(--ink-soft);
}

.ariane a:hover {
  color: var(--accent);
}

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

/* Sur fond Encre, Ink soft et Ink ne se lisent plus */
.fond-encre .ariane,
.fond-encre .ariane a {
  color: #e3ded7;
}

.fond-encre .ariane a:hover {
  color: var(--accent-clair);
}

.fond-encre .ariane [aria-current="page"] {
  color: #ffffff;
}

.section--tete nav:first-child + * {
  margin-top: var(--espace-bloc);
}

/* --- Tête de page : titre à gauche (7/12), repère à droite (5/12) -------- */

.tete-page {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--espace-bloc) calc(2 * var(--espace-bloc));
  align-items: end;
}

.tete-page__cote {
  padding-left: var(--espace-bloc);
  border-left: 1px solid var(--ligne);
}

.tete-page__cote :is(.display, .prix) + p {
  margin-top: 8px;
}

/* --- Bande Accent (sur chacune des cinq pages) --------------------------- */

.bande-accent {
  padding-block: 40px;
  background: #916449;
  color: #ffffff;
  --titre: #ffffff;
  --texte: #ffffff;
  --lien: #ffffff;
  --lien-survol: #ffffff;
  --eyebrow: #ffffff;
  --contour: #ffffff;
  --prix-couleur: #ffffff;
  --legende: #ffffff;
  --ligne: rgba(255, 255, 255, .35);
  --filet: rgba(255, 255, 255, .35);
  --etiquette-num: #ffffff;
  --etiquette-texte: #ffffff;
  /* Le brief v3 demandait 0.7. À 0.7 l'eyebrow (12px) tombe à 3,4:1 sur #916449,
     sous le seuil AA de 4,5:1 ; il reste donc opaque. Voir CONSIGNES-RESPECTEES.md. */
  --bande-eyebrow-opacite: 1;
}

.bande-accent .eyebrow {
  opacity: var(--bande-eyebrow-opacite);
}

.bande-accent__grille {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--espace-bloc) calc(2 * var(--espace-bloc));
  align-items: center;
}

.bande-accent .btn--plein {
  background: #ffffff;
  color: var(--ink);
}

.bande-accent .btn--plein:hover {
  background: var(--ink);
  color: #ffffff;
}

.bande-accent .btn--plein:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* --- Bandeau « prix réservés » : filet d'accent à gauche ------------------ */

.bandeau {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding: 20px;
  background: #faf9f7;
  border-left: 3px solid #916449;
  color: var(--ink);
}

/* --- Hachure : une donnée masquée se dessine, elle ne s'écrit pas --------
   Bloc de 96 × 12px. Les traits sont des barres obliques de la police
   (1px environ en graisse 200) : ni image, ni dégradé. */

.hachure {
  display: inline-block;
  width: 96px;
  height: 12px;
  overflow: hidden;
  vertical-align: middle;
  background: #ffffff;
  border: 1px solid #e3ded7;
  font-size: 15px;
  font-weight: 200;
  letter-spacing: 0;
  line-height: 10px;
  text-align: left;
  white-space: nowrap;
  color: #e3ded7;
}

.hachure::before {
  content: "////////////////////////////////" / "";
}

.hachure--courte {
  width: 48px;
}

/* Repère masqué de l'échelle de prix : la donnée est réservée aux abonnés */
.echelle__masque {
  display: flex;
  align-items: center;
  min-height: 34px;
}

/* --- Lignes (résultats, variantes) : séparées par des filets ------------- */

.lignes {
  border-top: 1px solid var(--ligne);
}

.tete + .lignes,
.bandeau + .lignes {
  border-top: 0;
}

.ligne {
  display: grid;
  /* 3e colonne à 300px : la ligne de la fiche en accès libre porte son prix
     ET la mention « exemple en accès libre » sur une seule ligne. */
  grid-template-columns: 1fr 64px 300px;
  gap: 4px 24px;
  align-items: baseline;
  max-width: none;
  padding: 10px 12px;
  border-bottom: 1px solid var(--ligne);
  break-inside: avoid;
  transition: var(--transition);
}

/* Survol : la ligne entière, pas seulement le lien */
.ligne:hover {
  background: var(--survol-ligne);
}

.ligne > * {
  margin-top: 0;
  max-width: none;
}

.ligne > :last-child {
  text-align: right;
}

.ligne--2 {
  grid-template-columns: 1fr 48px;
}

/* Titre d'ouvrage dans une ligne : 18px, souligné au survol seulement */
.ligne h3 {
  font-size: 18px;
}

.ligne h3 a {
  text-decoration: none;
}

.ligne h3 a:hover,
.ligne h3 a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

/* Numéro d'ordre en tête de ligne, comme dans un registre */
.lignes--num {
  counter-reset: ligne;
}

.lignes--num > .ligne {
  grid-template-columns: 28px 1fr 64px 300px;
}

.lignes--num > .ligne--2 {
  grid-template-columns: 28px 1fr 48px;
}

.lignes--num > .ligne::before {
  counter-increment: ligne;
  content: counter(ligne, decimal-leading-zero);
  font-size: 13px;
  color: var(--legende);
}

.lignes--cols2 {
  columns: 2;
  column-gap: calc(2 * var(--espace-bloc));
}

/* Tête de colonnes de la liste de résultats : c'est le bandeau « prix réservés ».
   La mention y figure une fois ; les lignes portent une hachure. */
.lignes__tete {
  display: grid;
  grid-template-columns: 28px 1fr 64px 300px;
  gap: 4px 24px;
  align-items: baseline;
  padding: 12px 12px 12px 9px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-mid);
}

.lignes__tete > * {
  margin-top: 0;
  max-width: none;
}

.lignes__tete > :first-child {
  grid-column: 2;
}

.lignes__tete > :last-child {
  text-align: right;
}

/* --- Liste simple -------------------------------------------------------- */

.liste {
  border-top: 1px solid var(--ligne);
}

.tete + .liste {
  border-top: 0;
}

.liste li {
  max-width: none;
  padding: 12px;
  border-bottom: 1px solid var(--ligne);
  break-inside: avoid;
  transition: var(--transition);
}

.liste li:hover {
  background: var(--survol-ligne);
}

/* Cinq liens sur une rangée (ouvrages liés) : filets verticaux, pas d'orphelin */
.liste--5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.liste--5 li {
  padding: 16px;
  border-bottom: 0;
  border-left: 1px solid var(--ligne);
}

.liste--5 li:first-child {
  padding-left: 0;
  border-left: 0;
}

.liste--5 li:hover {
  background: none;
}

/* --- Pagination ---------------------------------------------------------- */

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  font-size: 15px;
  color: var(--ink-mid);
}

.pagination li {
  max-width: none;
}

.pagination a {
  color: var(--ink-mid);
  text-decoration: none;
}

.pagination a:hover {
  color: var(--accent);
}

.pagination [aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.pagination + .legende {
  margin-top: 16px;
}

/* --- Échelle de prix : un filet, trois repères, la médiane en Accent ----- */

.echelle__reperes {
  position: relative;
}

.echelle__reperes dt {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--legende);
}

.echelle__reperes dd {
  margin-top: 4px;
  white-space: nowrap;
}

/* Le minimum et le maximum s'alignent sur la ligne de base de la médiane */
.echelle__repere--min,
.echelle__repere--max {
  position: absolute;
  bottom: calc(var(--display) * .06);
}

.echelle__repere--min {
  left: 0;
}

.echelle__repere--max {
  right: 0;
  text-align: right;
}

/* La médiane est posée à sa place sur l'échelle : (65,00 − 6,31) / (123,08 − 6,31) */
.echelle__repere--mediane {
  width: fit-content;
  margin-left: 50.26%;
  transform: translateX(-50%);
  text-align: center;
}

/* Minimum et maximum : 22px / 21px / 19px */
.echelle__valeur {
  font-size: var(--h3);
  font-weight: 400;
  line-height: 1.3;
  color: var(--titre);
}

.echelle__axe {
  position: relative;
  height: 20px;
  margin-top: 20px;
  border-top: 1px solid var(--filet);
}

.echelle__axe span {
  position: absolute;
  top: -7px;
  width: 1px;
  height: 13px;
  background: var(--filet);
}

.echelle__axe span:nth-child(1) {
  left: 0;
}

.echelle__axe span:nth-child(2) {
  left: 50.26%;
  top: -13px;
  width: 3px;
  height: 25px;
  margin-left: -1.5px;
  background: var(--accent);
}

.echelle__axe span:nth-child(3) {
  right: 0;
}

/* --- Postes de l'estimation : trois colonnes de neuf, montants hachurés --- */

.postes {
  columns: 3;
  column-gap: calc(2 * var(--espace-bloc));
  margin-top: 0;
}

.postes li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: none;
  border-bottom: 1px solid var(--ligne);
  font-size: 13px;
  line-height: 19px;
  break-inside: avoid;
}

/* --- L'estimation : chaque ligne porte le nom du poste, son ratio et le montant --- */

.postes--estimation {
  columns: 2;
}

.postes--estimation li {
  align-items: center;
  gap: 10px;
}

.postes--estimation .chiffres {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.postes--estimation .chiffres input {
  width: 88px;
  text-align: right;
}

.postes--estimation .montant {
  min-width: 92px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* --- Les textes légaux : une colonne lisible, des intertitres espacés --- */

.texte-legal {
  max-width: 74ch;
}

.texte-legal h2 {
  margin-top: calc(2 * var(--espace-bloc));
  margin-bottom: 6px;
}

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

.texte-legal p,
.texte-legal li {
  line-height: 1.65;
}

.texte-legal ul,
.texte-legal ol {
  padding-left: 1.2em;
}

.texte-legal table {
  width: 100%;
  border-collapse: collapse;
}

.texte-legal th,
.texte-legal td {
  border-bottom: 1px solid var(--ligne);
  padding: 8px 10px;
  text-align: left;
}

/* --- Pictogrammes et schémas : au trait, 1,5px, sans remplissage (v5 § 3) - */

.picto {
  display: block;
  flex: none;
  width: 32px;
  height: 32px;
  color: var(--titre);
}

/* Le trait reste à 1,5px quelle que soit la taille d'affichage */
.picto *,
.schema svg * {
  vector-effect: non-scaling-stroke;
}

.picto + * {
  margin-top: 12px;
}

/* Schéma de principe : dessin sur Papier, repères numérotés, légende en texte */
.schema {
  padding: var(--espace-bloc);
  background: var(--papier);
  border: 1px solid var(--ligne);
  border-radius: 2px;
  color: var(--ink);
  --legende: #6e7378;
}

.schema svg {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin-inline: auto;
}

/* Les repères sont du texte : c'est le seul élément rempli du dessin */
.schema text {
  fill: currentColor;
  stroke: none;
  font-size: 13px;
  font-weight: 500;
}

.schema figcaption {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--ligne);
}

.schema__reperes {
  columns: 2;
  column-gap: var(--espace-bloc);
  margin-top: 8px;
  padding-left: 1.4em;
  list-style: decimal;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-mid);
}

.schema__reperes li {
  max-width: none;
  break-inside: avoid;
}

/* Schéma à côté de sa légende (estimation) */
.schema--large {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--espace-bloc);
  align-items: center;
}

.schema--large figcaption {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* --- Pied de page : Papier alt, un seul fond Encre par page (v5, décision 3) */

.pied {
  position: relative;
  padding-top: 32px;
  padding-bottom: 24px;
  background: var(--papier-alt);
  color: var(--ink);
  --texte: var(--ink);
  --lien: var(--ink);
  --eyebrow: var(--accent);
  --legende: #36393d;
}

.pied .duo {
  grid-template-columns: 1fr 3fr;
}

.pied .duo > * {
  padding-top: 0;
}

.pied .nav__lien {
  font-size: 14px;
}

.pied__lots {
  columns: 3;
  column-gap: var(--espace-bloc);
}

.pied__lots li {
  break-inside: avoid;
  padding-block: 2px;
  font-size: 14px;
  line-height: 1.4;
}

.pied__legal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}


/* ==========================================================================
   7. Écrans
   ========================================================================== */

/* --- Écran 1 : accueil --------------------------------------------------- */

/* Héro en deux aplats : le titre et le panneau d'exemple sur Encre (moins de
   400px), le chapeau et les boutons dessous sur Papier. */
.hero__grille {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--espace-bloc) calc(2 * var(--espace-bloc));
  align-items: stretch;
}

.hero__grille > :first-child {
  align-self: end;
}

.hero__exemple {
  display: flex;
  flex-direction: column;
}

.hero__exemple > .legende {
  margin-top: 8px;
}

.hero__suite {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--espace-bloc) calc(2 * var(--espace-bloc));
  align-items: center;
  padding-block: 32px;
}

.hero__suite > * {
  margin-top: 0;
}

/* Panneau de données : il prend toute la hauteur de la colonne */
.panneau {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px 24px;
  background: #ffffff;
  border: 1px solid #e3ded7;
  border-radius: 2px;
}

.panneau__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  padding-bottom: 12px;
}

.panneau__tete > * {
  margin-top: 0;
}

.panneau__lignes {
  flex: 1;
  display: grid;
  grid-auto-rows: 1fr;
}

.panneau__ligne {
  display: grid;
  grid-template-columns: 1fr 32px 112px;
  gap: 2px 12px;
  align-items: center;
  max-width: none;
  margin-inline: -12px;
  padding: 10px 12px;
  border-top: 1px solid #e3ded7;
  transition: var(--transition);
}

.panneau__ligne:hover {
  background: #f5f3f0;
}

.panneau__ligne > * {
  margin-top: 0;
  max-width: none;
}

.panneau__ligne > :last-child {
  text-align: right;
}

.panneau__nom {
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
}

.panneau__unite {
  font-size: 13px;
  line-height: 1.4;
  color: #6e7378;
}

/* Le seul prix du panneau : il doit se lire avant tout le reste */
.panneau__prix {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--accent);
}

.panneau__masque {
  line-height: 1.2;
}

/* Section 01 : les trois chiffres partagent la même ligne de base */
.registre--chiffres > * {
  padding-top: 4px;
}

/* Carte de la fiche en accès libre */
.fiche-libre > div + div {
  margin-top: var(--espace-bloc);
  padding-top: var(--espace-bloc);
  border-top: 1px solid var(--ligne);
}

.fiche-libre .legende {
  margin-top: 8px;
}

.abonnement .btn {
  margin-top: var(--espace-bloc);
}

/* Les quatre avantages de l'abonnement : pictogramme à gauche, texte à droite */
.avantages {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px var(--espace-bloc);
}

.avantages li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: start;
  max-width: none;
}

.avantages .picto + * {
  margin-top: 0;
}

.avantages + p {
  margin-top: var(--espace-bloc);
}

/* --- Écran 2 : résultats ------------------------------------------------- */

.ligne__unite {
  color: var(--ink-mid);
}

/* Ligne de la fiche en accès libre : le seul prix visible sur l'écran de résultats (D3). */
.ligne--libre {
  background: var(--papier-alt);
  --survol-ligne: var(--papier-alt);
  --legende: #36393d;
}

.ligne__prix {
  font-size: 18px;
  font-weight: 600;
  color: var(--accent);
}

.ligne__prix .legende {
  font-weight: 400;
}

/* Phrase clé d'une bande Accent quand elle n'est pas un titre */
.bande-accent__phrase {
  max-width: none;
}

/* --- Écran 3 : fiche d'ouvrage ------------------------------------------- */

.fiche__prix .btn {
  margin-top: var(--espace-bloc);
}

/* Le descriptif unique (5/12) et sa coupe de principe (7/12) */
.descriptif {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--espace-bloc) calc(2 * var(--espace-bloc));
  align-items: start;
}

.descriptif .lead {
  color: var(--titre);
}

/* --- Écran 4 : inscription ----------------------------------------------- */

.inscription {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: calc(2 * var(--espace-bloc));
  align-items: start;
}

/* --- Écran 5 : estimation ------------------------------------------------ */

.schema + .formulaire {
  margin-top: var(--espace-bloc);
}

/* Résultat : le nombre de postes et le coût masqué (3/12) à gauche, les postes (9/12) à droite */
.resultat {
  display: grid;
  grid-template-columns: 3fr 9fr;
  gap: var(--espace-bloc);
  align-items: start;
  margin-top: 12px;
}

.resultat dt {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--legende);
}

.resultat dd {
  margin-top: 4px;
}

.resultat__cout > div + div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  margin-top: 8px;
}

.resultat__cout > div + div dd {
  margin-top: 0;
}


/* ==========================================================================
   8. Adaptations par point de rupture
   ========================================================================== */

@media (width < 1200px) {
  /* Résultat de l'estimation : les colonnes de postes sont trop étroites pour la hachure */
  .resultat {
    grid-template-columns: 4fr 8fr;
  }

  .postes .hachure {
    display: none;
  }

  /* Panneau du héro à deux lignes : l'aplat Encre reste sous 400px (v4 § 3.2) */
  .panneau__ligne:nth-child(2),
  .panneau__ligne:nth-child(3) {
    display: none;
  }
}

@media (width < 992px) {
  /* En-tête : le menu passe dans le repli */
  .nav,
  .entete__compte .nav__lien {
    display: none;
  }

  /* En-tête simplifié (inscription) : pas de repli, le lien reste visible */
  .entete--simple .entete__compte .nav__lien {
    display: inline;
  }

  .menu {
    display: block;
  }

  .entete__barre {
    gap: 16px;
  }

  .marque {
    font-size: 18px;
  }

  .grille-3,
  main .duo,
  .duo-carte,
  .descriptif,
  .schema--large,
  .inscription,
  .hero__grille,
  .hero__suite,
  .tete-page,
  .bande-accent__grille,
  .resultat {
    grid-template-columns: 1fr;
  }

  /* Les filets verticaux deviennent horizontaux */
  .registre,
  .registre--2 {
    grid-template-columns: 1fr;
  }

  .registre > * {
    padding: 20px 0;
    border-left: 0;
    border-top: 1px solid var(--ligne);
  }

  .registre > :first-child {
    border-top: 0;
  }

  /* Chiffres empilés : plus de rangée réservée au mot d'avant */
  .chiffre {
    grid-template-rows: auto;
  }

  main .duo > * + * {
    padding-left: 0;
    border-left: 0;
  }

  .tete-page__cote {
    padding-left: 0;
    padding-top: var(--espace-bloc);
    border-left: 0;
    border-top: 1px solid var(--ligne);
  }

  .bande-accent__grille > .btn {
    justify-self: start;
  }

  /* Héro sur une colonne, le panneau sous le titre */
  .hero__haut {
    padding-block: 24px;
  }

  .hero__grille {
    gap: 16px;
  }

  .hero__grille > :first-child {
    align-self: auto;
  }

  .hero__suite {
    padding-block: 24px;
  }

  .panneau {
    padding: 12px 16px;
  }

  .panneau__tete {
    padding-bottom: 8px;
  }

  .pied {
    padding-top: 24px;
  }

  .pied .duo {
    grid-template-columns: 1fr 2fr;
  }

  .pied .nav__lien {
    font-size: 13px;
  }

  .grille-champs {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Sept champs sur deux colonnes : le premier prend la rangée, les six autres vont par deux */
  .grille-champs--7 > *,
  .grille-champs--7 > :nth-child(n + 5) {
    grid-column: auto;
  }

  .grille-champs--7 > :first-child {
    grid-column: 1 / -1;
  }

  .lignes--cols2 {
    columns: 1;
  }

  /* Cinq liens : 2 + 2 + 1, le dernier sur toute la largeur */
  .liste--5 {
    grid-template-columns: repeat(2, 1fr);
  }

  .liste--5 li {
    padding: 12px;
    border-bottom: 1px solid var(--ligne);
  }

  .liste--5 li:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .liste--5 li:last-child {
    grid-column: 1 / -1;
  }

  .pied .duo > * + * {
    padding-left: var(--espace-bloc);
  }
}

@media (width < 768px) {
  .recherche__barre {
    grid-template-columns: 1fr;
  }

  /* Lignes de résultats : le nom, puis l'unité et la hachure dessous */
  .ligne:not(.ligne--2) {
    grid-template-columns: auto 1fr;
  }

  .lignes--num > .ligne:not(.ligne--2) {
    grid-template-columns: 28px auto 1fr;
  }

  .ligne:not(.ligne--2) > :first-child {
    grid-column: 1 / -1;
  }

  .lignes--num > .ligne:not(.ligne--2) > :first-child {
    grid-column: 2 / -1;
  }

  .lignes--num > .ligne:not(.ligne--2) > :nth-child(2) {
    grid-column: 2;
  }

  /* Tête de colonnes : seule la mention reste */
  .lignes__tete {
    grid-template-columns: 1fr;
  }

  .lignes__tete > :not(:last-child) {
    display: none;
  }

  .lignes__tete > :last-child {
    text-align: left;
  }

  /* Tête de page avec fil d'Ariane : resserrée pour rester sous 400px d'Encre */
  .section--tete {
    padding-top: 16px;
    padding-bottom: 20px;
  }

  .section--tete nav:first-child + * {
    margin-top: 16px;
  }

  .tete-page {
    gap: 16px;
  }

  .tete-page__cote {
    padding-top: 16px;
  }

  .tete-page .eyebrow + * {
    margin-top: 8px;
  }

  .fiche__prix .btn {
    margin-top: 16px;
  }

  /* Héro : bandeau sous 600px, chaque ligne du panneau sur une seule rangée */
  .hero__haut {
    padding-block: 20px;
  }

  .hero__suite {
    padding-block: 16px 12px;
    gap: 16px;
  }

  .hero__suite .lead {
    font-size: 16px;
  }

  .hero__suite .actions {
    gap: 8px;
  }

  .panneau__tete .legende {
    display: none;
  }

  .panneau__ligne {
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    margin-inline: -8px;
    padding: 10px 8px;
  }

  .panneau__nom {
    font-size: 14px;
  }

  .panneau__prix {
    font-size: 18px;
  }

  .panneau .hachure {
    width: 64px;
  }

  /* Échelle de prix : l'unité passe sous la valeur pour que les trois repères tiennent */
  .echelle .unite {
    display: block;
  }

  .echelle__repere--min,
  .echelle__repere--max {
    bottom: 0;
  }

  .postes {
    columns: 2;
    column-gap: var(--espace-bloc);
  }

  .postes .hachure {
    display: none;
  }

  .avantages {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .schema {
    padding: 16px;
  }

  /* Pied de page : les liens légaux sur une rangée, les lots sur deux colonnes */
  .pied .duo {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .pied .duo > * + * {
    padding-left: 0;
    border-left: 0;
  }

  .pied .eyebrow + * {
    margin-top: 12px;
  }

  .pied__lots {
    columns: 2;
    column-gap: 12px;
  }

  .pied__legal {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 24px;
  }
}

@media (width < 560px) {
  .actions .btn,
  .recherche__barre .btn,
  .formulaire > .btn,
  .bande-accent__grille > .btn {
    width: 100%;
  }

  .grille-champs,
  .grille-champs--2 {
    grid-template-columns: 1fr;
  }

  .grille-champs--7 > :first-child {
    grid-column: auto;
  }
}

/* Très petits téléphones : l'en-tête et les boutons longs tiennent sans débordement */
@media (width < 360px) {
  .entete__barre {
    gap: 12px;
  }

  .btn {
    padding: 0 20px;
  }

  .entete .tag {
    padding: 0 12px;
  }
}

/* Variante cliquable dans la fiche : soulignée au survol, la variante affichée est marquée.
   Ajouté le 05/10/2026 pour permettre de choisir la variante montrée dans le bandeau. */
.ligne--2 p a {
  text-decoration: none;
  color: var(--lien);
}
.ligne--2 p a:hover,
.ligne--2 p a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  color: var(--lien-survol);
}
.ligne--choisie p a,
.ligne--choisie p a:hover,
.ligne--choisie p a:focus-visible {
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}
.ligne--choisie .ligne__prix {
  font-weight: 600;
}

/* Prix masqué dans le bandeau de la fiche : il occupe la place du prix qu'il remplace,
   pour que le lecteur voie qu'un prix existe là mais qu'il est réservé aux abonnés. */
.ligne__masque--fiche {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 88px;
  margin: 4px 0 12px;
}
.ligne__masque--fiche .hachure {
  width: 168px;
  height: 44px;
  font-size: 34px;
}

/* ==========================================================================
   Espace abonné — repli sous 768 px
   Ajout du 04/10/2026 : la charte ne prévoyait pas deux cartes côte à côte
   dans un .duo, ni un registre à plusieurs colonnes sur téléphone.
   ========================================================================== */

@media (width < 768px) {
  /* Les deux colonnes passent l'une sous l'autre, le filet devient une ligne */
  .duo,
  .duo-carte,
  .inscription {
    grid-template-columns: 1fr;
  }

  /* L'estimation : une seule colonne de postes sur téléphone */
  .postes--estimation {
    columns: 1;
  }

  .duo > * + * {
    margin-top: var(--espace-bloc);
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--ligne);
  }

  /* Le registre de l'espace abonné : une colonne, filets horizontaux */
  .registre,
  .registre--2 {
    grid-template-columns: 1fr;
  }

  .registre > * {
    padding-right: 0;
  }

  .registre > * + * {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--ligne);
  }

  /* Les boutons de l'espace abonné prennent la largeur disponible */
  .carte .actions {
    gap: 12px;
  }

  /* Un libellé long doit pouvoir passer à la ligne : sans cela, il élargit toute la carte
     (les boutons de la charte sont sur une seule ligne, ce qui va bien ailleurs). */
  .carte .btn {
    white-space: normal;
    height: auto;
    min-height: var(--hauteur-bouton);
    padding: 12px 20px;
    line-height: 1.25;
    text-align: center;
  }
}