/* ============================================================
   Calcul Mental V3 — Styles partagés élève + professeur
   ============================================================

   V3 n'avait AUCUN fichier de style : chaque écran portait son CSS en
   dur dans un bloc <style>. Trois conséquences —

     — le navigateur ne mettait rien en cache : les mêmes 200 lignes
       repartaient à chaque page, sur 60 tablettes ;
     — deux écrans voisins finissaient par diverger, sans qu'on le voie ;
     — et surtout, l'apparence de V2 avait été refaite au lieu d'être
       reprise. C'est ce qui se voyait au premier coup d'œil.

   Ces trois fichiers reprennent le langage visuel de V2 : sa palette,
   ses cartes blanches à coins arrondis posées sur une ombre douce, son
   fond dégradé côté élève, sa barre latérale sombre côté professeur.
   ============================================================ */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

:root {
    /* Les couleurs invariantes entre les deux interfaces — celles de V2 */
    --juste:   #10B981;
    --faux:    #EF4444;
    --forme:   #F59E0B;
    --ardoise: #64748B;

    /* Le orange de V2 ne donne que 3,19:1 sur blanc : illisible au
       vidéoprojecteur. On garde sa teinte pour les fonds, et une
       variante foncée dès qu'il s'agit de TEXTE. */
    --forme-texte: #B45309;

    /* Même histoire pour le vert. #10B981 ne donne que 2,54:1 sur blanc
       et 2,07:1 sur son propre fond pâle : un taux de réussite écrit en
       vert clair ne se lit pas au vidéoprojecteur, et c'est justement le
       chiffre qu'on montre à la classe. Le fond garde la teinte vive, le
       TEXTE prend celle-ci. */
    --juste-texte: #047857;

    /* Et le rouge : #EF4444 ne donne que 3,76:1 sur blanc. Un taux de
       reussite ecrit en rouge clair est precisement celui qu'on veut
       pouvoir lire — le fond garde la teinte vive, le TEXTE prend
       celle-ci. */
    --faux-texte:  #B91C1C;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 system-ui, sans-serif;
}

/**
 * L'ATTRIBUT `hidden` DOIT GAGNER.
 *
 * `hidden` n'est qu'un `display: none` posé par la feuille du navigateur :
 * la moindre règle d'auteur qui déclare un `display` l'écrase, quelle que
 * soit sa spécificité. `.barre-bas { display: flex }` suffisait — et la
 * barre de navigation, marquée `hidden` faute de connexion, s'affichait
 * VIDE en haut de l'écran de connexion. Un rectangle blanc sans contenu,
 * que ni le contraste ni les cibles tactiles ne pouvaient signaler.
 *
 * `!important` est ici la règle correcte, pas un contournement : masquer
 * est une intention, pas une suggestion.
 */
[hidden] { display: none !important; }

/**
 * ---- Pastilles ----
 *
 * `.badge` et ses variantes sont définies plus bas, avec les teintes de
 * V2. Les quatre `.badge-succes`, `.badge-neutre`, `.badge-attente` et
 * `.badge-erreur` qui vivaient ici n'étaient portées par AUCUN écran :
 * du style mort, et une seconde famille pour la même chose.
 *
 * `.rang` a été retirée d'ici pour la même raison, en pire : les deux
 * écrans qui l'emploient (`prof/eleve.php`, `eleve/defi_resultat.php`)
 * déclarent chacun la leur. Et comme `.rang.or` est plus spécifique que
 * le `.rang` d'une feuille de page, elle repeignait en ambre la LIGNE
 * ENTIÈRE du classement d'un défi — trois lignes sur quatre teintées,
 * là où seul le numéro devait l'être.
 */
