/* =============================================================
   atlas-edn · styles communs
   Fond crème · palette terre · typo éditoriale
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,400;1,9..144,500&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* Couleurs de fond */
  --bg-cream:        #f4efe6;
  --bg-card:         #faf6ec;
  --bg-dark:         #1a1713;

  /* Couleurs de texte */
  --ink:             #1a1713;
  --ink-muted:       #6b5e45;
  --ink-soft:        #9e8f72;
  --ink-inverse:     #faf6ec;

  /* Accents graphiques */
  --accent-dash:     #c4b898;
  --accent-border:   #e0d5b8;

  /* Palette des spécialités (terre naturelle) */
  --spe-cardio:      #2f5e6b;
  --spe-pneumo:      #6b7a3a;
  --spe-infectio:    #b8472c;
  --spe-neuro:       #8a4a7f;
  --spe-orl:         #c27a2c;
  --spe-mir:         #1a1713;
  --spe-interne:     #7a5a3a;
  --spe-urgences:    #6b1f1a;
  --spe-nephro:      #8a4a7f;
  --spe-endocrino:   #c27a2c;
  --spe-ortho:       #c27a2c;
  --spe-hepato:      #b8472c;
  --spe-onco:        #c4366b;   /* rose vif (cancérologie solide) */
  --spe-anapath:     #6e3f8a;   /* violet (anatomopathologie) */
  --spe-genetique:   #6b9c4d;   /* vert clair (génétique constitutionnelle) */
  --spe-radio:       #7a5a3a;   /* brun-tabac (imagerie) */
  --spe-gyneco:      #b8472c;   /* terracotta-rosé (gynécologie-obstétrique) */
  --spe-immuno:      #a85a3a;   /* terre brique-cuivrée (immunologie · 1ʳᵉ matière) */
  --spe-psy:         #6e3f66;
  --spe-psy-light:   #f0e6ec;
  /* Item 61 — 8 nuances pour différencier les catégories diagnostiques (onglet 06)
     et les 10 syndromes (onglet 07). Tons aubergine → terre rosée → ocre. */
  --spe-psy-2:       #8a4a7f;   /* aubergine clair (humeur) */
  --spe-psy-3:       #b35aa3;   /* magenta éteint (anxieux) */
  --spe-psy-4:       #c47a8a;   /* rose terre (TOC) */
  --spe-psy-5:       #b8472c;   /* terracotta (trauma/stress) */
  --spe-psy-6:       #8a5a12;   /* bronze (addictions) */
  --spe-psy-7:       #c27a2c;   /* ocre (TCA/sommeil) */
  --spe-psy-8:       #6b7a3a;   /* olive (neurodév/perso) */

  /* Accents pédagogiques transverses (alertes bleues stratégiques + dégradé étapes) */
  --accent-blue:        #2f5e6b;
  --accent-blue-soft:   #d5e3e7;
  --accent-orange:      #c46a2c;
  --accent-orange-soft: #f4e0cf;
  --accent-yellow:      #b89233;
  --accent-yellow-soft: #f3e9cc;
  --accent-green:       #4e6a2f;
  --accent-green-soft:  #dde2c8;
  --accent-green-strong:#3c5523;

  --alert-red:          #a52a1a;
  --alert-red-soft:     #f3dccf;

  /* Polices */
  --font-serif:      'Fraunces', Georgia, serif;
  --font-sans:       'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:       'IBM Plex Mono', 'SF Mono', 'Courier New', monospace;

  /* Géométrie */
  --radius-md:       8px;
  --radius-lg:       12px;

  /* Statuts de tracking de progression */
  --status-non-vu:      var(--ink-muted);
  --status-decouverte:  var(--accent-dash);
  --status-revise:      var(--spe-orl);
  --status-maitrise:    #6b8e4e;            /* vert subtil cohérent palette terre */
  --status-a-revoir:    var(--spe-infectio); /* terracotta = alerte */

  /* Niveaux d'auto-évaluation (1..5) + flag */
  --niveau-5:           #4e6a2f;            /* vert profond — expert */
  --niveau-4:           #6b8e4e;            /* vert clair — solide */
  --niveau-3:           #b89233;            /* jaune — moyen */
  --niveau-12:          #c46a2c;            /* orange — fragile */
  --niveau-null:        var(--ink-soft);    /* gris — non évalué */
  --niveau-flag:        var(--alert-red);   /* rouge alerte — à revoir vite */

  /* Rang EDN (objectifs de connaissance) */
  --rang-a:             var(--spe-mir);     /* terre profonde, lecture forte */
  --rang-b:             var(--spe-orl);     /* ocre, lecture secondaire */
  --cov-todo:           var(--spe-infectio); /* terracotta = à compléter */

  /* Couche perso "Mes erreurs" — distincte du contenu canonique */
  --erreur-accent:      #b56a2a;            /* orangé miel profond, hors palette matières */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: var(--bg-cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }

