/* =============================================================
   atlas-edn · MODE LUDIQUE BLOCS — feuille de style
   -------------------------------------------------------------
   Phase 1.1 — pilote item 96.
   3 types de blocs activés via body.ludique-blocs-on :
     • .ludic-block  : encadré à liste — chaque <li>/<p> se floute
     • .ludic-card   : card à rubriques (titre + LABEL : contenu)
                       → label visible, contenu de chaque rubrique flouté
     • .ludic-table  : tableau comparatif
                       → mode cross / diag / reverse via data-ludic-mode

   Compatible dark-mode (le filter:blur fonctionne dans les deux modes).
   ============================================================= */

/* =============================================================
   1) ENCADRÉS À LISTE — .ludic-block
   ============================================================= */
body.ludique-blocs-on .ludic-block ul > li,
body.ludique-blocs-on .ludic-block ol > li,
body.ludique-blocs-on .ludic-block > p,
body.ludique-blocs-on .ludic-block .cat-block > p {
  filter: blur(5px);
  cursor: help;
  user-select: none;
  transition: filter 0.15s ease;
}
body.ludique-blocs-on .ludic-block ul > li:hover,
body.ludique-blocs-on .ludic-block ol > li:hover,
body.ludique-blocs-on .ludic-block > p:hover,
body.ludique-blocs-on .ludic-block .cat-block > p:hover {
  filter: blur(0);
}

/* =============================================================
   2) CARDS À RUBRIQUES — .ludic-card (Phase 2C-post : sélecteur glouton)
   ----------------------------------------------------------
   Convention v3 : tout descendant d'une .ludic-card est masqué
   par défaut. Les exclusions structurelles ci-dessous préservent
   les amorces (titres, headers de comparateurs, lettres ICHD-3).
   Les classes utilitaires .ludic-keep et .ludic-skip permettent
   un override fin au cas par cas.
   Avantage : couvre toutes les variantes éditoriales custom
   (def-card-XX, kp-card, trap-truc, brca-machin, ft-area, actu-body,
   ac-meta, icd-content…) sans énumération exhaustive.
   ============================================================= */

/* Glouton : tout descendant d'une .ludic-card est masqué par défaut */
body.ludique-blocs-on .ludic-card *:not(.ludic-keep):not(.ludic-keep *) {
  filter: blur(5px);
  cursor: help;
  user-select: none;
  transition: filter 0.18s ease;
}

/* Hover sur la card révèle tous les descendants non-keep.
   Exception : <td> exclus pour préserver le comportement cell-by-cell
   du rail .ludic-table (chaque cellule se révèle individuellement). */
body.ludique-blocs-on .ludic-card:hover *:not(.ludic-keep):not(.ludic-keep *):not(td) {
  filter: blur(0);
}

/* ----------------------------------------------------------------------
   EXCLUSIONS structurelles : titres et headers JAMAIS floutés.
   Sans ça, l'utilisateur ne sait pas quel bloc il est en train de tester.
   ---------------------------------------------------------------------- */
body.ludique-blocs-on .ludic-card h2,
body.ludique-blocs-on .ludic-card h3,
body.ludique-blocs-on .ludic-card h4,
body.ludique-blocs-on .ludic-card h5,
body.ludique-blocs-on .ludic-card .card-title,
body.ludique-blocs-on .ludic-card .ludic-card-title,
body.ludique-blocs-on .ludic-card .block-title,
body.ludique-blocs-on .ludic-card .section-title {
  filter: none !important;
}

/* Comparateur multi-entités : col-headers (.ch) + row-headers (.rh) visibles.
   Couvre les .ludic-card ET les wrappers .ludic-block (cas comparateur). */
body.ludique-blocs-on .ludic-card .ch,
body.ludique-blocs-on .ludic-card .rh,
body.ludique-blocs-on .ludic-block .ch,
body.ludique-blocs-on .ludic-block .rh {
  filter: none !important;
}

