/* ===========================================================================
   QCM de Maths — feuille de style
   Mise en page en flux et en grille, pas en tableaux : contrairement à
   l'application historique, les pages sont lisibles sur un téléphone comme
   sur le vidéoprojecteur de la salle.
   =========================================================================== */

/* --------------------------------------------------------------------------
   Palette

   Ce sont les couleurs de la refonte de Maths&clic, reprises telles quelles :
   les deux applications vivent sur le même domaine et se répondent par des
   liens, elles doivent se ressembler. Les noms restent ceux d'ici — un
   « --encre » lisible plutôt qu'un « --ink » — mais les valeurs sont les
   siennes, à l'unité près.

   Le thème sombre ne fait que redéfinir ces mêmes variables. Tout ce qui les
   emploie suit sans une ligne de plus.
   -------------------------------------------------------------------------- */
:root {
    --encre:        #131A26;
    --encre-douce:  #5A6780;
    --encre-pale:   #8996AC;
    --fond:         #F6F8FC;
    --fond-2:       #F0F3F9;
    --carte:        #FFFFFF;
    --trait:        #E2E7F0;
    --trait-fort:   #CFD7E5;
    --accent:       #2F6BF0;
    --accent-2:     #6C5CE7;
    --accent-fonce: #1E4FBF;
    --accent-pale:  #E8EFFE;
    --succes:       #1E7A5A;
    --succes-fond:  #E4F3EC;
    --erreur:       #C93B32;
    --erreur-fond:  #FBEAE8;
    --info:         #2F6BF0;
    --info-fond:    #E8EFFE;

    /* Le bandeau : un bleu de nuit, dégradé de haut en bas. */
    --bandeau:       #0D1522;
    --bandeau-2:     #162034;
    --bandeau-encre: #E9EDF6;
    --bandeau-encre-2: #9AA7C0;
    --bandeau-trait: #26324B;

    --rayon:        10px;
    --rayon-petit:  7px;
    --largeur:      1180px;
    --hauteur-bandeau: 62px;

    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono:  ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SF Mono", Menlo, Consolas, monospace;

    --sur-accent:   #FFFFFF;

    --ombre:        0 1px 2px rgba(19, 26, 38, .05), 0 8px 24px -12px rgba(19, 26, 38, .18);
    --ombre-portee: 0 2px 4px rgba(19, 26, 38, .06), 0 16px 32px -16px rgba(19, 26, 38, .28);
}

/* Thème sombre. Deux blocs identiques : l'un suit le réglage du système,
   l'autre le choix explicite de l'utilisateur. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --encre:        #E8ECF5;
        --encre-douce:  #94A2BA;
        --encre-pale:   #6E7C95;
        --fond:         #080C15;
        --fond-2:       #172133;
        --carte:        #101827;
        --trait:        #212D44;
        --trait-fort:   #2C3B57;
        --accent:       #6BA1FF;
        --accent-2:     #9B8BFF;
        --accent-fonce: #9CC0FF;
        --accent-pale:  #16233C;
        --succes:       #4DBF97;
        --succes-fond:  #12271F;
        --erreur:       #F2776C;
        --erreur-fond:  #2C1815;
        --info:         #6BA1FF;
        --info-fond:    #16233C;
        --bandeau:      #070B13;
        --bandeau-2:    #0E1524;
        --bandeau-trait: #1C2537;
        --sur-accent:   #06101F;
        --ombre:        0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
        --ombre-portee: 0 2px 4px rgba(0, 0, 0, .45), 0 16px 32px -16px rgba(0, 0, 0, .7);
    }
}

:root[data-theme="dark"] {
    --encre:        #E8ECF5;
    --encre-douce:  #94A2BA;
    --encre-pale:   #6E7C95;
    --fond:         #080C15;
    --fond-2:       #172133;
    --carte:        #101827;
    --trait:        #212D44;
    --trait-fort:   #2C3B57;
    --accent:       #6BA1FF;
    --accent-2:     #9B8BFF;
    --accent-fonce: #9CC0FF;
    --accent-pale:  #16233C;
    --succes:       #4DBF97;
    --succes-fond:  #12271F;
    --erreur:       #F2776C;
    --erreur-fond:  #2C1815;
    --info:         #6BA1FF;
    --info-fond:    #16233C;
    --bandeau:      #070B13;
    --bandeau-2:    #0E1524;
    --bandeau-trait: #1C2537;
    --sur-accent:   #06101F;
    --ombre:        0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
    --ombre-portee: 0 2px 4px rgba(0, 0, 0, .45), 0 16px 32px -16px rgba(0, 0, 0, .7);
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
    color: var(--encre);
    background: var(--fond);
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* « hidden » doit l'emporter sur tout le reste. La règle du navigateur est si
   peu spécifique que la moindre classe la contredit — un bouton caché en
   attendant que le script le prenne en charge resterait visible, et cliquable
   pour rien. */
[hidden] { display: none !important; }

/* Les titres sont en serif, comme sur Maths&clic : c'est ce qui donne à
   l'ensemble son air de famille, et ce qui distingue le plus un titre de son
   texte — davantage que sa taille. */
h1, h2, h3 {
    font-family: var(--serif);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.01em;
    text-wrap: balance;
}

h1 { font-size: 1.6rem;  margin: 0 0 1rem; }
h2 { font-size: 1.25rem; margin: 2rem 0 .75rem; }
h3 { font-size: 1.05rem; margin: 0 0 .5rem; }

/* Un lien d'évitement, pour qui navigue au clavier. */
.saut-contenu {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--carte);
    color: var(--encre);
    padding: 12px 18px;
    border-radius: 0 0 8px 0;
}

.saut-contenu:focus { left: 0; }

/* Une ligne de texte trop longue se relit mal : l'œil perd le début de la
   suivante. On borne les paragraphes explicatifs, pas les tableaux. */
p { max-width: 72ch; }

