/* Feuille de style du rapport d'audit.

   Cible de lecture : un lecteur extérieur, recruteur compris, qui parcourt un
   document long sur un écran. Trois choix en découlent, et ils priment sur
   l'esthétique :
     1. corps en SERIF à 19 px. Le sans-serif fatigue en lecture continue ;
     2. une COULEUR PAR NIVEAU de titre, pour qu'on sache toujours à quelle
        profondeur on se trouve sans remonter ;
     3. une colonne de texte bornée à ~68 caractères, la mesure confortable.

   Le langage visuel reste celui des artefacts HTML de `docs/`. Toutes les
   couleurs vivent dans les tokens ci-dessous, elles se revoient là et nulle
   part ailleurs. */

/* La police est chargée par un <link> du gabarit, pas par un @import : un
   @import enchaîne deux requêtes bloquantes au lieu d'une. La pile de repli
   (Charter, Sitka, Georgia) est délibérément sérieuse : si Google Fonts est
   injoignable, la page reste dans le même registre. */

:root {
  --ground:      #F7F8FA;
  --surface:     #FFFFFF;
  --surface-alt: #EDF0F5;
  --ink:         #131A24;   /* encre franche : le gris pâle fatigue */
  --ink-soft:    #454F5D;
  --ink-faint:   #6B7585;
  --rule:        #D5DBE4;
  --accent:      #1D4E89;
  --accent-soft: #E3EBF4;
  --fail:        #A8332B;
  --fail-soft:   #F7E7E5;
  --hold:        #2E6B4F;
  --hold-soft:   #E3F0E9;
  --qual:        #8A6216;
  --qual-soft:   #F7EEDC;
  --code-bg:     #1B2532;
  --code-ink:    #DDE4EC;

  /* Un rôle de couleur par niveau de titre. Reprend la trouvaille de
     l'ancienne feuille Material : la teinte dit la profondeur. */
  --titre-doc: #0F151D;   /* titre du document   : neutre appuyé */
  --titre-sec: #1D4E89;   /* sections §0 à §7    : bleu profond  */
  --titre-sub: #8F3D12;   /* sous-sections 1.1   : brique        */
  --titre-con: #0D6E66;   /* constats            : sarcelle      */

  --serif: "Source Serif 4", Charter, "Bitstream Charter", "Sitka Text", Georgia, "Times New Roman", serif;
  --sans:  ui-sans-serif, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:  ui-monospace, "Cascadia Code", "JetBrains Mono", Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:      #10151C;
    --surface:     #161D26;
    --surface-alt: #1D2733;
    --ink:         #E8ECF1;
    --ink-soft:    #B2BCC8;
    --ink-faint:   #8A94A2;
    --rule:        #2A3542;
    --accent:      #8FB4DE;
    --accent-soft: #1C2A3A;
    --fail:        #E38A82;
    --fail-soft:   #2E1E1E;
    --hold:        #7CC79E;
    --hold-soft:   #16271F;
    --qual:        #DCB25A;
    --qual-soft:   #2A2317;
    --code-bg:     #0B1017;
    --code-ink:    #D2DAE4;

    --titre-doc: #F2F6FA;
    --titre-sec: #93B8EC;
    --titre-sub: #F0A87A;
    --titre-con: #48D6C0;
  }
}

:root[data-theme="dark"] {
  --ground:      #10151C;
  --surface:     #161D26;
  --surface-alt: #1D2733;
  --ink:         #E8ECF1;
  --ink-soft:    #B2BCC8;
  --ink-faint:   #8A94A2;
  --rule:        #2A3542;
  --accent:      #8FB4DE;
  --accent-soft: #1C2A3A;
  --fail:        #E38A82;
  --fail-soft:   #2E1E1E;
  --hold:        #7CC79E;
  --hold-soft:   #16271F;
  --qual:        #DCB25A;
  --qual-soft:   #2A2317;
  --code-bg:     #0B1017;
  --code-ink:    #D2DAE4;

  --titre-doc: #F2F6FA;
  --titre-sec: #93B8EC;
  --titre-sub: #F0A87A;
  --titre-con: #48D6C0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 2rem; }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.75;
  margin: 0;
  padding: 0 1.5rem 6rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { max-width: 82rem; margin: 0 auto; }

/* ---------- masthead ---------- */

header.masthead {
  padding: 4.5rem 0 2.25rem;
  border-bottom: 3px solid var(--titre-sec);
  margin-bottom: 3rem;
}
.eyebrow {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--titre-sec);
  font-weight: 600;
  margin: 0 0 1rem;
}
.eyebrow a.retour {
  color: var(--titre-sec);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.eyebrow a.retour:hover { border-bottom-color: var(--titre-sec); }

header.masthead h1 {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5.5vw, 3.6rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--titre-doc);
  text-wrap: balance;
  margin: 0 0 1.4rem;
  max-width: 46rem;
}
/* L'accroche vient juste sous le titre : c'est une phrase, pas un sous-titre.
   Elle est plus grosse et plus contrastée que le chapô qui la suit, pour que
   la hiérarchie soit lisible sans lire (titre > accroche > chapô). */