/* ICHD-3 : lettre A/B/C/D/E toujours visible */
body.ludique-blocs-on .ludic-card .icd-letter {
  filter: none !important;
}

/* Tables internes à une .ludic-card : <th> toujours visible. Les <td> sont
   gérés par les règles cell-by-cell de la section 3 (.ludic-table tbody td). */
body.ludique-blocs-on .ludic-card th {
  filter: none !important;
}

/* ----------------------------------------------------------------------
   .ludic-keep — opt-in pour préserver un descendant arbitraire du masque
   ludique. À poser sur tout élément qui doit rester visible (ex: pictos
   décoratifs, badges sources, hint texts).
   ---------------------------------------------------------------------- */
body.ludique-blocs-on .ludic-card .ludic-keep,
body.ludique-blocs-on .ludic-card .ludic-keep * {
  filter: none !important;
  cursor: auto;
}

/* ----------------------------------------------------------------------
   .ludic-skip — opt-out total : un bloc .ludic-skip ne participe pas au
   mode ludique (pas de masquage, pas de widget auto-éval). À utiliser
   pour les sections off-topic ou les items voisins.
   ---------------------------------------------------------------------- */
body.ludique-blocs-on .ludic-skip,
body.ludique-blocs-on .ludic-skip * {
  filter: none !important;
  cursor: auto !important;
}
body.ludique-blocs-on .ludic-skip .ludique-blocs-eval,
body.ludique-blocs-on .ludic-skip .ludic-eval-widget {
  display: none !important;
}

/* ----------------------------------------------------------------------
   Widget auto-éval : descendant de .ludic-card → le glouton le flouterait.
   Override pour rester lisible et cliquable en toute circonstance.
   La classe RÉELLE est `.ludique-blocs-eval` (cf. JS createEvalUI()).
   `.ludic-eval-widget` est gardée en alias pour compat / renames futurs.
   ---------------------------------------------------------------------- */
body.ludique-blocs-on .ludic-card .ludique-blocs-eval,
body.ludique-blocs-on .ludic-card .ludique-blocs-eval *,
body.ludique-blocs-on .ludic-card .ludic-eval-widget,
body.ludique-blocs-on .ludic-card .ludic-eval-widget * {
  filter: none !important;
  cursor: auto;
}

/* Comparateur custom (cmp-row dans item 99 onglet 12) wrappé dans un
   .ludic-block parent. .rh + .ch restent visibles (cf. exclusions ci-dessus),
   .cell (data) floutée. 1 seul widget auto-éval au wrapper. */
body.ludique-blocs-on .ludic-block .cmp-row > .cell {
  filter: blur(5px);
  cursor: help;
  user-select: none;
  transition: filter 0.15s ease;
  isolation: isolate;
}
body.ludique-blocs-on .ludic-block .cmp-row > .cell:hover {
  filter: blur(0);
}

/* =========================================================
 * CAS SPÉCIAUX V3 — patterns sans <p>/<ul> direct mais
 * où on veut un cell-by-cell ciblé sur un sous-élément
 * ========================================================= */

/* Cas 1 — face-territory-card : .ft-area floutée, .ft-name visible */
body.ludique-blocs-on .face-territory-card.ludic-block .ft-area {
  filter: blur(5px);
  transition: filter .2s ease;
}
body.ludique-blocs-on .face-territory-card.ludic-block:hover .ft-area {
  filter: blur(0px);
}

/* Cas 2 — actu-box : .actu-body floutée, .actu-tag visible */
body.ludique-blocs-on .actu-box.ludic-block .actu-body {
  filter: blur(5px);
  transition: filter .2s ease;
}
body.ludique-blocs-on .actu-box.ludic-block:hover .actu-body {
  filter: blur(0px);
}

