/* ==========================================================================
   agence-rgaa.fr — feuille de styles
   --------------------------------------------------------------------------
   Direction : plateforme claire. Fond gris très clair, cartes blanches, bleu
   franc, surligné jaune sur les mots qui portent, angles arrondis, pied
   sombre. Registre d'outil en ligne plutôt que de plaquette institutionnelle.

   Contraintes tenues ici, et vérifiées par `npm run verif:contraste` :
   - tous les couples texte/fond atteignent au moins 4,5:1 (critère 3.2),
     le texte courant visant 7:1 ;
   - les composants d'interface et le focus atteignent 3:1 (critère 3.3) ;
   - aucune information n'est portée par la couleur seule (critère 3.1) ;
   - rien n'est masqué au zoom 200 % ni en dessous de 320 px (critère 10.11) ;
   - les espacements de texte restent modifiables (critère 10.12) : aucune
     hauteur fixe sur un conteneur de texte.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Police — Plus Jakarta Sans, variable, servie depuis notre propre domaine.
   Licence SIL Open Font ; copie dans /polices/jakarta-OFL.txt.
   Sous-ensemble latin : 27 Ko, une requête, même origine. Le site continue de
   n'effectuer aucune requête vers un domaine tiers.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Jakarta';
  src: url('/polices/jakarta-latin.woff2') format('woff2-variations');
  font-weight: 400 800;
  font-style: normal;
  /* swap : le texte s'affiche aussitôt dans la police de repli, puis bascule.
     Jamais de texte invisible en attente de téléchargement. */
  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;
}

/* -------------------------------------------------- jetons — thème clair */
:root {
  color-scheme: light dark;

  --ground: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #eaeef5;
  --ink: #0f1729;
  --ink-2: #515c6e;
  --line: #dde3ec;
  --line-fort: #6b7484;

  --accent: #1d4ed8;
  --accent-fonce: #1739a8;
  --accent-pale: #eaf0ff;

  /* Surligné : c'est un fond, jamais un porteur d'information seul.
     Sa couleur de texte est figée, identique dans les deux thèmes : en thème
     sombre, le texte clair par défaut tomberait à 1,14:1 sur ce jaune. */
  --surligne: #ffe27a;
  --surligne-texte: #0f1729;

  --alerte: #b3261e;
  --alerte-pale: #fdeeed;
  --succes: #136c3a;
  --succes-pale: #e9f5ee;
  --focus: #1d4ed8;
  --focus-doublure: #ffffff;

  /* Pied de page et bandeaux sombres — identiques dans les deux thèmes. */
  --encre: #0d1424;
  --encre-texte: #f2f5fa;
  --encre-texte-2: #aeb8c8;
  --encre-ligne: #26314a;
  --encre-accent: #9ec0ff;

  --police: 'Jakarta', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --pas: 0.5rem;
  --pas-2: 1rem;
  --pas-3: 1.5rem;
  --pas-4: 2.5rem;
  --pas-5: 4rem;

  --lg-texte: 68ch;
  --lg-page: 1180px;
  --rayon: 10px;
  --rayon-2: 16px;
  --ombre: 0 1px 2px rgba(15, 23, 41, 0.05), 0 1px 3px rgba(15, 23, 41, 0.04);
}

/* -------------------------------------------------- jetons — thème sombre */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='clair']) {
    --ground: #0d1424;
    --surface: #151d30;
    --surface-2: #1d2740;
    --ink: #eef2f8;
    --ink-2: #a9b4c6;
    --line: #26314a;
    --line-fort: #8793a8;
    --accent: #9ec0ff;
    --accent-fonce: #c2d8ff;
    --accent-pale: #18233c;
    --surligne: #ffe27a;
    --surligne-texte: #0f1729;
    --alerte: #f5a3a0;
    --alerte-pale: #2d1a1a;
    --succes: #79cf9f;
    --succes-pale: #122a1e;
    --focus: #9ec0ff;
    --focus-doublure: #0d1424;
  }
}

:root[data-theme='sombre'] {
  --ground: #0d1424;
  --surface: #151d30;
  --surface-2: #1d2740;
  --ink: #eef2f8;
  --ink-2: #a9b4c6;
  --line: #26314a;
  --line-fort: #8793a8;
  --accent: #9ec0ff;
  --accent-fonce: #c2d8ff;
  --accent-pale: #18233c;
  --surligne: #ffe27a;
  --surligne-texte: #0f1729;
  --alerte: #f5a3a0;
  --alerte-pale: #2d1a1a;
  --succes: #79cf9f;
  --succes-pale: #122a1e;
  --focus: #9ec0ff;
  --focus-doublure: #0d1424;
}

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--police);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