/* =============================================================
   LA COQUE · bandeau noir commun en haut
   ============================================================= */

.coque {
  background: var(--bg-dark);
  color: var(--ink-inverse);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.coque .back {
  font-size: 12px;
  color: var(--accent-dash);
  transition: color .18s;
  letter-spacing: 0.03em;
}
.coque .back:hover { color: var(--ink-inverse); }

.coque .brand {
  font-family: var(--font-serif);
  font-size: 22px;
  font-style: italic;
  letter-spacing: -0.01em;
}
.coque .brand-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--spe-infectio);
  margin: 0 3px 4px;
  vertical-align: middle;
}

.coque .search {
  margin-left: auto;
  background: rgba(250, 246, 236, 0.08);
  border: 1px solid rgba(196, 184, 152, 0.2);
  color: var(--accent-dash);
  padding: 7px 14px;
  border-radius: var(--radius-md);
  font-size: 12px;
  letter-spacing: 0.03em;
  transition: all .18s;
}
.coque .search:hover {
  background: rgba(250, 246, 236, 0.15);
  color: var(--ink-inverse);
}

/* =============================================================
   PAGE D'ACCUEIL · catalogue
   ============================================================= */

.catalogue {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 2rem 4rem;
}

.catalogue-hero {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px dashed var(--accent-dash);
}
.catalogue-hero .mark {
  font-family: var(--font-serif);
  font-size: 48px;
  font-style: italic;
  letter-spacing: -0.02em;
}
.catalogue-hero .dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--spe-infectio);
  align-self: center;
}
.catalogue-hero .eyebrow {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.catalogue-hero .tag {
  margin-left: auto;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-muted);
  font-size: 14px;
}

.search-block {
  margin-bottom: 2rem;
}
.search-input {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--accent-dash);
  border-radius: var(--radius-md);
  padding: 13px 18px;
  font-size: 15px;
  color: var(--ink);
  font-family: inherit;
  transition: border-color .18s;
}
.search-input:focus {
  outline: none;
  border-color: var(--ink);
}
.search-input::placeholder {
  color: var(--ink-soft);
  font-style: italic;
}

.filter-group { margin-bottom: 1.5rem; }
.filter-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 12px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  background: transparent;
  border: 1px solid var(--accent-dash);
  color: var(--ink);
  padding: 7px 15px;
  border-radius: 999px;
  font-size: 13px;
  transition: all .18s ease;
}
.chip:hover { background: #ebe2cf; }
.chip.active {
  background: var(--ink);
  color: var(--ink-inverse);
  border-color: var(--ink);
}
.chip-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 2.5rem;
}

.item-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-lg);
  padding: 22px 22px 20px;
  cursor: pointer;
  transition: border-color .22s ease, box-shadow .22s ease;
  text-decoration: none;
  color: inherit;
}
.item-card:hover {
  border-color: var(--ink);
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .22);
}
.item-card .num {
  font-family: var(--font-serif);
  font-size: 46px;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 12px;
  display: block;
}
.item-card .title {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -0.005em;
  margin-bottom: 16px;
  color: var(--ink);
}
.item-card .mat-chip { align-self: flex-start; }

/* =============================================================
   MATIÈRES RÉFÉRENTES · mapping couleurs + chips de filtre
   Chaque matière = une classe .mat-{kebab-case} qui définit
   la variable locale --mat à partir de la palette terre existante.
   Pour ajouter une matière : une ligne ici + son usage sur la card.
   ============================================================= */

