/* Pages intérieures : le CSS des blocs de src/components/page/, chargé par
   src/layouts/PageInterieure.astro après tokens.css et accueil.css.
   Jetons seulement (DESIGN.md §1), seuils de l'accueil seulement. La FAQ, les
   replis, l'appel final et les tableaux réemploient les classes de l'accueil :
   leur CSS reste dans accueil.css. */

/* Tout <b> du contenu pèse 500 : Geist n'est chargée qu'en 300, 400 et 500. */
main b,
main strong { font-weight: var(--graisse-moyenne); }

/* ------------------------------------------------------- en-tête de page */
/* L'entête du site est fixe et hors du flux : l'en-tête de page réserve sa
   hauteur, plus une respiration, avant le fil d'Ariane. */
.entete-page { padding-top: calc(var(--h-entete) + var(--e7)); }

.entete-page__corps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e5);
  margin-top: var(--e8);
}

/* Même mesure que le H2 d'une tête de section. */
.entete-page .h1 { max-width: 22ch; }
.entete-page .cta { margin-top: var(--e3); }

/* --------------------------------------------------------- fil d'Ariane */
/* Chivo en capitales, gris atténué, séparateur « / », dernier maillon en
   couleur de texte (DESIGN.md §10). Les maillons s'enchaînent comme une
   phrase : un nom long passe à la ligne sans pousser la page. */
.fil-ariane {
  font-family: var(--police-mono);
  font-size: var(--t-etiquette);
  line-height: var(--lh-mention);
  letter-spacing: var(--ls-etiquette);
  text-transform: uppercase;
  font-weight: var(--graisse-normale);
  color: var(--texte-attenue);
}
.fil-ariane li { display: inline; }
.fil-ariane__sep { margin-inline: var(--e2); }
.fil-ariane a {
  text-decoration: none;
  transition: opacity var(--duree-survol) var(--courbe-survol);
}
.fil-ariane a:hover { opacity: var(--opacite-survol); }
.fil-ariane [aria-current="page"] { color: var(--texte); }

/* ------------------------------------------------------- section de texte */
/* La tête, la prose, puis les blocs, à 48 px d'écart comme la liste de la
   méthode et la grille de la FAQ sous leur tête. */
.section-texte {
  display: flex;
  flex-direction: column;
  gap: var(--e7);
}

.prose {
  display: flex;
  flex-direction: column;
  gap: var(--e4);
}
.prose > .h3:not(:first-child) { margin-top: var(--e4); }

/* Les listes de la prose : celles des réponses de la FAQ de l'accueil. */
.points {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  max-width: 64ch;
  padding-left: 1.25em;
  font-size: var(--t-corps);
  line-height: var(--lh-corps);
}
ul.points { list-style: disc; }
ol.points { list-style: decimal; }
.points li::marker { color: var(--texte-attenue); }

/* ----------------------------------------------------- liste éditoriale */
.liste-edito { border-top: 1px solid var(--filet); }

.liste-edito__item {
  display: grid;
  gap: var(--e3);
  padding-block: var(--e5);
  border-bottom: 1px solid var(--filet);
}

@media (min-width: 941px) {
  .liste-edito__item {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: baseline;
    gap: var(--e6);
  }
}

/* --------------------------------------------------------------- étapes */
/* Les étapes de la méthode de l'accueil (`.etape`), sans marge propre : c'est
   l'écart de la section qui les place. Le numéro lit l'accent, pas l'action. */
.etapes { border-top: 1px solid var(--filet); }
.etapes .etape__num { color: var(--accent); }

/* ---------------------------------------------------------------- carte */
/* La carte générique décidée en DESIGN.md §4 : le padding de `.constat__carte`,
   aucune ombre. */
.carte {
  display: flex;
  flex-direction: column;
  gap: var(--e5);
  --carte-marge: clamp(24px, 2.4vw, 36px);
  padding: var(--carte-marge);
  border-radius: var(--rayon-carte);
  background: var(--fond-carte);
}

/* ----------------------------------------------------------- provisoire */
/* Une donnée du cabinet remplacée par un texte provisoire (DESIGN.md §13).
   Discret dans la lecture, sans ambiguïté pour qui valide : le cuivre de
   l'accent, jamais un fond. La marque est un pseudo-élément : le texte de la
   page reste celui qui sera validé. */
.provisoire { cursor: help; }
.provisoire__texte {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--accent);
  text-underline-offset: var(--e1);
}
/* La marque : un losange cuivre en exposant, le motif du libellé de section.
   Décidé le 27/09 par EKKO : le mot « à valider » en capitales mono se lisait
   comme une annotation de brouillon, et les critiques du duel poussaient à le
   retirer. Le soulignement pointillé et le losange signalent sans crier ; la
   note reste au survol (title), et la liste part au cabinet à part.
   Le losange est un caractère, jamais une boîte en inline-block : une boîte
   ouvre une coupure avant elle, et la ponctuation qui suit la marque passait
   seule en tête de ligne à 390 (Audit, 27/09). Un caractère colle au mot. */
.provisoire::after {
  content: "◆";
  margin-inline-start: var(--e1);
  font-size: var(--t-etiquette);
  line-height: 0;
  vertical-align: super;
  color: var(--accent);
}

/* Autour d'une section entière : une étiquette « à valider » en haut à droite
   de la section, la note au survol et dans aria-description. Décidé le 27/09
   par EKKO : le filet pointillé et le bandeau d'origine encadraient chaque
   section provisoire de la même façon, et les critiques les lisaient comme un
   squelette répété. La liste complète des données à valider se relève par
   [data-provisoire] et part au cabinet à part. */
.provisoire-bloc { position: relative; }
.provisoire-bloc::before {
  content: "à\00a0valider";
  position: absolute;
  z-index: 1;
  inset-block-start: var(--e5);
  inset-inline-end: var(--gouttiere);
  padding: var(--e1) var(--e2);
  border: 1px dotted var(--accent);
  border-radius: var(--rayon-etiquette);
  font-family: var(--police-mono);
  font-size: var(--t-etiquette);
  font-weight: var(--graisse-normale);
  line-height: var(--lh-plein);
  letter-spacing: var(--ls-etiquette);
  text-transform: uppercase;
  color: var(--accent);
  cursor: help;
}
/* Sur l'ardoise, le cuivre tombe à 1,13:1 : l'étiquette prend l'accent clair. */
.provisoire-bloc:has(> .sur-marine)::before { color: var(--accent-sur-fonce); border-color: var(--accent-sur-fonce); }