@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/spectral-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/spectral-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/spectral-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/spectral-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/source-sans-3-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/source-sans-3-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/source-sans-3-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/source-sans-3-latin-700-normal.woff2') format('woff2');
}

:root {
  --color-navy: #091725;
  --color-gold-light: #a58557;
  --color-gold-dark: #7a5e33;
  --color-bone: #dcd4c8;
  --color-white: #ffffff;
  --color-gray-900: #1f2430;
  --color-gray-600: #5b6270;
  --color-gray-300: #d8d4cc;
  --color-border: #e4ded2;
  --color-warning: #9a3b2a;
  --color-warning-bg: #f6e9e4;
  --color-error: #c0202b;
  --color-error-bg: #fbe9ea;
  --color-success: #2f7a3d;
  --color-success-bg: #eaf3ea;
  --font-heading: 'Spectral', Georgia, 'Times New Roman', serif;
  --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --max-width: 1160px;
  --max-prose: 68ch;
  --shadow-sm: 0 1px 3px rgba(9, 23, 37, 0.08);
  --shadow-md: 0 8px 24px rgba(9, 23, 37, 0.10);
  --transition: 0.2s ease;
}

/* ---------- 2. Minimal reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-gray-900);
  background: var(--color-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-navy);
  font-weight: 600;
  margin: 0 0 var(--space-2);
  letter-spacing: 0.01em;
}
h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 var(--space-2); color: var(--color-gray-600); }

/* Links in running text/content use the text-safe gold, never the light one */
.prose a, .tool-link, .site-footer a {
  color: var(--color-gold-dark);
}

/* Tabular numerals: mandatory for any measurement/result figures so
   columns of numbers align vertically. Apply to inputs, outputs, tables. */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

/* ---------- 3. Header / navigation ---------- */
.site-header {
  background: var(--color-white);
  position: sticky;
  top: 0;
  z-index: 100;
}
/* Two-tone rule echoing the logo's split ring (gold / navy), reused
   as the site's signature divider, here and in .rule-flanked below. */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-gold-dark) 50%, var(--color-navy) 50%);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.brand img, .brand svg {
  height: 44px;
  width: 44px;
}
.brand .brand-text {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-navy);
  letter-spacing: 0.06em;
}
.brand .brand-text span { color: var(--color-gold-dark); }
.brand .brand-tagline {
  display: block;
  font-family: var(--font-body);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gray-600);
}

.main-nav ul {
  display: flex;
  gap: var(--space-4);
}
.main-nav a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-gray-900);
  padding: var(--space-1) 0;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.main-nav a:hover,
.main-nav a[aria-current="page"] {
  color: var(--color-gold-dark);
  border-color: var(--color-gold-dark);
}

.nav-toggle { display: none; }

/* ---------- 4. Hero ---------- */
/* Rembourrage bas nul, et non --space-5 comme en haut : il s'ADDITIONNAIT à
   celui de la .section qui suit : deux rembourrages ne fusionnent pas, à la
   différence de deux marges, ce qui portait l'écart entre le héros et les
   blocs à 8 rem. C'est le bas du héros qu'on retire plutôt que le haut de la
   section, parce que le dégradé finit en blanc : ce rembourrage-là ne se
   voyait pas, et .section garde partout ailleurs la valeur voulue. */