.mat-urgences-rea     { --mat: var(--spe-urgences); }
.mat-medecine-interne { --mat: var(--spe-interne); }
.mat-infectiologie    { --mat: var(--spe-infectio); }
.mat-neurologie       { --mat: var(--spe-neuro); }
.mat-psychiatrie      { --mat: var(--spe-psy); }
.mat-gyneco           { --mat: var(--spe-gyneco); }
.mat-therapeutique    { --mat: var(--spe-interne); }
.mat-immunologie      { --mat: var(--spe-immuno); }
/* Futures matières (palette disponible) :
   .mat-cardiologie   { --mat: var(--spe-cardio); }
   .mat-pneumologie   { --mat: var(--spe-pneumo); }
   .mat-orl           { --mat: var(--spe-orl); }
   .mat-nephrologie   { --mat: var(--spe-nephro); }
   .mat-endocrinologie{ --mat: var(--spe-endocrino); }
   .mat-hepato-gastro { --mat: var(--spe-hepato); }
   .mat-oncologie     { --mat: var(--spe-onco); }
   .mat-orthopedie    { --mat: var(--spe-ortho); }
*/

.mat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid color-mix(in oklab, var(--mat, var(--accent-dash)) 35%, var(--accent-dash));
  background: color-mix(in oklab, var(--mat, var(--ink)) 8%, var(--bg-card));
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.mat-chip.all { --mat: var(--ink); }
.mat-chip:hover {
  background: color-mix(in oklab, var(--mat, var(--ink)) 18%, var(--bg-card));
  border-color: var(--mat, var(--accent-dash));
}
.mat-chip.active {
  background: var(--mat, var(--ink));
  color: var(--ink-inverse);
  border-color: var(--mat, var(--ink));
}

/* Chip matière DANS une card item : purement décoratif,
   pas interactif (le clic est sur la card elle-même). */
.item-card .mat-chip {
  cursor: inherit;
  pointer-events: none;
}
.item-card .mat-chip:hover {
  background: color-mix(in oklab, var(--mat, var(--ink)) 8%, var(--bg-card));
  border-color: color-mix(in oklab, var(--mat, var(--accent-dash)) 35%, var(--accent-dash));
}

.footer-note {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--accent-dash);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-muted);
  text-align: center;
}

/* =============================================================
   PAGE D'ITEM · coque + titre + onglets + contenu
   ============================================================= */

.item-header {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5rem 2rem 1.25rem;
  border-bottom: 1px dashed var(--accent-dash);
}
.item-header .eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 14px;
}
.item-header .eyebrow-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: middle;
}
.item-header .titlerow {
  display: flex;
  align-items: baseline;
  gap: 22px;
  flex-wrap: wrap;
}
.item-header .num-big {
  font-family: var(--font-serif);
  font-size: 62px;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.02em;
}
.item-header .title-big {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 500;
  color: var(--ink);
}

.tabs-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 2rem 0;
  overflow-x: auto;
}
.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--accent-dash);
  min-width: max-content;
}
.tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 16px;
  font-size: 13px;
  color: var(--ink-muted);
  transition: color .18s, border-color .18s;
  margin-bottom: -1px;
  white-space: nowrap;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: inherit;
}
.tab:hover { color: var(--ink); }
.tab.active {
  color: var(--ink);
  border-bottom-color: var(--ink);
  font-weight: 500;
}
.tab-num {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}

.content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}
.content-panel { display: none; }
.content-panel.active { display: block; }

.placeholder-card {
  background: var(--bg-card);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  text-align: center;
}
.placeholder-card h3 {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  font-style: italic;
  margin-bottom: 0.75rem;
}
.placeholder-card p {
  color: var(--ink-muted);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* =============================================================
   UTILITAIRES
   ============================================================= */
.is-hidden { display: none !important; }

/* =============================================================
   TRACKING DE PROGRESSION · pastilles, sélecteur, bande de stats
   ============================================================= */

/* Pastille ronde de niveau — affichée en coin haut-droit d'une carte
   du catalogue (via [data-status-dot]). La couleur reflète le niveau
   d'auto-évaluation, ou l'état flag (rouge) si l'item est marqué. */
.status-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: transparent;
  vertical-align: middle;
  flex-shrink: 0;
}
.status-dot--n5    { background: var(--niveau-5); }
.status-dot--n4    { background: var(--niveau-4); }
.status-dot--n3    { background: var(--niveau-3); }
.status-dot--n12   { background: var(--niveau-12); }
.status-dot--nnull { background: var(--niveau-null); }
.status-dot--flag  { background: var(--niveau-flag); box-shadow: 0 0 0 2px color-mix(in oklab, var(--niveau-flag) 22%, var(--bg-cream)); }
.status-dot--none  { background: transparent; }

.item-card [data-status-dot] {
  position: absolute;
  top: 14px;
  right: 14px;
  pointer-events: none;
}
.item-card [data-status-dot].status-dot--nnull,
.item-card [data-status-dot].status-dot--none {
  opacity: 0.32;
}

