/* Socle Tabler des pages d'exercice de maths.jementraine.fr.
   À charger APRÈS tabler.min.css, jm-tokens.css et jm-base.css, AVANT les styles propres à la page.

   Rassemble ce qui était recopié dans chaque page convertie : les correctifs du build Tabler,
   les deux réglages qu'impose le moteur d'exercices, et le socle .jm-* des lots 1 à 5 de
   l'audit du 23/10/2026. Aucune couleur en dur : les jetons --jm-* de /css/jm-tokens.css. */

:root {
    /* DÉFAUT DU BUILD v1.0.0-beta20 : une règle tardive pose
           .alert { --tblr-alert-bg: var(--tblr-surface) }
       et --tblr-surface n'est définie nulle part. Sans ça, toute .alert est transparente. */
    --tblr-surface: #fff;
    /* Les anciennes variables des exercices suivent les jetons : les pages qui les citent
       encore restent justes. */
    --exo-primary: var(--jm-accent);
    --exo-primary-dark: var(--jm-accent-dark);
    --exo-gradient: linear-gradient(135deg, var(--jm-accent) 0%, var(--jm-accent-dark) 100%);
    --eleve-primary: var(--jm-accent);
    --eleve-gradient: linear-gradient(135deg, var(--jm-accent) 0%, var(--jm-accent-dark) 100%);
}

/* UN SEUL FOND DE PAGE : le fond pâle du site. Le violet reste au bandeau et aux boutons. */
body.exo-tabler {
    background: var(--jm-bg);
    min-height: 100vh;
}

/* Tabler étire .page sur toute la hauteur de la fenêtre (min-height:100% +
   .page-wrapper{flex:1}) pour coller un pied de page en bas. Il n'y en a pas ici, et
   l'étirement repousse l'historique des sessions — inséré juste après .page par le
   moteur — sous une bande vide d'un écran de haut. */
.exo-tabler .page { min-height: 0; }
.exo-tabler .page-wrapper { flex: 0 0 auto; padding-top: 1rem; }

/* L'HISTORIQUE DES SESSIONS. Le tampon de sortie de includes/exercice_engine.php
   insère le bloc « Mes sessions précédentes » juste avant le DERNIER </div> de la
   page. Il faut donc lui laisser un conteneur vide en toute fin de document :

       </div><!-- page -->
       <div class="container-xl pb-4 ancre-historique"></div>

   Sans cette ancre le bloc part pleine largeur, hors de la colonne. La règle vise le
   <details> lui-même : l'ancre reste invisible quand il n'y a rien. */
