/* ====================================== */
/* STYLES POUR LA PAGE QUIZ               */
/* Design Iktisar — Systeme de Quiz       */
/* ====================================== */

/* --- Loading State --- */
.quiz-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 20px;
    color: var(--text-secondary, #4A5568);
}

.quiz-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--panel, #F5F2EB);
    border-top-color: var(--accent, #1A5238);
    border-radius: 50%;
    animation: quizSpin 0.8s linear infinite;
}

@keyframes quizSpin {
    to { transform: rotate(360deg); }
}

.quiz-loading p {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 0.95rem;
    color: var(--text-secondary, #4A5568);
}

/* --- Etat vide --- */
.quiz-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 16px;
    text-align: center;
    padding: 40px 20px;
}

.quiz-empty-icon {
    color: var(--muted, #9ca3af);
}

.quiz-empty h2 {
    font-family: var(--font-serif, 'Lora', serif);
    font-size: 1.4rem;
    color: var(--text-primary, #2C3539);
    margin: 0;
}

.quiz-empty p {
    color: var(--text-secondary, #4A5568);
    font-size: 0.95rem;
    margin: 0;
}

/* --- Boutons generiques --- */
.quiz-btn {
    padding: 12px 28px;
    border: none;
    border-radius: var(--card-radius, 8px);
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* --- Ecran de reprise --- */
.quiz-resume {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 20px;
    text-align: center;
    padding: 40px 20px;
}

.quiz-resume-icon {
    color: var(--accent, #1A5238);
}

.quiz-resume h2 {
    font-family: var(--font-serif, 'Lora', serif);
    font-size: 1.4rem;
    color: var(--text-primary, #2C3539);
    margin: 0;
}

.quiz-resume p {
    color: var(--text-secondary, #4A5568);
    font-size: 0.95rem;
    margin: 0;
    max-width: 340px;
}

.quiz-resume-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 8px;
}

/* --- Page quiz (pleine largeur hub) --- */
.quiz-page-wrap {
    max-width: 100%;
}

/* --- Hub (menu principal) --- */
.quiz-hub {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px 0 24px;
    width: 100%;
}

.quiz-hub-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

.quiz-hub-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
    min-width: 0;
    background: var(--panel-light, #FAF9F6);
    padding: 20px 18px;
    border-radius: var(--card-radius, 8px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.04));
}

.quiz-hub-side {
    min-width: 0;
}

.quiz-hub-intro {
    text-align: left;
}

.quiz-hub-intro h2,
.quiz-hub-intro h3 {
    font-family: var(--font-serif, 'Lora', serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary, #2C3539);
    margin: 0 0 8px;
}

.quiz-hub-intro p {
    margin: 0;
    font-size: 0.92rem;
    color: var(--text-secondary, #4A5568);
}

.quiz-hub-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quiz-hub-card {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 16px 18px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--card-radius, 8px);
    background: var(--panel-light, #FAF9F6);
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
    font-family: var(--font-sans, 'Inter', sans-serif);
}

.quiz-hub-card:hover:not(:disabled) {
    border-color: var(--accent, #1A5238);
    box-shadow: var(--shadow-hover, 0 8px 20px rgba(44, 53, 57, 0.08));
    transform: translateY(-1px);
}

.quiz-hub-card:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.quiz-hub-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(26, 82, 56, 0.1);
    color: var(--accent, #1A5238);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.quiz-hub-card-icon svg {
    width: 22px;
    height: 22px;
}

.quiz-hub-card-body {
    flex: 1;
    min-width: 0;
}

.quiz-hub-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #2C3539);
    margin: 0 0 4px;
}

.quiz-hub-card-desc {
    font-size: 0.82rem;
    color: var(--text-secondary, #4A5568);
    margin: 0;
    line-height: 1.4;
}

.quiz-hub-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 12px;
    background: var(--accent, #1A5238);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    vertical-align: middle;
}

.quiz-hub-panel-title {
    font-family: var(--font-serif, 'Lora', serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary, #2C3539);
    margin: 0 0 14px;
}

.quiz-hub-history-panel {
    padding-top: 4px;
}

.quiz-hub-see-all {
    margin-top: 12px;
    padding: 0;
    border: none;
    background: none;
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--accent, #1A5238);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.quiz-hub-see-all:hover {
    opacity: 0.85;
}

/* --- Progression (panneau hub) --- */
.quiz-hub-progression {
    background: var(--panel-light, #FAF9F6);
    padding: 20px 18px;
    border-radius: var(--card-radius, 8px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.04));
    margin-top: 0;
}

.quiz-mastery-bar-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.quiz-mastery-bar {
    flex: 1;
    height: 8px;
    background: var(--panel, #F5F2EB);
    border-radius: 4px;
    overflow: hidden;
}

.quiz-mastery-fill {
    height: 100%;
    background: var(--accent, #1A5238);
    border-radius: 4px;
    transition: width 0.6s ease;
}

.quiz-mastery-pct {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent, #1A5238);
    min-width: 36px;
    text-align: right;
}

.quiz-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.quiz-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.02);
}

.quiz-stat-val {
    font-family: var(--font-serif, 'Lora', serif);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary, #2C3539);
}

.quiz-stat-lbl {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 0.68rem;
    color: var(--muted, #9ca3af);
    text-align: center;
}

/* --- Historique (aperçu + popup) --- */

.quiz-history-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.quiz-history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--card-radius, 8px);
    background: var(--panel-light, #FAF9F6);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.quiz-history-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.quiz-history-date {
    font-size: 0.88rem;
    color: var(--text-secondary, #4A5568);
}

.quiz-history-mode-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 20px;
    width: fit-content;
}

.quiz-history-mode-classique {
    background: rgba(100, 100, 120, 0.12);
    color: #555;
}

.quiz-history-mode-chrono {
    background: rgba(200, 100, 20, 0.12);
    color: #b05a10;
}

.quiz-history-mode-flash {
    background: rgba(184, 158, 20, 0.15);
    color: #8a6e0a;
}

.quiz-history-mode-sans_faute {
    background: rgba(26, 82, 56, 0.12);
    color: var(--accent, #1A5238);
}

.quiz-history-score {
    font-size: 1rem;
    font-weight: 700;
    font-family: var(--font-sans, 'Inter', sans-serif);
    padding: 4px 12px;
    border-radius: 20px;
    background: var(--panel, #F5F2EB);
    color: var(--text-primary, #2C3539);
    flex-shrink: 0;
}

.quiz-history-score.score-high {
    background: rgba(26, 82, 56, 0.12);
    color: var(--accent, #1A5238);
}

.quiz-history-score.score-mid {
    background: rgba(180, 130, 40, 0.15);
    color: #8a6020;
}

.quiz-history-score.score-low {
    background: rgba(180, 80, 60, 0.12);
    color: #9b3d2e;
}

.quiz-history-empty {
    text-align: center;
    padding: 16px 8px;
    color: var(--text-secondary, #4A5568);
    font-size: 0.9rem;
    margin: 0;
}

.quiz-history-popup-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px 4px 16px;
}

.quiz-history-popup .iktisar-story-scroll-area {
    max-height: 55vh;
}

@media (max-width: 820px) {
    .quiz-hub-layout {
        grid-template-columns: 1fr;
    }

    .quiz-hub-side {
        order: -1;
    }

    .quiz-hub-intro {
        text-align: center;
    }
}

.quiz-results-hub {
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
}

body.theme-noir .quiz-hub-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

body.theme-noir .quiz-history-item,
body.theme-noir .quiz-hub-progression,
body.theme-noir .quiz-hub-main {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

body.theme-noir .quiz-stat {
    background: rgba(255, 255, 255, 0.03);
}

/* --- Boutons generiques --- */
.quiz-btn-primary {
    background: var(--accent, #1A5238);
    color: #fff;
}

.quiz-btn-primary:hover {
    background: var(--accent-dark, #14412b);
    transform: translateY(-1px);
    box-shadow: var(--shadow-hover, 0 10px 25px rgba(44, 53, 57, 0.1));
}

.quiz-btn-secondary {
    background: var(--panel, #F5F2EB);
    color: var(--text-primary, #2C3539);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.quiz-btn-secondary:hover {
    background: var(--panel-light, #FAF9F6);
    transform: translateY(-1px);
    box-shadow: var(--shadow-hover, 0 10px 25px rgba(44, 53, 57, 0.1));
}

/* --- Quiz Header --- */
.quiz-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 5px;
    border-bottom: 1px solid var(--border-light, rgba(0, 0, 0, 0.08));
    min-height: 56px;
}

.quiz-back-btn {
    flex-shrink: 0;
}

.quiz-book-title {
    flex: 1;
    font-family: var(--font-serif, 'Lora', serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary, #2C3539);
    text-align: center;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    align-self: center;
}

.quiz-progress-info {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent, #1A5238);
    background: rgba(26, 82, 56, 0.08);
    padding: 4px 12px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* --- Barre de progression --- */
.quiz-progress-bar {
    width: 100%;
    height: 4px;
    background: var(--panel, #F5F2EB);
    border-radius: 4px;
    margin-bottom: 32px;
    overflow: hidden;
}

.quiz-progress-fill {
    height: 100%;
    background: var(--accent-gold, #b89e14);
    border-radius: 4px;
    transition: width 0.4s ease;
}

/* --- Zone de question --- */
.quiz-question-area {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 12px;
    box-sizing: border-box;
}

.quiz-question-number {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent-gold, #b89e14);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
}

.quiz-question-text {
    font-family: var(--font-serif, 'Lora', serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary, #2C3539);
    line-height: 1.5;
    margin-bottom: 8px;
}

/* Unified badge style */
.quiz-badge {
    display: inline-block;
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 16px;
    white-space: nowrap;
    transition: all 0.2s ease;
    cursor: help;
}

/* Difficulty Badge - Palette bleue */
.quiz-badge-difficulty {
    position: relative;
}

.quiz-badge-difficulty.level-1 {
    background: rgba(33, 150, 243, 0.15);
    color: #1976d2;
}

.quiz-badge-difficulty.level-2 {
    background: rgba(66, 133, 244, 0.15);
    color: #3b5bdb;
}

.quiz-badge-difficulty.level-3 {
    background: rgba(25, 103, 210, 0.15);
    color: #1967d2;
}

/* Popup sur hover */
.quiz-badge:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 130%;
    left: 0;
    background: var(--panel, #2a3a3d);
    color: var(--text-primary, #fff);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 500;
    white-space: normal;
    width: max-content;
    max-width: min(220px, calc(100vw - 32px));
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    pointer-events: none;
}

/* Les badges proches du bord droit (ex: statut) ancrent la popup à droite
   plutôt qu'à gauche, pour qu'elle ne déborde jamais du conteneur. */
.quiz-badge:last-child:hover::after {
    left: auto;
    right: 0;
}

/* Badge du milieu (ex: type de réponse) : assez de place des deux côtés,
   la popup reste centrée comme avant. */
.quiz-badge:nth-child(2):hover::after {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

.quiz-badge:hover::before {
    content: '';
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--panel, #2a3a3d);
    z-index: 1000;
    pointer-events: none;
}

/* Answer Type Badge - Palette violette */
.quiz-badge-answer-type {
    position: relative;
}

.quiz-badge-answer-type.type-single {
    background: rgba(124, 77, 255, 0.12);
    color: #6a3de8;
}

.quiz-badge-answer-type.type-multiple {
    background: rgba(124, 77, 255, 0.18);
    color: #5b2fd6;
    font-weight: 700;
}

.quiz-badge-answer-type.type-boolean {
    background: rgba(0, 150, 136, 0.15);
    color: #00796b;
}

/* Status Badge - Palette orange/rouge */
.quiz-badge-status {
    position: relative;
}

.quiz-status-unseen {
    background: rgba(158, 158, 158, 0.15);
    color: #666;
}

.quiz-status-mastered {
    background: rgba(76, 175, 80, 0.15);
    color: #388e3c;
    font-weight: 700;
}

.quiz-status-to_review {
    background: rgba(0, 150, 136, 0.13);
    color: #00796b;
    font-weight: 600;
}

.quiz-status-warning {
    background: rgba(255, 112, 67, 0.15);
    color: #d84315;
    font-weight: 600;
}

.quiz-status-critical {
    background: rgba(229, 57, 53, 0.15);
    color: #c62828;
    font-weight: 700;
}

/* Thème sombre - Difficulté */
body.theme-noir .quiz-badge-difficulty.level-1 {
    background: rgba(66, 165, 245, 0.2);
    color: #64b5f6;
}

body.theme-noir .quiz-badge-difficulty.level-2 {
    background: rgba(66, 165, 245, 0.25);
    color: #81d4fa;
}

body.theme-noir .quiz-badge-difficulty.level-3 {
    background: rgba(33, 150, 243, 0.25);
    color: #42a5f5;
}

/* Thème sombre - Type de réponse */
body.theme-noir .quiz-badge-answer-type.type-single {
    background: rgba(124, 77, 255, 0.2);
    color: #b39ddb;
}

body.theme-noir .quiz-badge-answer-type.type-multiple {
    background: rgba(124, 77, 255, 0.3);
    color: #9575cd;
    font-weight: 700;
}

body.theme-noir .quiz-badge-answer-type.type-boolean {
    background: rgba(0, 150, 136, 0.25);
    color: #4db6ac;
}

/* Thème sombre - Status */
body.theme-noir .quiz-status-unseen {
    background: rgba(200, 200, 200, 0.15);
    color: #aaa;
}

body.theme-noir .quiz-status-mastered {
    background: rgba(76, 175, 80, 0.25);
    color: #81c784;
    font-weight: 700;
}

body.theme-noir .quiz-status-to_review {
    background: rgba(0, 150, 136, 0.2);
    color: #4db6ac;
    font-weight: 600;
}

body.theme-noir .quiz-status-warning {
    background: rgba(255, 112, 67, 0.2);
    color: #ff7043;
    font-weight: 600;
}

body.theme-noir .quiz-status-critical {
    background: rgba(239, 83, 80, 0.25);
    color: #ef5350;
    font-weight: 700;
}

body.theme-noir .quiz-status-critical {
    background: rgba(244, 67, 54, 0.25);
    color: #ef5350;
}

/* --- Options de reponse --- */
.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
    margin-top: 24px;
}

.quiz-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: var(--panel-light, #FAF9F6);
    border: 1.5px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--card-radius, 8px);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 0.95rem;
    color: var(--text-primary, #2C3539);
    position: relative;
}

/* Piloté par la classe .quiz-option--kbfocus (posée en JS sur focusin,
   cf. quiz-modes-integration.js) plutôt que par :focus directement : un
   clic en dehors des options (pour scroller la page) relâche le focus
   clavier réel sans effacer cette surbrillance, qui ne bouge que si une
   AUTRE option est explicitement engagée (survol, clic, flèches).
   Pas de :hover ici — le survol souris déplace déjà le focus clavier
   (mouseenter -> input.focus()), donc les deux se rejoignent naturellement
   sur un survol normal. Si on ajoutait aussi :hover, une souris restée
   immobile sur une option pendant qu'on navigue ensuite aux flèches
   continuerait de la surligner en même temps que la nouvelle option
   engagée — deux sélections visibles à la fois. */
.quiz-option.quiz-option--kbfocus:not(.quiz-option-disabled) {
    border-color: var(--accent, #1A5238);
    background: rgba(26, 82, 56, 0.03);
    box-shadow: inset 4px 0 0 var(--accent, #1A5238);
}

.quiz-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.quiz-option-letter {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-secondary, #4A5568);
    flex-shrink: 0;
    transition: all 0.2s ease;
}

/* La lettre garde son rond gris neutre au survol/focus (pas de remplissage
   vert) — le contour/fond de l'option suffit comme indicateur de sélection ;
   le remplissage vert reste réservé au choix réellement coché (mode
   multiple, cf. :checked plus bas) et au feedback correct/incorrect. */

.quiz-option-text {
    flex: 1;
    line-height: 1.4;
}

/* Option selectionnee - correcte */
/* margin-left (pas transform:translateX) : seul le bord gauche doit bouger,
   le bord droit reste fixe — .quiz-option s'étire sur toute la largeur de
   .quiz-options (align-items:stretch par défaut), donc augmenter la marge
   gauche réduit sa largeur d'autant sans déplacer le bord droit. */
.quiz-option.quiz-option-correct {
    border-color: var(--quiz-correct-border, #166534);
    background: var(--quiz-correct-bg, #f0fdf4);
    color: var(--quiz-correct-text, #14532d);
    margin-left: 24px;
    transition: all 0.35s ease;
}

.quiz-option.quiz-option-correct .quiz-option-letter {
    background: var(--quiz-correct-border, #166534);
    color: #fff;
}

/* Option selectionnee - incorrecte (même logique margin-left qu'au-dessus) */
.quiz-option.quiz-option-wrong {
    border-color: var(--quiz-wrong-border, #dc3545);
    background: var(--quiz-wrong-bg, #fef2f2);
    color: var(--quiz-wrong-text, #7f1d1d);
    margin-left: 24px;
    transition: all 0.35s ease;
}

.quiz-option.quiz-option-wrong .quiz-option-letter {
    background: var(--quiz-wrong-border, #dc3545);
    color: #fff;
}

/* Options desactivees apres reponse */
.quiz-option-disabled {
    cursor: default;
    pointer-events: none;
    opacity: 0.6;
}

.quiz-option-disabled.quiz-option-correct,
.quiz-option-disabled.quiz-option-wrong {
    opacity: 1;
}

/* --- Checkbox (mode multiple) --- */
.quiz-option input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.quiz-option:has(input[type="checkbox"]:checked) {
    border-color: var(--accent, #1A5238);
    background: rgba(26, 82, 56, 0.06);
    margin-left: 24px;
    transition: all 0.35s ease;
}

.quiz-option:has(input[type="checkbox"]:checked) .quiz-option-letter {
    background: var(--accent, #1A5238);
    color: #fff;
}

/* Choix unique/Vrai-Faux en Classique/Sans-faute : la réponse choisie
   (cochée mais pas encore validée via le bouton "Valider") reste marquée
   même une fois le focus/survol parti ailleurs — un seul input radio peut
   être :checked à la fois, donc en choisir un nouveau retire automatiquement
   ce style de l'ancien. */
.quiz-option:has(input[type="radio"]:checked) {
    border-color: var(--accent, #1A5238);
    background: rgba(26, 82, 56, 0.06);
    margin-left: 24px;
    transition: all 0.35s ease;
}

.quiz-option:has(input[type="radio"]:checked) .quiz-option-letter {
    background: var(--accent, #1A5238);
    color: #fff;
}

/* Le rendu focus checkbox est maintenant fusionné avec .quiz-option:hover
   plus haut (border/background/box-shadow) et avec .quiz-option-letter
   ci-dessus — plus de règle séparée avec outline. */

/* Boolean : sans lettre, options plus larges */
.quiz-option--boolean {
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
}

/* Bouton Valider (mode multiple) */
.quiz-validate-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
    width: 100%;
    padding: 14px 20px;
    background: var(--accent, #1A5238);
    color: #fff;
    border: none;
    border-radius: var(--card-radius, 8px);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.quiz-validate-btn:hover:not(:disabled) {
    background: var(--accent-dark, #143d2a);
    transform: translateY(-1px);
}

.quiz-validate-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.quiz-validate-shortcut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75em;
    font-weight: 600;
    opacity: 0.85;
    padding: 2px 8px;
    line-height: 1.4;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    border-radius: 4px;
}

/* Raccourci clavier sans objet sur tactile (mobile/tablette) */
@media (pointer: coarse) {
    .quiz-validate-shortcut {
        display: none;
    }
}

/* Mobile (mode multiple) : une fois validé, "Suivant" s'affiche à côté de
   "Valider" plutôt qu'en dessous du feedback — cf. _layoutNextButton()
   dans quiz-modes-integration.js. */
.quiz-validate-next-row {
    display: flex;
    gap: 10px;
    margin-top: 6px;
}

.quiz-validate-next-row .quiz-validate-btn,
.quiz-validate-next-row .quiz-next-btn {
    width: 50%;
    margin-top: 0;
    animation: none;
}

/* --- Feedback --- */
.quiz-feedback {
    padding: 16px 20px;
    border-radius: var(--card-radius, 8px);
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    animation: quizFeedbackIn 0.3s ease;
}

@keyframes quizFeedbackIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.quiz-feedback.quiz-feedback-success {
    background: var(--quiz-correct-bg, #f0fdf4);
    border: 1px solid var(--quiz-correct-border-light, #bbf7d0);
}

.quiz-feedback.quiz-feedback-error {
    background: var(--quiz-wrong-bg, #fef2f2);
    border: 1px solid var(--quiz-wrong-border-light, #fecaca);
}

.quiz-feedback-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    line-height: 1;
}

.quiz-feedback-text {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
}

.quiz-feedback-success .quiz-feedback-text {
    color: var(--quiz-correct-text, #166534);
}

.quiz-feedback-error .quiz-feedback-text {
    color: var(--quiz-wrong-text, #991b1b);
}

.quiz-feedback-correct {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 0.85rem;
    color: var(--quiz-correct-text, #166534);
    margin-top: 4px;
}

/* --- Bouton suivant --- */
.quiz-next-btn {
    width: 100%;
    justify-content: center;
    padding: 14px;
    font-size: 1rem;
    animation: quizFeedbackIn 0.3s ease;
}

/* --- Ecran de resultats --- */
.quiz-results {
    margin: 0 auto;
    padding: 20px 0;
}

.quiz-results-header {
    text-align: center;
}

.quiz-results-title {
    font-family: var(--font-serif, 'Lora', serif);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary, #2C3539);
    margin: 0 0 8px 0;
}

.quiz-results-book {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 0.9rem;
    color: var(--text-secondary, #4A5568);
}

/* --- Score circle --- */
.quiz-score-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
}

.quiz-score-circle {
    position: relative;
    width: 140px;
    height: 140px;
}

.quiz-score-circle svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.quiz-score-bg {
    fill: none;
    stroke: var(--panel, #F5F2EB);
    stroke-width: 8;
}

.quiz-score-fg {
    fill: none;
    stroke: var(--accent, #1A5238);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 314;
    stroke-dashoffset: 314;
    transition: stroke-dashoffset 1s ease;
}

.quiz-score-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-serif, 'Lora', serif);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary, #2C3539);
}

.quiz-score-label {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary, #4A5568);
    text-align: center;
}

/* Score colors */
.quiz-score-card.score-low .quiz-score-fg { stroke: var(--danger, #dc3545); }
.quiz-score-card.score-mid .quiz-score-fg { stroke: var(--accent-gold, #b89e14); }
.quiz-score-card.score-high .quiz-score-fg { stroke: var(--accent, #1A5238); }
.quiz-score-card.score-perfect .quiz-score-fg { stroke: var(--accent-gold, #b89e14); }

.quiz-score-card.score-low .quiz-score-label { color: var(--danger, #dc3545); }
.quiz-score-card.score-mid .quiz-score-label { color: #92750e; }
.quiz-score-card.score-high .quiz-score-label { color: var(--accent, #1A5238); }
.quiz-score-card.score-perfect .quiz-score-label { color: var(--accent-gold, #b89e14); }

/* --- Recapitulatif des erreurs --- */
.quiz-recap {
    margin-bottom: 32px;
}

.quiz-recap-title {
    font-family: var(--font-serif, 'Lora', serif);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary, #2C3539);
    margin: 0 0 16px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--accent, #1A5238);
}

.quiz-recap-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (max-width: 640px) {
    .quiz-recap-list {
        grid-template-columns: 1fr;
    }
}

.quiz-recap-item {
    background: var(--panel-light, #FAF9F6);
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: var(--card-radius, 8px);
    padding: 16px;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}

.quiz-recap-question {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary, #2C3539);
    margin-bottom: 8px;
    line-height: 1.4;
}


.quiz-recap-answer strong {
    font-weight: 600;
}

/* --- Actions resultats --- */
.quiz-results-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
}

.quiz-results-actions .quiz-btn {
    flex: 1;
    justify-content: center;
    max-width: 220px;
}

/* ====================================== */
/* RESPONSIVE                              */
/* ====================================== */
@media (max-width: 768px) {
    .quiz-header {
        gap: 10px;
        margin-bottom: 12px;
        padding-bottom: 10px;
    }

    .quiz-book-title {
        font-size: 1.3rem;
    }

    .quiz-question-text {
        font-size: 1.1rem;
    }

    .quiz-option {
        padding: 14px 16px;
        font-size: 0.9rem;
    }

    .quiz-option-letter {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }

    .quiz-results-actions {
        flex-direction: column;
    }

    .quiz-results-actions .quiz-btn {
        max-width: 100%;
    }

    .quiz-score-circle {
        width: 120px;
        height: 120px;
    }

    .quiz-score-value {
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    .quiz-option {
        gap: 10px;
        padding: 12px 14px;
    }

    .quiz-progress-info {
        font-size: 0.8rem;
        padding: 3px 10px;
    }
}

/* ====================================== */
/* THÈME CLAIR (DÉFAUT)                   */
/* ====================================== */
/* Couleurs par défaut pour thème blanc */
:root {
    --quiz-correct-bg: #f0fdf4;
    --quiz-correct-border: #166534;
    --quiz-correct-border-light: #bbf7d0;
    --quiz-correct-text: #14532d;

    --quiz-wrong-bg: #fef2f2;
    --quiz-wrong-border: #dc3545;
    --quiz-wrong-border-light: #fecaca;
    --quiz-wrong-text: #7f1d1d;

    /* Header sans-faute - thème blanc */
    --quiz-header-text: #2c3539;
    --quiz-header-text-secondary: #666;
    --quiz-header-text-tertiary: #999;
    --quiz-header-border: rgba(0, 0, 0, 0.08);
    --quiz-panel-bg: rgba(0, 0, 0, 0.02);
    --quiz-panel-text: #2c3539;
    --quiz-panel-text-secondary: #999;
    --quiz-circle-stroke: rgba(0, 0, 0, 0.25);
    --quiz-circle-fill: #1A5238;
}

/* THÈME BLANC (EXPLICITE)                 */
/* ====================================== */
body.theme-blanc {
    --quiz-correct-bg: #f0fdf4;
    --quiz-correct-border: #166534;
    --quiz-correct-border-light: #bbf7d0;
    --quiz-correct-text: #14532d;

    --quiz-wrong-bg: #fef2f2;
    --quiz-wrong-border: #dc3545;
    --quiz-wrong-border-light: #fecaca;
    --quiz-wrong-text: #7f1d1d;

    /* Header sans-faute - thème blanc */
    --quiz-header-text: #2c3539;
    --quiz-header-text-secondary: #666;
    --quiz-header-text-tertiary: #999;
    --quiz-header-border: rgba(0, 0, 0, 0.08);
    --quiz-panel-bg: rgba(0, 0, 0, 0.02);
    --quiz-panel-text: #2c3539;
    --quiz-panel-text-secondary: #999;
    --quiz-circle-stroke: rgba(0, 0, 0, 0.25);
    --quiz-circle-fill: #1A5238;
}

/* THÈME SOMBRE                            */
/* ====================================== */
body.theme-noir {
    /* Correct — vert du site, ton sombre sur fond transparent */
    --quiz-correct-bg: rgba(74, 145, 120, 0.15);
    --quiz-correct-border: #4a9178;
    --quiz-correct-border-light: rgba(74, 145, 120, 0.35);
    --quiz-correct-text: #5aab8a;

    /* Incorrect — terracotta/brique, cohérent avec la palette chaude du site */
    --quiz-wrong-bg: rgba(180, 80, 60, 0.15);
    --quiz-wrong-border: #c0614a;
    --quiz-wrong-border-light: rgba(192, 97, 74, 0.35);
    --quiz-wrong-text: #d4816d;

    /* Header sans-faute - thème sombre */
    --quiz-header-text: #fff;
    --quiz-header-text-secondary: #d0d0d0;
    --quiz-header-text-tertiary: #999;
    --quiz-header-border: rgba(255, 255, 255, 0.1);
    --quiz-panel-bg: rgba(255, 255, 255, 0.05);
    --quiz-panel-text: #f5f5f5;
    --quiz-panel-text-secondary: #999;
    --quiz-circle-stroke: rgba(255, 255, 255, 0.15);
}

/* THÈME BEIGE                             */
/* ====================================== */
body.theme-beige {
    /* Correct — vert adapté au thème beige */
    --quiz-correct-bg: rgba(74, 145, 120, 0.12);
    --quiz-correct-border: #4a9178;
    --quiz-correct-border-light: rgba(74, 145, 120, 0.3);
    --quiz-correct-text: #1e5a3f;

    /* Incorrect — rouge/brique adapté au thème beige */
    --quiz-wrong-bg: rgba(192, 97, 74, 0.12);
    --quiz-wrong-border: #c0614a;
    --quiz-wrong-border-light: rgba(192, 97, 74, 0.3);
    --quiz-wrong-text: #8b3a1c;

    /* Header sans-faute - thème beige */
    --quiz-header-text: #3d2817;
    --quiz-header-text-secondary: #6b5344;
    --quiz-header-text-tertiary: #999;
    --quiz-header-border: rgba(0, 0, 0, 0.08);
    --quiz-panel-bg: rgba(139, 110, 79, 0.06);
    --quiz-panel-text: #3d2817;
    --quiz-panel-text-secondary: #8b6e4f;
    --quiz-circle-stroke: rgba(139, 110, 79, 0.3);
}

/* ====================================== */
/* RECAP ITEMS — STATUTS DE MAÎTRISE       */
/* ====================================== */

/* Récap : question échouée (to_review — défaut, bordeaux léger) */
.quiz-recap-item.quiz-recap-to_review {
    border-left: 3px solid var(--accent-secondary, #8B3A3A);
    background: var(--panel-light, #FAF9F6);
}

/* Récap : question problématique (warning — rouge moyen) */
.quiz-recap-item.quiz-recap-warning {
    border-left: 3px solid #bf6050;
    background: rgba(191, 96, 80, 0.07);
}

.quiz-recap-item.quiz-recap-warning .quiz-recap-question {
    color: #9b3d2e;
}

body.theme-noir .quiz-recap-item.quiz-recap-warning .quiz-recap-question {
    color: #d48a7a;
}

/* Récap : question critique (rouge foncé) */
.quiz-recap-item.quiz-recap-critical {
    border-left: 3px solid var(--quiz-wrong-border, #c0614a);
    background: rgba(192, 97, 74, 0.1);
}

.quiz-recap-item.quiz-recap-critical .quiz-recap-question {
    color: #8a2020;
}

body.theme-noir .quiz-recap-item.quiz-recap-critical .quiz-recap-question {
    color: var(--quiz-wrong-text, #d4816d);
}

/* Récap : réponse correcte — couleur adaptée au thème */
.quiz-recap-answer {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 0.85rem;
    color: var(--success-text, #166534);
}

body.theme-noir .quiz-recap-answer {
    color: var(--quiz-correct-text, #5aab8a);
}

/* Récap : message de statut */
.quiz-recap-status-msg {
    margin-top: 8px;
    font-size: 0.78rem;
    font-style: italic;
    color: var(--text-secondary, #4A5568);
    opacity: 0.9;
}

/* Récap : question maîtrisée cette session */
.quiz-recap-item.quiz-recap-mastered {
    border-left: 3px solid var(--quiz-correct-border, #4a9178);
    background: rgba(74, 145, 120, 0.06);
}

.quiz-recap-mastered-badge {
    display: inline-block;
    margin-top: 8px;
    padding: 2px 10px;
    background: var(--quiz-correct-border, #4a9178);
    color: #fff;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ====================================== */
/* ÉCRAN FIN DE RÉVISION                  */
/* ====================================== */
.quiz-revision-end {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    gap: 16px;
    text-align: center;
    min-height: 300px;
}

.quiz-revision-end-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--quiz-correct-border, #4a9178), var(--accent, #1A5238));
    color: #fff;
    font-size: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(74,145,120,0.3);
}

.quiz-revision-end-title {
    font-family: var(--font-serif, 'Cormorant Garamond', serif);
    font-size: 1.6rem;
    color: var(--text-primary, #2C3539);
    margin: 0;
}

.quiz-revision-end-count {
    font-size: 0.95rem;
    color: var(--text-secondary, #4A5568);
    margin: 0;
}

/* ====================================== */
/* MODE RÉVISION : LISTE STATIQUE         */
/* ====================================== */
.quiz-revision-list {
    width: 100%;
}

.quiz-revision-list-body {
    padding-top: 12px;
}

.quiz-revision-list-title {
    font-family: var(--font-serif, 'Cormorant Garamond', serif);
    font-size: 1.4rem;
    color: var(--text-primary, #2C3539);
    margin: 0 0 4px;
}

.quiz-revision-list-count {
    font-size: 0.85rem;
    color: var(--text-secondary, #4A5568);
    margin: 0 0 20px;
}

.quiz-revision-card {
    background: var(--panel, #F5F2EB);
    border: 1px solid var(--border, rgba(0,0,0,0.08));
    border-left: 4px solid var(--border, rgba(0,0,0,0.12));
    border-radius: var(--card-radius, 10px);
    padding: 16px 18px;
    margin-bottom: 12px;
}

.quiz-revision-card--critical {
    border-left-color: var(--quiz-wrong-border, #c0503a);
}

.quiz-revision-card--warning {
    border-left-color: #c17d0a;
}

.quiz-revision-card--to_review {
    border-left-color: var(--accent, #1A5238);
}

.quiz-revision-card-question {
    font-family: var(--font-serif, 'Cormorant Garamond', serif);
    font-size: 1.05rem;
    color: var(--text-primary, #2C3539);
    line-height: 1.5;
    margin-bottom: 10px;
}

.quiz-revision-card-answer {
    font-size: 0.92rem;
    color: var(--text-primary, #2C3539);
}

.quiz-revision-card-answer-label {
    font-weight: 700;
    color: var(--accent, #1A5238);
}

.quiz-revision-card-explanation {
    font-size: 0.82rem;
    color: var(--text-secondary, #4A5568);
    font-style: italic;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border, rgba(0,0,0,0.08));
    line-height: 1.4;
}

body.theme-noir .quiz-revision-card {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
}

body.theme-noir .quiz-revision-card--critical {
    border-left-color: #d9705a;
}

body.theme-noir .quiz-revision-card--warning {
    border-left-color: #d4930e;
}

body.theme-noir .quiz-revision-card--to_review {
    border-left-color: var(--quiz-correct-border, #4a9178);
}

body.theme-noir .quiz-revision-card-answer-label {
    color: var(--quiz-correct-text, #5aab8a);
}

/* ====================================== */
/* HUB MODERNE - Styles sans inline       */
/* ====================================== */

/* Thème clair (blanc/beige) par défaut */
:root {
    --hub-text-primary: #2c3539;
    --hub-text-secondary: #666;
    --hub-text-tertiary: #999;
    --hub-bg-box: rgba(0, 0, 0, 0.02);
    --hub-border: rgba(0, 0, 0, 0.08);
}

body.theme-noir {
    --hub-text-primary: #f5f5f5;
    --hub-text-secondary: #d0d0d0;
    --hub-text-tertiary: #999;
    --hub-bg-box: rgba(255, 255, 255, 0.05);
    --hub-border: rgba(255, 255, 255, 0.1);
}

/* ============================================================================ */
/* FLASH — ÉCRAN DE CONFIGURATION DU TEMPS */
/* ============================================================================ */

.quiz-flash-config {
    max-width: 420px;
    margin: auto;
}

.quiz-flash-time-picker {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.quiz-flash-time-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 12px;
}

.quiz-flash-adjust-btn {
    width: 44px;
    height: 44px;
    border: 1.5px solid var(--accent-gold);
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.4rem;
    color: var(--accent-gold);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.quiz-flash-adjust-btn:hover {
    background: rgba(184, 158, 20, 0.1);
    transform: scale(1.08);
}

.quiz-flash-time-value {
    text-align: center;
}

.quiz-flash-time-label {
    font-size: 0.78rem;
    color: var(--muted, #9ca3af);
    margin-top: 4px;
    font-family: var(--font-sans, 'Inter', sans-serif);
}

.quiz-flash-record-hint {
    font-size: 0.85rem;
    color: var(--accent-gold);
    font-weight: 500;
    text-align: center;
    margin: 0 0 4px;
    min-height: 1.2em;
}

.quiz-flash-config-panel {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.quiz-flash-config-desc {
    font-size: 0.95rem;
    color: var(--text-secondary, #4A5568);
    margin: 0;
    line-height: 1.5;
}

/* ============================================================================ */

.quiz-hub-modern-wrapper {
    display: flex;
    flex-wrap: nowrap;
    gap: 2rem;
    align-items: start;
}

.quiz-hub {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.quiz-hub-subtitle {
    font-size: 1.1rem;
    color: var(--hub-text-tertiary);
    margin: 0;
    font-family: var(--font-serif);
    font-weight: 700;
}

.quiz-hub-left {
    display: flex;
    flex-direction: column;
    gap: 1.0rem;
    height: 100%;
    flex: 1 1 0px;
    min-width: 280px;
    container-type: inline-size;
    container-name: quiz-hub-left;
}

.quiz-hub-right {
    flex: 0 0 320px;
}

.quiz-hub-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.quiz-hub-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.quiz-hub-section-title {
    font-size: 1rem;
    font-weight: 400;
    color: var(--hub-text-primary);
    margin: 0;
    letter-spacing: 0.5px;
}

.quiz-hub-modes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    padding: 0 10px;
}

.quiz-mode-box {
    background: var(--hub-bg-box);
    border: 1px solid var(--hub-border);
    border-radius: 8px;
    padding: 2rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

/* Survol souris = focus natif (cf. mouseenter dans setupHubKeyNav côté JS) :
   un seul indicateur visuel piloté uniquement par :focus (pas :hover), même
   logique que .quiz-option pour les propositions de quiz — sinon une souris
   restée immobile sur une carte garde son surlignage même après que la
   navigation clavier a déplacé le focus ailleurs (deux sélections visibles
   à la fois). */
.quiz-mode-box:focus {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--quiz-mode-highlight) 10%, transparent);
    outline: none;
}

.quiz-mode-box svg {
    width: 84px;
    height: 84px;
    margin: 0 auto;
    display: block;
}

.quiz-mode-label {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--hub-text-primary);
}

.quiz-mode-records {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px 8px;
    justify-items: center;
    width: 100%;
}
.quiz-mode-records:has(.quiz-mode-record-line:nth-child(2)) {
    grid-template-columns: repeat(2, 1fr);
}

.quiz-mode-record-line {
    font-size: 0.78rem;
    color: var(--accent-gold);
    font-weight: 600;
    line-height: 1.3;
}

/* --- Grille des modes : passe de 4 à 2 colonnes en fonction de la place
     réellement disponible dans .quiz-hub-left (et non du viewport), pour
     que le panel de progression reste toujours à côté du contenu plutôt
     que de passer à la ligne suivante. --- */
@container quiz-hub-left (max-width: 600px) {
    .quiz-hub-modes-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
        padding: 0;
    }

    .quiz-mode-box {
        padding: 1.25rem 0.75rem;
        gap: 0.5rem;
    }

    .quiz-mode-box svg {
        width: 56px;
        height: 56px;
    }

    .quiz-mode-label {
        font-size: 0.88rem;
    }

    .quiz-mode-records,
    .quiz-mode-records:has(.quiz-mode-record-line:nth-child(2)) {
        grid-template-columns: 1fr;
    }

    .quiz-mode-record-line {
        font-size: 0.72rem;
    }
}

@container quiz-hub-left (max-width: 340px) {
    .quiz-hub-modes-grid {
        gap: 0.5rem;
    }

    .quiz-mode-box {
        padding: 1rem 0.5rem;
    }

    .quiz-mode-box svg {
        width: 46px;
        height: 46px;
    }
}


.quiz-hub-resume-btn {
    width: 100%;
    padding: 1rem 1.5rem;
    margin: 0 5px;
    background: linear-gradient(135deg, var(--accent-gold), color-mix(in srgb, var(--accent-gold), black 18%));
    border: none;
    border-radius: 10px;
    color: #1a1a1a;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    transition: all 0.25s;
    box-shadow: 0 2px 8px rgba(194, 161, 74, 0.2);
    font-family: var(--font-sans, 'Inter', sans-serif);
}

.quiz-hub-resume-btn:hover:not(:disabled),
.quiz-hub-resume-btn:focus-visible:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(194, 161, 74, 0.35);
    outline: 2px solid var(--accent-gold);
    outline-offset: 3px;
}

.quiz-hub-resume-btn--inactive,
.quiz-hub-resume-btn:disabled {
    background: var(--panel, #F5F2EB);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: var(--text-secondary, #9ca3af);
    cursor: not-allowed;
    box-shadow: none;
}

.resume-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
}

.resume-icon {
    display: inline-flex;
    opacity: 0.7;
}

.resume-icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

.resume-headline {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -0.01em;
}

.resume-mode-badge {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.12rem 0.45rem;
    border-radius: 4px;
    background: rgba(0,0,0,0.14);
    color: #1a1a1a;
}

.resume-mode-badge--flash      { background: rgba(0,0,0,0.18); }
.resume-mode-badge--chrono     { background: rgba(0, 80, 160, 0.18); color: #002a5e; }
.resume-mode-badge--classique  { background: rgba(0,0,0,0.12); }
.resume-mode-badge--sans_faute { background: rgba(140, 10, 10, 0.14); color: #6b0f0f; }

.resume-meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(26, 26, 26, 0.65);
}

.resume-dot {
    opacity: 0.4;
}

.quiz-hub-session-info {
    font-size: 0.8rem;
    color: var(--hub-text-secondary);
    white-space: nowrap;
}

.quiz-hub-review-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--hub-bg-box);
    border-radius: 8px;
}

.review-text {
    font-size: 0.9rem;
    color: var(--hub-text-secondary);
}

.quiz-hub-review-btn {
    padding: 0.6rem 1.2rem;
    background: transparent;
    border: 1px solid var(--accent-gold);
    border-radius: 6px;
    color: var(--accent-gold);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.quiz-hub-review-btn:hover,
.quiz-hub-review-btn:focus-visible {
    background: var(--accent-gold);
    color: #1a1a1a;
    outline: 2px solid var(--accent-gold);
    outline-offset: 3px;
}

.quiz-hub-progress-title {
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--hub-text-primary);
    margin: 0 0 1.5rem 0;
    letter-spacing: 1px;
}

.quiz-hub-circle-progress {
    position: relative;
    width: 180px;
    height: 180px;
    margin: 0 auto 2rem;
}

.progress-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.progress-percent {
    font-size: 2rem;
    font-weight: 700;
    color: var(--hub-text-primary);
}

.progress-label {
    font-size: 0.8rem;
    color: var(--hub-text-tertiary);
}

.quiz-hub-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.quiz-hub-stat-item {
    text-align: center;
    padding: 1rem;
    background: var(--hub-bg-box);
    border-radius: 6px;
}

.stat-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--hub-text-primary);
}

.stat-label {
    font-size: 0.75rem;
    color: var(--hub-text-tertiary);
    margin-top: 0.25rem;
}

.quiz-hub-history-section {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--hub-border);
}

.quiz-hub-history-standalone {
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--hub-bg-box);
    border-radius: 8px;
}

.quiz-hub-history-standalone .quiz-hub-section-title {
    margin-bottom: 1rem;
}

.quiz-hub-history-title {
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--hub-text-primary);
    margin: 0 0 0.75rem 0;
}

.quiz-hub-history-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--hub-text-tertiary);
}

.history-score {
    color: var(--accent-gold);
}

/* ====================================== */
/* HUB MODERNE - Thème Noir               */
/* ====================================== */

body.theme-noir .quiz-hub-title {
    color: #f5f5f5;
}

body.theme-noir .quiz-hub-subtitle {
    color: #b0b0b0;
}

body.theme-noir .quiz-hub-section-title {
    color: #f5f5f5;
}

body.theme-noir .quiz-mode-box {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: #f5f5f5;
}

body.theme-noir .quiz-mode-box:focus {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--quiz-mode-highlight) 15%, transparent);
}

body.theme-noir .quiz-mode-label {
    color: #f5f5f5;
}

body.theme-noir .quiz-hub-session-info {
    color: #999;
}

body.theme-noir .review-text {
    color: #d0d0d0;
}

body.theme-noir .quiz-hub-progress-title {
    color: #f5f5f5;
}

body.theme-noir .progress-percent {
    color: #f5f5f5;
}

body.theme-noir .progress-label {
    color: #b0b0b0;
}

body.theme-noir .stat-value {
    color: #f5f5f5;
}

body.theme-noir .stat-label {
    color: #b0b0b0;
}

body.theme-noir .quiz-hub-history-title {
    color: #f5f5f5;
}

body.theme-noir .history-date {
    color: #b0b0b0;
}

/* ====================================== */
/* HUB MODERNE - RESPONSIVE               */
/* (placé après les règles de base ci-dessus pour gagner la cascade à
   spécificité égale — un @media plus haut dans le fichier serait
   écrasé par ces règles non conditionnelles définies plus bas) */
/* ====================================== */
@media (max-width: 768px) {
    /* --- Hub moderne : une seule colonne, panel de progression sous le contenu --- */
    .quiz-hub-modern-wrapper {
        flex-wrap: wrap;
        gap: 1.25rem;
    }

    .quiz-hub-left {
        flex-basis: 100%;
    }

    #quizProgressionPanel {
        width: 100% !important;
        flex-basis: 100%;
    }

    /* --- Modes de jeu : gérés par la container query sur .quiz-hub-left
         (voir @container quiz-hub-left plus haut) --- */

    /* --- Headers Sans-faute / Chrono / Flash : colonnes empilées (le style
         inline pose grid-template-columns: auto auto auto + gap: 3rem, qui
         déborde sur mobile ; !important nécessaire pour le surcharger) --- */
    #quizHeaderSansFaute,
    #quizHeaderChrono,
    #quizHeaderFlash {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
        text-align: center;
    }

    #quizHeaderSansFaute > div,
    #quizHeaderChrono > div,
    #quizHeaderFlash > div {
        align-items: center !important;
        text-align: center !important;
    }

    /* --- Bloc "à revoir" du hub : empilé pour éviter le débordement --- */
    .quiz-hub-review-section {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }

    .quiz-hub-review-btn {
        width: 100%;
    }

    .quiz-badges-container {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .quiz-flash-time-controls {
        gap: 1rem;
    }
}