.hero {
  background: linear-gradient(180deg, var(--color-bone) 0%, var(--color-white) 100%);
  padding: var(--space-5) 0 0;
  text-align: center;
}
.hero .container { max-width: 760px; }
.hero-logo {
  width: 188px;
  margin: 0 auto var(--space-3);
}
.hero h1 {
  letter-spacing: 0.09em;
  margin-bottom: var(--space-2);
}
.hero .eyebrow {
  margin: 0 auto var(--space-3);
  justify-content: center;
}
.hero p.lead {
  font-size: 1.15rem;
  color: var(--color-gray-600);
}

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.7rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.btn-primary {
  background: var(--color-navy);
  color: var(--color-white);
}
.btn-primary:hover { background: #14263d; transform: translateY(-1px); }
/* Le bouton de soumission d'un outil suit immédiatement la dernière planche
   de cotation, dont la carte porte sa propre bordure : sans marge, il colle
   à ce bord et se lit comme un élément de la carte plutôt que comme l'action
   qui clôt le formulaire. La marge est portée par le formulaire et non par
   .btn-primary, pour qu'un bouton principal posé un jour hors formulaire
   n'hérite pas d'un espacement qui n'a de sens qu'ici. */
form > .btn-primary { margin-top: var(--space-5); }
.btn-outline {
  background: transparent;
  border-color: var(--color-navy);
  color: var(--color-navy);
}
.btn-outline:hover { background: var(--color-navy); color: var(--color-white); }
.btn-gold {
  background: var(--color-gold-dark);
  color: var(--color-white);
}
.btn-gold:hover { background: #664e2a; }

/* ---------- 6. Sections ---------- */
.section { padding: var(--space-5) 0; }
/* Même défaut que celui corrigé sur le héros, à un autre endroit : deux
   rembourrages ne fusionnent pas, à la différence de deux marges. Deux .section
   voisines (les groupes du catalogue) additionnaient donc les leurs, et
   laissaient 8 rem de blanc entre deux groupes.

   C'est le rembourrage HAUT de la seconde qu'on retire, et non le bas de la
   première : la dernière .section d'une page garde ainsi son écart avec le pied,
   qui n'a rien à voir avec celui-ci.

   L'exception .section-alt n'est pas spéculative, bien que la classe ne soit
   employée nulle part aujourd'hui : son rembourrage est à l'INTÉRIEUR d'une
   bande colorée, où il se voit. L'annuler collerait le titre au bord de la
   bande, un défaut d'affichage franc, là où l'écart de 8 rem n'était qu'une
   maladresse. */
.section + .section:not(.section-alt) { padding-top: 0; }
.section-alt { background: var(--color-bone); }
.section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-4);
}
/* Rule-flanked small caps, mirroring the tagline treatment in the logo
   (the tagline is set between two rules). The lines pick up
   the current text color, so it works in gold-dark (eyebrows, hero
   tagline) or any other context without extra markup. */
.eyebrow, .rule-flanked {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold-dark);
  margin-bottom: var(--space-1);
}
.eyebrow::before, .eyebrow::after,
.rule-flanked::before, .rule-flanked::after {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  flex: none;
}

/* ---------- 7. Tools grid / cards ---------- */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
}
/* ---------- 7 bis. Catalogue : fiches dépliables ---------- */

/* Le catalogue n'est pas une grille de vignettes comme l'accueil : c'est une
   liste de fiches détaillées, sur toute la largeur, repliées par défaut. À
   douze méthodes, douze blocs complets obligeaient à défiler longtemps pour
   trouver la bonne : le nom, le résumé et la référence suffisent à choisir,
   le reste attend qu'on le demande.
   Le pliage est fait par <details>/<summary>, sans une ligne de JavaScript :
   natif, utilisable au clavier, et il n'y a rien à dégrader si le JS manque
   puisqu'il n'y en a pas. */
.sk-fiche {
  display: block;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  transition: border-color var(--transition);
}
.sk-fiche + .sk-fiche { margin-top: var(--space-2); }
/* Le curseur est porté par le SOMMAIRE et non par la fiche : une fois
   dépliée, le contenu se lit et se sélectionne, il ne se clique pas. */
.sk-fiche > summary { cursor: pointer; position: relative; padding-right: var(--space-4); }
.sk-fiche:hover { border-color: var(--color-gold-light); }

/* Le triangle natif est retiré des deux façons qu'il faut : list-style pour
   les moteurs récents, ::-webkit-details-marker pour Safari avant 17. Une
   seule des deux laisse le triangle ET le chevron ci-dessous. */
.sk-fiche > summary { list-style: none; }
.sk-fiche > summary::-webkit-details-marker { display: none; }