/* =============================================================
   PANNEAU DE TRACKING · sur une page d'item
   Container <div class="tracker" data-item-num="…"></div> peuplé par
   item-common.js. Affiche : compteur Vues, échelle Niveau, toggle Flag.
   ============================================================= */
.tracker {
  margin-top: 18px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-md);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px 28px;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 13px;
}
.tracker-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.tracker-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  min-width: 56px;
}
/* Vues : -  N / 10  + */
.tracker-vues-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--accent-dash);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}
.tracker-vues-btn:hover:not(:disabled) {
  background: color-mix(in oklab, var(--ink) 6%, var(--bg-card));
  border-color: var(--ink);
}
.tracker-vues-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.tracker-vues-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
  min-width: 56px;
  text-align: center;
}
.tracker-vues-num .total {
  font-size: 13px;
  color: var(--ink-soft);
}
/* Niveau : 5 ronds cliquables */
.tracker-niveau {
  display: inline-flex;
  gap: 6px;
}
.tracker-niveau-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--accent-dash);
  background: transparent;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.tracker-niveau-btn:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.tracker-niveau-btn.is-active {
  background: var(--niveau-null);
  border-color: var(--niveau-null);
  color: var(--ink-inverse);
  font-weight: 600;
}
.tracker-niveau-btn[data-n="1"].is-active,
.tracker-niveau-btn[data-n="2"].is-active { background: var(--niveau-12); border-color: var(--niveau-12); }
.tracker-niveau-btn[data-n="3"].is-active { background: var(--niveau-3);  border-color: var(--niveau-3); }
.tracker-niveau-btn[data-n="4"].is-active { background: var(--niveau-4);  border-color: var(--niveau-4); }
.tracker-niveau-btn[data-n="5"].is-active { background: var(--niveau-5);  border-color: var(--niveau-5); }
/* Flag : toggle */
.tracker-flag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border: 1px solid var(--accent-dash);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-muted);
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.tracker-flag:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.tracker-flag.is-on {
  background: color-mix(in oklab, var(--niveau-flag) 12%, var(--bg-card));
  border-color: var(--niveau-flag);
  color: var(--niveau-flag);
  font-weight: 500;
}
/* Dernière éval */
.tracker-meta {
  grid-column: 1 / -1;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12px;
  color: var(--ink-soft);
  border-top: 1px dashed var(--accent-dash);
  padding-top: 10px;
}
.tracker-meta.note-stale {
  color: var(--niveau-12);
}

/* Bande de stats sur l'accueil — 4 chiffres + CTA discret à droite */
.stats-band {
  display: flex;
  align-items: center;
  gap: 32px;
  background: var(--bg-card);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-md);
  padding: 22px 26px;
  margin-bottom: 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s ease;
}
.stats-band:hover { border-color: var(--ink); }
.stats-band .stats-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 80px;
}
.stats-band .stats-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.stats-band .stats-label {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.stats-band .stats-cta {
  margin-left: auto;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-muted);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color .2s ease, border-color .2s ease;
}
.stats-band:hover .stats-cta {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* Footer dynamique : chiffres en Fraunces italique, reste éditorial */
.footer-note .footer-num {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink);
  font-size: 15px;
}

/* =============================================================
   PAGE PROGRESSION · dashboard
   ============================================================= */

.dash {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 2rem 4rem;
}

.dash-hero {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px dashed var(--accent-dash);
  flex-wrap: wrap;
}
.dash-hero .mark {
  font-family: var(--font-serif);
  font-size: 40px;
  font-style: italic;
  letter-spacing: -0.02em;
}
.dash-hero .eyebrow {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.dash-hero .tag {
  margin-left: auto;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-muted);
  font-size: 14px;
}

.dash-block {
  background: var(--bg-card);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  margin-bottom: 22px;
}
.dash-block-title {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--accent-dash);
}
.dash-block-title .num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
}
.dash-block-title h2 {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
}
.dash-block-title .hint {
  margin-left: auto;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-muted);
  font-size: 13px;
}