.ancre-historique .exoi-historique {
    background: var(--jm-surface);
    border-top: 0;
    border-radius: var(--tblr-border-radius, 4px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
    margin-top: 0;
    padding: .5rem 1.25rem 1rem;
}

/* En-tête de carte à l'accent de la matière : fond pâle, texte encre, filet à gauche. */
.card-header-violet {
    background: var(--jm-accent-lt);
    color: var(--jm-ink);
    border-bottom: 0;
    border-left: 5px solid var(--jm-accent);
}
.card-header-violet .card-title { color: var(--jm-ink); margin: 0; }

/* Les champs d'un exercice se remplissent au doigt sur tablette. */
.form-control-exo { min-height: 48px; font-size: 1.1rem; }

/* LE BLOC DE SCORE N'APPARAÎT QU'APRÈS VÉRIFICATION. Les pages converties portent
   <div id="score" class="alert alert-important alert-success"> vide au chargement :
   depuis le correctif --tblr-surface, cette alerte vide s'affichait comme une barre
   verte sans texte sous le bouton Vérifier (signalé le 22/08/2026). Le JS de chaque
   page la révèle ensuite (className 'score show …' ou style.display='block'). */
#score.alert:not(.show) { display: none; }

/* Gabarit commun des pages d'exercice (includes/exercice_page.php, 22/08/2026) :
   sur téléphone, la carte mange 32 px de plus que l'ancienne mise en page, et les
   grilles d'opérations posées débordaient. On laisse la grille défiler dans sa
   boîte (jamais la page) et on resserre la carte. */
.exo-tabler .operation-wrapper { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 575.98px) {
  .exo-tabler .container-xl { padding-left: 6px; padding-right: 6px; }
  .exo-tabler .card > .card-body { padding: .75rem .5rem; }
  .exo-tabler .operation-wrapper { padding: 6px !important; margin-left: 0 !important; margin-right: 0 !important; }
  .exo-tabler .card[data-exercice], .exo-tabler .card[data-res] { padding-left: .5rem !important; padding-right: .5rem !important; }
}

/* ===== Lot 4 (23/10/2026) : tailles et cibles tactiles des exercices =====
   Les classes sont celles des pages (retenue-input, chiffre-input, resultat-input, niveau-btn,
   pxa-swatch…) ; la portée .exo-tabler rend ces règles plus fortes que celles des pages. */
.jm-eleve a, .jm-eleve button, .jm-eleve input, .jm-eleve select, .jm-eleve label, .jm-eleve [role="button"] { -webkit-tap-highlight-color: transparent; }
/* Cases de retenue 36 × 36 (32 sous 420 px) ; cases de calcul 48 px. */
.exo-tabler .retenue-input { width: 36px !important; height: 36px !important; font-size: 1rem !important; border-radius: 6px; }
.exo-tabler .chiffre-input, .exo-tabler .resultat-input { width: 48px !important; height: 48px !important; font-size: 1.6em !important; }
.exo-tabler .chiffre-dividende, .exo-tabler .case-potence { min-width: 48px; min-height: 48px; }
.exo-tabler .operation-table td { width: auto; }
@media (max-width: 419.98px) {
  .exo-tabler .chiffre-input, .exo-tabler .resultat-input { width: 44px !important; height: 44px !important; font-size: 1.35em !important; }
  .exo-tabler .retenue-input { width: 32px !important; height: 32px !important; }
  .exo-tabler .operation-table td { padding: 1px !important; }
}
/* Boutons niveau × nombres des calculs posés, sélecteur de niveau des défis. */
.exo-tabler .niveau-btn, .exo-tabler .exoi-niveau, .exo-tabler .table-checkbox label, .exo-tabler .mode-option label { min-height: var(--jm-cible); }
.exo-tabler .niveau-btn { display: inline-flex; align-items: center; }
/* Pixel art : nuancier 44 px, cases 28 px au moins (défilement horizontal dans .pxa-scroll / .pxt-scroll),
   modèle épinglé en haut sur les petits écrans. */
.exo-tabler .pxa-swatch, .exo-tabler .pxt-swatch { width: var(--jm-cible) !important; height: var(--jm-cible) !important; }
.exo-tabler .pxa-case { min-width: 28px; min-height: 28px; }
.exo-tabler .pxa-scroll, .exo-tabler .pxt-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
@media (max-width: 767.98px) {
  .exo-tabler .pxa-bloc-modele, .exo-tabler .pxt-bloc-modele { position: sticky; top: 0; z-index: 5; background: var(--jm-bg); padding-bottom: .5rem; width: 100%; }
}
/* Champs des tables chrono : 48 px de haut. Points de la droite graduée : 32 px. */
.exo-tabler .question-input input { min-height: 48px; }
.exo-tabler .exoi-numberline-point { width: 32px; height: 32px; margin-left: -16px; top: 15px; }
.exo-tabler .graduation-value input { min-height: var(--jm-cible); }

/* Bloc de progression commun (exoProgression, 22/08/2026) : barre + pastilles des sessions, 40 px. */
.exo-pastilles { display: flex; flex-wrap: wrap; gap: 6px; }
.exo-pastille { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; font-size: 1rem; font-weight: 600; text-decoration: none; line-height: 1; }
.exo-pastille--faite    { background: var(--jm-success); color: #fff; }
.exo-pastille--sautee   { background: #fff3cd; color: #856404; border: 1px solid #ffe69c; }
.exo-pastille--courante { background: var(--jm-accent); color: #fff; box-shadow: 0 0 0 3px rgba(var(--jm-accent-rgb), .25); }
.exo-pastille--a-venir  { background: var(--jm-surface-2); color: var(--jm-soft); }
a.exo-pastille:hover, a.exo-pastille:active { filter: brightness(.92); text-decoration: none; }

/* ===== Socle commun des deux sites (lots 1-3, 23/10/2026) : étoiles, fin de séance, corrections ===== */
.jm-etoiles { display: inline-flex; gap: .15em; font-size: 1.4rem; line-height: 1; color: var(--jm-border); letter-spacing: 0; }
.jm-etoiles .jm-etoile.pleine { color: var(--jm-star); text-shadow: 0 1px 0 rgba(0,0,0,.08); }
.jm-etoiles-grandes { font-size: 2.4rem; }
.jm-etoiles-petites { font-size: 1rem; }
.jm-fin { border-width: 0; border-left: 6px solid currentColor; padding: 1rem 1.25rem; }
.jm-fin.alert-secondary { background: var(--jm-surface-2); color: var(--jm-ink); }
.jm-fin-ligne { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.jm-fin-titre { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.jm-fin-texte { font-size: 1.05rem; margin-top: .25rem; }
.jm-fin-score { font-size: .95rem; opacity: .85; margin-top: .35rem; }
.jm-fin-note { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid rgba(0,0,0,.08); font-size: .95rem; }
.jm-correction > summary { cursor: pointer; list-style: none; min-height: var(--jm-cible); }
.jm-correction > summary::-webkit-details-marker { display: none; }
.jm-correction > summary .card-title::before { content: '▸'; display: inline-block; margin-right: .5rem; transition: transform .15s; }
.jm-correction[open] > summary .card-title::before { transform: rotate(90deg); }
.jm-q { display: flex; gap: .75rem; padding: .75rem; border-radius: .5rem; margin-bottom: .6rem; background: var(--jm-surface-2); border: 1px solid var(--jm-border); font-size: 1.05rem; }
.jm-q.juste { background: var(--jm-success-lt); border-color: #bfe5c8; }
.jm-q.faux { background: var(--jm-warn-lt); border-color: #f5cdb3; }
.jm-q-num { flex: 0 0 2rem; height: 2rem; border-radius: 50%; background: var(--jm-surface); border: 1px solid var(--jm-border); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.jm-q.juste .jm-q-num { background: var(--jm-success); color: #fff; border-color: var(--jm-success); }
.jm-q.faux .jm-q-num { background: var(--jm-warn); color: #fff; border-color: var(--jm-warn); }
.jm-q-corps { flex: 1; min-width: 0; }
.jm-q-question { font-weight: 600; margin-bottom: .25rem; }
.jm-q-libelle { color: var(--jm-soft); }
.jm-q-eleve { font-size: 1.1rem; }
.jm-q.faux .jm-q-eleve { text-decoration: line-through; text-decoration-color: var(--jm-warn); text-decoration-thickness: 2px; }
.jm-q-marque { color: var(--jm-success); font-weight: 700; margin-left: .35rem; }
.jm-q-attendue { margin-top: .2rem; }
.jm-q-attendue strong { color: #1d6f2e; font-size: 1.1rem; }
.jm-q-explication { margin-top: .4rem; padding: .5rem .75rem; background: rgba(255,255,255,.7); border-left: 3px solid var(--jm-star); border-radius: .25rem; }
.jm-boutons-fin { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin: 1.25rem 0; }
.jm-boutons-fin .btn { min-height: 48px; font-size: 1.1rem; }
.jm-lire { min-height: 40px; }
.jm-lire.en-cours { background: var(--jm-star); border-color: var(--jm-star); color: var(--jm-ink); }
.jm-pave { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1050; background: var(--jm-surface); border-top: 1px solid var(--jm-border); box-shadow: 0 -4px 16px rgba(0,0,0,.12); padding: .5rem; display: none; }
.jm-pave.ouvert { display: block; }
.jm-pave-grille { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; max-width: 520px; margin: 0 auto; }
.jm-pave button { min-height: 52px; font-size: 1.5rem; font-weight: 600; border-radius: .5rem; border: 1px solid var(--jm-border); background: var(--jm-surface-2); color: var(--jm-ink); font-family: var(--jm-font); }
.jm-pave button:active { background: var(--jm-border); }
.jm-pave button.op { background: var(--jm-primary-lt); color: var(--jm-primary-dark); }
.jm-pave button.ok { background: var(--jm-success); color: #fff; border-color: var(--jm-success); }
.jm-pave button.eff { background: var(--jm-warn-lt); color: var(--jm-warn); }
body.jm-pave-visible { padding-bottom: 150px; }
@media (max-width: 420px) { .jm-pave button { min-height: 46px; font-size: 1.3rem; } }

/* ===== Écran « Aujourd'hui », collection, jauges (lots 2-3) ===== */
.jm-aujourdhui-tete { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.jm-aujourdhui-titre { font-size: 1.6rem; font-weight: 800; margin: 0; }
.jm-aujourdhui-resume { font-size: 1.05rem; color: var(--jm-ink); }
.jm-aujourdhui-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.jm-carte-jour { display: block; background: var(--jm-surface); border: 2px solid var(--jm-border); border-radius: 1rem; padding: 1.1rem 1.25rem; color: var(--jm-ink); text-decoration: none; min-height: 150px; transition: transform .12s, box-shadow .12s; }
.jm-carte-jour:hover, .jm-carte-jour:active, .jm-carte-jour:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.10); color: var(--jm-ink); }
.jm-carte-etiquette { font-size: .9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--jm-soft); margin-bottom: .5rem; }
.jm-carte-continuer { border-color: var(--jm-primary); } .jm-carte-continuer .jm-carte-etiquette { color: var(--jm-primary); }
.jm-carte-nouveau { border-color: var(--jm-success); } .jm-carte-nouveau .jm-carte-etiquette { color: #237f32; }
.jm-carte-defi { border-color: var(--jm-star); } .jm-carte-defi .jm-carte-etiquette { color: #9a7200; }
.jm-carte-nom { font-size: 1.35rem; font-weight: 700; line-height: 1.25; }
.jm-carte-raison { margin-top: .4rem; font-size: 1rem; color: var(--jm-ink); }
.jm-carte-progres { margin-top: .6rem; font-size: .95rem; color: var(--jm-soft); }
.jm-collection { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; }
.jm-vignette { display: block; background: var(--jm-surface); border: 1px solid var(--jm-border); border-radius: .75rem; padding: .75rem; text-align: center; color: var(--jm-ink); text-decoration: none; }
.jm-vignette:hover, .jm-vignette:active { border-color: var(--jm-accent); color: var(--jm-ink); }
.jm-vignette-or { border-color: var(--jm-star); background: #fffae6; }
.jm-vignette-icone { font-size: 2rem; line-height: 1; color: var(--jm-accent); }
.jm-vignette-nom { font-weight: 600; font-size: .95rem; margin-top: .35rem; min-height: 2.4em; }
.jm-vignette-etoiles { margin-top: .25rem; font-size: .9rem; color: var(--jm-soft); }
.jm-jauge { height: .5rem; background: var(--jm-border); border-radius: 1rem; overflow: hidden; margin-top: .35rem; }
.jm-jauge > span { display: block; height: 100%; background: var(--jm-primary); }
.jm-jauge-texte { font-size: .9rem; color: var(--jm-ink); margin-top: .25rem; }
.jm-etat { display: inline-block; font-size: .85rem; font-weight: 600; padding: .15rem .55rem; border-radius: 1rem; background: var(--jm-primary-lt); color: var(--jm-primary-dark); }
.jm-etat-nouveau { background: var(--jm-success-lt); color: #237f32; }
.jm-etat-fini { background: #fff3cd; color: #8a6400; }