/* Plainpied — design system « signalétique » (docs/brand-book.md)
   Tokens, base, composants. Aucune dépendance externe. */

/* ——— Fontes (self-hosted, SIL OFL) ——— */
@font-face {
  font-family: 'Archivo';
  src: url('/static/fonts/archivo-variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ——— Tokens ——— */
:root {
  --papier: #FAF8F2;
  --encre: #1C1B17;
  --encre-claire: #5C594F;
  --jaune: #F5B81C;
  --outremer: #18437A;
  --vert: #1E6B3C;
  --rouge: #A8262B;
  --grege: #D9D4C7;
  --grege-30: #F1EEE5;
  --fonte: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace;
  --ombre: 4px 4px 0 var(--encre);
  --ombre-haute: 6px 6px 0 var(--encre);
  --transition: 150ms ease-out;
  --conteneur: 1120px;
}

/* ——— Base ——— */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--fonte);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 0.6em; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 900; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); font-weight: 800; }
h3 { font-size: 1.25rem; font-weight: 700; }
p { margin: 0 0 1em; }
a { color: var(--outremer); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 3px; }
code, .mono { font-family: var(--mono); font-size: 0.92em; }
img, svg { max-width: 100%; height: auto; }
::selection { background: var(--jaune); color: var(--encre); }

/* Focus visible — signature accessibilité */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--jaune);
  outline-offset: 2px;
  box-shadow: 0 0 0 1px var(--encre);
}

/* ——— Layout ——— */
.conteneur { max-width: var(--conteneur); margin-inline: auto; padding-inline: 24px; }
.section { padding-block: 64px; }
.section--serree { padding-block: 32px; }
.grille { display: grid; gap: 24px; }
@media (min-width: 760px) {
  .grille--2 { grid-template-columns: repeat(2, 1fr); }
  .grille--3 { grid-template-columns: repeat(3, 1fr); }
}

/* Skip-link */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--encre); color: var(--papier);
  padding: 12px 20px; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ——— Header / footer ——— */
.entete {
  border-bottom: 4px solid var(--jaune);
  background: var(--papier);
}
.entete__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-block: 14px; flex-wrap: wrap;
}
.entete__logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em;
  color: var(--encre); text-decoration: none;
}
.entete__nav { display: flex; gap: 4px 20px; align-items: center; flex-wrap: wrap; }
.entete__nav a { color: var(--encre); font-weight: 500; text-decoration: none; padding: 6px 2px; }
.entete__nav a:hover, .entete__nav a[aria-current="page"] {
  box-shadow: inset 0 -3px 0 var(--jaune);
}
/* Sous-navigation de l'espace client */
.sous-nav {
  background: var(--grege-30);
  border-bottom: 2px solid var(--encre);
}
.sous-nav__inner {
  display: flex; gap: 4px 20px; flex-wrap: wrap; align-items: center;
  padding-block: 10px;
}
.sous-nav a {
  color: var(--encre); text-decoration: none; font-weight: 600;
  padding: 6px 2px; font-size: 0.95rem;
}
.sous-nav a:hover { box-shadow: inset 0 -3px 0 var(--jaune); }
.sous-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--encre); }

.pied {
  background: var(--encre); color: var(--papier);
  margin-top: 64px; padding-block: 40px;
  border-top: 6px solid var(--jaune);
}
.pied a { color: var(--papier); }
.pied__grille { display: grid; gap: 24px; }
@media (min-width: 760px) { .pied__grille { grid-template-columns: 2fr 1fr 1fr; } }
.pied small { color: var(--grege); }

/* ——— Panneaux (cartes) ——— */
.panneau {
  background: var(--papier);
  border: 2px solid var(--encre);
  padding: 24px;
}
.panneau--ombre { box-shadow: var(--ombre); }
.panneau--jaune { background: var(--jaune); }
/* Sur fond jaune, l'encre claire (#5C594F) ne tient pas le ratio 4.5:1 → encre pleine. */
.panneau--jaune, .fond-jaune { --encre-claire: var(--encre); }
.fond-jaune { background: var(--jaune); }
.panneau--encre { background: var(--encre); color: var(--papier); }
.panneau--encre a { color: var(--papier); }
.panneau__sol { border-bottom: 6px solid var(--jaune); }