/* Bloc 1 — KPI grid */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}
.kpi {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 14px;
  border-left: 3px solid var(--ink-soft);
  background: color-mix(in oklab, var(--bg-card) 60%, var(--bg-cream));
  border-radius: 4px;
  min-width: 0;
}
.kpi--total { border-left-color: var(--ink); }
.kpi--n5    { border-left-color: var(--niveau-5); }
.kpi--n4    { border-left-color: var(--niveau-4); }
.kpi--n3    { border-left-color: var(--niveau-3); }
.kpi--n12   { border-left-color: var(--niveau-12); }
.kpi--nnull { border-left-color: var(--niveau-null); }
.kpi--flag  { border-left-color: var(--niveau-flag); }
.kpi-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.kpi-label {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.gauge {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gauge-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}
.gauge-head .pct {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.gauge-bar {
  position: relative;
  height: 10px;
  background: color-mix(in oklab, var(--accent-dash) 25%, var(--bg-cream));
  border-radius: 999px;
  overflow: hidden;
}
.gauge-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--niveau-5);
  border-radius: 999px;
  transition: width .4s ease;
}

/* Bloc 2 — à revoir */
.review-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.review-card {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  background: color-mix(in oklab, var(--bg-card) 60%, var(--bg-cream));
  border: 1px solid var(--accent-border);
  border-left: 3px solid var(--niveau-null);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, transform .18s ease;
}
.review-card:hover {
  border-color: var(--ink);
  transform: translateX(2px);
}
.review-card.review-card--flag  { border-left-color: var(--niveau-flag); }
.review-card.review-card--stale { border-left-color: var(--niveau-3); }
.review-card .pastille {
  display: inline-block;
  margin-right: 4px;
}
.review-card.review-card--flag .reason  { color: var(--niveau-flag); }
.review-card.review-card--flag .pastille { color: var(--niveau-flag); }
.review-card .num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 28px;
  line-height: 1;
  color: var(--ink);
}
.review-card .body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.review-card .title {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--ink);
}
.review-card .reason {
  font-size: 12px;
  color: var(--ink-muted);
  font-style: italic;
}
.review-card .arrow {
  font-family: var(--font-mono);
  color: var(--ink-soft);
}
.empty-msg {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-muted);
  padding: 12px 4px;
  font-size: 14px;
}

/* Bloc 3 — heatmap matières */
.mat-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mat-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mat-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  color: var(--ink);
}
.mat-row-head .mat-name {
  font-family: var(--font-serif);
  font-size: 16px;
  letter-spacing: -0.005em;
}
.mat-row-head .mat-name .total {
  color: var(--ink-soft);
  font-style: italic;
  font-size: 13px;
  margin-left: 8px;
}
.mat-row-head .mat-pct {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}
.mat-bar {
  display: flex;
  height: 12px;
  border-radius: 4px;
  overflow: hidden;
  background: color-mix(in oklab, var(--accent-dash) 22%, var(--bg-cream));
}
.mat-bar .seg {
  height: 100%;
}
.mat-bar .seg--n5    { background: var(--niveau-5); }
.mat-bar .seg--n4    { background: var(--niveau-4); }
.mat-bar .seg--n3    { background: var(--niveau-3); }
.mat-bar .seg--n12   { background: var(--niveau-12); }
.mat-bar .seg--nnull { background: color-mix(in oklab, var(--niveau-null) 25%, var(--bg-cream)); }

/* Bloc 3 (suite) — accordéon par matière */
.mat-list { gap: 10px; }

.acc-row {
  background: color-mix(in oklab, var(--bg-card) 65%, var(--bg-cream));
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color .18s ease;
}
.acc-row:hover { border-color: var(--accent-dash); }
.acc-row.is-open { border-color: var(--ink-muted); }

