/* review.html — écran de session, aligné sur la composition de la
   maquette : pas de carte encadrée autour de la question (fond nu),
   centrage vertical, actions en périphérie basse séparées par un filet.
   Logique (ReviewSession, gradeCard, requeue) inchangée.
   Page --largeur-session (gyre-system.css § LARGEURS) : centrage
   étroit voulu, ne pas élargir même si les autres pages passent à
   1440px. */

main.review-container {
    max-width: var(--largeur-session);
}
.review-container {
    min-height: calc(100vh - 65px);
    display: flex;
    flex-direction: column;
    text-align: center;
}

/* .review-actions vit maintenant dans .review-stage (changement de
   structure, design/…RECAP-passe-desktop.md) : carte et actions
   centrent comme un seul bloc plutôt que la carte seule dans une
   moitié d'écran et les actions plaquées en bas — c'est ce qui
   supprimait le vide sur un écran haut. En dessous de 1600px (y
   compris à 936px), le bloc part du haut plutôt que de se centrer :
   un centrage vertical strict y creusait un grand blanc sous l'en-tête
   (constaté sur la maquette). Sous 600px, .review-actions repasse en
   position:fixed (règle plus bas, inchangée) — la structure imbriquée
   ne change rien à ce comportement, fixed sort du flux quel que soit
   le parent. */
.review-stage {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--e-6);
    padding: var(--e-5) var(--e-5) var(--e-7);
}
@media (min-width:1600px) {
    .review-stage {
        justify-content: center;
        padding: var(--e-7);
    }
}

#flashcard {
    width: 900px;
    max-width: 100%;
    text-align: left;
}

@media (prefers-reduced-motion: no-preference) {
    #flashcard.card-enter #question,
    #flashcard.card-enter .gy-matiere-tag {
        animation: flashcard-in var(--t-long) var(--courbe);
    }
    #answer.answer-in {
        animation: answer-reveal var(--t-court) var(--courbe);
    }
    #buttons.buttons-in {
        animation: answer-reveal var(--t-court) var(--courbe) 50ms both;
    }
}
@keyframes flashcard-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes answer-reveal {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---- Fin de session (état sans carte de contenu : ici une carte a du sens,
   c'est un message d'état, pas l'énoncé) ---- */
#flashcard.flashcard-done {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--e-4);
}
.flashcard-done-title {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: var(--t-30);
    color: var(--texte);
    margin: 0;
}
.flashcard-done-sub {
    font-size: var(--t-15);
    color: var(--texte-2);
    margin: 0;
}

#chapterTag {
    margin: 0 0 var(--e-5);
    opacity: .7;
}
#flashcard.gy-maths #chapterTag .gy-chip-dot { background: var(--maths); }
#flashcard.gy-maths #chapterTag span:last-child { color: var(--maths-texte); }
#flashcard.gy-physique #chapterTag .gy-chip-dot { background: var(--physique); }
#flashcard.gy-physique #chapterTag span:last-child { color: var(--physique-texte); }
/* Matières au-delà de maths/physique — voir gySubjectClass() (js/gyre-chrome.js). */
#flashcard.gy-cycle-1 #chapterTag .gy-chip-dot { background: var(--cycle-1); }
#flashcard.gy-cycle-1 #chapterTag span:last-child { color: var(--cycle-1-texte); }
#flashcard.gy-cycle-2 #chapterTag .gy-chip-dot { background: var(--cycle-2); }
#flashcard.gy-cycle-2 #chapterTag span:last-child { color: var(--cycle-2-texte); }
#flashcard.gy-cycle-3 #chapterTag .gy-chip-dot { background: var(--cycle-3); }
#flashcard.gy-cycle-3 #chapterTag span:last-child { color: var(--cycle-3-texte); }
#flashcard.gy-cycle-4 #chapterTag .gy-chip-dot { background: var(--cycle-4); }
#flashcard.gy-cycle-4 #chapterTag span:last-child { color: var(--cycle-4-texte); }

#question {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: var(--t-30);
    line-height: 1.3;
    letter-spacing: -.02em;
    color: var(--texte);
    margin: 0;
}
/* Plafond de 900px inchangé (--largeur-session) : la carte ne s'élargit
   jamais, c'est l'échelle typographique qui monte d'un cran au-delà de
   1600px — sans ça la question flotte, trop petite, dans un écran de
   1792px (design/desktop-redesign-brief-vague2.md). */
@media (min-width:1600px) {
    #question { font-size: var(--t-40); }
    #answer { font-size: var(--t-19); }
}

#answer {
    margin-top: var(--e-6);
    padding-top: var(--e-5);
    border-top: var(--trait-1) solid var(--trait);
    font-size: var(--t-15);
    line-height: 1.8;
    color: var(--texte);
}

/* ---- Actions ---- */
.review-actions {
    width: 900px;
    max-width: 100%;
    padding: var(--e-5) 0 0;
    border-top: var(--trait-1) solid var(--trait);
}
.review-cta-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--e-2);
}

/* ---- Grading buttons ---- */
#buttons {
    gap: var(--e-3);
    width: 100%;
}
#buttons:not(.hidden) {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.grade-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    padding: var(--e-4);
    background: transparent;
    color: var(--texte);
    border: var(--trait-1) solid var(--trait);
    border-radius: var(--r-controle);
    font-family: var(--f-texte);
    font-weight: 600;
    font-size: var(--t-15);
    cursor: pointer;
    transition: border-color var(--t-instant) var(--courbe), background var(--t-instant) var(--courbe);
}
.grade-btn:hover {
    border-color: var(--trait-fort);
}
.grade-btn:active {
    transform: scale(0.98);
    transition-duration: var(--t-instant);
}

.grade-btn-good {
    background: var(--action);
    color: var(--texte-negatif);
    border-color: var(--action);
}
.grade-btn-good .gy-kbd {
    color: var(--texte-negatif-2);
    border-color: var(--sepia-negatif);
}
.grade-btn-good:hover {
    background: var(--action-active);
    border-color: var(--action-active);
}

/* ---- Mobile (design/mobile-redesign-brief.md §2) : même correctif que
   quiz.css — barre d'actions fixée en bas plutôt que statique dans le
   flux, .review-stage en flex-start pour ne pas masquer le début d'une
   question longue (bug de centrage flexbox sur contenu qui déborde). ---- */
@media (max-width:600px) {
    .review-stage {
        align-items: flex-start;
        justify-content: flex-start;
        padding: var(--e-5) var(--e-4) calc(56px + var(--e-4) + var(--e-1) + env(safe-area-inset-bottom));
        text-align: left;
    }
    /* position:sticky ne suffit pas ici : .review-actions est le dernier
       enfant du flux (rien ne le suit), donc « sticky » ne se distingue
       jamais de « static » sur un scroll de page classique — vérifié en
       pratique. fixed + le padding-bottom ci-dessus (pire cas : la
       rangée de notation à 56px) est la seule façon de garder les
       actions atteignables en permanence. Buffer réduit à e-1 au-dessus
       de la safe-area (e-4 mangeait trop d'écran — retour de test réel). */
    .review-actions {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        max-width: none;
        z-index: 500;
        background: var(--surface-page);
        border-top-color: var(--trait-fort);
        padding: var(--e-4) var(--e-4) calc(var(--e-1) + env(safe-area-inset-bottom));
    }
    .gy-btn-session {
        width: 100%;
        height: 52px;
        font-size: var(--t-19);
        padding: 0;
    }
    #buttons:not(.hidden) {
        gap: var(--e-2);
    }
    .grade-btn {
        height: 56px;
        padding: 0 var(--e-1);
        font-size: var(--t-13);
    }
}