/* ============================================
   ESPACE ÉLÈVE (eleve.html)
   L'enfant, seul sur une tablette : gros caractères, grandes cibles
   (48 px au moins), une seule chose à faire par écran. Couleurs : uniquement
   les rôles de design-system.css, pour suivre le thème clair / sombre.
   ============================================ */

body.eleve {
    min-height: 100vh;
    min-height: 100dvh;
    font-size: var(--font-size-md);
    background-image:
        radial-gradient(48rem 28rem at 0% 0%, var(--brand-soft), transparent 70%),
        radial-gradient(40rem 24rem at 100% 100%, var(--accent-soft), transparent 70%);
    background-attachment: fixed;
}

/* Une fois connecté, la langue suit le programme de l'élève : pas
   d'interrupteur FR | EN qu'un enfant actionnerait par erreur. */
body.eleve.connecte .lang-switch { display: none; }

.eleve [hidden] { display: none !important; }

.eleve-ecran {
    width: 100%;
    max-width: 46rem;
    margin: 0 auto;
    padding: var(--spacing-6) var(--spacing-4) var(--spacing-12);
}

.eleve h1, .eleve h2, .eleve h3 {
    font-family: var(--font-display);
    color: var(--heading);
}

.eleve h1:focus, .eleve h2:focus { outline: none; }
.eleve h1:focus-visible, .eleve h2:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-md); }

/* Boutons de l'espace élève : plus grands que ceux des enseignants */
.eleve .btn {
    min-height: 3rem;
    margin: 0;
    padding: 0.75rem 1.5rem;
    font-size: var(--font-size-md);
    border-radius: 12px;
    white-space: normal;
}
.eleve .btn .icon { width: 1.25em; height: 1.25em; flex-shrink: 0; }
.eleve .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.eleve .btn-geant {
    min-height: 3.75rem;
    width: 100%;
    font-size: var(--font-size-xl);
    border-radius: 16px;
}
.eleve .btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ── Barre du haut (écrans connectés) ── */
.eleve-barre {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    max-width: 46rem;
    margin: 0 auto;
    /* à droite : place du bouton clair / sombre flottant de theme.js */
    padding: var(--spacing-4) calc(var(--spacing-4) + 3rem) 0 var(--spacing-4);
}
.eleve-barre img { display: block; height: 40px; width: auto; }
.eleve-barre .espace { flex: 1; }
.eleve-barre .btn { min-height: 3rem; padding: 0.5rem 1rem; font-size: var(--font-size-base); }

/* ── Écran du code ── */
.code-ecran {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-16) var(--spacing-4) var(--spacing-8);
}

.code-carte {
    width: 100%;
    max-width: 30rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-8) var(--spacing-6);
    text-align: center;
}

.code-carte .logo { display: block; height: 64px; width: auto; margin: 0 auto var(--spacing-6); }
.code-carte h1 { font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-2); }
.code-carte .aide {
    color: var(--text-muted);
    font-size: var(--font-size-md);
    margin: 0 0 var(--spacing-6);
}
.code-carte .aide .icon { color: var(--brand); vertical-align: -0.15em; }

.code-champ {
    display: block;
    width: 100%;
    min-height: 4.5rem;
    padding: var(--spacing-3) var(--spacing-4);
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 8vw, 2.5rem);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
    color: var(--heading);
    background: var(--surface-sunken);
    border: 2px solid var(--border-strong);
    border-radius: 16px;
    transition: border-color var(--duration-fast) var(--easing-out), box-shadow var(--duration-fast) var(--easing-out);
}
.code-champ::placeholder { color: var(--text-subtle); letter-spacing: 0.12em; }
.code-champ:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); background: var(--surface); }
.code-champ[aria-invalid="true"] { border-color: var(--accent); }

.code-carte form { display: grid; gap: var(--spacing-4); }

/* Messages doux : erreur de code, session terminée, pas de réseau */
.message-doux {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    text-align: left;
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--text);
    background: var(--brand-soft);
    border-radius: 14px;
}
.message-doux .icon { width: 1.5rem; height: 1.5rem; flex-shrink: 0; color: var(--brand); }
.message-doux--attention { background: var(--accent-soft); }
.message-doux--attention .icon { color: var(--accent); }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* ── Accueil ── */
.accueil-titre { font-size: clamp(2rem, 6vw, 2.75rem); margin: var(--spacing-6) 0 var(--spacing-2); }
.accueil-sous-titre { color: var(--text-muted); font-size: var(--font-size-lg); margin: 0 0 var(--spacing-8); }

.matieres {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-8);
}