/* Le chevron remplace le triangle : sans lui, rien ne dit que le bloc s'ouvre
   (le curseur seul ne se voit qu'une fois la souris dessus, et jamais au
   clavier ni au tactile) ; or l'affordance est ici la moitié de la
   fonctionnalité. */
.sk-fiche > summary::after {
  content: "";
  position: absolute;
  right: 0.3rem;
  top: 0.55rem;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--color-gold-dark);
  border-bottom: 2px solid var(--color-gold-dark);
  transform: rotate(45deg);
  transition: transform var(--transition);
}
.sk-fiche[open] > summary::after { transform: rotate(-135deg); }

.sk-fiche > summary h3 { margin-bottom: 0.35rem; }
/* Des <span> en bloc et non des <p> : le modèle de contenu de <summary> est
   du contenu de phrasé, éventuellement mêlé de titres. Un <p> y est invalide :
   les navigateurs l'affichent, le document ne le permet pas. */
.sk-fiche-resume { display: block; color: var(--color-gray-600); }
/* Le filet marque la frontière entre ce qui est toujours là et ce qu'on vient
   de demander. */
.sk-fiche-detail {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.tool-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.tool-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-gold-light);
}
.tool-card .tool-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--color-navy);
  color: var(--color-gold-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-1);
}
.tool-card h3 { margin-bottom: 0.25rem; }
.tool-card p { flex: 1; font-size: 0.92rem; }
/* Le lien du catalogue est le même que celui de l'accueil, et le sélecteur le
   dit plutôt que de recopier les sept déclarations : deux copies finissent par
   diverger, et la divergence ne casse rien : elle produit deux liens qui ne se
   ressemblent plus tout à fait. */
.tool-card .tool-link,
.sk-fiche-detail .tool-link {
  font-size: 0.88rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: var(--space-1);
}
.tool-card .tool-link:hover,
.sk-fiche-detail .tool-link:hover { color: var(--color-navy); }
.tool-card .tool-status {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--color-bone);
  color: var(--color-gray-600);
  align-self: flex-start;
}
.tool-card .tool-status.ready { background: var(--color-success-bg); color: var(--color-success); }
.tool-card .tool-status.soon { background: var(--color-bone); color: var(--color-gold-dark); }

/* ---------- 8. Alerts / feedback banners ----------
   Shared component for the estimation tools: results, validity-range
   warnings, hard errors. Warning uses brick (not amber) so it never
   reads as a decorative gold accent. */
.alert {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 0.92rem;
}
.alert strong { display: block; margin-bottom: 0.2rem; }
.alert-success {
  background: var(--color-success-bg);
  border-color: rgba(47, 122, 61, 0.25);
  color: #1f5429;
}
.alert-warning {
  background: var(--color-warning-bg);
  border-color: rgba(154, 59, 42, 0.3);
  color: var(--color-warning);
}
.alert-error {
  background: var(--color-error-bg);
  border-color: rgba(192, 32, 43, 0.3);
  color: var(--color-error);
}

/* ---------- 9. Footer ---------- */
.site-footer {
  background: var(--color-navy);
  color: var(--color-gray-300);
  padding: var(--space-4) 0 var(--space-3);
  margin-top: var(--space-5);
}
.site-footer a { color: var(--color-gold-light); } /* on navy, gold-light already clears 5.25:1 */
.site-footer a:hover { text-decoration: underline; }
/* The reset colours every <p> in gray-600, and that direct selector beats the
   colour inherited from .site-footer: the footer's presentation paragraph came
   out at 2.95:1 on navy, on every page of the site. The delivered charter
   patched this very paragraph with an inline style (#c9cddb): a value outside
   the palette, which is why it did not survive the move to PHP. Restoring the
   token gives 12.24:1. */
.site-footer p { color: var(--color-gray-300); }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.footer-grid h4 {
  color: var(--color-white);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
}
.footer-grid ul li { margin-bottom: 0.5rem; font-size: 0.9rem; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: var(--space-2);
  font-size: 0.82rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-1);
}