.acc-head {
  width: 100%;
  display: grid;
  grid-template-columns: 18px minmax(180px, 1.2fr) minmax(160px, 2fr) auto;
  gap: 16px;
  align-items: center;
  background: transparent;
  border: 0;
  padding: 14px 18px;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
  transition: background-color .18s ease;
}
.acc-head:hover  { background: color-mix(in oklab, var(--ink) 4%, transparent); }
.acc-head:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.acc-head .mat-name {
  font-family: var(--font-serif);
  font-size: 16px;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.acc-head .mat-name .total {
  color: var(--ink-soft);
  font-style: italic;
  font-size: 13px;
  margin-left: 8px;
}
.acc-head .mat-pct {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.acc-chevron {
  display: inline-block;
  font-size: 10px;
  color: var(--ink-soft);
  transition: transform .2s ease;
  line-height: 1;
}
.acc-row.is-open .acc-chevron { transform: rotate(90deg); }

.acc-body {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .3s ease, opacity .2s ease;
  border-top: 1px dashed transparent;
}
.acc-row.is-open .acc-body {
  max-height: 4000px;
  opacity: 1;
  border-top-color: var(--accent-dash);
}

.acc-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto auto;
  gap: 14px;
  align-items: center;
  padding: 10px 18px;
  border-top: 1px dashed var(--accent-border);
  font-size: 13px;
}
.acc-item:first-child { border-top: 0; }

.acc-item-link {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.acc-item-link:hover .acc-item-title {
  text-decoration: underline;
  text-decoration-color: var(--accent-dash);
}
.acc-item-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.01em;
  min-width: 36px;
  flex-shrink: 0;
}
.acc-item-title {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acc-item-title.is-mastered {
  color: var(--ink-soft);
  font-style: italic;
}

.acc-vues {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.acc-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--accent-dash);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s ease, background-color .15s ease, opacity .15s ease;
}
.acc-btn:hover:not(:disabled) {
  border-color: var(--ink);
  background: color-mix(in oklab, var(--ink) 6%, transparent);
}
.acc-btn:disabled { opacity: .35; cursor: not-allowed; }
.acc-vues-val {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink);
  min-width: 42px;
  text-align: center;
}
.acc-vues-val .total { color: var(--ink-soft); font-size: 12px; }

.acc-niveau {
  display: inline-flex;
  gap: 4px;
}
.acc-niveau-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--accent-dash);
  background: transparent;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.acc-niveau-btn:hover { border-color: var(--ink); color: var(--ink); }
.acc-niveau-btn.is-active {
  background: var(--niveau-null);
  border-color: var(--niveau-null);
  color: var(--ink-inverse);
  font-weight: 600;
}
.acc-niveau-btn[data-n="1"].is-active,
.acc-niveau-btn[data-n="2"].is-active { background: var(--niveau-12); border-color: var(--niveau-12); }
.acc-niveau-btn[data-n="3"].is-active { background: var(--niveau-3);  border-color: var(--niveau-3); }
.acc-niveau-btn[data-n="4"].is-active { background: var(--niveau-4);  border-color: var(--niveau-4); }
.acc-niveau-btn[data-n="5"].is-active { background: var(--niveau-5);  border-color: var(--niveau-5); }

.acc-flag-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--accent-dash);
  background: transparent;
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
  transition: opacity .15s ease, border-color .15s ease, background-color .15s ease;
}
.acc-flag-btn:hover { border-color: var(--ink); opacity: 1; }
.acc-flag-btn.is-on {
  background: color-mix(in oklab, var(--niveau-flag) 14%, var(--bg-card));
  border-color: var(--niveau-flag);
  opacity: 1;
}

.acc-arrow {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 4px;
  transition: color .15s ease, background-color .15s ease;
}
.acc-arrow:hover {
  color: var(--ink);
  background: color-mix(in oklab, var(--ink) 6%, transparent);
}

@media (max-width: 820px) {
  .acc-head {
    grid-template-columns: 18px 1fr auto;
    row-gap: 10px;
  }
  .acc-head .mat-bar { grid-column: 1 / -1; }
  .acc-item {
    grid-template-columns: 1fr;
    row-gap: 8px;
  }
  .acc-item-title { white-space: normal; }
}

/* Bloc 4 — timeline */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  padding-left: 18px;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--accent-dash);
}
.tl-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: baseline;
  position: relative;
}
.tl-item::before {
  content: '';
  position: absolute;
  left: -18px;
  top: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid var(--ink-soft);
}
.tl-item--first::before   { border-color: var(--niveau-3); }
.tl-item--visit::before   { border-color: var(--ink-soft); }
.tl-item--vues::before    { border-color: var(--accent-blue); }
.tl-item--niveau::before  { border-color: var(--niveau-null); }
.tl-item--niveau.tl-item--n1::before { border-color: var(--niveau-12); }
.tl-item--niveau.tl-item--n2::before { border-color: var(--niveau-12); }
.tl-item--niveau.tl-item--n3::before { border-color: var(--niveau-3); }
.tl-item--niveau.tl-item--n4::before { border-color: var(--niveau-4); }
.tl-item--niveau.tl-item--n5::before { border-color: var(--niveau-5); }
.tl-item--flag::before    { border-color: var(--niveau-flag); }
.tl-item .desc {
  font-size: 14px;
  color: var(--ink);
}
.tl-item .desc b {
  font-weight: 500;
}
.tl-item .when {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .kpi-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 720px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-band { gap: 18px; flex-wrap: wrap; }
  .stats-band .stats-cta { margin-left: 0; flex-basis: 100%; }
}

