/* Style de base (Phase 1). Pensé d'abord pour le téléphone. Pas de style « en ligne » dans
   les pages : la politique de sécurité (CSP) ne l'autorise pas. */
:root { --fond: #f4f6fb; --carte: #ffffff; --texte: #1f2a44; --doux: #667089; --ok: #1f8a4c;
        --accent: #3157d5; --erreur: #b3261e; --bord: #d5dae6; }
@media (prefers-color-scheme: dark) {
  :root { --fond: #121620; --carte: #1b2130; --texte: #e8ecf3; --doux: #a1a9bb; --ok: #4cc38a;
          --accent: #8aa4ff; --erreur: #ff8a80; --bord: #333c50; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); color: var(--texte);
       font: 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { max-width: 480px; margin: 24px auto; padding: 24px 16px; background: var(--carte);
       border-radius: 16px; }
h1 { margin-top: 0; }
a { color: var(--accent); }
.ok { color: var(--ok); font-weight: 600; }
.discret { color: var(--doux); font-size: 14px; }
.erreur { color: var(--erreur); font-weight: 600; }
.pied { text-align: center; color: var(--doux); font-size: 13px; }

/* Bandeau du haut : prénom + déconnexion */
.bandeau { max-width: 480px; margin: 12px auto 0; padding: 0 16px; display: flex; flex-wrap: wrap;
           gap: 4px 12px;
           justify-content: space-between; align-items: center; }
.bandeau form { margin: 0; }

/* Formulaires : grands champs, faciles à toucher au doigt */
.formulaire { display: flex; flex-direction: column; gap: 8px; }
.formulaire label { font-weight: 600; margin-top: 8px; }
input { font: inherit; padding: 12px; border: 1px solid var(--bord); border-radius: 10px;
        background: var(--fond); color: var(--texte); }
button { font: inherit; font-weight: 600; padding: 12px; margin-top: 12px; border: 0;
         border-radius: 10px; background: var(--accent); color: #fff; cursor: pointer; }
button.lien { background: none; color: var(--accent); padding: 4px; margin: 0;
              font-weight: 400; text-decoration: underline; }

/* Activation du code à 6 chiffres */
.etapes li { margin-bottom: 12px; }
.qr { background: #fff; padding: 8px; border-radius: 8px; width: fit-content; margin: 8px 0; }
.qr svg { display: block; width: 200px; height: 200px; }
.cle { font-family: ui-monospace, Consolas, monospace; font-size: 18px; word-break: break-all; }

.liste { padding-left: 20px; }

/* ---------- Phase 2 : cagnotte ---------- */
h2 { margin-top: 28px; font-size: 20px; }
h3 { margin: 0 0 8px; }
.menu { font-size: 15px; }
.soldes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.solde { display: flex; flex-direction: column; padding: 12px; border: 1px solid var(--bord);
         border-radius: 12px; }
.solde strong { font-size: 24px; }
.mois { margin: 12px 0 4px; }
progress { width: 100%; height: 14px; accent-color: var(--ok); }
.alerte { padding: 10px 12px; border-radius: 10px; background: var(--fond); font-weight: 600; }
.confirmation { padding: 10px 12px; border-radius: 10px; background: var(--fond);
                border-left: 4px solid var(--ok); }
.carte-enfant { padding: 12px; border: 1px solid var(--bord); border-radius: 12px;
                margin-bottom: 12px; }
.historique, .a-valider { list-style: none; padding: 0; }
.historique li, .a-valider li { padding: 10px 0; border-bottom: 1px solid var(--bord); }
.titre-ligne { display: flex; justify-content: space-between; gap: 8px; }
.note { font-weight: 700; white-space: nowrap; }
.mouvement { display: flex; justify-content: space-between; gap: 8px; font-size: 15px;
             margin-top: 4px; }
.statut-refusee strong { text-decoration: line-through; }
.motif { margin: 4px 0 0; font-size: 14px; color: var(--doux); }
.boutons { display: flex; gap: 8px; }
.boutons form { flex: 1; }
.boutons button { width: 100%; margin-top: 8px; }
button.secondaire { background: var(--fond); color: var(--texte); border: 1px solid var(--bord); }
.paliers { width: 100%; border-collapse: collapse; }
.paliers th { text-align: left; font-size: 14px; color: var(--doux); font-weight: 400; }
.paliers td { padding: 4px 4px 4px 0; }
.paliers input { width: 100%; }

/* ---------- Phase 3 : fiches et exercices ---------- */
.centre { text-align: center; }
a.bouton { display: block; text-align: center; font-weight: 600; padding: 12px; margin-top: 16px;
           border-radius: 10px; background: var(--accent); color: #fff; text-decoration: none; }
a.bouton.secondaire, .actions a.bouton { background: var(--fond); color: var(--texte);
                                         border: 1px solid var(--bord); }
.actions { display: flex; gap: 8px; align-items: stretch; }
.actions form, .actions a { flex: 1; }
.actions button, .actions a.bouton { width: 100%; margin-top: 0; }
.fiche figure { margin: 16px 0; }
figcaption { font-size: 15px; color: var(--doux); }
.dessin { background: #fff; border-radius: 10px; padding: 8px; margin: 8px 0; }
.dessin svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.encadre { border-radius: 12px; padding: 4px 14px; margin: 14px 0; border-left: 5px solid; }
.encadre.retenir { border-color: #3b6fd4; background: rgba(59, 111, 212, 0.10); }
.encadre.piege { border-color: #e07b39; background: rgba(224, 123, 57, 0.12); }
.encadre.exemple { border-color: var(--bord); background: var(--fond); }
.etiquette { font-weight: 700; font-size: 14px; color: var(--doux); margin: 8px 0 4px; }
.solution { border-top: 1px dashed var(--bord); margin-top: 8px; }
.tableau-defilant { overflow-x: auto; }
.tableau { border-collapse: collapse; margin: 12px 0; width: 100%; }
.tableau th, .tableau td { border: 1px solid var(--bord); padding: 6px 8px; text-align: left; }
.tableau caption { font-weight: 700; text-align: left; margin-bottom: 4px; }
/* Formules : fraction empilée, racine */
.math { white-space: nowrap; }
.frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center;
        font-size: 0.9em; margin: 0 2px; }
.frac .num { border-bottom: 1.5px solid currentColor; padding: 0 3px; }
.frac .den { padding: 0 3px; }
.radical { border-top: 1.5px solid currentColor; padding: 0 2px; }
/* Exercices */
.exercice { border: 1px solid var(--bord); border-radius: 12px; padding: 4px 14px 14px;
            margin: 14px 0; }
.exercice.juste { border-color: var(--ok); }
.exercice.faux { border-color: var(--erreur); }
.choix { border: 0; padding: 0; margin: 0; }
.invisible { position: absolute; left: -9999px; }
.choix-ligne { display: flex; gap: 10px; align-items: center; padding: 10px; margin: 6px 0;
               border: 1px solid var(--bord); border-radius: 10px; }
.choix-ligne input { width: 22px; height: 22px; }
.reponse-courte { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.reponse-courte input, textarea { font: inherit; padding: 12px; border: 1px solid var(--bord);
                                  border-radius: 10px; background: var(--fond); color: var(--texte); }
.avec-unite { display: flex; gap: 8px; align-items: center; font-weight: 400; }
.avec-unite input { flex: 1; }
/* Fraction : deux cases l'une au-dessus de l'autre, séparées par une barre */
.saisie-fraction { border: 0; padding: 0; margin: 0; }
.saisie-fraction legend { font-weight: 600; padding: 0; margin-bottom: 6px; }
.fraction-cases { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; }
.fraction-cases input { width: 4.5em; text-align: center; font: inherit; font-size: 1.3em;
                        padding: 8px; border: 1px solid var(--bord); border-radius: 10px;
                        background: var(--fond); color: var(--texte); }
.barre-fraction { display: block; width: 5.5em; height: 3px; border-radius: 2px;
                  background: var(--texte); }
.texte-trous { line-height: 2.4; }
input.trou { width: 8.5em; padding: 4px 6px; margin: 0 2px; }
.trou-rempli { padding: 2px 6px; border-radius: 6px; font-weight: 600; }
.trou-rempli.juste { background: rgba(31, 138, 76, 0.18); }
.trou-rempli.faux { background: rgba(179, 38, 30, 0.18); text-decoration: line-through; }
.explication { border-top: 1px dashed var(--bord); margin-top: 8px; }
.grande-note { font-size: 56px; font-weight: 800; text-align: center; margin: 8px 0 0; }
.grande-note span { font-size: 24px; color: var(--doux); }
.copie { white-space: pre-wrap; background: var(--fond); border-radius: 10px; padding: 10px; }
.criteres { padding-left: 18px; }
textarea.code { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
pre.petit { white-space: pre-wrap; font-size: 13px; }

/* ---------- Export pour Opus ---------- */
textarea.export { width: 100%; margin-top: 12px; white-space: pre; overflow-x: auto; }

/* ---------- Page Notions : colonnes « niveau · matière » ---------- */
main.large { max-width: 1180px; }
.colonnes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 14px; align-items: start; }
.colonne { border: 1px solid var(--bord); border-radius: 12px; padding: 4px 14px 8px; }
.colonne h3 { margin: 10px 0 0; display: flex; justify-content: space-between; gap: 8px;
              flex-wrap: wrap; }
.colonne .historique li:last-child { border-bottom: 0; }
.colonne li.statut-retiree { opacity: 0.6; }
main.large .formulaire.import { max-width: 560px; }
.bilan-import { border: 1px solid var(--bord); border-radius: 12px; padding: 4px 14px; }
.bilan-import ul.erreur { font-weight: 400; }

/* ---------- Magasin (espace parent) ---------- */
select { font: inherit; padding: 12px; border: 1px solid var(--bord); border-radius: 10px;
         background: var(--fond); color: var(--texte); }
.code { font-family: ui-monospace, Consolas, monospace; font-size: 18px; font-weight: 700;
        word-break: break-all; user-select: all; }
.historique li.statut-retiree { opacity: .55; }