/* Cas 3 — icd-block : cell-by-cell par row, .icd-letter + .icd-h + .icd-mnemo visibles */
body.ludique-blocs-on .icd-block.ludic-block .icd-row .icd-content {
  filter: blur(5px);
  transition: filter .2s ease;
}
body.ludique-blocs-on .icd-block.ludic-block .icd-row:hover .icd-content {
  filter: blur(0px);
}

/* =========================================================
 * CAS SPÉCIAUX V3 — patterns item 101 (PF)
 * ========================================================= */

/* Pattern 101-1 — contingent (4 contingents anatomiques) :
   h4 + .c-rang visibles, contenu c-row > div flouté par row */
body.ludique-blocs-on .contingent.ludic-block .c-row > div {
  filter: blur(5px);
  transition: filter .2s ease;
}
body.ludique-blocs-on .contingent.ludic-block .c-row:hover > div {
  filter: blur(0px);
}

/* Pattern 101-2 — topo-test (3 tests topographiques) :
   h4 visible, contenu t-row après .lab flouté par row */
body.ludique-blocs-on .topo-test.ludic-block .t-row > *:not(.lab) {
  filter: blur(5px);
  transition: filter .2s ease;
}
body.ludique-blocs-on .topo-test.ludic-block .t-row:hover > *:not(.lab) {
  filter: blur(0px);
}

/* Pattern 101-3 — etio-card (10 cartes profil étiologies) :
   h4 visible, etio-row par row + piege + renvoi floutés */
body.ludique-blocs-on .etio-card.ludic-block .etio-row > div {
  filter: blur(5px);
  transition: filter .2s ease;
}
body.ludique-blocs-on .etio-card.ludic-block .etio-row:hover > div {
  filter: blur(0px);
}
body.ludique-blocs-on .etio-card.ludic-block .etio-piege,
body.ludique-blocs-on .etio-card.ludic-block .etio-renvoi {
  filter: blur(5px);
  transition: filter .2s ease;
}
body.ludique-blocs-on .etio-card.ludic-block .etio-piege:hover,
body.ludique-blocs-on .etio-card.ludic-block .etio-renvoi:hover {
  filter: blur(0px);
}

/* Pattern 101-4 — hb-grade (6 grades House-Brackmann) :
   hb-num + h5 visibles, p + hb-mob floutés */
body.ludique-blocs-on .hb-grade.ludic-block .hb-mob {
  filter: blur(5px);
  transition: filter .2s ease;
}
body.ludique-blocs-on .hb-grade.ludic-block:hover .hb-mob {
  filter: blur(0px);
}

/* Pattern 101-5 — sequelle (cartes séquelles) :
   h5 visible, p + sequelle-tt floutés */
body.ludique-blocs-on .sequelle.ludic-block .sequelle-tt {
  filter: blur(5px);
  transition: filter .2s ease;
}
body.ludique-blocs-on .sequelle.ludic-block:hover .sequelle-tt {
  filter: blur(0px);
}

/* Pattern 101-6 — comateux-card .piege en bas */
body.ludique-blocs-on .comateux-card.ludic-block .piege {
  filter: blur(5px);
  transition: filter .2s ease;
}
body.ludique-blocs-on .comateux-card.ludic-block .piege:hover {
  filter: blur(0px);
}

/* Pattern 101-7 — semio-card .epargne (pas de ludic-block sur le parent,
   mais on veut quand même un effet ludique sur la phrase d'épargne) */
body.ludique-blocs-on .semio-card .epargne {
  filter: blur(5px);
  transition: filter .2s ease;
}
body.ludique-blocs-on .semio-card .epargne:hover {
  filter: blur(0px);
}

/* =========================================================
 * CAS SPÉCIAUX V3 — patterns item 171 (Gale & Pédiculoses)
 * ========================================================= */

