/* =============================================================
   CCA-F Revision — Design System
   Lisibilité d'abord. Pédagogie d'abord.
   ============================================================= */

:root {
  /* Couleurs : palette Anthropic-inspired, sobre */
  --primary:       #c8533a;
  --primary-soft:  #e07a5f;
  --primary-dark:  #9a3d2a;

  --ink:           #1f2328;
  --ink-soft:      #424950;
  --ink-mute:      #5f666e;
  --ink-faint:     #9aa0a6;

  --bg:            #fbfaf7;
  --bg-card:       #ffffff;
  --bg-soft:       #f3efe9;
  --bg-code:       #f5f2ed;

  --navy:          #2c3e50;
  --navy-soft:     #34495e;
  --border:        #e3ddd2;
  --border-soft:   #efebe2;

  /* Statut de maîtrise (badges de cartes + profil par domaine) */
  --status-ok:     #15803d;
  --status-weak:   #c0392b;

  /* Couleurs callouts (saturation réduite pour lisibilité) */
  --tip-bg:        #fff8e6;
  --tip-border:    #e8a317;
  --tip-ink:       #6b4a00;

  --concept-bg:    #ecf3fb;
  --concept-border:#3b82c4;
  --concept-ink:   #0c4a78;

  --anti-bg:       #fbeae8;
  --anti-border:   #c0392b;
  --anti-ink:      #7a1a12;

  --high-bg:       #f2ecfa;
  --high-border:   #7c5cbf;
  --high-ink:      #4a2f80;

  --tldr-bg:       #2c3e50;
  --tldr-ink:      #f4f1ec;
  --tldr-accent:   #f0b30a;

  /* Bandeau de titre : plus sombre que --primary/--primary-soft, dont l'extrémité
     claire ne portait pas de texte blanc en AA (2,95:1). */
  --header-from:   #a03e26;
  --header-to:     #bb5238;

  /* Polices et tailles */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, 'Consolas', 'Liberation Mono', monospace;

  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow:    0 2px 6px rgba(0,0,0,0.05);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.06);
}

@page {
  size: A4;
  margin: 1.6cm 1.5cm;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Compense la sticky navbar quand on saute à un anchor */
  scroll-padding-top: 70px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-sans);
  font-size: 11pt;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  max-width: 880px;
  margin: 0 auto;
  padding: 0 28px 80px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   NAVBAR — bandeau de navigation inter-documents
   Compact pills, single-line, sans scroll horizontal
   ============================================================ */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 250, 247, 0.96);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
  padding: 9px 16px;
  margin: 0 -28px 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  font-size: 9.2pt;
  align-items: center;
  justify-content: flex-start;
  row-gap: 6px;
}

.navbar a {
  color: var(--ink-soft);
  text-decoration: none;
  border: none;
  padding: 5px 10px;
  border-radius: 999px;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.3;
}

.navbar a:hover {
  background: var(--bg-soft);
  color: var(--primary);
}

.navbar a.current {
  background: var(--primary);
  color: white;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(200, 83, 58, 0.25);
}

.navbar .home {
  font-weight: 700;
  color: var(--primary);
  margin-right: 4px;
  padding-left: 0;
  padding-right: 12px;
  border-radius: 0;
  letter-spacing: -0.01em;
  border-right: 1px solid var(--border);
}

.navbar .home:hover {
  background: transparent;
  color: var(--primary-dark);
}

/* Écrans étroits : la navbar scrolle horizontalement (libellés courts D0…D5)
   plutôt que d'empiler — une barre sticky multi-lignes mangerait la hauteur d'écran.
   Cibles tactiles ≥40px, scrollbar masquée, toggle de thème gardé accessible. */
@media (max-width: 720px) {
  .navbar {
    font-size: 9pt;
    margin: 0 -16px 20px;
    padding: 4px 16px;
    gap: 2px 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .navbar::-webkit-scrollbar { display: none; }
  .navbar a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 11px;
  }
  .navbar .home { padding-right: 10px; margin-right: 2px; }
  .theme-toggle { flex: 0 0 auto; min-height: 36px; padding: 6px 12px; }
}

@media print {
  .navbar { display: none; }
  body { padding: 0; }
}

/* Sélecteur de langue : hors du bloc <nav class="navbar"> (voir la note de
   tools/lib/page.mjs), donc sans style avant cette règle — il tombait en
   flux normal, un lien nu sous la navbar collante. */
.lang-switch {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.lang-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 9pt;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 0.15s, color 0.15s;
}

.lang-switch a:hover,
.lang-switch a:focus-visible {
  background: var(--primary);
  color: white;
}

@media print {
  .lang-switch { display: none; }
}

/* ============================================================
   HEADER — bandeau de titre du document
   ============================================================ */
.header-bar {
  background: linear-gradient(135deg, var(--header-from) 0%, var(--header-to) 100%);
  color: white;
  padding: 28px 32px;
  border-radius: var(--radius-lg);
  margin-bottom: 28px;
  box-shadow: var(--shadow-lg);
}