.accroche {
  font-family: var(--serif);
  font-size: 1.55rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--ink);
  max-width: 38rem;
  margin: 0 0 1.1rem;
  text-wrap: balance;
}

.standfirst {
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 40rem;
  margin: 0;
}

@media (max-width: 40rem) {
  .accroche { font-size: 1.28rem; }
}
.masthead-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  margin-top: 2.25rem;
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--ink-faint);
}
.masthead-foot b { color: var(--ink-soft); font-weight: 600; }

button.theme-toggle {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: .4em .8em;
  cursor: pointer;
  margin-left: auto;
}
button.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- mise en page ---------- */

.layout {
  display: grid;
  grid-template-columns: 19rem minmax(0, 1fr);
  gap: 4rem;
  align-items: start;
}

/* ---------- sommaire repliable ---------- */

nav.toc {
  position: sticky;
  top: 1.5rem;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  font-family: var(--sans);
  font-size: .92rem;
  line-height: 1.45;
  padding-right: .5rem;
}
nav.toc .toc-label {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
  margin: 0 0 1rem;
}
nav.toc ul { list-style: none; margin: 0; padding: 0; }
nav.toc li { margin: 0; }

/* Une section : le lien, et un bouton qui déplie ses sous-parties. */
.toc-row {
  display: flex;
  align-items: stretch;
  gap: .25rem;
  border-left: 2px solid var(--rule);
}
.toc-row > a {
  flex: 1;
  display: block;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  padding: .42rem .5rem .42rem .75rem;
}
.toc-row > a:hover { color: var(--titre-sec); }
.toc-row.is-active { border-left-color: var(--titre-sec); }
.toc-row.is-active > a { color: var(--titre-sec); }

/* Cible de clic franche : 2.5rem de large, pleine hauteur de la rangée, un
   fond au survol pour qu'on la voie comme un bouton. La version précédente
   était un caractère de 0.7rem en gris pâle, à peine visible. */
.toc-toggle {
  flex: 0 0 auto;
  width: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-alt);
  border: 0;
  border-radius: 3px;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0;
  margin: .2rem .2rem .2rem 0;
}
.toc-toggle svg {
  display: block;
  transition: transform .18s ease;
}
.toc-toggle:hover { background: var(--accent-soft); color: var(--titre-sec); }
.toc-toggle:focus-visible {
  outline: 2px solid var(--titre-sec);
  outline-offset: 1px;
}
.toc-toggle[aria-expanded="true"] { color: var(--titre-sec); }
.toc-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }

nav.toc .toc-children { margin: .15rem 0 .5rem; }
nav.toc .toc-children a {
  display: block;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: .88rem;
  padding: .3rem .5rem .3rem 1.9rem;
  border-left: 2px solid var(--rule);
}
nav.toc .toc-children a:hover { color: var(--titre-sub); border-left-color: var(--titre-sub); }
nav.toc .toc-children a.is-active {
  color: var(--titre-sub);
  border-left-color: var(--titre-sub);
  font-weight: 600;
}

/* ---------- corps du document ---------- */

main.doc { min-width: 0; }

/* Le titre du document est déjà porté par le masthead. */
main.doc > h1:first-child { display: none; }

main.doc h2 {
  font-family: var(--serif);
  font-size: 2.3rem;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -.012em;
  color: var(--titre-sec);
  text-wrap: balance;
  margin: 4rem 0 1.25rem;
  padding-top: 1.75rem;
  border-top: 3px solid var(--titre-sec);
}
main.doc h3 {
  font-family: var(--serif);
  font-size: 1.6rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--titre-sub);
  text-wrap: balance;
  margin: 3rem 0 .85rem;
  padding-left: .75rem;
  border-left: 4px solid var(--titre-sub);
}
main.doc h4 {
  font-family: var(--serif);
  font-size: 1.28rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--titre-con);
  text-wrap: balance;
  margin: 2.5rem 0 .7rem;
}
main.doc h5, main.doc h6 {
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 2rem 0 .5rem;
}

/* ~68 caractères, la mesure confortable en lecture longue. */
main.doc p { margin: 0 0 1.15rem; max-width: 40rem; }
main.doc ul, main.doc ol { margin: 0 0 1.15rem; padding-left: 1.4rem; max-width: 40rem; }
main.doc li { margin-bottom: .45rem; }
main.doc li > ul, main.doc li > ol { margin-top: .45rem; }