p,
li,
dd,
figcaption {
  max-width: var(--lg-texte);
}

h1,
h2,
h3,
h4 {
  margin: 0 0 0.5em;
  line-height: 1.18;
  letter-spacing: -0.022em;
  text-wrap: balance;
  font-weight: 800;
}
h1 {
  font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.2rem);
  line-height: 1.08;
}
h2 {
  font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem);
  margin-top: var(--pas-5);
}
h3 {
  font-size: 1.22rem;
  margin-top: var(--pas-4);
  font-weight: 700;
}
h4 {
  font-size: 1.05rem;
  margin-top: var(--pas-3);
  font-weight: 700;
}

p {
  margin: 0 0 var(--pas-2);
}

a {
  color: var(--accent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
a:hover {
  color: var(--accent-fonce);
  text-decoration-thickness: 2px;
}
/* Critère 10.6 : dans le texte, un lien reste identifiable sans la couleur. */
main a {
  text-decoration: underline;
}

strong {
  font-weight: 700;
}

abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

code {
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, monospace;
  font-size: 0.9em;
  background: var(--surface-2);
  padding: 0.12em 0.4em;
  border-radius: 6px;
}

img {
  max-width: 100%;
  height: auto;
}

/* Surligné jaune : décoratif. L'emphase est portée par <strong>, le fond ne
   fait que la souligner visuellement — jamais seul. */
.surligne {
  background: linear-gradient(transparent 58%, var(--surligne) 58%);
  color: var(--surligne-texte);
  padding: 0 0.1em;
}

/* -------------------------------------------------- focus (critère 10.7) */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--focus-doublure);
  border-radius: 4px;
}

/* -------------------------------------------------- lien d'évitement (12.7) */
.lien-evitement {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  z-index: 100;
  background: var(--surface);
  color: var(--accent);
  border: 2px solid var(--accent);
  padding: 0.7rem 1.1rem;
  border-radius: var(--rayon);
  font-weight: 700;
  text-decoration: underline;
  transform: translateY(-250%);
}
.lien-evitement:focus {
  transform: translateY(0);
}

/* -------------------------------------------------- mise en page */
.contenance {
  max-width: var(--lg-page);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
main {
  display: block;
}
main > .contenance {
  padding-block: var(--pas-4) var(--pas-5);
}
main > .bandeau-clair + .contenance {
  padding-top: 0;
}
.mesure {
  max-width: var(--lg-texte);
}

/* -------------------------------------------------- en-tête */
.site-entete {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.site-entete .contenance {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.9rem;
}
.marque {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
}
.marque .marque-suffixe {
  color: var(--accent);
}
.marque:hover {
  text-decoration: underline;
}

.nav-principale ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1.35rem;
  margin: 0;
  padding: 0;
}
.nav-principale a {
  display: inline-block;
  padding: 0.55rem 0;
  min-height: 44px;
  line-height: 1.7;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
}
.nav-principale a:hover {
  color: var(--accent-fonce);
  text-decoration: underline;
}
.nav-principale a[aria-current='page'] {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

/* -------------------------------------------------- fil d'Ariane */
.fil-ariane {
  padding-block: var(--pas-3) 0;
  font-size: 0.9rem;
}
.fil-ariane ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.5rem;
  margin: 0;
  padding: 0;
  color: var(--ink-2);
}
.fil-ariane li + li::before {
  content: '›';
  margin-right: 0.5rem;
  color: var(--line-fort);
}

/* -------------------------------------------------- bandeau de tête */
.bandeau-clair {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding-block: var(--pas-5);
}
.bandeau {
  padding-block: var(--pas-3) var(--pas-2);
}
.chapeau {
  font-size: clamp(1.08rem, 1rem + 0.45vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 54ch;
}
.remontee {
  margin-top: var(--pas-2);
  font-size: 0.92rem;
  color: var(--ink-2);
}

/* -------------------------------------------------- pastilles */
.pastilles {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 var(--pas-3);
  padding: 0;
}
.pastilles li {
  background: var(--accent-pale);
  color: var(--accent-fonce);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 600;
  max-width: none;
}

/* -------------------------------------------------- boutons */
.bouton {
  display: inline-block;
  font: inherit;
  font-weight: 700;
  font-size: 0.97rem;
  background: var(--accent);
  color: var(--surface);
  border: 2px solid var(--accent);
  border-radius: var(--rayon);
  padding: 0.75rem 1.5rem;
  min-height: 44px;
  cursor: pointer;
  text-decoration: none;
}
.bouton:hover {
  background: var(--accent-fonce);
  border-color: var(--accent-fonce);
  color: var(--surface);
}
.bouton.secondaire,
.bouton.fantome {
  background: transparent;
  color: var(--accent);
  border-color: var(--line-fort);
}
.bouton.secondaire:hover,
.bouton.fantome:hover {
  background: var(--accent-pale);
  color: var(--accent-fonce);
  border-color: var(--accent);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: var(--pas-3) 0 0;
  max-width: none;
}

/* -------------------------------------------------- chiffres clés */
.chiffres {
  list-style: none;
  margin: var(--pas-4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--pas-2);
}
.chiffres li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--rayon);
  padding: var(--pas-3);
  margin: 0;
  max-width: none;
  box-shadow: var(--ombre);
}
.chiffres li.majeur {
  border-color: var(--accent);
  border-width: 2px;
}
.chiffres b {
  display: block;
  font-size: clamp(1.9rem, 1.5rem + 1.3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
}
.chiffres span {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ink-2);
}

