/**
 * EGM Games Shortcodes - Styles
 *
 * Styles for [egm_games], [egm_game], [egm_library], [egm_questions] shortcodes.
 *
 * @package EGM_Games
 * @since 1.3.0
 */

/* =============================================================================
   🧱 SOCLE PROPRE DU LECTEUR (session 222)
   ============================================================================= */

/**
 * 🔴 **Ce lecteur vivait du preflight d'un VOISIN.** Toute cette feuille a été écrite au-dessus du
 * `@tailwind base` que les bundles React du thème (`header`, `hero`, `premium-cta`, `footer`)
 * servaient GLOBALEMENT sur chaque page publique. Le jour où ces quatre bundles ont été bornés à
 * leur propre montage (222), `.egm-question-player` a perdu, en silence, ce qu'il n'avait jamais
 * déclaré : mesuré à l'A/B sur la page témoin, **48 nœuds** repassaient de `border-box` à
 * `content-box`, **34** retrouvaient un style de bordure, les `<button>`/`<input>` reprenaient la
 * police du navigateur (Arial 13,33 px au lieu de la police de l'auteur) et leur apparence native.
 *
 * ⭐ **La loi** : un lecteur posé dans une page qu'il ne contrôle pas doit **posséder son socle**,
 * ⛔ jamais l'emprunter à la feuille d'à côté ⇒ [[a-reader-must-own-its-socle-never-borrow-a-neighbours]].
 * C'est la même loi que la 218 (« posséder chaque classe qu'il écrit »), vue par l'autre bout.
 *
 * ⚖️ **Bornée ET sans poids** : `:where()` ne compte pour rien dans la spécificité, donc ce socle
 * vaut exactement ce que valait le preflight global — il ne bat rien de plus qu'avant, et chaque
 * règle de cette feuille continue de le recouvrir sans effort
 * ⇒ [[scoping-a-selector-must-not-change-what-it-beats]].
 *
 * ⛔ On ne recopie PAS tout le preflight de Tailwind : uniquement les déclarations que l'A/B a
 * nommées comme réellement perdues.
 */
:where(.egm-question-player),
:where(.egm-question-player) *,
:where(.egm-question-player) *::before,
:where(.egm-question-player) *::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
}

/* Les contrôles de formulaire ne reprennent pas la police du navigateur : ils suivent l'auteur. */
:where(.egm-question-player) button,
:where(.egm-question-player) input,
:where(.egm-question-player) optgroup,
:where(.egm-question-player) select,
:where(.egm-question-player) textarea {
    font-family: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}

/* ⚠️ `-webkit-appearance: button` était donné par le preflight : sans lui, un `<button>` reprend
   le dessin natif du système (fond gris, bord biseauté) sous certains navigateurs. */
:where(.egm-question-player) button,
:where(.egm-question-player) [type='button'],
:where(.egm-question-player) [type='reset'],
:where(.egm-question-player) [type='submit'] {
    -webkit-appearance: button;
    appearance: button;
    background-color: transparent;
    background-image: none;
}

/* =============================================================================
   CSS Variables (fallbacks if StyleKit not loaded)
   ============================================================================= */

/* ⭐ A4 — L'ORDRE D'AUTORITÉ TYPOGRAPHIQUE, jumeau exact de `console.css`.
 * profil de police de l'AUTEUR > police du THÈME > repli SYSTÈME.
 * Deux étages, deux jetons : `EGMG_Style_Generator` n'écrit plus que `--egm-font-author`, et
 * `--egm-font-family` devient le RÉSULTAT. ⛔ Ne jamais réécrire `--egm-font-family` en amont :
 * l'ordre deviendrait indécidable ⇒ [[two-switches-for-one-fact-must-write-the-same-fact]].
 * ⚠️ `--egm-font-theme` reste vide jusqu'à T3. */
.egm-question-player,
.egm-game-container,
.egm-universal-player {
    /* @egm-generated:font-fallback:BEGIN */
    --egm-font-system: system-ui, -apple-system, sans-serif;
    /* @egm-generated:font-fallback:END */
    --egm-font-family: var(--egm-font-author, var(--egm-font-theme, var(--egm-font-system)));
    --egm-font-title: var(--egm-font-title-author, var(--egm-font-title-theme, var(--egm-font-family)));
}

/* =============================================================================
   Single Question Player ([egm_question])
   ============================================================================= */

/* Auto-read toggle (inside player, above stage) */
.egm-question-player .egm-question-autoread-bar {
    display: flex;
    justify-content: flex-end;
    margin: 0 1rem 0.75rem;
    padding-top: 1rem;
}

.egm-question-player .egm-question-autoread {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border-radius: 9999px;
    background: var(--egm-surface, rgba(255, 255, 255, 0.94));
    border: 1px solid var(--egm-border, rgba(0, 0, 0, 0.12));
    color: var(--egm-text, #1f2937);
    font-weight: 700;
}

.egm-question-player .egm-question-autoread-label {
    font-size: 0.85rem;
}

.egm-question-player .egm-question-autoread-toggle {
    display: inline-flex;
    align-items: center;
}

.egm-question-player .egm-question-autoread-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
}