main.doc strong { font-weight: 700; color: var(--titre-doc); }
main.doc a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .15em; }

main.doc hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 3rem 0;
}

/* Ancre posée par `toc: permalink`, discrète jusqu'au survol du titre. */
.headerlink {
  color: var(--ink-faint);
  text-decoration: none;
  margin-left: .4em;
  opacity: 0;
  font-weight: 400;
}
h2:hover .headerlink, h3:hover .headerlink,
h4:hover .headerlink, h5:hover .headerlink { opacity: 1; }

/* ---------- code ---------- */

main.doc code {
  font-family: var(--mono);
  font-size: .82em;
  background: var(--surface-alt);
  padding: .14em .4em;
  border-radius: 3px;
}
main.doc pre {
  background: var(--code-bg);
  color: var(--code-ink);
  font-family: var(--mono);
  font-size: .8rem;
  line-height: 1.65;
  padding: 1.1rem 1.2rem;
  border-radius: 4px;
  margin: 0 0 1.6rem;
  overflow-x: auto;
  tab-size: 2;
}
main.doc pre code {
  background: transparent;
  padding: 0;
  font-size: inherit;
  color: inherit;
}
.highlight .c, .highlight .c1, .highlight .cm { color: #7E93AB; font-style: italic; }
.highlight .k, .highlight .kd, .highlight .kn { color: #9FC5EC; }
.highlight .s, .highlight .s1, .highlight .s2 { color: #A8D5A2; }
.highlight .nb, .highlight .nf { color: #E0C285; }
.highlight .o, .highlight .p { color: #B8C4D2; }
.highlight .mi, .highlight .mf { color: #E0A98F; }

/* ---------- tableaux ---------- */

/* Sans-serif dans les tableaux : plus dense, et les chiffres s'alignent.
   Le serif sert la lecture continue, pas la lecture en grille. */
.table-scroll {
  overflow-x: auto;
  margin: 0 0 1.9rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--surface);
}
main.doc table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--sans);
  font-size: .92rem;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}
main.doc th, main.doc td {
  text-align: left;
  padding: .65rem .9rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
main.doc thead th {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
  white-space: nowrap;
  background: var(--surface-alt);
  border-bottom: 2px solid var(--rule);
}
main.doc tbody tr:last-child td { border-bottom: 0; }

/* En-tête de LIGNE (`<th scope="row">`) : même registre que l'en-tête de
   colonne, sans le fond, sinon la première colonne écrase le tableau. */
main.doc tbody th[scope="row"] {
  font-family: var(--sans);
  font-size: .95rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  font-weight: 700;
  background: transparent;
  white-space: nowrap;
}
.v-fail { color: var(--fail); font-weight: 650; }
.v-hold { color: var(--hold); font-weight: 650; }
main.doc td p { margin: 0; max-width: none; }
main.doc td code, main.doc th code { font-size: .88em; }

/* ---------- citations et encadrés ---------- */

main.doc blockquote {
  border-left: 4px solid var(--qual);
  background: var(--qual-soft);
  padding: 1rem 1.25rem;
  border-radius: 0 3px 3px 0;
  margin: 0 0 1.75rem;
  max-width: 44rem;
}
main.doc blockquote p { margin: 0 0 .6rem; max-width: none; }
main.doc blockquote p:last-child { margin-bottom: 0; }

main.doc .admonition, main.doc details {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  border-radius: 3px;
  padding: 1.15rem 1.3rem;
  margin: 0 0 1.75rem;
}
main.doc .admonition-title, main.doc summary {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 .6rem;
  cursor: pointer;
}
main.doc details[open] summary { margin-bottom: .8rem; }
main.doc .admonition > :last-child, main.doc details > :last-child { margin-bottom: 0; }

/* ---------- schémas mermaid ---------- */

/* ⚠️ Aucune règle ne masque la source ici, délibérément. Une feuille qui cache
   le texte en attendant le rendu transforme un échec de mermaid (pas de réseau,
   CDN bloqué, erreur de syntaxe) en six cadres VIDES, sans le moindre message.
   Si le rendu ne vient pas, on veut voir le code du schéma. */
main.doc pre.mermaid, main.doc .mermaid {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1.75rem;
  margin: 0 0 1.75rem;
  overflow-x: auto;
  text-align: center;
}
main.doc pre.mermaid code {
  font-family: var(--mono);
  font-size: .76rem;
  text-align: left;
}
main.doc .mermaid[data-processed] { text-align: center; }
main.doc .mermaid[data-processed] code { display: none; }

/* ================= page d'accueil ================= */

.accueil .wrap { max-width: 64rem; }

.accueil-corps { padding-bottom: 2rem; }

.accueil-corps .bloc { margin: 0 0 4.5rem; }

.accueil-corps h2 {
  font-family: var(--serif);
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--titre-sec);
  letter-spacing: -.012em;
  margin: 0 0 1.25rem;
  padding-top: 1.5rem;
  border-top: 3px solid var(--titre-sec);
}
.accueil-corps h3 {
  font-family: var(--serif);
  font-size: 1.24rem;
  line-height: 1.28;
  font-weight: 700;
  color: var(--titre-con);
  margin: 0 0 .6rem;
  text-wrap: balance;
}
.accueil-corps p { margin: 0 0 1.15rem; max-width: 40rem; }
.accueil-corps .note {
  font-size: .92rem;
  color: var(--ink-soft);
}

/* ---- bandeau de chiffres ---- */

.chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
  margin: 0 0 4rem;
}
.chiffre {
  background: var(--surface);
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.chiffre-n {
  font-family: var(--serif);
  font-size: 2.8rem;
  line-height: 1;
  font-weight: 700;
  color: var(--titre-sec);
  font-variant-numeric: tabular-nums;
}
.chiffre-l {
  font-family: var(--sans);
  font-size: .86rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

/* ---- verdict et leçon ---- */

.accueil-corps blockquote.verdict {
  border-left: 4px solid var(--titre-sec);
  background: var(--accent-soft);
  padding: 1.4rem 1.6rem;
  border-radius: 0 3px 3px 0;
  margin: 0 0 1.5rem;
  max-width: 44rem;
}
.accueil-corps blockquote.verdict p {
  font-size: 1.24rem;
  line-height: 1.5;
  font-weight: 600;
  margin: 0;
  max-width: none;
  color: var(--titre-doc);
}

.accueil-corps blockquote.lecon-cle {
  border-left: 4px solid var(--qual);
  background: var(--qual-soft);
  padding: 1.2rem 1.5rem;
  border-radius: 0 3px 3px 0;
  margin: 1.5rem 0 0;
  max-width: 44rem;
}
.accueil-corps blockquote.lecon-cle p {
  font-size: 1.12rem;
  line-height: 1.55;
  margin: 0;
  max-width: none;
}

ul.lecons {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  max-width: 42rem;
}
ul.lecons li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .7rem;
}
ul.lecons li::before {
  content: "\2192";           /* flèche : ce sont des cas, pas une énumération */
  position: absolute;
  left: 0;
  color: var(--titre-sub);
  font-weight: 700;
}

/* ---- cartes de risque ---- */

.risques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
  margin: 0 0 1.5rem;
}
.risque {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--fail);
  border-radius: 3px;
  padding: 1.35rem 1.4rem;
}
.risque-id {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fail);
  background: var(--fail-soft);
  display: inline-block;
  padding: .22em .55em;
  border-radius: 2px;
  margin: 0 0 .8rem;
}
.risque p:last-child { margin-bottom: 0; font-size: .96rem; }