/* ---------- 10. Responsive ---------- */
@media (max-width: 800px) {
  .footer-grid { grid-template-columns: 1fr; }
  .main-nav ul { gap: var(--space-3); }
}
@media (max-width: 640px) {
  .main-nav { display: none; }
}

/* ---------- 11. Ajouts de la plateforme ---------- */

/* La navigation disparaît sous 640 px dans la charte d'origine, et le
   .nav-toggle censé la remplacer n'est jamais activé : il n'y avait plus
   aucun lien ni bascule de langue sur téléphone. On la laisse passer à la
   ligne plutôt que de la masquer : responsive, sans JavaScript. */
@media (max-width: 640px) {
  .main-nav { display: block; }
  .site-header .container { flex-wrap: wrap; gap: var(--space-1); }
  .main-nav ul { flex-wrap: wrap; gap: var(--space-2); }
}

/* Lien d'évitement : caché, révélé quand il reçoit le focus. Autonome, il ne
   dépend d'aucune règle :focus-visible. */
.evitement { position: absolute; left: -9999px; }
.evitement:focus {
  left: var(--space-2); top: var(--space-1); z-index: 200;
  background: var(--color-white); padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-navy);
}

/* La réinitialisation de la charte retire les puces et le soulignement des
   liens. Dans du texte courant, les deux sont porteurs de sens. */
.prose { max-width: var(--max-prose); }
.prose ul, .prose ol { list-style: revert; padding-left: var(--space-3); margin: 0 0 var(--space-2); }
.prose a { text-decoration: underline; }

/* La charte n'a pas de feuille d'impression. Un résultat se glisse dans un
   rapport : il doit sortir proprement. */
