/* La navigation ne doit pas élargir la page ni pousser « Mes enfants » hors
   écran. Sur téléphone elle occupe sa propre rangée et se replie si besoin. */
.entete-interieure { min-height: 3.5rem; height: auto; flex-wrap: wrap; padding-block: .5rem; }
#nav { flex-wrap: wrap; }
#nav button { min-height: 44px; }
@media (max-width: 639px) {
  #nav { width: 100%; gap: .125rem; }
  #nav button { flex: 1 1 auto; padding-inline: .5rem; }
}
main { max-width: 672px !important; }
button, input, select { touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid #16938b; outline-offset: 3px;
}
.action-secondaire { display: flex; justify-content: space-between; align-items: center; text-align: left; gap: .75rem; }
.action-secondaire:disabled { cursor: not-allowed; }
#apparence { padding: .45rem; border: 1px solid currentColor; border-radius: .5rem; background: transparent; }
#bandeau { max-width: calc(100vw - 2rem); width: max-content; border-radius: .75rem; }
#vue-progres .flex > span:first-child, #vue-bilan .flex > span:first-child { min-width: 0; overflow-wrap: anywhere; }
#vue-progres .tabular-nums, #vue-bilan .tabular-nums { flex-shrink: 0; margin-left: .75rem; }

/* Les légendes sans variante sombre explicite étaient presque noires. */
.dark .text-slate-500 { color: #b0c7c4; }

/* CLARTÉ STRUCTURÉE. Les grands cadres identiques mettaient chaque format
   de bilan au même rang. Seule la prochaine action conserve une carte ; les
   alternatives deviennent des rangées, sans perdre leurs explications. */
:root { --surface:#fff; --fond:#f5f8f7; --trait:#d9e5e2; --texte:#183e3d; --secondaire:#526967; --action:#0b7779; }
.dark { --surface:#22383a; --fond:#17292b; --trait:#3b5456; --texte:#edf7f4; --secondaire:#b0c7c4; --action:#0b7779; }
body { -webkit-font-smoothing:antialiased; }
body[class] { background:var(--fond); color:var(--texte); }
body > header { background:var(--surface); border-color:var(--trait); backdrop-filter:none; }
main { padding-top:2rem; padding-bottom:3rem; }
.titre-revision { font-size:clamp(1.65rem,5vw,2rem); font-weight:700; line-height:1.2; letter-spacing:-.035em; padding-block:1rem .5rem; }
.activite { color:var(--texte); }
.activite-principale { background:var(--surface); border:1px solid var(--trait); border-radius:14px; padding:1.5rem; margin-block:1rem 1.5rem; }
.activite-secondaire { border-top:1px solid var(--trait); padding:1rem .25rem; }
.activite-entete { display:flex; gap:1rem; align-items:center; }
.activite-entete h2 { font-size:1.05rem; font-weight:650; flex:1; min-width:0; }
.activite-principale h2 { font-size:1.35rem; }
.titre-activite { display:flex; justify-content:space-between; align-items:center; gap:.75rem; width:100%; min-height:44px; text-align:left; }
.titre-activite:disabled { color:var(--secondaire); cursor:not-allowed; }
.description-activite,.message-activite { color:var(--secondaire); line-height:1.55; font-size:.875rem; margin-top:.35rem; }
.message-activite { font-size:.8rem; }
.action-principale { background:var(--action); color:#fff; border-radius:9px; width:100%; min-height:48px; padding:.8rem 1rem; margin-top:1.25rem; font-weight:650; }
.action-principale:hover { background:#095f61; }
.action-principale:focus-visible { outline-offset:4px; }
/* LE FORMAT NE DOIT PAS MASQUER L'ACTION. Les bilans avaient seulement un
   titre touchable ; leurs boutons restent visibles, sous le quota du quiz. */
.action-principale.action-compacte { width:auto; min-height:44px; padding:.55rem 1.1rem; margin-top:.65rem; }
.action-bilan { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:.5rem .9rem; margin-top:.65rem; border:1px solid var(--action); border-radius:9px; color:var(--texte); font-weight:600; }
.action-bilan:disabled { color:var(--secondaire); border-color:var(--trait); cursor:not-allowed; }
.action-principale.action-compacte, .action-bilan { display:flex; justify-content:center; margin-inline:auto; }
.action-principale:disabled { opacity:.55; cursor:not-allowed; }
.consigne-qcm { color:var(--secondaire); font-size:.9rem; margin-bottom:.75rem; }
#options button[aria-pressed=true]:not([data-corrige]) { border-color:var(--action); box-shadow:inset 0 0 0 1px var(--action); background:var(--action-doux, #e1efed); }
.dark #options button[aria-pressed=true]:not([data-corrige]) { background:#163c3b; }
.choix-inconnu { display:block; margin:.8rem auto 0; min-height:44px; padding:.5rem 1rem; border:1px solid transparent; border-radius:9px; color:var(--secondaire); }
.choix-inconnu[aria-pressed=true] { color:var(--action); border-color:var(--action); }
.dark .choix-inconnu[aria-pressed=true] { color:#79d9d2; border-color:#79d9d2; }
[data-action=valider-reponse][hidden] { display:none; }

/* LE SUIVI REPREND LES CARTES DE L'APP. Les chiffres d'activité et les
   résultats datés ont chacun leur place ; le cumul n'imite plus un progrès. */
.suivi-carte { background:var(--surface); border:1px solid var(--trait); border-radius:14px; padding:1.25rem; margin-block:1rem; }
.suivi-carte h2 { font-size:1.05rem; font-weight:650; }
.suivi-entete { display:flex; justify-content:space-between; align-items:center; gap:.75rem; }
.suivi-entete select { min-height:44px; border:1px solid var(--trait); border-radius:9px; padding:.4rem .6rem; background:var(--surface); color:var(--texte); }
.suivi-note { color:var(--secondaire); font-size:.82rem; line-height:1.55; margin-block:.5rem; }
.suivi-mesures, .suivi-series { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; margin-block:1rem; }
.suivi-mesures strong, .suivi-series strong { display:block; font-size:1.7rem; font-weight:700; font-variant-numeric:tabular-nums; }
.suivi-mesures span, .suivi-series span { display:block; font-size:.8rem; line-height:1.4; color:var(--secondaire); }
.suivi-series { border-top:1px solid var(--trait); padding-top:.8rem; }
.suivi-series strong { font-size:1.25rem; color:#b85a12; }
.dark .suivi-series strong { color:#ffb14f; }
.suivi-calendrier { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; max-width:360px; margin-inline:auto; }
.suivi-jour, .suivi-semaine { display:grid; place-items:center; min-height:28px; font-size:.75rem; font-variant-numeric:tabular-nums; border-radius:6px; }
.suivi-actif { background:#b85a12; color:white; }
.dark .suivi-actif { background:#ffb14f; color:#251c13; }
.suivi-repos { background:var(--fond); border:1px solid var(--trait); }
.suivi-inconnu { color:var(--secondaire); opacity:.5; }
.suivi-semaine { color:var(--secondaire); }
.suivi-legende { display:flex; gap:.5rem; align-items:center; justify-content:center; font-size:.75rem; margin-block:.6rem; }
.suivi-point { display:inline-block; width:12px; height:12px; border-radius:3px; }
.suivi-seance { display:flex; justify-content:space-between; align-items:center; width:100%; gap:.8rem; text-align:left; padding-block:.85rem; border-bottom:1px solid var(--trait); }
.suivi-seance:last-child { border-bottom:0; }
.suivi-seance strong { font-size:.9rem; font-weight:600; }
.suivi-seance small { display:block; font-size:.75rem; color:var(--secondaire); margin-top:.2rem; }
.suivi-score { flex-shrink:0; font-size:.95rem; font-weight:650; font-variant-numeric:tabular-nums; }
.suivi-score span { color:var(--secondaire); margin-left:.25rem; }
.suivi-carte summary { min-height:44px; display:flex; align-items:center; font-weight:600; cursor:pointer; }
.suivi-carte summary::after { content:'⌄'; margin-left:auto; }
.suivi-barres { display:flex; align-items:end; gap:.5rem; margin-top:1.25rem; }
.suivi-barres > div { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; font-size:.7rem; gap:.3rem; font-variant-numeric:tabular-nums; }
.suivi-barres i { display:block; width:100%; max-width:36px; background:var(--action); border-radius:4px; }
.suivi-barres small { color:var(--secondaire); font-size:.65rem; }
.suivi-chapitre { margin-top:1rem; }
.suivi-jauge { height:6px; background:var(--trait); border-radius:9px; margin-top:.4rem; overflow:hidden; }
.suivi-jauge i { display:block; height:100%; }
.suivi-solide { background:var(--action); }
.suivi-moyen { background:#889b98; }
.suivi-fragile { background:#cd303b; }
.suivi-grand-score { font-size:2rem; font-weight:700; }
@media(max-width:400px) { .suivi-carte { padding:1rem; } .suivi-barres { gap:.25rem; } }
.connexion-google { display:flex; justify-content:center; align-items:center; gap:10px; width:100%; min-height:44px; padding:10px 12px; border:1px solid #747775; border-radius:8px; background:#fff; color:#1f1f1f; font-weight:500; }
.connexion-google img { width:18px; height:auto; flex-shrink:0; }
.formulaires-connexion,.choix-connexion { max-width:480px; margin-inline:auto; }
.choix-connexion { display:flex; gap:.5rem; margin-bottom:1rem; padding:.35rem; border:1px solid var(--trait); border-radius:12px; background:var(--surface); }
.choix-connexion button { flex:1; min-height:48px; padding:.65rem .5rem; border-radius:8px; color:var(--secondaire); font-weight:600; }
.choix-connexion button[aria-pressed="true"] { background:var(--action); color:#fff; }
.formulaires-connexion > section { background:var(--surface); border-color:var(--trait); padding:1.5rem; border-radius:14px; }
.formulaires-connexion [hidden] { display:none !important; }
#vue-connexion h1 { font-weight:700; }
#vue-connexion input,#vue-connexion button { min-height:44px; }
#vue-connexion #btn-eleve-sans-mail { min-height:44px; }
@media(max-width:639px) {
  main { padding-top:1.25rem; }
  .activite-principale { padding:1.25rem; }
  .activite-entete { gap:.5rem; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; } }

/* Une leçon garde la largeur du texte de l'app et révèle ses aides à la demande. */
#vue-programme { max-width: 680px; margin-inline: auto; }
#vue-programme h1 { font-size: 1.65rem; font-weight: 750; margin-block: 1rem; }
#vue-programme h2 { font-size: 1.2rem; font-weight: 700; margin-block: 1.5rem .7rem; }
#vue-programme h3 { font-weight: 650; margin-top: 1rem; }
.programme-texte { white-space: pre-wrap; line-height: 1.75; overflow-wrap: anywhere; margin-block: .8rem; }
.programme-ligne { width: 100%; display: flex; gap: 1rem; align-items: center; justify-content: space-between; text-align: left; padding: 1.1rem; border: 1px solid var(--mt-border, #c9d9d9); border-radius: 16px; margin-block: 1rem; }
.programme-ligne small { display: block; margin-top: .35rem; font-weight: 400; }
.programme-exercice { border: 1px solid var(--mt-border, #c9d9d9); border-radius: 16px; padding: 1rem; margin-block: 1.5rem; }
.programme-exercice h2 { margin-top: 0 !important; }
#vue-programme details { margin-block: 1rem; }
#vue-programme summary { cursor: pointer; color: #087f80; font-weight: 600; padding-block: .5rem; }
.dark #vue-programme summary { color: #79d9d2; }
#vue-programme button:focus-visible, #vue-programme summary:focus-visible { outline: 3px solid #087f80; outline-offset: 4px; }

/* LES FORMULES, DANS L'APPLICATION (13 septembre 2026). Mêmes surfaces, mêmes
   traits, même colonne que les autres vues : c'était la différence de style de
   l'ancienne abonnement.html qui donnait l'impression d'avoir quitté le site. */
.formule-section { margin-top: 2rem; }
.formule-titre-section { font-size: 1.15rem; font-weight: 700; margin-bottom: .75rem; }
.formule-bandeau { background: var(--surface); border: 1px solid var(--trait); border-radius: 12px; padding: .8rem 1rem; margin-block: 1rem; }
.formule-etat { background: var(--surface); border: 1px solid var(--trait); border-radius: 14px; padding: 1.25rem 1.5rem; margin-top: 1rem; }
.formule-surtitre { font-size: .8rem; color: var(--secondaire); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.formule-etat-nom { font-size: 1.35rem; font-weight: 700; margin-block: .1rem .25rem; }
.formule-lien { margin-top: .9rem; color: var(--action); font-weight: 600; }
.formule-cartes { display: grid; gap: 1rem; }
.formule-choix { border: 0; padding: 0; margin: 0 0 1rem; display: grid; gap: .6rem; }
.formule-choix legend { font-size: 1.15rem; font-weight: 700; margin-bottom: .75rem; }
.formule-option { display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem; border: 1px solid var(--trait); border-radius: 12px; background: var(--surface); cursor: pointer; min-height: 44px; }
.formule-option:has(input:checked) { border-color: var(--action); box-shadow: 0 0 0 1px var(--action) inset; }
.formule-option:focus-within { outline: 2px solid var(--action); outline-offset: 3px; }
.formule-option input { accent-color: var(--action); width: 1.2rem; height: 1.2rem; flex-shrink: 0; }
.formule-option > span { display: flex; justify-content: space-between; flex: 1; gap: .3rem .8rem; flex-wrap: wrap; }
.formule-option > span > span { color: var(--secondaire); }
[data-formules-recapitulatif] .action-principale { display: block; margin: 1.1rem auto 0; }
.formule-question summary { gap: .7rem; }
.formule-question summary::after { content: "+"; margin-left: auto; color: var(--action); }
.formule-question[open] > summary::after { content: "−"; }
.formule { background: var(--surface); border: 1px solid var(--trait); border-radius: 14px; padding: 1.25rem 1.5rem; }
.formule-vedette { border-color: var(--action); box-shadow: 0 0 0 1px var(--action) inset; }
.formule-actuelle { border-style: dashed; }
.formule-entete { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; }
.formule-nom { font-size: 1.2rem; font-weight: 700; }
.formule-badge { font-size: .75rem; font-weight: 650; color: var(--action); border: 1px solid var(--action); border-radius: 999px; padding: .1rem .6rem; white-space: nowrap; }
.dark .formule-badge, .dark .formule-lien { color: #79d9d2; border-color: #79d9d2; }
.formule-prix { margin-top: .35rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; }
.formule-prix strong { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; }
.formule-prix span { color: var(--secondaire); }
.formule-equivalent { font-size: .85rem; width: 100%; }
.formule-pour-qui { margin-top: .5rem; font-weight: 550; }
.formule-plus { margin-top: 1rem; font-size: .85rem; color: var(--secondaire); font-weight: 600; }
.formule-liste { margin-top: .5rem; display: grid; gap: .45rem; font-size: .92rem; }
.formule-liste li { display: flex; gap: .55rem; line-height: 1.45; }
.formule-liste li span { color: var(--action); font-weight: 700; flex-shrink: 0; }
.dark .formule-liste li span { color: #79d9d2; }
.formule-actuelle-note { margin-top: 1.1rem; color: var(--secondaire); font-weight: 600; }
.formule-tableau-cadre { overflow-x: auto; border: 1px solid var(--trait); border-radius: 12px; background: var(--surface); }
.formule-tableau { width: 100%; border-collapse: collapse; font-size: .88rem; }
.formule-tableau th, .formule-tableau td { padding: .6rem .7rem; border-bottom: 1px solid var(--trait); text-align: center; vertical-align: top; }
.formule-tableau tbody th { text-align: left; font-weight: 550; }
.formule-tableau thead th { font-weight: 700; }
.formule-tableau tr:last-child th, .formule-tableau tr:last-child td { border-bottom: 0; }
.formule-colonne-actuelle { color: var(--action); }
.formule-absent { color: var(--secondaire); }
.formule-consentement { display: flex; gap: .75rem; align-items: flex-start; font-size: .9rem; }
.formule-consentement input { margin-top: .25rem; width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
.formule-question { border-top: 1px solid var(--trait); padding-block: .6rem; }
.formule-question summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* SUR TÉLÉPHONE, LE TABLEAU TIENT DANS LA LARGEUR. Il défilait de côté et
   coupait la colonne « Annuel » — celle qu'on veut justement comparer. Largeurs
   fixes, texte plus petit, retour à la ligne permis dans les cellules. */
.formule-tableau { table-layout: fixed; }
.formule-tableau th:first-child { width: 34%; }
.formule-tableau td, .formule-tableau th { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 639px) {
  .formule, .formule-etat { padding: 1.1rem; }
  .formule-tableau { font-size: .78rem; }
  .formule-tableau th, .formule-tableau td { padding: .5rem .3rem; }
  .formule-tableau th:first-child { width: 31%; padding-left: .6rem; }
}

/* ADMINISTRATION DES COMPTES (13 septembre 2026). Même colonne et mêmes
   surfaces que les autres vues ; un outil de travail, donc dense et lisible
   plutôt que spectaculaire. Les tableaux défilent dans leur cadre. */
#vue-admin { max-width: 960px; margin-inline: auto; }
.admin-recherche { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-block: 1.25rem; }
.admin-recherche input[type=search] { flex: 1 1 16rem; min-height: 44px; padding: .5rem .8rem; border: 1px solid var(--trait); border-radius: 10px; background: var(--surface); color: inherit; }
.admin-case { display: flex; align-items: center; gap: .4rem; font-size: .9rem; min-height: 44px; }
.admin-tableau-cadre { overflow-x: auto; border: 1px solid var(--trait); border-radius: 12px; background: var(--surface); }
.admin-tableau { width: 100%; border-collapse: collapse; font-size: .88rem; }
.admin-tableau th, .admin-tableau td { padding: .55rem .7rem; border-bottom: 1px solid var(--trait); text-align: left; vertical-align: top; white-space: nowrap; }
.admin-tableau tbody th { font-weight: 500; }
.admin-tableau tr:last-child th, .admin-tableau tr:last-child td { border-bottom: 0; }
.admin-lien { color: var(--action); text-decoration: underline; text-underline-offset: 2px; text-align: left; overflow-wrap: anywhere; white-space: normal; }
.dark .admin-lien { color: #79d9d2; }
.admin-discret, .admin-note { color: var(--secondaire); font-size: .85rem; }
.admin-note { margin-block: .5rem; }
.admin-pastille { display: inline-block; font-size: .72rem; font-weight: 650; border: 1px solid var(--trait); border-radius: 999px; padding: 0 .5rem; margin-left: .35rem; vertical-align: middle; }
.admin-test { border-color: #b7791f; color: #8a5a12; }
.admin-alerte { border-color: #c53030; color: #b42323; }
.dark .admin-test { color: #f6c26b; border-color: #f6c26b; }
.dark .admin-alerte { color: #fca5a5; border-color: #fca5a5; }
.admin-fiche { margin-top: 2rem; }
.admin-fiche-entete h2 { font-size: 1.35rem; font-weight: 700; overflow-wrap: anywhere; }
.admin-fiche-entete code, .admin-liste code { font-size: .8rem; overflow-wrap: anywhere; }
.admin-bloc { background: var(--surface); border: 1px solid var(--trait); border-radius: 14px; padding: 1rem 1.25rem; margin-top: 1rem; }
.admin-bloc h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: .5rem; }
.admin-bloc h4 { font-size: .9rem; font-weight: 650; margin-top: .9rem; }
.admin-infos { display: grid; grid-template-columns: minmax(9rem, max-content) 1fr; gap: .3rem 1rem; font-size: .9rem; }
.admin-info { display: contents; }
.admin-info dt { color: var(--secondaire); }
.admin-info dd { overflow-wrap: anywhere; }
.admin-liste { display: grid; gap: .3rem; font-size: .88rem; margin-top: .35rem; }
.admin-actions { display: grid; gap: 1rem; }
.admin-action { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: end; border-top: 1px solid var(--trait); padding-top: .8rem; }
.admin-action h4, .admin-action .admin-note { width: 100%; margin: 0; }
.admin-action label { display: grid; gap: .2rem; font-size: .85rem; }
.admin-action input, .admin-action select { min-height: 40px; padding: .35rem .6rem; border: 1px solid var(--trait); border-radius: 8px; background: var(--fond, transparent); color: inherit; }
.admin-action input[type=number] { width: 6rem; }
.admin-motif { flex: 1 1 14rem; }
@media (max-width: 639px) {
  .admin-infos { grid-template-columns: 1fr; }
  .admin-info dt { margin-top: .4rem; }
}
.admin-recherche .action-principale { width: auto; padding-inline: 1.4rem; min-height: 44px; }
.admin-action button[type=submit] { min-height: 40px; padding: .35rem 1rem; border: 1px solid var(--action); color: var(--action); border-radius: 8px; font-weight: 600; }
.dark .admin-action button[type=submit] { border-color: #79d9d2; color: #79d9d2; }
.admin-action button[type=submit]:disabled { opacity: .5; }