/* ---- appel à lecture ---- */

.accueil-corps .appel { margin-bottom: 2.5rem; }

a.bouton {
  display: inline-block;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--surface);
  background: var(--titre-sec);
  border: 2px solid var(--titre-sec);
  border-radius: 3px;
  padding: .75em 1.5em;
}
/* `--surface` suit déjà le thème : clair sur bouton bleu en mode clair,
   sombre sur bouton bleu pâle en mode sombre. Aucune règle par thème à
   ajouter, et surtout aucune à borner de travers. */
a.bouton:hover { background: transparent; color: var(--titre-sec); }

@media (max-width: 40rem) {
  .chiffre-n { font-size: 2.2rem; }
  .accueil-corps h2 { font-size: 1.6rem; }
  .accueil-corps blockquote.verdict p { font-size: 1.1rem; }
}

/* ---------- pied ---------- */

footer.doc-foot {
  border-top: 1px solid var(--rule);
  margin-top: 4rem;
  padding-top: 1.5rem;
  color: var(--ink-faint);
  font-family: var(--sans);
  font-size: .85rem;
  line-height: 1.7;
}
footer.doc-foot a { color: var(--ink-soft); }

/* ---------- écrans étroits ---------- */

@media (max-width: 64rem) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  nav.toc {
    position: static;
    max-height: none;
    margin-bottom: 3rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--rule);
  }
}

@media (max-width: 40rem) {
  body { font-size: 18px; padding: 0 1.1rem 4rem; }
  header.masthead { padding-top: 2.5rem; }
  main.doc h2 { font-size: 1.75rem; }
  main.doc h3 { font-size: 1.35rem; }
  main.doc h4 { font-size: 1.15rem; }
}

@media print {
  nav.toc, button.theme-toggle { display: none; }
  .layout { grid-template-columns: 1fr; }
  body { font-size: 11pt; }
}