/* Pattern 171-1 — parasite-card : head visible, parasite-val flouté par row */
body.ludique-blocs-on .parasite-card.ludic-block .parasite-row .parasite-val {
  filter: blur(5px);
  transition: filter .2s ease;
}
body.ludique-blocs-on .parasite-card.ludic-block .parasite-row:hover .parasite-val {
  filter: blur(0px);
}

/* Pattern 171-2 — lesion-card : h4 visible, topo + desc + plus floutés indépendamment */
body.ludique-blocs-on .lesion-card.ludic-block .lesion-topo,
body.ludique-blocs-on .lesion-card.ludic-block .lesion-desc,
body.ludique-blocs-on .lesion-card.ludic-block .lesion-plus {
  filter: blur(5px);
  transition: filter .2s ease;
}
body.ludique-blocs-on .lesion-card.ludic-block .lesion-topo:hover,
body.ludique-blocs-on .lesion-card.ludic-block .lesion-desc:hover,
body.ludique-blocs-on .lesion-card.ludic-block .lesion-plus:hover {
  filter: blur(0px);
}

/* Pattern 171-3 — forme-card : h4 visible, terrain + clinique + piege floutés.
   La forme-clinique contient un <ul> direct → règle générique .ludic-block ul > li suffit. */
body.ludique-blocs-on .forme-card.ludic-block .forme-terrain,
body.ludique-blocs-on .forme-card.ludic-block .forme-piege {
  filter: blur(5px);
  transition: filter .2s ease;
}
body.ludique-blocs-on .forme-card.ludic-block .forme-terrain:hover,
body.ludique-blocs-on .forme-card.ludic-block .forme-piege:hover {
  filter: blur(0px);
}

/* Pattern 171-4 — paraclin-card : .paraclin-head visible, p flouté.
   <p> direct géré par règle générique .ludic-block > p. Aucun selector dédié. */

/* Pattern 171-5 — pc-tt-card : .pc-tt-mol flouté (h5 reste visible).
   pc-tt-block contient <ul> direct → règle générique floute les <li>, h5 visible. */
body.ludique-blocs-on .pc-tt-card.ludic-block .pc-tt-mol {
  filter: blur(5px);
  transition: filter .2s ease;
}
body.ludique-blocs-on .pc-tt-card.ludic-block .pc-tt-mol:hover {
  filter: blur(0px);
}

/* Pattern 171-6 — vect-card : h5 visible, vect-agent + p floutés.
   <p> direct géré par règle générique. */
body.ludique-blocs-on .vect-card.ludic-block .vect-agent {
  filter: blur(5px);
  transition: filter .2s ease;
}
body.ludique-blocs-on .vect-card.ludic-block .vect-agent:hover {
  filter: blur(0px);
}

/* Pattern 171-7 — strat-card, e60-card, echec-card : h5/h4 + ul → règles génériques OK. */

/* Pattern 171-8 — pivot-table override : la 1ère colonne <th class="pivot-row-h">
   doit rester visible (intitulé de la ligne). La règle générique .ludic-table tbody td
   ne floute QUE les td, mais on force ici l'override sur le th.pivot-row-h pour
   être robuste si une autre règle ascendante essayait de le flouter. */
body.ludique-blocs-on .pivot-table.ludic-table tbody th.pivot-row-h {
  filter: none !important;
}

/* =========================================================
 * TABLES LUDIQUES V3 — cell-by-cell par row (en-têtes visibles)
 * ========================================================= */
body.ludique-blocs-on table.ludic-table tbody td {
  filter: blur(5px);
  transition: filter .2s ease;
}
body.ludique-blocs-on table.ludic-table tbody tr:hover td {
  filter: blur(0px);
}

/* ----------------------------------------------------------------------
   BLACKLIST — ne JAMAIS flouter les éléments visuels.
   Décision Kevin : flouter une image médicale = saboter l'apprentissage
   visuel. Couvre img/svg/figure/picture par balise + classes contenant
   img/photo/svg/schema/radio/irm/tdm/echo/scinti par pattern.
   `filter: none !important` désactive un blur appliqué à ces éléments,
   mais NE désactive PAS le blur appliqué à un PARENT (cascade CSS).
   Donc en pratique, ces patterns ne doivent PAS être enfants direct
   d'une zone floutée — l'enrobage doit être fait au niveau JS/HTML.
   ---------------------------------------------------------------------- */