.egm-question-player .egm-question-autoread-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 24px;
    padding: 0 10px;
    border-radius: 9999px;
    border: 1px solid var(--egm-border, rgba(0, 0, 0, 0.12));
    background: var(--egm-error, #ef4444);
    color: var(--egm-text-on-primary, #ffffff);
    font-weight: 800;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    user-select: none;
}

.egm-question-player .egm-question-autoread-pill::before {
    content: attr(data-off);
}

.egm-question-player .egm-question-autoread-input:checked + .egm-question-autoread-pill {
    background: var(--egm-success, #10b981);
}

.egm-question-player .egm-question-autoread-input:checked + .egm-question-autoread-pill::before {
    content: attr(data-on);
}

.egm-question-player .egm-question-autoread-input:focus-visible + .egm-question-autoread-pill {
    outline: 2px solid var(--egm-primary, #7c3aed);
    outline-offset: 2px;
}

.egm-question-player {
    max-width: 100%;
}

/* Preload overlay (shown until the player is sufficiently visible) */
.egm-question-player.egm-is-preloading {
    position: relative;
}

/* Block interactions while game is waiting for visibility conditions */
.egm-question-player.egm-game-waiting {
    pointer-events: none;
}
.egm-question-player.egm-game-waiting .egm-question-preload {
    pointer-events: auto; /* Allow overlay itself to be interactive if needed */
}

.egm-question-player .egm-question-preload {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--egm-surface, rgba(255, 255, 255, 0.94));
    z-index: 2;
}

.egm-question-player .egm-question-preload-spinner {
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    border: 4px solid var(--egm-border, rgba(0, 0, 0, 0.12));
    border-top-color: var(--egm-primary, #7c3aed);
    animation: egmg-spin 0.9s linear infinite;
}

/* When using the universal player preset (theme-based), apply theme tokens. */
.egm-question-player.egm-universal-player {
    border: none;
    padding: 0;
    border-radius: var(--egm-border-radius, 16px);
    box-shadow: var(--egm-box-shadow, 0 4px 24px rgba(0,0,0,0.08));
    overflow: hidden;
    /* Use gradient if available, otherwise solid bg */
    background: var(--egm-background-gradient, var(--egm-background, #ffffff));
    color: var(--egm-text, #1f2937);
    font-family: var(--egm-font-family, system-ui, -apple-system, sans-serif);
    /* ✅ 2297 (D-2287-BILLEXLBASE, porteur option A) — « +1 point » de 1280 : la base de l'auteur + 1pt, à l'échelle,
       comme la Console (`--gc-canvas-font-size`) et l'Aperçu (`containerStyle`). Sans lui, la bille XL écrivait
       18,4 px ici contre 19,9 px dans l'Aperçu (base 16 par défaut). ⛔ en changer un sans les deux autres. */
    font-size: calc((var(--egm-base-font-size, 16px) + 1pt) * var(--egm-text-scale, 1));
    line-height: var(--egm-line-height, 1.5);
    letter-spacing: var(--egm-letter-spacing, 0);
    /* maxCardWidth (advancedStyles): constrain + center like QPP/Console.
       The generator emits "100%" when the setting is 0 (full width). */
    max-width: var(--egm-max-card-width, 600px);
    margin-left: auto;
    margin-right: auto;
}

/* Layout mode (layout.mode) — class posted by get_accessibility_classes().
   full-width ignores maxCardWidth; centered/compact keep the constrained,
   centered card (compact tightens the spacing via --egm-container-padding). */
.egm-question-player.egm-universal-player.egm-layout-full-width {
    max-width: none;
}
.egm-question-player.egm-universal-player.egm-layout-compact {
    --egm-container-padding: 12px;
}

/* Compact game-wrapper for single question - remove unnecessary min-height */
.egm-question-player .egm-game-wrapper {
    min-height: auto;
    display: flex;
    flex-direction: column;
}

/* Compact gameplay container */
.egm-question-player .egm-gameplay {
    min-height: auto;
    display: flex;
    flex-direction: column;
}

/* Header styled like main player - gradient using primary/secondary */
.egm-question-player .egm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 1rem;
    background: linear-gradient(135deg, var(--egm-primary, #7c3aed) 0%, var(--egm-secondary, #a855f7) 100%);
    color: #ffffff;
    gap: 0.5rem;
}

.egm-question-player .egm-header-left,
.egm-question-player .egm-header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.egm-question-player .egm-header-center {
    flex: 1;
    text-align: center;
    font-weight: 600;
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 0.5rem;
}

/* Icon buttons in header */
.egm-question-player .egm-header .egm-icon-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.18);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s ease;
    color: #ffffff;
}

.egm-question-player .egm-header .egm-icon-btn:hover {
    background: rgba(255, 255, 255, 0.28);
}

.egm-question-player .egm-header .egm-icon-btn svg {
    width: 18px;
    height: 18px;
}

/* Secondary button in header (e.g. Voir la solution) */
.egm-question-player .egm-header .egm-btn-secondary {
    background: rgba(255, 255, 255, 0.9);
    color: var(--egm-primary, #7c3aed);
    border: none;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.egm-question-player .egm-header .egm-btn-secondary:hover {
    background: #ffffff;
}

/* Stage area - compact, uses surface background */
.egm-question-player .egm-stage {
    flex: 0 0 auto;
    padding: var(--egm-card-padding, 20px);
    background: var(--egm-surface, rgba(255, 255, 255, 0.94));
    border-radius: var(--egm-border-radius, 12px);
    border: var(--egm-border-width, 0px) solid var(--egm-border, rgba(0, 0, 0, 0.08));
    /* container-padding (layout.padding) = gap around the card. Kept as a MARGIN
       (outside card-padding) so there is no double-padding with .egm-stage. */
    margin: var(--egm-container-padding, 1rem);
}

.egm-question-player .egm-stage .egm-question-body {
    margin: 0;
}

.egm-question-player .egm-stage .egm-question-feedback {
    margin-top: 0.75rem;
    padding: 0.75rem;
    padding-right: 2.5rem;
    border-radius: 8px;
    font-weight: 600;
    position: relative;
}

/* Croix de fermeture du bloc de retour — parite Console / QPP. */
.egm-question-player .egm-question-feedback-close {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.65;
}

.egm-question-player .egm-question-feedback-close:hover,
.egm-question-player .egm-question-feedback-close:focus-visible {
    opacity: 1;
    background: rgba(0, 0, 0, 0.08);
}

/* Prompt + read button (no header mode) */
.egm-question-player .egm-question-prompt {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.egm-question-player .egm-question-read-btn {
    /* 🔊 200 — LE BOUTON « LIRE » RAFRAICHI : rond et PLEIN en registre ludique.
       Les variables sont posees par le player (`speakButtonSkinVars`, autorite partagee) et
       n'existent QUE dans ce registre ; en sobre elles sont absentes et chaque repli redonne
       exactement l'ecran d'avant. ⛔ Ne jamais recopier ici une valeur du dessin. */
    width: var(--egm-speak-size, 36px);
    height: var(--egm-speak-size, 36px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: var(--egm-speak-fill, var(--egm-surface, rgba(255, 255, 255, 0.94)));
    /* ⚖️ Le trait ne disparait pas, il prend la couleur du fond : retirer la `border` en ludique
       aurait decale l'icone d'un pixel. */
    border: 1px solid var(--egm-speak-fill, var(--egm-border, rgba(0, 0, 0, 0.08)));
    color: var(--egm-speak-ink, var(--egm-text, #1f2937));
    box-shadow: var(--egm-speak-shadow, none);
    cursor: pointer;
    flex: 0 0 auto;
    transition: transform 0.15s ease, background 0.15s ease;
}

.egm-question-player .egm-question-read-btn:hover {
    transform: translateY(-1px);
}

.egm-question-player .egm-question-read-btn svg {
    width: 18px;
    height: 18px;
}

/* Feedback actions */
.egm-question-player .egm-question-feedback-actions {
    margin-top: 0.5rem;
    display: flex;
    gap: 0.5rem;
}

.egm-question-player .egm-question-feedback-solution-btn {
    background: var(--egm-surface, rgba(255, 255, 255, 0.94));
    color: var(--egm-primary, #06b6d4);
    border: 1px solid var(--egm-primary, #06b6d4);
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: 9999px;
    cursor: pointer;
}

/* Inline correct answer block (show_correct) */
.egm-question-player .egm-question-feedback-correct-answer {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--egm-border, rgba(0, 0, 0, 0.12));
}

/* Inline explanation block */
.egm-question-player .egm-question-feedback-explanation {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--egm-border, rgba(0, 0, 0, 0.12));
}

.egm-question-player .egm-question-feedback-explanation-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.egm-question-player .egm-question-feedback-explanation-content {
    font-weight: 500;
}

.egm-question-player .egm-question-feedback-correct-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.egm-question-player .egm-question-feedback-correct-content ul {
    margin: 0.25rem 0 0 1.25rem;
}

/* Solution modal (StyleKit) */
.egm-question-solution-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
}

.egm-question-solution-actions .egm-question-read-btn {
    width: 40px;
    height: 40px;
}

/* Solution modal content - StyleKit v3 token look (works with v2 modal wrapper) */
.egm-question-solution-modal {
    padding: 0.25rem;
}

.egm-question-solution-modal .egm-question-solution-card {
    border-radius: 16px;
    padding: 1rem;
    background: var(--egm-surface, rgba(255,255,255,0.96));
    border: 1px solid var(--egm-border, rgba(0,0,0,0.10));
    box-shadow: var(--egm-shadow-lg, 0 10px 30px rgba(0,0,0,0.10));
}

.egm-question-solution-modal .egm-question-solution-content {
    color: var(--egm-text, #1f2937);
    line-height: 1.6;
}

.egm-question-solution-modal .egm-question-solution-content strong {
    color: var(--egm-text, #111827);
}

.egm-question-solution-modal .egm-question-solution-content a {
    color: var(--egm-primary, #7c3aed);
}

/* Review modal (multi results) */
/* Hide old top action row */
.egm-question-solution-modal .egm-question-solution-actions {
    display: none;
}

/* Modal container */
.egm-question-solution-modal {
    padding: 0;
}

/* Main content card */
.egm-question-solution-card {
    padding: 1.75rem;
    background: var(--egm-surface, #ffffff);
    border-radius: 20px;
    border: none;
    box-shadow: none;
}

/* Question counter badge (for multi-mode review) */
.egm-question-review-modal .egm-question-review-header {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.egm-question-review-modal .egm-question-review-counter {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background: var(--egm-surface-alt, #f3f4f6);
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--egm-text-secondary, #6b7280);
    text-align: center;
}

/* Status row: icon + text */
.egm-review-status-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--egm-surface-alt, #f3f4f6);
    border-radius: 12px;
    margin-bottom: 1.25rem;
}

.egm-review-status-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
}

.egm-review-status-icon.is-correct {
    background: linear-gradient(135deg, #10b981, #059669);
}

.egm-review-status-icon.is-incorrect {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.egm-review-status-icon.is-neutral {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.egm-review-status-text {
    flex: 1;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
}

.egm-review-status-text.is-correct {
    color: var(--egm-success, #10b981);
}

.egm-review-status-text.is-incorrect {
    color: var(--egm-danger, #ef4444);
}

.egm-review-status-text.is-neutral {
    color: var(--egm-warning, #f59e0b);
}

/* Note/instruction callout */
.egm-review-note {
    padding: 1rem 1rem 1rem 1.25rem;
    background: rgba(139, 92, 246, 0.04);
    border-left: 3px solid var(--egm-primary, #8b5cf6);
    border-radius: 8px;
    margin-bottom: 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--egm-text, #1f2937);
}

/* Question section */
.egm-question-review-modal .egm-question-review-section {
    margin-bottom: 1.25rem;
}

.egm-question-review-modal .egm-question-review-section-title {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--egm-text-secondary, #6b7280);
    margin-bottom: 0.5rem;
}

.egm-question-review-modal .egm-question-review-section-body {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--egm-text, #1f2937);
}

/* Answer boxes (user answer, correct answer, correction) */
.egm-review-box {
    padding: 1rem 1.25rem;
    border-radius: 16px;
    margin-bottom: 1rem;
    border: 2px solid;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.egm-review-box.is-correct {
    border-color: var(--egm-success, #10b981);
    background: rgba(16, 185, 129, 0.04);
}

.egm-review-box.is-incorrect {
    border-color: var(--egm-danger, #ef4444);
    background: rgba(239, 68, 68, 0.04);
}

.egm-review-box.is-neutral {
    border-color: var(--egm-warning, #f59e0b);
    background: rgba(245, 158, 11, 0.04);
}

.egm-review-box-title {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--egm-text-secondary, #6b7280);
    margin-bottom: 0.625rem;
}

.egm-review-box-body {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--egm-text, #1f2937);
}

/* Content inside review boxes */
.egm-question-review-modal .egm-review-list {
    margin: 0.25rem 0 0 1.25rem;
}

.egm-question-review-modal .egm-review-text,
.egm-question-review-modal .egm-review-question-text {
    line-height: 1.6;
    color: var(--egm-text, #1f2937);
}

.egm-question-review-modal .egm-review-empty {
    line-height: 1.6;
    color: var(--egm-text-secondary, #9ca3af);
    font-style: italic;
}

.egm-question-review-modal .egm-review-blank {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-bottom: 2px solid var(--egm-primary, #7c3aed);
    border-radius: 4px;
    min-width: 2.5rem;
    text-align: center;
    background: rgba(124, 58, 237, 0.08);
    font-weight: 600;
}

.egm-question-review-modal .egm-review-exercise {
    line-height: 1.7;
}

/* Centered TTS button section */
.egm-review-tts-wrap {
    display: flex;
    justify-content: center;
    padding-top: 1.5rem;
    margin-top: 2rem;
    border-top: 1px solid var(--egm-border, rgba(0, 0, 0, 0.08));
}

.egm-review-tts-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: #ffffff;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.egm-review-tts-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.45);
}

.egm-review-tts-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
}

.egm-review-tts-btn svg {
    width: 18px;
    height: 18px;
}

/* =============================================================================
   Single Question Player - Timeline
   ============================================================================= */

.egm-question-player .egm-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.egm-question-player .egm-timeline-order-row,
.egm-question-player .egm-timeline-pos-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1rem;
    border: 2px solid var(--egm-border);
    border-radius: var(--egm-border-radius-sm);
    background: var(--egm-bg-secondary);
}

.egm-question-player .egm-timeline-order-title,
.egm-question-player .egm-timeline-pos-title {
    font-weight: 600;
    color: var(--egm-text, var(--egm-gray-800));
}

.egm-question-player .egm-timeline-order-select,
.egm-question-player .egm-timeline-year {
    min-width: 90px;
    padding: 0.45rem 0.6rem;
    border-radius: var(--egm-border-radius-sm);
    border: 2px solid var(--egm-border);
    background: var(--egm-bg);
    color: var(--egm-text);
}

.egm-question-player .egm-timeline-order-select:focus,
.egm-question-player .egm-timeline-year:focus {
    outline: none;
    border-color: var(--egm-primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
}

/* =============================================================================
   Single Question Player - Memory Cards
   ============================================================================= */

.egm-question-player .egm-memory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--egm-memory-grid-min, 160px), 1fr));
    gap: 1.25rem;
}

.egm-question-player .egm-memory-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.egm-question-player .egm-memory-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.35rem 0.6rem;
    border-radius: 9999px;
    background: var(--egm-surface, rgba(255, 255, 255, 0.94));
    border: 1px solid var(--egm-border, rgba(0, 0, 0, 0.12));
    color: var(--egm-text, #1f2937);
    font-weight: 800;
    font-size: 0.85rem;
}

.egm-question-player .egm-memory-stat-label {
    color: var(--egm-text-secondary, rgba(0,0,0,0.62));
    font-weight: 800;
}

.egm-question-player .egm-memory-stat-value {
    font-weight: 900;
}

.egm-question-player .egm-memory-grid.egm-memory-cols-2 { grid-template-columns: repeat(2, 1fr); }
.egm-question-player .egm-memory-grid.egm-memory-cols-3 { grid-template-columns: repeat(3, 1fr); }
.egm-question-player .egm-memory-grid.egm-memory-cols-4 { grid-template-columns: repeat(4, 1fr); }
.egm-question-player .egm-memory-grid.egm-memory-cols-5 { grid-template-columns: repeat(5, 1fr); }
.egm-question-player .egm-memory-grid.egm-memory-cols-6 { grid-template-columns: repeat(6, 1fr); }
.egm-question-player .egm-memory-grid.egm-memory-cols-7 { grid-template-columns: repeat(7, 1fr); }
.egm-question-player .egm-memory-grid.egm-memory-cols-8 { grid-template-columns: repeat(8, 1fr); }
.egm-question-player .egm-memory-grid.egm-memory-cols-9 { grid-template-columns: repeat(9, 1fr); }
.egm-question-player .egm-memory-grid.egm-memory-cols-10 { grid-template-columns: repeat(10, 1fr); }

.egm-question-player .egm-memory-card {
    appearance: none;
    border: none;
    border-radius: 12px;
    background: var(--egm-surface, rgba(255,255,255,0.94));
    cursor: pointer;
    padding: 0;
    min-height: var(--egm-memory-card-min-height, 132px);
    height: var(--egm-memory-card-height, auto);
    aspect-ratio: var(--egm-memory-card-aspect, auto);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
    /* 3D flip effect */
    perspective: 1000px;
    transform-style: preserve-3d;
    transition: transform 160ms ease;
}

.egm-question-player .egm-memory-card:focus,
.egm-question-player .egm-memory-card:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.egm-question-player .egm-memory-card:active {
    outline: none !important;
    box-shadow: none !important;
}


.egm-question-player .egm-memory-card:hover:not(:disabled):not(.is-found) {
    transform: translateY(-5px);
}

.egm-question-player .egm-memory-card:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.egm-question-player .egm-memory-card-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    text-align: center;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 12px;
    background: var(--egm-surface, rgba(255,255,255,0.94));
    transition: transform 0.5s ease;
}

.egm-question-player .egm-memory-grid.egm-memory-frame-framed .egm-memory-card-face {
    border: 2px solid var(--egm-border, rgba(0, 0, 0, 0.12));
    padding: 0.65rem;
}

.egm-question-player .egm-memory-grid.egm-memory-frame-none .egm-memory-card-face {
    border: none;
    padding: 0;
}

.egm-question-player .egm-memory-card-back {
    transform: rotateY(0deg);
}

.egm-question-player .egm-memory-card-front {
    transform: rotateY(180deg);
}

.egm-question-player .egm-memory-card.is-flipped .egm-memory-card-back,
.egm-question-player .egm-memory-card.is-found .egm-memory-card-back {
    transform: rotateY(-180deg);
}

.egm-question-player .egm-memory-card.is-flipped .egm-memory-card-front,
.egm-question-player .egm-memory-card.is-found .egm-memory-card-front {
    transform: rotateY(0deg);
}

.egm-question-player .egm-memory-card.is-found {
    opacity: 0.54;
}

.egm-question-player .egm-memory-grid.egm-memory-found-keep .egm-memory-card.is-found {
    opacity: 1;
}

.egm-question-player .egm-memory-grid.egm-memory-found-hide .egm-memory-card.is-found {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.egm-question-player .egm-memory-card-img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.egm-question-player .egm-memory-grid.egm-memory-img-fit-cover .egm-memory-card-img {
    object-fit: cover;
}

.egm-question-player .egm-memory-grid .egm-memory-card-img {
    max-width: var(--egm-memory-image-max-w, 100%);
    max-height: var(--egm-memory-image-max-h, 100%);
}

.egm-question-player .egm-memory-exhausted {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.6rem;
    border-radius: 9999px;
    background: var(--egm-surface, rgba(255, 255, 255, 0.94));
    border: 1px solid var(--egm-border, rgba(0, 0, 0, 0.12));
    color: var(--egm-text, #1f2937);
    font-weight: 900;
    font-size: 0.85rem;
}

.egm-question-player .egm-memory-solution-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.egm-question-player .egm-memory-solution-pair {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.75rem;
    align-items: center;
    padding: 0.5rem;
    border: 1px dashed var(--egm-border, rgba(0, 0, 0, 0.18));
    border-radius: 10px;
}

.egm-question-player .egm-memory-solution-sep {
    font-weight: 800;
    color: var(--egm-text-secondary, var(--egm-gray-600));
}

/* Memory solution modal - compact layout for pairs (left → right) */
.egm-question-solution-modal .egm-memory-solution-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.egm-question-solution-modal .egm-memory-solution-pair {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.75rem;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border: 1px dashed var(--egm-border, rgba(0, 0, 0, 0.18));
    border-radius: 10px;
    background: var(--egm-surface, rgba(255, 255, 255, 0.96));
}

.egm-question-solution-modal .egm-memory-solution-side {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 0.35rem;
    border: 2px solid var(--egm-border, rgba(0, 0, 0, 0.12));
    border-radius: 8px;
    background: var(--egm-bg-secondary, #f9fafb);
}

.egm-question-solution-modal .egm-memory-solution-sep {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--egm-primary, #7c3aed);
}

.egm-question-solution-modal .egm-memory-card-img {
    width: 72px;
    height: 52px;
    max-width: 72px;
    max-height: 52px;
    object-fit: contain;
}

.egm-question-solution-modal .egm-memory-card-text {
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
}
.egm-question-solution-modal .egm-question-solution-actions {
    margin-bottom: 0.75rem;
}

.egm-question-solution-modal .egm-question-read-btn {
    color: var(--egm-text, #1f2937);
    background: var(--egm-surface, rgba(255, 255, 255, 0.94));
    border: 1px solid var(--egm-border, rgba(0, 0, 0, 0.08));
}

/* Prompt + read button (no header mode) */
.egm-question-player .egm-question-prompt {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.egm-question-player .egm-question-read-btn {
    /* 🔊 200 — LE BOUTON « LIRE » RAFRAICHI : rond et PLEIN en registre ludique.
       Les variables sont posees par le player (`speakButtonSkinVars`, autorite partagee) et
       n'existent QUE dans ce registre ; en sobre elles sont absentes et chaque repli redonne
       exactement l'ecran d'avant. ⛔ Ne jamais recopier ici une valeur du dessin. */
    width: var(--egm-speak-size, 36px);
    height: var(--egm-speak-size, 36px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: var(--egm-speak-fill, var(--egm-surface, rgba(255, 255, 255, 0.94)));
    /* ⚖️ Le trait ne disparait pas, il prend la couleur du fond : retirer la `border` en ludique
       aurait decale l'icone d'un pixel. */
    border: 1px solid var(--egm-speak-fill, var(--egm-border, rgba(0, 0, 0, 0.08)));
    color: var(--egm-speak-ink, var(--egm-text, #1f2937));
    box-shadow: var(--egm-speak-shadow, none);
    cursor: pointer;
    flex: 0 0 auto;
    transition: transform 0.15s ease, background 0.15s ease;
}

.egm-question-player .egm-question-read-btn:hover {
    transform: translateY(-1px);
}

.egm-question-player .egm-question-read-btn svg {
    width: 18px;
    height: 18px;
}

/* Feedback actions */
.egm-question-player .egm-question-feedback-actions {
    margin-top: 0.5rem;
    display: flex;
    gap: 0.5rem;
}

.egm-question-player .egm-question-feedback-solution-btn {
    background: var(--egm-surface, rgba(255, 255, 255, 0.94));
    color: var(--egm-primary, #06b6d4);
    border: 1px solid var(--egm-primary, #06b6d4);
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: 9999px;
    cursor: pointer;
}

/* Inline correct answer block (show_correct) */
.egm-question-player .egm-question-feedback-correct-answer {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--egm-border, rgba(0, 0, 0, 0.12));
}

.egm-question-player .egm-question-feedback-correct-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.egm-question-player .egm-question-feedback-correct-content ul {
    margin: 0.25rem 0 0 1.25rem;
}

/* Controls area - bottom bar */
.egm-question-player .egm-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: transparent;
    border-top: none;
}

.egm-question-player .egm-controls .egm-question-restart {
    border-radius: 30px;
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    background: var(--egm-success, #10b981);
    color: #ffffff;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

/* ✅ 2303 (dette 2297 ②, loi porteur 2198 « texte blanc ⇒ fond uni ») — l'`opacity: .55` délavait le fond ET laissait
   le texte blanc : Bonbons #178A3E ⇒ vert pâle sous du blanc, 2,15:1. L'état inactif se dit par une teinte ÉTEINTE mais
   SOUTENUE (le succès du thème à moitié mêlé d'ardoise), opaque : Bonbons 6,9:1, défaut #10b981 5,0:1. La Console n'a
   pas de jumeau (« Recommencer » = bouton-icône jamais `disabled`). */
.egm-question-player .egm-controls .egm-question-restart:disabled {
    background: color-mix(in srgb, var(--egm-success, #10b981) 50%, #374151);
    opacity: 1; /* ⛔ l'`.egm-btn:disabled { opacity: .5 }` générique (plus bas) */
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.egm-question-player .egm-controls .egm-question-restart:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}

/* Primary button (Valider) - pill style like main player */
.egm-question-player .egm-controls .egm-btn-primary {
    background: var(--egm-primary, #FB7185);
    color: #ffffff;
    border: none;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 30px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

/* ✅ 2305 (D-2303-VALIDERINACTIF) — jumeau du « Rejouer » inactif ci-dessus et de `.gc-btn--primary:disabled` (Console) :
   l'`.egm-btn:disabled { opacity: .5 }` générique laissait le blanc sur un rose délavé (défaut #FB7185 1,64:1, Bonbons
   2,16:1). Accent à moitié mêlé d'ardoise, opaque : défaut 5,3:1, Bonbons 7,5:1. */
.egm-question-player .egm-controls .egm-btn-primary:disabled {
    background: color-mix(in srgb, var(--egm-primary, #FB7185) 50%, #374151);
    opacity: 1;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.egm-question-player .egm-controls .egm-btn-primary:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}

/* Question text styling - matches main player */
.egm-question-player .egm-question-text,
.egm-question-player .egm-question-title {
    color: var(--egm-text, #7c2d12);
    font-weight: var(--egm-heading-weight, 500);
    margin: 0 0 0.75rem;
    line-height: var(--egm-line-height, 1.5);
    letter-spacing: var(--egm-letter-spacing, 0);
}

/* show_title="1" : titre affiché en tête de l'exercice fill_blank_drag
   (les autres types remplacent simplement le texte du prompt par le titre). */
.egm-question-player .egm-question-title-heading {
    font-weight: 700;
    margin: 0 0 0.5rem;
}

/* headingSize (typography) — applied to real titles ONLY, never to
   .egm-question-text (which can carry .egm-wysiwyg-content rich body).
   Mirrors Console's --gc-heading-size on .gc-question__text. */
.egm-question-player .egm-question-title,
.egm-question-player .egm-question-title-heading {
    font-size: var(--egm-heading-size, 1.875rem);
}

/* 📐 **LA DISPOSITION DES RÉPONSES — UN SEUL FOYER, ALIGNÉ SUR QPP** (218).
   🚨 Cette feuille en portait DEUX, avec deux géométries : `repeat(auto-fit, minmax(240px, 1fr))`
   à partir de 640 px ici, et `repeat(2, minmax(0, 1fr))` à partir de 540 px plus bas — la seconde
   gagnait par sa seule POSITION dans le fichier. C'est la maladie que la 217 a soignée côté QPP :
   ⛔ un même réglage d'auteur ne peut pas dépendre de la branche qui dessine.
   La forme retenue est celle de `optionsGridClass()` : **1 colonne, 2 à partir de `md` (768 px)**,
   gouttière `1.5rem` — une carte de réponse illustrée n'est pas jouable à 160 px de large. */
.egm-question-player .egm-options {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.egm-question-player .egm-options.egm-layout-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .egm-question-player .egm-options.egm-layout-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 🧸 1663/KIDTHEME (loi porteur, 2ᵉ signalement) — jeu maternelle / primaire (`data-young`) : réponses en TUILES,
   ⛔ lettre A-D. Miroir de `.gc-kid-tiles` (`kid-presets.css`, Console + Aperçu) : ≤ 4 caractères ⇒ une rangée
   (gardée sur un téléphone), sinon 2 colonnes. Texte centré, police enfant, cible ≥ 64 px. */
.egm-question-player .egm-options.egm-layout-tiles {
    display: grid;
    grid-template-columns: repeat(var(--egm-tiles-cols, 2), minmax(0, 1fr));
    gap: 0.75rem;
}
@media (max-width: 559px) {
    .egm-question-player .egm-options.egm-layout-tiles:not([data-kid-short]) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.egm-question-player .egm-options.egm-layout-tiles .egm-option-card {
    justify-content: center;
    min-height: 64px;
    padding: 14px 12px;
    text-align: center;
    font-family: 'Baloo 2', 'Fredoka', 'Comic Neue', 'Comic Sans MS', cursive;
    font-weight: 500;
    line-height: 1.2;
}
/* ⚖️ `!important` : le centrage et l'alignement de l'auteur sont posés EN LIGNE sur `.egm-option-content`
   (`computeMatchingItemStyles`) — même geste que la touche `bigOptions` de la Console. */
.egm-question-player .egm-options.egm-layout-tiles .egm-option-content,
.egm-question-player .egm-options.egm-layout-tiles .egm-option-text {
    flex: 1 1 auto;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}
/* 1681 — plus de pastille sur un jeu jeune (porteur 10-18 : « les cadres suffisent ») ⇒ le chiffre reste centré. */
.egm-question-player .egm-options.egm-layout-tiles[data-kid-short] .egm-option-card {
    font-size: 1.6em;
    padding: 14px 4px;
}
@media (max-width: 559px) {
    .egm-question-player .egm-options.egm-layout-tiles[data-kid-short] {
        gap: 0.5rem;
    }
    .egm-question-player .egm-options.egm-layout-tiles[data-kid-short] .egm-option-card {
        font-size: 1.35em;
    }
}
/* ===================================================================
   🧸 1702/KIDTHEME6 (QP, D-1694-QPMARK) — LA FORME DES JEUX D'ENFANTS SUR LE 3ᵉ LECTEUR
   Miroir de `kid-presets.css` (Console + Aperçu) pour `[egm_question]` : le joueur lit la forme servie
   (`data-kid-look`, `resolve_kid_look` = `resolveKidLook`) et pose `egm-kid-shape-<forme> egm-kid-size-<taille>` sur
   la grille de tuiles, `egm-kid-stem--<cadre>` sur la consigne, l'énoncé enfant (`egm-kid-stemvis`) au-dessus des
   réponses. La teinte d'une carte = celle de son cadre (`--egm-frame-badge`), puis celle de son verdict (219).
   ⛔ Aucun texte ici (i18n) ; ⛔ aucun son (loi 869). ⛔ En changer un sans l'autre (Console ⇄ ici).
   =================================================================== */
.egm-question-player .egm-options.egm-layout-tiles .egm-option {
    --egm-kid-tone: var(--egm-frame-verdict-badge, var(--egm-frame-badge, var(--egm-frame-ink, var(--egm-primary))));
}
/* ⭐ 1694 (porteur : « les pastilles ne doivent plus couvrir en partie le texte ») — le repère est DANS LE FLUX de la
   carte, ⛔ `absolute` : tuile courte ⇒ au-dessus du chiffre (colonne), carte longue ⇒ à gauche du texte (ligne).
   L'ancien `.egm-option-marker` (coin, `absolute`) n'est plus émis depuis 1681 : retiré. */
.egm-question-player .egm-kid-marker {
    display: inline-block;
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--egm-kid-tone, var(--egm-frame-badge, var(--egm-primary)));
    box-shadow: 0 0 0 2px #ffffff;
    pointer-events: none;
}
.egm-question-player .egm-kid-shapemark {
    flex: none;
    width: 20px;
    height: 20px;
    pointer-events: none;
}
.egm-question-player .egm-kid-shapemark path {
    fill: var(--egm-kid-tone, var(--egm-frame-verdict-badge, var(--egm-frame-badge, var(--egm-primary))));
}
.egm-question-player .egm-layout-tiles .egm-kid-shapemark { width: 16px; height: 16px; }
.egm-question-player .egm-layout-tiles[data-kid-short] .egm-kid-shapemark { width: 14px; height: 14px; }
.egm-question-player .egm-layout-tiles[data-kid-short] .egm-kid-marker { width: 10px; height: 10px; }
.egm-question-player .egm-options.egm-layout-tiles[data-kid-short]:not(.egm-kid-shape-bille):not(.egm-kid-shape-cube) .egm-option-card:has(> .egm-kid-marker, > .egm-kid-shapemark) {
    flex-direction: column;
    /* 12 px : la boîte de glyphe d'un chiffre à 1,6 em déborde sa ligne de ~8 px (mesure 1694). */
    gap: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.egm-question-player .egm-options.egm-layout-tiles:not([data-kid-short]) .egm-option-card:has(> .egm-kid-marker, > .egm-kid-shapemark) {
    flex-direction: row;
    gap: 12px;
}
/* 🚨 1702 (vu SUR CAPTURE, Carnet 358 px) — « poisso / n », « balein / e » : `word-break: break-word` du contrat Quill
   (`.egm-wysiwyg-content`) laisse le texte d'une tuile rétrécir SOUS la largeur d'un mot. Un lecteur débutant lit des
   mots ENTIERS (1681) ⇒ dans une tuile, un mot ne se coupe qu'en dernier recours (un mot plus large que la tuile). */
.egm-question-player .egm-options.egm-layout-tiles .egm-option-text {
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: manual;
    /* 🚨 2259 (D-2252-TUILEMOT, 390 px) — « «&nbsp;anéantissement&nbsp;» » (insécables, 135 px) sortait d'une tuile de
       98 px : centré en colonne, le texte prend sa largeur min-content, que `break-word` ne réduit pas. Borné à la tuile,
       le mot trop large s'y coupe (dernier recours, 1702) ; ⛔ `anywhere`, qui rabaisserait le min-content partout. */
    max-width: 100%;
}
/* ✅ 2261 (D-2259-MOTENTIER, porteur 10-23 : ⛔ couper le mot) — un mot plus large que sa colonne ⇒ UNE colonne
   (`egm-tiles-one`, posée par `fitYoungTileWords` au rendu et au redimensionnement) ; la coupe ci-dessus ne reste
   que si même une colonne ne tient pas le mot. `egm-tiles-measure` (le temps d'une mesure) rend le mot entier.
   Miroir : `.gc-kid-tiles--one` (`kid-presets.css`). */
.egm-question-player .egm-options.egm-layout-tiles.egm-tiles-one:not([data-kid-short]) {
    grid-template-columns: minmax(0, 1fr);
}
/* ✅ 2275 (D-2261-MOTXL390, porteur 10-24 option B) — même UNE colonne ne tient pas le mot ⇒ police des tuiles réduite
   au mot le plus long, la même pour toutes, plancher 16 px (`--egm-kid-word-fs`, posée par `fitYoungTileWords`).
   Miroir : `[data-kid-wordfit]` (`kid-presets.css`). */
.egm-question-player .egm-options.egm-layout-tiles.egm-tiles-wordfit:not([data-kid-short]) .egm-option-card.egm-option-card :is(span, p, div) {
    font-size: var(--egm-kid-word-fs) !important;
}
/* ✅ 2303 (dette 2297 ③) — 2 colonnes et un nombre IMPAIR de réponses (3 billes) : la dernière, seule sur sa rangée,
   se CENTRE : elle reste dans sa colonne (les mesures de `fitYoungTileWords` ne bougent pas) et GLISSE d'une
   demi-colonne + un demi-écart (`translate`, ⛔ `transform` des états). L'écart : 0.75rem (tuiles), 1.5rem avec un
   cadre (181, `--egm-tiles-gap`). Les 2 colonnes = tuiles ni courtes (rangée), ni phrases, ni mot trop large (une
   colonne). Miroir : `.gc-kid-tiles` (`kid-presets.css`, loi 2117). */
.egm-question-player .egm-options.egm-layout-tiles:not([data-kid-short]):not([data-kid-phrase]):not(.egm-tiles-one) > :last-child:nth-child(odd) {
    translate: calc(50% + var(--egm-tiles-gap, 0.75rem) / 2) 0;
}
.egm-question-player .egm-options.egm-layout-tiles.egm-tiles-measure .egm-option-text,
.egm-question-player .egm-options.egm-layout-tiles.egm-tiles-measure .egm-option-text * {
    overflow-wrap: normal !important;
    word-break: normal !important;
}
/* …et au téléphone, la carte longue À REPÈRE rend la largeur au texte : repère AU-DESSUS (comme la tuile courte), marges
   latérales réduites — à 358 px, repère 16 + écart 12 + marges 32 ne laissaient que ~60 px (« baleine » n'y tient pas). */
@media (max-width: 480px) {
    .egm-question-player .egm-options.egm-layout-tiles:not([data-kid-short]) .egm-option-card:has(> .egm-kid-marker, > .egm-kid-shapemark) {
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        padding-left: 8px;
        padding-right: 8px;
    }
}
/* ✅ 2266 (D-2261-PHRASEJUMEAU) — une réponse-PHRASE (`youngChoiceTiles().phrase`, ≥ 3 mots, ⛔ dessin) se LIT :
   une colonne à toutes les largeurs, tuile BASSE, police de CORPS ~19 px (⛔ police d'affichage, ⛔ taille XL), coins
   arrondis. La taille est posée EN LIGNE sur le texte (`computeMatchingItemStyles`) ⇒ `!important`.
   Miroir de `.gc-kid-tiles[data-kid-phrase]` (2183, `kid-presets.css`). ⛔ en changer un sans l'autre. */
.egm-question-player .egm-options.egm-layout-tiles[data-kid-phrase] {
    grid-template-columns: minmax(0, 1fr);
}
.egm-question-player .egm-options.egm-layout-tiles[data-kid-phrase] .egm-option-card.egm-option-card {
    min-height: 52px;
    padding: 10px 16px !important;
    border-radius: 18px !important;
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    line-height: 1.3;
}
.egm-question-player .egm-options.egm-layout-tiles[data-kid-phrase] .egm-option-card.egm-option-card :is(span, p, div) {
    font-size: 19px !important;
    line-height: 1.3 !important;
}
@media (max-width: 480px) {
    .egm-question-player .egm-options.egm-layout-tiles[data-kid-phrase] .egm-option-card.egm-option-card :is(span, p, div) {
        font-size: 18px !important;
    }
}
/* ✅ 2444 (D-2428-GRILLEMIROIR, loi 2356) — la question d'un jeu en GRILLE (`data-layout="grid"` ⇒ `data-kid-grid`,
   `choiceOptionsWrap`) : ses phrases passent en 2 colonnes au-dessus de 640 px, la dernière d'un nombre impair
   centrée ; une seule colonne au téléphone et en liste. Miroir de `.gc-kid-tiles[data-kid-phrase][data-kid-grid]`
   (`kid-presets.css`). ⛔ en changer un sans l'autre. */
@media (min-width: 640px) {
    .egm-question-player .egm-options.egm-layout-tiles[data-kid-phrase][data-kid-grid] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .egm-question-player .egm-options.egm-layout-tiles[data-kid-phrase][data-kid-grid] > :last-child:nth-child(odd) {
        translate: calc(50% + var(--egm-tiles-gap, 0.75rem) / 2) 0;
    }
}
/* ✅ 2485 (D-2481-MIROIRSC, loi 2356) — mêmes phrases en grille, toutes COURTES (`data-choice-short`, ≤ 16 car.,
   « 11 reste 15 ») : 2 colonnes AUSSI au téléphone. Miroir de `[data-kid-grid][data-choice-short]` (2481,
   `kid-presets.css`). ⛔ en changer un sans l'autre. */
@media (max-width: 639.98px) {
    .egm-question-player .egm-options.egm-layout-tiles[data-kid-phrase][data-kid-grid][data-choice-short] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .egm-question-player .egm-options.egm-layout-tiles[data-kid-phrase][data-kid-grid][data-choice-short] > :last-child:nth-child(odd) {
        translate: calc(50% + var(--egm-tiles-gap, 0.75rem) / 2) 0;
    }
}

/* — Tailles (M · L · XL) : la cible tactile grandit, le texte avec. — */
.egm-question-player .egm-options.egm-kid-size-m .egm-option-card { min-height: 56px; }
.egm-question-player .egm-options.egm-kid-size-l .egm-option-card { min-height: 64px; }
.egm-question-player .egm-options.egm-kid-size-xl .egm-option-card { min-height: 80px; font-size: 1.15em; }
.egm-question-player .egm-options.egm-kid-size-xl[data-kid-short] .egm-option-card { font-size: 1.6em; }

/* — Formes pleines (bille · cube) : la carte EST la couleur ; ni trait intérieur, ni pastille (la forme la porte). — */
.egm-question-player .egm-options.egm-kid-shape-bille .egm-option .egm-option-card.egm-option-card,
.egm-question-player .egm-options.egm-kid-shape-cube .egm-option .egm-option-card.egm-option-card {
    border: 0 !important;
    filter: none !important;
    color: #ffffff;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .22);
    font-weight: 700;
    padding-top: 12px;
    padding-bottom: 12px;
}
.egm-question-player .egm-options.egm-kid-shape-bille .egm-option-card::before,
.egm-question-player .egm-options.egm-kid-shape-cube .egm-option-card::before,
.egm-question-player .egm-options.egm-kid-shape-bille .egm-kid-marker,
.egm-question-player .egm-options.egm-kid-shape-cube .egm-kid-marker {
    display: none;
}
.egm-question-player .egm-options.egm-kid-shape-bille .egm-option-card :is(.egm-option-text, .egm-option-content, p, span),
.egm-question-player .egm-options.egm-kid-shape-cube .egm-option-card :is(.egm-option-text, .egm-option-content, p, span) {
    color: #ffffff !important;
}
.egm-question-player .egm-options.egm-kid-shape-bille .egm-kid-shapemark path,
.egm-question-player .egm-options.egm-kid-shape-cube .egm-kid-shapemark path {
    fill: #ffffff;
}
/* bille — Bonbons : ronde sur la rangée courte. ⭐ 2203 (loi porteur 10-23) — face en APLAT, ⛔ reflet clair sous le
   texte blanc ; relief par la tranche et le socle (jumeau de `kid-presets.css`). */
.egm-question-player .egm-options.egm-kid-shape-bille .egm-option .egm-option-card.egm-option-card {
    background: var(--egm-kid-tone) !important;
    border-radius: 999px !important;
    box-shadow: inset 0 -4px 0 color-mix(in srgb, var(--egm-kid-tone) 82%, #000000), 0 6px 0 color-mix(in srgb, var(--egm-kid-tone) 70%, #000000) !important;
}
/* ✅ 2269 — une PHRASE en bille garde ses coins de 18 px (2183, ⛔ pilule haute de 3-4 lignes) : la règle ci-dessus
   pèse autant que `[data-kid-phrase]` et la suit ⇒ elle gagnait ici, ⛔ dans la Console (`kid-presets.css` : 0,4,0 > 0,3,0). */
.egm-question-player .egm-options.egm-kid-shape-bille[data-kid-phrase] .egm-option .egm-option-card.egm-option-card {
    border-radius: 18px !important;
}
.egm-question-player .egm-options.egm-kid-shape-bille[data-kid-short] .egm-option .egm-option-card.egm-option-card {
    aspect-ratio: 1;
    border-radius: 50% !important;
    min-height: 0;
}
/* cube — Ardoise craie : face en APLAT (⭐ 1694, contraste du chiffre blanc), socle sombre, ⛔ plateau (⭐ 1702). */
.egm-question-player .egm-options.egm-kid-shape-cube .egm-option .egm-option-card.egm-option-card {
    background: var(--egm-kid-tone) !important;
    border-radius: 12px !important;
    box-shadow: 0 5px 0 color-mix(in srgb, var(--egm-kid-tone) 65%, #000000) !important;
}
.egm-question-player .egm-options.egm-kid-shape-cube[data-kid-short] .egm-option .egm-option-card.egm-option-card {
    aspect-ratio: 1;
    min-height: 0;
}
/* Rangée courte : la forme se centre dans sa colonne, plafonnée par taille (sans plafond, un cube de 190 px). */
.egm-question-player .egm-options.egm-kid-shape-bille[data-kid-short],
.egm-question-player .egm-options.egm-kid-shape-cube[data-kid-short] {
    justify-items: center;
}
.egm-question-player .egm-options.egm-kid-shape-bille[data-kid-short] .egm-option,
.egm-question-player .egm-options.egm-kid-shape-cube[data-kid-short] .egm-option {
    width: 100%;
}
.egm-question-player .egm-options.egm-kid-size-m:is(.egm-kid-shape-bille, .egm-kid-shape-cube)[data-kid-short] .egm-option { max-width: 72px; }
.egm-question-player .egm-options.egm-kid-size-l.egm-kid-shape-bille[data-kid-short] .egm-option { max-width: 88px; }
.egm-question-player .egm-options.egm-kid-size-l.egm-kid-shape-cube[data-kid-short] .egm-option { max-width: 92px; }
.egm-question-player .egm-options.egm-kid-size-xl.egm-kid-shape-bille[data-kid-short] .egm-option { max-width: 104px; }
.egm-question-player .egm-options.egm-kid-size-xl.egm-kid-shape-cube[data-kid-short] .egm-option { max-width: 110px; }
/* ✅ 2214 (D-2203-BILLE10) — jumeau de `kid-presets.css` : la bille est son conteneur, 70cqi à 2 caractères, 48cqi à 3,
   ⛔ au-dessus de la taille d'avant ; un chiffre seul ne bouge pas. */
.egm-question-player .egm-options.egm-kid-shape-bille[data-kid-short]:is([data-kid-chars="2"], [data-kid-chars="3"]) .egm-option .egm-option-card.egm-option-card {
    container-type: inline-size;
    padding-inline: 4px !important;
}
.egm-question-player .egm-options.egm-kid-shape-bille[data-kid-short][data-kid-chars="2"] .egm-option-card > * { font-size: min(100%, 70cqi); }
.egm-question-player .egm-options.egm-kid-shape-bille[data-kid-short][data-kid-chars="3"] .egm-option-card > * { font-size: min(100%, 48cqi); }
/* Choisie (avant validation) puis juste : un anneau ; blanc sur la bille, encre bois sur le cube (page claire, 1702). */
/* 1809 (porteur) : sur la bille, l'anneau blanc se perdait sur la page claire ⇒ la bille CHOISIE devient un bouton blanc,
   relief et socle gris, texte noir ; l'anneau reste pour la juste. */
.egm-question-player .egm-options.egm-kid-shape-bille .egm-option.egm-selected:not(.egm-disabled) .egm-option-card.egm-option-card {
    background: #ffffff !important; /* 2203 — aplat */
    box-shadow: 0 6px 0 #9aa0aa, 0 0 0 2px #c9cdd4 inset, 0 -4px 0 #e4e6eb inset !important;
    color: #111111;
    text-shadow: none;
}
.egm-question-player .egm-options.egm-kid-shape-bille .egm-option.egm-selected:not(.egm-disabled) .egm-option-card :is(.egm-option-text, .egm-option-content, p, span) {
    color: #111111 !important;
}
.egm-question-player .egm-options.egm-kid-shape-bille .egm-option.egm-selected:not(.egm-disabled) .egm-kid-shapemark path {
    fill: #111111;
}
.egm-question-player .egm-options.egm-kid-shape-bille .egm-option.egm-verdict-correct .egm-option-card {
    outline: 4px solid #ffffff;
    outline-offset: 2px;
}
.egm-question-player .egm-options.egm-kid-shape-cube .egm-option:is(.egm-selected:not(.egm-disabled), .egm-verdict-correct) .egm-option-card {
    outline: 4px solid #3b2614;
    outline-offset: 2px;
}
.egm-question-player .egm-options:is(.egm-kid-shape-bille, .egm-kid-shape-cube) .egm-option.egm-verdict-incorrect .egm-option-card {
    opacity: .55;
}
/* etiquette — Carnet : étiquette blanche, trait d'encre, ombre décalée qui s'écrase au toucher. */
.egm-question-player .egm-options.egm-kid-shape-etiquette .egm-option .egm-option-card.egm-option-card {
    background: #ffffff !important;
    border: 2px solid var(--egm-text, #1f2a44) !important;
    border-radius: 12px !important;
    box-shadow: 3px 3px 0 var(--egm-text, #1f2a44) !important;
    filter: none !important;
    justify-content: flex-start;
    gap: 12px;
}
.egm-question-player .egm-options.egm-kid-shape-etiquette[data-kid-short] .egm-option-card { justify-content: center; }
.egm-question-player .egm-options.egm-kid-shape-etiquette .egm-option-card::before { display: none; }
.egm-question-player .egm-options.egm-kid-shape-etiquette .egm-option.egm-selected:not(.egm-disabled) .egm-option-card.egm-option-card {
    transform: translate(3px, 3px);
    box-shadow: 0 0 0 var(--egm-text, #1f2a44) !important;
    border-color: var(--egm-kid-tone) !important;
}
.egm-question-player .egm-options.egm-kid-shape-etiquette .egm-option:is(.egm-verdict-correct, .egm-verdict-incorrect) .egm-option-card.egm-option-card {
    background: color-mix(in srgb, var(--egm-kid-tone) 12%, #ffffff) !important;
    border-color: var(--egm-kid-tone) !important;
    box-shadow: 3px 3px 0 var(--egm-kid-tone) !important;
}
@media (prefers-reduced-motion: reduce) {
    .egm-question-player .egm-options.egm-kid-shape-etiquette .egm-option.egm-selected .egm-option-card.egm-option-card { transform: none; }
}
.egm-question-player.egm-high-contrast .egm-options:is(.egm-kid-shape-bille, .egm-kid-shape-cube) .egm-option-card {
    outline: 2px solid currentColor;
}

/* — Le cadre de l'énoncé (`stemFrame`), posé sur `.egm-question-prompt`. — */
.egm-question-player .egm-question-prompt.egm-kid-stem {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    align-items: center;
}
.egm-question-player .egm-kid-stem--carte,
.egm-question-player .egm-kid-stem--ardoise {
    justify-content: center;
}
.egm-question-player :is(.egm-kid-stem--carte, .egm-kid-stem--ardoise) .egm-question-text {
    flex: 1 1 auto;
    text-align: center;
}
/* carte — Bonbons : carte blanche très arrondie, socle rose. */
.egm-question-player .egm-kid-stem--carte {
    padding: 18px 14px;
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 8px 0 color-mix(in srgb, var(--egm-primary) 25%, #ffffff);
}
/* ardoise — Ardoise craie : tableau vert, cadre de bois, écriture craie. */
.egm-question-player .egm-kid-stem--ardoise {
    padding: 16px 14px 18px;
    border: 12px solid #a4682e;
    border-radius: 16px;
    background: #2f5d46 radial-gradient(ellipse at 30% 20%, #3b7257, transparent 70%);
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .2), 0 6px 0 #7a4a1e;
    color: #f4f1e6;
}
.egm-question-player .egm-kid-stem--ardoise .egm-question-text,
.egm-question-player .egm-kid-stem--ardoise .egm-question-text * {
    color: #f4f1e6 !important;
}
.egm-question-player .egm-kid-stem--ardoise .egm-question-text {
    font-family: var(--egm-font-title, 'Fredoka', 'Nunito', sans-serif);
    letter-spacing: .02em;
}
@media (max-width: 400px) {
    .egm-question-player .egm-kid-stem--ardoise { border-width: 7px; padding: 10px 6px 12px; }
    .egm-question-player .egm-kid-stem--carte { padding: 12px 8px; }
}
/* cahier — Carnet : marge rouge, écriture à la main (Patrick Hand, 1694 : lettres détachées), surligneur. */
.egm-question-player .egm-kid-stem--cahier {
    padding: 6px 4px 6px 18px;
    border-left: 2px solid #f4a6a6;
}
.egm-question-player .egm-kid-stem--cahier .egm-question-text {
    font-family: var(--egm-font-title, 'Patrick Hand', 'Comic Neue', cursive);
    font-weight: 400;
    font-synthesis: none;
    line-height: 1.35;
    /* 🔎 2249 (D-2244-JUMEAU, loi 2117) — même ×1,3 que la Console (2244, `kid-presets.css`). */
    font-size: 1.3em;
}
/* 📱 2252 (jumeau de 2083 + 2244 + 2249, loi 2117 : même règle que la Console, `kid-presets.css`) — téléphone ≤ 640 :
   consigne de tout cadre à 21 px, alignée à gauche (le 🔊 en ligne) ; le Carnet à 22 px, son 🔊 AU-DESSUS et la marge
   rouge à 10 px ⇒ la phrase prend toute la largeur du carnet (≤ 4 lignes, juge P8). Remplace le « 1em ≤ 480 » de 2249.
   `!important` : la taille vient aussi du `<p>` WYSIWYG et du ×1,3 ci-dessus.
   ⚖️ 2303 (porteur A) : la Console multiplie ces 21/22 px par l'écart du JOUEUR à l'échelle de l'auteur ; le shortcode
   n'a pas de réglage joueur (son échelle = celle de l'auteur) ⇒ ici, rien à multiplier, 21/22 px restent justes. */
@media (max-width: 640px) {
    .egm-question-player .egm-question-prompt.egm-kid-stem {
        justify-content: flex-start;
    }
    .egm-question-player .egm-kid-stem :is(.egm-question-text, .egm-question-text :is(p, li)) {
        font-size: 21px !important;
        line-height: 1.35 !important;
        text-align: left !important;
    }
    .egm-question-player .egm-kid-stem .egm-question-text {
        flex: 1 1 auto;
        min-width: 0;
    }
    .egm-question-player .egm-kid-stem--cahier :is(.egm-question-text, .egm-question-text :is(p, li)) {
        font-size: 22px !important;
    }
    .egm-question-player .egm-question-prompt.egm-kid-stem--cahier {
        padding-left: 10px;
    }
    /* ✅ 2275 (D-2269-HPGAUCHE, porteur 10-24 option A) — carte et ardoise suivent le carnet : 🔊 AU-DESSUS ≤ 640
       (à 390, à côté, il laissait ~220 px et 8 lignes à la consigne). Jumeau : `kid-presets.css` (loi 2117). */
    .egm-question-player .egm-question-prompt.egm-kid-stem:is(.egm-kid-stem--cahier, .egm-kid-stem--carte, .egm-kid-stem--ardoise) {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .egm-question-player .egm-kid-stem:is(.egm-kid-stem--cahier, .egm-kid-stem--carte, .egm-kid-stem--ardoise) .egm-question-text {
        width: 100%;
    }
    /* 2259 (D-2252-CARTE390) — la carte bordée (scène) mangeait 2 × (24 marge + 24 padding) : énoncé à 244 px contre
       275 dans la Console. Plafonnés au téléphone (un thème plus serré garde le sien). */
    .egm-question-player .egm-stage {
        padding: min(var(--egm-card-padding, 20px), 18px);
        margin: min(var(--egm-container-padding, 1rem), 12px);
    }
}
.egm-question-player .egm-kid-stem--cahier .egm-question-text :is(strong, b, mark) {
    background: linear-gradient(transparent 45%, #ffe15a 45% 90%, transparent 90%);
    color: inherit;
    padding: 0 2px;
}

/* — 🧮 L'énoncé enfant au-dessus des réponses (`kid-stem.ts` par le pont) : objets à compter, « 2 + 1 = ? ». — */
.egm-question-player .egm-kid-stemvis {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
}
.egm-question-player .egm-kid-objects {
    --egm-kid-obj-w: 2.3rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 12px;
    max-width: 100%;
}
/* Un groupe se range par CINQ (5 + 2 pour 7) : la structure de la boîte de dix aide à compter. */
.egm-question-player .egm-kid-objects__group {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px;
    box-sizing: border-box;
    max-width: calc(5 * var(--egm-kid-obj-w) + 4 * 4px + 16px);
    padding: 6px 8px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--egm-primary, #7c5cff) 10%, #ffffff);
}
.egm-question-player .egm-kid-objects__item {
    font-size: 2rem;
    line-height: 1.15;
    width: var(--egm-kid-obj-w);
    text-align: center;
    font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
}
.egm-question-player .egm-kid-objects__plus {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--egm-primary, #7c5cff);
}
.egm-question-player .egm-kid-equation {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: .25em;
    padding: 6px 18px;
    border-radius: 14px;
    background: #ffffff;
    border: 2px solid color-mix(in srgb, var(--egm-primary, #7c5cff) 35%, #ffffff);
    font-family: var(--egm-font-title, 'Fredoka', 'Nunito', sans-serif);
    font-size: clamp(1.6rem, 6vw, 2.4rem);
    font-weight: 700;
    line-height: 1.2;
    white-space: pre;
    color: #26213a;
}
.egm-question-player .egm-kid-equation__slot {
    display: inline-block;
    min-width: 1.4em;
    padding: 0 .2em;
    border-bottom: 4px dashed currentColor;
    text-align: center;
}
.egm-question-player .egm-kid-equation[data-fill='pending'] .egm-kid-equation__slot { opacity: .7; }
.egm-question-player .egm-kid-equation[data-fill='answer'] .egm-kid-equation__slot {
    border-bottom-style: solid;
    color: #1f8a4c;
    animation: egm-kid-slot-fill .35s ease-out;
}
@keyframes egm-kid-slot-fill {
    from { transform: scale(.6); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
/* Ardoise craie : le calcul à la craie sur un petit tableau, police MOINS GRASSE (⭐ porteur 1702), réponse en jaune. */
.egm-question-player .egm-kid-stemvis--ardoise .egm-kid-equation {
    background: #2f5d46;
    border: 8px solid #a4682e;
    color: #f4f1e6;
    font-weight: 400;
    letter-spacing: .04em;
}
.egm-question-player .egm-kid-stemvis--ardoise .egm-kid-equation[data-fill='answer'] .egm-kid-equation__slot { color: #ffe45c; }
@media (max-width: 400px) {
    .egm-question-player .egm-kid-objects { --egm-kid-obj-w: 1.9rem; }
    .egm-question-player .egm-kid-objects__item { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
    .egm-question-player .egm-kid-equation__slot { animation: none !important; }
}

/* answersLayout="horizontal" (item 4, P0) — options flow in a wrapping row,
   mirroring QPP's 'flex flex-wrap' + 'flex-1 min-w-[180px]'. */
.egm-question-player .egm-options.egm-layout-horizontal {
    flex-direction: row;
    flex-wrap: wrap;
}
.egm-question-player .egm-options.egm-layout-horizontal .egm-option {
    flex: 1 1 180px;
    width: auto;
}

/* questionPosition (item 4, P0). Attribute data-question-position on the root.
   center = centre the prompt/titles ; left = question left / answers right on
   desktop (falls back to a normal single column when there is no options list). */
.egm-question-player[data-question-position="center"] .egm-question-prompt,
.egm-question-player[data-question-position="center"] .egm-question-text,
.egm-question-player[data-question-position="center"] .egm-question-title,
.egm-question-player[data-question-position="center"] .egm-question-title-heading {
    text-align: center;
}
.egm-question-player[data-question-position="center"] .egm-question-prompt {
    justify-content: center;
}
/* center = intitulé AND options centered (parity with QPP/Console). Option
   label text is centred and a horizontal option row is centred as a block;
   full-width list/grid cards keep their width (only their content centres). */
.egm-question-player[data-question-position="center"] .egm-options,
.egm-question-player[data-question-position="center"] .egm-option-text {
    text-align: center;
}
.egm-question-player[data-question-position="center"] .egm-options.egm-layout-horizontal {
    justify-content: center;
}
@media (min-width: 900px) {
    /* Only split when there is a real options list (choice types). Other types
       keep the normal single-column flow (identical to "top"). */
    .egm-question-player[data-question-position="left"] .egm-question-body:has(> .egm-question-options) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 1.5rem;
        align-items: start;
    }
    .egm-question-player[data-question-position="left"] .egm-question-body:has(> .egm-question-options) > * {
        grid-column: 1 / -1;
    }
    .egm-question-player[data-question-position="left"] .egm-question-body:has(> .egm-question-options) > .egm-question-prompt {
        grid-column: 1;
    }
    .egm-question-player[data-question-position="left"] .egm-question-body:has(> .egm-question-options) > .egm-question-options {
        grid-column: 2;
    }
}

/* 🔤 **LA PASTILLE EST DANS LA CARTE** (218) — c'est ainsi que la rendent les 2 lecteurs React
   (`ChoiceRenderer`, premier enfant du bouton). Elle vivait ici À CÔTÉ de la carte : la rangée
   était donc plus large que la carte, la lettre flottait dans le vide à gauche, et une grille à
   deux colonnes désalignait les deux cartes. ⛔ Ne pas la ressortir : la carte est l'unique enfant
   de la rangée, et c'est ce qui rend les deux écrans superposables. */
.egm-question-player .egm-option {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: var(--egm-transition);
    text-align: left;
    /* ✅ 2297 (D-2287-BILLEXLBASE) — jumeau de `.gc-choice-card` (Console, 1365) : le texte du JEU (`1em`, base + 1pt
       à l'échelle), plancher 12pt à l'échelle. `1rem` figeait la réponse à 16 px, base et échelle ignorées. */
    font-size: max(calc(12pt * var(--egm-text-scale, 1)), 1em);
}

/* Prevent universal player option states from styling the whole row.
   In the shortcode player, only `.egm-option-card` should be highlighted. */
.egm-question-player .egm-option:hover:not(.egm-disabled),
.egm-question-player .egm-option.egm-selected,
.egm-question-player .egm-option.egm-correct,
.egm-question-player .egm-option.egm-incorrect {
    background: transparent;
    border-color: transparent;
}

.egm-question-player .egm-option:focus {
    outline: none;
}

/* Géométrie alignée sur QPP (`p-4 flex items-center gap-3`) : 1rem de retrait, 0,75rem d'écart. */
.egm-question-player .egm-option-card {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 1rem;
    background: var(--egm-bg-secondary);
    border: 2px solid var(--egm-border);
    border-radius: var(--egm-border-radius-sm);
    transition: var(--egm-transition);
}

.egm-question-player .egm-option:hover:not(.egm-disabled) .egm-option-card,
.egm-question-player .egm-choice-option:hover:not(.egm-disabled) {
    background: var(--egm-bg-tertiary);
    border-color: var(--egm-primary);
}

.egm-question-player .egm-option:focus-within .egm-option-card,
.egm-question-player .egm-choice-option:focus-within {
    outline: 2px solid var(--egm-primary);
    outline-offset: 2px;
}

.egm-question-player .egm-option.egm-selected .egm-option-card {
    background: rgba(124, 58, 237, 0.1);
    border-color: var(--egm-primary);
}

.egm-question-player .egm-option.egm-correct .egm-option-card {
    background: rgba(16, 185, 129, 0.1);
    border-color: var(--egm-success);
}

.egm-question-player .egm-option.egm-incorrect .egm-option-card {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--egm-error);
}

.egm-question-player .egm-option.egm-eliminated {
    opacity: 0.4;
    text-decoration: line-through;
}

.egm-question-player .egm-option.egm-disabled {
    cursor: not-allowed;
}

.egm-question-player .egm-option-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--egm-primary);
    color: #ffffff;
    border-radius: 50%;
    font-weight: 600;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.egm-question-player .egm-option.egm-correct .egm-option-letter {
    background: var(--egm-success);
}

.egm-question-player .egm-option.egm-incorrect .egm-option-letter {
    background: var(--egm-error);
}

.egm-question-player .egm-option-text {
    flex: 1;
    color: var(--egm-text);
}

/* 🖼️ LA BOÎTE IMAGE D'UNE RÉPONSE EST À NOUS — et il fallait l'écrire pour la garder.
   `question-player.js` pose un `<span class="egm-option-image">` qui doit se SERRER autour de
   l'image ; l'autorité partagée écrit le reste EN LIGNE (`flex`, `max-width`, `padding`).
   ⚠️ La MÊME classe désigne, dans l'éditeur admin, l'`<img>` lui-même — et ce CSS-là voyage
   jusqu'ici : `frontend-player.css` (le bundle de QPP) l'embarque en sélecteur NU, et il est
   servi dès qu'un `[egm_game]` partage la page. Sans règle à nous, c'est lui qui gouvernait :
   `width: 100%` étalait la boîte sur toute la carte (image collée à GAUCHE au lieu d'être
   centrée) et `max-height: 100px` la rabotait sous une image de 128 px, qui recouvrait alors
   le libellé. ⛔ Ne pas retirer : une page héberge les voisins qu'elle veut, donc ce lecteur
   doit posséder CHAQUE classe qu'il écrit. */
.egm-question-player .egm-option-image {
    display: block;
    width: auto;
    height: auto;
    max-height: none;
}

/* Même raison : le conteneur d'une réponse ne tient son `flex` que de nous. Tout le reste
   (direction, alignement, gouttière) arrive EN LIGNE, décidé par l'autorité partagée. */
.egm-question-player .egm-option-content {
    flex: 1 1 auto;
}

/* Hide native inputs but keep them accessible */
.egm-question-player .egm-option-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
}

/* Text input styling */
.egm-question-player .egm-text-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--egm-border);
    border-radius: var(--egm-border-radius-sm);
    font-size: 1rem;
    background: var(--egm-bg-secondary);
    color: var(--egm-text);
    transition: var(--egm-transition);
}

.egm-question-player .egm-text-input:focus {
    outline: none;
    border-color: var(--egm-primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
}

/* Fill-blank dropdowns - style like main player */
.egm-question-player .egm-fill-blank-slot {
    display: inline-flex;
    align-items: center;
    margin: 0.25rem 0.25rem;
}
/* ✍️ 2769 — validée, la liste s'efface et son mot devient du texte de la ligne, en bleu (loi 2759). */
.egm-question-player .egm-fill-blank-slot--merged { display: none; }
.egm-question-player .egm-fill-blank-filled {
    display: inline;
    margin: 0;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--egm-fb-filled-ink, #1d4ed8);
}
/* ❌ 2780 — faux ⇒ trait rouge translucide par-dessus ; vide ⇒ encre de la carte (jumeau de console.css). */
.egm-question-player .egm-fill-blank-filled[data-verdict="incorrect"] {
    text-decoration-line: line-through;
    text-decoration-color: var(--egm-fb-wrong-strike, rgba(220, 38, 38, 0.6));
    text-decoration-thickness: 0.14em;
    text-decoration-skip-ink: none;
}
.egm-question-player .egm-fill-blank-filled[data-verdict="empty"] {
    color: inherit;
    font-weight: inherit;
}

.egm-question-player .egm-fill-blank-select {
    display: inline-block;
    /* 📏 200quinquies — `em` et non `rem` : la respiration du trou suit « Apparence >
       Typographie > Taille de base (px) », que le conteneur pose en `font-size` juste au-dessus.
       En `rem` elle ne lisait que la racine du site, donc le reglage du jeu restait sans effet.
       ⛔ Ne pas revenir au `rem`.

       📏 200sexies — LE TROU FAIT LA TAILLE DU PLUS LONG MOT DE LA BANQUE : la largeur est posee
       EN LIGNE par le player (l'autorite la mesure sur la banque), ⛔ plus de plancher ici — il
       aurait gagne sur elle. Le porteur a chiffre 5px de padding de chaque cote du MOT ; le
       chevron n'est pas le mot, il a sa propre gouttiere (`FILL_BLANK_SLOT_CARET_EM` = 1.2em
       dans `fill-blank-config.ts`, miroitee dans les 3 feuilles). */
    padding: 0.5em calc(5px + 1.2em) 0.5em 5px;
    margin: 0;
    border: 2px solid var(--egm-border);
    border-radius: var(--egm-border-radius-sm);
    /* 🕳️ 214 — LE FOND DU TROU EST BLANC, dans les DEUX registres (demande porteur). La valeur est
       posee par l'autorite (`fillBlankSlotVars`), ⛔ pas par cette feuille : le repli ci-dessous ne
       sert qu'au cas ou le pont JS serait absent. Idem pour l'encre : elle est MESUREE sur ce
       blanc, sinon un theme sombre y ecrirait clair. */
    background: var(--egm-fb-slot-fill, #ffffff);
    /* 🪤 APRES le raccourci `background` : pose avant, il l'aurait remis a `none` en silence. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.3em center;
    background-size: 0.7em 0.45em;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    font-size: inherit;
    color: var(--egm-fb-slot-text, var(--egm-text));
    cursor: pointer;
}

/* ➖ 214 — LE FILET ENTRE DEUX MOTS PROPOSES. Discret : un cheveu, ⛔ pas un trait de separation
   de sections. Un navigateur qui ne rend pas `<hr>` dans un `<select>` retrouve la liste d'avant. */
.egm-question-player .egm-fill-blank-select .egm-fb-option-sep {
    border: none;
    border-top: 1px solid rgba(15, 23, 42, 0.12);
    margin: 2px 0;
}

.egm-question-player .egm-fill-blank-select:focus {
    outline: none;
    border-color: var(--egm-primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
}

/* =============================================================================
   200 — LE TEXTE A TROUS LUDIQUE : cadre soft, contour interieur en pointilles,
   ombre portee sobre, creme derive du theme.

   ⚖️ La classe `egm-fb-skinned` n'est posee par le player QUE si le registre de
   dessin du theme est LUDIQUE (⛔ pas `modern · neutral · transparent · classic ·
   dark`). Sans elle, aucune de ces regles ne s'applique et l'ecran reste celui
   d'avant, a l'identique. ⛔ Aucune valeur du dessin n'est ecrite ici : elles
   arrivent toutes par `fillBlankSkinVars()`, l'autorite partagee des 3 lecteurs.
   ============================================================================= */
.egm-question-player .egm-fb-skinned .egm-fill-blank-exercise {
    position: relative;
    background: var(--egm-fb-card-fill);
    border-radius: var(--egm-fb-card-radius);
    box-shadow: var(--egm-fb-card-shadow);
    padding: 1rem 1.25rem;
    line-height: 1.9;
}

/* Le contour interieur vit sur un pseudo-element : une `border` sur la carte
   decalerait la phrase d'un pixel et doublerait le trait (meme geste qu'en 181). */
.egm-question-player .egm-fb-skinned .egm-fill-blank-exercise::before {
    content: '';
    position: absolute;
    top: var(--egm-fb-ring-inset);
    right: var(--egm-fb-ring-inset);
    bottom: var(--egm-fb-ring-inset);
    left: var(--egm-fb-ring-inset);
    border: var(--egm-fb-ring-border);
    border-radius: var(--egm-fb-ring-radius);
    opacity: var(--egm-fb-ring-opacity);
    pointer-events: none;
}

/* =============================================================================
   246 — LA STRUCTURE D'UN EXERCICE A TROUS : LISTES ET TABLEAUX
   EGM-FB-STRUCTURE
   -----------------------------------------------------------------------------
   ⭐ 3e copie DELIBEREE de ce bloc. Les deux autres vivent dans
   `EGM/apps/egmtheme-game-console/src/styles/console.css` (Console) et
   `EGM/apps/admin-game-builder/src/styles/frontend-player.css` (Apercu). Le socle
   partage `packages/stylekit/src/styles/quill-content.css` INTERDIT d'y mettre une
   valeur de design : il ne porte que ce que le MARKUP impose. Toute evolution se
   rejoue dans les 3 : `grep -rn "EGM-FB-STRUCTURE"`.

   ✅ **247 — CE LECTEUR A DESORMAIS LES 5 TEINTES HUD DU THEME.** La 246 avait
   DECLARE le trou : la projection PHP ne rendait que 13 jetons, et les pastilles
   prenaient l'ACCENT du theme — une couleur au lieu de cinq. La voie nommee alors
   est celle qui a ete prise : `PHP_PROJECTION`
   (`EGM/contracts/theme-presets/generate.mjs`) porte maintenant `hud1`..`hud5`,
   `tileInk`, `radiusPill` et `primarySoft` — **21 jetons** —, et
   `EGMG_Style_Generator::generate_css_variables()` les ecrit sous les MEMES noms
   que `fillBlankStructureVars()` cote React (`--egm-fb-num-1..5`,
   `--egm-fb-num-ink`, `--egm-fb-num-radius`, `--egm-fb-head-bg`) : trois
   ecrivains, UN vocabulaire. ⛔ Toujours aucune palette inventee ici — le repli
   d'un jeton absent reste l'accent du theme.

   🪤 Quill rend TOUTES ses listes en `<ol>` (la puce vit sur `li[data-list]`) : la
   pastille ne vise que `li:not([data-list])`.
   ============================================================================= */
/* ⭐ Le blanc AVANT et APRES une liste est retire (demande porteur, 246) : dans un texte a trous,
   la liste EST l'exercice. Les deux axes verticaux sont mis a zero NOMMEMENT. */
.egm-question-player .egm-fill-blank-exercise ol {
    counter-reset: egm-fb-line;
    list-style: none;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
}
.egm-question-player .egm-fill-blank-exercise ul {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 1.5em;
}
.egm-question-player .egm-fill-blank-exercise > :last-child {
    margin-bottom: 0;
}
.egm-question-player .egm-fill-blank-exercise ol > li[data-list] {
    margin-left: 1.6em;
}
.egm-question-player .egm-fill-blank-exercise ul > li::marker {
    color: var(--egm-fb-accent, var(--egm-primary, currentColor));
}

/* 📏 246 — intervalle SERRE entre deux lignes (demande porteur) ; `min-height` reste la hauteur
   de la pastille (la retirer ferait deborder le numero sur la ligne suivante). */
.egm-question-player .egm-fill-blank-exercise ol > li:not([data-list]) {
    counter-increment: egm-fb-line;
    list-style: none;
    position: relative;
    padding-left: 2.9em;
    margin: 0 0 0.3em;
    min-height: 2em;
    line-height: 1.5;
}
.egm-question-player .egm-fill-blank-exercise ol > li:not([data-list]):last-child {
    margin-bottom: 0;
}
.egm-question-player .egm-fill-blank-exercise ol > li:not([data-list])::before {
    content: counter(egm-fb-line);
    position: absolute;
    left: 0;
    top: 0.05em;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2em;
    height: 2em;
    padding: 0 0.45em;
    border-radius: var(--egm-fb-num-radius, 999px);
    background: var(--egm-fb-num, var(--egm-fb-accent, var(--egm-primary, #6366f1)));
    color: var(--egm-fb-num-ink, var(--egm-text-on-primary, #ffffff));
    font-family: var(--egm-fb-num-font, var(--egm-font-title-theme, inherit));
    font-size: 0.82em;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.14);
}
/* 🎨 247 — CINQ TEINTES, PRISES A TOUR DE ROLE : ce sont les 5 couleurs HUD du theme, projetees
   depuis la 247 par `EGMG_Style_Generator` (`--egm-fb-num-1..5`). ⛔ Aucune palette inventee ici :
   le repli est l'ACCENT du theme, comme avant, et au-dela de 5 lignes le cycle recommence.
   ⚖️ Meme regle, memes selecteurs que les 2 feuilles React (marqueur EGM-FB-STRUCTURE). */
.egm-question-player .egm-fill-blank-exercise ol > li:not([data-list]):nth-child(5n + 1)::before { background: var(--egm-fb-num-1, var(--egm-fb-num, var(--egm-fb-accent, var(--egm-primary, #6366f1)))); }
.egm-question-player .egm-fill-blank-exercise ol > li:not([data-list]):nth-child(5n + 2)::before { background: var(--egm-fb-num-2, var(--egm-fb-num, var(--egm-fb-accent, var(--egm-primary, #6366f1)))); }
.egm-question-player .egm-fill-blank-exercise ol > li:not([data-list]):nth-child(5n + 3)::before { background: var(--egm-fb-num-3, var(--egm-fb-num, var(--egm-fb-accent, var(--egm-primary, #6366f1)))); }
.egm-question-player .egm-fill-blank-exercise ol > li:not([data-list]):nth-child(5n + 4)::before { background: var(--egm-fb-num-4, var(--egm-fb-num, var(--egm-fb-accent, var(--egm-primary, #6366f1)))); }
.egm-question-player .egm-fill-blank-exercise ol > li:not([data-list]):nth-child(5n + 5)::before { background: var(--egm-fb-num-5, var(--egm-fb-num, var(--egm-fb-accent, var(--egm-primary, #6366f1)))); }

.egm-question-player .egm-fill-blank-exercise table {
    width: 100%;
    max-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0.35em 0 0.6em;
    border: var(--egm-fb-rule-width, var(--egm-border-width, 1px)) solid var(--egm-fb-rule, var(--egm-border, currentColor));
    border-radius: var(--egm-fb-radius, var(--egm-border-radius, 12px));
    overflow: hidden;
}
.egm-question-player .egm-fill-blank-exercise table caption {
    caption-side: top;
    text-align: left;
    font-weight: 700;
    padding: 0 0 0.35em;
    opacity: 0.85;
}
.egm-question-player .egm-fill-blank-exercise table th,
.egm-question-player .egm-fill-blank-exercise table td {
    padding: 0.55em 0.75em;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--egm-fb-rule, var(--egm-border, currentColor));
}
.egm-question-player .egm-fill-blank-exercise table th {
    background: var(--egm-fb-head-bg, rgba(0, 0, 0, 0.05));
    font-weight: 700;
}
.egm-question-player .egm-fill-blank-exercise table tr:last-child > th,
.egm-question-player .egm-fill-blank-exercise table tr:last-child > td {
    border-bottom: 0;
}
.egm-question-player .egm-fill-blank-exercise table tbody tr:nth-child(even) > td {
    background: var(--egm-fb-zebra, rgba(0, 0, 0, 0.03));
}

.egm-question-player .egm-fb-skinned .egm-fill-blank-select {
    /* 🕳️ 214 — ⛔ plus de `background` ici : le blanc du trou ne depend plus du registre, il est
       pose par la regle de base (var `--egm-fb-slot-fill`, ecrite dans les DEUX registres). */
    border-color: var(--egm-fb-slot-ink);
    border-style: dashed;
    border-radius: 12px;
}

/* Feedback states

   ✍️ **219 — LE TEXTE DU RETOUR EST NOIR** (demande porteur : *« dans le Feedback du lecteur
   [egm_question], il faut mettre le texte en couleur noire »*). L'ETAT reste dit par le FOND et le
   contour (vert / rouge / ambre) ; l'encre, elle, cesse d'etre la couleur de l'etat : un titre vert
   sur un lavis vert se lisait mal, et le bloc contient desormais des paragraphes entiers
   (explication, bonne reponse) qui sont du TEXTE a lire, pas un verdict a reconnaitre.
   ⚖️ Une seule declaration par etat : tout ce que le bloc contient (titre, en-tetes, contenu, croix
   de fermeture) HERITE de cette couleur — ⛔ ne pas la repeter noeud par noeud. */
.egm-question-player .egm-feedback-correct {
    background: rgba(34, 197, 94, 0.12);
    color: #0f172a;
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.egm-question-player .egm-feedback-incorrect {
    background: rgba(239, 68, 68, 0.1);
    color: #0f172a;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.egm-question-player .egm-feedback-partial {
    background: rgba(245, 158, 11, 0.12);
    color: #0f172a;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.egm-question-title {
    margin: 0 0 0.5rem;
    font-size: 1rem;
}

.egm-question-text {
    margin-bottom: 1rem;
    color: var(--egm-gray-800);
}

.egm-question-options {
    display: grid;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

/* Layout variants for answer options (mobile-first) */
.egm-question-options.egm-layout-list {
    grid-template-columns: 1fr;
}

.egm-question-options.egm-layout-grid {
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .egm-question-options.egm-layout-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.egm-choice-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--egm-gray-200);
    border-radius: var(--egm-radius-md);
    background: var(--egm-gray-50);
    cursor: pointer;
}

.egm-choice-option:hover {
    background: var(--egm-gray-100);
}

.egm-choice-option input {
    margin: 0;
}

.egm-text-input {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--egm-gray-300);
    border-radius: var(--egm-radius-md);
}

.egm-fill-blank-select {
    display: inline-block;
    min-width: 10rem;
    padding: 0.4rem 0.6rem;
    margin: 0 0.15rem;
    border: 1px solid var(--egm-gray-300);
    border-radius: var(--egm-radius-md);
    background: white;
}

.egm-question-actions {
    display: flex;
    justify-content: flex-end;
}

.egm-question-feedback {
    margin-top: 0.75rem;
    padding: 0.75rem;
    border-radius: var(--egm-radius-md);
    font-weight: 600;
}

.egm-feedback-correct {
    background: rgba(16, 185, 129, 0.12);
    color: var(--egm-success);
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.egm-feedback-incorrect {
    background: rgba(239, 68, 68, 0.10);
    color: var(--egm-error);
    border: 1px solid rgba(239, 68, 68, 0.20);
}

.egm-feedback-partial {
    background: rgba(245, 158, 11, 0.12);
    color: var(--egm-warning, #b45309);
    border: 1px solid rgba(245, 158, 11, 0.30);
}

.egm-solution-blank {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-bottom: 2px solid var(--egm-gray-400);
    font-weight: 700;
}

/* Hint control (behavior.showHints + question.hint) */
.egm-question-hint-wrap {
    margin: 0.5rem 0 1rem;
}

.egm-question-hint-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.egm-question-hint-icon {
    line-height: 1;
}

.egm-question-hint {
    margin-top: 0.6rem;
    padding: 0.75rem;
    border-radius: var(--egm-radius-md);
    background: rgba(245, 158, 11, 0.10);
    border: 1px solid rgba(245, 158, 11, 0.25);
    color: var(--egm-warning, #b45309);
    font-size: 0.95em;
}

/* ═══ 💡 LA PORTE DE CHOIX (session 190) — menu, notes, options retirées/désignées ═══════════
   ⚖️ Le dessin reprend celui de l'indice écrit (même ambre) : c'est la MEME porte, pas un
   second système. Les mécaniques et l'éligibilité vivent dans `@egm/utils/game/hint-types`. */
.egm-question-hint-menu {
    margin-top: 0.6rem;
    padding: 0.5rem;
    border-radius: var(--egm-radius-md);
    background: rgba(245, 158, 11, 0.06);
    border: 1px solid rgba(245, 158, 11, 0.25);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.egm-question-hint-menu[hidden] {
    display: none;
}

.egm-question-hint-menu-title {
    margin: 0 0 0.25rem;
    font-size: 0.85em;
    font-weight: 600;
    color: var(--egm-warning, #b45309);
}

.egm-question-hint-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--egm-radius-sm, 6px);
    background: #fff;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.egm-question-hint-option:hover:not(:disabled) {
    background: rgba(245, 158, 11, 0.12);
}

.egm-question-hint-option:disabled,
.egm-question-hint-option.is-blocked {
    opacity: 0.55;
    cursor: not-allowed;
}

.egm-question-hint-option-label {
    flex: 1 1 auto;
    font-weight: 600;
}

.egm-question-hint-option-cost {
    flex: 0 0 auto;
    font-size: 0.85em;
    color: var(--egm-warning, #b45309);
}

.egm-question-hint-note {
    margin: 0.5rem 0 0;
    padding: 0.5rem 0.65rem;
    border-radius: var(--egm-radius-md);
    background: rgba(245, 158, 11, 0.10);
    border: 1px solid rgba(245, 158, 11, 0.25);
    color: var(--egm-warning, #b45309);
    font-size: 0.95em;
}

/* ⛔ `display: none !important` : `.egm-option` est posée en `flex`/`grid` selon la disposition,
   un simple `[hidden]` serait donc écrasé par la règle de mise en page. */
.egm-option.egm-option-hidden-by-hint {
    display: none !important;
}

/* 👁️ « Indice partiel » DÉSIGNE une bonne réponse — elle prend l'encre de la réussite avant
   validation. ⛔ Elle ne coche rien à la place de l'apprenant : répondre reste son geste. */
.egm-option.egm-option-revealed-by-hint {
    outline: 2px solid var(--egm-success, #16a34a);
    outline-offset: 2px;
}

/* 🗑️ 221 — `.egm-question-feedback-attempts` RETIRÉE : plus aucun écrivain. Le compte d'un essai
   s'écrit dans le message lui-même (« … (essai 2/3) »), comme chez la Console et l'Aperçu
   ⇒ [[producer-without-consumer]] pris dans l'autre sens : ici c'est la RÈGLE qui n'existe plus. */

/* =============================================================================
   Buttons
   ============================================================================= */

.egm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    border: none;
    border-radius: var(--egm-radius-md);
    cursor: pointer;
    transition: all var(--egm-transition);
    text-decoration: none;
}

.egm-btn--primary {
    background: linear-gradient(135deg, var(--egm-primary) 0%, var(--egm-primary-dark) 100%);
    color: white;
}

.egm-btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--egm-shadow-md);
}

.egm-btn--secondary {
    background: var(--egm-gray-100);
    color: var(--egm-gray-700);
    border: 1px solid var(--egm-gray-300);
}

.egm-btn--secondary:hover {
    background: var(--egm-gray-200);
}

.egm-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* =============================================================================
   Toolbar & Filters
   ============================================================================= */

.egm-shortcode-toolbar,
.egm-library-header {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--egm-gray-50);
    border-radius: var(--egm-radius-lg);
}

.egm-shortcode-search,
.egm-library-search {
    flex: 1 1 250px;
    display: flex;
    gap: 0.5rem;
}

.egm-search-input {
    flex: 1;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    border: 1px solid var(--egm-gray-300);
    border-radius: var(--egm-radius-md);
    background: white;
    transition: border-color var(--egm-transition), box-shadow var(--egm-transition);
}

.egm-search-input:focus {
    outline: none;
    border-color: var(--egm-primary);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
}

.egm-search-btn {
    padding: 0.625rem;
    background: var(--egm-primary);
    color: white;
    border: none;
    border-radius: var(--egm-radius-md);
    cursor: pointer;
}

.egm-shortcode-filters,
.egm-library-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.egm-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.egm-filter-group label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--egm-gray-500);
}

.egm-filter-select {
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid var(--egm-gray-300);
    border-radius: var(--egm-radius-md);
    background: white;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
}

.egm-filter-select:focus {
    outline: none;
    border-color: var(--egm-primary);
}

/* =============================================================================
   Games Grid
   ============================================================================= */

.egm-games-grid {
    display: grid;
    gap: 1.5rem;
}

.egm-cols-1 { grid-template-columns: 1fr; }
.egm-cols-2 { grid-template-columns: repeat(2, 1fr); }
.egm-cols-3 { grid-template-columns: repeat(3, 1fr); }
.egm-cols-4 { grid-template-columns: repeat(4, 1fr); }
.egm-cols-5 { grid-template-columns: repeat(5, 1fr); }
.egm-cols-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1024px) {
    .egm-cols-4,
    .egm-cols-5,
    .egm-cols-6 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .egm-cols-3,
    .egm-cols-4,
    .egm-cols-5,
    .egm-cols-6 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .egm-games-grid { grid-template-columns: 1fr; }
}

/* =============================================================================
   Game Card
   ============================================================================= */

.egm-game-card {
    background: white;
    border-radius: var(--egm-radius-lg);
    overflow: hidden;
    box-shadow: var(--egm-shadow-sm);
    border: 1px solid var(--egm-gray-200);
    transition: transform var(--egm-transition), box-shadow var(--egm-transition);
}

.egm-game-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--egm-shadow-lg);
}

.egm-game-card__thumbnail {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--egm-gray-100);
}

.egm-game-card__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--egm-transition);
}

.egm-game-card:hover .egm-game-card__thumbnail img {
    transform: scale(1.05);
}

.egm-game-card__badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    background: var(--egm-primary);
    border-radius: var(--egm-radius-sm);
}

.egm-game-card__content {
    padding: 1rem;
}

.egm-game-card__title {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.egm-game-card__title a {
    color: var(--egm-gray-800);
    text-decoration: none;
}

.egm-game-card__title a:hover {
    color: var(--egm-primary);
}

.egm-game-card__excerpt {
    margin: 0 0 0.75rem 0;
    font-size: 0.875rem;
    color: var(--egm-gray-500);
    line-height: 1.5;
}

.egm-game-card__meta {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.egm-game-card__difficulty {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--egm-gray-100);
    color: var(--egm-gray-600);
    border-radius: var(--egm-radius-sm);
}

.egm-game-card__actions {
    display: flex;
    gap: 0.5rem;
}

/* Compact mode */
.egm-game-card--compact {
    display: flex;
    flex-direction: row;
}

.egm-game-card--compact .egm-game-card__thumbnail {
    width: 120px;
    flex-shrink: 0;
    aspect-ratio: 1;
}

.egm-game-card--compact .egm-game-card__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.75rem;
}

/* List mode */
.egm-display-list .egm-games-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.egm-game-card--list {
    display: flex;
    flex-direction: row;
}

.egm-game-card--list .egm-game-card__thumbnail {
    width: 200px;
    flex-shrink: 0;
}

.egm-game-card--list .egm-game-card__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* =============================================================================
   Pagination
   ============================================================================= */

.egm-shortcode-pagination,
.egm-library-pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
}

.egm-shortcode-pagination a,
.egm-shortcode-pagination span,
.egm-library-pagination a,
.egm-library-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    font-size: 0.875rem;
    border-radius: var(--egm-radius-md);
    text-decoration: none;
    transition: all var(--egm-transition);
}

.egm-shortcode-pagination a {
    background: white;
    color: var(--egm-gray-700);
    border: 1px solid var(--egm-gray-300);
}

.egm-shortcode-pagination a:hover {
    background: var(--egm-gray-50);
    border-color: var(--egm-primary);
    color: var(--egm-primary);
}

.egm-shortcode-pagination .current {
    background: var(--egm-primary);
    color: white;
    border: 1px solid var(--egm-primary);
}

/* =============================================================================
   Game Player
   ============================================================================= */

.egm-game-player {
    position: relative;
    background: var(--egm-gray-100);
    border-radius: var(--egm-radius-lg);
    overflow: hidden;
    min-height: 400px;
}

.egm-player-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: white;
}

.egm-player-container {
    width: 100%;
    height: 100%;
}

/* =============================================================================
   Loading & Spinner
   ============================================================================= */

.egm-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    gap: 1rem;
    color: var(--egm-gray-500);
}

.egm-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--egm-gray-200);
    border-top-color: var(--egm-primary);
    border-radius: 50%;
    animation: egmg-spin 0.8s linear infinite;
}

/* Un seul `spin` par proprietaire (session 243) : meme nom, meme corps, dans les 4 feuilles
   d'egm-games. Le corps absolu (0% -> 100%) remplace `to{}` : les deux consommateurs
   (.egm-spinner, .egm-question-preload-spinner) ne portent AUCUN autre transform, le rendu est
   identique - alors que `to{}` seul part du transform COURANT (piege mesure en 242). */
@keyframes egmg-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* =============================================================================
   Quiz Component
   ============================================================================= */

.egm-quiz {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
    background: white;
    border-radius: var(--egm-radius-lg);
    box-shadow: var(--egm-shadow-md);
}

.egm-quiz-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--egm-gray-200);
}

.egm-quiz-progress {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--egm-gray-600);
}

.egm-quiz-current {
    color: var(--egm-primary);
}

.egm-quiz-score {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--egm-gray-50);
    border-radius: var(--egm-radius-md);
}

.egm-quiz-score-label {
    font-size: 0.875rem;
    color: var(--egm-gray-500);
}

.egm-quiz-score-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--egm-primary);
}

.egm-quiz-body {
    min-height: 300px;
}

.egm-quiz-question {
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    background: var(--egm-gray-50);
    border-radius: var(--egm-radius-md);
}

.egm-quiz-question h4 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--egm-gray-800);
}

.egm-quiz-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.egm-quiz-options.egm-quiz-options--grid {
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .egm-quiz-options.egm-quiz-options--grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.egm-quiz-options.egm-quiz-options--grid {
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .egm-quiz-options.egm-quiz-options--grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.egm-quiz-option {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: white;
    border: 2px solid var(--egm-gray-200);
    border-radius: var(--egm-radius-md);
    cursor: pointer;
    transition: all var(--egm-transition);
}

.egm-quiz-option:hover {
    border-color: var(--egm-primary);
    background: rgba(6, 182, 212, 0.05);
}

.egm-quiz-option.selected {
    border-color: var(--egm-primary);
    background: rgba(6, 182, 212, 0.1);
}

.egm-quiz-option.correct {
    border-color: var(--egm-success);
    background: rgba(16, 185, 129, 0.1);
}

.egm-quiz-option.incorrect {
    border-color: var(--egm-error);
    background: rgba(239, 68, 68, 0.1);
}

.egm-quiz-option input[type="radio"],
.egm-quiz-option input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--egm-primary);
}

.egm-quiz-option-text {
    flex: 1;
    font-size: 1rem;
    color: var(--egm-gray-700);
}

.egm-quiz-feedback {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: var(--egm-radius-md);
    font-weight: 500;
}

.egm-quiz-feedback.correct {
    background: rgba(16, 185, 129, 0.1);
    color: var(--egm-success);
    border: 1px solid var(--egm-success);
}

.egm-quiz-feedback.incorrect {
    background: rgba(239, 68, 68, 0.1);
    color: var(--egm-error);
    border: 1px solid var(--egm-error);
}

.egm-quiz-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--egm-gray-200);
}

.egm-quiz-results {
    text-align: center;
    padding: 3rem 2rem;
}

.egm-quiz-results h3 {
    margin: 0 0 1.5rem 0;
    font-size: 1.5rem;
    color: var(--egm-gray-800);
}

.egm-quiz-final-score {
    margin-bottom: 2rem;
    font-size: 3rem;
    font-weight: 700;
    color: var(--egm-primary);
}

/* =============================================================================
   Theme Variants
   ============================================================================= */

/* Dark theme */
.egm-theme-dark {
    --egm-gray-50: #1f2937;
    --egm-gray-100: #374151;
    --egm-gray-200: #4b5563;
    --egm-gray-300: #6b7280;
    --egm-gray-700: #e5e7eb;
    --egm-gray-800: #f9fafb;
    background: #111827;
}

.egm-theme-dark .egm-game-card,
.egm-theme-dark .egm-quiz {
    background: #1f2937;
    border-color: #374151;
}

/* Colorful theme */
.egm-theme-colorful .egm-game-card {
    border: 2px solid transparent;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(135deg, var(--egm-primary), var(--egm-secondary)) border-box;
}

/* Minimal theme */
.egm-theme-minimal .egm-game-card {
    box-shadow: none;
    border: none;
    border-radius: 0;
}

.egm-theme-minimal .egm-game-card__thumbnail {
    border-radius: var(--egm-radius-md);
}

/* =============================================================================
   C1-C2 : WYSIWYG Content (HTML brut - images, titres, listes)
   Appliqué sur .egm-question-text et .egm-option-text via la classe egm-wysiwyg-content
   ============================================================================= */

/* 📐 LA BASE DU CONTRAT — elle manquait, et un VOISIN la fournissait.
   Cette feuille posait tout le contrat (titres, listes, `<p>`, médias) SAUF sa base. Résultat :
   l'interligne d'un contenu d'auteur ne valait 1,6 que sur les pages où un `[egm_game]` traînait
   (son bundle `frontend-player.css` porte la même règle, en sélecteur nu). Le même contenu se
   rendait donc à deux interlignes selon un voisin qui n'a rien à voir avec lui. La valeur est
   celle des 2 autres lecteurs — source unique : `EGM/packages/stylekit/src/styles/quill-content.css`. */
.egm-wysiwyg-content {
    line-height: 1.6;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* EGM-QUILL-CONTRACT (copie) — cette feuille n'est PAS bâtie (servie telle quelle par le
   plugin), elle ne peut pas importer le socle. Source unique :
   `EGM/packages/stylekit/src/styles/quill-content.css` — toute évolution s'y rejoue.
   `grep -r "EGM-QUILL-CONTRACT"` donne la liste complète des surfaces.

   ⚠️ Quill 2 rend TOUTES les listes en `<ol>` et porte la nature sur l'item : sans ces règles,
   une liste à puces s'affiche NUMÉROTÉE. La règle de l'`li` gagne sur celle de l'`ol`. */
.egm-wysiwyg-content ol > li[data-list="bullet"]  { list-style-type: disc !important; }
.egm-wysiwyg-content ol > li[data-list="ordered"] { list-style-type: decimal !important; }
.egm-wysiwyg-content ol ol > li[data-list="bullet"]  { list-style-type: circle !important; }
.egm-wysiwyg-content ol ol > li[data-list="ordered"] { list-style-type: lower-alpha !important; }
/* Marqueur interne de Quill : il porte la puce DANS l'éditeur, il est vide en dehors. */
.egm-wysiwyg-content .ql-ui { display: none; }
/* Indentation (Tab dans une liste) — Quill pose la classe sur le `li`. */
.egm-wysiwyg-content .ql-indent-1 { padding-left: 3em; }
.egm-wysiwyg-content .ql-indent-2 { padding-left: 6em; }
.egm-wysiwyg-content .ql-indent-3 { padding-left: 9em; }
.egm-wysiwyg-content .ql-indent-4 { padding-left: 12em; }
.egm-wysiwyg-content .ql-indent-5 { padding-left: 15em; }
.egm-wysiwyg-content .ql-indent-6 { padding-left: 18em; }

/* Alignement et sens de lecture — Quill pose une CLASSE sur le bloc, jamais un style. */
.egm-wysiwyg-content .ql-align-left    { text-align: left; }
.egm-wysiwyg-content .ql-align-center  { text-align: center; }
.egm-wysiwyg-content .ql-align-right   { text-align: right; }
.egm-wysiwyg-content .ql-align-justify { text-align: justify; }
.egm-wysiwyg-content .ql-direction-rtl { direction: rtl; }
.egm-wysiwyg-content .ql-align-center > img { margin-left: auto; margin-right: auto; display: block; }
.egm-wysiwyg-content .ql-align-right  > img { margin-left: auto; display: block; }

/* Espaces et retours a la ligne — la surface d'edition est en `white-space: pre-wrap`.
   Pose sur les BLOCS, jamais sur la racine (sinon l'indentation du HTML devient des lignes vides). */
.egm-wysiwyg-content p,
.egm-wysiwyg-content h1,
.egm-wysiwyg-content h2,
.egm-wysiwyg-content h3,
.egm-wysiwyg-content h4,
.egm-wysiwyg-content h5,
.egm-wysiwyg-content h6,
.egm-wysiwyg-content li,
.egm-wysiwyg-content blockquote,
.egm-wysiwyg-content .ql-code-block { white-space: pre-wrap; }
.egm-wysiwyg-content p:empty::before { content: ''; display: inline-block; }

/* Tailles, polices, exposant/indice, bloc de code, separateur. */
.egm-wysiwyg-content .ql-size-small { font-size: 0.75em; }
.egm-wysiwyg-content .ql-size-large { font-size: 1.5em; }
.egm-wysiwyg-content .ql-size-huge  { font-size: 2.5em; }
.egm-wysiwyg-content .ql-font-serif     { font-family: Georgia, 'Times New Roman', serif; }
.egm-wysiwyg-content .ql-font-monospace { font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; }
.egm-wysiwyg-content sub,
.egm-wysiwyg-content sup {
    font-size: 0.75em;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
.egm-wysiwyg-content sup { top: -0.5em; }
.egm-wysiwyg-content sub { bottom: -0.25em; }
.egm-wysiwyg-content .ql-code-block-container {
    font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
    font-size: 0.9em;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 6px;
    padding: 0.6em 0.9em;
    margin: 0.75em 0;
    overflow-x: auto;
}
.egm-wysiwyg-content .ql-code-block { line-height: 1.5; }
.egm-wysiwyg-content hr.egm-hr {
    border: 0;
    border-top: 2px solid currentColor;
    opacity: 0.25;
    margin: 1em 0;
}

/* Formules — le contenu stocke du MathML natif : aucune bibliotheque a charger ici, et le rendu
   est identique a l'editeur par construction (meme arbre DOM). Le LaTeX reste dans `data-latex`.
   Pose AUSSI sur la racine du player : les intitules d'options sont injectes hors texte riche. */
.egm-question-player .egm-math,
.egm-wysiwyg-content .egm-math {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}
.egm-question-player .egm-math math,
.egm-wysiwyg-content .egm-math math {
    font-size: 1.15em;
    font-family: 'Cambria Math', 'Latin Modern Math', 'STIX Two Math', serif;
}
.egm-question-player .egm-math--block,
.egm-wysiwyg-content .egm-math--block {
    display: block;
    text-align: center;
    margin: 0.6em auto;
}

/* Carte de contenu — renvoi vers un jeu, une fiche, une page, un article. Modèle des cartes de
   ressource du MUR DES GROUPES : vignette (ou icône de famille), titre, description, famille.
   L'illustration est FIGÉE à l'insertion — aucune requête au rendu. Couleurs neutres : la carte
   doit rester lisible sur fond clair comme sur fond sombre. */
.egm-wysiwyg-content a.egm-content-card {
    display: flex;
    align-items: center;
    gap: 0.75em;
    padding: 0.7em 0.9em;
    margin: 0.75em 0;
    border: 1px solid rgba(127, 127, 127, 0.35);
    border-left: 4px solid rgba(127, 127, 127, 0.55);
    border-radius: 10px;
    background: rgba(127, 127, 127, 0.08);
    color: inherit;
    text-decoration: none;
}
.egm-wysiwyg-content a.egm-content-card:hover {
    border-color: rgba(127, 127, 127, 0.6);
    background: rgba(127, 127, 127, 0.14);
}
.egm-wysiwyg-content .egm-content-card__thumb {
    flex: 0 0 auto;
    width: 76px;
    height: 58px;
    object-fit: cover;
    border-radius: 6px;
    margin: 0;
    display: block;
}
.egm-wysiwyg-content .egm-content-card__icon { flex: 0 0 auto; width: 76px; text-align: center; font-size: 1.6em; line-height: 1; }
.egm-wysiwyg-content .egm-content-card__body { display: flex; flex-direction: column; gap: 0.15em; min-width: 0; flex: 1 1 auto; }
.egm-wysiwyg-content .egm-content-card__title { font-weight: 700; line-height: 1.3; }
.egm-wysiwyg-content .egm-content-card__desc {
    font-size: 0.85em;
    line-height: 1.35;
    opacity: 0.85;
    overflow: hidden;
    max-height: 2.7em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.egm-wysiwyg-content .egm-content-card__kind {
    font-size: 0.78em;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.egm-wysiwyg-content .egm-content-card__go { flex: 0 0 auto; opacity: 0.55; font-size: 1.05em; }

/* Emoji — plafond sur la RACINE DU PLAYER, pas seulement sur le texte riche : l'intitulé, les
   options, l'indice et les écrans de résultat injectent du HTML hors de `.egm-wysiwyg-content`.
   Une <img> d'emoji de WordPress est un SVG sans dimension intrinsèque : sans plafond, elle
   prend toute la largeur. Sélection par la classe ET par la source (Quill ne conserve que
   src/alt/width/height : la classe `emoji` peut avoir sauté). */
.egm-question-player img.emoji,
.egm-question-player img.wp-smiley,
.egm-question-player img[src*="/core/emoji/"],
.egm-wysiwyg-content .emoji,
.egm-wysiwyg-content img.emoji,
.egm-wysiwyg-content img.wp-smiley,
.egm-wysiwyg-content img[src*="/core/emoji/"] {
    width: 1.1em !important;
    height: 1.1em !important;
    min-width: 0 !important;
    margin: 0 0.05em;
    padding: 0;
    vertical-align: -0.1em;
    display: inline !important;
    border-radius: 0;
    box-shadow: none;
}

/* Clearfix — needed when floated media blocks are the last children */
.egm-wysiwyg-content::after {
    content: '';
    display: table;
    clear: both;
}

/* Images sans wrapper (rétrocompat) */
.egm-wysiwyg-content > img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 0.5rem auto;
}

/* Wrapper générique */
.egm-wysiwyg-content .egm-media-wrap {
    display: block;
    margin: 0.75em 0;
    max-width: 100%;
    line-height: 0;
}

.egm-wysiwyg-content .egm-media-wrap img,
.egm-wysiwyg-content .egm-media-wrap video {
    display: block;
    max-width: 100%;
    margin: 0;
    border-radius: 6px;
}

/* ── Center (défaut) ── */
.egm-wysiwyg-content .egm-media-center {
    clear: both;
    text-align: center;
}
.egm-wysiwyg-content .egm-media-center img,
.egm-wysiwyg-content .egm-media-center video {
    margin: 0 auto;
}

/* ── Left — float gauche avec clear ── */
.egm-wysiwyg-content .egm-media-left {
    float: left;
    clear: left;
    max-width: 45%;
    margin: 0.25em 1.25em 0.75em 0;
}

/* ── FloatLeft — float gauche sans clear ── */
.egm-wysiwyg-content .egm-media-float-left {
    float: left;
    max-width: 45%;
    margin: 0.25em 1.25em 0.75em 0;
}

/* ── Right — float droit avec clear ── */
.egm-wysiwyg-content .egm-media-right {
    float: right;
    clear: right;
    max-width: 45%;
    margin: 0.25em 0 0.75em 1.25em;
}

/* ── FloatRight — float droit sans clear ── */
.egm-wysiwyg-content .egm-media-float-right {
    float: right;
    max-width: 45%;
    margin: 0.25em 0 0.75em 1.25em;
}

/* ── Audio embed : poster cliquable avec overlay play ── */
.egm-wysiwyg-content .egm-media-wrap[data-egm-media="audio"] {
    position: relative;
    display: inline-block;
    line-height: 0;
}
.egm-wysiwyg-content .egm-audio-poster {
    cursor: pointer;
    display: block;
    max-width: 100%;
    border-radius: 6px;
    transition: opacity 0.18s;
}
.egm-wysiwyg-content .egm-audio-poster:hover {
    opacity: 0.85;
}
.egm-wysiwyg-content .egm-media-wrap[data-egm-media="audio"]::after {
    content: '▶';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.8rem;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
    pointer-events: none;
    line-height: 1;
}
.egm-wysiwyg-content .egm-media-wrap[data-egm-media="audio"].egm-playing::after {
    display: none;
}
.egm-wysiwyg-content .egm-media-wrap[data-egm-media="audio"] audio {
    display: none;
    width: 0;
    height: 0;
}
.egm-wysiwyg-content .egm-media-wrap[data-egm-media="audio"].egm-playing audio {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 6px;
}

/* ── Responsive : float → bloc centré sur mobile ── */
@media (max-width: 480px) {
    .egm-wysiwyg-content .egm-media-left,
    .egm-wysiwyg-content .egm-media-float-left,
    .egm-wysiwyg-content .egm-media-right,
    .egm-wysiwyg-content .egm-media-float-right {
        float: none;
        clear: both;
        max-width: 100%;
        margin: 0.75em auto;
        display: block;
        text-align: center;
    }
}

.egm-wysiwyg-content h1,
.egm-wysiwyg-content h2,
.egm-wysiwyg-content h3,
.egm-wysiwyg-content h4,
.egm-wysiwyg-content h5,
.egm-wysiwyg-content h6 {
    margin: 0.5em 0 0.25em;
    font-weight: 700;
    line-height: 1.3;
    color: var(--egm-text, #1f2937);
}

/* 📐 **L'ÉCHELLE DES TITRES EST CELLE DES 2 AUTRES LECTEURS** (218). Le contrat vit en 3 copies à
   la main (le socle ne peut pas être importé ici : cette feuille n'est pas bâtie), et elles avaient
   dérivé : QPP rendait `1.75 / 1.5 / 1.25 / 1.1em`, cette feuille `1.5 / 1.3 / 1.15 / 1.05em`.
   Le même titre d'auteur ne faisait donc pas la même taille selon le lecteur qui l'affichait.
   ⛔ Ne plus les faire diverger : `docs_claude/tools/measure_wysiwyg_contract_drift.mjs` compare
   les 3 feuilles et doit rendre **0 dérive**. */
.egm-wysiwyg-content h1 { font-size: 1.75em; }
.egm-wysiwyg-content h2 { font-size: 1.5em; }
.egm-wysiwyg-content h3 { font-size: 1.25em; }
.egm-wysiwyg-content h4 { font-size: 1.1em; }

.egm-wysiwyg-content p {
    margin: 0.35em 0;
}

/* ⚠️ PARITÉ DES 3 FEUILLES : `console.css` et `frontend-player.css` posent la nature du marqueur
   en `!important` — pas celle-ci. Un contenu importé (`<ul><li>` sans `data-list`) y perdait donc
   puce et numéro dès qu'un thème remettait `list-style:none`. La règle de l'`li` du contrat
   (EGM-QUILL-CONTRACT, plus haut) continue de gagner sur celle de la liste. */
.egm-wysiwyg-content ul,
.egm-wysiwyg-content ol {
    margin: 0.35em 0 0.35em 1.5em;
    padding: 0;
}
.egm-wysiwyg-content ul { list-style: disc !important; }
.egm-wysiwyg-content ol { list-style: decimal !important; }
.egm-wysiwyg-content ul ul { list-style: circle !important; }
.egm-wysiwyg-content ol ol { list-style: lower-alpha !important; }

/* 📐 218 — même respiration entre deux puces que chez les 2 autres lecteurs (0,35em, ⛔ plus 0,15). */
.egm-wysiwyg-content li {
    margin-bottom: 0.35em;
    display: list-item;
}

.egm-wysiwyg-content strong,
.egm-wysiwyg-content b {
    font-weight: 700;
}

.egm-wysiwyg-content em,
.egm-wysiwyg-content i {
    font-style: italic;
}

.egm-wysiwyg-content a {
    color: var(--egm-primary, #7c3aed);
    text-decoration: underline;
}

/* =============================================================================
   C3 : Grid Layout options (vérification / complément)
   ============================================================================= */

/* ⛔ Le 2ᵉ foyer de la grille a été RETIRÉ en 218 : il vivait ici, 1 500 lignes après le premier,
   et gagnait par sa seule position. La géométrie unique est déclarée avec les autres dispositions
   (chercher « UN SEUL FOYER, ALIGNÉ SUR QPP »). */

/* =============================================================================
   C4-C6 : Type Leçon
   ============================================================================= */

.egm-question-player .egm-lesson-content {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--egm-text, #1f2937);
    margin-bottom: 1rem;
}

.egm-question-player .egm-lesson-more {
    margin-top: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 10px;
    border-left: 4px solid var(--egm-primary, #7c3aed);
    background: rgba(124, 58, 237, 0.05);
}

.egm-question-player .egm-lesson-more-content {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--egm-text, #1f2937);
}

.egm-question-player .egm-controls .egm-lesson-understood {
    border-radius: 30px;
    padding: 0.75rem 1.75rem;
    font-size: 1rem;
    font-weight: 700;
    background: var(--egm-success, #10b981);
    color: #ffffff;
    border: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}

.egm-question-player .egm-controls .egm-lesson-understood:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35);
}

.egm-question-player .egm-controls .egm-lesson-more-toggle {
    border-radius: 30px;
    padding: 0.75rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    background: var(--egm-surface, rgba(255, 255, 255, 0.94));
    color: var(--egm-primary, #7c3aed);
    border: 1.5px solid var(--egm-primary, #7c3aed);
    cursor: pointer;
    transition: background 0.15s ease;
}

.egm-question-player .egm-controls .egm-lesson-more-toggle:hover {
    background: rgba(124, 58, 237, 0.07);
}

/* =============================================================================
   Utility Classes
   ============================================================================= */

.egm-no-results,
.egm-error {
    padding: 2rem;
    text-align: center;
    color: var(--egm-gray-500);
    background: var(--egm-gray-50);
    border-radius: var(--egm-radius-md);
}

.egm-error {
    color: var(--egm-error);
    background: rgba(239, 68, 68, 0.1);
}

/* Message vu par un VISITEUR : neutre, calme, sans alarme rouge — il n'a rien à réparer. */
.egm-error--public {
    color: var(--egm-gray-500);
    background: var(--egm-gray-50);
}

/* Message vu par un ÉDITEUR : il porte un diagnostic, il doit se lire, pas se subir. */
.egm-error--editor {
    text-align: left;
    padding: 1rem 1.25rem;
    line-height: 1.5;
}

.egm-error--editor .egm-error__hint {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.9em;
    opacity: 0.9;
}

.egm-error--editor code {
    padding: 0.05em 0.35em;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.07);
    font-size: 0.92em;
}

/* Rendu PARTIEL : le parcours a fonctionné, seul l'inventaire manque — ton d'avertissement. */
.egm-error--partial {
    margin-top: 1rem;
    color: #92400e;
    background: rgba(245, 158, 11, 0.12);
}

/* =============================================================================
   Visual Matching Interface
   ============================================================================= */

.egm-question-player .egm-matching-visual {
    position: relative;
    padding: 1rem;
    overflow: visible;
}

.egm-question-player .egm-matching-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    color: var(--egm-primary, #06b6d4);
}

/* 🔗 **LE PLATEAU EST UNE SEULE GRILLE DEPUIS LA 192** — sa geometrie vit dans l'AUTORITE
   (`question-runtime-styles.ts`, classe `.egm-matching-board`), parce qu'elle repose sur une
   `@media` et sur un placement explicite que ce fichier ne doit pas dupliquer
   ⇒ [[stylekit-single-source]].

   ⛔ Les regles retirees ici (`.egm-matching-columns` en `flex`, `.egm-matching-col` a `45 %`,
   `.egm-matching-col-left/-right`) sont MORTES : le player ne produit plus ces noeuds. Elles
   faisaient precisement le defaut signale — deux colonnes independantes, donc une 2e colonne qui
   derive des qu'une carte est plus haute. ⛔ Ne pas les reintroduire « pour la compatibilite ».
   Seul reste ici ce qui appartient a la LIGNE, pas au plateau : */

/* Le calque des cordons doit rester AU-DESSUS du fond des cartes. */
.egm-question-player .egm-matching-visual {
    position: relative;
    z-index: 2;
}

/* Row wrapper so labels can sit outside the cards */
.egm-question-player .egm-match-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.egm-question-player .egm-match-row-left {
    justify-content: flex-end;
}

.egm-question-player .egm-match-row-right {
    justify-content: flex-start;
}

.egm-question-player .egm-match-out-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    border: 2px solid var(--egm-border);
    color: var(--egm-text-secondary);
    font-weight: 700;
    font-size: 0.85em;
    flex: 0 0 auto;
    background: var(--egm-bg);
}

/* Matching Items */
/* 🚨 La carte doit REMPLIR sa rangee : « Alignement dans la carte » (matching.itemLayout.align)
   place le bloc image+texte a l'interieur de la carte. Une carte qui se dimensionne sur son
   contenu n'offre aucun espace ou se placer — le reglage y serait inerte (meme piege que 149b). */
.egm-question-player .egm-match-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 48px;
    background: var(--egm-card-background, var(--egm-gray-50));
    border: 2px solid var(--egm-border-color, var(--egm-gray-200));
    border-radius: var(--egm-radius-md, 0.5rem);
    cursor: pointer;
    transition: all var(--egm-transition, 150ms);
    font-size: calc(var(--egm-base-font-size, 14px) * var(--egm-text-scale, 1));
    -webkit-user-select: none;
    user-select: none;
    position: relative;
}

.egm-question-player .egm-match-left-item {
    flex-direction: row;
}

.egm-question-player .egm-match-right-item {
    flex-direction: row;
}

.egm-question-player .egm-match-text {
    flex: 1;
    word-break: break-word;
}

/* Bloc image + texte d'un element.
   ⚖️ Sa GEOMETRIE est posee en STYLE INLINE par l'autorite partagee
   `EGM/packages/utils/src/game/matching-item-layout.ts` (via le bundle
   `assets/js/matching-item-layout.global.js`), lue a l'identique par QuizPreviewPlayer et par la
   Console. ⛔ Ne jamais redeclarer ici direction, largeur, ratio, alignement ou gouttiere : ce
   serait une 4e geometrie, et l'inline la battrait de toute facon. */
.egm-question-player .egm-match-content {
    min-width: 0;
}

/* Le cadre de l'image porte le padding demande : un <span> inline ignorerait largeur et marges. */
.egm-question-player .egm-match-image {
    display: block;
    line-height: 0;
}

.egm-question-player .egm-match-image img {
    max-width: 100%;
}

/* 🔗 **220 — LA TAILLE DE L'ANCRE VIENT DE L'AUTORITE** (`question-runtime-styles.ts`, servie par
   le pont et posee sur `.egm-matching-visual`). ⛔ Les 14 px ecrits ici etaient une 3e valeur : les
   2 lecteurs React posaient `w-7 h-7` (28 px), donc le meme plateau rendait deux pastilles
   ⇒ [[stylekit-single-source]]. ⚖️ Les replis sont l'ecran d'AVANT : pont absent ⇒ rien ne bouge. */
/* 📐 **240 — LE ROND NE SE NEGOCIE PAS.** Il est CENTRE, et rien ne doit pouvoir l'etirer : une
   cible tactile (`min-height`), un `padding` de theme ou un `flex` de conteneur suffisent a en
   faire une pilule poussee hors du centre, et le cordon partirait alors d'ailleurs que du bord.
   Un lecteur pose dans une page qu'il ne controle pas possede chaque propriete dont sa geometrie
   depend ⇒ [[a-reader-dropped-into-a-page-must-own-every-class-it-writes]]. */
.egm-question-player .egm-match-anchor {
    display: block;
    box-sizing: border-box;
    width: var(--egm-match-anchor-size, 14px);
    height: var(--egm-match-anchor-size, 14px);
    min-width: var(--egm-match-anchor-size, 14px);
    max-width: var(--egm-match-anchor-size, 14px);
    min-height: var(--egm-match-anchor-size, 14px);
    max-height: var(--egm-match-anchor-size, 14px);
    padding: 0;
    margin: 0;
    flex: none;
    align-self: auto;
    line-height: 0;
    border-radius: 50%;
    background: var(--egm-bg, #ffffff);
    border: var(--egm-match-anchor-border, 2px) solid var(--egm-border, var(--egm-gray-200));
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: background 0.2s ease, border-color 0.2s ease;
}

/* Anchor position: right edge for left column, left edge for right column.
   ⚖️ Le DEBORD vient lui aussi de l'autorite : c'est lui qui place le CENTRE de l'ancre, donc le
   point d'ou part le cordon. Le changer sans changer la taille decalerait tous les traits. */
.egm-question-player .egm-match-left-item .egm-match-anchor {
    right: calc(-1 * var(--egm-match-anchor-overhang, 7px));
}

.egm-question-player .egm-match-right-item .egm-match-anchor {
    left: calc(-1 * var(--egm-match-anchor-overhang, 7px));
}

.egm-question-player .egm-match-item:hover {
    border-color: var(--egm-primary, #06b6d4);
    box-shadow: var(--egm-shadow-sm);
}

.egm-question-player .egm-match-item:hover .egm-match-anchor {
    border-color: var(--egm-primary, #06b6d4);
}

.egm-question-player .egm-match-item.is-active {
    border-color: var(--egm-primary, #06b6d4);
    background: rgba(6, 182, 212, 0.1);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.2);
}

.egm-question-player .egm-match-item.is-active .egm-match-anchor {
    border-color: var(--egm-primary, #06b6d4);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.3);
}

.egm-question-player .egm-match-right-item.is-linked {
    border-color: var(--egm-primary, #06b6d4);
    background: rgba(6, 182, 212, 0.06);
}

/* ⛔ `--egm-match-color` a DISPARU (181bis) : c'etait la seconde palette, celle qui repeignait la
   carte reliee avec une couleur tiree ailleurs. Plus personne ne l'ecrit, donc plus personne ne la
   lit — un lecteur sans ecrivain cache le fait ⇒ [[reader-without-writer-hides-in-a-global]]. */
.egm-question-player .egm-match-item.is-connected {
    border-color: var(--egm-success, #10b981);
    background: rgba(0, 0, 0, 0.02);
}

.egm-question-player .egm-match-item.is-connected .egm-match-anchor {
    background: var(--egm-bg, #ffffff);
    border-color: var(--egm-success, #10b981);
}

/* Pending: border and anchor take the theme's primary */
.egm-question-player .egm-match-item.is-pending {
    border-color: var(--egm-primary, #06b6d4);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

.egm-question-player .egm-match-item.is-pending .egm-match-anchor {
    border-color: var(--egm-primary, #06b6d4);
}

/* Disabled state after validation */
/* ✅❌ **220 — LE VOILE DE LA QUESTION CLOSE NE DOIT PAS DELAVER LE VERDICT.** Il valait `0.7` ici
   et `0.95` chez les 2 lecteurs React : le vert et le rose qu'on vient de peindre y perdaient un
   tiers de leur intensite. ⚖️ La valeur vient de l'autorite ; le repli reste l'ecran d'avant. */
.egm-question-player .egm-match-item.egm-disabled {
    pointer-events: none;
    opacity: var(--egm-match-answered-opacity, 0.7);
}

/* 🗑️ **220 — `.egm-match-item.is-correct` / `.is-incorrect` ONT ETE RETIREES.** Elles peignaient un
   fond vert ou rouge sur toute la carte apres validation ; **aucun** code ne posait ces classes
   (mesure : 0 ecrivain dans `question-player.js`) ⇒ [[producer-without-consumer]]. Et elles
   contredisaient le lecteur qui fait foi : sur un `matching`, la teinte de la carte est son
   IDENTITE (192) — le verdict repeint le LIEN (trait interieur, ancre, cordon) et pose une pastille
   ✓/✕, ⛔ jamais le fond ⇒ voir `frameMatchingVerdictVars` dans le pont. */

/* Mobile Responsive */
@media (max-width: 600px) {
    /* ⛔ L'empilement du plateau n'est plus ici : l'autorite le fait a 768 px, pour les 3 lecteurs
       a la fois. Une 2e valeur de bascule (600 px) aurait rendu deux ecrans differents entre
       600 et 768 px ⇒ [[stylekit-single-source]]. */

    .egm-question-player .egm-match-left-item,
    .egm-question-player .egm-match-right-item {
        flex-direction: row;
    }

    .egm-question-player .egm-match-item.is-connected::after {
        content: '✓';
        margin-left: auto;
        color: var(--egm-success, #10b981);
        font-weight: bold;
        font-size: 1.1em;
    }
}

/* =============================================================================
   Multi-Question Mode ([egm_question ids="..."])
   ============================================================================= */

/* Multi-question header */
.egm-question-player-multi .egm-question-multi-header {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1rem 0.75rem;
    border-bottom: 1px solid var(--egm-border, rgba(0, 0, 0, 0.08));
    margin-bottom: 0.5rem;
}

.egm-question-player-multi .egm-multi-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--egm-text, #1f2937);
    margin: 0;
    text-align: center;
}

.egm-question-player-multi .egm-question-progress-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Question counter */
.egm-question-player-multi .egm-question-counter {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0.25rem 0.75rem;
    background: var(--egm-surface, rgba(255, 255, 255, 0.9));
    border: 1px solid var(--egm-border, rgba(0, 0, 0, 0.12));
    border-radius: 9999px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--egm-text, #1f2937);
    white-space: nowrap;
}

.egm-question-player-multi .egm-counter-current {
    color: var(--egm-primary, #7c3aed);
}

.egm-question-player-multi .egm-counter-label {
    font-weight: 700;
}

/* Progress bar */
.egm-question-player-multi .egm-question-progress-bar-container {
    flex: 1;
    min-width: 100px;
    height: 8px;
    background: var(--egm-border, rgba(0, 0, 0, 0.08));
    border-radius: 9999px;
    overflow: hidden;
}

.egm-question-player-multi .egm-question-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--egm-primary, #7c3aed), var(--egm-secondary, #06b6d4));
    border-radius: 9999px;
    transition: width 0.3s ease;
}

/* Partial score */
.egm-question-player-multi .egm-question-partial-score {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    background: var(--egm-surface, rgba(255, 255, 255, 0.9));
    border: 1px solid var(--egm-border, rgba(0, 0, 0, 0.12));
    border-radius: 9999px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--egm-text, #1f2937);
    white-space: nowrap;
}


.egm-question-player-multi .egm-score-label {
    font-weight: 700;
}

.egm-question-player-multi .egm-score-current {
    color: var(--egm-success, #10b981);
}

/* Multi controls */
.egm-question-player-multi .egm-controls-multi {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    padding: 1rem;
}

.egm-question-player-multi .egm-question-prev,
.egm-question-player-multi .egm-question-next {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.egm-question-player-multi .egm-btn-icon {
    font-size: 1.1em;
}

/* Results page */
/* Main-player-like multi results layout (trophy panel + stats + revision chips) */
.egm-question-player-multi .egm-results-screen {
    padding: 1.25rem;
    text-align: left;
    max-width: 980px;
    margin: 0 auto;
}

.egm-question-player-multi .egm-multi-results-card {
    display: flex;
    flex-wrap: wrap;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--egm-border, rgba(0, 0, 0, 0.10));
    background: var(--egm-surface, rgba(255, 255, 255, 0.96));
}

.egm-question-player-multi .egm-multi-results-left {
    flex: 1 1 280px;
    padding: 1.5rem;
    text-align: center;
    color: #ffffff;
    background: linear-gradient(135deg, var(--egm-primary, #7c3aed) 0%, var(--egm-secondary, #06b6d4) 100%);
}

.egm-question-player-multi .egm-multi-results-emoji {
    font-size: 3rem;
    line-height: 1;
    margin-bottom: 0.75rem;
}

.egm-question-player-multi .egm-multi-results-title {
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0 0 0.35rem;
}

.egm-question-player-multi .egm-multi-results-message {
    margin: 0 0 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
}

.egm-question-player-multi .egm-multi-results-score {
    font-size: 2.6rem;
    font-weight: 900;
    margin-bottom: 0.75rem;
}

.egm-question-player-multi .egm-multi-results-bar {
    width: 100%;
    height: 10px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.22);
    overflow: hidden;
}

.egm-question-player-multi .egm-multi-results-bar-fill {
    height: 100%;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.92);
}

.egm-question-player-multi .egm-multi-results-right {
    flex: 1 1 340px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.egm-question-player-multi .egm-multi-stats {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.egm-question-player-multi .egm-multi-stat {
    border-radius: 12px;
    padding: 0.9rem 0.75rem;
    border: 1px solid var(--egm-border, rgba(0, 0, 0, 0.10));
    background: var(--egm-surface, rgba(255, 255, 255, 0.96));
    text-align: center;
}

.egm-question-player-multi .egm-multi-stat-value {
    font-size: 1.35rem;
    font-weight: 900;
    color: var(--egm-text, #111827);
    margin-bottom: 0.25rem;
}

.egm-question-player-multi .egm-multi-stat-label {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--egm-text-secondary, rgba(0, 0, 0, 0.62));
}

.egm-question-player-multi .egm-multi-best-streak {
    display: flex;
    justify-content: center;
    margin: 0.9rem 0 0.25rem;
}

.egm-question-player-multi .egm-multi-best-streak-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.9rem;
    border-radius: 9999px;
    font-weight: 900;
    color: var(--egm-primary, #7c3aed);
    background: var(--egm-primary-soft, rgba(124, 58, 237, 0.14));
}

.egm-question-player-multi .egm-multi-review {
    margin-top: 1rem;
}

.egm-question-player-multi .egm-multi-review-title {
    font-size: 0.95rem;
    font-weight: 900;
    text-align: center;
    margin: 0 0 0.6rem;
    color: var(--egm-text, #111827);
}

.egm-question-player-multi .egm-multi-review-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    padding: 0.75rem;
    border-radius: 14px;
    border: 1px solid var(--egm-border, rgba(0, 0, 0, 0.10));
    background: var(--egm-surface, rgba(255, 255, 255, 0.96));
}

.egm-question-player-multi .egm-multi-review-chip {
    appearance: none;
    border: 1px solid var(--egm-border, rgba(0, 0, 0, 0.10));
    background: var(--egm-bg-tertiary, rgba(0, 0, 0, 0.03));
    color: var(--egm-text, #111827);
    border-radius: 10px;
    padding: 0.45rem 0.65rem;
    font-weight: 800;
    font-size: 0.8rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: transform 0.12s ease, background 0.12s ease;
}

.egm-question-player-multi .egm-multi-review-chip:hover {
    transform: translateY(-1px);
}

.egm-question-player-multi .egm-multi-review-chip.is-correct {
    border-color: rgba(16, 185, 129, 0.35);
    background: rgba(16, 185, 129, 0.12);
}

.egm-question-player-multi .egm-multi-review-chip.is-incorrect {
    border-color: rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.10);
}

.egm-question-player-multi .egm-multi-review-chip-icon {
    font-weight: 900;
}

.egm-question-player-multi .egm-multi-results-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

.egm-question-player-multi .egm-multi-results-actions .egm-btn {
    border-radius: 9999px;
    padding: 0.85rem 1.35rem;
    font-weight: 800;
}

.egm-question-player-multi .egm-multi-results-actions .egm-results-summary-btn {
    background: var(--egm-surface, rgba(255, 255, 255, 0.96));
    border: 1px solid var(--egm-border, rgba(0, 0, 0, 0.12));
    color: var(--egm-text, #111827);
}

.egm-question-player-multi .egm-restart-btn {
    padding: 0.875rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 30px;
    background: var(--egm-primary, #FB7185);
    color: #ffffff;
    border: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.egm-question-player-multi .egm-restart-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

/* Responsive adjustments for multi-question */
@media (max-width: 600px) {
    .egm-question-player-multi .egm-question-progress-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .egm-question-player-multi .egm-question-counter,
    .egm-question-player-multi .egm-question-partial-score {
        justify-content: center;
    }

    .egm-question-player-multi .egm-multi-stats {
        grid-template-columns: 1fr;
    }

}

/* ============================================================================
   🎨 LE CADRE DES ELEMENTS DE QUESTION (session 181)

   Liseré blanc extérieur, ombre portée NON diffuse, couleur intérieure par RANGEE, trait
   intérieur SOLIDE à gauche / INTERROMPU à droite.

   ⚖️ AUTORITE : `EGM/packages/utils/src/game/question-frame-style.ts`, servie ici par le pont
   `assets/js/matching-item-layout.global.js`. ⛔ Aucune valeur du dessin n'est réécrite dans ce
   fichier : le player pose les variables (`--egm-frame-*`), la feuille ne fait que les consommer,
   avec des replis NEUTRES pour le cas où le pont ne serait pas servi.

   🪤 Les variables vivent sur le PARENT (`.egm-option`, `.egm-match-row`) et les états sur
   l'ENFANT : un état écrit sur le même nœud qu'un style inline ne gagnerait jamais.
   ============================================================================ */

.egm-question-player .egm-option.egm-has-frame .egm-option-card,
.egm-question-player .egm-match-row.egm-has-frame .egm-match-item {
    position: relative;
    /* ✅❌ 219 — le fond du verdict passe devant, ici comme dans la regle de l'option COCHEE : la
       carte jugee ne doit pas dependre de la survie d'une classe d'ecran. ⛔ La variable n'est
       jamais posee sur un `matching` : cette ligne ne change rien pour lui. */
    background: var(--egm-frame-verdict-fill, var(--egm-frame-fill));
    border: none;
    border-radius: var(--egm-frame-radius);
    /* ✅❌ **219 — LE LISERE EXTERIEUR NE DIT PLUS AUCUN ETAT** : *« Meme valides, laisse les
       contours exterieurs des cartes avec la couleur blanche par defaut. »* ⇒ un seul ecrivain
       (`--egm-frame-shadow`, pose au rendu par le pont), ⛔ plus de variable de verdict ici. Le
       verdict vit DANS la carte : trait interieur, fond, pastille, plus le SIGNE au coin. */
    box-shadow: var(--egm-frame-shadow);
    /* 🪤 L'ombre est un FILTRE : une box-shadow partirait de la boite de bordure, donc SOUS le
       lisere blanc qui la recouvre — le blanc devenait invisible sur une page claire. */
    filter: var(--egm-frame-filter);
}

/* La bordure INTERIEURE : un trait posé en retrait, jamais le bord de la carte. */
.egm-question-player .egm-option.egm-has-frame .egm-option-card::before,
.egm-question-player .egm-match-row.egm-has-frame .egm-match-item::before {
    content: "";
    position: absolute;
    top: var(--egm-frame-inset);
    right: var(--egm-frame-inset);
    bottom: var(--egm-frame-inset);
    left: var(--egm-frame-inset);
    /* 🎨 182 — l'EPAISSEUR vient elle aussi de l'autorite : le mode sobre pose un contour de 1 px
       colle au bord, le mode ludique une bague de 2 px en retrait. ⛔ Ce fichier ne choisit pas.
       ✅❌ **219 — le trait INTERIEUR d'une carte jugee est de la couleur du verdict** (*« la
       bordure interieure et exterieure deviennent vertes »*). La variable n'existe QUE sur une
       option cochee apres validation : partout ailleurs, le repli rend l'encre du repos.
       🔗 **220 — DEUX ecrivains, un seul nom** : la meme variable est posee sur la rangee d'un
       `matching` RELIE apres validation (`frameMatchingVerdictVars`). ⚖️ C'est le meme fait —
       « l'encre du verdict de cette carte » — donc le meme nom ; ⛔ ce qu'ils posent DIFFERE
       (le `matching` ne pose ni fond, ni pastille, ni opacite : sa teinte est son identite). */
    border: var(--egm-frame-border-width, 2px) var(--egm-frame-dash) var(--egm-frame-verdict-ink, var(--egm-frame-ink));
    border-radius: var(--egm-frame-inner-radius);
    /* 🎨 Un quart d'intensite en moins (demande porteur, 181bis). La valeur vient de l'AUTORITE
       (`FRAME_INNER_BORDER_OPACITY`), servie en variable : ⛔ ce fichier ne la choisit pas.
       ⚖️ L'opacite vit sur ce pseudo-element, qui ne dessine QUE le trait — elle n'atteint donc ni
       le texte, ni l'ancre, ni la pastille de la lettre, qui gardent l'encre pleine.
       ✅❌ 219 — un VERDICT, lui, est servi a pleine intensite : une couleur qui a un SENS ne
       s'approxime pas, et les deux traits doivent rendre le MEME vert. */
    opacity: var(--egm-frame-verdict-ink-opacity, var(--egm-frame-ink-opacity, 1));
    pointer-events: none;
}

/* 🎨 **182 — LA LETTRE EST BLANCHE, TOUJOURS.** La pastille ne porte plus l'ENCRE (faite pour le
   trait, mesurée contre le fond du cadre) mais `--egm-frame-badge` : la même encre **assombrie
   jusqu'à porter du blanc**. ⛔ Ne pas revenir a `--egm-frame-ink` : c'est la que la lettre
   basculait en noir sur les encres moyennes (mesure : le vert du « juste » `#16a34a` ⇒ 3,30:1). */
/* ✅❌ **219 — LA PASTILLE D'UNE CARTE JUGEE PORTE LE VERDICT** : *« la pastille du caractere de
   l'option (A, B, C, etc.) devient verte »*. ⚖️ C'est la meme mecanique qu'au repos — la couleur du
   verdict ASSOMBRIE jusqu'a porter le blanc de la lettre (`frameBadgeInk`, 182) : la lettre reste
   donc blanche, mesuree. ⛔ La variable n'est posee que sur `.egm-option` : un `matching` ne la
   recoit jamais, sa pastille ne bouge pas d'un pixel. */
.egm-question-player .egm-option.egm-has-frame .egm-option-letter,
.egm-question-player .egm-match-row.egm-has-frame .egm-match-out-label {
    background: var(--egm-frame-verdict-badge, var(--egm-frame-badge, var(--egm-frame-ink)));
    color: var(--egm-frame-verdict-on-ink, var(--egm-frame-on-ink));
    border-color: var(--egm-frame-verdict-badge, var(--egm-frame-badge, var(--egm-frame-ink)));
}

/* ── Les ETATS : ils changent l'ENCRE et le FOND, ⛔ jamais la FORME du trait ─────────────── */

.egm-question-player .egm-option.egm-has-frame:hover:not(.egm-disabled) .egm-option-card {
    background: var(--egm-frame-fill);
    border: none;
}

/* 🎨 **218 — UNE CARTE À CHOIX GARDE SA COULEUR EN ÉTANT CHOISIE** (loi 213, jamais arrivée ici).
   Cocher posait `--egm-frame-ink: primaire` et le fond de la primaire ; valider posait le vert ou
   le rouge : quatre options si différentes au repos rendaient **la même** couleur dès qu'on y
   touchait. C'est exactement ce que la 213 a retiré de la Console et de QPP.
   ⇒ Cocher change le seul FOND, et c'est **9 % de SA teinte** (`--egm-frame-fill-selected`, calculé
   par option depuis son encre) ; l'encre du trait, elle, ⛔ ne bouge plus.
   ⛔ **Aucune règle pour `.egm-correct` / `.egm-incorrect`** : la 213 interdit a une couleur d'ETAT
   de remplacer le ton d'une carte TANT QUE la question est ouverte
   ⇒ [[a-state-colour-that-replaces-a-tone-erases-what-made-each-card-distinct]].
   ✅❌ **219 — une fois la question VALIDEE, c'est le verdict qui parle** : le fond d'une option
   cochee prend la MEME teinte que son trait et sa pastille (vert / rouge), a la meme dilution qu'une
   carte cochee. ⚖️ La variable est posee par le player sur la seule option COCHEE : absente, tout
   le reste de l'ecran ne bouge pas d'un pixel (une bonne reponse non cochee garde son ton, 215).
   ⚖️ `matching` n'est pas concerné : lui colore vraiment par CARTE (192), et ses états vivent sur
   `.egm-match-item` (`is-connected`, `is-pending`), pas ici. */
.egm-question-player .egm-option.egm-has-frame.egm-selected .egm-option-card {
    background: var(--egm-frame-verdict-fill, var(--egm-frame-fill-selected, var(--egm-frame-fill)));
}

/* 🎯 **La carte ARMÉE porte le halo**, comme chez QPP (`emphasis: isSelected && !answered`) : c'est
   le liseré épaissi de l'autorité, ⛔ pas une couleur inventée. Il s'éteint à la validation (la
   carte devient `egm-disabled`), où le liseré redevient le BLANC du repos (219). */
.egm-question-player .egm-option.egm-has-frame.egm-selected:not(.egm-disabled) .egm-option-card {
    box-shadow: var(--egm-frame-shadow-emphasis, var(--egm-frame-shadow));
}

.egm-question-player .egm-option.egm-has-frame:focus-within .egm-option-card {
    outline: 2px solid var(--egm-primary, #7c3aed);
    outline-offset: 4px;
}

/* 🎨 **La carte ARMEE garde SON encre** (181bis) : le cordon qui en part porte exactement cette
   couleur-la, et un contour repeint en primaire l'aurait aussitot contredit. C'est le HALO qui dit
   « c'est d'ici que ca part » — il vit dans le liseré, pose par l'autorite. */
.egm-question-player .egm-match-row.egm-has-frame .egm-match-item:hover,
.egm-question-player .egm-match-row.egm-has-frame .egm-match-item.is-active,
.egm-question-player .egm-match-row.egm-has-frame .egm-match-item.is-pending {
    border: none;
}

.egm-question-player .egm-match-row.egm-has-frame .egm-match-item.is-pending,
.egm-question-player .egm-match-row.egm-has-frame .egm-match-item.is-active {
    box-shadow: var(--egm-frame-shadow-emphasis, var(--egm-frame-shadow));
}

/* ⛔ Un lien ne repeint PLUS le contour : la carte garde SON encre, sinon le cordon (qui prend
   l'encre des deux cartes) et le cadre finissaient par se contredire. C'est l'ANCRE, pleine, qui
   dit « je suis relié ». */
.egm-question-player .egm-match-row.egm-has-frame .egm-match-item.is-connected,
.egm-question-player .egm-match-row.egm-has-frame .egm-match-item.is-linked {
    background: var(--egm-frame-fill);
    border: none;
}

/* L'ancre suit l'encre du cadre — elle est le point de départ du cordon.
   ✅❌ **220 — et le VERDICT prend la main quand la question est close** : l'ancre est la marque qui
   dit « ce lien-ci », c'est donc elle qui porte la couleur du jugement (parité Console). ⚖️ La
   variable n'est posée que sur la rangée de GAUCHE reliée : partout ailleurs le repli rend l'encre
   du repos, au pixel près. ⛔ Le FOND et la PASTILLE de la carte, eux, ne bougent pas — la teinte
   d'une carte de `matching` est son identité (192). */
.egm-question-player .egm-match-row.egm-has-frame .egm-match-anchor {
    border-color: var(--egm-frame-verdict-ink, var(--egm-frame-ink));
    background: var(--egm-bg, #ffffff);
}

.egm-question-player .egm-match-row.egm-has-frame .egm-match-item.is-connected .egm-match-anchor,
.egm-question-player .egm-match-row.egm-has-frame .egm-match-item.is-linked .egm-match-anchor {
    background: var(--egm-frame-verdict-ink, var(--egm-frame-ink));
}

/* ⚠️ L'écart entre deux rangées de cartes est DOUBLÉ (demande porteur, 181) : le liseré déborde de
   3 px de chaque côté, et un cadre a besoin d'air pour se lire comme un objet posé.
   ⛔ Pas de marge sur la carte elle-même : en grille elle décalerait une colonne sur deux. */
.egm-question-player .egm-options:has(.egm-option.egm-has-frame),
.egm-question-player .egm-matching-col:has(.egm-match-row.egm-has-frame) {
    gap: 1.5rem;
    --egm-tiles-gap: 1.5rem; /* 2303 : la tuile seule d'une rangée impaire se cale sur cet écart */
}

/* ── DOCUMENT D'HISTOIRE — `blockquote.egm-hist-doc` (EGM-QUILL-CONTRACT, copie, 1601) ─────────
   Source unique : `EGM/packages/stylekit/src/styles/quill-content.css` (section du même nom) — toute
   évolution s'y rejoue. Carte « document » : texte droit, guillemet décoratif, source en petit sous un
   filet, marge basse `!important` (l'énoncé qui suit est un nœud texte ⇒ la carte est `:last-child`). */
.egm-wysiwyg-content blockquote.egm-hist-doc {
    position: relative;
    margin: 0.25em 0 1.6em !important;
    padding: 1.1em 1.4em 1em 3.1em;
    background: #fbf7ee;
    border: 1px solid rgba(110, 69, 0, 0.18);
    border-left: 5px solid #8a5a14;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    opacity: 1;
    font-style: normal;
    color: #1e293b;
    text-align: left;
}
.egm-wysiwyg-content blockquote.egm-hist-doc::before {
    content: '\201C';
    position: absolute;
    left: 0.32em;
    top: 0.05em;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 3.2em;
    line-height: 1;
    color: #8a5a14;
    opacity: 0.55;
    pointer-events: none;
}
.egm-wysiwyg-content blockquote.egm-hist-doc p {
    margin: 0 0 0.55em;
    font-size: 0.95em;
    line-height: 1.6;
    color: #1e293b;
}
.egm-wysiwyg-content blockquote.egm-hist-doc cite {
    display: block;
    margin-top: 0.8em;
    padding-top: 0.65em;
    border-top: 1px dashed rgba(30, 41, 59, 0.25);
    font-size: 0.78em;
    font-style: normal;
    line-height: 1.45;
    color: #475569;
}
.egm-wysiwyg-content blockquote.egm-hist-doc cite::before { content: '\2014\00a0'; }
@media (max-width: 480px) {
    .egm-wysiwyg-content blockquote.egm-hist-doc { padding: 0.95em 1em 0.9em 2.4em; border-radius: 12px; }
    .egm-wysiwyg-content blockquote.egm-hist-doc::before { font-size: 2.6em; left: 0.22em; }
}

/* ── DIAPOSITIVES — LE COMPOSANT `<slide>` (EGM-QUILL-CONTRACT) ───────────────────────────────
   Un auteur entoure une portion de contenu de `<slide>…</slide>` : elle devient UNE PAGE. Des
   `<slide>` voisins forment un jeu feuilletable, monté par `EGM/packages/utils/src/content/
   slide-deck.ts` (et son bundle `egm-games/assets/js/egm-slides.global.js` pour les surfaces
   sans bundler). ⚖️ La balise est le contrat : elle s'écrit à la main dans l'onglet `</>`, dans
   une page WordPress, partout — c'est ce qui rend ce composant appelable dans TOUT le site.

   ⚖️ QUATRE décisions, et leur raison :
     1. ⛔ AUCUN SCOPE À UNE RACINE. Contrairement aux 3 boîtes de leçon, `slide` n'est pas une
        classe posée sur un `<div>` générique : c'est une balise qui n'existe QUE là où un auteur
        l'a écrite. La scoper à une racine de leçon interdirait l'usage promis (toute page).
     2. LE CADRE VIT SUR LA PAGE, ⛔ pas sur la scène. Sans JavaScript, les pages restent EMPILÉES
        et chacune garde son cadre : le contenu se lit toujours, il ne se feuillette pas. C'est ce
        qui rend le composant sûr sur une surface non bâtie (documentation HTML, export).
     3. LA SCÈNE EST UNE GRILLE À UNE SEULE CELLULE, et les pages masquées gardent leur place
        (`visibility`, ⛔ jamais `display:none`) : la hauteur est celle de la PLUS GRANDE page,
        donc la barre de navigation ne saute pas d'une page à l'autre sous le doigt de l'élève.
        `visibility: hidden` retire aussi le contenu de l'arbre d'accessibilité — une page non
        montrée n'est donc jamais lue.
     4. LA BARRE SUIT LE MODÈLE FOURNI PAR LE PORTEUR (2026-08-13), qui est une SPÉCIFICATION :
        ⭐ les trois blocs (flèche · nombres · flèche) sont COLLÉS AU CENTRE, ⛔ jamais aux
        extrémités — quand des pages s'ajoutent, le bloc central s'élargit et POUSSE les flèches
        vers l'extérieur. C'est `--egm-slide-gap`, réglé par le JS selon le nombre de pages.
        Aux extrémités la flèche est DÉSARMÉE, jamais masquée : une commande qui disparaît
        déplace toutes les autres.

   🪤 LES JETONS SONT POSÉS SUR LA BARRE, ⛔ PAS SUR LA PAGE NI SUR `:root`. Le modèle les nommait
   `--accent`, `--texte`… : des noms si courants qu'ils auraient (a) écrasé ceux d'une page du site
   qui accueille le composant, et (b) FUITÉ par héritage dans le contenu écrit par l'auteur, à
   l'intérieur même des pages. Posés sur `.egm-slide-deck__nav` et préfixés, ils ne descendent que
   sur les commandes ⇒ [[a-stylesheet-written-for-a-standalone-page-restyles-the-whole-app]].
   ────────────────────────────────────────────────────────────────────────────────────────── */

slide {
  display: block;
  position: relative;
  margin: 1rem 0;
  padding: 1.15rem 1.3rem;
  border-radius: 18px;
  background: #ffffff;
  color: #1d1d1f;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 28px -18px rgba(0, 0, 0, 0.35);
  line-height: 1.6;
}

slide > :first-child { margin-top: 0; }
slide > :last-child { margin-bottom: 0; }

.egm-slide-deck {
  margin: 1.1rem 0;
  /* ⛔ Le conteneur ne peint RIEN : le cadre appartient à la page, la barre à elle-même. */
}

.egm-slide-deck__stage {
  display: grid;
  grid-template-columns: 1fr;
}

.egm-slide-deck__stage > slide {
  grid-area: 1 / 1;
  margin: 0;
  visibility: hidden;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.egm-slide-deck__stage > slide.is-current {
  visibility: visible;
  opacity: 1;
  transform: none;
}

.egm-slide-deck__nav {
  /* Les jetons du modèle, préfixés et posés ICI (voir 🪤 ci-dessus). */
  --egm-slide-accent: #626bea;
  --egm-slide-accent-ring: #626bea33;
  --egm-slide-ink: #5a5f6b;
  --egm-slide-ink-off: #b9bdc7;
  --egm-slide-bar-bg: #fbfbfc;
  --egm-slide-bar-border: #ececf1;
  --egm-slide-dot: 2.5rem;
  --egm-slide-arrow-w: 3.25rem;
  --egm-slide-gap: 1rem;

  box-sizing: border-box;
  margin-top: 0.6rem;
  padding: 0.75rem 1.25rem;
  background: var(--egm-slide-bar-bg);
  border: 1px solid var(--egm-slide-bar-border);
  border-radius: 999px;
  color: var(--egm-slide-ink);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* ⭐ Les 3 blocs sont collés AU CENTRE : le bloc des nombres s'élargit et repousse les
     flèches. ⛔ `space-between` les aurait plaquées aux extrémités de la barre. */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--egm-slide-gap);
  transition: gap 0.35s cubic-bezier(0.22, 0.9, 0.3, 1);
}

.egm-slide-deck__arrow {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: var(--egm-slide-arrow-w);
  height: var(--egm-slide-dot);
  padding: 0;
  border: 0;
  background: none;
  color: var(--egm-slide-accent);
  cursor: pointer;
  border-radius: 0.75rem;
  transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease;
}

.egm-slide-deck__arrow svg {
  width: 100%;
  height: auto;
  display: block;
  fill: currentColor;
}

.egm-slide-deck__arrow:hover:not(:disabled) { transform: translateX(var(--egm-slide-push, 0)); }
.egm-slide-deck__arrow[data-dir="prev"]:hover:not(:disabled) { --egm-slide-push: -0.25rem; }
.egm-slide-deck__arrow[data-dir="next"]:hover:not(:disabled) { --egm-slide-push: 0.25rem; }

.egm-slide-deck__arrow:disabled {
  color: var(--egm-slide-ink-off);
  opacity: 0.45;
  cursor: default;
}

/**
 * 🪤 Les nombres sont une SUITE DE BOUTONS, ⛔ pas un `<ol>`. Le modèle en faisait une liste, mais
 * la barre vit À L'INTÉRIEUR d'une racine de texte riche : notre propre contrat y pose
 * `ol { list-style: decimal !important }`. Une liste ici se serait NUMÉROTÉE elle-même, chaque
 * pastille précédée de son propre numéro ⇒ [[a-stylesheet-written-for-a-standalone-page-restyles-the-whole-app]].
 */
.egm-slide-deck__pills {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  min-width: 0;
}

.egm-slide-deck__pill {
  width: var(--egm-slide-dot);
  height: var(--egm-slide-dot);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--egm-slide-ink);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.25s ease;
}

.egm-slide-deck__pill:hover { background: #00000008; }

/* ⚖️ UN SEUL crochet pour la page courante : `aria-current="page"`, la valeur normalisée d'une
   pagination. Une classe jumelle aurait fait deux écrivains pour un seul fait. */
.egm-slide-deck__pill[aria-current="page"] {
  background: var(--egm-slide-accent);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 0 0 4px var(--egm-slide-accent-ring);
}

/* ⌨️ Le liseré de focus appartient au CLAVIER : il ne se décore pas, il se voit. */
.egm-slide-deck__arrow:focus-visible { outline: 2px solid var(--egm-slide-accent); outline-offset: 3px; }
.egm-slide-deck__pill:focus-visible { outline: 2px solid var(--egm-slide-accent); outline-offset: 2px; }

/* ⚖️ Un mouvement qu'on n'a pas demandé n'est pas un style : sous `reduce`, on coupe. */
@media (prefers-reduced-motion: reduce) {
  .egm-slide-deck__stage > slide,
  .egm-slide-deck__nav,
  .egm-slide-deck__arrow,
  .egm-slide-deck__pill { transition: none; transform: none; }
}

/* Les deux seuils du modèle : la barre se resserre à 32rem, le cadre de la page à 600 px. */
@media (max-width: 32rem) {
  .egm-slide-deck__nav {
    --egm-slide-dot: 2.125rem;
    --egm-slide-arrow-w: 2.5rem;
    padding: 0.6rem 0.75rem;
  }
}

@media (max-width: 600px) {
  slide { padding: 0.85rem 0.9rem; border-radius: 14px; }
  .egm-slide-deck__nav { margin-top: 0.5rem; }
}

/* ── LEÇON — LES TROIS BLOCS D'ATTENTION (EGM-QUILL-CONTRACT) ─────────────────────────────────
   Modèle fourni par le porteur (2026-08-13) : `.lesson-box` (idée importante), `.example-box`
   (exemple), `.attention-box` (mise en garde). Ce sont des classes de MARKUP écrites par l'auteur :
   elles doivent rendre pareil sur les trois lecteurs, d'où leur place dans le contrat.

   ⚖️ QUATRE écarts assumés par rapport au modèle fourni, et leur raison :
     1. tout est SCOPÉ à une racine de leçon. Le modèle stylait `h3` et `h4` NUS — transposé tel
        quel, il aurait repeint tous les titres de l'admin, du thème et des autres types de
        question, et il entrait en conflit, à spécificité égale, avec les tailles déjà posées par
        ce contrat (`.egm-wysiwyg-content h3 { font-size: 1.15em }`).
     2. chaque boîte pose son ENCRE. Le modèle ne fixe que le fond ; sur les thèmes sombres
        (`dark`, `gaming_kids`) le texte hérité est quasi blanc et deviendrait illisible sur un
        bleu pâle. Une boîte qui peint son fond doit peindre son texte.
     3. l'icône est une COLONNE DE GRILLE, ⛔ pas une pastille posée sur un retrait. Une première
        version l'avait mise en `position: absolute` avec un `padding-left` : le texte partait à la
        ligne sous l'icône et TOUT le bloc se retrouvait décalé vers la droite. En grille, l'icône
        occupe la 1ʳᵉ colonne de la 1ʳᵉ ligne, le contenu la 2ᵉ : ils sont sur la même ligne PAR
        CONSTRUCTION, et rien n'est en retrait.
     4. le titre de l'exemple n'est plus CENTRÉ. Le modèle le centrait — juste dans une page
        étroite, mais dans une console large la ligne semble reculer vers la droite sans raison.
   ────────────────────────────────────────────────────────────────────────────────────────── */

:is(.egm-lesson-content, .egm-lesson-more-content, .ql-editor) :is(.lesson-box, .example-box, .attention-box) {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.55rem;
  align-items: start;
  margin: 0.9rem 0;
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  line-height: 1.6;
  color: #1f2937;
}

/* 🔊 L'icône vit en CSS : décorative, elle reste hors du texte lu par la voix et hors du HTML
   enregistré. `grid-row: 1` la colle a la PREMIERE ligne du contenu, quoi que l'auteur y mette. */
:is(.egm-lesson-content, .egm-lesson-more-content, .ql-editor) :is(.lesson-box, .example-box, .attention-box)::before {
  grid-column: 1;
  grid-row: 1;
  font-size: 1.05em;
  line-height: inherit;
}

/* ⛔ Sans cette règle, le 2e enfant et les suivants repartiraient dans la colonne de l'icône. */
:is(.egm-lesson-content, .egm-lesson-more-content, .ql-editor) :is(.lesson-box, .example-box, .attention-box) > * {
  grid-column: 2;
  min-width: 0;
}

/* Bloc : idée importante */
:is(.egm-lesson-content, .egm-lesson-more-content, .ql-editor) .lesson-box {
  background: #f4f8ff;
  border: 2px solid #c9daf5;
}
:is(.egm-lesson-content, .egm-lesson-more-content, .ql-editor) .lesson-box::before { content: '💡'; }
:is(.egm-lesson-content, .egm-lesson-more-content, .ql-editor) .lesson-box p { margin: 0; }

/* Bloc : exemple */
:is(.egm-lesson-content, .egm-lesson-more-content, .ql-editor) .example-box {
  background: #fdf8f2;
  border: 2px solid #d9c8b8;
}
:is(.egm-lesson-content, .egm-lesson-more-content, .ql-editor) .example-box::before { content: '📝'; }
:is(.egm-lesson-content, .egm-lesson-more-content, .ql-editor) .example-box > p {
  margin: 0 0 0.5rem;
  font-size: 1.05em;
}
:is(.egm-lesson-content, .egm-lesson-more-content, .ql-editor) .example-box > p:last-child { margin-bottom: 0; }
:is(.egm-lesson-content, .egm-lesson-more-content, .ql-editor) .example-box ul {
  margin: 0.35rem 0 0;
  padding-left: 1.2rem;
}
:is(.egm-lesson-content, .egm-lesson-more-content, .ql-editor) .example-box li { margin: 0.3rem 0; }

/* Bloc : attention */
:is(.egm-lesson-content, .egm-lesson-more-content, .ql-editor) .attention-box {
  background: #fff8e6;
  border-left: 5px solid #e0a52b;
  border-radius: 8px;
}
:is(.egm-lesson-content, .egm-lesson-more-content, .ql-editor) .attention-box::before { content: '⚠️'; }
:is(.egm-lesson-content, .egm-lesson-more-content, .ql-editor) .attention-box p { margin: 0; }

/* Titres de la leçon */
:is(.egm-lesson-content, .egm-lesson-more-content, .ql-editor) .lesson-box + h4,
:is(.egm-lesson-content, .egm-lesson-more-content, .ql-editor) .example-box + .attention-box + h4 {
  margin-top: 1.2rem;
}
:is(.egm-lesson-content, .egm-lesson-more-content) h3 {
  margin: 0 0 0.8rem;
  font-size: 1.45rem;
  line-height: 1.3;
}
:is(.egm-lesson-content, .egm-lesson-more-content) h4 {
  margin: 1rem 0 0.5rem;
  font-size: 1.15rem;
  line-height: 1.4;
}

/* Paragraphes, listes et mise en valeur DANS les boîtes */
:is(.egm-lesson-content, .egm-lesson-more-content, .ql-editor) :is(.lesson-box, .example-box, .attention-box) p {
  font-size: 1rem;
}
:is(.egm-lesson-content, .egm-lesson-more-content, .ql-editor) :is(.lesson-box, .example-box, .attention-box) :is(ul, ol) {
  margin-top: 0.4rem;
  margin-bottom: 0.4rem;
}
:is(.egm-lesson-content, .egm-lesson-more-content, .ql-editor) :is(.lesson-box, .example-box, .attention-box) li {
  margin-bottom: 0.3rem;
}
:is(.egm-lesson-content, .egm-lesson-more-content, .ql-editor) :is(.lesson-box, .example-box, .attention-box) strong {
  font-weight: 700;
}

/* Adaptation mobile */
@media (max-width: 600px) {
  :is(.egm-lesson-content, .egm-lesson-more-content, .ql-editor) :is(.lesson-box, .example-box, .attention-box) {
    margin: 0.75rem 0;
    padding: 0.6rem 0.7rem;
    column-gap: 0.45rem;
  }
  :is(.egm-lesson-content, .egm-lesson-more-content) h3 { font-size: 1.3rem; }
  :is(.egm-lesson-content, .egm-lesson-more-content) h4 { font-size: 1.08rem; }
  :is(.egm-lesson-content, .egm-lesson-more-content, .ql-editor) .example-box > p { font-size: 1rem; }
}