/* ——— Boutons ——— */
.btn {
  display: inline-block;
  font: inherit; font-weight: 700;
  padding: 12px 24px;
  border: 2px solid var(--encre);
  background: var(--papier); color: var(--encre);
  text-decoration: none; cursor: pointer;
  box-shadow: var(--ombre);
  transition: transform var(--transition), box-shadow var(--transition);
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: var(--ombre-haute); }
.btn:active { transform: translate(0, 0); box-shadow: 2px 2px 0 var(--encre); }
.btn--primaire { background: var(--jaune); }
.btn--encre { background: var(--encre); color: var(--papier); }
/* Bouton « fantôme » sur fond sombre (héros) : fond transparent, texte/bordure papier. */
.btn--fantome { background: transparent; color: var(--papier); border-color: var(--papier); box-shadow: 4px 4px 0 var(--papier); }
.btn--fantome:hover { box-shadow: 6px 6px 0 var(--papier); }
.btn--fantome:active { box-shadow: 2px 2px 0 var(--papier); }
.btn--danger { background: var(--rouge); color: var(--papier); }
.btn--petit { padding: 7px 14px; font-size: 0.92rem; box-shadow: 2px 2px 0 var(--encre); }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: var(--ombre);
}
/* État « chargement » : petit spinner + texte. L'opacité reste pleine pour
   bien montrer que l'action est en cours (≠ bouton désactivé inerte). */
.btn.is-loading { opacity: 1; cursor: progress; }
.btn.is-loading::before {
  content: ""; display: inline-block; width: 0.85em; height: 0.85em;
  margin-right: 0.5em; vertical-align: -0.1em;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  animation: pp-spin 0.6s linear infinite;
}
@keyframes pp-spin { to { transform: rotate(360deg); } }

/* ——— Formulaires ——— */
.champ { margin-bottom: 20px; }
.champ label { display: block; font-weight: 700; margin-bottom: 6px; }
.champ .aide { font-size: 0.88rem; color: var(--encre-claire); margin-top: 4px; }
.champ input[type="text"], .champ input[type="email"], .champ input[type="password"],
.champ input[type="url"], .champ select, .champ textarea {
  width: 100%; font: inherit;
  padding: 11px 14px;
  border: 2px solid var(--encre);
  background: #fff; color: var(--encre);
  border-radius: 0;
}
.champ input[aria-invalid="true"], .champ .invalide { border-color: var(--rouge); }
.champ__erreur { color: var(--rouge); font-weight: 600; font-size: 0.92rem; margin-top: 6px; }
.case { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px; }
.case input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--encre); margin-top: 2px; flex-shrink: 0; }

/* ——— Tableaux ——— */
.tableau { width: 100%; border-collapse: collapse; border: 2px solid var(--encre); }
.tableau th {
  background: var(--encre); color: var(--papier);
  text-align: left; padding: 10px 14px; font-weight: 700;
}
.tableau td { padding: 10px 14px; border-top: 1px solid var(--grege); vertical-align: top; }
.tableau tbody tr:nth-child(even) { background: var(--grege-30); }

/* ——— Score & sévérités ——— */
.score {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: 96px; height: 96px;
  border: 3px solid var(--encre);
  font-weight: 900; font-size: 2.2rem; line-height: 1;
  box-shadow: var(--ombre);
}
.score small { font-size: 0.7rem; font-weight: 600; margin-top: 4px; letter-spacing: 0.04em; }
.score--bon { background: var(--vert); color: var(--papier); }
.score--moyen { background: var(--jaune); color: var(--encre); }
.score--faible { background: var(--rouge); color: var(--papier); }
.score--na { background: var(--grege-30); color: var(--encre); }

.sev {
  display: inline-block; padding: 3px 10px;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em;
  border: 2px solid var(--encre);
}
.sev--critical { background: var(--rouge); color: var(--papier); }
.sev--serious { background: var(--jaune); color: var(--encre); }
.sev--moderate { background: var(--grege); color: var(--encre); }
.sev--minor { background: var(--papier); color: var(--encre); }
/* Verdicts conforme / non conforme (vérificateur de contraste) */
.sev--ok { background: var(--vert); color: var(--papier); }
.sev--ko { background: var(--rouge); color: var(--papier); }