/* -------------------------------------------------- encadrés */
.encadre {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--rayon);
  padding: var(--pas-3);
  margin: var(--pas-4) 0;
  box-shadow: var(--ombre);
}
.encadre > :last-child {
  margin-bottom: 0;
}
.encadre.alerte {
  border-left-color: var(--alerte);
}
.encadre.succes {
  border-left-color: var(--succes);
}
.encadre-titre {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 0.45rem;
}

/* -------------------------------------------------- cartes */
.cartes {
  list-style: none;
  margin: var(--pas-3) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: var(--pas-2);
}
.cartes li {
  margin: 0;
  max-width: none;
}
.cartes a {
  display: block;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--rayon-2);
  padding: var(--pas-3);
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--ombre);
}
.cartes a:hover {
  border-color: var(--accent);
}
.cartes .titre-carte {
  display: block;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.cartes .resume-carte {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--ink-2);
}

/* -------------------------------------------------- listes de pages */
.descente {
  margin-top: var(--pas-5);
}
.descente > h2 {
  margin-top: 0;
}
.liste-pages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--pas);
}
.liste-pages li {
  margin: 0;
  max-width: none;
}
.liste-pages a {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--rayon);
  padding: 0.9rem 1.1rem;
  text-decoration: none;
  color: var(--accent);
  font-weight: 700;
}
.liste-pages a:hover {
  border-color: var(--accent);
  text-decoration: underline;
}
.liste-pages .resume {
  display: block;
  color: var(--ink-2);
  font-weight: 400;
  margin-top: 0.2rem;
  font-size: 0.94rem;
}

