/* Thème AYSI Academy : bleu marine et or, d'après le logo. */
@font-face {
  font-family: "Graduate";
  src: url("../polices/graduate-400.2334b56c84e6.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Merriweather";
  src: url("../polices/merriweather-400.115e2bcd9aa7.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Merriweather";
  src: url("../polices/merriweather-700.f365ae598320.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Fredoka";
  src: url("../polices/fredoka-500.1b62dc4955cd.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Fredoka";
  src: url("../polices/fredoka-600.361ba37d62bd.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("../polices/nunito-400.aacf0f4f8b5d.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("../polices/nunito-600.2e1dd9e2dc30.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("../polices/nunito-700.c9e884975975.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("../polices/nunito-800.1092601cc00e.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}

:root {
  --marine: #021b39;
  --marine-2: #0c2d57;
  --marine-3: #1d4277;
  --or: #c98a0c;
  --or-clair: #e9b949;
  /* Or assez foncé pour du texte sur fond clair (contraste 5,4 pour 1) ; --or reste pour
     les filets et bordures, --or-clair pour la devise sur fond marine. */
  --or-texte: #8f6100;
  --or-pale: #fbf1d8;
  --creme: #f3f5fa;
  --fond-pied: #021b39;
  --fond-doux: #eef1f8;
  --bord-fort: #c4cbdb;
  --bulle-moyenne: #fff1cc;
  --bulle-moyenne-texte: #7a5300;
  --bulle-basse: #fde6e1;
  --bulle-basse-texte: #a8321f;
  --echange-eleve: #fbf4df;
  --blanc: #ffffff;
  --texte: #17223b;
  --gris: #5d6782;
  --bord: #e1e5ef;
  --danger: #a12c2c;
  --danger-pale: #fbeaea;
  --succes: #1f6b45;
  --succes-pale: #e6f3ec;
  --n-rouge: #a12c2c; --n-rouge-pale: #fbeaea; --n-orange: #8a4600; --n-orange-pale: #fdf0e0;
  --n-bleu: #1d4277; --n-bleu-pale: #e8effb; --n-vert: #1f6b45; --n-vert-pale: #e6f3ec;
  --rayon: 14px;
  --ombre: 0 1px 2px rgba(2, 27, 57, 0.06), 0 4px 16px rgba(2, 27, 57, 0.06);
  --police-titre: "Fredoka", "Nunito", system-ui, sans-serif;
  /* Merriweather reste pour la devise, comme sur le logo. */
  --police-devise: "Merriweather", Georgia, "Times New Roman", serif;
  --police-marque: "Graduate", "Rockwell", Georgia, serif;
  --police-texte: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--creme);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: 1rem;
  line-height: 1.55;
}

h1, h2, h3 {
  font-family: var(--police-titre);
  color: var(--marine);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h1 { font-size: 1.8rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }

a { color: var(--marine-3); text-underline-offset: 2px; }
a:hover { color: var(--marine); }

:focus-visible { outline: 3px solid var(--or-clair); outline-offset: 2px; }

/* En-tête */
.en-tete {
  background: var(--blanc);
  border-bottom: 3px solid var(--or);
}
.en-tete__contenu {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0.4rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.en-tete__logo img { display: block; height: 52px; width: auto; }
.navigation {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
}
.navigation a, .navigation button {
  font-family: var(--police-titre);
  font-size: 1rem;
  font-weight: 500;
  color: var(--marine);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0.35rem 0;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.navigation a:hover, .navigation button:hover,
.navigation a[aria-current="page"] { border-bottom-color: var(--or); }
.navigation form { margin: 0; }

/* Contenu */
.page {
  flex: 1;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

.carte {
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 1.25rem 1.25rem 1.5rem;
}
.grille {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.discret { color: var(--gris); font-size: 0.92rem; }
.vide {
  color: var(--gris);
  border: 1px dashed var(--bord);
  border-radius: var(--rayon);
  padding: 0.9rem 1rem;
  background: var(--creme);
}

/* Pages d'entrée (connexion, inscription) */
.entree {
  max-width: 27rem;
  margin: 1rem auto 0;
}
.entree__logo { text-align: center; margin-bottom: 1rem; }
.entree__logo img { width: min(100%, 300px); height: auto; }

/* Formulaires (y compris ceux de django-allauth) */
form p, form .champ { margin: 0 0 0.9rem; }
label { display: block; font-weight: 600; margin-bottom: 0.25rem; color: var(--marine); }
input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="tel"], select, textarea {
  width: 100%;
  font: inherit;
  color: var(--texte);
  background: var(--blanc);
  border: 1px solid var(--bord-fort);
  border-radius: 8px;
  padding: 0.6rem 0.7rem;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--marine-3);
  outline: 3px solid rgba(233, 185, 73, 0.55);
  outline-offset: 0;
}
input[type="checkbox"] { width: 1.1rem; height: 1.1rem; accent-color: var(--marine); vertical-align: -2px; }
.helptext, form .helptext, form small { display: block; color: var(--gris); font-size: 0.85rem; margin-top: 0.25rem; }
.errorlist { list-style: none; margin: 0.3rem 0 0; padding: 0; color: var(--danger); font-size: 0.9rem; }

button, .bouton {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  color: var(--blanc);
  background: var(--marine);
  border: 2px solid var(--marine);
  border-radius: 8px;
  padding: 0.6rem 1.1rem;
  cursor: pointer;
}
button:hover, .bouton:hover { background: var(--marine-2); color: var(--blanc); }
.bouton--secondaire, button.secondaire {
  color: var(--marine);
  background: transparent;
}
.bouton--secondaire:hover, button.secondaire:hover { background: var(--or-pale); color: var(--marine); }
.bouton--danger, button.danger { background: var(--danger); border-color: var(--danger); }
.entree button[type="submit"] { width: 100%; }

/* Messages */
.messages { list-style: none; padding: 0; margin: 0 0 1rem; }
.message {
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.5rem;
  background: var(--or-pale);
  border-left: 4px solid var(--or);
}
.message--success { background: var(--succes-pale); border-left-color: var(--succes); }
.message--error { background: var(--danger-pale); border-left-color: var(--danger); }

/* Tableaux */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.5rem 0.4rem; border-bottom: 1px solid var(--bord); }
th { font-family: var(--police-titre); color: var(--marine); font-size: 0.9rem; }

/* Pied de page */
.pied {
  background: var(--fond-pied);
  color: #cfd8e6;
  font-size: 0.85rem;
}
.pied__contenu {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
}
.pied__devise {
  font-family: var(--police-devise);
  color: var(--or-clair);
  letter-spacing: 0.04em;
}

@media (max-width: 40rem) {
  .en-tete__logo img { height: 44px; }
  h1 { font-size: 1.35rem; }
}

/* Aide des mots de passe (liste de django-allauth) */
form ul:not(.errorlist):not(.messages) { color: var(--gris); font-size: 0.85rem; margin: 0.3rem 0 0; padding-left: 1.1rem; }

/* Écran « Aujourd'hui » */
.grille--large { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
/* Une seule carte (un seul enfant) : elle prend toute la largeur et range ses blocs en colonnes. */
.grille--large > .carte:only-child > .blocs { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); align-items: start; }
.grille--large > .carte:only-child > .blocs > .vide { grid-column: 1 / -1; }
.blocs { display: grid; gap: 0.9rem; }
.bloc h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--marine);
  margin-bottom: 0.5rem;
}
.bloc ul { margin: 0; padding-left: 1.1rem; }
.bloc .vide { margin: 0; font-size: 0.92rem; }

/* Cases à cocher en liste */
.cases { border: 0; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.4rem; }
.case {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 500;
  color: var(--texte);
  background: var(--creme);
  border: 1px solid var(--bord);
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
  cursor: pointer;
}
.case:has(input:checked) { background: var(--or-pale); border-color: var(--or); }
.sr-seulement {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.liens { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.liens a { font-weight: 600; }

/* Mises en page des écrans de données */
.titre-actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.titre-actions h1 { margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.champs-2, .champs-3 { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
.champ { margin-bottom: 0.9rem; }
.nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tableau-defilant { overflow-x: auto; }
button.lien { background: none; border: 0; padding: 0; color: var(--marine-3); text-decoration: underline; font-weight: 400; }
button.lien:hover { background: none; color: var(--marine); }
.onglets { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.onglets a {
  text-decoration: none; font-weight: 600; color: var(--marine);
  border: 1px solid var(--bord); border-radius: 999px; padding: 0.3rem 0.9rem; background: var(--blanc);
}
.onglets a[aria-current="page"] { background: var(--marine); border-color: var(--marine); color: var(--blanc); }
[x-cloak] { display: none !important; }
.onglets--discrets a { font-weight: 500; font-size: 0.9rem; }
.onglets--discrets a[aria-current="page"] { background: var(--or-pale); color: var(--marine); border-color: var(--or); }
.moyenne-generale { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; margin-bottom: 0.75rem; }
.moyenne-officielle { flex-basis: 100%; text-align: right; }
.moyenne-generale strong { font-family: var(--police-titre); font-size: 2rem; color: var(--marine); }

/* Alertes de note */
.alerte {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem;
  background: var(--or-pale); border: 1px solid var(--or-clair); border-left: 4px solid var(--or);
  border-radius: 8px; padding: 0.7rem 0.9rem; margin-bottom: 0.6rem;
}
.alerte form { margin: 0; }
.alerte button { padding: 0.35rem 0.8rem; }
.pastille {
  display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em;
  color: var(--marine); background: var(--or-pale); border: 1px solid var(--or-clair);
  border-radius: 999px; padding: 0.05rem 0.5rem; vertical-align: 1px;
}
.etapes { padding-left: 1.2rem; margin: 0 0 1rem; }
.etapes li { margin-bottom: 0.3rem; }

/* Devoirs */
.jour { margin-bottom: 0.9rem; }
.jour h2 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.devoirs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.devoir { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.5rem 0; border-top: 1px solid var(--bord); }
.devoir:first-child { border-top: 0; }
.devoir form { margin: 0; }
.devoir__texte { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.devoir__description { color: var(--texte); font-size: 0.95rem; }
.devoir--fait .devoir__texte { color: var(--gris); }
.devoir--fait .devoir__description { opacity: 0.75; }
.pastille--fait { background: var(--succes-pale); color: var(--succes); border-color: transparent; }
.devoir__aide { display: inline-block; margin-top: 0.2rem; font-size: 0.9rem; font-weight: 600; }
.devoir--fait .devoir__description { color: var(--gris); }
.coche {
  width: 1.5rem; height: 1.5rem; padding: 0; border-radius: 6px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blanc); border: 2px solid var(--marine-3); margin-top: 0.1rem;
}
.coche:hover { background: var(--or-pale); }
.coche[aria-pressed="true"] { background: var(--marine); border-color: var(--marine); }
.coche[aria-pressed="true"]::after { content: "✓"; color: var(--blanc); font-weight: 700; line-height: 1; }
.pastille--controle { background: var(--marine); color: var(--blanc); border-color: var(--marine); }
.devoir__retirer { font-size: 0.85rem; }
.compteurs { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 1rem; }
.compteur { display: flex; flex-direction: column; gap: 0.1rem; }
.compteur strong { font-family: var(--police-titre); font-size: 1.8rem; color: var(--marine); }
.compteur > span:not(.pastille-evenement) { color: var(--gris); font-size: 0.9rem; }
.devoirs--compacts .devoir { padding: 0.35rem 0; }
.devoirs--compacts .devoir__description { font-size: 0.9rem; }

.bloc .devoirs { padding-left: 0; }
.apercu-email { width: 100%; height: 34rem; border: 1px solid var(--bord); border-radius: 8px; background: var(--creme); }

/* Simulateur */
.simulation-note { font-size: 1.6rem; margin: 0.25rem 0 0.5rem; color: var(--marine); }
.simulation-note strong { font-size: 2.2rem; }

/* Synthèse de période */
.synthese-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.synthese-chiffres > div { display: flex; flex-direction: column; gap: 0.1rem; border: 1px solid var(--bord); border-radius: 8px; padding: 0.6rem 0.75rem; }
.synthese-chiffres span, .synthese-chiffres em { color: var(--gris); font-size: 0.88rem; font-style: normal; }
.synthese-chiffres strong { font-size: 1.5rem; color: var(--marine); }
.synthese-tableau { width: 100%; margin-bottom: 1rem; }
.synthese-reperes { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.75rem; }
.synthese-reperes > div { border-left: 3px solid var(--or); padding: 0.4rem 0.75rem; background: var(--creme); }
.synthese-reperes h3 { margin: 0 0 0.3rem; font-size: 1rem; }
.synthese-reperes ul { margin: 0; padding-left: 1.1rem; }
.tendance--hausse { color: var(--succes); }
.tendance--baisse { color: var(--danger); }

/* Cours (cahier de textes) */
.seances { list-style: none; margin: 0; padding: 0; }
.seance { padding: 0.6rem 0; border-top: 1px solid var(--bord); }
.seance:first-child { border-top: 0; }
.seance__entete { margin: 0 0 0.3rem; }
.seance__contenu { white-space: normal; overflow-wrap: anywhere; }
.seance--annulee .seance__entete strong { text-decoration: line-through; }
.recherche { display: flex; gap: 0.5rem; margin: 0 0 1rem; max-width: 40rem; }
.recherche input { flex: 1; min-width: 0; width: auto; }
.echange { padding: 0.5rem 0.75rem; margin: 0.5rem 0; border-radius: 0.5rem; background: var(--fond-doux); }
.echange--eleve { background: var(--echange-eleve); margin-left: 2rem; }
.echange p { margin: 0.15rem 0; }
/* Fond clair fixe : le SVG est une image, il ne suit pas le thème sombre. */
.schema-aide { margin: 0.5rem 0 0; padding: 0.5rem; background: #fff; border-radius: 0.5rem; max-width: 28rem; }
.schema-aide img { display: block; width: 100%; height: auto; }

/* Pages du manuel Sésamath affichées dans l'application. */
.manuel { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.manuel__page { width: 100%; max-width: 845px; height: auto; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--blanc); }
.credit { margin-top: 1.5rem; }
.verdicts { list-style: none; padding-left: 0; }
.essentiel li { margin-bottom: 0.6rem; }
.vocabulaire dt { font-weight: 700; }
.vocabulaire dd { margin: 0 0 0.6rem 0; }
/* Approfondissement d'une notion : schémas (SVG faits main ou dessinés depuis les données),
   méthode, exercices corrigés et devoir type. Les SVG prennent les couleurs du thème. */
.sommaire-notion { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem; }
.sommaire-notion a { padding: 0.3rem 0.75rem; border-radius: 999px; background: var(--fond-doux); color: var(--marine-3); font-weight: 600; text-decoration: none; font-size: 0.9rem; }
.schema { margin: 0 0 1.5rem; }
.schema:last-child { margin-bottom: 0; }
.schema__titre { font-weight: 700; color: var(--marine); margin-bottom: 0.5rem; }
.schema__legende { margin: 0.5rem 0 0; }
.schema__dessin svg { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; font-family: var(--police-texte); }
.schema__dessin .s-trait { stroke: var(--marine-3); fill: none; stroke-width: 2; }
.schema__dessin .s-fin { stroke: var(--gris); fill: none; stroke-width: 1.2; stroke-dasharray: 4 3; }
.schema__dessin .s-accent { stroke: var(--or); fill: none; stroke-width: 2.5; }
.schema__dessin .s-plein { fill: var(--marine-3); stroke: none; }
.schema__dessin .s-plein-or { fill: var(--or); stroke: none; }
.schema__dessin .s-fond { fill: var(--fond-doux); stroke: var(--marine-3); stroke-width: 1.5; }
.schema__dessin .s-fond-or { fill: var(--or-pale); stroke: var(--or); stroke-width: 1.5; }
.schema__dessin .s-fond-vert { fill: var(--succes-pale); stroke: var(--succes); stroke-width: 1.5; }
.schema__dessin .s-fond-rouge { fill: var(--danger-pale); stroke: var(--danger); stroke-width: 1.5; }
.schema__dessin text { fill: var(--texte); font-size: 14px; }
.schema__dessin text.s-petit { font-size: 12px; fill: var(--gris); }
.schema__dessin text.s-gras { font-weight: 700; fill: var(--marine); }
.frise { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 3px solid var(--or); }
.frise li { position: relative; padding: 0 0 0.75rem 0.75rem; }
.frise li::before { content: ""; position: absolute; left: calc(-1rem - 7.5px); top: 0.35rem; width: 12px; height: 12px; border-radius: 50%; background: var(--marine-3); border: 2px solid var(--blanc); }
.frise__date { display: block; font-weight: 700; color: var(--marine); font-variant-numeric: tabular-nums; }
.etapes { list-style: none; margin: 0; padding: 0; counter-reset: etape; }
.etapes li { counter-increment: etape; position: relative; padding: 0.6rem 0.75rem 0.6rem 2.6rem; background: var(--fond-doux); border-radius: var(--rayon); margin-bottom: 1.4rem; }
.etapes li::before { content: counter(etape); position: absolute; left: 0.6rem; top: 0.55rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--marine-3); color: var(--blanc); font-weight: 700; display: grid; place-items: center; font-size: 0.85rem; }
.etapes li:not(:last-child)::after { content: "▼"; position: absolute; left: 50%; bottom: -1.3rem; transform: translateX(-50%); color: var(--or); font-size: 0.9rem; }
.etapes li:last-child { margin-bottom: 0; }
.tableau-schema { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
.tableau-schema th, .tableau-schema td { border: 1px solid var(--bord); padding: 0.45rem 0.6rem; text-align: left; vertical-align: top; }
.tableau-schema thead th { background: var(--fond-doux); color: var(--marine); }
.tableau-schema tbody th { font-weight: 700; color: var(--marine); }
.methode li { margin-bottom: 0.5rem; }
.exercices-rediges { padding-left: 1.25rem; }
.exercices-rediges > li { margin-bottom: 1.25rem; }
.exercices-rediges h3 { font-size: 1.05rem; margin: 0 0 0.4rem; }
.exercices-rediges .enonce, .devoir-type__consignes li { line-height: 1.55; white-space: pre-wrap; }
.corrige ol { background: var(--or-pale); border-radius: var(--rayon); padding: 0.6rem 0.75rem 0.6rem 2rem; margin: 0.5rem 0 0; }
.corrige ol li { margin-bottom: 0.35rem; }
.devoir-type__consignes li { margin-bottom: 0.6rem; }
@media print {
  .sommaire-notion, .corrige { display: none; }
}
.quiz fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
.quiz legend { font-weight: 600; margin-bottom: 0.3rem; }
.filtres-niveau { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.filtres-niveau a { padding: 0.25rem 0.7rem; border: 1px solid currentColor; border-radius: 999px; text-decoration: none; font-size: 0.9rem; }
.filtres-niveau a[aria-current="true"] { background: var(--marine); color: var(--blanc); border-color: var(--marine); }
.niveau { display: inline-block; margin-left: 0.4rem; padding: 0 0.45rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; vertical-align: middle; }
.niveau--1 { background: var(--succes-pale); color: var(--succes); }
.niveau--2 { background: var(--or-pale); color: #7a5306; }
.niveau--3 { background: var(--danger-pale); color: var(--danger); }
.quiz ul, .quiz div > div { list-style: none; padding-left: 0; }

/* Avancée du programme : une matière repliable par carte, une barre de progression. */
.ligne-action { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; margin: 0 0 1rem; }
.programme { display: grid; gap: 0.8rem; }
.matiere-programme { padding: 0; }
.matiere-programme > summary {
  display: grid; grid-template-columns: 1fr auto; gap: 0.4rem 1rem; align-items: baseline;
  padding: 1rem 1.25rem; cursor: pointer; list-style: none;
}
.matiere-programme > summary::-webkit-details-marker { display: none; }
.matiere-programme__nom { font-family: var(--police-titre); font-weight: 700; font-size: 1.15rem; color: var(--marine); }
.matiere-programme__compte { color: var(--gris); font-size: 0.9rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.matiere-programme__compte::after { content: " ▾"; }
.matiere-programme:not([open]) .matiere-programme__compte::after { content: " ▸"; }
.progression { grid-column: 1 / -1; display: block; height: 0.5rem; background: var(--creme); border: 1px solid var(--bord); border-radius: 999px; overflow: hidden; }
.progression span { display: block; height: 100%; background: var(--marine-3); border-radius: 999px; }
.matiere-programme > p, .matiere-programme > .notions { margin-left: 1.25rem; margin-right: 1.25rem; }
.matiere-programme > p { margin-top: 0; }
.notions { list-style: none; padding: 0; margin-bottom: 1.25rem; display: grid; }
.notion { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; gap: 0.3rem 0.6rem; align-items: start; padding: 0.65rem 0; border-top: 1px solid var(--bord); }
.notion__etat {
  width: 1.3rem; height: 1.3rem; margin-top: 0.1rem; border-radius: 50%; border: 2px solid var(--bord);
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700;
}
.notion--vue .notion__etat { background: var(--succes); border-color: var(--succes); color: var(--blanc); }
.notion__texte { display: flex; flex-direction: column; gap: 0.1rem; }
.notion__titre { font-weight: 600; color: var(--marine); }
.notion:not(.notion--vue) .notion__titre { color: var(--texte); font-weight: 500; }
.notion__precision { font-size: 0.9rem; color: var(--texte); }
.notion__meta { font-size: 0.82rem; color: var(--gris); }
.notion__liens { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: flex-end; }
.puce-lien {
  font-size: 0.82rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  color: var(--marine); border: 1px solid var(--bord); border-radius: 999px; padding: 0.2rem 0.65rem; background: var(--blanc);
}
.puce-lien:hover { background: var(--or-pale); border-color: var(--or); }
@media (max-width: 40rem) {
  .notion { grid-template-columns: 1.6rem minmax(0, 1fr); }
  .notion__liens { grid-column: 2; justify-content: flex-start; }
}

/* Matières à renforcer */

/* Planning de révision, jour par jour */
.semaine-nav { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 1rem; font-family: var(--police-titre); font-weight: 700; color: var(--marine); }
.semaine-nav .bouton { padding: 0.35rem 0.8rem; }
/* En-tête : menu principal court, menu « compte » à droite ; barre d'onglets sur téléphone. */
.en-tete__contenu { flex-wrap: nowrap; }
.navigation { margin-left: auto; flex-wrap: nowrap; gap: 0.25rem 1.1rem; }
.menu-compte { position: relative; flex: none; }
.menu-compte > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.35rem;
  font-weight: 600; color: var(--marine); border: 1px solid var(--bord); border-radius: 999px;
  padding: 0.3rem 0.8rem; background: var(--blanc); white-space: nowrap; max-width: 12rem; overflow: hidden; text-overflow: ellipsis;
}
.menu-compte > summary::-webkit-details-marker { display: none; }
.menu-compte > summary::after { content: "▾"; font-size: 0.8em; color: var(--gris); }
.menu-compte[open] > summary { background: var(--or-pale); border-color: var(--or); }
.menu-compte__liste {
  position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 20; min-width: 15rem;
  background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre);
  padding: 0.5rem; display: grid;
}
.menu-compte__liste a, .menu-compte__liste button.lien {
  display: block; width: 100%; text-align: left; padding: 0.55rem 0.7rem; border-radius: 6px;
  color: var(--marine); text-decoration: none; font-weight: 600;
}
.menu-compte__liste a:hover, .menu-compte__liste button.lien:hover { background: var(--or-pale); }
.menu-compte__liste form { margin: 0; border-top: 1px solid var(--bord); padding-top: 0.3rem; margin-top: 0.3rem; }
.menu-compte__qui { margin: 0 0 0.3rem; padding: 0.3rem 0.7rem 0.6rem; border-bottom: 1px solid var(--bord); font-size: 0.85rem; color: var(--gris); overflow-wrap: anywhere; }
.menu-compte__qui span { color: var(--texte); font-weight: 600; }

.barre-onglets { display: none; }
@media (max-width: 48rem) {
  .en-tete .navigation { display: none; }
  .menu-compte { margin-left: auto; }
  .barre-onglets {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
    background: var(--blanc); border-top: 1px solid var(--bord); box-shadow: 0 -2px 10px rgba(2, 27, 57, 0.06);
    padding: 0.3rem max(0.3rem, env(safe-area-inset-right, 0px)) calc(0.3rem + env(safe-area-inset-bottom, 0px)) max(0.3rem, env(safe-area-inset-left, 0px));
  }
  .barre-onglets a {
    flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
    padding: 0.3rem 0.1rem; border-radius: 8px; text-decoration: none; color: var(--gris); font-size: 0.72rem; font-weight: 600;
  }
  .barre-onglets a[aria-current="page"] { color: var(--marine); background: var(--or-pale); }
  .barre-onglets a { padding: 0.3rem 0.05rem; font-size: clamp(0.56rem, 2.5vw, 0.72rem); }
  .barre-onglets a.barre-onglets__long { flex: 1.5; }
  .barre-onglets span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  body:has(.barre-onglets) .pied { padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px)); }
}

/* Mon compte */
.compte { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: start; }
.fiche-compte { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1rem; margin: 0; }
.fiche-compte dt { color: var(--gris); font-size: 0.9rem; }
.fiche-compte dd { margin: 0; overflow-wrap: anywhere; }
.reglages { list-style: none; margin: 0; padding: 0; display: grid; }
.reglages li { display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding: 0.8rem 0; border-top: 1px solid var(--bord); }
.reglages li:first-child { border-top: 0; padding-top: 0; }
.reglages li > div { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.reglages .pastille { align-self: flex-start; }
.pastille--ok { background: var(--succes-pale); border-color: var(--succes); color: var(--succes); }

/* Formulaires rendus par Django (as_div) : un champ par bloc, espacé du suivant. */
form > div:not([class]) { margin-bottom: 0.9rem; }
form > div:not([class]) > label + .helptext { margin: -0.1rem 0 0.3rem; }
form > button[type="submit"], form > .bouton { margin-top: 0.2rem; }

/* Cartes empilées les unes sous les autres : toujours un espace entre elles. */
.carte + .carte, .carte + section.carte, form + .carte { margin-top: 1rem; }
.grille > .carte + .carte, .compte > .carte + .carte, .programme > .carte + .carte { margin-top: 0; }

/* Liste des notes sur téléphone : une note par ligne, lisible sans défiler de côté. */
.liste-notes { display: none; list-style: none; margin: 0; padding: 0; }
.liste-notes li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.1rem 0.8rem; padding: 0.6rem 0; border-top: 1px solid var(--bord); }
.liste-notes li:first-child { border-top: 0; padding-top: 0; }
.liste-notes__matiere { font-weight: 600; color: var(--marine); }
.liste-notes__valeur { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.liste-notes__valeur strong { font-size: 1.1rem; }
.liste-notes__detail { color: var(--gris); font-size: 0.85rem; }
.seulement-petit { display: none; }
.liste-notes__action { font-size: 0.85rem; text-align: right; }
@media (max-width: 40rem) {
  .liste-notes { display: grid; }
  .seulement-large { display: none; }
  .seulement-petit { display: flex; }
  th, td { padding: 0.45rem 0.25rem; }
  td { overflow-wrap: anywhere; }
}

/* Le filet doré du haut est réservé à la carte principale d'une page, pour qu'elle ressorte. */
.carte--accent { border-top: 3px solid var(--or); }

/* Encart d'action : une phrase et un bouton, sur une ligne quand la place le permet. */
.encart {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem;
  background: var(--blanc); border: 1px solid var(--bord); border-left: 4px solid var(--marine-3);
  border-radius: 8px; padding: 0.8rem 1rem; margin: 0 0 1rem;
}
.encart > div { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.entree__accroche { margin: 0.6rem auto 0; max-width: 24rem; color: var(--marine); font-family: var(--police-devise); font-size: 1rem; line-height: 1.45; }

/* Accueil parent : phrase de résumé, chiffre au-dessus de la jauge. */
.resume-enfant { margin: -0.3rem 0 0.9rem; font-weight: 600; color: var(--marine); }
.jauge__nombre { min-height: 1.1rem; font-size: 0.8rem; font-weight: 700; color: var(--marine); font-variant-numeric: tabular-nums; display: inline-flex; gap: 0.2rem; align-items: center; }
.jauge__controle { font-size: 0.65rem; color: var(--blanc); background: var(--marine); border-radius: 3px; padding: 0 0.2rem; }

/* Notes : courbe d'évolution, moyennes colorées, origine de la note, menu « Réglages ». */
.colonne-courbe { width: 76px; padding-top: 0.2rem; padding-bottom: 0.2rem; }
.courbe { display: block; }
.courbe--hausse { color: var(--succes); }
.courbe--baisse { color: var(--danger); }
.moyenne--basse { color: var(--danger); }
.moyenne--haute { color: var(--succes); }
.source { font-size: 0.75rem; color: var(--gris); border: 1px solid var(--bord); border-radius: 999px; padding: 0 0.4rem; white-space: nowrap; }
.menu-actions { position: relative; }
.menu-actions > summary { list-style: none; }
.menu-actions > summary::-webkit-details-marker { display: none; }
.menu-actions > summary::after { content: " ▾"; }
@media (max-width: 40rem) { .colonne-courbe { display: none; } }
.saisie-manuelle { margin: 0 0 0.9rem; }
.saisie-manuelle summary { cursor: pointer; margin-bottom: 0.5rem; }

/* Mes enfants : état de chaque liaison, d'un coup d'œil. */
.fiche-enfant .titre-actions { margin-bottom: 0.2rem; }
.fiche-enfant .titre-actions h2 { margin: 0; }
.etats { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; }
.etat { display: flex; justify-content: space-between; gap: 0.8rem; align-items: center; padding: 0.55rem 0 0.55rem 1.4rem; border-top: 1px solid var(--bord); position: relative; }
.etat::before { content: ""; position: absolute; left: 0.2rem; top: 50%; width: 0.6rem; height: 0.6rem; margin-top: -0.3rem; border-radius: 50%; background: var(--bord); }
.etat--ok::before { background: var(--succes); }
.etat--attention::before { background: var(--or); }
.etat--a-faire::before { background: transparent; border: 2px solid var(--marine-3); }
.etat > span { min-width: 0; }
.etat a { font-weight: 600; white-space: nowrap; }
.case--detail { align-items: flex-start; }
.case--detail > input { margin-top: 0.2rem; }
.case--detail > span { display: flex; flex-direction: column; gap: 0.1rem; }
.case--detail .discret { font-weight: 400; font-size: 0.85rem; }
.sur-titre { margin: 0 0 0.2rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--or-texte); }

/* Aide aux devoirs : la zone de saisie reste sous le pouce sur téléphone. */
.saisie-aide__bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem 1rem; }
.saisie-aide__bas .indicateur { margin: 0 auto 0 0; }
.indicateur { display: none; }
.indicateur.htmx-request { display: block; }
@media (max-width: 48rem) {
  .saisie-aide { position: sticky; bottom: calc(4.2rem + env(safe-area-inset-bottom, 0px)); z-index: 5; box-shadow: 0 -4px 16px rgba(2, 27, 57, 0.08); }
}

/* Accueil de l'élève : la prochaine chose à faire, en tête. */
.prochaine-etape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; }
.prochaine-etape p { margin: 0; font-size: 1.1rem; font-weight: 600; color: var(--marine); }

/* Quiz : réponse dite tout de suite, le score reste calculé par le serveur. */
.quiz .retour { margin: 0.4rem 0 0; padding: 0.5rem 0.75rem; border-radius: var(--rayon); font-size: 0.95rem; }
.quiz .repondu--juste .retour { background: var(--succes-pale); }
.quiz .repondu--faux .retour { background: var(--danger-pale); }
.quiz .repondu--juste .retour strong { color: var(--succes); }
.quiz .repondu--faux .retour strong { color: var(--danger); }

.indice { margin: 0.5rem 0 1rem; }
.indice summary { cursor: pointer; color: var(--marine-3); font-weight: 600; }
.indice p { margin: 0.4rem 0 0; padding: 0.5rem 0.75rem; background: var(--or-pale); border-radius: var(--rayon); }

/* Manuel : une page s'agrandit en plein écran, à faire défiler du doigt. */
.manuel__figure { position: relative; margin: 0; width: 100%; max-width: 845px; }
.manuel__agrandir { position: absolute; top: 0.5rem; right: 0.5rem; }
.loupe { position: fixed; inset: 0; z-index: 50; background: rgba(2, 27, 57, 0.92); display: flex; flex-direction: column; }
.loupe__fermer { align-self: flex-end; margin: calc(0.5rem + env(safe-area-inset-top, 0px)) 0.75rem 0.5rem; }
.loupe__defilement { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; }
.loupe__defilement img { display: block; width: max(100%, 900px); height: auto; background: var(--blanc); }

.objectif-brevet { font-size: 1.05rem; padding: 0.6rem 0.8rem; background: var(--or-pale); border-radius: var(--rayon); }

/* Une couleur et une icône par matière (proposition V3). */
.m-maths { --c: #2f6fde; } .m-francais { --c: #d9472f; } .m-hg { --c: #c47a12; } .m-svt { --c: #2b8f53; }
.m-pc { --c: #7a4fd6; } .m-techno { --c: #12819a; } .m-anglais { --c: #c93a74; } .m-langue { --c: #d4661c; }
.m-arts { --c: #a845b6; } .m-musique { --c: #3c58c9; } .m-eps { --c: #5f921a; } .m-lca { --c: #8a6a3a; }
.m-autre { --c: #48618a; }
.pastille-matiere {
  display: inline-grid; place-items: center; flex: none; width: 2.3rem; height: 2.3rem; border-radius: 11px;
  color: var(--c); background: color-mix(in srgb, var(--c) 14%, var(--blanc));
}
.pastille-matiere--petite { width: 1.9rem; height: 1.9rem; border-radius: 9px; }

/* Cocher un devoir : case ronde qui se remplit, « +1 » doré (proposition V11). */
.devoir { position: relative; align-items: center; }
.coche {
  width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 2.5px solid var(--bord-fort); background: var(--blanc);
  transition: background 0.2s, border-color 0.2s;
}
.coche:hover { background: var(--succes-pale); border-color: var(--succes); }
.coche[aria-pressed="true"] { background: var(--succes); border-color: var(--succes); }
.coche[aria-pressed="true"]::after { content: ""; width: 0.5rem; height: 0.9rem; margin-top: -0.2rem; border: solid var(--blanc); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.devoir--bravo .coche { animation: rebond 0.35s ease; }
.plus-un { position: absolute; left: 0.2rem; top: -0.4rem; font-family: var(--police-titre); font-weight: 600; color: var(--or); pointer-events: none; animation: monte 0.9s ease forwards; }
@keyframes rebond { 50% { transform: scale(1.25); } }
@keyframes monte { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-1.6rem); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .plus-un { display: none; }
}

/* Accueil : contrôles en cartes, notes en lignes avec bulle (proposition V8). */
.bloc ul.cartes-controles { list-style: none; padding: 0.1rem 0 0.3rem; margin: 0; display: flex; gap: 0.6rem; overflow-x: auto; scrollbar-width: thin; }
.cartes-controles li {
  flex: none; width: 10.5rem; padding: 0.7rem 0.8rem; border-radius: var(--rayon);
  background: color-mix(in srgb, var(--c) 7%, var(--blanc)); border: 1px solid color-mix(in srgb, var(--c) 22%, var(--blanc));
  display: flex; flex-direction: column; gap: 0.15rem;
}
.cartes-controles__jour { align-self: flex-start; font-weight: 800; font-size: 0.78rem; color: var(--blanc); background: var(--c); border-radius: 7px; padding: 0.05rem 0.5rem; }
.cartes-controles strong { font-family: var(--police-titre); font-weight: 600; color: var(--marine); line-height: 1.2; margin-top: 0.2rem; }
.cartes-controles .discret { font-size: 0.82rem; line-height: 1.35; }
.bloc ul.lignes-notes { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; }
.lignes-notes li { display: flex; align-items: center; gap: 0.7rem; }
.lignes-notes .pastille-matiere { width: 1.9rem; height: 1.9rem; border-radius: 9px; }
.lignes-notes__nom { flex: 1; min-width: 0; font-weight: 700; line-height: 1.25; }
.lignes-notes__nom .discret { display: block; font-weight: 400; font-size: 0.8rem; }
.bulle-note {
  font-family: var(--police-titre); font-weight: 600; font-variant-numeric: tabular-nums; min-width: 4.2rem; text-align: center;
  padding: 0.15rem 0.6rem; border-radius: 10px; background: var(--bulle-moyenne); color: var(--bulle-moyenne-texte);
}
.bulle-note--moyenne--haute { background: var(--succes-pale); color: var(--succes); }
.bulle-note--moyenne--basse { background: var(--bulle-basse); color: var(--bulle-basse-texte); }

/* Série de soirs à jour (V14) et fête quand tout est fait (V12). */
.titre-accueil { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1rem; margin-bottom: 0.6em; }
.titre-accueil h1 { margin: 0; }
.serie { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; padding: 0.2rem 0.75rem; border-radius: 99px; background: var(--or-pale); color: var(--or-texte); font-weight: 800; font-size: 0.88rem; }
.bravo {
  position: fixed; left: 50%; top: calc(1rem + env(safe-area-inset-top, 0px)); transform: translateX(-50%); z-index: 60;
  background: var(--marine); color: var(--blanc); border-radius: 16px; padding: 0.8rem 1.2rem; font-family: var(--police-titre); font-weight: 600; font-size: 1.1rem;
  box-shadow: 0 12px 30px rgba(2, 27, 57, 0.3); animation: arrive 0.4s ease; max-width: calc(100% - 2rem); text-align: center;
}
.confettis { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 59; }
@keyframes arrive { from { opacity: 0; transform: translate(-50%, -0.8rem); } }
.blocs > *, .bloc { min-width: 0; }
.jauge__barre { border-radius: 9px; background: var(--fond-doux); border-color: transparent; }
.jauge__barre span { border-radius: 9px; background: linear-gradient(#5f8fe8, #2f6fde); transform-origin: bottom; animation: pousse 0.6s cubic-bezier(0.3, 1.4, 0.5, 1) both; }
.jauge__jour--moyen .jauge__barre span { background: linear-gradient(#ffcf5c, #e9a514); }
.jauge__jour--lourd .jauge__barre span { background: linear-gradient(#ff8f7a, #d9472f); }
@keyframes pousse { from { transform: scaleY(0.05); } }
.carte { transition: box-shadow 0.2s; }
.nom-matiere { display: inline-flex; align-items: center; gap: 0.5rem; }
.nom-matiere .pastille-matiere { width: 1.7rem; height: 1.7rem; border-radius: 8px; }
.matiere-programme__nom.nom-matiere .pastille-matiere { width: 2rem; height: 2rem; }

/* Bulletin : appréciations et compétences du socle */
.appreciations { display: grid; gap: 0.9rem; margin: 0; }
.appreciation dt { font-weight: 700; }
.appreciation dd { margin: 0.2rem 0 0; }
.appreciation--generale { background: var(--or-pale); border-left: 4px solid var(--or); padding: 0.75rem 1rem; border-radius: 0 8px 8px 0; }
.liste-simple { margin: 0.4rem 0 0; padding-left: 1.2rem; display: grid; gap: 0.3rem; }
.composantes { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 1rem; }
.composante__tete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; }
.niveaux { display: flex; height: 0.75rem; border-radius: 999px; overflow: hidden; background: var(--bord); margin: 0.35rem 0; }
.niveaux__part { display: inline-block; min-width: 0.75rem; height: 0.75rem; }
.niveaux__part--tres_bonne { background: var(--succes); }
.niveaux__part--satisfaisante { background: #6aa884; }
.niveaux__part--fragile { background: var(--or-clair); }
.niveaux__part--insuffisante { background: var(--danger); }
.legende-niveaux { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; font-size: 0.85rem; }
.legende-niveaux .niveaux__part { border-radius: 3px; min-width: 0.75rem; width: 0.75rem; }
/* Sujets type brevet */
.liste-sujets { list-style: none; padding: 0; display: grid; gap: 1rem; }
.chrono { margin-bottom: 0.75rem; }
.probleme { border-top: 1px solid var(--bord); padding-top: 1rem; margin-top: 1rem; }
.probleme .enonce { white-space: normal; }
.probleme .figure svg { width: 100%; max-width: 360px; height: auto; color: var(--marine); }
.corrige summary { cursor: pointer; color: var(--marine-3); font-weight: 600; }
.corrige p { background: var(--or-pale); border-radius: var(--rayon); padding: 0.5rem 0.75rem; }

/* Mode sombre (V7) : suit le réglage du téléphone ou de l'ordinateur, sauf choix contraire
   dans le menu du compte (attribut data-theme posé par static/js/theme.js). Les boutons marine
   deviennent clairs à texte foncé ; le logo garde un fond blanc pour rester lisible. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --creme: #0c1426; --blanc: #152039; --texte: #e6ebf5; --gris: #a5b0c8; --bord: #2a3756; --bord-fort: #4a5878;
    --marine: #dce6ff; --marine-2: #c4d3fb; --marine-3: #8fb4ff;
    --or-pale: #3a3015; --or-texte: #f0c060; --or: #e0a326;
    --succes: #5fd39a; --succes-pale: #16382a; --danger: #ff8a80; --danger-pale: #3d1c1c;
    --fond-pied: #060d1c; --fond-doux: #1d2a46; --echange-eleve: #2d2817;
    --bulle-moyenne: #3a3015; --bulle-moyenne-texte: #f5cf6b; --bulle-basse: #3d1c1c; --bulle-basse-texte: #ff9d8f;
    --n-rouge: #ff9d8f; --n-rouge-pale: #3d1c1c; --n-orange: #ffb865; --n-orange-pale: #3a2812;
  --n-bleu: #9fc0ff; --n-bleu-pale: #1d2a46; --n-vert: #5fd39a; --n-vert-pale: #16382a;
  --ombre: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.25);
  }
  :root:not([data-theme="light"]) .en-tete__logo img { background: #ffffff; border-radius: 10px; padding: 2px 6px; }
  :root:not([data-theme="light"]) .coche[aria-pressed="true"]::after { border-color: #0c1426; }
  :root:not([data-theme="light"]) input, :root:not([data-theme="light"]) select, :root:not([data-theme="light"]) textarea { background: var(--creme); color: var(--texte); }
  :root:not([data-theme="light"]) .manuel__page, :root:not([data-theme="light"]) .loupe__defilement img { filter: brightness(0.92); }
}
/* Choix fait dans le menu du compte (« Sombre ») : mêmes réglages, quel que soit l'appareil. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --creme: #0c1426; --blanc: #152039; --texte: #e6ebf5; --gris: #a5b0c8; --bord: #2a3756; --bord-fort: #4a5878;
  --marine: #dce6ff; --marine-2: #c4d3fb; --marine-3: #8fb4ff;
  --or-pale: #3a3015; --or-texte: #f0c060; --or: #e0a326;
  --succes: #5fd39a; --succes-pale: #16382a; --danger: #ff8a80; --danger-pale: #3d1c1c;
  --fond-pied: #060d1c; --fond-doux: #1d2a46; --echange-eleve: #2d2817;
  --bulle-moyenne: #3a3015; --bulle-moyenne-texte: #f5cf6b; --bulle-basse: #3d1c1c; --bulle-basse-texte: #ff9d8f;
  --n-rouge: #ff9d8f; --n-rouge-pale: #3d1c1c; --n-orange: #ffb865; --n-orange-pale: #3a2812;
  --n-bleu: #9fc0ff; --n-bleu-pale: #1d2a46; --n-vert: #5fd39a; --n-vert-pale: #16382a;
  --ombre: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.25);
}
:root[data-theme="dark"] .en-tete__logo img { background: #ffffff; border-radius: 10px; padding: 2px 6px; }
:root[data-theme="dark"] .coche[aria-pressed="true"]::after { border-color: #0c1426; }
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background: var(--creme); color: var(--texte); }
:root[data-theme="dark"] .manuel__page, :root[data-theme="dark"] .loupe__defilement img { filter: brightness(0.92); }
:root[data-theme="light"] { color-scheme: light; }

/* Bandeau d'accueil de l'élève (V5) : marine, cercle d'or comme la toque du logo. */
.bandeau-accueil {
  position: relative; overflow: hidden; border-radius: var(--rayon); margin: 0 0 1rem;
  padding: 1.3rem 1.25rem 1.4rem; color: #ffffff;
  background: radial-gradient(120% 120% at 100% 0%, #1d4a8c 0%, #0b2347 55%, #071731 100%);
}
.bandeau-accueil::after {
  content: ""; position: absolute; right: -2.2rem; top: -2.2rem; width: 9rem; height: 9rem; border-radius: 50%;
  border: 1.1rem solid rgba(233, 185, 73, 0.2); pointer-events: none;
}
.bandeau-accueil h1 { color: #ffffff; margin: 0; }
.bandeau-accueil .discret { color: #c9d4ea; }
.bandeau-accueil .serie { background: rgba(233, 185, 73, 0.2); color: #ffd772; }
.bandeau-accueil .titre-accueil { margin: 0; position: relative; z-index: 1; }

/* Transitions douces (V13) : changement de page en fondu là où le navigateur le permet,
   contenu ajouté par HTMX qui apparaît, cartes cliquables qui se soulèvent. */
@view-transition { navigation: auto; }
.htmx-added { animation: apparait 0.25s ease; }
@keyframes apparait { from { opacity: 0; transform: translateY(4px); } }
a.carte, .cartes-controles li, .matiere-programme { transition: transform 0.15s, box-shadow 0.15s; }
a.carte:hover, .cartes-controles li:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(2, 27, 57, 0.12); }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* Pages vides illustrées par le hibou d'AYSI (V9, V10). */
.vide-illustre { display: flex; align-items: center; gap: 1rem; padding: 0.4rem 0; }
.vide-illustre .vide { margin: 0; flex: 1; }
.hibou { flex: none; }
.hibou--bravo { animation: sautille 0.9s ease 2; }
@keyframes sautille { 50% { transform: translateY(-6px); } }
@media (max-width: 30rem) { .vide-illustre .hibou { width: 64px; height: 64px; } }

/* Badges d'effort (V15). */
.lien-badges { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.75rem; border-radius: 99px; background: rgba(255, 255, 255, 0.12); color: #ffffff; font-weight: 700; font-size: 0.88rem; text-decoration: none; }
.lien-badges:hover { background: rgba(255, 255, 255, 0.22); color: #ffffff; }
.badges { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.badge { display: flex; gap: 0.9rem; align-items: flex-start; background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 0.9rem 1rem; }
.badge__medaille { flex: none; width: 3.2rem; height: 3.2rem; border-radius: 50%; display: grid; place-items: center; background: var(--fond-doux); color: var(--gris); }
.badge--gagne .badge__medaille { background: linear-gradient(145deg, #ffd772, #e0a326); color: #3a2600; box-shadow: 0 4px 12px rgba(224, 163, 38, 0.35); }
.badge--bronze .badge__medaille { background: linear-gradient(145deg, #e8b88a, #b8743a); color: #3a1d00; box-shadow: 0 4px 12px rgba(184, 116, 58, 0.35); }
.badge--argent .badge__medaille { background: linear-gradient(145deg, #eef1f5, #a9b3c1); color: #26303d; box-shadow: 0 4px 12px rgba(120, 135, 155, 0.35); }
.badge__palier { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gris); margin-left: 0.3rem; }
.badge__texte { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; }
.badge__texte strong { font-family: var(--police-titre); font-weight: 600; color: var(--marine); }
.badge__progres { display: block; height: 0.45rem; border-radius: 99px; background: var(--fond-doux); overflow: hidden; margin-top: 0.35rem; }
.badge__progres span { display: block; height: 100%; background: var(--or); border-radius: 99px; }
.badge__compte { font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.badge__gagne { color: var(--or-texte); font-weight: 800; font-size: 0.88rem; }

/* Quiz plus joueur (V16) : barre d'avancée qui colle en haut, étoiles à la fin. */
.progres-quiz { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0; background: var(--blanc); }
.progres-quiz__barre { flex: 1; height: 0.55rem; border-radius: 99px; background: var(--fond-doux); overflow: hidden; }
.progres-quiz__barre span { display: block; height: 100%; width: 0; background: var(--or); border-radius: 99px; transition: width 0.3s ease; }
.fin-quiz { text-align: center; margin: 0.5rem 0 1rem; }
.etoiles { display: flex; justify-content: center; gap: 0.4rem; margin: 0 0 0.4rem; }
.etoile svg { fill: var(--fond-doux); stroke: var(--bord-fort); stroke-width: 1; }
.etoile--pleine svg { fill: var(--or); stroke: var(--or); }
.etoile--pleine { animation: etoile-apparait 0.45s ease-out backwards; animation-delay: calc(var(--rang) * 0.18s); }
@keyframes etoile-apparait { from { transform: scale(0.2) rotate(-40deg); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .etoile--pleine { animation: none; } .progres-quiz__barre span { transition: none; } }

.filtres-notes { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: end; margin-bottom: 1rem; }
.filtres-notes label { display: grid; gap: 0.2rem; font-size: 0.9rem; }
/* Simulations PhET */
.liste-simulations { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.simulation { position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: 80vh; background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon); overflow: hidden; }
.simulation iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.devoir__cours { display: inline-block; margin-top: 0.2rem; font-size: 0.9rem; }
.professeur-matiere { display: block; font-size: 0.82rem; }
.devoir__prof { display: block; font-size: 0.85rem; }
.devoir__pieces { margin: 0.2rem 0 0; font-size: 0.9rem; }
.devoir__corrige { margin-top: 0.3rem; font-size: 0.9rem; }

/* Infos du collège (vie scolaire) */
.infos-college { list-style: none; padding: 0; margin: 0; }
.infos-college li { padding: .6rem 0; border-bottom: 1px solid var(--bord); }
.infos-college li:last-child { border-bottom: 0; }
.infos-college .discret { display: block; }

@media print {
  .en-tete, .pied, .onglets, .actions, .navigation-basse, .messages, form button { display: none !important; }
  .rendez-vous { display: block; }
  .rendez-vous > .carte { break-inside: avoid; box-shadow: none; margin-bottom: 1rem; }
  textarea { border: 1px solid #999; }
}
/* Vie scolaire plus vivante : bilan encourageant, compteurs illustrés, frise par mois. */
.filtres-niveau button { padding: 0.25rem 0.7rem; border: 1px solid currentColor; border-radius: 999px; background: none; color: var(--marine); font: inherit; font-size: 0.9rem; cursor: pointer; }
.filtres-niveau button[aria-pressed="true"] { background: var(--marine); color: var(--blanc); border-color: var(--marine); }
.pastille-evenement { display: inline-grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 12px; }
.ev-absence { background: color-mix(in srgb, #2f6fde 14%, var(--blanc)); color: #2f6fde; }
.ev-retard { background: var(--or-pale); color: var(--or-texte); }
.ev-punition { background: var(--danger-pale); color: var(--danger); }
.bilan-vie { display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1.1rem; margin-bottom: 1rem; border-radius: var(--rayon); background: var(--or-pale); }
.bilan-vie--bravo { background: var(--succes-pale); }
.bilan-vie p { margin: 0; }
.bilan-vie .hibou { flex: none; }
.compteur { position: relative; }
.compteur .pastille-evenement { margin-bottom: 0.3rem; }
.compteur--zero .pastille-evenement { background: var(--succes-pale); color: var(--succes); }
.compteur--zero strong { color: var(--succes); }
.mois-vie { font-size: 1rem; margin: 1.2rem 0 0.4rem; color: var(--gris); }
.mois-vie:first-of-type { margin-top: 0.4rem; }
.frise-vie { list-style: none; margin: 0; padding: 0 0 0 1.25rem; border-left: 2px dashed var(--bord); margin-left: 1.25rem; }
.evenement { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 0.6rem -2.5rem; padding: 0.4rem 0; }
.evenement__texte { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.etiquette { flex: none; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; }
.etiquette--ok { background: var(--succes-pale); color: var(--succes); }
.etiquette--alerte { background: var(--danger-pale); color: var(--danger); }

/* Synthèse plus vivante : jauge de la moyenne, tuiles, podium, barres par matière. */
.synthese-une {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  padding: 1.2rem 1.25rem; margin-bottom: 1rem; border-radius: var(--rayon); color: #ffffff;
  background: radial-gradient(120% 120% at 100% 0%, #1d4a8c 0%, #0b2347 55%, #071731 100%);
}
.synthese-une p { margin: 0.2rem 0; }
.synthese-une__titre { font-family: var(--police-titre); font-size: 1.35rem; font-weight: 600; }
.synthese-une__mot { color: #ffd772; font-weight: 700; }
.jauge-moyenne { position: relative; width: 132px; height: 132px; flex: none; --jauge-teinte: #e9b949; }
.jauge-moyenne--moyenne--haute { --jauge-teinte: #5fd39a; }
.jauge-moyenne--moyenne--basse { --jauge-teinte: #ff8a80; }
.jauge-moyenne svg { transform: rotate(-90deg); }
.jauge-moyenne circle { fill: none; stroke-width: 9; }
.jauge-moyenne__fond { stroke: rgba(255, 255, 255, 0.15); }
.jauge-moyenne__valeur { stroke: var(--jauge-teinte); stroke-linecap: round; animation: jauge-remplit 0.9s ease-out; }
@keyframes jauge-remplit { from { stroke-dasharray: 0 264; } }
.jauge-moyenne__texte { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.jauge-moyenne__texte strong { font-family: var(--police-titre); font-size: 1.9rem; line-height: 1; }
.jauge-moyenne__texte span { font-size: 0.8rem; color: #c9d4ea; }
.evolution { display: inline-block; padding: 0.05rem 0.5rem; border-radius: 999px; font-weight: 700; font-size: 0.9rem; background: rgba(255, 255, 255, 0.12); }
.evolution--hausse { background: var(--succes-pale); color: var(--succes); }
.evolution--baisse { background: var(--danger-pale); color: var(--danger); }
.synthese-tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.tuile { min-width: 0; overflow: hidden; display: flex; flex-direction: column; gap: 0.15rem; padding: 0.9rem; background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); }
.tuile .pastille-evenement { margin-bottom: 0.3rem; }
.tuile strong { font-family: var(--police-titre); font-size: 1.6rem; color: var(--marine); }
.tuile > span:not(.pastille-evenement):not(.barre-mini) { color: var(--gris); font-size: 0.88rem; }
.ev-devoirs { background: var(--succes-pale); color: var(--succes); }
.barre-mini, .barre-matiere { position: relative; display: block; height: 0.5rem; border-radius: 99px; background: var(--fond-doux); overflow: hidden; margin-top: 0.35rem; }
.barre-mini span { display: block; height: 100%; background: var(--succes); border-radius: 99px; }
.barre-matiere span { display: block; height: 100%; background: var(--c); border-radius: 99px; animation: barre-pousse 0.7s ease-out; transform-origin: left; }
.barre-matiere i { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--blanc); opacity: 0.8; }
@keyframes barre-pousse { from { transform: scaleX(0); } }
.synthese-podium { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.podium { padding: 0.9rem 1rem; background: var(--blanc); border: 1px solid var(--bord); border-top: 4px solid var(--or); border-radius: var(--rayon); box-shadow: var(--ombre); }
.podium--soutenir { border-top-color: var(--marine-3); }
.podium h2 { font-size: 1.1rem; margin: 0 0 0.6rem; }
.podium ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.podium li { display: flex; align-items: center; gap: 0.55rem; }
.podium__nom { flex: 1; min-width: 0; font-weight: 700; }
.podium .pastille-matiere { width: 1.9rem; height: 1.9rem; border-radius: 9px; }
.medaille { display: inline-grid; place-items: center; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; font-weight: 800; font-size: 0.85rem; color: #ffffff; }
.medaille--1 { background: linear-gradient(135deg, #f5cf6b, #c98a0c); }
.medaille--2 { background: linear-gradient(135deg, #dfe4ec, #8d97a8); }
.medaille--3 { background: linear-gradient(135deg, #e7b38a, #a8622c); }
.medaille--fusee { background: color-mix(in srgb, #2f6fde 16%, var(--blanc)); color: #2f6fde; }
.synthese-sous-titre { font-size: 1.15rem; margin: 1.25rem 0 0.6rem; }
.barres-matieres { list-style: none; margin: 0; padding: 0.4rem 1rem; display: grid; background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); }
.barres-matieres li { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.7rem 0; border-bottom: 1px solid var(--bord); }
.barres-matieres li:last-child { border-bottom: 0; }
.barres-matieres__corps { flex: 1; min-width: 0; }
.barres-matieres__tete { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.barres-matieres__nom { font-weight: 700; min-width: 0; }
.barres-matieres__nom .discret { font-weight: 400; font-size: 0.82rem; }
.barres-matieres__valeur { display: flex; align-items: center; gap: 0.35rem; flex: none; }
.barres-matieres__valeur .evolution { padding: 0 0.35rem; font-size: 0.75rem; }
.barres-matieres__avant { font-size: 0.78rem; }
@media (max-width: 40rem) { .synthese-tuiles { gap: 0.4rem; } .jauge-moyenne { width: 108px; height: 108px; } .jauge-moyenne svg { width: 100%; height: 100%; } .jauge-moyenne__texte strong { font-size: 1.6rem; } .synthese-une { gap: 0.9rem; padding: 1rem; } .synthese-une__texte { flex: 1 1 8rem; min-width: 0; } .synthese-une__titre { font-size: 1.15rem; } .tuile { padding: 0.7rem; } .tuile strong { font-size: 1.3rem; } }
@media (prefers-reduced-motion: reduce) { .jauge-moyenne__valeur, .barre-matiere span { animation: none; } }

/* Charge des prochains jours : une ligne par jour, lisible en clair comme en sombre. */
.charge { list-style: none; margin: 0.2rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.charge__jour { display: grid; grid-template-columns: 3.6rem minmax(3rem, 1fr) auto; align-items: center; gap: 0.6rem; }
.charge__date { font-size: 0.92rem; color: var(--gris); white-space: nowrap; }
.charge__date strong { color: var(--texte); }
.charge__piste { display: block; height: 0.7rem; border-radius: 99px; background: var(--fond-doux); overflow: hidden; }
.charge__piste span { display: block; height: 100%; border-radius: 99px; background: #4f86e8; }
.charge__jour--moyen .charge__piste span { background: var(--or); }
.charge__jour--lourd .charge__piste span { background: #e0603a; }
.charge__detail { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem; font-size: 0.85rem; }
.charge__pastille { padding: 0.05rem 0.5rem; border-radius: 999px; font-weight: 700; white-space: nowrap; }
.charge__pastille--devoir { background: color-mix(in srgb, #4f86e8 16%, var(--blanc)); color: color-mix(in srgb, #4f86e8 70%, var(--texte)); }
.charge__pastille--controle { background: var(--or-pale); color: var(--or-texte); }
.charge__legende { font-size: 0.8rem; margin: 0.6rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.7rem; }
.charge__cle { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.charge__point { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; }
.charge__point--leger { background: #4f86e8; } .charge__point--moyen { background: var(--or); } .charge__point--lourd { background: #e0603a; }
/* Textes de français (Wikisource) */
.liste-textes { padding-left: 1.2rem; display: grid; gap: 0.35rem; }
.texte-litteraire__auteur { margin-top: -0.5rem; color: var(--gris); }
.texte-litteraire { font-family: Georgia, "Times New Roman", serif; font-size: 1.08rem; line-height: 1.7; max-width: 42rem; }
.texte-litteraire--poeme p { margin: 0 0 1.1rem; }
.texte-litteraire--prose p { margin: 0 0 1rem; text-align: justify; hyphens: auto; }

/* Choix de période : « Toute l'année », trimestres et semestres en segments, le reste replié. */
.choix-periode { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem 1rem; margin: 0 0 1rem; }
.choix-periode a { text-decoration: none; color: var(--marine); }
.choix-periode__annee {
  display: inline-flex; align-items: center; min-height: 2.4rem; padding: 0 1rem; border-radius: 999px;
  border: 1px solid var(--bord-fort); background: var(--blanc); font-weight: 700;
}
.choix-periode__annee[aria-current="page"] { background: var(--marine); color: var(--blanc); border-color: var(--marine); }
.choix-periode__groupe { display: flex; flex-direction: column; gap: 0.2rem; }
.choix-periode__titre { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--gris); padding-left: 0.4rem; }
.choix-periode__segments { display: inline-flex; padding: 0.2rem; gap: 0.2rem; border-radius: 999px; background: var(--fond-doux); border: 1px solid var(--bord); }
.choix-periode__segments a {
  position: relative; display: inline-grid; place-items: center; min-width: 2.9rem; min-height: 2rem; padding: 0 0.75rem;
  border-radius: 999px; font-family: var(--police-titre); font-weight: 600; transition: background 0.15s;
}
.choix-periode__segments a:hover { background: var(--blanc); }
.choix-periode__segments a[aria-current="page"] { background: var(--or); color: #ffffff; box-shadow: 0 2px 6px rgba(201, 138, 12, 0.35); }
.choix-periode__en-cours { position: absolute; top: 0.2rem; right: 0.3rem; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--succes); box-shadow: 0 0 0 2px var(--fond-doux); }
.choix-periode__autres { position: relative; }
.choix-periode__autres summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.4rem; padding: 0 0.9rem;
  border-radius: 999px; border: 1px dashed var(--bord-fort); color: var(--gris); font-size: 0.9rem;
}
.choix-periode__autres summary::-webkit-details-marker { display: none; }
.choix-periode__autres[data-choisie] summary { border-style: solid; border-color: var(--or); background: var(--or-pale); color: var(--marine); font-weight: 700; }
.choix-periode__autres ul {
  position: absolute; z-index: 5; top: calc(100% + 0.3rem); left: 0; min-width: 15rem; white-space: nowrap; margin: 0; padding: 0.35rem; list-style: none;
  background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre);
}
.choix-periode__autres li a { display: block; padding: 0.45rem 0.7rem; border-radius: 8px; }
.choix-periode__autres li a:hover { background: var(--fond-doux); }
.choix-periode__autres li a[aria-current="page"] { background: var(--or-pale); font-weight: 700; }

/* Cours de la semaine : bandeau des jours, une carte colorée par cours. */
.semaine-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0 0 0.8rem; }
.semaine-tete .semaine-nav { margin: 0; flex: 1; min-width: 16rem; padding: 0.35rem; border-radius: 999px; background: var(--blanc); border: 1px solid var(--bord); box-shadow: var(--ombre); }
.semaine-nav__fleche { display: grid; place-items: center; flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--fond-doux); color: var(--marine); text-decoration: none; font-size: 1.1rem; }
.semaine-nav__fleche:hover { background: var(--or-pale); }
.semaine-nav__titre { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.2; }
.semaine-nav__titre .discret { font-family: var(--police-texte, inherit); font-weight: 400; font-size: 0.82rem; }
.semaine-nav__retour { font-size: 0.9rem; font-weight: 700; }
.bandeau-jours { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.45rem; margin: 0 0 1.1rem; }
.bandeau-jours__jour {
  display: flex; flex-direction: column; align-items: center; gap: 0.05rem; padding: 0.5rem 0.2rem; border-radius: var(--rayon);
  background: var(--blanc); border: 1px solid var(--bord); text-decoration: none; color: var(--marine);
}
.bandeau-jours__jour strong { font-family: var(--police-titre); font-size: 1.35rem; line-height: 1.1; }
.bandeau-jours__nom, .bandeau-jours__nombre { font-size: 0.75rem; color: var(--gris); }
.bandeau-jours__jour--aujourdhui { background: var(--or); border-color: var(--or); color: #ffffff; }
.bandeau-jours__jour--aujourdhui span { color: #fff7e0; }
.bandeau-jours__jour--vide { opacity: 0.55; }
.jour-cours { margin: 0 0 1.2rem; scroll-margin-top: 1rem; }
.jour-cours h2 { font-size: 1.1rem; margin: 0 0 0.55rem; display: flex; align-items: center; gap: 0.5rem; }
.jour-cours__aujourdhui { padding: 0.1rem 0.6rem; border-radius: 999px; background: var(--or-pale); color: var(--or-texte); font-size: 0.8rem; }
.cartes-seances { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.carte-seance {
  padding: 0.8rem 0.95rem; border-radius: var(--rayon); background: var(--blanc); border: 1px solid var(--bord);
  border-left: 5px solid var(--c); box-shadow: var(--ombre); scroll-margin-top: 1rem;
}
.carte-seance:target { outline: 3px solid var(--or); }
.carte-seance__tete { display: flex; align-items: center; gap: 0.65rem; }
.carte-seance__titres { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.carte-seance__matiere { font-size: 0.8rem; font-weight: 700; color: var(--c); text-transform: uppercase; letter-spacing: 0.03em; }
.carte-seance__titres strong { line-height: 1.3; }
.carte-seance__heure { flex: none; align-self: flex-start; padding: 0.1rem 0.55rem; border-radius: 999px; background: var(--fond-doux); font-size: 0.85rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.carte-seance__infos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0.5rem 0 0; font-size: 0.88rem; }
.etiquette:not(.etiquette--ok):not(.etiquette--alerte) { background: var(--fond-doux); color: var(--marine); }
.etiquette--ds { background: var(--or-pale) !important; color: var(--or-texte) !important; }
.carte-seance__contenu { margin: 0.55rem 0 0; padding-top: 0.55rem; border-top: 1px dashed var(--bord); overflow-wrap: anywhere; }
.carte-seance--annulee { opacity: 0.6; }
.carte-seance--annulee .carte-seance__titres strong { text-decoration: line-through; }
.pieces { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.6rem 0 0; padding: 0; }
.pieces a, .pieces span { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.65rem; border-radius: 999px; background: var(--fond-doux); font-size: 0.85rem; text-decoration: none; color: var(--marine); }
.pieces a:hover { background: var(--or-pale); }

/* Cours : une colonne par jour sur grand écran, changement de semaine en fondu. */
.semaine-contenu { animation: semaine-entree 0.25s ease both; }
@keyframes semaine-entree { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.semaine-contenu.htmx-swapping { opacity: 0; transition: opacity 0.12s ease; }
.semaine-grille { display: block; }
.carte-seance, .bandeau-jours__jour { transition: box-shadow 0.15s ease, transform 0.15s ease; }
.carte-seance:hover { transform: translateY(-1px); }
@media (min-width: 64rem) {
  .bandeau-jours { display: none; }
  .semaine-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 0 0.6rem; align-items: start; }
  .semaine-grille .jour-cours { min-width: 0; margin: 0; padding: 0.6rem; border-radius: var(--rayon); background: var(--fond-doux); }
  .semaine-grille .jour-cours h2 { font-size: 1rem; flex-wrap: wrap; }
  .semaine-grille .carte-seance { padding: 0.55rem 0.6rem; }
  .semaine-grille .carte-seance__tete > :first-child:not(.carte-seance__titres) { display: none; }
  .semaine-grille .carte-seance { min-width: 0; }
  .semaine-grille .carte-seance__titres strong { font-size: 0.95rem; }
  .semaine-grille .carte-seance__contenu { font-size: 0.9rem; }
  .semaine-tete .semaine-nav { max-width: 36rem; }
}
@media (prefers-reduced-motion: reduce) { .semaine-contenu { animation: none; } .carte-seance:hover { transform: none; } }

/* Choix du thème dans le menu du compte. */
.menu-theme { border: 0; margin: 0.3rem 0; padding: 0.4rem 0 0; border-top: 1px solid var(--bord); }
.menu-theme legend { font-size: 0.8rem; color: var(--gris); padding: 0; margin-bottom: 0.3rem; }
.menu-theme__choix { display: flex; gap: 0.25rem; padding: 0.2rem; border-radius: 999px; background: var(--fond-doux); }
.menu-theme__choix button { flex: 1; padding: 0.3rem 0.5rem; border: 0; border-radius: 999px; background: none; color: var(--marine); font: inherit; font-size: 0.85rem; cursor: pointer; white-space: nowrap; }
.menu-theme__choix button[aria-pressed="true"] { background: var(--blanc); font-weight: 700; box-shadow: var(--ombre); }

/* Notes : courbe de la moyenne générale et influence de chaque note. */
.courbe-moyenne { display: block; width: 100%; max-width: 42rem; height: auto; color: var(--marine); }
.courbe-moyenne__axe { stroke: var(--bord); stroke-width: 1; stroke-dasharray: 3 3; }
.courbe-moyenne__etiquette { font-size: 9px; fill: currentColor; opacity: 0.7; }
.courbe-moyenne__segment { stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.courbe-moyenne__point { stroke: var(--blanc); stroke-width: 1.5; }
.courbe-moyenne--tres-haut { --c: #1f9d57; }
.courbe-moyenne--haut { --c: #74c996; }
.courbe-moyenne--proche { --c: #9aa4b5; }
.courbe-moyenne--bas { --c: #f0924f; }
.courbe-moyenne--tres-bas { --c: #e5484d; }
.courbe-moyenne--inconnu { --c: #6b7385; }
.courbe-moyenne__segment[class*="courbe-moyenne--"] { stroke: var(--c); }
.courbe-moyenne__point[class*="courbe-moyenne--"] { fill: var(--c); }
.courbe-legende { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; font-size: 0.85rem; margin: 0.5rem 0; color: var(--gris); }
.courbe-legende .legende-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.courbe-puce { display: inline-block; width: 0.9rem; height: 0.5rem; border-radius: 3px; background: var(--c); }
.courbe-moyenne circle:focus-visible { outline: 3px solid var(--or-clair); }
.influence { display: inline-flex; flex-direction: column; gap: 0.15rem; font-size: 0.85rem; color: var(--gris); text-align: left; }
.influence__ligne { display: flex; align-items: baseline; gap: 0.35rem; }
.influence__ligne strong { margin-left: auto; font-variant-numeric: tabular-nums; }
.influence__fleche::before { content: "="; color: var(--gris); font-weight: 700; }
.influence__ligne--hausse .influence__fleche::before { content: "▲"; color: var(--succes); }
.influence__ligne--baisse .influence__fleche::before { content: "▼"; color: var(--danger); }
.influence__ligne--hausse strong { color: var(--succes); }
.influence__ligne--baisse strong { color: var(--danger); }
.influence__ligne--classe { padding-top: 0.15rem; border-top: 1px dashed var(--bord); }
.influence__sous-titre { display: block; font-weight: 400; font-size: 0.75rem; }
.influence-cellule { min-width: 13rem; }
.moyenne-classe { color: var(--gris); }
.pastille-moyenne { display: inline-block; margin-left: 0.4rem; padding: 0.1rem 0.6rem; border-radius: 999px; font-size: 0.8rem; font-weight: 800; text-transform: none; letter-spacing: 0; vertical-align: baseline; color: #ffffff; background: #e0a326; }
.pastille-moyenne.moyenne--haute { background: #2bb673; }
.pastille-moyenne.moyenne--basse { background: #e0603a; }
.pastille-moyenne.moyenne--milieu { color: #3b2a00; }
.carte-seance__matiere a { color: inherit; text-decoration: none; }
.carte-seance__matiere a:hover, .carte-seance__matiere a:focus-visible { text-decoration: underline; }
.liste-notes .influence { grid-column: 1 / -1; }
.liste-ressources { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.liste-ressources li { margin: 0.35rem 0; }
.reponses dt { font-weight: 600; margin-top: 0.6rem; }
.reponses dd { margin: 0.1rem 0 0; }

/* Emploi du temps : un jour ou la semaine, avec les pauses. */
.edt-prochain { margin: 0 0 0.8rem; padding: 0.5rem 0.9rem; border-radius: var(--rayon, 12px); background: var(--or-pale); }
.edt { display: grid; gap: 1rem; }
.edt-jour h2 { font-size: 1.05rem; margin: 0 0 0.5rem; }
.edt-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.edt-cours { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.2rem 0.8rem; padding: 0.55rem 0.8rem; border-radius: 12px; background: var(--blanc); border: 1px solid var(--bord); border-left: 5px solid var(--c, var(--or)); }
.edt-cours__heure { font-variant-numeric: tabular-nums; color: var(--gris); font-size: 0.9rem; white-space: nowrap; }
.edt-cours__corps { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.edt-cours__matiere { display: flex; align-items: center; gap: 0.4rem; }
.edt-cours__etiquettes { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.2rem; }
.edt-cours--annule .edt-cours__matiere { text-decoration: line-through; opacity: 0.65; }
.edt-pause { text-align: center; font-size: 0.8rem; color: var(--gris); padding: 0.1rem 0; }
.pastille--danger { background: var(--danger-pale); color: var(--danger); }
@media (min-width: 64rem) {
  .edt--semaine { grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; }
  .edt--semaine .edt-cours { grid-template-columns: 1fr; }
}
.charge__ajout { margin-top: 0.6rem; }
.en-ligne { display: inline; }

/* Confort de lecture (idée 11) : réglages choisis par l'élève ou son parent. */
.confort-lettres { letter-spacing: 0.06em; word-spacing: 0.16em; }
.confort-interligne { line-height: 1.9; }
.confort-interligne p, .confort-interligne li { line-height: 1.9; }
.confort-grand { font-size: 1.15rem; }
.confort-fond { background: #fbf3dc; --fond-doux: #f4e9c8; }
.confort-fond .carte { background: #fffaf0; }
.confort-fixe *, .confort-fixe *::before, .confort-fixe *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.confort-sobre .hibou, .confort-sobre .bravo, .confort-sobre .confettis { display: none; }
.confort-sobre .vide-illustre { gap: 0; }
/* Écran « Aujourd'hui » (idée 28) : bandeau, deux colonnes, rangée du bas */
.bandeau-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 0.8rem; margin-bottom: 1rem; }
.mini-carte { border: 1px solid var(--bordure, #d9dee8); border-radius: 0.8rem; padding: 0.7rem 0.9rem; background: var(--blanc); }
.mini-carte h3 { font-size: 0.95rem; margin: 0 0 0.2rem; color: var(--marine); }
.mini-carte p { margin: 0.1rem 0; }
.mini-carte__valeur { font-size: 1.25rem; font-weight: 700; }
.mini-carte a { font-size: 0.9rem; font-weight: 600; }
.ecran { display: grid; gap: 1rem; }
.ecran__zone { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.ecran__colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
@media (max-width: 52rem) { .ecran__colonnes { grid-template-columns: 1fr; } }
.charge__jour--cliquable { display: block; }
.charge__bouton { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 3.6rem minmax(3rem, 1fr) auto; align-items: center; gap: 0.6rem; width: 100%; cursor: pointer; border-radius: 0.5rem; padding: 0.15rem 0.2rem; }
.charge__bouton:hover, .charge__bouton:focus-visible { background: var(--fond-doux); outline: 2px solid transparent; }
.cours-jour__titre { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.cours-jour__titre h3 { margin: 0; font-size: 1.1rem; color: var(--marine); }
.cours-jour__fleche { all: unset; cursor: pointer; font-size: 1.4rem; line-height: 1; padding: 0.1rem 0.6rem; border-radius: 0.5rem; }
.cours-jour__fleche:hover, .cours-jour__fleche:focus-visible { background: var(--fond-doux); }
.cours-jour__liste { list-style: none; padding: 0; margin: 0.5rem 0 0; display: grid; gap: 0.3rem; }
.cours-jour__liste li { display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; }
.cours-jour__heure { font-variant-numeric: tabular-nums; color: var(--gris); min-width: 3.2rem; }
.cours-jour__annule .cours-jour__matiere { text-decoration: line-through; color: var(--gris); }
.objectifs-accueil__ajout { margin-top: 0.5rem; }
.objectifs-accueil__ajout summary { cursor: pointer; font-weight: 600; color: var(--marine); }
.objectifs-accueil__ajout form { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: end; margin-top: 0.5rem; }
.objectifs-accueil__ajout label { display: grid; gap: 0.2rem; font-size: 0.9rem; }

/* Écran « Aujourd'hui » : en-tête de l'enfant, tableau de bord en anneaux et courbe, cartes animées. */
.enfant-accueil { display: grid; gap: 1.1rem; margin-bottom: 1.6rem; }
.enfant-accueil__entete { display: flex; align-items: center; gap: 0.8rem; }
.enfant-accueil__entete h2 { margin: 0; font-size: 1.3rem; color: var(--marine); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.enfant-accueil__classe { font-size: 0.8rem; font-weight: 700; background: var(--or-pale); color: var(--or-texte); padding: 0.1rem 0.6rem; border-radius: 999px; }
.enfant-accueil__etablissement { font-size: 0.85rem; font-weight: 500; color: var(--gris); min-width: 0; overflow-wrap: anywhere; }
.enfant-accueil__identite { margin: 0.2rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; }
.enfant-accueil__entete .resume-enfant { margin: 0.1rem 0 0; color: var(--gris); }
.avatar--petit { width: 2.4rem; height: 2.4rem; font-size: 1.1rem; box-shadow: none; vertical-align: middle; display: inline-grid; }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.avatar { flex: none; overflow: hidden; width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--police-titre); font-size: 1.4rem; font-weight: 600; color: #0b2347; background: linear-gradient(135deg, #f5d27a, #c98a0c); box-shadow: 0 0 0 3px rgba(245, 210, 122, 0.35); }

.tuile { background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 1rem 1.1rem; display: grid; gap: 0.7rem; align-content: start; box-shadow: var(--ombre); min-width: 0; }
.tuile__entete { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.tuile__entete h3 { margin: 0; font-size: 1rem; color: var(--marine); }
.tuile__entete a { font-size: 0.85rem; font-weight: 700; text-decoration: none; color: var(--marine-3); }
.tuile__entete a:hover { text-decoration: underline; }
.tuile__corps { display: flex; align-items: center; gap: 1rem; }
.tuile__texte { display: grid; gap: 0.3rem; min-width: 0; }
.tuile__texte p { margin: 0; }
.tuile__ligne { display: flex; align-items: center; gap: 0.4rem; }

.anneau { flex: none; width: 7.5rem; height: 7.5rem; --teinte: #4f86e8; }
.anneau--moyenne--haute { --teinte: #2bb673; } .anneau--moyenne--basse { --teinte: #e0603a; } .anneau--moyenne--milieu { --teinte: #e0a326; }
.anneau circle { fill: none; stroke-width: 12; }
.anneau__fond { stroke: var(--fond-doux); }
.anneau__trait { stroke: var(--teinte); stroke-linecap: round; }
.anneau__classe { fill: var(--blanc); stroke: var(--marine); stroke-width: 3 !important; }
.anneau__valeur { text-anchor: middle; font-family: var(--police-titre); font-size: 26px; font-weight: 600; fill: var(--marine); }
.anneau__sur { text-anchor: middle; font-size: 11px; fill: var(--gris); }
.anneau text { stroke: none; }
.point { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; }
.point--classe { background: var(--blanc); border: 2px solid var(--marine); }
.tendance { display: inline-block; justify-self: start; font-size: 0.85rem; font-weight: 700; padding: 0.15rem 0.6rem; border-radius: 999px; margin: 0; }
.tendance--hausse { background: var(--succes-pale); color: var(--succes); }
.tendance--baisse { background: var(--danger-pale); color: var(--danger); }
.tendance--stable { background: var(--fond-doux); color: var(--gris); }
.courbe-mini { width: 100%; height: 4.5rem; display: block; overflow: visible; }
.courbe-mini__aire { fill: color-mix(in srgb, var(--marine-3) 14%, transparent); stroke: none; }
.courbe-mini__trait { fill: none; stroke: var(--marine-3); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.courbe-mini__segment { stroke: var(--c); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.courbe-legende--mini { font-size: 0.78rem; margin: 0.2rem 0 0; }
.courbe-legende--mini .courbe-puce { width: 0.6rem; margin-right: 1px; }
.courbe-mini__legende { margin: -0.3rem 0 0; font-size: 0.82rem; }

.compteurs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.compteur { display: grid; justify-items: center; gap: 0.1rem; padding: 0.7rem 0.3rem; border-radius: 0.8rem; background: var(--fond-doux); font-size: 0.85rem; color: var(--gris); }
.compteur svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: var(--succes); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.compteur strong { font-family: var(--police-titre); font-size: 1.7rem; line-height: 1.1; color: var(--marine); font-variant-numeric: tabular-nums; }
.compteur--attention { background: var(--danger-pale); }
.compteur--attention svg { stroke: var(--danger); }
.compteur--attention strong { color: var(--danger); }

.ecran { display: grid; gap: 1rem; }
.ecran .bloc { background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 1rem 1.1rem; box-shadow: var(--ombre); }
.ecran .bloc h3, .ecran .cours-jour__titre h3, .ecran .objectifs-accueil h3 { font-size: 1.05rem; margin: 0 0 0.6rem; color: var(--marine); }

.charge-colonnes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.4rem; }
.charge-jour { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 0.35rem; justify-items: center; align-content: start; padding: 0.5rem 0.2rem 0.6rem; border-radius: 0.8rem; border: 2px solid transparent; min-width: 0; transition: background 0.15s, transform 0.15s; }
.charge-jour:hover { background: var(--fond-doux); transform: translateY(-2px); }
.charge-jour:focus-visible { outline: 3px solid var(--marine-3); outline-offset: 2px; }
.charge-jour[aria-pressed="true"] { border-color: var(--or); background: var(--or-pale); }
.charge-jour__nom { font-weight: 700; }
.charge-jour__date { font-size: 0.8rem; color: var(--gris); margin-top: -0.3rem; }
.charge-jour__piste { width: 2.4rem; height: 5.6rem; background: var(--fond-doux); border-radius: 0.6rem; display: flex; flex-direction: column-reverse; overflow: hidden; }
.charge-jour__devoirs { background: linear-gradient(0deg, #3b6fd8, #6f9bff); transform-origin: bottom; }
.charge-jour__controles { background: linear-gradient(0deg, #c98a0c, #f0b43c); transform-origin: bottom; }
/* Ce qui est fait : vert hachuré, pour ne pas dépendre de la seule couleur. */
.charge-jour__faits { background: repeating-linear-gradient(135deg, #2e9e62 0 5px, #6fcf97 5px 10px); transform-origin: bottom; opacity: 0.85; }
.charge__pastille--fait { background: color-mix(in srgb, #2e9e62 16%, var(--blanc)); color: color-mix(in srgb, #2e9e62 70%, var(--texte)); }
.charge__point--fait { background: repeating-linear-gradient(135deg, #2e9e62 0 2px, #6fcf97 2px 4px); }
.charge-jour__pastilles { display: grid; gap: 0.2rem; justify-items: center; font-size: 0.78rem; }
.charge__legende .discret:last-child { flex-basis: 100%; }

.cours-jour__titre { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.cours-jour__titre h3 { margin: 0 !important; }
.cours-jour__titre .navjour { display: flex; align-items: center; gap: 0.3rem; }
.cours-jour__titre .navjour strong { min-width: 7em; text-align: center; }
.cours-jour__fleche { width: 2rem; height: 2rem; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid var(--bord); }
.cours-jour__liste { gap: 0.4rem; }
.cours-jour__liste li { display: grid; grid-template-columns: 4.6em 1fr auto; gap: 0.6rem; align-items: baseline; padding: 0.5rem 0.65rem; border-radius: 0.5rem; background: var(--fond-doux); border-left: 4px solid var(--c, var(--marine-3)); }
.cours-jour__salle { color: var(--gris); font-size: 0.85rem; }
.cours-jour__note { color: var(--danger); font-weight: 700; font-size: 0.82rem; }
.cours-jour__annule .cours-jour__matiere { text-decoration: line-through; color: var(--gris); }
.cours-jour__annule .cours-jour__note { display: inline-block; text-decoration: none; }

.cartes-controles__dans { font-size: 0.78rem; font-weight: 700; color: var(--c); }
.bloc ul.lignes-notes li { display: grid; grid-template-columns: auto 1fr 4rem auto; }
.barre-note { display: block; height: 0.45rem; border-radius: 999px; background: var(--fond-doux); overflow: hidden; }
.barre-note > span { display: block; height: 100%; width: var(--part); border-radius: 999px; background: #e0a326; transform-origin: left; }
.barre-note--moyenne--haute > span { background: #2bb673; } .barre-note--moyenne--basse > span { background: #e0603a; }
.objectifs-jauges { list-style: none; padding: 0 !important; margin: 0; display: grid; gap: 0.6rem; }
.objectifs-jauges li { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 0.6rem; }
.objectifs-jauges__valeur { font-size: 0.85rem; color: var(--gris); }
.objectifs-jauges__barre { grid-column: 1 / -1; height: 0.55rem; border-radius: 999px; background: var(--fond-doux); overflow: hidden; }
.objectifs-jauges__barre > span { display: block; height: 100%; width: min(100%, var(--part)); background: var(--c, var(--marine-3)); border-radius: 999px; transform-origin: left; }
.bloc--savoir { display: grid; gap: 0.7rem; }
.savoir { padding: 0.55rem 0.75rem; border-radius: 0.6rem; background: var(--fond-doux); border-left: 4px solid var(--or); }
.savoir h4 { margin: 0 0 0.2rem; font-size: 0.9rem; color: var(--marine); }
.savoir ul { margin: 0; padding-left: 1.1rem; font-size: 0.92rem; }
.savoir__lien { font-size: 0.85rem; font-weight: 700; }
.savoir--retenues { border-left-color: var(--danger); }
.savoir--edt { border-left-color: #e0603a; }

@media (prefers-reduced-motion: no-preference) {
  .enfant-accueil__entete, .tuile, .ecran .bloc { animation: accueil-monte 0.5s cubic-bezier(.2, .8, .2, 1) backwards; }
  .ecran__zone > :nth-child(2) .tuile, .ecran__zone > :nth-child(2) .bloc { animation-delay: 0.08s; }
  .ecran__zone > :nth-child(3) .tuile, .ecran__zone > :nth-child(3) .bloc { animation-delay: 0.16s; }
  .ecran__zone > :nth-child(n+4) .tuile, .ecran__zone > :nth-child(n+4) .bloc { animation-delay: 0.24s; }
  .tuile, .ecran .bloc { transition: transform 0.2s, box-shadow 0.2s; }
  .tuile:hover, .ecran .bloc:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(2, 27, 57, 0.12); }
  .anneau__trait { animation: accueil-anneau 1.1s cubic-bezier(.2, .8, .2, 1) 0.2s both; }
  .anneau__classe { animation: accueil-pop 0.4s ease-out 1.1s both; transform-box: fill-box; transform-origin: center; }
  .courbe-mini__trait { stroke-dasharray: 100; animation: accueil-trace 1.4s ease-out 0.3s both; }
  .courbe-mini__segments { animation: accueil-fondu 0.8s ease-out 0.3s both; }
  .courbe-mini__aire { animation: accueil-fondu 0.8s ease-out 1s both; }
  .charge-jour__devoirs, .charge-jour__controles, .charge-jour__faits { animation: accueil-pousse 0.7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(0.3s + var(--rang, 0) * 0.08s); }
  .barre-note > span, .objectifs-jauges__barre > span { animation: accueil-etire 0.9s cubic-bezier(.2, .8, .2, 1) 0.5s both; }
  .compteur--attention svg { animation: accueil-pouls 2.4s ease-in-out 1s infinite; }
  .avatar { animation: accueil-pop 0.5s ease-out both; }
}
@keyframes accueil-monte { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes accueil-anneau { from { stroke-dasharray: 0 100; } to { stroke-dasharray: var(--jauge) 100; } }
@keyframes accueil-trace { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes accueil-fondu { from { opacity: 0; } to { opacity: 1; } }
@keyframes accueil-pop { from { transform: scale(0); } 70% { transform: scale(1.2); } to { transform: scale(1); } }
@keyframes accueil-pouls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@keyframes accueil-pousse { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes accueil-etire { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 40rem) { .anneau { width: 6rem; height: 6rem; } .charge-jour__piste { width: 1.6rem; } .enfant-accueil__entete { padding: 0; } .charge-colonnes { gap: 0.15rem; } .charge-jour__pastilles .charge__pastille { font-size: 0.68rem; padding: 0.05rem 0.3rem; white-space: normal; text-align: center; } .charge-jour { padding-inline: 0; } }
/* Tâches entre parent et enfant (idée 8) */
.taches { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.tache { display: flex; align-items: center; gap: 0.7rem; }
.tache__texte { flex: 1; display: grid; gap: 0.1rem; }
.tache--retard .tache__texte span { color: #c0392b; }
.tache--faite s { color: var(--gris); }
/* Menu du compte : les enfants listés par prénom. */
.menu-compte__titre { margin: 0.3rem 0 0.1rem; font-size: 0.8rem; color: var(--gris); }
.menu-compte__enfant { padding-left: 0.6rem; }
.fiche-enfant:target { outline: 3px solid var(--or); }
.menu-compte__gerer { font-size: 0.85rem; color: var(--gris); }

/* Cours : barre d'onglets de la rubrique, collée au haut de la page. */
.onglets--rubrique { margin-bottom: 0.6rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--bord); }
.onglets--rubrique a { font-weight: 700; }
/* Accueil : « À regarder » et « À savoir » côte à côte, en haut. */
.bloc--regarder { display: grid; gap: 0.6rem; }
.bloc--regarder .alerte { margin: 0; }

/* Notion : fil d'Ariane et notions voisines. */
.fil-ariane { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0 0 0.6rem; font-size: 0.9rem; color: var(--gris); }
.fil-ariane a { font-weight: 700; }
.fil-ariane [aria-current="page"] { color: var(--marine); font-weight: 700; }
.voisines { display: flex; justify-content: space-between; gap: 0.8rem; margin: 1.4rem 0 0.4rem; }
.voisines a { display: flex; flex-direction: column; max-width: 48%; padding: 0.6rem 0.9rem; border-radius: var(--rayon); background: var(--blanc); border: 1px solid var(--bord); text-decoration: none; color: var(--marine); box-shadow: var(--ombre); }
.voisines__suivante { text-align: right; margin-left: auto; }
.voisines a:hover { border-color: var(--or); }

/* Pages légales */
.texte-legal { max-width: 46rem; margin: 0 auto; }
.texte-legal h2 { margin-top: 1.5rem; }
.a-completer { background: #fff3c4; color: #5a4400; padding: 0 0.25rem; border-radius: 3px; }
.pied__liens a { color: #cfd8e6; }

/* Accueil de l'élève : « Mes défis » en cartes colorées, anneau de progression, trophée. */
.defis-accueil { margin: 0; padding: 1rem 1.1rem 1.1rem; border-radius: var(--rayon); background: linear-gradient(135deg, color-mix(in srgb, var(--or) 14%, var(--blanc)), var(--blanc) 60%); border: 1px solid color-mix(in srgb, var(--or) 35%, var(--bord)); box-shadow: var(--ombre); }
.defis-accueil__entete { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.defis-accueil__entete h2 { margin: 0; font-size: 1.25rem; color: var(--marine); display: flex; align-items: center; gap: 0.45rem; }
.defis-accueil__entete h2 svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: var(--or); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.defis-accueil__entete a { font-weight: 700; font-size: 0.9rem; text-decoration: none; color: var(--marine-3); }
.defis-accueil__entete a:hover { text-decoration: underline; }
.defis-accueil__vide { margin: 0; color: var(--gris); }
.defis-cartes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0.8rem; }
.defi-carte { --teinte: #3b6fd8; position: relative; display: grid; gap: 0.55rem; align-content: start; padding: 0.9rem; border-radius: 1rem; background: color-mix(in srgb, var(--teinte) 9%, var(--blanc)); border: 2px solid color-mix(in srgb, var(--teinte) 30%, transparent); min-width: 0; overflow: hidden; }
.defi-carte--serie { --teinte: #e0603a; } .defi-carte--libre { --teinte: #7a4fd6; } .defi-carte--releve { --teinte: #c98a0c; }
.defi-carte__icone { width: 2.6rem; height: 2.6rem; border-radius: 0.8rem; display: grid; place-items: center; background: var(--teinte); box-shadow: 0 4px 12px color-mix(in srgb, var(--teinte) 40%, transparent); }
.defi-carte__icone svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: #ffffff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.defi-carte--serie .defi-carte__icone svg { fill: #ffffff; stroke: none; }
.defi-carte__texte { display: grid; gap: 0.1rem; }
.defi-carte__texte strong { font-family: var(--police-titre); font-weight: 600; font-size: 1.05rem; color: var(--marine); line-height: 1.25; }
.defi-carte__texte span { font-size: 0.82rem; color: var(--gris); }
.defi-carte__progres { display: flex; align-items: center; gap: 0.6rem; }
.defi-carte__anneau { flex: none; width: 3.4rem; height: 3.4rem; }
.defi-carte__anneau circle { fill: none; stroke-width: 6; }
.defi-carte__piste { stroke: color-mix(in srgb, var(--teinte) 18%, var(--blanc)); }
.defi-carte__trait { stroke: var(--teinte); stroke-linecap: round; }
.defi-carte__anneau text { text-anchor: middle; font-size: 11px; font-weight: 800; fill: var(--marine); }
.defi-carte__etat { margin: 0; font-size: 0.9rem; font-weight: 700; color: var(--texte); }
.defi-carte__etat--gagne { color: var(--or-texte); font-family: var(--police-titre); font-size: 1.05rem; }
.defi-carte__fin { font-size: 0.8rem; color: var(--gris); }
.defi-carte--releve::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--or) 30%, transparent) 0 18%, transparent 40%); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .defi-carte { animation: accueil-monte 0.5s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(0.1s + var(--rang, 0) * 0.08s); transition: transform 0.2s, box-shadow 0.2s; }
  .defi-carte:hover { transform: translateY(-3px) rotate(-0.5deg); box-shadow: 0 10px 24px color-mix(in srgb, var(--teinte) 25%, transparent); }
  .defi-carte__trait { animation: accueil-anneau 1s cubic-bezier(.2, .8, .2, 1) 0.4s both; }
  .defi-carte--serie .defi-carte__icone svg { animation: defi-flamme 1.6s ease-in-out infinite; transform-origin: 50% 90%; }
  .defi-carte--releve .defi-carte__icone { animation: defi-trophee 2.4s ease-in-out 0.6s infinite; }
  .defi-carte--anticipation .defi-carte__icone svg { animation: defi-fusee 2.2s ease-in-out infinite; }
}
@keyframes defi-flamme { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.12) rotate(-4deg); } }
@keyframes defi-trophee { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(-12deg) scale(1.08); } 85% { transform: rotate(10deg) scale(1.08); } }
@keyframes defi-fusee { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(2px, -2px); } }
/* Accueil personnalisable (décision 0053) : mode édition avec outils par bloc. */
.element { min-width: 0; }
.personnaliser__ouvrir { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; padding: 0; border-radius: 50%; }
.personnaliser__ouvrir svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.personnaliser__panneau { margin: 0 0 1.2rem; padding: 1rem 1.1rem; border-radius: var(--rayon); border: 2px dashed var(--or); background: var(--or-pale); display: grid; gap: 0.6rem; }
.personnaliser__panneau h2 { margin: 0; font-size: 1.15rem; color: var(--marine); }
.personnaliser__panneau p { margin: 0; }
.personnaliser__masques { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; }
.personnaliser__masques form, .element__outils form { display: inline-flex; gap: 0.25rem; margin: 0; }
.pastille-ajout { padding: 0.25rem 0.75rem; border-radius: 999px; border: 1px solid var(--or); background: var(--blanc); color: var(--marine); font-weight: 700; cursor: pointer; }
.pastille-ajout:hover, .pastille-ajout:focus-visible { background: var(--or); color: #ffffff; }
.ecran--edition .element { outline: 2px dashed color-mix(in srgb, var(--marine-3) 45%, transparent); outline-offset: 4px; border-radius: var(--rayon); }
.element__outils { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0 0 0.5rem; padding: 0.4rem 0.5rem; border-radius: 0.7rem; background: var(--marine); color: #ffffff; }
.element__nom { font-weight: 800; font-size: 0.9rem; margin-right: auto; }
.element__bouton { min-width: 2rem; height: 2rem; padding: 0 0.5rem; border-radius: 0.5rem; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.1); color: #ffffff; font-weight: 700; cursor: pointer; font-size: 0.85rem; }
.element__bouton:hover:not(:disabled), .element__bouton:focus-visible { background: #ffffff; color: #0b2347; }
.element__bouton:disabled { opacity: 0.35; cursor: default; }
.element__bouton--masquer:hover:not(:disabled) { background: #e0603a; color: #ffffff; border-color: #e0603a; }
.element__protege { font-size: 0.78rem; color: #f5d27a; }
.element__absent { margin: 0; padding: 0.8rem 1rem; border-radius: var(--rayon); background: var(--fond-doux); color: var(--gris); font-size: 0.9rem; }
:root[data-theme="dark"] .element__outils { background: #0b2347; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .element__outils { background: #0b2347; } }

/* Citation au hasard sous « Salut » : sobre, sur le bandeau marine. */
.citation-accueil { position: relative; z-index: 1; margin: 0.7rem 0 0; max-width: 46rem; }
.citation-accueil blockquote { margin: 0; font-style: italic; color: #eef2fb; line-height: 1.45; }
.citation-accueil figcaption { margin-top: 0.2rem; font-size: 0.85rem; color: #ffd772; }
.citation-accueil figcaption::before { content: "— "; }

/* Lien « … → » vers la page détaillée, en tête de chaque bloc de l'accueil (comme les tuiles). */
.bloc-entete { display: flex; justify-content: space-between; align-items: baseline; gap: 0.3rem 0.6rem; flex-wrap: wrap; margin: 0 0 0.6rem; }
.bloc-entete h3, .ecran .bloc .bloc-entete h3, .ecran .objectifs-accueil .bloc-entete h3 { margin: 0; }
.bloc-lien { font-size: 0.85rem; font-weight: 700; text-decoration: none; color: var(--marine-3); white-space: nowrap; }
.bloc-lien:hover, .bloc-lien:focus-visible { text-decoration: underline; }
.bloc-pied { margin: 0.5rem 0 0; text-align: right; }
/* Justifié / non justifié : une puce par événement, puis deux pastilles. */
.justif { display: grid; justify-items: center; gap: 0.4rem; margin-top: 0.45rem; }
.justif__puces { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem; }
.justif__puce { display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; font-style: normal; font-size: 0.7rem; font-weight: 800; line-height: 1; background: var(--succes-pale); color: var(--succes); box-shadow: inset 0 0 0 2px currentColor; }
.justif__puce--non { background: var(--danger); color: var(--blanc); box-shadow: none; }
.legende-vie__nj { color: var(--danger); font-weight: 700; }
.justif__pastilles { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem; }
.justif__pastille { padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; max-width: 100%; }
@media (max-width: 30rem) { .justif__puce { width: 1.05rem; height: 1.05rem; font-size: 0.6rem; } .justif__puces { gap: 0.15rem; } .justif__pastille { font-size: 0.7rem; padding: 0.1rem 0.4rem; } }
.justif__pastille--ok { background: var(--succes-pale); color: var(--succes); }
.justif__pastille--non { background: var(--danger-pale); color: var(--danger); }
@media (prefers-reduced-motion: no-preference) {
  .justif__puce { animation: justif-pop 0.4s ease-out both; animation-delay: calc(var(--rang, 0) * 0.05s); }
  .justif__puce--non { animation-name: justif-pop-rouge; }
}
@keyframes justif-pop { from { transform: scale(0); } 70% { transform: scale(1.2); } to { transform: scale(1); } }
@keyframes justif-pop-rouge { from { transform: scale(0); } 60% { transform: scale(1.3); } to { transform: scale(1); } }

/* Cloche des nouveautés dans l'en-tête */
.cloche { position: relative; flex: none; display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; margin-left: 0.4rem; border-radius: 50%; color: var(--marine); border: 1px solid var(--bord); text-decoration: none; }
.cloche:hover, .cloche:focus-visible { background: var(--or-pale); }
.cloche__compteur { position: absolute; top: -0.3rem; right: -0.3rem; min-width: 1.15rem; height: 1.15rem; padding: 0 0.25rem; border-radius: 999px; background: var(--danger); color: #ffffff; font-size: 0.7rem; font-weight: 800; display: grid; place-items: center; }
@media (max-width: 48rem) { .cloche { margin-left: auto; } .cloche + .menu-compte { margin-left: 0.4rem; } }
.nouveautes { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: 0.5rem; }
.nouveaute a { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.7rem 0.9rem; border: 1px solid var(--bord); border-left: 5px solid var(--niveau, var(--bord-fort)); border-radius: var(--rayon); background: var(--blanc); text-decoration: none; color: var(--texte); }
.nouveaute__texte { display: grid; gap: 0.1rem; min-width: 0; overflow-wrap: anywhere; }
.nouveaute__icone { flex: none; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 12px; background: var(--niveau-pale, var(--fond-doux)); font-size: 1.2rem; }
.nouveaute__type { font-size: 0.8rem; font-weight: 800; color: var(--niveau, var(--gris)); }
.nouveaute--rouge { --niveau: var(--n-rouge); --niveau-pale: var(--n-rouge-pale); }
.nouveaute--orange { --niveau: var(--n-orange); --niveau-pale: var(--n-orange-pale); }
.nouveaute--bleu { --niveau: var(--n-bleu); --niveau-pale: var(--n-bleu-pale); }
.nouveaute--vert { --niveau: var(--n-vert); --niveau-pale: var(--n-vert-pale); }
.nouveaute--neuve a { background: var(--niveau-pale, var(--or-pale)); }
.bloc-nouveautes { margin-top: 1.2rem; }
.bloc-nouveautes__entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.bloc-nouveautes__entete h2 { margin: 0; }
.nouveaute a:hover { border-color: var(--marine-3); }

/* Pastilles rouges de nouveautés sur les entrées de menu */
.pastille-menu { display: inline-grid; place-items: center; min-width: 1.1rem; height: 1.1rem; padding: 0 0.25rem; margin-left: 0.3rem; border-radius: 999px; background: var(--danger); color: #ffffff; font-size: 0.7rem; font-weight: 800; line-height: 1; vertical-align: text-top; }
@media (max-width: 48rem) {
  .barre-onglets a { position: relative; }
  .barre-onglets .pastille-menu { position: absolute; top: 0.05rem; left: calc(50% + 0.35rem); margin: 0; min-width: 1rem; height: 1rem; padding: 0 0.2rem; font-size: 0.62rem; }
}
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Synchronisation : icône et date près de la cloche, bulle de message et tirage de la page */
html { overscroll-behavior-y: contain; }
.synchro { display: flex; align-items: center; gap: 0.35rem; flex: none; }
.synchro__date { display: flex; flex-direction: column; align-items: center; font-size: 0.62rem; line-height: 1.15; color: var(--gris); white-space: nowrap; }
.synchro__icone {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 2.1rem; height: 2.1rem; padding: 0; border-radius: 50%; cursor: pointer;
  color: var(--marine); background: var(--blanc); border: 1px solid var(--bord);
}
.synchro__icone:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.synchro__bulle {
  position: fixed; top: 0.5rem; left: 50%; z-index: 30; transform: translate(-50%, 0); opacity: 0; pointer-events: none;
  max-width: calc(100vw - 2rem); padding: 0.4rem 0.9rem; border-radius: 999px; font-size: 0.82rem; font-weight: 600;
  color: var(--marine); background: var(--or-pale); border: 1px solid var(--or); box-shadow: 0 2px 10px rgba(2, 27, 57, 0.15);
}
.synchro__bulle--visible { opacity: 1; }

/* Téléphone étroit : l'en-tête garde la date de synchronisation sans déborder. */
@media (max-width: 26rem) {
  .en-tete__logo img { height: 40px; }
  .en-tete .synchro { gap: 0.2rem; }
  .en-tete .synchro__icone { width: 1.9rem; height: 1.9rem; }
  .en-tete .menu-compte > summary { font-size: 0.8rem; padding: 0.3rem 0.55rem; gap: 0.2rem; }
  .en-tete .cloche { width: 2.1rem; height: 2.1rem; }
}
@media (max-width: 23rem) {
  .en-tete__logo img { height: 36px; }
}
@media (max-width: 23rem) {
  .en-tete .menu-compte > summary { padding: 0.3rem 0.45rem; }
}

/* Bulle d'aide aux devoirs (IA) : flottante, au-dessus de la barre d'onglets sur téléphone. */
.bulle-aide { position: fixed; right: 1rem; bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px)); z-index: 16; }
.bulle-aide summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.4rem;
  padding: 0.7rem 1rem; border-radius: 999px; background: var(--marine); color: var(--blanc);
  font-weight: 700; box-shadow: 0 4px 14px rgba(2, 27, 57, 0.3);
}
.bulle-aide summary::-webkit-details-marker { display: none; }
.bulle-aide__liste {
  position: absolute; right: 0; bottom: calc(100% + 0.5rem); min-width: 15rem; display: grid; gap: 0.2rem;
  padding: 0.4rem; background: var(--blanc); border: 1px solid var(--bord); border-radius: 12px;
  box-shadow: 0 6px 20px rgba(2, 27, 57, 0.18);
}
.bulle-aide__liste a { padding: 0.6rem 0.7rem; border-radius: 8px; color: var(--marine); font-weight: 600; text-decoration: none; }
.bulle-aide__liste a:hover { background: var(--or-pale); }
@media (max-width: 48rem) {
  .bulle-aide { bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)); }
  .bulle-aide summary span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .bulle-aide summary { padding: 0.85rem; }
}
.sections { display: flex; gap: 0.3rem; margin: 0 0 0.8rem; }
.sections a {
  flex: 1; text-align: center; padding: 0.5rem 0.8rem; border-radius: 999px; border: 1px solid var(--bord);
  color: var(--marine); font-weight: 700; text-decoration: none; background: var(--blanc);
}
.sections a[aria-current="page"] { background: var(--marine); color: var(--blanc); border-color: var(--marine); }
@media (max-width: 48rem) {
  .onglets--discrets, .onglets--rubrique { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .onglets--discrets a, .onglets--rubrique a { white-space: nowrap; flex: 0 0 auto; }
}

/* Vie scolaire : chiffres alignés d'une carte à l'autre, pastilles réparties sans icône orpheline. */
.compteur { align-items: center; text-align: center; }
.compteur .justif { margin-top: auto; padding-top: 0.4rem; width: 100%; }
.justif__puces:has(.justif__puce:nth-child(6)) { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; gap: 0.3rem; }
.courbe-mini__dates { display: flex; justify-content: space-between; margin: 0.15rem 0 0; font-size: 0.72rem; color: var(--gris); }

/* Vie scolaire : icône, chiffre et libellé alignés d'une carte à l'autre, pastilles ancrées en bas. */
.compteurs--vie { align-items: stretch; }
.compteurs--vie .compteur { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 0.15rem; }
.compteurs--vie .compteur > span:not(.pastille-evenement) { flex: 1 1 auto; line-height: 1.3; }

/* Accueil : dans la tuile compacte, les pastilles suivent directement le libellé, au même niveau d'une carte à l'autre. */
.tuile--vie .compteurs--vie .compteur > span:not(.pastille-evenement) { flex: 0 0 auto; }
.tuile--vie .compteurs--vie .compteur .justif { margin-top: 0.3rem; padding-top: 0; }

/* Bascule de thème et filtre des enfants, à côté de la cloche */
.bascule-theme { position: relative; flex: none; display: inline-grid; place-items: center; box-sizing: border-box; width: 2.4rem; height: 2.4rem; padding: 0; margin-left: 0.4rem; border-radius: 50%; color: var(--marine); background: var(--blanc); border: 1px solid var(--bord); font-weight: 400; cursor: pointer; }
.bascule-theme:hover, .bascule-theme:focus-visible { background: var(--or-pale); color: var(--marine); }
.bascule-theme svg { grid-area: 1 / 1; display: none; }
.bascule-theme:not([data-theme-actuel]) .bascule-theme__auto,
.bascule-theme[data-theme-actuel="auto"] .bascule-theme__auto,
.bascule-theme[data-theme-actuel="light"] .bascule-theme__clair,
.bascule-theme[data-theme-actuel="dark"] .bascule-theme__sombre { display: block; }
.filtre-enfants { display: flex; flex: none; gap: 0.3rem; margin-left: 0.4rem; }
.filtre-enfants form { margin: 0; }
.filtre-enfants__puce { box-sizing: border-box; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; padding: 0; overflow: hidden; border-radius: 50%; border: 2px solid var(--bord-fort); background: var(--fond-doux); color: var(--marine); font: inherit; font-size: 0.8rem; font-weight: 800; cursor: pointer; opacity: 0.5; }
.filtre-enfants__puce:hover { background: var(--or-pale); color: var(--marine); }
.filtre-enfants__puce img { width: 100%; height: 100%; object-fit: cover; }
.filtre-enfants__puce[aria-pressed="true"] { opacity: 1; border-color: var(--or); background: var(--or-pale); box-shadow: 0 0 0 2px var(--or); }
@media (max-width: 48rem) { .filtre-enfants, .bascule-theme { margin-left: auto; } .filtre-enfants + .bascule-theme, .bascule-theme + .cloche { margin-left: 0.4rem; } }
@media (max-width: 26rem) { .en-tete .bascule-theme, .en-tete .filtre-enfants__puce { width: 2.1rem; height: 2.1rem; } }
@media (max-width: 30rem) { .en-tete .bascule-theme, .en-tete .cloche, .en-tete .filtre-enfants__puce { width: 2rem; height: 2rem; margin-left: 0.2rem; } .en-tete .filtre-enfants { gap: 0.2rem; } .en-tete .bascule-theme svg { width: 18px; height: 18px; } }
@media (max-width: 30rem) { .en-tete .menu-compte > summary { max-width: 5.2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; } }
@media (max-width: 30rem) { .en-tete .menu-compte > summary { max-width: none; font-size: 0.78rem; padding: 0.3rem 0.45rem; } .en-tete__logo img { height: 36px; width: auto; } .en-tete__contenu { gap: 0.3rem; } }

/* Apprendre : sudoku et horloge (décision 0074). */
.sudoku { border-collapse: collapse; border: 3px solid currentColor; margin: 0 auto; }
.sudoku td { width: 2.4rem; height: 2.4rem; padding: 0; text-align: center; border: 1px solid rgba(127, 127, 127, 0.5); font-size: 1.2rem; }
.sudoku td.sudoku__bas { border-bottom: 3px solid currentColor; }
.sudoku td.sudoku__droit { border-right: 3px solid currentColor; }
.sudoku input { width: 100%; height: 100%; border: 0; text-align: center; font-size: 1.2rem; background: transparent; color: inherit; }
.sudoku--9 td { width: 2rem; height: 2rem; }
.horloge { display: block; margin: 0.5rem 0; color: var(--texte, currentColor); }

/* Page Révisions : aujourd'hui, la semaine en un tableau, les matières à renforcer. */
.revision-haut { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); margin-bottom: 1rem; }
.revision-haut > .carte + .carte { margin-top: 0; }
@media (min-width: 60rem) { .revision-haut { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; } }
.rev-jour__entete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.3rem 1rem; margin-bottom: 0.6rem; }
.rev-jour__entete h2 { margin: 0; }
.rev-jour__entete h2 .discret { font-family: var(--police-texte); font-weight: 400; font-size: 0.95rem; margin-left: 0.3rem; }
.rev-sous-titre { font-size: 1rem; margin: 1rem 0 0.4rem; }
.rev-duree { font-family: var(--police-titre); font-weight: 600; color: var(--marine); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rev-duree .discret { font-family: var(--police-texte); font-weight: 400; font-size: 0.85rem; }
.rev-duree--trop { color: var(--bulle-basse-texte); }
.rev-alerte { margin: 0 0 0.7rem; padding: 0.55rem 0.8rem; border-radius: 10px; background: var(--bulle-basse); color: var(--bulle-basse-texte); font-size: 0.92rem; }
.rev-progres { height: 0.55rem; border-radius: 99px; background: var(--creme); overflow: hidden; }
.rev-progres span { display: block; height: 100%; border-radius: 99px; background: var(--succes); }
.rev-progres__texte { margin: 0.3rem 0 0.6rem; font-size: 0.85rem; }
.rev-taches { list-style: none; margin: 0; padding: 0; display: grid; }
.rev-tache { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0; border-top: 1px solid var(--bord); }
.rev-tache:first-child { border-top: 0; }
.rev-tache form { margin: 0; }
.rev-tache__texte { flex: 1; min-width: 0; line-height: 1.3; overflow-wrap: anywhere; }
.rev-tache__quoi { display: block; font-size: 0.93rem; margin-top: 0.1rem; }
.rev-tache__duree { flex: none; font-size: 0.85rem; color: var(--gris); white-space: nowrap; }
.rev-tache--faite .rev-tache__texte { color: var(--gris); }
.rev-tache--faite .rev-tache__quoi a { color: inherit; }
.rev-tache .coche { flex: none; }
span.coche { display: inline-flex; align-items: center; justify-content: center; }
.rev-type { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 0.02rem 0.45rem; border-radius: 999px; background: var(--succes-pale); color: var(--succes); white-space: nowrap; vertical-align: 1px; }
.rev-type--controle { background: var(--or-pale); color: var(--or-texte); }
.rev-type--devoir { background: color-mix(in srgb, #4f86e8 16%, var(--blanc)); color: color-mix(in srgb, #4f86e8 70%, var(--texte)); }

.rev-suivi h2 { margin-top: 0; }
.rev-suivi__chiffres { display: flex; align-items: baseline; gap: 0.4rem; margin: 0 0 0.4rem; }
.rev-suivi__grand { font-family: var(--police-titre); font-weight: 700; font-size: 2rem; color: var(--marine); line-height: 1; }
.rev-badges { list-style: none; margin: 0.9rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 0.5rem; }
.rev-badge { display: flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.5rem; border-radius: 12px; border: 1px dashed var(--bord-fort); color: var(--gris); font-size: 0.82rem; line-height: 1.2; }
.rev-badge__medaille { flex: none; display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--creme); font-size: 1rem; }
.rev-badge--obtenu { border-style: solid; border-color: var(--or-clair); background: var(--or-pale); color: var(--marine); font-weight: 700; }
.rev-badge--obtenu .rev-badge__medaille { background: var(--or); color: #ffffff; }

.rev-semaine { margin-bottom: 1rem; }
.rev-legende { margin: 0; display: flex; gap: 0.3rem; }
.rev-tableau { width: 100%; border-collapse: collapse; }
.rev-tableau thead th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gris); font-weight: 700; text-align: left; padding: 0 0.6rem 0.4rem; border-bottom: 1px solid var(--bord); }
.rev-tableau td, .rev-tableau tbody th { padding: 0.6rem; border-bottom: 1px solid var(--bord); vertical-align: top; text-align: left; }
.rev-tableau tbody tr:last-child > * { border-bottom: 0; }
.rev-tableau tbody th { width: 6.5rem; white-space: nowrap; }
.rev-tableau__jour { display: block; font-weight: 700; color: var(--marine); }
.rev-tableau__date { display: block; font-weight: 400; font-size: 0.82rem; color: var(--gris); }
.rev-tableau__aujourdhui > * { background: var(--or-pale); }
.rev-tableau__aujourdhui > :first-child { border-radius: 12px 0 0 12px; }
.rev-tableau__aujourdhui > :last-child { border-radius: 0 12px 12px 0; }
.rev-tableau__temps { width: 11rem; }
.rev-tableau__temps .rev-duree { display: block; font-size: 0.95rem; }
.rev-barre { position: relative; display: block; height: 0.5rem; margin-top: 0.3rem; border-radius: 99px; background: var(--creme); }
.rev-barre__plein { display: block; height: 100%; max-width: 100%; border-radius: 99px; background: var(--marine-3, var(--marine)); }
.rev-tableau__trop .rev-barre__plein { background: #e0603a; }
.rev-barre__limite { position: absolute; top: -0.2rem; bottom: -0.2rem; width: 2px; margin-left: -1px; background: var(--texte); border-radius: 2px; }
.rev-trop { display: inline-block; margin-top: 0.3rem; font-size: 0.75rem; font-weight: 700; color: var(--bulle-basse-texte); }
.rev-puces { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.rev-puce { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.35rem; max-width: 100%; padding: 0.2rem 0.55rem; border-radius: 10px; font-size: 0.85rem; line-height: 1.3;
  background: var(--succes-pale); border-left: 4px solid var(--c, var(--succes)); }
.rev-puce--controle { background: var(--or-pale); }
.rev-puce--devoir { background: color-mix(in srgb, #4f86e8 12%, var(--blanc)); }
.rev-puce--faite { opacity: 0.6; }
.rev-puce--faite a { text-decoration: line-through; }
.rev-puce__matiere { font-weight: 700; color: var(--marine); }
.rev-conseils { margin: 0; padding-left: 1.2rem; }

.rev-semaine ul.cartes-controles, section ul.cartes-controles { list-style: none; padding: 0.1rem 0 0.3rem; margin: 0 0 0.5rem; display: flex; gap: 0.6rem; overflow-x: auto; scrollbar-width: thin; }

.rev-matieres { margin: 1.5rem 0 1rem; }
.rev-matieres > h2 { margin-bottom: 0.2rem; }
.rev-matieres > .discret { margin-top: 0; }
.rev-matieres__grille { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.rev-matiere { border-top: 4px solid var(--c); display: flex; flex-direction: column; gap: 0.55rem; padding-bottom: 1.1rem; }
.rev-matiere__entete { display: flex; align-items: center; gap: 0.6rem; }
.rev-matiere__entete h3 { flex: 1; min-width: 0; margin: 0; font-size: 1.1rem; }
.rev-matiere__entete .bulle-note { font-size: 1.2rem; min-width: 3.6rem; }
.rev-matiere__etiquettes { margin: 0; display: flex; flex-wrap: wrap; gap: 0.3rem; min-height: 0; }
.rev-matiere__etiquettes:empty { display: none; }
.rev-jauge { position: relative; height: 0.7rem; border-radius: 99px; background: var(--creme); margin: 0.3rem 0; }
.rev-jauge__plein { display: block; height: 100%; border-radius: 99px; background: var(--c); }
.rev-jauge__cible, .rev-jauge__classe { position: absolute; top: -0.3rem; bottom: -0.3rem; width: 3px; margin-left: -1.5px; border-radius: 2px; }
.rev-jauge__cible { background: var(--succes); }
.rev-jauge__classe { background: var(--gris); width: 2px; opacity: 0.7; }
.rev-matiere__chiffres { display: flex; gap: 1.2rem; margin: 0; }
.rev-matiere__chiffres div { display: flex; gap: 0.3rem; align-items: baseline; }
.rev-matiere__chiffres dt { font-size: 0.82rem; color: var(--gris); }
.rev-matiere__chiffres dd { margin: 0; font-weight: 700; }
.rev-matiere__chiffres dt::before { content: ""; display: inline-block; width: 3px; height: 0.8rem; margin-right: 0.3rem; vertical-align: -1px; border-radius: 2px; background: var(--succes); }
.rev-matiere__chiffres div + div dt::before { background: var(--gris); }
.rev-matiere__cle { margin: 0; font-size: 0.93rem; }
.rev-matiere__notes { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.rev-matiere__notes .discret { font-size: 0.82rem; margin-right: 0.2rem; }
.rev-matiere__notes .bulle-note { min-width: 2.6rem; font-size: 0.85rem; padding: 0.05rem 0.4rem; }
.rev-matiere__diagnostic ul { margin: 0.4rem 0 0; padding-left: 1.2rem; font-size: 0.92rem; }

.rev-reglages details { border-top: 1px solid var(--bord); padding: 0.6rem 0; }
.rev-reglages details:first-of-type { border-top: 0; }
.rev-reglages summary { font-weight: 700; cursor: pointer; }
.rev-reglages__liste { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.rev-reglage { display: grid; grid-template-columns: minmax(10rem, 1.4fr) auto auto auto; gap: 0.4rem 0.8rem; align-items: center; padding: 0.4rem 0; border-bottom: 1px solid var(--bord); }
.rev-reglage__nom { display: inline-flex; align-items: center; gap: 0.4rem; }
.rev-reglage input[type="number"] { width: 4.5rem; }

/* Téléphone : chaque jour du tableau devient une carte, temps à droite du jour. */
@media (max-width: 40rem) {
  .rev-tableau thead { display: none; }
  .rev-tableau, .rev-tableau tbody, .rev-tableau tr, .rev-tableau td, .rev-tableau tbody th { display: block; width: auto; }
  .rev-tableau tr { display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 0.6rem; padding: 0.7rem 0.6rem; border-bottom: 1px solid var(--bord); }
  .rev-tableau tbody tr:last-child { border-bottom: 0; }
  .rev-tableau td, .rev-tableau tbody th { padding: 0; border: 0; }
  .rev-tableau tbody th { grid-column: 1; grid-row: 1; display: flex; gap: 0.4rem; align-items: baseline; }
  .rev-tableau__date { display: inline; }
  .rev-tableau__temps { grid-column: 2; grid-row: 1; width: 7rem; text-align: right; }
  .rev-tableau td:not(.rev-tableau__temps) { grid-column: 1 / -1; grid-row: 2; }
  .rev-tableau__aujourdhui { background: var(--or-pale); border-radius: 12px; }
  .rev-tableau__aujourdhui > * { background: none; }
  .rev-reglage { grid-template-columns: 1fr 1fr; }
  .rev-reglage__nom, .rev-reglage button { grid-column: 1 / -1; }
}
.rev-puce__pret { font-size: 0.72rem; font-weight: 700; color: var(--succes); }

/* Apprendre : quiz une question à la fois, cartes de thèmes (sans JavaScript : toutes les questions s'affichent). */
.actions--centre { justify-content: center; }
.quiz-pas__question { border: 0; padding: 0; margin: 0 0 1.2rem; min-width: 0; }
.quiz-pas__question[hidden], .quiz-pas [hidden] { display: none; }
.quiz-pas__tete { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; margin-bottom: 1rem; }
.quiz-pas__points { min-width: 9rem; }
.quiz-pas__compte { font-family: var(--police-titre); font-weight: 600; color: var(--marine); white-space: nowrap; }
.quiz-pas__tete .progres-quiz__barre { height: 0.8rem; }
.quiz-pas__question legend { padding: 0; margin: 0 0 1rem; width: 100%; text-align: center; }
.quiz-pas__enonce { display: block; font-family: var(--police-titre); font-weight: 600; font-size: clamp(1.5rem, 5vw, 2.1rem); color: var(--marine); line-height: 1.25; }
.quiz-pas__enonce--arabe { font-size: clamp(2.2rem, 8vw, 3.2rem); }
.quiz-pas__dessin { display: flex; justify-content: center; margin-bottom: 1rem; }
.quiz-pas__choix { display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.quiz-pas__reponse { display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3.6rem; padding: 0.6rem 1rem; border: 2px solid var(--bord-fort); border-radius: var(--rayon); background: var(--blanc); font-size: 1.15rem; font-weight: 700; color: var(--marine); cursor: pointer; text-align: center; transition: transform 0.12s, border-color 0.12s, background 0.12s; }
.quiz-pas__reponse:hover { border-color: var(--or); background: var(--or-pale); }
.quiz-pas__reponse:has(input:focus-visible) { outline: 3px solid var(--or); outline-offset: 2px; }
.quiz-pas--actif .quiz-pas__reponse input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.quiz-pas__reponse:has(input:checked) { border-color: var(--marine-3); background: var(--n-bleu-pale); }
.quiz-pas__reponse--juste, .quiz-pas__reponse--juste:has(input:checked) { border-color: var(--succes); background: var(--succes-pale); }
.quiz-pas__reponse--juste::after { content: "✓"; color: var(--succes); font-weight: 800; }
.quiz-pas__reponse--faux, .quiz-pas__reponse--faux:has(input:checked) { border-color: var(--danger); background: var(--danger-pale); animation: quiz-secoue 0.35s; }
.quiz-pas__reponse--faux::after { content: "✗"; color: var(--danger); font-weight: 800; }
.quiz-pas__retour { margin: 1rem 0 0; padding: 0.7rem 1rem; border-radius: var(--rayon); text-align: center; font-weight: 700; }
.quiz-pas__retour--juste { background: var(--succes-pale); color: var(--succes); }
.quiz-pas__retour--faux { background: var(--danger-pale); color: var(--danger); }
@keyframes quiz-secoue { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.trophee { display: inline-block; padding: 0.4rem 0.9rem; border-radius: 99px; background: var(--or-pale); color: var(--or-texte); font-weight: 800; }
.correction { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.5rem; }
.correction__ligne { display: flex; gap: 0.7rem; align-items: center; padding: 0.6rem 0.9rem; border-radius: var(--rayon); border: 1px solid var(--bord); background: var(--blanc); }
.correction__ligne--juste { border-left: 5px solid var(--succes); }
.correction__ligne--faux { border-left: 5px solid var(--danger); }
.correction__signe { flex: none; width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 50%; font-weight: 800; }
.correction__ligne--juste .correction__signe { background: var(--succes-pale); color: var(--succes); }
.correction__ligne--faux .correction__signe { background: var(--danger-pale); color: var(--danger); }
.correction__texte { display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; align-items: baseline; }
.correction__enonce { font-weight: 700; color: var(--marine); }
.appr-carte { display: flex; flex-direction: column; gap: 0.5rem; }
.appr-carte__tete { display: flex; align-items: center; gap: 0.7rem; }
.appr-carte__tete h3 { margin: 0; }
.appr-icone { flex: none; width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 14px; font-size: 1.6rem; background: var(--n-bleu-pale); }
.appr-carte--vert .appr-icone { background: var(--n-vert-pale); }
.appr-carte--orange .appr-icone { background: var(--n-orange-pale); }
.appr-carte--rouge .appr-icone { background: var(--n-rouge-pale); }
.appr-carte .discret { margin: 0; flex: 1; }
.appr-puce { display: inline-block; margin-left: 0.4rem; padding: 0 0.55rem; border-radius: 99px; background: var(--fond-doux); color: var(--gris); font-size: 0.75rem; font-weight: 700; vertical-align: middle; }
.appr-carte .actions { margin-top: 0.3rem; }
@media (prefers-reduced-motion: reduce) { .quiz-pas__reponse, .quiz-pas__reponse--faux { transition: none; animation: none; } }
.appr-accueil { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; margin-bottom: 1rem; }
@media (max-width: 44rem) { .appr-accueil { grid-template-columns: 1fr; } }
.appr-accueil__bulle { display: flex; gap: 1rem; align-items: center; }
.appr-accueil__bulle h1 { margin: 0 0 0.25rem; }
.appr-accueil__bulle p { margin: 0; color: var(--gris); }
.appr-du-jour { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "etiquette etiquette" "icone titre" "icone go"; gap: 0.15rem 0.8rem; align-items: center; min-width: 16rem; padding: 0.9rem 1.2rem; border-radius: var(--rayon); background: linear-gradient(135deg, var(--or-pale), var(--n-bleu-pale)); border: 2px solid var(--or-clair); color: var(--marine); text-decoration: none; box-shadow: var(--ombre); transition: transform 0.15s; }
.appr-du-jour:hover { transform: translateY(-2px) rotate(-0.5deg); color: var(--marine); }
.appr-du-jour__etiquette { grid-area: etiquette; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--or-texte); }
.appr-du-jour__icone { grid-area: icone; font-size: 2.4rem; }
.appr-du-jour__titre { grid-area: titre; font-family: var(--police-titre); font-weight: 600; font-size: 1.25rem; }
.appr-du-jour__go { grid-area: go; font-weight: 700; color: var(--marine-3); }
.appr-rubriques { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.5rem; }
.appr-rubriques a { padding: 0.35rem 0.9rem; border-radius: 99px; background: var(--blanc); border: 1px solid var(--bord); color: var(--marine); font-weight: 700; text-decoration: none; }
.appr-rubriques a:hover { border-color: var(--or); background: var(--or-pale); }
.appr-record { font-size: 0.9rem; letter-spacing: 0.05em; }
.quiz-pas__hibou { flex: none; display: flex; }
.quiz-pas__points { flex: 1; display: flex; gap: 0.3rem; list-style: none; margin: 0; padding: 0; }
.quiz-pas__points li { flex: 1; height: 0.7rem; border-radius: 99px; background: var(--fond-doux); transition: background 0.2s, transform 0.2s; }
.quiz-pas__points li.courant { background: var(--or-clair); transform: scaleY(1.3); }
.quiz-pas__points li.juste { background: var(--succes); }
.quiz-pas__points li.faux { background: var(--danger); }
.quiz-pas__serie { flex: none; padding: 0.15rem 0.6rem; border-radius: 99px; background: var(--n-orange-pale); color: var(--n-orange); font-weight: 800; font-size: 0.9rem; white-space: nowrap; }
.quiz-pas__serie.rebond { animation: sautille 0.5s ease; }
.quiz-pas__astuce { text-align: center; width: 100%; margin: 0.3rem 0 0; font-size: 0.85rem; }
.fin-quiz__hibou { display: flex; justify-content: center; }
.record { display: inline-block; padding: 0.3rem 0.9rem; border-radius: 99px; background: var(--n-vert-pale); color: var(--n-vert); font-weight: 800; }
@media (max-width: 30rem) { .quiz-pas__compte { font-size: 0.9rem; } .quiz-pas__hibou { display: none; } .appr-accueil__bulle .hibou { width: 64px; height: 64px; } }
@media (prefers-reduced-motion: reduce) { .appr-du-jour, .quiz-pas__points li { transition: none; } .quiz-pas__serie.rebond { animation: none; } }
.rev-etapes { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.3rem; }
.rev-etape { font-size: 0.78rem; padding: 0.05rem 0.5rem; border-radius: 999px; border: 1px dashed var(--bord-fort); color: var(--gris); }
.rev-etape--faite { border-style: solid; border-color: transparent; background: var(--succes-pale); color: var(--succes); font-weight: 700; }
.coche--verrouillee { opacity: 0.45; border-style: dashed; cursor: not-allowed; }

/* Score des révisions (page Révisions et accueil du tuteur). */
.score-rev { margin-bottom: 0.9rem; }
.score-rev p { margin: 0; }
.score-rev__tete { display: flex; align-items: center; gap: 0.7rem; }
.score-rev__tete .discret { font-size: 0.85rem; line-height: 1.3; }
.score-rev__pct { flex: none; font-family: var(--police-titre); font-weight: 700; font-size: 1.6rem; padding: 0.1rem 0.6rem; border-radius: 12px; background: var(--bulle-moyenne); color: var(--bulle-moyenne-texte); font-variant-numeric: tabular-nums; }
.score-rev__pct--haut { background: var(--succes-pale); color: var(--succes); }
.score-rev__pct--bas { background: var(--bulle-basse); color: var(--bulle-basse-texte); }
.score-rev__evolution { font-size: 0.85rem; font-weight: 700; color: var(--gris); margin-top: 0.3rem !important; }
.score-rev__evolution--hausse { color: var(--succes); }
.score-rev__evolution--baisse { color: var(--bulle-basse-texte); }
.score-rev__matieres { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.3rem; }
.score-rev__matieres li { display: grid; grid-template-columns: minmax(0, 8rem) 1fr 3rem; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.score-rev__nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score-rev__barre { height: 0.45rem; border-radius: 99px; background: var(--creme); overflow: hidden; }
.score-rev__barre span { display: block; height: 100%; border-radius: 99px; background: var(--c); }
.score-rev__matieres strong { text-align: right; font-variant-numeric: tabular-nums; }
.bloc ul.score-rev__matieres { padding-left: 0; }

/* Assistant de démarrage pas à pas (décision 0080) */
.assistant { max-width: 44rem; margin: 0 auto; }
.assistant__pas ol { list-style: none; display: flex; gap: 0.4rem; margin: 0 0 1rem; padding: 0; }
.assistant__pas-item { flex: 1; min-width: 0; }
.assistant__pas-item a { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; text-align: center; text-decoration: none; color: var(--gris); font-size: 0.8rem; padding-top: 0.5rem; border-top: 4px solid var(--bord); }
.assistant__pas-item--fait a { border-top-color: var(--succes); }
.assistant__pas-item--courant a { border-top-color: var(--or); color: var(--marine); font-weight: 700; }
.assistant__numero { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--marine-3); color: var(--blanc); font-weight: 700; font-size: 0.85rem; }
.assistant__pas-item--fait .assistant__numero { background: var(--succes); }
.assistant__repere { margin: 0 0 0.2rem; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.75rem; }
.assistant__enfant { border: 0; border-top: 1px solid var(--bord); margin: 1rem 0 0; padding: 0.8rem 0 0; }
.assistant__liste { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.3rem; }
.assistant__suite { margin-top: 1.2rem; align-items: center; }
.assistant__quitter { text-align: center; margin-top: 1rem; }
.bandeau-assistant { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: center; padding: 0.55rem 1rem; background: var(--or-pale); color: var(--marine); border-bottom: 1px solid var(--bord); font-size: 0.9rem; }
@media (max-width: 36rem) { .assistant__nom { display: none; } }