body.ludique-blocs-on img,
body.ludique-blocs-on svg,
body.ludique-blocs-on figure,
body.ludique-blocs-on picture,
body.ludique-blocs-on .clin-img-wrap,
body.ludique-blocs-on [class*="-img"],
body.ludique-blocs-on [class*="-photo"],
body.ludique-blocs-on [class*="-svg"],
body.ludique-blocs-on [class*="-schema"],
body.ludique-blocs-on [class*="-radio"],
body.ludique-blocs-on [class*="-irm"],
body.ludique-blocs-on [class*="-tdm"],
body.ludique-blocs-on [class*="-echo"],
body.ludique-blocs-on [class*="-scinti"] {
  filter: none !important;
}

/* =============================================================
   3) TABLEAUX — cell-by-cell par défaut (Phase 2C-PRÉ)
   ----------------------------------------------------------
   Refonte du rail tableau, décision Kevin :
     • DEFAULT (sans attribut)         → chaque <td> du <tbody>
       est masqué INDIVIDUELLEMENT. Hover sur un td → reveal cette
       cellule uniquement.
     • data-ludic-reveal="row"         → hover sur n'importe quelle
       cellule de la ligne défloute toute la ligne (CSS pur).
     • data-ludic-reveal="column"      → JS pose .col-revealed sur
       toutes les cellules de la colonne au hover (CSS reveal).
   Les <th> (headers thead ET .rowhead du tbody) ne sont JAMAIS
   floutés — ils servent toujours d'amorce visible.
   L'ancien data-ludic-mode (cross/diag/reverse) est SUPPRIMÉ.
   L'auto-heuristique 2-col → row est SUPPRIMÉE.
   Couvre aussi les <table> imbriquées dans une .ludic-card.
   ============================================================= */

/* Default : chaque td du tbody flouté indépendamment */
body.ludique-blocs-on .ludic-table tbody td,
body.ludique-blocs-on .ludic-card table tbody td {
  filter: blur(6px);
  cursor: help;
  user-select: none;
  transition: filter 0.18s ease, background-color 0.18s ease;
  isolation: isolate;
}
/* Reveal cell (default) : hover sur td → seule cette cellule défloutée */
body.ludique-blocs-on .ludic-table tbody td:hover,
body.ludique-blocs-on .ludic-card table tbody td:hover {
  filter: blur(0);
}
/* Reveal row : data-ludic-reveal="row" → hover sur tr défloute toute la ligne */
body.ludique-blocs-on .ludic-table[data-ludic-reveal="row"] tbody tr:hover td,
body.ludique-blocs-on .ludic-card[data-ludic-reveal="row"] table tbody tr:hover td {
  filter: blur(0);
}
/* Reveal column : data-ludic-reveal="column" → JS pose .col-revealed */
body.ludique-blocs-on .ludic-table tbody td.col-revealed,
body.ludique-blocs-on .ludic-card table tbody td.col-revealed {
  filter: blur(0);
}

/* ----- Cellules colorées (.cell-danger/.cell-pillar/.cell-ok) -----
   Quand masquées : bg neutralisé pour ne pas laisser deviner la
   réponse via la couleur. Quand reveal : bg restauré.
   Spécificité : mask td.cell-X = (0,0,3,3), hover/col-revealed
   td.cell-X = (0,0,4,3) → reveal gagne ✓. */