.a-venir {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.a-venir li {
  background: var(--surface-2);
  color: var(--ink-2);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: 0.88rem;
  max-width: none;
}

/* -------------------------------------------------- sœurs */
.soeurs {
  margin-top: var(--pas-4);
  border-top: 1px solid var(--line);
  padding-top: var(--pas-3);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
}
.soeurs a {
  font-weight: 700;
}
.soeurs .sens {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* -------------------------------------------------- tableaux (critère 5.x) */
.tableau-defilant {
  overflow-x: auto;
  margin: var(--pas-3) 0 var(--pas-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--rayon);
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.96rem;
}
caption {
  text-align: left;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 0.9rem;
}
th,
td {
  text-align: left;
  padding: 0.7rem 1.1rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
thead th {
  background: var(--surface-2);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}
tbody tr:last-child td,
tbody tr:last-child th {
  border-bottom: 0;
}
tbody th {
  font-weight: 600;
}

/* -------------------------------------------------- formulaire (11.x) */
.champ {
  margin-bottom: var(--pas-3);
  max-width: 34rem;
}
.champ label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.champ .aide {
  display: block;
  color: var(--ink-2);
  font-size: 0.92rem;
  margin-bottom: 0.35rem;
}
.champ input,
.champ textarea,
.champ select {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-fort);
  border-radius: var(--rayon);
  padding: 0.65rem 0.8rem;
  min-height: 44px;
}
.champ textarea {
  min-height: 9rem;
  resize: vertical;
}
.champ .obligatoire {
  color: var(--alerte);
  font-weight: 700;
}
fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 var(--pas-3);
}
legend {
  padding: 0;
}

/* -------------------------------------------------- pied de page */
.site-pied {
  background: var(--encre);
  color: var(--encre-texte-2);
  padding-block: var(--pas-4) var(--pas-4);
  margin-top: var(--pas-5);
}
.site-pied h2 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre-texte-2);
  margin: 0 0 var(--pas-2);
}
.pied-colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--pas-3) var(--pas-4);
}
.site-pied ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-pied li {
  margin-bottom: 0.3rem;
  max-width: none;
}
.site-pied a {
  display: inline-block;
  padding-block: 0.15rem;
  color: var(--encre-texte);
  text-decoration: none;
}
.site-pied a:hover {
  text-decoration: underline;
}
.site-pied p {
  color: var(--encre-texte-2);
}
.pied-mention {
  margin-top: var(--pas-3);
  padding-top: var(--pas-3);
  border-top: 1px solid var(--encre-ligne);
  font-size: 0.9rem;
}
.pied-mention a {
  color: var(--encre-accent);
  text-decoration: underline;
}

/* -------------------------------------------------- lexique */
.entree-lexique {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--rayon);
  padding: var(--pas-3);
  margin-bottom: var(--pas-2);
}
.entree-lexique dt {
  font-weight: 800;
  font-size: 1.08rem;
  letter-spacing: -0.015em;
  margin-bottom: 0.3rem;
}
.entree-lexique dd {
  margin-left: 0;
}
.entree-lexique dd > :last-child {
  margin-bottom: 0;
}
.index-lettres ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: var(--pas-3) 0 var(--pas-4);
  padding: 0;
}
.index-lettres li {
  max-width: none;
}
.index-lettres a {
  display: inline-block;
  min-width: 44px;
  min-height: 44px;
  padding: 0.6rem 0.5rem;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--rayon);
  text-decoration: none;
  font-weight: 700;
}
.index-lettres a:hover {
  border-color: var(--accent);
  background: var(--accent-pale);
}

/* -------------------------------------------------- tests d'un critère */
.tests > li {
  margin-bottom: var(--pas-2);
}
.tests ul {
  margin-top: 0.35rem;
}
.mono {
  font-family: ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;
  font-size: 0.9rem;
  color: var(--ink-2);
}

/* -------------------------------------------------- utilitaires */
/* Visible uniquement pour les technologies d'assistance. Jamais display:none,
   qui retirerait le contenu de la restitution vocale. */
.hors-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Piège à robots : retiré de l'affichage, conservé dans la restitution, avec
   une étiquette qui dit de le laisser vide. */
.piege {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* -------------------------------------------------- animations (13.x) */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* -------------------------------------------------- impression */
@media print {
  .site-entete nav,
  .lien-evitement,
  .soeurs {
    display: none;
  }
  main a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 0.9em;
    word-break: break-all;
  }
}

/* ==========================================================================
   Visuels — documents de démonstration
   --------------------------------------------------------------------------
   Construits en CSS, sans une seule image : le site n'en contient aucune, et
   la thématique 1 du référentiel reste donc non applicable. Ils sont
   décoratifs et retirés de la restitution (aria-hidden) : tout ce qu'ils
   montrent existe en texte ailleurs dans la page.

   Les chiffres qu'ils affichent sont calculés depuis les données d'audit,
   jamais saisis en dur : un visuel qui mentirait sur un site qui vend de
   l'audit serait le pire des défauts.
   ========================================================================== */

/* -------------------------------------------------- page de rapport */
.document {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow:
    0 1px 1px rgba(15, 23, 41, 0.06),
    0 18px 40px -22px rgba(15, 23, 41, 0.45);
  padding: clamp(1.3rem, 0.6rem + 1.8vw, 2.1rem);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ink);
}

.doc-entete {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.2rem 1rem;
  padding-bottom: 0.55rem;
  border-bottom: 2px solid var(--ink);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.doc-titre {
  margin: 0.9rem 0 0.15rem;
  font-size: clamp(1rem, 0.85rem + 0.5vw, 1.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  max-width: none;
}
.doc-sous-titre {
  margin: 0 0 0.9rem;
  font-size: 0.78rem;
  color: var(--ink-2);
  max-width: none;
}

.doc-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 0.55rem 1rem;
  margin: 0 0 0.9rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.doc-meta dt {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.doc-meta dd {
  margin: 0.1rem 0 0;
  font-weight: 600;
  font-size: 0.78rem;
  max-width: none;
}

.doc-verdict {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.9rem;
  margin: 0 0 0.9rem;
  padding: 0.7rem 0.85rem;
  background: var(--succes-pale);
  border-left: 3px solid var(--succes);
  max-width: none;
}
.doc-verdict b {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--succes);
}
.doc-verdict span {
  font-size: 0.76rem;
  color: var(--ink-2);
}

.document table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
}
.document caption {
  padding: 0 0 0.4rem;
  border: 0;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-align: left;
}
.document thead th {
  background: transparent;
  border-bottom: 1px solid var(--line-fort);
  padding: 0.3rem 0.4rem 0.3rem 0;
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  color: var(--ink-2);
  white-space: nowrap;
}
.document tbody th,
.document td {
  padding: 0.28rem 0.4rem 0.28rem 0;
  border-bottom: 1px solid var(--line);
  font-weight: 400;
}
.document tbody th {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 0;
}
.document .nombre {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.document tbody tr.hors td,
.document tbody tr.hors th {
  color: var(--ink-2);
}
.document tfoot th,
.document tfoot td {
  padding-top: 0.4rem;
  border-top: 2px solid var(--ink);
  border-bottom: 0;
  font-weight: 800;
}

.doc-pied {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.2rem 1rem;
  margin: 0.9rem 0 0;
  padding-top: 0.55rem;
  border-top: 1px solid var(--line);
  font-size: 0.66rem;
  color: var(--ink-2);
  max-width: none;
}

/* -------------------------------------------------- bandeau en deux colonnes */
.bandeau-clair .colonnes {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--pas-4);
  align-items: center;
}
@media (max-width: 62rem) {
  .bandeau-clair .colonnes {
    grid-template-columns: 1fr;
  }
}
.bandeau-clair .colonnes > div:first-child > :first-child {
  margin-top: 0;
}

/* -------------------------------------------------- visuel : chaîne de contrôle */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: var(--pas-4);
  align-items: start;
  margin-top: var(--pas-3);
}
@media (max-width: 62rem) {
  .duo {
    grid-template-columns: 1fr;
  }
}
.duo > div > :first-child {
  margin-top: 0;
}

.etapes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
}
.document .etapes {
  margin-top: 0.3rem;
}
.etapes li {
  display: grid;
  grid-template-columns: 1.4rem 1fr auto;
  gap: 0.6rem;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.86rem;
  max-width: none;
}
.etapes li:last-child {
  border-bottom: 0;
}
.etapes .coche {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--succes-pale);
  color: var(--succes);
  font-size: 0.7rem;
  font-weight: 800;
  display: grid;
  place-items: center;
}
.etapes .nb {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--ink-2);
  font-size: 0.8rem;
}

/* -------------------------------------------------- pile de documents */
/*
 * Trois feuilles superposées et décalées. Les deux du dessous sont vides :
 * seules leurs tranches se voient. Le décalage est absorbé par le rembourrage
 * du conteneur, de sorte qu'aucune feuille ne déborde la page — y compris à
 * 320 px, où le critère de reflow ne tolère aucun défilement horizontal.
 */
.pile {
  position: relative;
  padding: 0 14px 14px 0;
}
.pile .feuille {
  position: absolute;
  inset: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 10px 24px -20px rgba(15, 23, 41, 0.5);
}
.pile .feuille-2 {
  transform: translate(7px, 7px);
  z-index: 1;
}
.pile .feuille-3 {
  transform: translate(14px, 14px);
  z-index: 0;
  opacity: 0.75;
}
.pile .document {
  position: relative;
  z-index: 2;
}