a { color: var(--accent); text-underline-offset: .15em; }
a:hover { color: var(--accent-fonce); }

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .92em;
    background: var(--fond);
    border: 1px solid var(--trait);
    padding: .1em .4em;
    border-radius: var(--rayon-petit);
}

/* ---- Bandeau ------------------------------------------------------------ */

/* Le bandeau reste en haut quand la page défile : sur une longue banque de
   questions, les onglets restent à portée. */
.bandeau {
    background: linear-gradient(180deg, var(--bandeau) 0%, var(--bandeau-2) 100%);
    border-bottom: 1px solid var(--bandeau-trait);
    color: var(--bandeau-encre);
    position: sticky;
    top: 0;
    z-index: 40;
}

.bandeau__interieur {
    width: 100%;
    max-width: var(--largeur);
    margin: 0 auto;
    padding: 8px 24px;
    display: flex;
    align-items: center;
    gap: 26px;
    min-height: var(--hauteur-bandeau);
}

.bandeau__titre {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    flex: none;
    color: var(--bandeau-encre);
    text-decoration: none;
}

/* Le logo d'origine, en blanc pour le bandeau — même hauteur que la marque de
   Maths&clic, pour que les deux bandeaux se répondent. */
.bandeau__logo {
    display: block;
    height: 34px;
    width: auto;
}

/* « professeur » à côté du logo : un repère d'espace, pas un titre. */
.bandeau__espace {
    padding-left: .7rem;
    border-left: 1px solid var(--bandeau-trait);
    font-size: 14px;
    color: var(--bandeau-encre-2);
}

/* Les onglets vivent dans le bandeau, comme les liens de Maths&clic. */
.bandeau__nav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1 1 auto;
    flex-wrap: wrap;
}

.bandeau__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
}

.bandeau__identite {
    font-size: 13.5px;
    color: var(--bandeau-encre-2);
    white-space: nowrap;
}

/* Bouton d'icône : carré, discret, il s'éclaire au survol. */
.iconbtn {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--bandeau-encre-2);
    text-decoration: none;
    cursor: pointer;
    transition: color .15s, background-color .15s;
}

.iconbtn:hover { color: var(--bandeau-encre); background: rgba(255, 255, 255, .08); }

/* Retour au site parent. Encadré, contrairement aux boutons d'icône voisins :
   c'est la seule sortie du site, elle mérite d'être vue sans être criante. Le
   logo de Maths&clic est plus petit que la marque du bandeau, pour qu'aucun
   doute ne subsiste sur laquelle des deux nomme la page. */
.bandeau__retour {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 34px;
    padding: 0 10px 0 5px;
    margin-right: 4px;
    border: 1px solid var(--bandeau-trait);
    border-radius: 8px;
    color: var(--bandeau-encre-2);
    text-decoration: none;
    transition: color .15s, background-color .15s, border-color .15s;
}

.bandeau__retour:hover {
    color: var(--bandeau-encre);
    background: rgba(255, 255, 255, .08);
    border-color: var(--bandeau-encre-2);
}

/* Le logo est blanc sur fond transparent : il s'atténue et se ravive avec le
   chevron, d'un seul mouvement. */
.bandeau__retour-logo {
    display: block;
    height: 24px;
    width: auto;
    opacity: .78;
    transition: opacity .15s;
}

.bandeau__retour:hover .bandeau__retour-logo { opacity: 1; }

.burger {
    display: none;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    font: inherit;
    font-size: 14px;
    color: var(--bandeau-encre-2);
    background: none;
    border: 1px solid var(--bandeau-trait);
    border-radius: 8px;
    cursor: pointer;
}

.burger:hover { color: var(--bandeau-encre); }

.enligne { display: inline; margin: 0; }

/* ---- Structure ---------------------------------------------------------- */

.contenu {
    width: 100%;
    max-width: var(--largeur);
    margin: 0 auto;
    padding: 1.75rem 24px 3rem;
}

/* ---- Cartes ------------------------------------------------------------- */

.carte {
    background: var(--carte);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    padding: 1.5rem;
    box-shadow: var(--ombre);
    margin-bottom: 1.25rem;
}

.carte--centree {
    max-width: 27rem;
    margin: 2.5rem auto;
    padding: 1.75rem;
    box-shadow: var(--ombre-portee);
}

/* Le premier titre d'une carte ne pousse pas : la carte lui fait déjà sa
   place. Sans cela, chaque carte s'ouvre sur un blanc de deux centimètres. */
.carte > h2:first-child,
.carte > .entete-section:first-child h2 { margin-top: 0; }

.cartes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.carte--action p { color: var(--encre-douce); margin: .25rem 0 .75rem; }

.etiquette {
    display: inline-block;
    font-size: .8rem;
    background: var(--fond);
    border: 1px solid var(--trait);
    border-radius: 999px;
    padding: .15rem .7rem;
    color: var(--encre-douce);
}

/* ---- Formulaires -------------------------------------------------------- */

.formulaire { margin: 0; }

.champ { margin: 0 0 1rem; }

.champ label {
    display: block;
    font-size: .9rem;
    font-weight: 600;
    margin-bottom: .3rem;
}

.champ input {
    width: 100%;
    padding: .55rem .7rem;
    font-size: 1rem;
    font-family: inherit;
    color: inherit;
    border: 1px solid var(--trait-fort);
    border-radius: var(--rayon-petit);
    background: var(--carte);
}

/* Un anneau net et unique sur l'élément qui a la main. Il vaut pour la souris
   comme pour la tabulation : quelqu'un qui navigue au clavier doit voir où il
   se trouve, sans quoi il avance à l'aveugle. */
.champ input:focus-visible,
.champ select:focus-visible,
.champ textarea:focus-visible,
.filtres select:focus-visible,
.filtres input:focus-visible,
.formulaire-ligne input:focus-visible,
.bouton:focus-visible,
a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* La bordure se renforce au survol d'un champ : elle indique qu'il est
   modifiable avant même qu'on y entre. */
.champ input:hover,
.champ select:hover,
.champ textarea:hover { border-color: var(--encre-douce); }

.bouton {
    display: inline-block;
    padding: .5rem 1rem;
    font-size: .95rem;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.4;
    border: 1px solid var(--trait-fort);
    border-radius: var(--rayon-petit);
    background: var(--carte);
    color: var(--encre);
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--ombre);
    transition: background-color .12s ease, border-color .12s ease;
}

/* La couleur du texte est répétée sur le survol, et ce n'est pas superflu :
   beaucoup de boutons sont des liens (« Nouveau QCM », « Ouvrir le sujet »…),
   et la règle générale « a:hover » l'emporterait sinon sur « .bouton » — le
   texte prendrait la couleur d'accent, c'est-à-dire celle du fond du bouton
   principal, qui deviendrait illisible. Deux classes valent mieux qu'un
   élément et une pseudo-classe : c'est ce qui tranche ici. */
.bouton:hover {
    background: var(--fond);
    border-color: var(--encre-douce);
    color: var(--encre);
}

/* Le bouton s'enfonce légèrement : sur un écran tactile, c'est le seul retour
   qu'on ait que le geste a porté. */
.bouton:active { transform: translateY(1px); }

.bouton:disabled,
.bouton[disabled] {
    opacity: .5;
    cursor: not-allowed;
    box-shadow: none;
}

.bouton--principal {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--sur-accent);
}

.bouton--principal:hover {
    background: var(--accent-fonce);
    border-color: var(--accent-fonce);
    color: var(--sur-accent);
}

/* Le bouton d'un formulaire centré prend toute la largeur de la carte : c'est
   le seul geste attendu de la page. Ailleurs — barres d'actions, en-têtes,
   tableaux — il reste de la taille de son texte, sinon il occupe une ligne
   entière à lui seul et repousse les boutons voisins. */
.carte--centree .bouton--principal,
.carte--action .bouton--principal {
    width: 100%;
}

.aide {
    font-size: .9rem;
    line-height: 1.55;
    color: var(--encre-douce);
    margin-top: 1rem;
    max-width: 78ch;
}

/* ---- Messages ----------------------------------------------------------- */

.messages { margin-bottom: 1rem; }

/* Le message porte une barre de couleur à gauche plutôt qu'un cadre entier :
   il se remarque sans crier, et son texte reste lisible sur fond très pâle. */
.message {
    margin: 0 0 .6rem;
    padding: .75rem 1rem;
    border-radius: var(--rayon-petit);
    border: 1px solid transparent;
    border-left-width: 4px;
    max-width: none;
    box-shadow: var(--ombre);
}

.message--succes { background: var(--succes-fond); border-color: var(--succes); color: var(--succes); }
.message--erreur { background: var(--erreur-fond); border-color: var(--erreur); color: var(--erreur); }
.message--info   { background: var(--info-fond);   border-color: var(--info);   color: var(--info); }

/* ---- Chiffres du tableau de bord ---------------------------------------- */

.chiffres {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    gap: .75rem;
}

.chiffre {
    background: var(--carte);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    padding: .9rem .75rem;
    text-align: center;
    box-shadow: var(--ombre);
}

.chiffre strong {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    /* Chiffres de largeur fixe : une colonne de nombres reste alignée, et un
       compteur qui change ne fait pas sauter la mise en page. */
    font-variant-numeric: tabular-nums;
}

.chiffre span {
    display: block;
    margin-top: .15rem;
    font-size: .82rem;
    line-height: 1.35;
    color: var(--encre-douce);
}

/* ---- Tableaux ----------------------------------------------------------- */

/* Un tableau large défile dans son propre cadre : la page, elle, ne défile
   jamais horizontalement. */
.tableau-defilant { overflow-x: auto; }

.tableau {
    width: 100%;
    border-collapse: collapse;
    background: var(--carte);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
}

.tableau th,
.tableau td {
    padding: .6rem .8rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--trait);
}

/* Ce qui ne doit pas se couper : les en-têtes, la colonne d'identité, les
   nombres. Le reste — un énoncé, une liste de classes — se replie plutôt que
   d'étirer le tableau sur trois écrans de large. */
.tableau thead th,
.tableau th[scope="row"] { white-space: nowrap; }

.tableau thead th {
    background: var(--fond);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--encre-douce);
    vertical-align: bottom;
    border-bottom: 1px solid var(--trait-fort);
}

.tableau tbody tr:last-child td,
.tableau tbody tr:last-child th { border-bottom: none; }

/* Le survol suit la ligne d'un bout à l'autre : sur un tableau large, c'est ce
   qui évite de lire la note de l'élève d'au-dessus. */
.tableau tbody tr:hover { background: var(--accent-pale); }

.visuellement-cache {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---- Onglets, dans le bandeau -------------------------------------------- */

/* Des pastilles plutôt qu'une rangée d'onglets soulignés : c'est la forme des
   liens de navigation de Maths&clic, et elle tient dans la même barre que la
   marque. */
.onglet {
    display: block;
    padding: 7px 11px;
    font-size: 14px;
    color: var(--bandeau-encre-2);
    text-decoration: none;
    white-space: nowrap;
    border-radius: 7px;
    transition: color .15s, background-color .15s;
}

.onglet:hover { color: var(--bandeau-encre); background: rgba(255, 255, 255, .06); }

.onglet--actif { color: var(--bandeau-encre); background: rgba(255, 255, 255, .09); }

/* ---- En-tête de page ----------------------------------------------------- */

.entete-page {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.entete-page h1 { margin: 0; }

/* ---- Filtres ------------------------------------------------------------- */

.filtres {
    background: var(--carte);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    padding: 1rem;
    margin-bottom: 1.25rem;
}

.filtres__champs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: .75rem;
}

.filtres label { display: block; }

.filtres label > span {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: var(--encre-douce);
    margin-bottom: .25rem;
}

.filtres select,
.filtres input[type="search"] {
    width: 100%;
    padding: .45rem .6rem;
    font-size: .95rem;
    font-family: inherit;
    color: inherit;
    background: var(--carte);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
}

.filtres__recherche { grid-column: span 2; }

.filtres__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    margin-top: .75rem;
}

.filtres__total {
    margin-left: auto;
    font-size: .9rem;
    color: var(--encre-douce);
}

.bouton--lien {
    background: none;
    border-color: transparent;
    color: var(--accent);
    padding-left: .25rem;
    padding-right: .25rem;
}

.bouton--danger {
    background: var(--erreur-fond);
    border-color: var(--erreur);
    color: var(--erreur);
}

/* Même raison que pour le bouton principal : sans cette ligne, le survol d'un
   bouton-lien de suppression virerait au bleu d'accent. */
.bouton--danger:hover {
    background: var(--erreur);
    border-color: var(--erreur);
    color: var(--sur-accent);
}

.bouton--lien:hover {
    background: var(--accent-pale);
    border-color: transparent;
    color: var(--accent-fonce);
}

/* ---- Liste des questions ------------------------------------------------- */

.liste-questions {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .75rem;
}

.question {
    background: var(--carte);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    padding: 1rem;
}

.question--masquee { background: var(--fond); }

/* Revenir du formulaire ramène à la question par son ancre. Le bandeau est
   collant : sans cette marge, la question visée se retrouverait dessous. */
.question[id],
.tableau tr[id] {
    scroll-margin-top: calc(var(--hauteur-bandeau) + 1rem);
}

/* Et elle se signale un instant, sans quoi rien ne distingue celle qu'on vient
   de quitter de ses voisines. L'animation ne joue qu'une fois ; le liseré, lui,
   reste tant qu'on n'a pas cliqué ailleurs. */
.question:target {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-fonce);
    animation: question-retrouvee 1.6s ease-out 1;
}

@keyframes question-retrouvee {
    from { background: var(--info-fond); }
    to   { background: var(--carte); }
}

@media (prefers-reduced-motion: reduce) {
    .question:target { animation: none; }
}

.question__entete {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
    margin-bottom: .6rem;
}

.question__id {
    font-size: .85rem;
    color: var(--encre-douce);
    font-variant-numeric: tabular-nums;
}

/* Les QCM où la question a déjà servi. La ligne se replie sous l'en-tête plutôt
   que de s'y mêler : les étiquettes du haut décrivent la question, celle-ci
   raconte son passé, et les confondre rendrait les deux illisibles. */
.question__historique {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
    margin: -.2rem 0 .7rem;
    font-size: .85rem;
    color: var(--encre-douce);
}

.question__historique-titre { margin-right: .15rem; }

.etiquette--qcm {
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .15s, color .15s;
}

/* Le code du QCM garde sa police à chasse fixe, mais pas son cadre : une boîte
   dans une pastille ferait deux cadres imbriqués. */
.etiquette--qcm code {
    font-weight: 600;
    color: var(--encre);
    background: none;
    border: none;
    padding: 0;
}

.etiquette--qcm:hover {
    border-color: var(--accent);
    color: var(--encre);
}

/* Un QCM resté à l'état de brouillon n'a été vu de personne : la question n'a
   pas encore servi, même si elle est retenue. */
.question__historique-etat {
    font-style: italic;
    opacity: .8;
}

/* L'énoncé est le seul texte que tout le monde lit vraiment, et souvent sur
   grand écran de vidéoprojecteur : il est un cran au-dessus du reste, aéré, et
   sa longueur de ligne est bornée. */
.question__enonce {
    /* Un énoncé peut contenir une formule très large : elle défile dans son
       cadre plutôt que d'élargir la page. */
    overflow-x: auto;
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 68ch;
}

.question__enonce p { margin: .4em 0; max-width: none; }
.question__enonce p:first-child { margin-top: 0; }
.question__enonce p:last-child  { margin-bottom: 0; }

.question__image {
    display: block;
    margin: .75rem 0 0;
    height: auto;
}

/* Une image absente laisse une icône brisée et le nom du fichier : plutôt un
   cadre discret, qui dit qu'il manque quelque chose sans défigurer la page. */
.question__image,
.question__vignette {
    background: var(--fond);
    border-radius: var(--rayon-petit);
}

/* Dans un tableau de relevé, la figure sert seulement à reconnaître la
   question : une vignette suffit. */
.question__vignette {
    display: block;
    max-height: 3.5rem;
    max-width: 12rem;
    width: auto;
    margin: .4rem 0;
    border: 1px solid var(--trait);
}

.question__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
}

/* ---- Propositions relues dans la banque ---------------------------------- */

/* Relire une question sans son énoncé seul : les quatre propositions sont là,
   la bonne signalée. C'est ce qui permet de juger une question d'un coup d'œil
   au lieu de l'ouvrir une par une. */
.propositions-relues {
    list-style: none;
    margin: .6rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: .3rem;
    max-width: 62rem;
}

.proposition-relue {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .3rem .6rem;
    background: var(--fond);
    border: 1px solid var(--trait);
    border-radius: var(--rayon-petit);
    font-size: .95rem;
    min-width: 0;
}

/* La bonne réponse : fond vert très pâle, bord vert, et la coche. Trois
   marques valent mieux qu'une seule couleur — la liste se relit souvent de
   loin, et se photocopie parfois. */
.proposition-relue--juste {
    background: var(--succes-fond);
    border-color: var(--succes);
}

.proposition-relue__marque {
    flex: none;
    width: 1em;
    color: var(--succes);
    font-weight: 700;
}

.proposition-relue__texte { flex: 1 1 auto; min-width: 0; overflow-x: auto; }

.proposition-relue__etat {
    flex: none;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--succes);
}

.proposition-relue__points {
    flex: none;
    font-size: .8rem;
    color: var(--encre-douce);
    font-variant-numeric: tabular-nums;
}

.etiquette--d1 { border-color: #9cc79c; }
.etiquette--d2 { border-color: #e0b96a; }
.etiquette--d3 { border-color: #d38b8b; }

.etiquette--alerte {
    background: var(--erreur-fond);
    border-color: var(--erreur);
    color: var(--erreur);
}

/* ---- Titre modifiable dans la liste des QCM ------------------------------ */

/* Un champ qui ne se donne pas des airs de champ tant qu'on ne s'en approche
   pas : la colonne doit se lire comme une colonne de texte. Le bouton n'apparaît
   qu'au survol ou au clavier — sinon la liste serait une forêt de boutons. */
.titre-vif {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
    min-width: 12rem;
}

.titre-vif input {
    flex: 1 1 auto;
    min-width: 0;
    padding: .3rem .45rem;
    font: inherit;
    color: inherit;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--rayon-petit);
}

.titre-vif input:hover  { border-color: var(--trait); }
.titre-vif input:focus  { border-color: var(--accent); background: var(--carte); outline: none; }
.titre-vif input::placeholder { color: var(--encre-pale); font-style: italic; }

.titre-vif__valider {
    flex: none;
    padding: .25rem .5rem;
    font-size: .8rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s;
}

.titre-vif:hover .titre-vif__valider,
.titre-vif:focus-within .titre-vif__valider {
    opacity: 1;
    pointer-events: auto;
}

/* ---- Filtres actifs ------------------------------------------------------ */

/* Sous la barre de filtres : ce qui restreint la liste, nommé, et retirable un
   par un. Discret — c'est un rappel, pas un titre. */
.filtres-actifs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin: -.5rem 0 1rem;
    font-size: .85rem;
    color: var(--encre-douce);
}

.filtres-actifs__titre { margin-right: .1rem; }

.filtres-actifs__item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .15rem .3rem .15rem .6rem;
    background: var(--carte);
    border: 1px solid var(--trait);
    border-radius: 999px;
}

.filtres-actifs__nom::after { content: ' :'; }
.filtres-actifs__valeur     { color: var(--encre); font-weight: 600; }

.filtres-actifs__retirer {
    display: inline-grid;
    place-items: center;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    color: var(--encre-douce);
    text-decoration: none;
    font-size: 1rem;
    line-height: 1;
    transition: background-color .12s, color .12s;
}

.filtres-actifs__retirer:hover {
    background: var(--erreur-fond);
    color: var(--erreur);
}

.pagination {
    display: flex;
    gap: .75rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    color: var(--encre-douce);
    font-size: .9rem;
}

.pagination__pages {
    display: flex;
    align-items: center;
    gap: .25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pagination__page {
    display: inline-grid;
    place-items: center;
    min-width: 2.1rem;
    height: 2.1rem;
    padding: 0 .4rem;
    border: 1px solid var(--trait);
    border-radius: var(--rayon-petit);
    color: inherit;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    transition: border-color .15s, color .15s;
}

.pagination__page:hover { border-color: var(--accent); color: var(--encre); }

.pagination__page--actuelle {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--sur-accent);
    font-weight: 600;
}

.pagination__ellipse { padding: 0 .1rem; }

/* Sauter à une page donnée. Le champ est étroit à dessein : c'est un numéro,
   pas une phrase. */
.pagination__aller {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    padding-left: .75rem;
    border-left: 1px solid var(--trait);
}

.pagination__aller input {
    width: 4.5rem;
    padding: .35rem .5rem;
    font: inherit;
    text-align: right;
    color: inherit;
    background: var(--carte);
    border: 1px solid var(--trait);
    border-radius: var(--rayon-petit);
}

/* ---- Boîte de dialogue --------------------------------------------------- */

/* Réservée à la lecture : relire une question sans quitter le tableau qui parle
   d'elle. Un formulaire, lui, reste une page — il est trop haut pour une boîte,
   et il a besoin d'une adresse à laquelle revenir. */
.modale {
    width: min(46rem, calc(100vw - 2rem));
    max-height: calc(100vh - 4rem);
    padding: 0;
    color: var(--encre);
    background: var(--carte);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    box-shadow: var(--ombre-portee);
    overflow: hidden;
}

.modale::backdrop {
    background: rgba(8, 12, 21, .55);
}

.modale__entete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--trait);
}

.modale__entete h3 { margin: 0; font-size: 1.05rem; }

/* Le bouton de fermeture vit sur fond clair, contrairement à ses jumeaux du
   bandeau : il lui faut l'encre de la page. */
.modale__fermer {
    flex: none;
    color: var(--encre-douce);
}

.modale__fermer:hover {
    color: var(--encre);
    background: var(--fond);
}

/* Une question longue défile dans la boîte, pas la boîte dans la page. */
.modale__corps {
    padding: 1.25rem;
    overflow-y: auto;
    max-height: calc(100vh - 10rem);
}

.modale__corps .question__enonce { margin-top: 0; }

/* ---- Formulaire de question ---------------------------------------------- */

.grille-deux {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 1rem;
}

.formulaire .carte { margin-bottom: 1rem; }

.formulaire h2 { margin-top: 0; }

.champ textarea,
.champ select {
    width: 100%;
    padding: .55rem .7rem;
    font-size: 1rem;
    font-family: inherit;
    color: inherit;
    background: var(--carte);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
}

.champ textarea {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .95rem;
    resize: vertical;
}

.champ--case label {
    display: flex;
    gap: .5rem;
    align-items: baseline;
    font-weight: normal;
}

.champ--case input { width: auto; }

.champ--court input { max-width: 9rem; }

.apercu {
    margin-top: 1rem;
    border: 1px dashed var(--trait);
    border-radius: var(--rayon);
    padding: .75rem;
    background: var(--fond);
}

.apercu__titre {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: var(--encre-douce);
    margin-bottom: .35rem;
}

.apercu__contenu {
    min-height: 2.5rem;
    overflow-x: auto;
}

.apercu-image {
    max-width: min(100%, 18rem);
    height: auto;
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
}

.tableau--reponses input[type="text"] {
    width: 100%;
    padding: .4rem .55rem;
    font-family: inherit;
    font-size: .95rem;
    color: inherit;
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
}

.tableau--reponses td { white-space: normal; }

.colonne-case  { width: 4rem; text-align: center; }
.colonne-points { width: 7rem; }
.colonne-points input { text-align: right; }

.barre-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    margin: 1.25rem 0;
}

.barre-actions--secondaire {
    border-top: 1px solid var(--trait);
    padding-top: 1rem;
}

.barre-actions--serree { margin: 0; }

.grille-trois {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1rem;
}

.sous-titre {
    margin: -.5rem 0 1rem;
    color: var(--encre-douce);
    font-size: 1.05rem;
}

.entete-section {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .5rem;
}

.entete-section h2 { margin: 0; }

/* ---- État d'un QCM ------------------------------------------------------- */

.etat {
    display: inline-block;
    font-size: .8rem;
    font-weight: 600;
    border-radius: 999px;
    padding: .1rem .7rem;
    border: 1px solid;
    vertical-align: middle;
}

.etat--brouillon { background: var(--fond);       border-color: var(--trait);  color: var(--encre-douce); }
.etat--ouvert    { background: var(--succes-fond); border-color: var(--succes); color: var(--succes); }
.etat--clos      { background: var(--info-fond);   border-color: var(--info);   color: var(--info); }

.nombre {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---- Règle de tirage ----------------------------------------------------- */

.colonne-tirage { white-space: nowrap; }

.colonne-tirage input {
    width: 4.5rem;
    padding: .35rem .5rem;
    font-family: inherit;
    font-size: .95rem;
    text-align: right;
    color: inherit;
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
}

/* Signale une demande supérieure au vivier disponible. */
.champ--faux {
    border-color: var(--erreur) !important;
    background: var(--erreur-fond);
}

.dispo {
    font-size: .85rem;
    color: var(--encre-douce);
    margin-left: .25rem;
}

.titre-chapitre {
    margin: 1.5rem 0 .5rem;
    padding-bottom: .25rem;
    border-bottom: 1px solid var(--trait);
    font-size: 1rem;
}

.liste-questions--serree .question { padding: .75rem; }

/* Une question imposée à tous les élèves, et une déjà retenue dans le vivier. */
.question--fixe { border-left: 4px solid var(--accent); }
.question--prise { background: var(--fond); }

.etiquette--fixe {
    background: var(--info-fond);
    border-color: var(--info);
    color: var(--info);
}

/* Les deux états d'un geste sont tous deux dans la page, et une classe sur la
   question décide lequel se montre : « Ajouter » ou « Retirer » selon
   l'appartenance au vivier, « Imposer à tous » ou « Remettre au tirage » selon
   que la question est fixe. C'est ce qui permet au script de basculer l'état
   sans redessiner la question — donc sans que MathJax ait à recomposer les
   formules, ce qui se verrait. */
.question:not(.question--prise) .etiquette--vivier,
.question:not(.question--prise) .vivier--retirer,
.question--prise .vivier--ajouter,
.question:not(.question--fixe) .etiquette--imposee,
.question:not(.question--fixe) .libelle-impose,
.question--fixe .libelle-libre {
    display: none;
}

/* Pendant l'aller-retour avec le serveur, les boutons ne répondent plus : sans
   cela un double clic partirait deux fois. */
.question--envoi .question__actions button {
    opacity: .6;
    pointer-events: none;
}

/* ---- Relevés ------------------------------------------------------------- */

/* Répartition des notes. Une seule série — le nombre de copies par tranche —
   donc une seule couleur : teinter chaque barre différemment laisserait croire
   que les tranches sont des catégories sans rapport entre elles. Le nombre est
   écrit en toutes lettres à côté, si bien que la barre n'est jamais le seul
   porteur de l'information. */
.histogramme {
    list-style: none;
    margin: .5rem 0 0;
    padding: 0;
    display: grid;
    gap: 2px;
}

.histogramme__ligne {
    display: grid;
    grid-template-columns: 7rem 1fr 2.5rem;
    align-items: center;
    gap: .6rem;
}

.histogramme__libelle { font-size: .85rem; color: var(--encre-douce); text-align: right; }

.histogramme__piste {
    background: var(--fond);
    border-radius: 4px;
    height: 1.25rem;
    overflow: hidden;
}

.histogramme__barre {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: 0 4px 4px 0;
}

/* Une tranche non vide reste visible même quand elle ne pèse presque rien.
   Une tranche vide, elle, ne dessine rien : un trait résiduel se lirait comme
   « une copie », et ferait mentir l'histogramme là où il compte le plus. */
.histogramme__barre--visible { min-width: 3px; }

.histogramme__valeur {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    text-align: right;
}

/* Taux de réussite d'une question, dans le tableau. */
.jauge {
    display: inline-grid;
    grid-template-columns: 5rem 3rem;
    align-items: center;
    gap: .5rem;
}

.jauge__piste {
    background: var(--fond);
    border-radius: 4px;
    height: .75rem;
    overflow: hidden;
}

.jauge__barre {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: 0 4px 4px 0;
}

.jauge__valeur {
    font-variant-numeric: tabular-nums;
    font-size: .85rem;
    text-align: right;
}

/* Un énoncé dans un tableau de relevé : il sert à reconnaître la question,
   pas à la lire en entier. */
.question__enonce--court {
    max-height: 4.5rem;
    overflow: hidden;
    max-width: 30rem;
}

/* Modifier un élève sans quitter la liste : deux champs et un bouton sur une
   ligne, qui se replient plutôt que de déborder. */
.formulaire-ligne {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
    margin: 0;
}

.formulaire-ligne input {
    flex: 1 1 8rem;
    min-width: 0;
    padding: .35rem .5rem;
    font: inherit;
    color: inherit;
    background: var(--carte);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
}

/* Tableau croisé élèves × QCM. */
/* Un QCM par colonne : au-delà d'une dizaine, le tableau défile et la colonne
   des noms sortait de l'écran — on lisait des notes sans savoir de qui. Elle
   reste donc en place. Le fond est indispensable : une cellule collante est
   transparente par défaut, et le reste du tableau défilerait dessous. */
.tableau--croise th[scope="row"] {
    white-space: nowrap;
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--carte);
    border-right: 1px solid var(--trait);
}

.tableau--croise .ligne-synthese th[scope="row"] { background: var(--fond); }

.ligne-synthese {
    background: var(--fond);
    font-weight: 600;
}

.colonne-moyenne { background: var(--fond); font-weight: 600; }

.entete-note {
    display: block;
    font-weight: 400;
    font-size: .75rem;
    color: var(--encre-douce);
}

/* ---- Espace élève : passation -------------------------------------------- */

.filtres--nu { border: none; background: none; padding: 0; margin-bottom: 1rem; }

.liste-chapitres {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: .5rem;
}

.chapitre {
    display: block;
    width: 100%;
    text-align: left;
    padding: .75rem 1rem;
    font-family: inherit;
    font-size: 1rem;
    color: inherit;
    background: var(--carte);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    cursor: pointer;
}

.chapitre:hover { border-color: var(--accent); background: var(--info-fond); }

.chapitre__nom    { display: block; font-weight: 600; }
.chapitre__niveau,
.chapitre__nb     { display: block; font-size: .85rem; color: var(--encre-douce); }

.liste-simple { list-style: none; margin: 0; padding: 0; }
.liste-simple li { padding: .4rem 0; border-bottom: 1px solid var(--trait); }
.liste-simple li:last-child { border-bottom: none; }

.liste-passation {
    list-style: none;
    counter-reset: question;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.question-passation { position: relative; padding-left: 3.25rem; }

/* Le numéro de question, dans la marge. */
.question-passation::before {
    counter-increment: question;
    content: counter(question);
    position: absolute;
    left: 1rem;
    top: 1.25rem;
    width: 1.6rem;
    height: 1.6rem;
    line-height: 1.6rem;
    text-align: center;
    border-radius: 50%;
    background: var(--fond);
    border: 1px solid var(--trait);
    font-size: .85rem;
    font-weight: 600;
    color: var(--encre-douce);
}

/* Question laissée intacte, signalée après une remise refusée. Le fond rouge
   reprend le repère visuel de l'application historique. */
.question-passation--oubliee {
    background: var(--erreur-fond);
    border-color: var(--erreur);
    border-left: 4px solid var(--erreur);
}

.question-passation--juste { border-left: 4px solid var(--succes); }
.question-passation--faux  { border-left: 4px solid var(--erreur); }
.question-passation--vide  { border-left: 4px solid var(--trait); }

.propositions { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .35rem; }

.proposition {
    display: flex;
    gap: .7rem;
    align-items: baseline;
    padding: .6rem .8rem;
    font-size: 1.02rem;
    line-height: 1.55;
    border: 1px solid var(--trait-fort);
    border-radius: var(--rayon-petit);
    cursor: pointer;
    background: var(--carte);
    transition: border-color .12s ease, background-color .12s ease;
}

.proposition:hover {
    border-color: var(--accent);
    background: var(--accent-pale);
}

/* La proposition choisie se voit de loin, y compris sur le vidéoprojecteur de
   la salle : une bordure épaissie plutôt qu'une simple teinte. */
.proposition:has(input:checked) {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
    background: var(--accent-pale);
}

.proposition input { margin: 0; flex: 0 0 auto; }

.proposition__texte { flex: 1 1 auto; overflow-x: auto; }

.proposition--vide {
    border-style: dashed;
    color: var(--encre-douce);
    background: none;
}

.propositions--corrigees .proposition { cursor: default; }

.proposition--bonne {
    background: var(--succes-fond);
    border-color: var(--succes);
}

.proposition--choisie-fausse {
    background: var(--erreur-fond);
    border-color: var(--erreur);
}

.proposition__marque {
    flex: 0 0 1.2rem;
    font-weight: 700;
    text-align: center;
}

.proposition--bonne .proposition__marque          { color: var(--succes); }
.proposition--choisie-fausse .proposition__marque { color: var(--erreur); }

.verdict { margin: 0 0 .5rem; font-size: .85rem; font-weight: 600; }
.verdict__juste { color: var(--succes); }
.verdict__faux  { color: var(--erreur); }
.verdict__vide  { color: var(--encre-douce); }

.carte--score { text-align: center; }

.score {
    margin: 0;
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1.1;
}

.score__detail { margin: .25rem 0 1rem; color: var(--encre-douce); }

/* Le visage qui accompagne la note. La pile de polices est explicite : sans
   elle, un navigateur qui ne trouve pas le caractère dans la police du texte
   affiche un rectangle vide. Il double l'appréciation écrite, jamais il ne la
   remplace — d'où « aria-hidden » dans le gabarit : un lecteur d'écran lit la
   phrase, pas deux fois la même chose. */
.score__visage {
    display: block;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: .25rem;
}

.champ-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.5rem;
    letter-spacing: .25em;
    text-align: center;
    text-transform: uppercase;
}

.enregistrement { margin: .5rem 0 0; font-size: .8rem; min-height: 1.2em; color: var(--encre-douce); }
.enregistrement--ok      { color: var(--succes); }
.enregistrement--erreur  { color: var(--erreur); }

/* La remise reste accessible sans remonter en haut d'une longue épreuve. */
.barre-actions--collante {
    position: sticky;
    bottom: 0;
    background: var(--fond);
    border-top: 1px solid var(--trait);
    padding: .75rem 0;
    margin-top: 1rem;
    justify-content: center;
}

/* Où l'on en est, à côté du bouton de remise. Discret tant qu'il reste des
   questions — l'élève n'a pas à être pressé — et vert quand tout est traité :
   c'est le seul moment où l'information vaut d'être remarquée. */
.avancement {
    margin: 0;
    font-size: .9rem;
    color: var(--encre-douce);
    font-variant-numeric: tabular-nums;
}

.avancement--complet { color: var(--succes); font-weight: 600; }

.minuteur {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.minuteur__valeur  { display: block; font-size: 1.4rem; font-weight: 700; }
.minuteur__libelle { font-size: .8rem; color: var(--encre-douce); }

.minuteur--urgent .minuteur__valeur { color: var(--erreur); }
.minuteur--fini   .minuteur__valeur { color: var(--erreur); }

.question__actions select {
    padding: .4rem .55rem;
    font-family: inherit;
    font-size: .9rem;
    color: inherit;
    background: var(--carte);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
}


/* Titre présent pour la structure du document et les lecteurs d'écran, mais
   qui ne s'affiche pas : sur l'accueil, le logo du bandeau dit déjà la même
   chose. */
.hors-ecran {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}


/* ===========================================================================
   Écrans étroits

   La mise en page repose sur des grilles « auto-fit » et des rangées qui se
   replient : l'essentiel tient déjà sans rien ajouter. Ce qui suit corrige ce
   qui ne se replie pas tout seul.

   Les tailles sont en largeur de fenêtre plutôt qu'en type d'appareil : une
   tablette en paysage mérite la mise en page large, la même en portrait non.
   =========================================================================== */

/* ---- Tablette en portrait et téléphone ---------------------------------- */

@media (max-width: 720px) {

    .contenu { padding: 1rem 16px 2.5rem; }
    .carte   { padding: 1rem .85rem; }

    h1 { font-size: 1.35rem; }
    h2 { font-size: 1.15rem; margin-top: 1.5rem; }

    /* Le bandeau se replie : la marque et les boutons d'icône restent sur la
       première ligne, les onglets passent dessous et ne s'ouvrent qu'au
       bouton « Menu ». C'est la mécanique de Maths&clic, aux mêmes seuils. */
    .bandeau__interieur {
        padding: 8px 16px;
        min-height: 56px;
        gap: 12px;
        flex-wrap: wrap;
    }

    .burger { display: inline-flex; margin-left: auto; }

    .bandeau__nav {
        order: 3;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        display: none;
        padding: 8px 0 4px;
        border-top: 1px solid var(--bandeau-trait);
    }

    .bandeau__nav.is-ouvert { display: flex; }

    .bandeau__actions  { order: 2; }
    .bandeau__identite { display: none; }

    .onglet { padding: 11px 8px; }

    /* Six chiffres côte à côte deviennent illisibles : on les resserre. */
    .chiffres { grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr)); gap: .5rem; }
    .chiffre  { padding: .6rem .4rem; }
    .chiffre strong { font-size: 1.25rem; }

    /* La recherche prend toute la largeur : deux colonnes ne tiennent plus. */
    .filtres { padding: .85rem; }
    .filtres__recherche { grid-column: 1 / -1; }

    /* Le numéro de question vit dans la marge : elle se réduit avec la page. */
    .question-passation { padding-left: 2.6rem; }
    .liste-chapitres    { grid-template-columns: 1fr; }

    /* L'étiquette de tranche passe sur deux lignes plutôt que d'écraser la
       barre, qui est ce qu'on vient lire. */
    .histogramme__ligne   { grid-template-columns: 5rem 1fr 2rem; gap: .4rem; }
    .histogramme__libelle { font-size: .8rem; }

    .question__enonce--court { max-width: none; }
}

/* ---- Téléphone tenu à la verticale --------------------------------------- */

@media (max-width: 430px) {

    /* Deux colonnes de formulaire ne tiennent pas sous 430 px : les champs
       s'empilent, ce qui vaut mieux qu'un champ de six caractères de large. */
    .grille-deux,
    .grille-trois { grid-template-columns: 1fr; }

    /* Dans une carte, les boutons d'action prennent la largeur : ils cessent
       de se coller les uns aux autres et deviennent atteignables au pouce.
       Les barres serrées — celles des tableaux et des listes — gardent leur
       disposition en ligne. */
    .carte > .barre-actions > .bouton,
    .carte > .barre-actions > form,
    .carte > .barre-actions > form > .bouton {
        width: 100%;
    }

    .entete-page { gap: .5rem; }
    .entete-page h1 { font-size: 1.25rem; }

    /* La première ligne du bandeau est déjà pleine sur un téléphone : le retour
       se réduit à son logo, le chevron passe à la trappe. */
    .bandeau__retour svg   { display: none; }
    .bandeau__retour       { padding: 0 7px; margin-right: 0; }
    .bandeau__retour-logo  { height: 20px; }

    /* La barre de remise, collée en bas, ne doit pas manger l'écran — mais son
       bouton, lui, prend toute la largeur : c'est le geste qui compte, et il se
       fait souvent d'une main, l'autre tenant la tablette. */
    .barre-actions--collante { padding: .5rem 0; }
    .barre-actions--collante > .bouton { width: 100%; }
}

/* ---- Écrans tactiles ----------------------------------------------------- */

/* Indépendant de la largeur : un grand écran tactile a les mêmes doigts qu'un
   petit. */
@media (pointer: coarse) {

    /* Des cibles plus hautes. Un bouton de 38 px se manque une fois sur trois ;
       à partir de 44 px, il se touche du premier coup. La hauteur vient du
       rembourrage et non d'un « min-height », qui laisserait le texte collé en
       haut des boutons qui sont des liens. */
    .bouton { padding: .7rem 1.1rem; }

    .onglet { padding: .75rem 1rem; }

    /* La proposition entière est cliquable, pas seulement le petit rond : c'est
       ce qui change tout pour un élève qui compose sur tablette. */
    .proposition { padding: .7rem .8rem; }

    /* 16 px au moins sur tout champ de saisie : en dessous, Safari sur iPad
       agrandit la page à chaque prise de focus et ne la réduit jamais. */
    .champ input,
    .champ select,
    .champ textarea,
    .filtres select,
    .filtres input[type="search"],
    .formulaire-ligne input,
    .question__actions select {
        font-size: 16px;
    }
}