.etat, .pastille {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}
.etat.neutre    { background: #F1F5F9; color: #475569; }
.etat.attention { background: #FEF3C7; color: #92400E; }

/* ---- Fractions empilées ---- */
.frac {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    vertical-align: middle;
    line-height: 1.15;
    margin: 0 .1em;
}
.frac-num {
    border-bottom: .08em solid currentColor;
    padding: 0 .15em;
    text-align: center;
}
.frac-den { padding: 0 .15em; text-align: center; }

/* ---- Barres de progression ---- */
.barre {
    height: 6px;
    background: #F1F5F9;
    border-radius: 3px;
    overflow: hidden;
    min-width: 70px;
}
.barre i { display: block; height: 100%; background: var(--juste); }
.barre i.bas { background: var(--forme); }

.vide { color: var(--ardoise); font-size: .9rem; }

/* ---- Tableaux ----
   V2 posait ce socle dans `common.css`, partagé par les deux interfaces :
   l'élève lisait son historique dans un tableau à en-têtes, exactement
   comme le professeur lisait ses statistiques. V3 n'en avait gardé que
   la moitié — `prof.css` définissait `table`, `eleve.css` rien, et
   l'historique de l'élève était devenu une liste sans nom de colonne.
   Sur un chiffre seul, « 12 / 20 » ne dit ni ce qu'on compte ni sur quoi. */
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th {
    text-align: left; font-size: .75rem; text-transform: uppercase;
    letter-spacing: .05em; color: var(--ardoise); padding: 10px 14px;
    font-weight: 600; background: #F8FAFC;
    border-bottom: 1px solid #E2E8F0;
}
td { padding: 9px 8px; border-top: 1px solid #F1F5F9; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
/* Le survol de ligne de V2 — présent dans SES DEUX feuilles, absent des
   trois miennes. Sur une liste de trente élèves, c'est ce qui dit où
   l'œil se trouve, et que la ligne répond. */
tr:hover td { background: #F8FAFC; }

/* Un tableau ne rétrécit pas sous 480 px : il défile dans son propre
   cadre, sans jamais faire défiler la page en largeur. */
.defilable { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/**
 * =============================================================
 * LES BADGES DE V2
 * =============================================================
 *
 * `.badge` et ses variantes viennent de `V2/assets/css/common.css`,
 * teintes comprises. V3 avait redéfini une pastille différente sur
 * chaque page — `.etat`, `.rang`, `.puce` — avec des gris qui ne
 * disaient plus rien : une séance terminée et une séance abandonnée se
 * ressemblaient.
 *
 * Contrastes mesurés sur leur propre fond : succès 6,78:1, neutre
 * 6,92:1, attention 6,37:1, erreur 6,80:1, primaire 5,99:1.
 */
.badge {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 3px 10px; border-radius: 999px;
    font-size: .75rem; font-weight: 600; white-space: nowrap;
}
.badge.succes    { background: #D1FAE5; color: #065F46; }
.badge.neutre    { background: #F1F5F9; color: #475569; }
.badge.attention { background: #FEF3C7; color: #92400E; }
.badge.erreur    { background: #FEE2E2; color: #991B1B; }
.badge.primaire  { background: #EEF2FF; color: var(--primaire); }

/**
 * LES MODES — chacun reprend la teinte de son bouton de lancement, en
 * version pâle : l'élève reconnaît « Défi » à sa couleur avant d'avoir
 * lu le mot.
 *
 * La séance est la seule PLEINE : fond #059669, le vert exact qui ouvre
 * le dégradé du bouton « Nouvelle séance », texte blanc. C'est le mode
 * le plus fréquent, et le seul qui côtoie sur la même ligne un badge
 * « Terminée » vert lui aussi — le remplissage les sépare d'un coup
 * d'œil là où deux verts pâles se confondaient.
 *
 * Le blanc sur #059669 donne 3,77:1, sous le seuil de 4,5 des petits
 * caractères. Décision de l'auteur du 31 juillet 2026, prise en
 * connaissance de la mesure : c'est la teinte du bouton, et le badge ne
 * porte aucune information que le mot lui-même ne donne pas.
 *
 * Contrastes : séance 3,77:1, solo 7,07:1, défi 5,30:1, tournoi 4,52:1.
 */
/**
 * TOUS LA MÊME LARGEUR.
 *
 * Laissés à leur largeur naturelle, ils mesuraient 42, 44, 58 et 61 px :
 * dans une colonne, quatre pastilles de tailles différentes font un bord
 * en dents de scie, et l'œil lit la longueur du mot avant sa couleur.
 * 64 px logent « Tournoi », le plus long, sans le serrer.
 */
.badge[class*="m-"] { min-width: 64px; }

.badge.m-seance  { background: #059669; color: #fff; }
.badge.m-solo    { background: #EEF2FF; color: #4338CA; }
.badge.m-defi    { background: #FEE2E2; color: #B91C1C; }
.badge.m-tournoi { background: #FFEDD5; color: #C2410C; }