/* =============================================================
   OBJECTIFS DE CONNAISSANCE EDN · onglet par item
   ============================================================= */

.objectifs-wrap {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.objectifs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--accent-dash);
  flex-wrap: wrap;
}

.objectifs-filter {
  display: flex;
  gap: 8px;
}
.of-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--accent-dash);
  background: transparent;
  color: var(--ink-muted);
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.of-chip:hover {
  color: var(--ink);
  background: color-mix(in oklab, var(--ink) 4%, var(--bg-card));
}
.of-chip.is-active {
  background: var(--ink);
  color: var(--ink-inverse);
  border-color: var(--ink);
}
.of-chip .of-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: inherit;
  opacity: 0.75;
  letter-spacing: 0.05em;
}

.objectifs-gauge {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: right;
  font-size: 13px;
  color: var(--ink-muted);
}
.objectifs-gauge .og-line {
  font-family: var(--font-sans);
}
.objectifs-gauge strong {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.objectifs-gauge .og-lbl {
  color: var(--ink-muted);
  font-size: 12px;
}

.objectifs-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-size: 13.5px;
}
.objectifs-table thead th {
  text-align: left;
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
  border-bottom: 1px solid var(--accent-dash);
  background: color-mix(in oklab, var(--bg-card) 60%, var(--bg-cream));
}
.objectifs-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--accent-border);
  vertical-align: top;
  line-height: 1.5;
}
.objectifs-table tbody tr:last-child td { border-bottom: none; }
.objectifs-table tbody tr:hover {
  background: color-mix(in oklab, var(--bg-cream) 50%, var(--bg-card));
}
.objectifs-table .intitule-cell {
  color: var(--ink);
  max-width: 540px;
}
.objectifs-table .qcm-cell { white-space: nowrap; }
.objectifs-table .qcm-stars {
  font-size: 13px;
  letter-spacing: 0.02em;
}
.objectifs-table .qcm-empty {
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 12px;
}
.objectifs-table .status-cell { white-space: nowrap; }

.rang-chip {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.2;
}
.rang-chip.rang-A {
  background: color-mix(in oklab, var(--rang-a) 14%, var(--bg-card));
  color: var(--rang-a);
  border: 1px solid color-mix(in oklab, var(--rang-a) 35%, var(--accent-dash));
}
.rang-chip.rang-B {
  background: color-mix(in oklab, var(--rang-b) 14%, var(--bg-card));
  color: var(--rang-b);
  border: 1px solid color-mix(in oklab, var(--rang-b) 35%, var(--accent-dash));
}

.cov-link {
  color: var(--accent-blue);
  text-decoration: none;
  border-bottom: 1px dashed color-mix(in oklab, var(--accent-blue) 50%, var(--accent-dash));
  font-size: 12.5px;
  transition: color .15s, border-color .15s;
}
.cov-link:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.cov-todo {
  color: var(--cov-todo);
  font-style: italic;
  font-family: var(--font-serif);
  font-size: 13px;
}

.obj-toggles {
  display: inline-flex;
  gap: 6px;
}
.obj-toggle {
  padding: 5px 11px;
  border: 1px solid var(--accent-dash);
  background: transparent;
  color: var(--ink-muted);
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.obj-toggle:hover {
  color: var(--ink);
  border-color: var(--ink-muted);
}
.obj-toggle[data-status="vu"].is-active {
  background: color-mix(in oklab, var(--accent-dash) 55%, var(--bg-card));
  color: var(--ink);
  border-color: color-mix(in oklab, var(--accent-dash) 80%, var(--ink));
}
.obj-toggle[data-status="maitrise"].is-active {
  background: var(--status-maitrise);
  color: var(--ink-inverse);
  border-color: var(--status-maitrise);
}
.obj-toggle-disabled {
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 12px;
}

/* État vide */
.objectifs-empty {
  background: color-mix(in oklab, var(--bg-card) 70%, var(--bg-cream));
  border: 1px dashed var(--accent-dash);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  text-align: center;
}
.objectifs-empty .oe-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink);
  margin-bottom: 6px;
}
.objectifs-empty .oe-sub {
  color: var(--ink-muted);
  font-size: 13px;
}