.header-bar h1 {
  color: white;
  border: none;
  margin: 0;
  font-size: 20pt;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

/* Les sélecteurs d'élément (strong, em, code…) battent l'héritage : sans cette
   règle, le texte du bandeau retombe sur --ink et --ink-soft, illisibles sur le
   dégradé (2,07:1 pour <em>). */
.header-bar :is(p, span, strong, em, b, i, code, a, li, small) {
  color: inherit;
}

.header-bar p {
  margin: 10px 0 0 0;
  font-size: 10.5pt;
  line-height: 1.5;
}

.header-bar code {
  background: rgba(0,0,0,0.22);
  border-color: rgba(255,255,255,0.30);
}

.header-bar a {
  border-bottom: 1px solid rgba(255,255,255,0.6);
}

/* Voile noir plutôt que blanc : un voile blanc éclaircit le dégradé et fait
   tomber le texte blanc de la pastille sous AA. */
.header-bar .weight {
  display: inline-block;
  background: rgba(0,0,0,0.18);
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 9.5pt;
  font-weight: 600;
  margin-top: 12px;
  letter-spacing: 0.01em;
}

/* ============================================================
   TYPOGRAPHIE
   ============================================================ */
h1 {
  color: var(--primary);
  border-bottom: 3px solid var(--primary);
  padding-bottom: 10px;
  font-size: 24pt;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-top: 0;
}

h2 {
  color: var(--navy);
  border-bottom: 2px solid var(--border);
  padding-bottom: 8px;
  margin-top: 44px;
  margin-bottom: 18px;
  font-size: 17pt;
  font-weight: 700;
  page-break-after: avoid;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

h3 {
  color: var(--primary-dark);
  margin-top: 28px;
  margin-bottom: 12px;
  font-size: 13pt;
  font-weight: 600;
  page-break-after: avoid;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

h4 {
  color: var(--ink-soft);
  margin-top: 18px;
  margin-bottom: 8px;
  font-size: 11.5pt;
  font-weight: 600;
}

p {
  margin: 10px 0;
  color: var(--ink);
}

strong {
  font-weight: 600;
  color: var(--ink);
}

em { color: var(--ink-soft); }

/* ============================================================
   BANDEAU DE SECTION (navy)
   ============================================================ */
.section-header {
  background: linear-gradient(90deg, var(--navy) 0%, var(--navy-soft) 100%);
  color: white;
  padding: 11px 20px;
  border-radius: var(--radius);
  margin-top: 36px;
  margin-bottom: 4px;
  page-break-after: avoid;
  page-break-inside: avoid;
  box-shadow: var(--shadow);
  scroll-margin-top: 70px;
}

.section-header h2 {
  color: white;
  border: none;
  margin: 0;
  padding: 0;
  font-size: 13pt;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.section-header h2 code {
  background: rgba(255,255,255,0.20);
  color: #fff8e6;
  padding: 1px 8px;
  border-radius: 4px;
  font-size: 0.9em;
}

/* Saut d'ancre : compense la sticky navbar pour tous les anchors */
[id] { scroll-margin-top: 70px; }

/* Sous-section visuelle */
.subsection {
  border-left: 4px solid var(--primary);
  background: linear-gradient(90deg, var(--bg-soft) 0%, transparent 100%);
  padding: 14px 18px;
  margin: 32px 0 0 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  page-break-after: avoid;
  page-break-inside: avoid;
}

.subsection h3 {
  color: var(--primary-dark);
  margin: 0;
  padding: 0;
  border: none;
  font-size: 13.5pt;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ============================================================
   CODE
   ============================================================ */
code {
  background: var(--bg-code);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  font-size: 0.9em;
  font-family: var(--font-mono);
  color: var(--primary-dark);
  border: 1px solid var(--border-soft);
  white-space: nowrap;
}

pre {
  background: var(--bg-code);
  padding: 16px 20px;
  border-radius: var(--radius);
  font-size: 9.5pt;
  overflow-x: auto;
  border-left: 3px solid var(--primary);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-left-color: var(--primary);
  margin: 16px 0;
  font-family: var(--font-mono);
  line-height: 1.55;
  color: var(--ink);
  page-break-inside: avoid;
}

pre code {
  background: transparent;
  padding: 0;
  color: var(--ink);
  white-space: pre;
  border: none;
  font-size: inherit;
}

/* ============================================================
   TABLES
   ============================================================ */
table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  margin: 18px 0;
  font-size: 10pt;
  background: var(--bg-card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}

th, td {
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
  line-height: 1.5;
}

th {
  background: var(--bg-soft);
  font-weight: 600;
  color: var(--navy);
  font-size: 9.8pt;
  letter-spacing: -0.005em;
  border-bottom: 2px solid var(--border);
}

tr:last-child td { border-bottom: none; }

tbody tr:hover { background: rgba(243, 239, 233, 0.4); }

td code, th code { font-size: 9pt; }

/* ============================================================
   CALLOUTS
   ============================================================ */
.exam-tip,
.key-concept,
.anti-pattern,
.high-priority {
  padding: 14px 20px;
  margin: 18px 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 10.5pt;
  line-height: 1.6;
  page-break-inside: avoid;
}

.exam-tip {
  background: var(--tip-bg);
  border-left: 4px solid var(--tip-border);
}
.exam-tip strong { color: var(--tip-ink); }

.key-concept {
  background: var(--concept-bg);
  border-left: 4px solid var(--concept-border);
}
.key-concept strong { color: var(--concept-ink); }

.anti-pattern {
  background: var(--anti-bg);
  border-left: 4px solid var(--anti-border);
}
.anti-pattern strong { color: var(--anti-ink); }

.high-priority {
  background: var(--high-bg);
  border-left: 4px solid var(--high-border);
}
.high-priority strong { color: var(--high-ink); }

/* Libellé de type : le code couleur seul ne dit pas la nature de l'encadré
   (WCAG 1.4.1) et n'existe pas à l'impression noir et blanc. Le texte est lu
   par les lecteurs d'écran en tête de l'encadré, d'où la casse normale et
   l'interlettrage modéré — des capitales ou 0,14em font épeler certains
   moteurs de synthèse. */
.exam-tip::before,
.key-concept::before,
.anti-pattern::before,
.high-priority::before {
  display: block;
  font-size: 9pt;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.exam-tip::before      { color: var(--tip-ink); }
.key-concept::before   { color: var(--concept-ink); }
.anti-pattern::before  { color: var(--anti-ink); }
.high-priority::before { color: var(--high-ink); }

html[lang="fr"] .exam-tip::before      { content: "Astuce d'examen"; }
html[lang="fr"] .key-concept::before   { content: "Concept clé"; }
html[lang="fr"] .anti-pattern::before  { content: "Anti-pattern"; }
html[lang="fr"] .high-priority::before { content: "Priorité haute"; }

html[lang="en"] .exam-tip::before      { content: "Exam tip"; }
html[lang="en"] .key-concept::before   { content: "Key concept"; }
html[lang="en"] .anti-pattern::before  { content: "Anti-pattern"; }
html[lang="en"] .high-priority::before { content: "High priority"; }

/* Le premier <strong> en début de callout est mis en valeur */
.exam-tip > strong:first-child,
.key-concept > strong:first-child,
.anti-pattern > strong:first-child,
.high-priority > strong:first-child {
  font-weight: 700;
}

.exam-tip p:first-child,
.key-concept p:first-child,
.anti-pattern p:first-child,
.high-priority p:first-child { margin-top: 0; }

.exam-tip p:last-child,
.key-concept p:last-child,
.anti-pattern p:last-child,
.high-priority p:last-child { margin-bottom: 0; }

.exam-tip pre,
.key-concept pre,
.anti-pattern pre {
  margin: 12px 0 4px 0;
  background: rgba(255,255,255,0.6);
}

/* Encadré « L'essentiel » : bandeau sombre inversé avec label */
.guide-link {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 18px 0;
  font-size: 10.5pt;
}
.guide-link > a:first-child { color: var(--primary-dark); }

.tldr {
  background: var(--tldr-bg);
  color: var(--tldr-ink);
  border-left: 4px solid var(--tldr-accent);
  border-radius: var(--radius);
  padding: 20px 24px;
  font-size: 10.5pt;
  line-height: 1.6;
  margin: 22px 0;
  page-break-inside: avoid;
  box-shadow: var(--shadow);
}
.tldr::before {
  display: block;
  font-size: 9pt;
  font-weight: 700;
  color: var(--tldr-accent);
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
html[lang="fr"] .tldr::before { content: "L'essentiel"; }
html[lang="en"] .tldr::before { content: "In short"; }

.tldr strong { color: var(--tldr-accent); font-weight: 700; }
.tldr ul, .tldr ol { color: var(--tldr-ink); }
.tldr code {
  background: rgba(255,255,255,0.10);
  color: var(--tldr-accent);
  border-color: rgba(255,255,255,0.15);
}
.tldr p:first-child { margin-top: 0; }
.tldr p:last-child { margin-bottom: 0; }

/* ============================================================
   TABLE DES MATIÈRES
   ============================================================ */
.toc {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 22px 28px;
  border-radius: var(--radius);
  margin-bottom: 36px;
  font-size: 10pt;
  box-shadow: var(--shadow-sm);
}

.toc > strong {
  display: block;
  font-size: 11.5pt;
  color: var(--navy);
  margin-bottom: 12px;
  letter-spacing: -0.015em;
  font-weight: 700;
}

.toc ol {
  margin: 0;
  padding-left: 22px;
}

.toc ol ol {
  margin: 6px 0 6px 0;
  padding-left: 18px;
}
.toc ol ol li { font-size: 9.5pt; }

.toc ul {
  margin: 6px 0 6px 0;
  padding-left: 18px;
  list-style: none;
}
.toc ul li {
  font-size: 9.5pt;
  margin: 2px 0;
  position: relative;
  padding-left: 14px;
}
.toc ul li::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 600;
}

.toc a {
  color: var(--ink);
  text-decoration: none;
  border: none;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  display: inline-block;
  transition: color 0.1s, background 0.1s;
}

.toc a:hover {
  color: var(--primary);
  background: var(--bg-soft);
}

.toc li { margin: 4px 0; }
.toc li::marker { color: var(--primary-dark); font-weight: 700; }

/* ============================================================
   QUIZ — pattern <details>/<summary> + post-traitement JS
   ============================================================ */
details {
  margin: 16px 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  page-break-inside: avoid;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s, border-color 0.15s;
}

details:hover { box-shadow: var(--shadow); }

details[open] {
  border-color: var(--concept-border);
}

details > summary {
  cursor: pointer;
  padding: 16px 50px 16px 22px;
  font-weight: 600;
  color: var(--navy);
  background: var(--bg-soft);
  list-style: none;
  position: relative;
  font-size: 10.5pt;
  line-height: 1.55;
  user-select: none;
  transition: background 0.12s;
}

details > summary::-webkit-details-marker,
details > summary::marker { display: none; }

details > summary::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.25s;
}

details[open] > summary {
  background: var(--concept-bg);
  color: var(--concept-ink);
  border-bottom: 1px solid var(--concept-border);
}
details[open] > summary::after {
  border-color: var(--concept-ink);
  transform: translateY(-30%) rotate(-135deg);
}

details > summary:hover {
  background: var(--border-soft);
}

/* Numéro de question stylé "Q1" en pastille */
.q-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: white;
  font-weight: 700;
  font-size: 9pt;
  padding: 2px 9px;
  border-radius: 999px;
  margin-right: 10px;
  letter-spacing: 0.02em;
  line-height: 1.4;
  vertical-align: 1px;
}

details[open] > summary .q-tag {
  background: var(--concept-ink);
}

/* Corps du quiz */
details > div,
details > p {
  padding: 20px 24px;
  background: var(--bg-card);
  margin: 0;
  font-size: 10pt;
  line-height: 1.65;
  color: var(--ink);
}

details > p { padding: 18px 24px; }

details > div p { margin: 10px 0; }
details > div p:first-child { margin-top: 0; }
details > div p:last-child { margin-bottom: 0; }

/* Liste de choix QCM stylée comme cartes cliquables visuelles */
.choices {
  list-style: none;
  padding: 0;
  margin: 4px 0 18px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.choices li {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 12px 16px 12px 50px;
  border-radius: var(--radius-sm);
  position: relative;
  margin: 0;
  line-height: 1.55;
  font-size: 10pt;
  color: var(--ink);
  transition: background 0.15s, border-color 0.15s;
}

.choices li:hover {
  background: var(--bg-soft);
  border-color: var(--primary-soft);
}

.choices li::before {
  content: attr(data-letter);
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  font-weight: 700;
  font-size: 10pt;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
  line-height: 1;
}

/* Choix cliquable */
.choices li {
  cursor: pointer;
  user-select: none;
}

.choices li:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* État après réponse — désactiver le hover sur les non-sélectionnés */
.choices.is-answered li { cursor: default; }
.choices.is-answered li:not(.is-selected):not(.is-correct):hover {
  background: var(--bg-card);
  border-color: var(--border);
}

/* Choix correct (révélé après réponse) */
.choices li.is-correct,
.choices li.is-correct-pick,
.choices li.is-wrong {
  /* Réserver de l'espace à droite pour le ✓/✗ même en multi-ligne */
  padding-right: 44px;
}

.choices li.is-correct,
.choices li.is-correct-pick {
  border-color: #2f9d6a;
  background: #ecf9f1;
}
.choices li.is-correct::before,
.choices li.is-correct-pick::before {
  background: #2f9d6a;
}
.choices li.is-correct::after,
.choices li.is-correct-pick::after {
  content: "✓";
  position: absolute;
  right: 14px;
  top: 12px;
  color: #1e7d4d;
  font-weight: 700;
  font-size: 14pt;
  line-height: 1;
}

/* Choix sélectionné mais incorrect */
.choices li.is-wrong {
  border-color: var(--anti-border);
  background: var(--anti-bg);
}
.choices li.is-wrong::before {
  background: var(--anti-border);
}
.choices li.is-wrong::after {
  content: "✗";
  position: absolute;
  right: 14px;
  top: 12px;
  color: var(--anti-ink);
  font-weight: 700;
  font-size: 14pt;
  line-height: 1;
}

/* Multi-réponses : choix coché avant validation (toggle) */
.choices li.is-checked {
  border-color: var(--primary);
  background: var(--bg-soft);
  box-shadow: inset 0 0 0 1px var(--primary);
}
.choices li.is-checked::before {
  background: var(--primary-dark);
}

/* Bouton « Vérifier » (questions multi-réponses) */
.quiz-check {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: 10pt;
  font-weight: 600;
  color: #fff;
  background: var(--primary);
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  padding: 11px 22px;
  min-height: 44px;
  margin: 0 0 18px 0;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.quiz-check:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}
.quiz-check:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.quiz-check:disabled {
  background: var(--bg-soft);
  border-color: var(--border);
  color: var(--ink-mute);
  cursor: default;
}

/* Bouton "Voir la réponse" + nested details */
details details.answer-reveal {
  margin: 18px 0 0 0;
  border: 1px dashed var(--border);
  background: transparent;
  box-shadow: none;
  border-radius: var(--radius-sm);
  transition: opacity 0.18s, border-color 0.18s;
}

details details.answer-reveal:hover { box-shadow: none; }

/* État verrouillé : tant que l'utilisateur n'a pas cliqué un choix */
details details.answer-reveal.is-locked {
  opacity: 0.55;
  pointer-events: none;
  border-style: dotted;
}

details details.answer-reveal.is-locked > summary {
  cursor: not-allowed;
  background: var(--bg-soft);
  color: var(--ink-mute);
}

details details.answer-reveal .lock-hint {
  font-size: 9.5pt;
  font-weight: 500;
}

details details.answer-reveal > summary {
  background: var(--bg-soft);
  color: var(--primary-dark);
  font-weight: 700;
  font-size: 10pt;
  text-align: left;
  padding: 11px 44px 11px 18px;
  letter-spacing: -0.005em;
  border-bottom: none;
  border-radius: var(--radius-sm);
}

details details.answer-reveal > summary::after {
  border-color: var(--primary-dark);
}

details details.answer-reveal[open] {
  border-color: var(--concept-border);
  border-style: solid;
  background: var(--concept-bg);
}

details details.answer-reveal[open] > summary {
  background: var(--concept-bg);
  color: var(--concept-ink);
  border-bottom: 1px solid var(--concept-border);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

details details.answer-reveal > div,
details details.answer-reveal > p {
  padding: 16px 18px;
  background: var(--concept-bg);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-size: 9.8pt;
  line-height: 1.65;
  color: var(--ink);
}

details details.answer-reveal > div .answer-correct {
  font-weight: 400;
  color: var(--ink);
  font-size: 10pt;
  margin: 0 0 12px 0;
  padding: 12px 14px 12px 44px;
  background: rgba(47, 157, 106, 0.08);
  border-left: 3px solid #2f9d6a;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  position: relative;
  line-height: 1.65;
}
details details.answer-reveal > div .answer-correct strong:first-child {
  color: #1e7d4d;
  font-weight: 700;
  margin-right: 4px;
}
details details.answer-reveal > div .answer-correct::before {
  content: "✓";
  position: absolute;
  left: 12px;
  top: 14px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #2f9d6a;
  color: white;
  font-size: 11pt;
  text-align: center;
  line-height: 22px;
  font-weight: 700;
  flex-shrink: 0;
}

/* Quand answer-block et answer-correct se cumulent (D5), neutraliser le padding/margin
   d'answer-block (qui utilisent !important) */
details details.answer-reveal > div .answer-block.answer-correct {
  background: rgba(47, 157, 106, 0.08) !important;
  border-left: 3px solid #2f9d6a !important;
  padding: 12px 14px 12px 46px !important;
  margin: 0 0 12px 0 !important;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
}

/* Bloc réponse legacy (toujours visible — pour rétrocompat) */
.answer-block {
  background: var(--concept-bg);
  border-left: 3px solid var(--concept-border);
  padding: 14px 18px !important;
  margin: 16px 0 0 0 !important;
  border-radius: var(--radius-sm) !important;
  font-size: 9.8pt;
  line-height: 1.65;
  color: var(--ink);
}

.answer-block strong:first-child {
  color: var(--concept-ink);
  font-weight: 700;
}

/* Conteneur de groupe de quiz */
.quiz-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  margin: 24px 0;
  box-shadow: var(--shadow-sm);
}
.quiz-section > h3:first-child { margin-top: 0; }

/* Anciennes classes (Practice_Questions) */
.correct {
  color: #1e7d4d;
  font-weight: 700;
}

.incorrect {
  color: var(--anti-ink);
  font-weight: 600;
}

/* ============================================================
   LISTES
   ============================================================ */
ul, ol {
  padding-left: 26px;
  margin: 12px 0;
}

li {
  margin: 6px 0;
  line-height: 1.6;
}

ul li::marker { color: var(--primary); }
ol li::marker { color: var(--primary-dark); font-weight: 700; }

ul ul, ol ol, ul ol, ol ul {
  margin: 4px 0;
}

/* ============================================================
   LIENS — uniquement dans le contenu courant, pas TOC/navbar
   ============================================================ */
a {
  color: var(--primary-dark);
  text-decoration: none;
}

p a, li a, td a {
  border-bottom: 1px solid var(--primary-soft);
  transition: border-color 0.12s, color 0.12s;
}

p a:hover, li a:hover, td a:hover {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* ============================================================
   UTILITAIRES
   ============================================================ */
.page-break { page-break-before: always; }

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 44px 0;
}

footer,
.footer-credit {
  text-align: center;
  color: var(--ink-mute);
  font-size: 9pt;
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

/* ============================================================
   CARDS (index.html)
   ============================================================ */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  margin: 28px 0;
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary);
}

.card .card-tag {
  font-size: 8.5pt;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.card .card-title,
.card h3.card-title {
  font-size: 13pt;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
  letter-spacing: -0.015em;
  border: none;
  padding: 0;
}

.card .card-desc {
  font-size: 9.8pt;
  color: var(--ink-soft);
  line-height: 1.55;
  flex-grow: 1;
  margin: 0;
}

.card .card-meta {
  font-size: 8.8pt;
  color: var(--ink-mute);
  margin: 4px 0 0 0;
  font-weight: 500;
}

/* ============================================================
   PROGRESS WIDGET — score live en bas à gauche
   ============================================================ */
.cca-progress-widget {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 99;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--shadow-lg);
  font-size: 9.5pt;
  min-width: 180px;
  max-width: 240px;
}

.cca-progress-widget .prog-row,
.cca-progress-widget .prog-score {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.cca-progress-widget .prog-label {
  color: var(--ink-mute);
  font-size: 8.5pt;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.cca-progress-widget strong {
  color: var(--navy);
  font-weight: 700;
  font-size: 10pt;
}

.cca-progress-widget strong.good { color: #2f9d6a; }
.cca-progress-widget strong.warn { color: var(--primary); }

.cca-progress-widget .prog-bar {
  height: 5px;
  background: var(--bg-soft);
  border-radius: 999px;
  overflow: hidden;
  margin: 6px 0 8px 0;
}

.cca-progress-widget .prog-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-soft));
  transition: width 0.3s ease-out;
}

.cca-progress-widget .prog-reset {
  width: 100%;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink-mute);
  padding: 4px 0;
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: 8.5pt;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-top: 4px;
  transition: all 0.15s;
}

.cca-progress-widget .prog-reset:hover {
  border-color: var(--anti-border);
  color: var(--anti-ink);
  background: var(--anti-bg);
}

@media print {
  .cca-progress-widget { display: none; }
}

@media (max-width: 720px) {
  .cca-progress-widget {
    bottom: 8px;
    left: 8px;
    right: 8px;
    padding: 8px 12px;
    min-width: auto;
    max-width: none;
    font-size: 8.5pt;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  .cca-progress-widget .prog-row,
  .cca-progress-widget .prog-score {
    flex: 1 1 auto;
    margin: 0;
    min-width: 90px;
  }
  .cca-progress-widget .prog-bar {
    flex: 1 1 100%;
    margin: 0;
    height: 3px;
  }
  .cca-progress-widget .prog-reset {
    flex: 0 0 auto;
    width: auto;
    padding: 4px 10px;
    margin: 0;
  }
}

/* ============================================================
   BACK TO TOP — bouton flottant
   ============================================================ */
.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 18pt;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  z-index: 99;
  border: none;
  transition: transform 0.18s, background 0.18s, opacity 0.18s;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.back-to-top:hover {
  background: var(--primary-dark);
  transform: translateY(-3px);
  border: none;
}

@media print {
  .back-to-top { display: none; }
}

/* ============================================================
   FOOTER NAV — navigation prev/next entre domaines
   ============================================================ */
.doc-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.doc-nav a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s, transform 0.15s;
}

.doc-nav a:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}

.doc-nav .label {
  font-size: 8.8pt;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  font-weight: 600;
}

.doc-nav .title {
  font-size: 11pt;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.01em;
}

.doc-nav .next { text-align: right; }
.doc-nav .next .title::after { content: " →"; color: var(--primary); }
.doc-nav .prev .title::before { content: "← "; color: var(--primary); }

/* Quand il n'y a qu'un seul lien (prev OU next), l'étendre sur toute la largeur */
.doc-nav:has(> .empty:first-child) > a:not(.empty) { grid-column: 1 / -1; }
.doc-nav:has(> .empty:last-child) > a:not(.empty) { grid-column: 1 / -1; }
.doc-nav .empty { display: none; }

@media (max-width: 720px) {
  .doc-nav { grid-template-columns: 1fr; }
}

@media print {
  .doc-nav { display: none; }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  body {
    max-width: 100%;
    padding: 0;
    background: white;
    font-size: 10pt;
  }

  .header-bar { box-shadow: none; }
  details, .card, table, .tldr { box-shadow: none; }

  details, table, pre,
  .exam-tip, .key-concept, .anti-pattern, .high-priority, .tldr,
  .section-header, .subsection {
    page-break-inside: avoid;
  }

  details, details[open] { border-color: var(--border); }
  details[open] summary { background: var(--bg-soft); color: var(--navy); }

  a { color: var(--ink) !important; border-bottom: none !important; }
  .navbar { display: none; }
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 720px) {
  body { padding: 0 16px 50px; font-size: 11.5pt; }
  .header-bar { padding: 24px; }
  .header-bar h1 { font-size: 19pt; }
  h2 { font-size: 15pt; }
  h3 { font-size: 12.5pt; }
  pre { font-size: 9pt; padding: 14px; }
  .toc { padding: 18px 20px; }

  /* Un <code> inline long ne doit pas déborder et forcer un scroll horizontal
     de toute la page ; les blocs <pre> gardent leur propre scroll. */
  code { white-space: normal; overflow-wrap: anywhere; }
  pre code { white-space: pre; }

  /* Tables en mode "cartes" sur mobile : chaque <tr> devient une carte
     avec les noms de colonnes injectés via data-label */
  table {
    border: none;
    background: transparent;
    box-shadow: none;
    font-size: 9.8pt;
  }
  table thead,
  table tr.table-header-row { display: none; }
  table tbody tr {
    display: block;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
  }
  table tbody tr:nth-child(even) td { background: transparent; }
  table tbody tr:hover { background: var(--bg-card); }
  table tbody td {
    display: block;
    border: none;
    padding: 4px 0;
    text-align: left;
    line-height: 1.5;
  }
  table tbody td:not(:last-child) {
    border-bottom: 1px solid var(--border-soft);
    padding-bottom: 8px;
    margin-bottom: 8px;
  }
  /* Affiche le nom de colonne en label avant la valeur */
  table tbody td::before {
    content: attr(data-label);
    display: block;
    font-size: 8.5pt;
    font-weight: 700;
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 3px;
  }
  table tbody td:empty { display: none; }
}

/* =============================================================
   DARK MODE — bascule de tokens. Screen-only : l'impression PDF reste claire.
   Le thème est posé avant le rendu (script inline en <head>) → zéro flash.
   ============================================================= */
.theme-toggle {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 4px 11px;
  font-family: inherit;
  font-size: 9.2pt;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.theme-toggle:hover { background: var(--bg-soft); color: var(--primary); border-color: var(--primary); }
.theme-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.theme-toggle-icon { font-size: 11pt; line-height: 1; }

@media screen {
  [data-theme="dark"] {
    --primary:#e8775c; --primary-soft:#f0997f; --primary-dark:#f0997f;
    --ink:#e7e3da; --ink-soft:#b9b4a9; --ink-mute:#969da5; --ink-faint:#868d95;
    --bg:#15181c; --bg-card:#1d2126; --bg-soft:#24292f; --bg-code:#1a1e23;
    /* --navy sert AUSSI de couleur de texte (titres de cartes…) → clair en dark ;
       les fonds qui l'utilisaient sont réaffirmés en sombre ci-dessous */
    --navy:#cdd9e6; --navy-soft:#b3c2d4; --border:#353b42; --border-soft:#2a3036;
    --status-ok:#12813f; --status-weak:#c04030;
    --tip-bg:#2c2410; --tip-border:#e8a317; --tip-ink:#f0d58f;
    --concept-bg:#142434; --concept-border:#4a93d6; --concept-ink:#bcd9f5;
    --anti-bg:#2f1714; --anti-border:#d9614f; --anti-ink:#f3bdb4;
    --high-bg:#231c33; --high-border:#9b7fd4; --high-ink:#d6c6f2;
    --tldr-bg:#1b2735; --tldr-ink:#f4f1ec; --tldr-accent:#f5c542;
    --shadow-sm:0 1px 2px rgba(0,0,0,0.4);
    --shadow:0 2px 8px rgba(0,0,0,0.45);
    --shadow-lg:0 10px 30px rgba(0,0,0,0.55);
    color-scheme: dark;
  }
  /* couleurs en dur (non variabilisées) — overrides ciblés */
  [data-theme="dark"] .navbar { background: rgba(20,23,26,0.92); }
  [data-theme="dark"] tbody tr:hover { background: rgba(255,255,255,0.05); }
  /* fonds qui s'appuyaient sur --navy (devenu clair) : dégradés sombres explicites */
  [data-theme="dark"] .section-header { background: linear-gradient(90deg, #26384d 0%, #2f4257 100%); }
  /* header & lien actif : fond assez sombre pour garder le texte blanc lisible (AA) */
  [data-theme="dark"] { --header-from:#7d3322; --header-to:#9a3d2a; }
  [data-theme="dark"] .navbar a.current { background: #9a3d2a; color: #fff; }
  [data-theme="dark"] .choices li.is-correct,
  [data-theme="dark"] .choices li.is-correct-pick { border-color:#3fae7a; background:#15241c; }
  [data-theme="dark"] .choices li.is-correct::before,
  [data-theme="dark"] .choices li.is-correct-pick::before { background:#3fae7a; }
  [data-theme="dark"] .choices li.is-correct::after,
  [data-theme="dark"] .choices li.is-correct-pick::after { color:#5fd29a; }
  [data-theme="dark"] details details.answer-reveal > div .answer-correct { background: rgba(63,174,122,0.12); border-left-color:#3fae7a; }
  [data-theme="dark"] details details.answer-reveal > div .answer-correct strong:first-child { color:#5fd29a; }
  [data-theme="dark"] details details.answer-reveal > div .answer-correct::before { background:#3fae7a; }
  /* transition douce à la bascule */
  body, .navbar, .card, table, .header-bar, .section-header, details, pre, .exam-tip, .key-concept, .anti-pattern, .high-priority, .tldr {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }
}
@media (prefers-reduced-motion: reduce) {
  body, .navbar, .card, table, .header-bar, .section-header, details, pre, .exam-tip, .key-concept, .anti-pattern, .high-priority, .tldr { transition: none; }
}
@media print { .theme-toggle { display: none !important; } }

/* =============================================================
   SOMMAIRE FLOTTANT — rail sticky (desktop) + bouton (mobile) + scroll-spy
   ============================================================= */
.toc-rail { display: none; }
.toc-rail-title { font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 8pt; color: var(--ink-soft); margin: 0 0 8px 10px; }
.toc-rail a { display: block; padding: 3px 10px; margin: 1px 0; font-size: 9.5pt; line-height: 1.35; color: var(--ink-soft); text-decoration: none; border-left: 2px solid transparent; border-radius: 0 5px 5px 0; transition: color 0.12s, background 0.12s, border-color 0.12s; }
.toc-rail a:hover { color: var(--primary-dark); background: var(--bg-soft); }
/* actif : couleur + barre + fond (PAS de bold → évite le reflow/2 lignes) */
.toc-rail a.active { color: var(--primary-dark); border-left-color: var(--primary); background: var(--bg-soft); }

/* En-tête de sheet et backdrop : inertes hors du bottom-sheet mobile */
.toc-sheet-head, .toc-grip, .toc-close { display: none; }
.toc-backdrop {
  display: none; position: fixed; inset: 0; z-index: 58;
  background: rgba(0, 0, 0, 0.45); opacity: 0; transition: opacity 0.2s ease;
}
@keyframes toc-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

@media (min-width: 1320px) {
  .toc-rail {
    display: block; position: fixed; top: 82px;
    left: max(12px, calc(50vw - 440px - 228px));
    width: 204px; max-height: calc(100vh - 104px); overflow-y: auto;
    padding: 2px 4px 14px;
  }
  .toc { display: none; } /* l'inline est remplacé par le rail flottant */
}

.toc-fab { display: none; }
@media (max-width: 1319px) {
  .toc-fab {
    display: inline-flex; align-items: center; gap: 6px; position: fixed; z-index: 60;
    right: 16px; bottom: 76px; padding: 9px 14px; border: none; border-radius: 999px;
    background: #9a3d2a; color: #fff; font-family: inherit; font-size: 9.5pt; font-weight: 600;
    box-shadow: var(--shadow-lg); cursor: pointer;
  }
  .toc-fab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

  /* Backdrop modal du bottom-sheet */
  .toc-backdrop { display: block; pointer-events: none; }
  body.toc-open .toc-backdrop { opacity: 1; pointer-events: auto; }
  /* Le sheet a son propre bouton de fermeture → le FAB redondant s'efface */
  body.toc-open .toc-fab { display: none; }
  /* back-to-top et le widget de score ont un z-index > au sheet (60) : sans ça,
     ils flottent au-dessus du panneau sommaire ouvert et le chevauchent. */
  body.toc-open .back-to-top,
  body.toc-open .cca-progress-widget { display: none; }

  /* Bottom-sheet : panneau ancré en bas, pleine largeur, en-tête collant + liens tactiles */
  .toc-rail.is-open {
    display: flex; flex-direction: column;
    position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; top: auto;
    width: 100%; max-height: 78vh; overflow-y: auto;
    background: var(--bg-card); border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0; box-shadow: var(--shadow-lg);
    padding: 0 8px calc(16px + env(safe-area-inset-bottom, 0px));
    animation: toc-sheet-up 0.22s ease-out;
  }
  .toc-rail.is-open .toc-rail-title { display: none; }
  .toc-rail.is-open .toc-sheet-head {
    display: flex; align-items: center; gap: 8px;
    position: sticky; top: 0; z-index: 1;
    margin: 0 -8px 4px; padding: 14px 8px 10px 16px;
    background: var(--bg-card); border-bottom: 1px solid var(--border-soft);
  }
  .toc-rail.is-open .toc-grip {
    display: block; position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
    width: 36px; height: 4px; border-radius: 999px; background: var(--border);
  }
  .toc-rail.is-open .toc-sheet-title {
    font-weight: 700; font-size: 11pt; color: var(--navy); letter-spacing: -0.01em;
  }
  .toc-rail.is-open .toc-close {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto; width: 40px; height: 40px; padding: 0;
    border: none; background: transparent; color: var(--ink-mute);
    font-size: 13pt; line-height: 1; cursor: pointer; border-radius: var(--radius-sm);
  }
  .toc-rail.is-open .toc-close:hover { background: var(--bg-soft); color: var(--ink); }
  .toc-rail.is-open .toc-close:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
  .toc-rail.is-open a {
    display: flex; align-items: center; min-height: 44px;
    padding: 8px 14px; margin: 1px 0; font-size: 10.5pt;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .toc-rail.is-open { animation: none; }
  .toc-backdrop { transition: none; }
}
@media print { .toc-rail, .toc-fab { display: none !important; } }

/* =============================================================
   BADGES DE STATUT sur les cartes d'accueil (lus depuis le score des quiz)
   ============================================================= */
.card { position: relative; }
.card-status {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  font-size: 7.8pt; font-weight: 700; letter-spacing: 0.02em;
  padding: 3px 9px; border-radius: 999px; line-height: 1.25; white-space: nowrap;
}
.card-status.is-progress { background: var(--bg-soft); color: var(--ink-mute); border: 1px solid var(--border); }
.card-status.is-done { background: var(--status-ok); color: #fff; }
.card-status.is-fail { background: var(--status-weak); color: #fff; }

/* =============================================================
   PROFIL PAR DOMAINE (accueil) — ordre de révision = poids × faiblesse
   ============================================================= */
.profil-list {
  list-style: none; margin: 0 0 0.9rem; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.profil-row {
  display: grid; align-items: center; gap: 6px 12px;
  grid-template-columns: minmax(0, 1fr) auto minmax(90px, 150px) auto auto;
  padding: 9px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 7px;
}
.profil-row.is-ok     { border-left-color: var(--status-ok); }
.profil-row.is-weak   { border-left-color: var(--status-weak); }
.profil-row.is-partial{ border-left-color: var(--primary); }
.profil-row.is-todo   { border-left-color: var(--ink-faint); }

.profil-name { color: var(--navy); text-decoration: none; min-width: 0; }
.profil-name strong { color: var(--primary); margin-right: 6px; }
.profil-name:hover, .profil-name:focus-visible { text-decoration: underline; }
.profil-name:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; }

.profil-weight { font-size: 8pt; color: var(--ink-mute); font-variant-numeric: tabular-nums; }

.profil-bar {
  height: 7px; border-radius: 999px; overflow: hidden;
  background: var(--bg-soft); border: 1px solid var(--border-soft);
}
.profil-fill { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.profil-row.is-ok .profil-fill { background: var(--status-ok); }

.profil-score {
  font-size: 8.2pt; font-weight: 700; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.profil-tag {
  font-size: 7.6pt; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
  padding: 2px 8px; border-radius: 999px;
  background: var(--bg-soft); color: var(--ink-mute); border: 1px solid var(--border);
}
.profil-row.is-ok   .profil-tag { background: var(--status-ok); color: #fff; border-color: transparent; }
.profil-row.is-weak .profil-tag { background: var(--status-weak); color: #fff; border-color: transparent; }

.profil-hint, .profil-empty { font-size: 8.6pt; color: var(--ink-mute); margin: 0; }

@media (max-width: 640px) {
  .profil-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name weight" "bar bar" "score tag";
  }
  .profil-name  { grid-area: name; }
  .profil-weight{ grid-area: weight; }
  .profil-bar   { grid-area: bar; }
  .profil-score { grid-area: score; }
  .profil-tag   { grid-area: tag; justify-self: end; }
}

/* =============================================================
   BOUTONS FLOTTANTS — empilement mobile sans collision
   Le widget de score (.cca-progress-widget) est full-width en bas sur mobile :
   quand il est présent (body.has-progress, posé par quiz.js), on remonte
   back-to-top et toc-fab au-dessus de sa bande pour éviter le chevauchement.
   --progress-h est mesurée en JS (quiz.js) : le widget passe sur 3-4 lignes
   selon la largeur d'écran, une valeur fixe ne suit pas ce changement de hauteur.
   ============================================================= */
:root { --progress-h: 0px; }
/* Sous 1320 px le FAB du sommaire occupe le coin bas-droit, celui du bouton de
   retour en haut. Mesuré à 390 px : ils se recouvraient entièrement, même bande
   verticale, x 256-359 contre 315-359, si bien que le « ↑ » masquait la fin du
   libellé « Sommaire ». Le retour en haut s'empile donc au-dessus du FAB.
   Le décalage vaut la hauteur du FAB (35 px) plus son propre bas et un écart. */
@media (max-width: 1319px) {
  .back-to-top { bottom: 122px; right: 16px; }
}

@media (max-width: 720px) {
  body.has-progress .back-to-top { bottom: calc(var(--progress-h) + 70px); }
  body.has-progress .toc-fab { bottom: calc(var(--progress-h) + 24px); }

  /* Sous 720 px le widget occupe presque toute la largeur : mesuré à 89 px de
     haut pour 359 px de large sur un écran de 390, alors que le body n'en
     réservait que 50. La fin de chaque page passait sous le panneau, sans
     moyen de la lire. Au-dessus, le widget vit dans la marge et ne recouvre
     pas la colonne de texte. */
  body.has-progress { padding-bottom: calc(var(--progress-h) + 24px); }
}


/* =============================================================
   FOCUS CLAVIER — anneau commun
   Aucun style de focus générique n'existait : navbar, cartes, doc-nav et rail
   ne montraient que l'anneau par défaut du navigateur, invisible sur fond
   sombre. L'anneau est décalé de 2px, donc tracé sur le fond du parent : il
   reste lisible même sur une pastille pleine (.navbar a.current).
   ============================================================= */
:focus-visible {
  outline: 2px solid var(--primary-dark);
  outline-offset: 2px;
}

/* =============================================================
   LIEN D'ÉVITEMENT ET CONTENU PRINCIPAL
   Douze liens de navbar séparaient le clavier du contenu.
   ============================================================= */
.skip-link {
  position: fixed;
  top: 0;
  left: 12px;
  z-index: 200;
  transform: translateY(-200%);
  /* couleurs en dur : --primary-dark devient clair en thème sombre et ne
     porterait plus de texte blanc (même choix que .toc-fab) */
  background: #9a3d2a;
  color: #fff;
  padding: 10px 18px;
  border: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-size: 10pt;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-lg);
}

.skip-link:focus {
  transform: translateY(0);
}

.skip-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -5px;
}

main { display: block; }
main:focus { outline: none; }

/* =============================================================
   RENVOIS INTER-COURS — repli discret sous le sommaire
   ============================================================= */
details.cross-refs {
  margin: 0 0 30px;
  background: transparent;
  border: none;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  border-radius: 0;
  box-shadow: none;
}

details.cross-refs:hover { box-shadow: none; }
details.cross-refs[open] { border-color: var(--border-soft); }

details.cross-refs > summary,
details.cross-refs[open] > summary {
  background: transparent;
  border-bottom: none;
  color: var(--ink-mute);
  font-size: 9.5pt;
  font-weight: 600;
  padding: 9px 34px 9px 2px;
}

details.cross-refs > summary:hover { background: transparent; color: var(--primary-dark); }

details.cross-refs > summary::after {
  right: 8px;
  width: 8px;
  height: 8px;
  border-color: var(--ink-mute);
}

details.cross-refs[open] > summary::after { border-color: var(--ink-mute); }

details.cross-refs > div,
details.cross-refs > p,
details.cross-refs > ul {
  background: transparent;
  padding: 0 2px 12px;
  font-size: 9.8pt;
  color: var(--ink-soft);
}

details.cross-refs > ul { padding-left: 24px; }

/* =============================================================
   AUTO-ÉVALUATION DE FIN DE SECTION
   Frontière franche : la section est finie, on se teste avant de continuer.
   ============================================================= */
.section-quiz {
  margin: 44px 0 8px;
  padding: 20px 24px 10px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-top: 3px solid var(--primary);
  border-radius: var(--radius);
  page-break-inside: avoid;
}

.section-quiz-title {
  margin: 0 0 14px;
  padding: 0;
  border: none;
  color: var(--navy);
  font-size: 11.5pt;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.section-quiz > details:last-of-type { margin-bottom: 16px; }

/* Renvoi vers la banque de questions filtrée : une ligne, sans poids visuel */
.to-test {
  margin: 14px 0 0;
  font-size: 9.5pt;
  color: var(--ink-mute);
}

.to-test a { color: var(--primary-dark); }

@media (max-width: 720px) {
  .section-quiz { padding: 16px 14px 6px; }
}

/* =============================================================
   IMPRESSION — fonds et replis
   Les navigateurs suppriment les fonds par défaut : les bandeaux et pastilles
   sortaient en blanc sur blanc. Et un <details> fermé n'imprime pas son
   contenu — site.js les ouvre à l'impression, ce bloc neutralise ce qui
   restait masqué visuellement.
   ============================================================= */
@media print {
  .header-bar,
  .header-bar .weight,
  .section-header,
  .section-header h2,
  .section-header h2 code,
  .tldr,
  .q-tag,
  .choices li,
  .choices li::before,
  .card-status,
  .exam-tip,
  .key-concept,
  .anti-pattern,
  .high-priority,
  .section-quiz,
  details > summary,
  .answer-block,
  details details.answer-reveal > div .answer-correct,
  details details.answer-reveal > div .answer-correct::before {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  details.answer-reveal.is-locked {
    opacity: 1;
    border-style: dashed;
  }

  details.cross-refs { border-color: var(--border); }

  /* la règle générique `a { color: var(--ink) !important }` du bloc print
     précédent poserait de l'encre sombre sur le dégradé du bandeau */
  .header-bar a { color: inherit !important; }

  .skip-link { display: none; }
}

/* =============================================================
   BANDEAU DE FILTRE PAR TASK STATEMENT (Practice_Questions)
   Posé par practice.js quand l'URL porte ?task=x.y — c'est-à-dire
   quand on arrive depuis la ligne « À tester » d'une fiche de cours.
   Il doit dire ce qui est masqué, sinon la page paraît amputée.
   ============================================================= */
.task-filter {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 22px;
  padding: 12px 18px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 10pt;
  color: var(--ink-soft);
}
.task-filter > span { font-weight: 600; }

.task-filter-clear {
  margin-left: auto;
  padding: 5px 14px;
  font-family: inherit;
  font-size: 9.5pt;
  color: var(--bg-card);
  background: var(--primary-dark);
  border: none;
  border-radius: 999px;
  cursor: pointer;
}
.task-filter-clear:hover { background: var(--ink); }

@media print { .task-filter { display: none; } }

/* =============================================================
   « À REVOIR » — la file de rappel espacé, sous le profil d'accueil
   Posée par home-progress.js quand des questions sont dues. Sans
   JavaScript elle n'existe pas, et c'est voulu : le reste de la page
   se lit sans elle.
   ============================================================= */
.a-revoir {
  margin: 18px 0 0;
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.a-revoir-title {
  margin: 0 0 6px;
  font-size: 11pt;
  color: var(--navy);
}
.a-revoir-hint {
  margin: 0 0 12px;
  font-size: 9.5pt;
  color: var(--ink-soft);
}
.a-revoir-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.a-revoir-item { margin: 0; }
.a-revoir-item a {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 6px 13px;
  font-size: 9.5pt;
  color: var(--ink);
  text-decoration: none;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.a-revoir-item a:hover { border-color: var(--primary); color: var(--primary-dark); }
/* Une question ratée se distingue par sa bordure ET par son libellé de domaine
   en gras : la couleur seule ne porte pas l'information (WCAG 1.4.1). */
.a-revoir-item.is-wrong a { border-color: var(--anti-border); }
.a-revoir-dom {
  font-weight: 700;
  font-size: 8.5pt;
  letter-spacing: 0.03em;
  color: var(--ink-mute);
}
.a-revoir-item.is-wrong .a-revoir-dom { color: var(--anti-ink); }

.quiz-replay {
  display: inline-block;
  margin: 10px 0 0;
  padding: 5px 13px;
  font-family: inherit;
  font-size: 9.5pt;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}
.quiz-replay:hover { border-color: var(--primary); color: var(--primary-dark); }

@media print { .a-revoir, .quiz-replay { display: none; } }