.matiere-tuile {
    --m: var(--subject-other);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    min-height: 7rem;
    padding: var(--spacing-4);
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--text);
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform var(--duration-fast) var(--easing-out), box-shadow var(--duration-fast) var(--easing-out), border-color var(--duration-fast) var(--easing-out);
}
.matiere-tuile .icon { width: 2.25rem; height: 2.25rem; color: var(--m); }
.matiere-tuile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.matiere-tuile:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.matiere-tuile[aria-pressed="true"] {
    border-color: var(--m);
    background: color-mix(in srgb, var(--m) 10%, var(--surface));
}

.m-math { --m: var(--subject-math); }
.m-french { --m: var(--subject-french); }
.m-science { --m: var(--subject-science); }
.m-history { --m: var(--subject-history); }
.m-geography { --m: var(--subject-geography); }
.m-arts { --m: var(--subject-arts); }
.m-sport { --m: var(--subject-sport); }
.m-english { --m: var(--subject-english); }

.groupe-series { margin-bottom: var(--spacing-8); }
.groupe-series h2 {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-xl);
    margin: 0 0 var(--spacing-1);
}
.groupe-series h2 .icon { color: var(--accent); width: 1.5rem; height: 1.5rem; }
.groupe-series .explication { color: var(--text-muted); margin: 0 0 var(--spacing-4); }

.series { display: grid; gap: var(--spacing-3); list-style: none; padding: 0; margin: 0; }

.serie-carte {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    width: 100%;
    min-height: 5rem;
    padding: var(--spacing-4) var(--spacing-5);
    text-align: left;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform var(--duration-fast) var(--easing-out), box-shadow var(--duration-fast) var(--easing-out);
}
.serie-carte:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.serie-carte:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.serie-pastille {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    color: var(--brand);
    background: var(--brand-soft);
}
.serie-pastille .icon { width: 1.5rem; height: 1.5rem; }
.serie-carte--revoir .serie-pastille { color: var(--accent); background: var(--accent-soft); }
/* Vérification envoyée par l'enseignant (spec 0010) */
.serie-carte--verifier .serie-pastille { color: var(--info); background: var(--info-soft); }
.serie-carte--reussie .serie-pastille { color: var(--success); background: var(--success-soft); }

.serie-texte { flex: 1; min-width: 0; }
.serie-label {
    display: block;
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    color: var(--heading);
}
.serie-meta { display: block; margin-top: var(--spacing-1); color: var(--text-muted); font-size: var(--font-size-base); }
.serie-meta .reussie { color: var(--success); font-weight: var(--font-weight-semibold); }
.serie-fleche { color: var(--text-subtle); flex-shrink: 0; }
.serie-fleche .icon { width: 1.5rem; height: 1.5rem; }

.vide-eleve {
    text-align: center;
    padding: var(--spacing-10) var(--spacing-6);
    background: var(--surface);
    border: 1px dashed var(--border-strong);
    border-radius: 18px;
}
.vide-eleve .icon { width: 3rem; height: 3rem; color: var(--highlight); }
:root[data-theme="dark"] .vide-eleve .icon { color: var(--warning-solid); }
.vide-eleve p { font-size: var(--font-size-lg); margin: var(--spacing-3) 0 0; }
.vide-eleve .btn { margin-top: var(--spacing-5); }

.chargement { display: flex; justify-content: center; padding: var(--spacing-12) 0; }

/* ── Lecteur d'exercice ── */
.lecteur-tete {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin: var(--spacing-4) 0 var(--spacing-3);
}
.lecteur-tete .serie-nom {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lecteur-tete .btn { padding: 0.5rem 1rem; font-size: var(--font-size-base); }

.progression { margin-bottom: var(--spacing-5); }
.progression-texte { display: block; font-weight: var(--font-weight-semibold); color: var(--text-muted); margin-bottom: var(--spacing-2); }
.progression-piste {
    height: 0.875rem;
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.progression-barre {
    height: 100%;
    width: 0;
    background: var(--brand-solid);
    border-radius: var(--radius-full);
    transition: width var(--duration-slow) var(--easing-out);
}

.question-carte {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-6);
}

.question-pastilles { display: flex; flex-wrap: wrap; gap: var(--spacing-2); margin-bottom: var(--spacing-3); }
.pastille {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: 0.3rem 0.75rem;
    font-family: var(--font-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-full);
}
.pastille .icon { width: 1rem; height: 1rem; }
.pastille--defi { color: var(--on-highlight); background: var(--highlight); }
.pastille--deja { color: var(--success); background: var(--success-soft); }

.question-texte {
    font-family: var(--font-display);
    font-size: clamp(1.375rem, 4.4vw, 1.875rem);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    color: var(--heading);
    margin: 0 0 var(--spacing-5);
    overflow-wrap: anywhere;
}
.question-texte strong { color: var(--accent); }
.question-texte em { color: var(--brand); }

.reponse-champ {
    display: block;
    width: 100%;
    min-height: 3.75rem;
    padding: var(--spacing-3) var(--spacing-4);
    font-family: var(--font-primary);
    font-size: var(--font-size-xl);
    line-height: var(--line-height-snug);
    color: var(--text);
    background: var(--surface);
    border: 2px solid var(--border-strong);
    border-radius: 14px;
    resize: vertical;
}
textarea.reponse-champ { min-height: 7rem; }
.reponse-champ:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }
.reponse-champ[readonly] { background: var(--surface-sunken); color: var(--text-muted); }
.reponse-aide { display: flex; align-items: center; gap: var(--spacing-2); margin: var(--spacing-2) 0 0; color: var(--text-muted); font-size: var(--font-size-base); }
.reponse-aide .icon { color: var(--brand); flex-shrink: 0; }