body.ludique-blocs-on .ludic-table tbody td.cell-danger,
body.ludique-blocs-on .ludic-table tbody td.cell-pillar,
body.ludique-blocs-on .ludic-table tbody td.cell-ok,
body.ludique-blocs-on .ludic-card table tbody td.cell-danger,
body.ludique-blocs-on .ludic-card table tbody td.cell-pillar,
body.ludique-blocs-on .ludic-card table tbody td.cell-ok {
  background-color: var(--bg-card, #faf6ec) !important;
  color: var(--ink-muted, #6b5e45) !important;
}

/* Restauration bg light-mode au reveal (cell hover, row hover, col-revealed) */
body.ludique-blocs-on .ludic-table tbody td.cell-danger:hover,
body.ludique-blocs-on .ludic-table tbody td.col-revealed.cell-danger,
body.ludique-blocs-on .ludic-table[data-ludic-reveal="row"] tbody tr:hover td.cell-danger,
body.ludique-blocs-on .ludic-card table tbody td.cell-danger:hover,
body.ludique-blocs-on .ludic-card table tbody td.col-revealed.cell-danger,
body.ludique-blocs-on .ludic-card[data-ludic-reveal="row"] table tbody tr:hover td.cell-danger {
  background-color: #f3dccf !important;
  color: var(--danger) !important;
}
body.ludique-blocs-on .ludic-table tbody td.cell-pillar:hover,
body.ludique-blocs-on .ludic-table tbody td.col-revealed.cell-pillar,
body.ludique-blocs-on .ludic-table[data-ludic-reveal="row"] tbody tr:hover td.cell-pillar,
body.ludique-blocs-on .ludic-card table tbody td.cell-pillar:hover,
body.ludique-blocs-on .ludic-card table tbody td.col-revealed.cell-pillar,
body.ludique-blocs-on .ludic-card[data-ludic-reveal="row"] table tbody tr:hover td.cell-pillar {
  background-color: #cfdde0 !important;
  color: var(--info) !important;
}
body.ludique-blocs-on .ludic-table tbody td.cell-ok:hover,
body.ludique-blocs-on .ludic-table tbody td.col-revealed.cell-ok,
body.ludique-blocs-on .ludic-table[data-ludic-reveal="row"] tbody tr:hover td.cell-ok,
body.ludique-blocs-on .ludic-card table tbody td.cell-ok:hover,
body.ludique-blocs-on .ludic-card table tbody td.col-revealed.cell-ok,
body.ludique-blocs-on .ludic-card[data-ludic-reveal="row"] table tbody tr:hover td.cell-ok {
  background-color: #dde6ce !important;
  color: var(--ok) !important;
}

/* Restauration bg dark-mode au reveal */
body.dark-mode.ludique-blocs-on .ludic-table tbody td.cell-danger:hover,
body.dark-mode.ludique-blocs-on .ludic-table tbody td.col-revealed.cell-danger,
body.dark-mode.ludique-blocs-on .ludic-table[data-ludic-reveal="row"] tbody tr:hover td.cell-danger,
body.dark-mode.ludique-blocs-on .ludic-card table tbody td.cell-danger:hover,
body.dark-mode.ludique-blocs-on .ludic-card table tbody td.col-revealed.cell-danger,
body.dark-mode.ludique-blocs-on .ludic-card[data-ludic-reveal="row"] table tbody tr:hover td.cell-danger {
  background-color: #5a2a22 !important;
  color: #f0a896 !important;
}
body.dark-mode.ludique-blocs-on .ludic-table tbody td.cell-pillar:hover,
body.dark-mode.ludique-blocs-on .ludic-table tbody td.col-revealed.cell-pillar,
body.dark-mode.ludique-blocs-on .ludic-table[data-ludic-reveal="row"] tbody tr:hover td.cell-pillar,
body.dark-mode.ludique-blocs-on .ludic-card table tbody td.cell-pillar:hover,
body.dark-mode.ludique-blocs-on .ludic-card table tbody td.col-revealed.cell-pillar,
body.dark-mode.ludique-blocs-on .ludic-card[data-ludic-reveal="row"] table tbody tr:hover td.cell-pillar {
  background-color: #25434c !important;
  color: #a3c5cf !important;
}
body.dark-mode.ludique-blocs-on .ludic-table tbody td.cell-ok:hover,
body.dark-mode.ludique-blocs-on .ludic-table tbody td.col-revealed.cell-ok,
body.dark-mode.ludique-blocs-on .ludic-table[data-ludic-reveal="row"] tbody tr:hover td.cell-ok,
body.dark-mode.ludique-blocs-on .ludic-card table tbody td.cell-ok:hover,
body.dark-mode.ludique-blocs-on .ludic-card table tbody td.col-revealed.cell-ok,
body.dark-mode.ludique-blocs-on .ludic-card[data-ludic-reveal="row"] table tbody tr:hover td.cell-ok {
  background-color: #38492a !important;
  color: #c4d59f !important;
}

/* =============================================================
   TOGGLE FLOTTANT
   ============================================================= */
.ludique-blocs-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--accent-dash, #c4b898);
  border-radius: 999px;
  background: var(--bg-card, #faf6ec);
  color: var(--ink, #1a1713);
  cursor: pointer;
  transition: background 0.18s, transform 0.12s, border-color 0.18s;
}
.ludique-blocs-toggle.is-floating {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 9998;
  box-shadow: 0 2px 8px rgba(26, 23, 19, 0.18);
}
.ludique-blocs-toggle:hover {
  background: var(--bg-cream, #f4efe6);
  border-color: var(--ink, #1a1713);
}
.ludique-blocs-toggle:active { transform: scale(0.95); }
.ludique-blocs-toggle:focus-visible {
  outline: 2px solid var(--ink, #1a1713);
  outline-offset: 2px;
}
.ludique-blocs-toggle svg {
  width: 22px;
  height: 22px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ludique-blocs-toggle[aria-pressed="true"] {
  background: var(--spe-neuro, #8a4a7f);
  border-color: var(--spe-neuro, #8a4a7f);
  color: #faf6ec;
}
body.dark-mode .ludique-blocs-toggle {
  background: var(--bg-card, #2a2520);
  color: var(--ink, #e8dfc8);
  border-color: rgba(196, 184, 152, 0.3);
}
body.dark-mode .ludique-blocs-toggle:hover {
  background: var(--bg-cream, #1f1c18);
  border-color: rgba(196, 184, 152, 0.6);
}

/* Cacher l'ancien toggle ludique sur l'item 96 (rail obsolète) */
body[data-item-id="96"] #ludic-toggle { display: none !important; }

/* =============================================================
   AUTO-ÉVAL — footer discret en bas du bloc exploré
   -------------------------------------------------------------
   Comportement :
     • Sibling après <table> pour les .ludic-table (limitation HTML)
     • Enfant interne pour .ludic-card et .ludic-block
   Style minimal : transparent, séparé par un border-top dashed,
   passe à opacity 1 quand on hover la card parente.
   ============================================================= */
/* Phase 2B post-test : widget auto-éval forcé en footer horizontal pleine
   largeur, même quand le parent est en flex-direction:column ou en grid.
   - flex-direction:row + flex-wrap:wrap = label + 3 boutons en ligne, retour
     à la ligne automatique si étroit.
   - width:100% = remplit toute la largeur du parent.
   - grid-column:1/-1 = span full row si parent est grid (kp + autres).
   - !important sur les propriétés clés pour battre les styles inline ou
     ancestraux qui imposeraient une direction column. */
.ludique-blocs-eval {
  margin-top: 12px;
  padding: 6px 10px 0;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  width: 100%;
  grid-column: 1 / -1;
  align-items: center !important;
  gap: 0.5em;
  font-family: var(--font-sans, 'IBM Plex Sans', sans-serif);
  font-size: 0.75em;
  color: var(--ink-muted, #6b5e45);
  background: transparent;
  border-top: 1px dashed var(--rule, var(--accent-dash, #c4b898));
  opacity: 0.8;
  transition: opacity 0.15s ease;
  animation: ludique-blocs-eval-fade 0.24s ease;
}
@keyframes ludique-blocs-eval-fade {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 0.8; transform: translateY(0); }
}
/* Hover du parent (card) → opacité 1 */
.ludic-card:hover > .ludique-blocs-eval,
.ludic-block:hover > .ludique-blocs-eval,
.ludique-blocs-eval:hover {
  opacity: 1;
}
.ludique-blocs-eval__label {
  font-style: italic;
  letter-spacing: 0.01em;
}
.ludique-blocs-eval__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border: 1px solid var(--accent-dash, #c4b898);
  border-radius: 999px;
  background: transparent;
  color: var(--ink, #1a1713);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.ludique-blocs-eval__btn:hover {
  background: var(--bg-cream, #f4efe6);
  border-color: var(--ink, #1a1713);
}
.ludique-blocs-eval__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.ludique-blocs-eval__dot--ok      { background: #4a8a3a; }
.ludique-blocs-eval__dot--partial { background: #c27a2c; }
.ludique-blocs-eval__dot--redo    { background: #b8472c; }

.ludique-blocs-eval__saved {
  font-style: italic;
  color: #4a8a3a;
}

body.dark-mode .ludique-blocs-eval {
  color: var(--ink-muted, #b2a98f);
  border-top-color: rgba(196, 184, 152, 0.3);
}
body.dark-mode .ludique-blocs-eval__btn {
  color: var(--ink, #e8dfc8);
  border-color: rgba(196, 184, 152, 0.3);
}
body.dark-mode .ludique-blocs-eval__btn:hover {
  background: rgba(196, 184, 152, 0.08);
  border-color: rgba(196, 184, 152, 0.6);
}

/* ----------------------------------------------------------------------
   Chip is-active — état persistant après clic ou au read-back boot.
   Variantes par éval avec palette cohérente avec les .__dot existantes.
   ---------------------------------------------------------------------- */
.ludique-blocs-eval__btn.is-active {
  font-weight: 600;
  color: #faf6ec;
  border-color: transparent;
}
.ludique-blocs-eval__btn.is-active--ok {
  background: #4a8a3a;
  border-color: #4a8a3a;
}
.ludique-blocs-eval__btn.is-active--partial {
  background: #c27a2c;
  border-color: #c27a2c;
}
.ludique-blocs-eval__btn.is-active--redo {
  background: #b8472c;
  border-color: #b8472c;
}
.ludique-blocs-eval__btn.is-active:hover {
  filter: brightness(0.92);
}
.ludique-blocs-eval__btn.is-active .ludique-blocs-eval__dot {
  background: #faf6ec !important;
}

.ludique-blocs-eval__toast {
  font-style: italic;
  font-size: 11px;
  color: #4a8a3a;
  margin-left: auto;
  animation: ludique-blocs-toast-fade 0.18s ease;
}
@keyframes ludique-blocs-toast-fade {
  from { opacity: 0; transform: translateX(-3px); }
  to   { opacity: 1; transform: translateX(0); }
}

body.dark-mode .ludique-blocs-eval__btn.is-active {
  color: #faf6ec;
}
body.dark-mode .ludique-blocs-eval__toast {
  color: #8fbf7a;
}

/* ----------------------------------------------------------------------
   FIX layout — keypoints (.kp) sont en CSS grid 44px+1fr.
   Sans ce span, le widget eval atterrit en row2/col1 (44px) et se fait
   écraser → label sur 4 lignes, boutons empilés. Force le widget à
   occuper toute la largeur de la card en passant en row 2 plein largeur.
   ---------------------------------------------------------------------- */
.kp > .ludique-blocs-eval {
  grid-column: 1 / -1;
}