/* ——— Divers ——— */
.filet-sol { border: none; border-top: 6px solid var(--jaune); margin: 0; }
.note { font-size: 0.92rem; color: var(--encre-claire); }
.badge {
  display: inline-block; background: var(--encre); color: var(--papier);
  font-size: 0.8rem; font-weight: 700; padding: 3px 10px; letter-spacing: 0.03em;
}
.chiffre-cle { font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1; }
.alerte {
  border: 2px solid var(--encre); border-left: 8px solid var(--rouge);
  padding: 14px 18px; margin-block: 16px; background: #fff;
}
.alerte--ok { border-left-color: var(--vert); }
.alerte--info { border-left-color: var(--outremer); }
.flash { margin-block: 16px; }
.kpi { border: 2px solid var(--encre); padding: 18px; background: #fff; }
.kpi .chiffre-cle { display: block; }
.kpi__libelle { font-weight: 600; color: var(--encre-claire); font-size: 0.92rem; }
.barre {
  height: 14px; background: var(--grege-30); border: 1px solid var(--encre);
  position: relative; overflow: hidden;
}
.barre > span { position: absolute; inset: 0 auto 0 0; background: var(--jaune); display: block; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ===== Blocs de code (référentiel) ===== */
.bloc-code {
  margin: 0;
  border: 2px solid var(--encre);
  box-shadow: var(--ombre);
  background: var(--encre);
}
.bloc-code figcaption {
  font-weight: 700; font-size: 0.85rem; letter-spacing: 0.02em;
  padding: 8px 14px; color: var(--papier);
}
.bloc-code--mauvais figcaption { background: var(--rouge); }
.bloc-code--bon figcaption { background: var(--vert); }
.bloc-code pre {
  margin: 0; padding: 16px 14px; overflow-x: auto;
  background: var(--encre); color: var(--papier);
}
.bloc-code pre:focus-visible { outline: 3px solid var(--jaune); outline-offset: -3px; }
.bloc-code code {
  font-family: var(--mono); font-size: 0.85rem; line-height: 1.6;
  color: var(--papier); white-space: pre; background: none;
}

/* Composants barometre */

/* Eyebrow avec pastille jaune (hero barometre) */
.barometre-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  text-transform: uppercase; letter-spacing: .1em;
  font-size: .78rem; font-weight: 700;
  color: var(--jaune);
}
.barometre-eyebrow::before {
  content: "";
  display: inline-block; width: 8px; height: 8px;
  background: var(--jaune); border-radius: 50%;
}

/* Carte stat chiffre choc (hero barometre) */
.stat-choc {
  border: 2px solid var(--encre);
  background: var(--papier);
  color: var(--encre); /* la carte etablit sa propre couleur de texte (sinon les labels heritent du clair du hero sombre, invisible sur fond papier) */
  box-shadow: var(--ombre);
  padding: 28px 24px;
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0; /* empêche le débordement hors de la grille (min-width:auto par défaut) */
  overflow: hidden;
}
.stat-choc__chiffre {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 900; line-height: 1; letter-spacing: -0.04em;
  word-break: break-word;
}
.stat-choc__label  { font-weight: 700; font-size: 1.05rem; line-height: 1.3; }
.stat-choc__sous-label { font-size: .88rem; color: var(--encre-claire); margin-top: 4px; }

/* Graphique SVG : conteneur scrollable et focusable */
.graphique-conteneur {
  border: 2px solid var(--encre);
  box-shadow: var(--ombre);
  background: var(--papier);
  padding: 32px 24px 24px;
  overflow-x: auto;
}
.graphique-conteneur:focus-visible {
  outline: 3px solid var(--jaune);
  outline-offset: 2px;
  box-shadow: 0 0 0 1px var(--encre);
}

/* Classement des defauts */
.defaut-item {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--grege);
}
.defaut-item:last-child { border-bottom: none; }
.defaut-rang { font-size: 1.6rem; font-weight: 900; letter-spacing: -0.03em; color: var(--encre-claire); width: 2rem; flex-shrink: 0; text-align: right; line-height: 1; }
.defaut-barre-wrap { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.defaut-nom { font-weight: 700; font-size: 1rem; }
.defaut-barre-fond { height: 10px; background: var(--grege-30); border: 1px solid var(--grege); position: relative; overflow: hidden; }
.defaut-barre-remplie { position: absolute; inset: 0 auto 0 0; background: var(--rouge); display: block; }
.defaut-pct { font-size: .82rem; font-weight: 700; color: var(--encre-claire); min-width: 3.5rem; text-align: right; flex-shrink: 0; }

/* FAQ accordeon (barometre et secteurs) */
.faq-item { border-bottom: 2px solid var(--encre); }
.faq-item:first-child { border-top: 2px solid var(--encre); }
.faq-question {
  width: 100%; background: none; border: none; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 1.05rem;
  text-align: left; padding: 16px 4px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  color: var(--encre);
}
.faq-question:focus-visible { outline: 3px solid var(--jaune); outline-offset: 2px; box-shadow: 0 0 0 1px var(--encre); }
.faq-question[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); }
.faq-chevron { flex-shrink: 0; transition: transform 200ms ease-out; }
@media (prefers-reduced-motion: reduce) { .faq-chevron { transition: none; } }
.faq-reponse { padding: 0 4px 16px; color: var(--encre-claire); line-height: 1.7; }
.faq-reponse[hidden] { display: none; }