@media print {
  .site-header, .site-footer, .evitement, .telechargement { display: none; }
  body { background: #fff; color: #000; }
  .container { max-width: none; padding: 0; }
  .alert { border: 1px solid #666; }
  .tool-card, .alert, .resultat { break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* L'or foncé sur le fond os de la pastille « À venir » n'atteint que 4,11:1,
   sous les 4,5:1 requis à cette taille de texte. On ne touche à aucune
   couleur de la charte : on change le fond. Sur blanc, l'or foncé atteint
   6,04:1 ; la bordure conserve la présence visuelle de la pastille. */
.tool-card .tool-status.soon {
  background: var(--color-white);
  border: 1px solid var(--color-gold-light);
}

/* ---------- Outil : formulaire de cotation (vignettes de stades) ---------- */
.sk-caractere { border: 0; border-top: 1px solid var(--color-border);
                margin: var(--space-4) 0 0; padding: var(--space-2) 0 0; }
.sk-caractere legend { font-family: var(--font-heading); font-size: 1.15rem;
                       color: var(--color-navy); padding-right: var(--space-1); }
/* Même rendu, deux rôles : l'une définit le caractère, l'autre dit le geste à
   faire avant de le coter. Les noms restent distincts pour qu'on puisse les
   redifférencier sans rechercher-remplacer dans les pages.
   L'orientation était en --color-warning. Retiré : sur ce site, la brique
   signale un avertissement sous forme de BOÎTIER (.alert-warning), jamais de
   texte nu : coloré sans son composant, il se lisait comme une erreur de
   saisie, alors que la phrase est purement descriptive. */
.sk-caractere-definition,
.sk-caractere-orientation { color: var(--color-gray-600); margin: 0 0 var(--space-1); }

/* 19rem, et non 13rem : la colonne doit loger la vignette la plus exigeante,
   c'est-à-dire les DEUX planches de SPUA3 à la hauteur commune (309 px, plus
   le rembourrage de l'étiquette). En dessous, la paire rétrécissait et l'égalité
   des hauteurs (la raison d'être de la règle ci-dessous) se rompait sur les
   écrans intermédiaires. Le prix est de deux vignettes par rangée au lieu de
   trois sous 990 px de large. */
.sk-stades { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
             gap: var(--space-2); }
.sk-stade input { position: absolute; opacity: 0; }
.sk-stade label {
  display: block; height: 100%; cursor: pointer;
  padding: var(--space-1); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); background: var(--color-white);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.sk-stade label:hover { border-color: var(--color-gold-light); }
.sk-stade input:checked + label {
  border-color: var(--color-gold-dark);
  box-shadow: inset 0 0 0 1px var(--color-gold-dark);
}
/* Deux stades sur huit sont illustrés par deux planches (SPUA3, SPUB3) :
   elles se posent côte à côte dans la vignette plutôt que l'une sous l'autre.

   La contrainte porte sur la HAUTEUR, pas sur la largeur. Contraindre la
   largeur donnait des planches de tailles très différentes : les dix fichiers
   ont des hauteurs natives voisines (307 à 410 px) mais des largeurs de 128 à
   203 px, et une vignette à planche unique agrandissait la sienne ×2 quand la
   paire de SPUA3 se partageait la même largeur. À hauteur commune, la largeur
   suit le rapport de chaque planche et les os se comparent à la même échelle
   ce que le lecteur fait de ces images.

   22rem : la paire la plus large (SPUA3, 309 px avec l'écart) tient dans une
   colonne de la grille, et les planches restent proches de leur taille native,
   sans agrandissement qui les brouillerait. */
.sk-stade-planches { display: flex; gap: 0.35rem; justify-content: center; }
.sk-stade-planches img { height: 22rem; width: auto; flex: 0 1 auto;
                         min-width: 0; object-fit: contain; }
/* Filet de sécurité : sous une colonne trop étroite pour la paire, les
   planches rétrécissent au lieu de déborder la vignette. */
.sk-stade img { max-width: 100%; }
.sk-stade-numero { display: block; font-size: 0.8125rem; font-weight: 600;
                   color: var(--color-gray-600); margin: var(--space-1) 0 0.2rem; }
.sk-stade-description { display: block; font-size: 0.875rem; color: var(--color-gray-900); }

/* ---------- Outil : résultat (distribution, puis recommandation de l'auteur) ---------- */
.sk-resultat { border: 1px solid var(--color-border); border-radius: var(--radius-md);
               padding: var(--space-3); margin-bottom: var(--space-4); }

.sk-distribution { list-style: none; margin: var(--space-1) 0 var(--space-3); padding: 0; }
.sk-distribution li { display: grid; grid-template-columns: 5rem 1fr 3.5rem;
                      gap: var(--space-1); align-items: center; margin-bottom: 0.35rem; }
.sk-distribution-classe { font-size: 0.8125rem; font-weight: 500; }
.sk-distribution-barre { background: var(--color-bone); height: 0.9rem;
                         border-radius: var(--radius-sm); overflow: hidden; }
.sk-distribution-barre span { display: block; height: 100%; background: var(--color-navy); }
.sk-distribution-valeur { font-size: 0.8125rem; text-align: right; }

.sk-cotation strong { font-family: var(--font-heading); font-size: 1.35rem;
                      color: var(--color-navy); }
.sk-cotation-detail { color: var(--color-gray-600); margin-left: var(--space-1); font-size: 0.875rem; }

.sk-recommandation { border-top: 1px solid var(--color-border);
                     padding-top: var(--space-2); margin-top: var(--space-2); }
.sk-attribution { color: var(--color-gray-600); font-size: 0.8125rem; }

/* Une référence bibliographique se reconnaît à sa FORME, sur toutes les pages
   du site et pas seulement là où on l'attend.
   .sk-attribution ne pouvait pas porter ce rôle : elle sert aussi à
   l'attribution d'une méthode, à la date d'un commentaire et à la mention de
   transmission des données. Quatre choses différentes sous un même petit gris
   lui donner un style de citation les aurait toutes déguisées en citations.
   Une classe qui NOMME la référence les sépare, et permettra de les traiter à
   part le jour où il le faudra.
   Le filet est en or CLAIR : c'est l'emploi que la charte lui réserve
   (bordures et filets), et le seul où ses 3,45:1 ne sont pas en cause, puisque
   aucun texte ne se lit dessus. L'italique porte la convention typographique ;
   le filet la rend visible en balayant la page, ce que l'italique seul ne fait
   pas. */
.sk-reference {
  display: block;
  font-style: italic;
  font-size: 0.875rem;
  color: var(--color-gray-600);
  border-left: 2px solid var(--color-gold-light);
  padding-left: var(--space-2);
  margin-top: var(--space-2);
}
/* Deux références consécutives forment une bibliographie, pas deux blocs
   séparés : elles se resserrent. */
.sk-reference + .sk-reference { margin-top: var(--space-1); }

/* Intertitre de carte : entre .sk-cotation strong (1.35rem) et .sk-attribution /
   .sk-distribution-valeur (0.8125rem) : un sous-titre, pas un titre de page. */
.sk-champ-titre { font-family: var(--font-heading); font-weight: 600; font-size: 1rem;
                  color: var(--color-navy); margin: 0 0 var(--space-1); }
/* .sk-champ porte l'espacement entre chapitres d'un résultat (mesures
   retenues, verdict, estimations, et chaque méthode à l'intérieur du
   troisième) : c'est cette même règle, réemployée plutôt qu'une classe
   nouvelle, qui sert la mise en page « plus soignée » demandée par Pascal
   le 2026-08-05, un titre « Estimations » collant jusque-là directement au
   bloc vert du verdict, faute d'un espacement entre deux blocs frères. */
.sk-champ { margin-top: var(--space-3); }
.sk-limites li { font-size: 0.875rem; color: var(--color-gray-600); margin-bottom: 0.3rem; }

/* Tableau de résultats tabulaires (une ligne par équation ou par mesure),
   posé le 2026-08-05. Un <table> nu n'a ni bordure ni rembourrage dans le
   reset de la charte (*, *::before, *::after ne touche pas aux cellules) ;
   sans cette règle, les colonnes se seraient lues collées les unes aux
   autres. Aucune couleur nouvelle : --color-border et --color-navy sont déjà
   celles de .sk-fiche et .sk-champ-titre. */
.sk-tableau { width: 100%; border-collapse: collapse; margin-top: var(--space-1); }
.sk-tableau th, .sk-tableau td {
  padding: 0.4rem var(--space-1);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}
.sk-tableau th { font-weight: 600; color: var(--color-navy); font-size: 0.8125rem; }
.sk-tableau td { color: var(--color-gray-900); font-size: 0.9375rem; }

.sk-commentaire { border-top: 1px solid var(--color-border);
                  margin-top: var(--space-3); padding-top: var(--space-2); }
.sk-commentaire p { font-size: 0.9375rem; }

/* Emporter le résultat. Deux formulaires distincts (chacun poste la cotation
   vers son propre export) mais un seul geste pour le lecteur : ils se posent
   côte à côte. La classe était appliquée dans l'outil sans être définie ici,
   et les deux boutons échappaient du même coup aux composants de la charte. */
.sk-telechargement { display: inline-block; margin: var(--space-2) var(--space-2) 0 0; }
/* Reprise à zéro, sur sa propre ligne SOUS les téléchargements. Les deux
   réglages évidents échouent chacun d'un côté : en inline-block, le bouton
   remonte sur la ligne des formulaires d'export, eux-mêmes inline-block ; en
   bloc simple, il s'étire sur toute la largeur de la carte et se lit comme un
   bandeau, quand les autres boutons du site s'ajustent à leur texte. flex avec
   width: fit-content donne les deux : la mise en ligne propre de .btn
   (inline-flex, que ce display remplace), et une largeur qui suit le libellé :
   « New estimate » et « Nouvelle estimation » n'ont pas la même longueur.
   Même écart que sous les planches (--space-5) : l'action de sortie se détache
   du document autant que l'action d'entrée se détachait du formulaire. */
.sk-recommencer {
  display: flex;
  width: fit-content;
  margin-top: var(--space-5);
}