/* Toast "Tous Rang A maîtrisés" */
.obj-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 200;
  background: var(--bg-dark);
  color: var(--ink-inverse);
  padding: 16px 20px;
  border-radius: 8px;
  box-shadow: 0 12px 40px -8px rgba(0,0,0,.32);
  max-width: 360px;
  font-size: 13.5px;
  line-height: 1.5;
  animation: obj-toast-in .26s ease-out;
}
.obj-toast.is-leaving {
  animation: obj-toast-out .24s ease-in forwards;
}
.obj-toast .ot-line {
  color: var(--accent-dash);
  margin-bottom: 4px;
}
.obj-toast .ot-line b {
  color: var(--ink-inverse);
}
.obj-toast .ot-q {
  margin-bottom: 12px;
}
.obj-toast .ot-q b {
  color: var(--status-maitrise);
}
.obj-toast .ot-actions {
  display: flex;
  gap: 8px;
}
.obj-toast .ot-yes,
.obj-toast .ot-no {
  padding: 7px 14px;
  border: 1px solid rgba(196,184,152,.3);
  background: transparent;
  color: var(--ink-inverse);
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.obj-toast .ot-yes {
  background: var(--status-maitrise);
  border-color: var(--status-maitrise);
}
.obj-toast .ot-yes:hover {
  background: color-mix(in oklab, var(--status-maitrise) 85%, white);
}
.obj-toast .ot-no:hover {
  background: rgba(250,246,236,.08);
}

@keyframes obj-toast-in {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes obj-toast-out {
  from { transform: translateY(0);    opacity: 1; }
  to   { transform: translateY(20px); opacity: 0; }
}

@media (max-width: 720px) {
  .objectifs-header { gap: 14px; }
  .objectifs-gauge  { text-align: left; }
  .objectifs-table  { display: block; overflow-x: auto; }
  .objectifs-table thead th, .objectifs-table tbody td { padding: 10px 12px; }
  .objectifs-table .intitule-cell { max-width: none; }
}

/* =============================================================
   COUCHE PERSO · MES ERREURS QCM
   Visuellement distincte du contenu canonique. Liseré gauche
   --erreur-accent. Bloc "À retenir" mis en évidence.
   ============================================================= */

.erreurs-wrap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.erreur-card {
  position: relative;
  background: color-mix(in oklab, var(--erreur-accent) 4%, var(--bg-cream));
  border: 1px solid var(--accent-border);
  border-left: 4px solid var(--erreur-accent);
  border-radius: var(--radius-md);
  padding: 12px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.erreur-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.erreur-source {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.erreur-source--unknown {
  color: var(--ink-soft);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}
.erreur-badges {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.erreur-tag {
  display: inline-block;
  padding: 3px 10px;
  background: color-mix(in oklab, var(--bg-card) 60%, var(--bg-cream));
  border: 1px solid var(--accent-dash);
  color: var(--ink-muted);
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  border-radius: 999px;
  white-space: nowrap;
}
.erreur-date {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12.5px;
  color: var(--ink-muted);
}

.erreur-enonce {
  font-family: var(--font-serif);
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink);
  font-weight: 400;
}

.erreur-reponses {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12.5px;
  line-height: 1.4;
}
.erreur-mareponse,
.erreur-bonnereponse {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 3px 0;
}
.erreur-mareponse .label,
.erreur-bonnereponse .label {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.erreur-mareponse .content {
  color: var(--status-a-revoir);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in oklab, var(--status-a-revoir) 70%, var(--ink));
}
.erreur-bonnereponse .content {
  color: var(--status-maitrise);
}

.erreur-concept {
  background: color-mix(in oklab, var(--erreur-accent) 12%, var(--bg-card));
  border-radius: var(--radius-md);
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.erreur-concept-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--erreur-accent);
  font-weight: 600;
}
.erreur-concept p {
  font-family: var(--font-serif);
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.erreur-empty {
  background: color-mix(in oklab, var(--bg-card) 70%, var(--bg-cream));
  border: 1px dashed var(--accent-dash);
  border-radius: var(--radius-md);
  padding: 36px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.erreur-empty p:first-child {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-muted);
}
.erreur-empty-sub {
  font-size: 13px;
  color: var(--ink-soft);
}
.erreur-empty code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--bg-card);
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--erreur-accent);
}

@media (max-width: 980px) {
  .erreurs-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .erreur-card { padding: 10px 12px 10px; }
  .erreur-mareponse,
  .erreur-bonnereponse { grid-template-columns: 1fr; gap: 2px; }
  .erreur-mareponse .label,
  .erreur-bonnereponse .label { font-size: 10px; }
}