.lecteur-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    margin-top: var(--spacing-5);
}
.lecteur-actions .btn-primary, .lecteur-actions .btn-suivante { flex: 1 1 14rem; min-height: 3.75rem; font-size: var(--font-size-xl); }

/* Retour de correction : jamais de rouge, le ratage est un moment normal */
.retour {
    margin-top: var(--spacing-5);
    padding: var(--spacing-5);
    border-radius: 18px;
    font-size: var(--font-size-lg);
    line-height: var(--line-height-normal);
    animation: retour-apparait var(--duration-slow) var(--easing-out);
}
.retour:empty { display: none; }
.retour-ligne { display: flex; align-items: flex-start; gap: var(--spacing-3); }
.retour-ligne > .icon { width: 2.25rem; height: 2.25rem; flex-shrink: 0; }
.retour-titre { display: block; font-family: var(--font-display); font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); }
.retour p { margin: var(--spacing-1) 0 0; }
.retour .attendue { font-weight: var(--font-weight-bold); color: var(--heading); overflow-wrap: anywhere; }

.retour--reussi { background: var(--success-soft); }
.retour--reussi .retour-ligne > .icon, .retour--reussi .retour-titre { color: var(--success); }
.retour--presque { background: var(--highlight-soft); }
.retour--presque .retour-ligne > .icon { color: var(--warning); }
.retour--presque .retour-titre { color: var(--heading); }
.retour--libre { background: var(--brand-soft); }
.retour--libre .retour-ligne > .icon, .retour--libre .retour-titre { color: var(--brand); }
.retour--garde { background: var(--surface-sunken); }
.retour--garde .retour-ligne > .icon { color: var(--brand); }

.autoeval { display: flex; flex-wrap: wrap; gap: var(--spacing-3); margin-top: var(--spacing-4); }
.autoeval .btn { flex: 1 1 12rem; min-height: 3.5rem; }
.autoeval .btn-trouve { color: var(--success); border-color: var(--success); background: var(--surface); }
.autoeval .btn-trouve:hover { background: var(--success-soft); }

@keyframes retour-apparait {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

/* ── Fin de série ── */
.fin-carte {
    margin-top: var(--spacing-8);
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow: var(--shadow-md);
    padding: var(--spacing-10) var(--spacing-6);
}
.fin-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    color: var(--accent);
    background: var(--accent-soft);
    margin-bottom: var(--spacing-5);
}
.fin-icone .icon { width: 2.75rem; height: 2.75rem; }
.fin-carte h1 { font-size: clamp(1.875rem, 6vw, 2.5rem); margin: 0 0 var(--spacing-3); }
.fin-score { font-family: var(--font-display); font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--heading); margin: 0 0 var(--spacing-2); }
.fin-mot { font-size: var(--font-size-lg); color: var(--text-muted); margin: 0 0 var(--spacing-2); }
.fin-attente { display: inline-flex; align-items: center; gap: var(--spacing-2); color: var(--text-muted); margin: var(--spacing-2) 0 0; }
.fin-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-3); margin-top: var(--spacing-8); }
.fin-actions .btn { flex: 1 1 12rem; max-width: 18rem; min-height: 3.5rem; }

/* Réponses gardées hors connexion (le bandeau « Hors connexion » vient de pwa.js) */
.note-file {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    max-width: 46rem;
    margin: var(--spacing-3) auto 0;
    padding: var(--spacing-3) var(--spacing-4);
    font-size: var(--font-size-base);
    color: var(--text);
    background: var(--surface-sunken);
    border-radius: 14px;
}
.note-file .icon { color: var(--brand); flex-shrink: 0; }
.eleve-barre + .note-file { margin-left: var(--spacing-4); margin-right: var(--spacing-4); }
@media (min-width: 48.5rem) { .eleve-barre + .note-file { margin-left: auto; margin-right: auto; } }