/* -------------------------------------------------- résumé du rapport */
.doc-resume {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0 0 0.85rem;
  padding: 0;
  list-style: none;
}
.doc-resume li {
  margin: 0;
  max-width: none;
  padding: 0.5rem 0.6rem;
  border-radius: 6px;
  background: var(--surface-2);
}
.doc-resume b {
  display: block;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.doc-resume span {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.doc-resume .est-ok b {
  color: var(--succes);
}
.doc-resume .est-ko b {
  color: var(--alerte);
}

/* -------------------------------------------------- liste d'indicateurs */
.doc-indicateurs {
  list-style: none;
  margin: 0;
  padding: 0;
}
.doc-indicateurs li {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.33rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.72rem;
  max-width: none;
}
.doc-indicateurs .num {
  font-weight: 700;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.doc-indicateurs .lib {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-indicateurs .etat {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.16rem 0.45rem;
  border-radius: 999px;
  white-space: nowrap;
}
/* Le statut n'est pas porté par la seule couleur : le libellé le dit, et un
   signe le double. Critère 3.1, même sur un élément décoratif. */
.doc-indicateurs .etat.ok {
  background: var(--succes-pale);
  color: var(--succes);
}
.doc-indicateurs .etat.ko {
  background: var(--alerte-pale);
  color: var(--alerte);
}
.doc-indicateurs .etat.na {
  background: var(--surface-2);
  color: var(--ink-2);
}

.doc-exemple {
  background: var(--surligne);
  color: var(--surligne-texte);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.14rem 0.45rem;
  border-radius: 999px;
}

/* ==========================================================================
   Icônes et composants illustrés
   --------------------------------------------------------------------------
   Les icônes sont décoratives et toujours accompagnées d'un libellé texte :
   aucune information n'est portée par la forme seule (critère 3.1).
   ========================================================================== */
.icone {
  flex: none;
}

.pastille-icone {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent-pale);
  color: var(--accent-fonce);
  margin-bottom: 0.9rem;
}
.pastille-icone.vert {
  background: var(--succes-pale);
  color: var(--succes);
}
.pastille-icone.rouge {
  background: var(--alerte-pale);
  color: var(--alerte);
}
.pastille-icone.jaune {
  background: var(--surligne);
  color: var(--surligne-texte);
}

/* -------------------------------------------------- étapes numérotées */
.parcours {
  list-style: none;
  margin: var(--pas-3) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--pas-3);
}
.parcours > li {
  margin: 0;
  max-width: none;
  position: relative;
}
/* Le trait de liaison entre étapes, purement décoratif, disparaît dès que les
   étapes passent les unes sous les autres. */
@media (min-width: 62rem) {
  .parcours > li:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 22px;
    left: 56px;
    right: -1.5rem;
    height: 1px;
    background: var(--line);
  }
}
.parcours .rang {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 0.15rem;
}
.parcours h3 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 800;
}
.parcours p {
  margin: 0 0 0.5rem;
  font-size: 0.92rem;
  color: var(--ink-2);
}
.parcours ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
}
.parcours ul li {
  display: grid;
  grid-template-columns: 1rem 1fr;
  gap: 0.45rem;
  font-size: 0.88rem;
  color: var(--ink-2);
  max-width: none;
}
.parcours ul li::before {
  content: '✓';
  color: var(--succes);
  font-weight: 800;
}

/* -------------------------------------------------- cartes illustrées */
.cartes a > .pastille-icone {
  margin-bottom: 0.75rem;
}

/* -------------------------------------------------- bande de normes */
.normes {
  list-style: none;
  margin: var(--pas-4) 0 0;
  padding: var(--pas-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--rayon-2);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--pas-3);
  text-align: center;
}
.normes li {
  margin: 0;
  max-width: none;
}
.normes .pastille-icone {
  margin: 0 auto 0.6rem;
}
.normes b {
  display: block;
  font-size: 0.95rem;
  font-weight: 800;
}
/* Viser le span de description, et lui seul : un `.normes span` global
   écraserait le `display: grid` de la pastille d'icône, qui est aussi un
   span — et l'icône, n'étant plus centrée, se collerait en haut de son cadre. */
.normes b + span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.85rem;
  color: var(--ink-2);
}

/* -------------------------------------------------- action d'en-tête */
.entete-action {
  padding: 0.6rem 1.15rem;
  font-size: 0.92rem;
  min-height: 40px;
}
@media (max-width: 52rem) {
  .entete-action {
    order: 3;
  }
}
/* La rubrique courante et la page courante se signalent de la même façon :
   ce qui compte pour l'utilisateur est « je suis là-dedans ». */
.nav-principale a[aria-current] {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}