/* Encart methode et disclaimer (bordure outremer gauche) */
.encart-methode {
  background: var(--grege-30);
  border: 2px solid var(--encre);
  border-left: 8px solid var(--outremer);
  padding: 18px 20px;
}

/* Grille de liens de maillage interne */
.maillage { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.maillage a {
  border: 2px solid var(--encre);
  padding: 6px 14px;
  font-size: .9rem; font-weight: 600;
  color: var(--encre); text-decoration: none;
  transition: background var(--transition);
}
.maillage a:hover { background: var(--jaune); }

/* Encart d'actualite datee (ex. : anniversaire EAA, edition barometre) */
/* Contraste : texte encre #1C1B17 sur fond jaune #F5B81C = 8.8:1 (AA+AAA). */
/* Contraste : texte encre #1C1B17 sur fond papier #FAF8F2 = 19.5:1. */
/* Contraste : lien outremer #18437A sur fond papier = 8.0:1. */
.encart-actu {
  border: 2px solid var(--encre);
  border-left: 8px solid var(--jaune);
  background: var(--papier);
  padding: 20px 24px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 20px;
  align-items: start;
}
.encart-actu__pastille {
  /* Etiquette jaune verticale : signal d'actualite, pas de texte = pas de contrainte de contraste texte */
  background: var(--jaune);
  border: 2px solid var(--encre);
  padding: 6px 10px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre);
  white-space: nowrap;
  align-self: start;
  line-height: 1.2;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.encart-actu__corps {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.encart-actu__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre);
}
.encart-actu__eyebrow time {
  color: var(--encre-claire);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.encart-actu__titre {
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.25;
  margin: 0;
  color: var(--encre);
}
.encart-actu__texte {
  font-size: 0.93rem;
  color: var(--encre-claire);
  line-height: 1.6;
  margin: 0;
}
/* Sur ecrans etroits : pastille horizontale en haut, corps en dessous */
@media (max-width: 500px) {
  .encart-actu {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .encart-actu__pastille {
    writing-mode: horizontal-tb;
    transform: none;
    align-self: auto;
    width: fit-content;
    margin-bottom: 12px;
  }
}

/* Impression et export PDF */
@media print {
  .entete, .pied, .skip-link, .btn, form, .no-print { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 0; }
  .panneau { box-shadow: none !important; break-inside: avoid; page-break-inside: avoid; }
  .conteneur { max-width: none; padding: 0; }
  a[href]::after { content: ""; } /* pas d'URL imprimée en double */
  @page { margin: 1.5cm; }
}