/* ── Lecture à voix haute ── */
.serie-carte--lecture .serie-pastille { color: var(--accent); background: var(--accent-soft); }
.serie-carte--lecture.serie-carte--reussie .serie-pastille { color: var(--success); background: var(--success-soft); }

.lecture-carte {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-6);
}
.lecture-titre { font-size: clamp(1.5rem, 5vw, 2rem); margin: 0 0 var(--spacing-4); overflow-wrap: anywhere; }
.lecture-outils {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-5);
}
.taille-texte { display: inline-flex; gap: var(--spacing-2); }
.taille-texte .btn { width: 3rem; padding: 0; }
.modele-outils { display: inline-flex; flex-wrap: wrap; gap: var(--spacing-2); }
.modele-outils .btn[aria-pressed="true"] { color: var(--brand-strong); background: var(--brand-soft); border-color: var(--brand); }

.lecture-texte {
    --taille-lecture: 1.5rem;
    font-family: var(--font-primary);
    font-size: var(--taille-lecture);
    line-height: 1.7;
    color: var(--text);
    overflow-wrap: anywhere;
    max-width: 38em;
}
.lecture-texte p { margin: 0 0 0.8em; }
.lecture-texte p:last-child { margin-bottom: 0; }
.lecture-texte strong { color: var(--accent); }
.lecture-texte em { color: var(--brand); }

.enregistreur, .envois {
    margin-top: var(--spacing-6);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-6);
}
.enregistreur h2, .envois h2 {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-xl);
    margin: 0 0 var(--spacing-4);
}
.enregistreur h2 .icon, .envois h2 .icon { color: var(--accent); width: 1.5rem; height: 1.5rem; }
.enr-aide, .enr-pret { margin: 0 0 var(--spacing-4); font-size: var(--font-size-lg); color: var(--text-muted); }
.enr-pret { display: flex; align-items: center; gap: var(--spacing-2); color: var(--text); }
.enr-pret .icon { color: var(--brand); width: 1.5rem; height: 1.5rem; flex-shrink: 0; }
.enr-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-3); }
.enr-actions .btn-outline { flex: 1 1 10rem; min-height: 3.5rem; }
.enr-actions .btn-geant { flex: 1 1 100%; }
.enr-en-cours {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
    font-family: var(--font-display);
}
.enr-voyant {
    align-self: center;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--accent-solid);
    animation: enr-clignote 1.2s ease-in-out infinite;
}
.enr-chrono { font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); color: var(--heading); font-variant-numeric: tabular-nums; }
.enr-max { font-size: var(--font-size-lg); color: var(--text-muted); }
.enr-en-cours + .progression-piste { margin-bottom: var(--spacing-5); }
.enr-barre { background: var(--accent-solid); transition: width 250ms linear; }
#enr-message:not(:empty) { margin-top: var(--spacing-4); }
.message-doux--reussi { background: var(--success-soft); }
.message-doux--reussi .icon { color: var(--success); }
@keyframes enr-clignote { 50% { opacity: 0.3; } }

.envois-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spacing-4); }
.envoi { padding-top: var(--spacing-4); border-top: 1px solid var(--border); }
.envoi:first-child { padding-top: 0; border-top: 0; }
.envoi-tete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-3); }
.envoi-date { color: var(--text-muted); }
.envoi-niveau { display: flex; align-items: center; gap: var(--spacing-2); margin: var(--spacing-3) 0 0; font-family: var(--font-display); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--success); }
.envoi-attente { margin: var(--spacing-3) 0 0; color: var(--text-muted); }
.envoi-mot {
    display: flex;
    gap: var(--spacing-3);
    margin: var(--spacing-3) 0 0;
    padding: var(--spacing-4);
    background: var(--highlight-soft);
    border-radius: 14px;
    color: var(--text);
    overflow-wrap: anywhere;
}
.envoi-mot > .icon { color: var(--warning); width: 1.5rem; height: 1.5rem; flex-shrink: 0; }
.envoi-mot-titre { display: block; font-family: var(--font-display); font-weight: var(--font-weight-bold); color: var(--heading); margin-bottom: var(--spacing-1); }

@media (max-width: 480px) {
    .eleve-ecran { padding-top: var(--spacing-4); }
    .question-carte, .lecture-carte, .enregistreur, .envois { padding: var(--spacing-5) var(--spacing-4); }
    .code-carte { padding: var(--spacing-6) var(--spacing-4); }
    .matieres { grid-template-columns: repeat(2, 1fr); }
}

/* Titres qui reçoivent le focus par script (annonce aux lecteurs d'écran) :
   pas de cadre, ce n'est pas un élément interactif. */
h1[tabindex="-1"]:focus, h1[tabindex="-1"]:focus-visible,
h2[tabindex="-1"]:focus, h2[tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }