/* Pages élève de francais.jementraine.fr — lot 5 de l'audit UX du 23/10/2026 (24/10/2026).
   Chargée par jmTeteHtml() (includes/jm_page.php) sur toute page élève, après jm-base.css et
   tabler-correctifs.css. Elle rassemble ce que les pages recopiaient chacune dans un <style>
   inline : le QCM à trou (31 pages), les items d'accord (11 pages), les cartes des sons, le
   tableau de bord, les parcours. Les feuilles forme_*.css restent propres à chaque forme.
   Couleurs : jamais en dur, toujours un jeton de jm-tokens.css ; l'accent d'une page est la
   couleur de sa notion (--notion, posée par le gabarit) avec l'accent de la matière en repli. */

/* ---- Tactile : pas de halo gris au toucher, cibles de 44 px ---- */
.jm-eleve a, .jm-eleve button, .jm-eleve .btn, .jm-eleve label, .jm-eleve [class*="mot"], .jm-eleve .jeton,
.jm-eleve .choix, .jm-eleve .case-reponse, .jm-eleve .lettre, .jm-eleve .zone, .jm-eleve .cible { -webkit-tap-highlight-color: transparent; }
.jm-eleve .jm-seance { min-width: var(--jm-cible); min-height: var(--jm-cible); display: inline-flex; align-items: center; justify-content: center; gap: .25rem; font-size: 1rem; padding: .25rem .55rem; }
.jm-eleve input[type="text"].form-control, .jm-eleve input:not([type]).form-control { min-height: var(--jm-cible); font-size: 1.05rem; }

/* ---- Bandeau : compléments au socle ---- */
.jm-bandeau-titre { font-size: 1.2rem; }
.jm-bandeau-sous-titre { font-size: .9rem; color: rgba(255, 255, 255, .92); }
.jm-bandeau-boutons .btn { white-space: nowrap; }
.jm-bandeau-boutons .jm-btn-fort { background: rgba(255, 255, 255, .35); font-weight: 700; }
@media (max-width: 767.98px) {
    .jm-bandeau-boutons .btn { min-height: var(--jm-cible); }
}


/* ---- Tableau de bord (dashboard_nouveau.php et includes/jm_tableau.php) ---- */
.jm-bandeau-resume { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem 1.1rem; color: #fff; font-weight: 700; font-size: 1.05rem; }
.jm-bandeau-resume .jm-etoiles { color: rgba(255,255,255,.45); vertical-align: -2px; }
.jm-bandeau-resume .jm-etoiles .jm-etoile.pleine { color: #ffe066; text-shadow: none; }
.choix-cycle {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    background: #fff; border: 1px solid #e6e7e9; border-radius: .7rem;
    padding: .6rem .85rem; margin-bottom: 14px;
}
.choix-cycle-titre { font-size: .95rem; color: var(--jm-soft); margin-right: .2rem; }
.choix-cycle-pill {
    display: inline-block; padding: .3rem .8rem; border-radius: 2rem;
    border: 1px solid #e6e7e9; background: #f8f9fa; color: #495057;
    font-size: .95rem; font-weight: 600; text-decoration: none; white-space: nowrap; min-height: 40px; display: inline-flex; align-items: center;
}
.choix-cycle-pill:hover { border-color: var(--notion, var(--jm-accent)); color: var(--notion, var(--jm-accent)); }
.choix-cycle-pill.active {
    background: var(--notion, var(--jm-accent)); color: #fff; border-color: transparent;
}
.choix-cycle-note { font-size: .95rem; color: var(--jm-soft); font-style: italic; }
.jm-section-titre { font-size: 1.5rem; font-weight: 800; margin: 1.5rem 0 .6rem; }
.jm-vide { color: #5a6270; font-size: 1.05rem; }
.cat-pills { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 12px; -webkit-overflow-scrolling: touch; }
.cat-pill {
    flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 10px 18px;
    border-radius: 30px; background: white; color: #555; text-decoration: none; font-weight: 700;
    font-size: 1rem; min-height: var(--jm-cible); box-shadow: 0 2px 6px rgba(0,0,0,0.06); border: 2px solid transparent; white-space: nowrap;
}
.cat-pill i { font-size: 1.1em; }
.cat-pill.active { background: var(--notion, var(--jm-accent)); color: white; border-color: transparent; }
.jm-groupe-tete { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 .5rem; }
.jm-groupe-tete h3 { margin: 0; font-size: 1.25rem; font-weight: 800; }
.jm-groupe-compte { color: #5a6270; font-size: .95rem; }
.jm-groupe .jm-plus { display: none; }
.jm-groupe.ouvert .jm-plus { display: block; }
.jm-voir-plus { min-height: 44px; font-size: 1rem; }
.exo-card { border: none; border-radius: 14px; box-shadow: 0 2px 10px rgba(0,0,0,0.07); transition: transform 0.2s, box-shadow 0.2s; height: 100%; border-left: 5px solid; }
.exo-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,0.12); }
.exo-icon { font-size: 2rem; line-height: 1; }
.exo-title { font-weight: 800; color: #333; font-size: 1.05rem; }
.exo-meta { color: #5a6270; font-size: .95rem; }
.exo-ligne { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.exo-modalite {
    display: inline-block; margin-left: .4rem; padding: .05rem .45rem;
    border-radius: 999px; font-size: .85rem; font-weight: 700;
    letter-spacing: .02em; vertical-align: middle; white-space: nowrap;
}
.exo-modalite.clic    { background: #e7f5ff; color: #1971c2; }
.exo-modalite.clavier { background: var(--notion-lt, var(--jm-accent-lt)); color: #e8590c; }

/* ---- Parcours (parcours.php) ---- */
.carte-exo { border-left: 4px solid var(--notion, var(--jm-accent)); }
.carte-exo .modalite { font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; }
.carte-exo .icone-exo { font-size: 1.4rem; line-height: 1; }
.jauge { height: 6px; background: #eef0f3; border-radius: 3px; overflow: hidden; }
.jauge > div { height: 100%; background: var(--notion, var(--jm-accent)); }
.jm-jauge > span.acquise { background: var(--jm-success); }
.recap-notion { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; align-items: flex-start; }
.recap-notion .h3 { margin-bottom: .25rem; }

/* ---- QCM à trou : les 31 pages d'orthographe sur la forme Q ---- */
.question-qcm .phrase-trou {
    font-size: 1.15rem; line-height: 1.9; color: #212529;
    margin: .2rem 0 .6rem;
}
.question-qcm .trou {
    color: var(--notion, var(--jm-accent)); font-weight: 700; letter-spacing: .06em;
}
.question-qcm .pose { font-weight: 700; color: var(--jm-success); }
.question-qcm .choix { font-size: 1.05rem; font-weight: 600; }
.question-qcm .consigne-item { font-size: .95rem; color: var(--jm-soft); margin-bottom: .5rem; }
.question-qcm .pourquoi {
    margin-top: .6rem; font-size: .95rem; color: #495057;
    border-left: 3px solid #ced4da; padding-left: .6rem;
}
.question-qcm .pourquoi .donneur { font-weight: 700; color: #212529; }

/* ---- Items d'accord : les 11 pages d'orthographe à saisie ---- */
.item-accord {
    background: #fff; border: 1px solid #e6e7e9; border-radius: .6rem;
    padding: .85rem 1rem; margin-bottom: .8rem;
}
.item-accord .numero { font-size: .95rem; color: var(--jm-soft);
    text-transform: uppercase; letter-spacing: .04em; margin-bottom: .45rem; }
.item-accord .phrase { font-size: 1.08rem; line-height: 1.8; color: #212529; }
.item-accord .depart {
    color: var(--jm-soft); font-style: italic; font-weight: 600;
}
.item-accord .accorde { color: var(--jm-success); font-weight: 700; }
.item-accord .saisie { margin-top: .7rem; display: flex; align-items: center; gap: .5rem; }
.item-accord .saisie .form-control { max-width: 14rem; }
.item-accord.juste { border-color: #bfe5c8; background: var(--jm-success-lt); }
.item-accord.faux  { border-color: #f5cdb3; background: var(--jm-warn-lt); }
.item-accord .verdict { margin-top: .5rem; font-size: .95rem; }
.item-accord .verdict .mot { font-weight: 700; }
.item-accord .pourquoi {
    margin-top: .35rem; font-size: .95rem; color: #495057;
    border-left: 3px solid #ced4da; padding-left: .6rem;
}
.item-accord .pourquoi .donneur { font-weight: 700; color: #212529; }

/* ---- Sons (sons_ecouter, sons_lettres, sons_reperer_ecrit) ---- */
.son-vedette { font-size: 2.4rem; font-weight: 700; color: var(--notion, var(--jm-accent)); letter-spacing: .02em; }
.son-graphies { color: var(--jm-soft); }
.grille-mots { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.carte-mot { border: 2px solid #e6e7e9; border-radius: 14px; background: #fff; padding: 14px; text-align: center; }
.choix2 { display: flex; gap: 8px; margin-top: 12px; }
.choix2 button { flex: 1; border: 2px solid #dfe3ea; background: #fff; border-radius: 10px;
                 padding: 9px 4px; min-height: var(--jm-cible); font-weight: 600; font-size: 1rem; cursor: pointer; }
.choix2 button:hover:not(:disabled) { border-color: var(--notion, var(--jm-accent)); }
.choix2 button.actif { background: var(--notion, var(--jm-accent)); border-color: #b8471f; color: #fff; }
.choix2 button:focus-visible { outline: 3px solid #f59f00; outline-offset: 2px; }
.carte-mot.juste { border-color: #bfe5c8; background: var(--jm-success-lt); }
.carte-mot.faux  { border-color: #f5cdb3; background: var(--jm-warn-lt); }
.verdict { margin-top: 8px; font-size: .95rem; font-weight: 600; }
.verdict .mot-devoile { font-style: italic; }

/* ---- Mes résultats ---- */
.jm-score-3 { background: var(--jm-success-lt); color: #14532d; }
.jm-score-1 { background: #e7f0ff; color: #1f4fbf; }
.jm-score-0 { background: #eef0f3; color: #4b5563; }
.score-badge .jm-etoiles, .session-score .jm-etoiles { vertical-align: -2px; }
.status-icon .ti-check { color: var(--jm-success); }
.status-icon .ti-x { color: var(--jm-warn); }