/* =====================================================================
   PORTAIL D'ENTRAÎNEMENT · compléments à css/style.css (site d'Élise)
   ===================================================================== */
:root { --ok: #1FA37A; --bug: #E0475B; }
/* Couleurs des axes, comme dans les moyens d'enseignement romands (MER) */
:root, :root[data-theme="dark"] {
  --NO: #E4252A;  /* Nombres et opérations : rouge */
  --FA: #E67E10;  /* Fonctions et algèbre : orange */
  --ES: #1E88E5;  /* Espace : bleu */
  --GM: #19A35A;  /* Grandeurs et mesures : vert */
}
.sr { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hero h1 .amp { color: var(--sun); }
.tabs-top { overflow-x: auto; scrollbar-width: none; }
.tabs-top::-webkit-scrollbar { display: none; }
.top-tab { white-space: nowrap; flex: none; text-decoration: none; }
.ext-tab svg.i:last-child { width: .9em !important; height: .9em !important; opacity: .6; }
.levels-bar .spacer, .types .spacer { flex: 1; }

/* ---------- Élève connecté ---------- */
.who { display: inline-flex; align-items: center; gap: .55rem; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: .3rem .4rem .3rem .9rem; font-size: .92rem; }
.who strong { font-weight: 700; }
.who .classe { font-size: .78rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; background: var(--bg); color: var(--muted); }
.who button { border: 0; background: var(--bg); border-radius: 999px; padding: .3rem .75rem; cursor: pointer; font-size: .85rem; font-weight: 700; color: var(--muted); }
.who button:hover { color: var(--text); }

/* ---------- Connexion (comme GeoGebra / Programmation) ---------- */
.page { max-width: 82rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.page h2 { font-family: var(--display); font-weight: 800; font-size: 1.7rem; margin: 0 0 .25rem; }
.page .lead { margin: 0 0 1.25rem; color: var(--muted); max-width: 70ch; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 1.1rem 1.25rem 1.25rem; }
.login-eleve { max-width: 44rem; margin: 0 auto; padding: 1.4rem 1.5rem 1.6rem; }
.ident h4 { margin: .2rem 0 .5rem; font-size: .95rem; }
.ident h4 .hint { font-weight: 400; }
.ident form h4 { margin-top: 1rem; }
.class-choice { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .8rem; }
.class-btn { border: 2px solid var(--line); background: var(--surface); border-radius: 14px; padding: .7rem .5rem; cursor: pointer; text-align: center; color: var(--text); }
.class-btn b { display: block; font-family: var(--display); font-weight: 800; font-size: 1.35rem; line-height: 1.1; }
.class-btn span { font-size: .8rem; color: var(--muted); }
.class-btn[aria-pressed="true"] { border-color: var(--night); background: var(--night); color: #fff; }
.class-btn[aria-pressed="true"] span { color: #C9CDEB; }
.names { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .4rem; margin-top: .3rem; }
.name-btn { border: 1.5px solid var(--line); background: var(--surface); border-radius: 10px; padding: .55rem .4rem; cursor: pointer; font-weight: 700; font-size: .92rem; color: var(--text); }
.name-btn:hover { border-color: var(--night); background: var(--bg); }
.name-btn[aria-pressed="true"] { background: var(--night); border-color: var(--night); color: #fff; }
.code-row { display: flex; gap: .5rem; }
.field { width: 100%; border: 1.5px solid var(--line); border-radius: 10px; padding: .6rem .75rem; background: var(--surface); color: var(--text); font: inherit; }
.field:focus { outline: none; border-color: var(--night); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sun) 50%, transparent); }
.msg { margin: .5rem 0 0; font-size: .9rem; }
.msg.err { color: var(--bug); font-weight: 700; }
.hint { font-size: .9rem; color: var(--muted); margin: .35rem 0 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; text-decoration: none; cursor: pointer; border: 1.5px solid transparent; font-weight: 700; font-size: .9rem; padding: .5rem .9rem; border-radius: 10px; white-space: nowrap; }
.btn-sm { padding: .35rem .7rem; font-size: .85rem; border-radius: 9px; }
.btn-sec { background: var(--surface); border-color: var(--line); color: var(--text); }
.btn-sec:hover { border-color: var(--c, var(--night)); }
.btn-night { background: var(--night); color: #fff; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.foot { max-width: 82rem; margin: 0 auto; padding: 1rem 1.25rem 2rem; display: flex; gap: 1rem; flex-wrap: wrap; color: var(--muted); font-size: .85rem; }
.foot .spacer { flex: 1; }

/* ---------- Thèmes d'un chapitre ---------- */
.sous { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .75rem; }
.sous-btn { border: 1.5px solid color-mix(in srgb, var(--c) 35%, var(--line)); background: var(--surface); color: var(--text); border-radius: 999px; padding: .42rem .95rem; cursor: pointer; font-weight: 700; font-size: .95rem; }
.sous-btn:hover { border-color: var(--c); }
.sous-btn[aria-pressed="true"] { background: color-mix(in srgb, var(--c) 14%, var(--surface)); border-color: var(--c); color: var(--text); box-shadow: inset 0 -3px 0 var(--c); }
.types { align-items: center; flex-wrap: wrap; overflow-x: visible; }
.type-tab[disabled] { opacity: .4; cursor: not-allowed; }
.type-tab[disabled]:hover { border-color: var(--line); }

/* ---------- Cadre du chapitre ---------- */
#zone { margin-top: .4rem; }
.chapitre-cadre { display: block; width: 100%; min-height: 320px; border: 0; background: transparent; opacity: 0; transition: opacity .15s; }
.chapitre-cadre.pret { opacity: 1; }
.cadre-attente { padding: 1.2rem 0; color: var(--muted); }

/* ---------- Fiches d'entraînement ---------- */
.fiches-page { display: grid; gap: 1.5rem; }
.fiches-bloc h3 { font-family: var(--display); font-weight: 700; font-size: 1.35rem; margin: 0; }
.fiches-bloc > .hint { margin: .1rem 0 .8rem; }
.fiches { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: .75rem; }
.fiche { display: grid; grid-template-columns: auto 1fr; gap: .4rem .8rem; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: .9rem 1rem 1rem; }
.fiche .res-icon { width: 2.4rem; height: 2.4rem; }
.fiche h4 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.08rem; }
.fiche p { margin: .1rem 0 0; color: var(--muted); font-size: .9rem; line-height: 1.35; }
.fiche .diff { display: inline-block; margin-top: .3rem; color: var(--c); letter-spacing: .12em; font-size: .8rem; }
.fiche-btns { grid-column: 1 / -1; display: flex; gap: .4rem; margin-top: .35rem; }
.fiche-btns .file { flex: 1; justify-content: center; padding: .45rem .6rem; font-size: .9rem; }

/* ---------- Conversions et calculatrice ---------- */
#vue-conversions .dec-page { max-width: 60rem; }
.du-q { flex-wrap: wrap; }
.du-q .du-champ { width: 5.5rem; }
.du-expl { margin: .3rem 0 0; color: var(--muted); }
.cv-rappel { margin-top: 1rem; }

@media (max-width: 860px) {
  .top-tab .lbl { display: none; }
  .top-tab { font-size: 1.5rem; padding: .6rem 1rem .7rem; }
  .levels-bar .spacer { display: none; }
}
@media print { .hero, .foot, .levels-bar, nav.chapters { display: none !important; } }

.hero-inner .tabs-top:empty { min-height: 1rem; }

/* Accès enseignant (comme sur GeoGebra et Programmation) */
.prof { border-top: 1px solid var(--line); margin-top: 1.1rem; padding-top: .9rem; }
.prof .hint { margin: 0; }
.prof form { margin-top: .6rem; max-width: 26rem; }
.lien { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--text); text-decoration: underline; cursor: pointer; }

/* mes fiches : 4 boutons (Fiche A, Corrigé A, Fiche B, Corrigé B) */
.etape-btns { flex-wrap: wrap; }
.etape-btns .file { flex: 1 1 45%; }

/* titres de parties dans mes fiches (ex. Puissances / Racines / Notation scientifique) */
.fiches .partie { grid-column: 1 / -1; margin: .6rem 0 0; font-family: var(--display); font-size: 1.1rem; color: var(--c); }

/* Thèmes d'un chapitre dans le menu de gauche, en retrait sous le titre */
.sous-menu { margin: .15rem 0 .35rem .9rem; padding-left: .55rem; border-left: 2px solid color-mix(in srgb, var(--c) 35%, transparent); }
.sous-lien { display: block; width: 100%; text-align: left; border: 0; background: none; cursor: pointer; padding: .28rem .6rem; border-radius: 8px; color: var(--muted); font: inherit; font-size: .9rem; }
.sous-lien:hover { background: color-mix(in srgb, var(--c) 10%, transparent); color: var(--text); }
.sous-lien[aria-current="true"] { color: var(--text); font-weight: 700; background: color-mix(in srgb, var(--c) 14%, transparent); }

/* « Recommencer le défi » : sous le défi, discret */
.bas-defi { display: flex; justify-content: flex-start; margin-top: .4rem; }
.bas-defi .btn { width: auto; }

/* mode sombre : même schéma de couleurs que la page du chapitre, sinon le navigateur peint un fond noir opaque derrière l’iframe */
.chapitre-cadre { color-scheme: light dark; background: transparent; }

/* toutes les cartes de fiches : boutons de même taille, alignés en bas */
.fiche { grid-template-rows: 1fr auto; }
.fiche .res-icon, .fiche-txt { align-self: start; }
.etape-btns { align-content: flex-start; }

/* menu des chapitres : il défile avec la page (pas de barre de défilement propre, qui « attrapait » la molette) */
nav.chapters { position: static !important; max-height: none; overflow: visible; padding-bottom: .5rem; }

/* onglet Conversions : le tableau de conversion des cartes (vert Grandeurs et mesures) */
#vue-conversions { --g: var(--GM); }
#vue-conversions .tc { margin-top: 1rem; }