/* =====================================================================
   MathACoeur — feuille de style commune
   Palette et grammaire reprises de la charte LaTeX (commun.tex, charte_cours.tex) :
   fond blanc, titres bleu foncé soulignés d'un filet, sous-titres dorés en italique,
   encadrés à cadre bleu fin et coins arrondis, barres latérales dorée (exemple)
   et bleu moyen (démonstration), aplats réservés aux fonds très clairs.
   ===================================================================== */

/* ---------- Jetons ---------- */
:root {
  color-scheme: light dark;

  /* Palette de la charte */
  --bleu-fonce: #115670;
  --bleu-moyen: #1B7CC4;
  --bleu-clair: #EEEEFF;
  --dore: #C9A961;
  --dore-clair: #F4EEDF;
  --dore-texte: #7A5F26;   /* doré de la charte assombri : 5:1 au moins sur tous les fonds clairs */
  --gris-fonce: #333333;
  --vert: #28703F;         /* 5:1 au moins sur tous les fonds clairs, y compris son propre fond */
  --vert-clair: #E7F3EC;
  --rouge: #A83232;
  --rouge-clair: #F8EAEA;
  --ciel: #2FAEE0;         /* bleu ciel OM : aplats et filets, jamais sous un texte clair */
  --ciel-texte: #0A6E99;   /* bleu ciel assombri pour un texte sur fond clair (5,6:1) */

  /* Rôles (thème clair) */
  --fond: #FFFFFF;
  --fond-doux: #F6F8FA;
  --texte: var(--gris-fonce);
  --texte-doux: #5B6770;
  --titre: var(--bleu-fonce);
  --accent: var(--dore);
  --accent-texte: var(--dore-texte);
  --accent-fond: var(--dore-clair);
  --info-fond: var(--bleu-clair);
  --bordure: #D5DDE3;
  --bordure-forte: var(--bleu-fonce);
  --lien: var(--bleu-fonce);
  --lien-survol: var(--bleu-moyen);
  --focus: var(--dore-texte);   /* doré foncé : 3:1 au moins sur tous les fonds clairs (RGAA 10.7) */
  --bouton-fond: var(--bleu-fonce);
  --bouton-texte: #FFFFFF;
  --bouton-or-fond: var(--dore);
  --bouton-or-texte: #0F1B23;   /* comme en sombre : 7,8:1 sur le doré (le bleu foncé ne faisait que 3,6:1) */
  --succes: var(--vert);
  --succes-fond: var(--vert-clair);
  --alerte: var(--rouge);
  --alerte-fond: var(--rouge-clair);
  --ombre: 0 1px 2px rgba(17, 86, 112, .08), 0 10px 30px -18px rgba(17, 86, 112, .35);
  --pied-encre: color-mix(in srgb, var(--titre) 15%, var(--fond));   /* dessin du bas de page : une silhouette à peine marquée */
  /* Remplissage des icônes de chapitres (eau du parcours, cartes du tableau de bord), 07/11/2026 : le numéro reste à 4,5:1
     dessus, et la ligne de surface fait 3:1 au moins avec l'eau comme avec le fond (RGAA 3.3). */
  --eau-fond: color-mix(in srgb, var(--ciel) 45%, var(--fond));
  --eau-ligne: var(--ciel-texte);

  /* Typographie */
  --police-contenu: "MathACoeur Serif", "Charter", "Bitstream Charter", "Charis SIL", Georgia, "Times New Roman", serif;
  --police-interface: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, sans-serif;
  --police-code: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --corps: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
  --interligne: 1.55;

  /* Formes */
  --rayon: 10px;
  --rayon-petit: 6px;
  --filet: 1px;
  --espace: clamp(1rem, 0.8rem + 1vw, 1.75rem);
  --largeur-max: 160rem;     /* mises en page : plus d'éléments par ligne à mesure que l'écran s'élargit */
  --largeur-texte: 46rem;    /* textes suivis : environ 75 caractères par ligne */
}

/* Mode sombre : suit le système, sauf choix explicite mémorisé par le bouton de l’en-tête
   (attribut data-theme posé sur <html> par le script en tête de page). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --fond: #0F1B23;
    --fond-doux: #16252F;
    --texte: #E4E8EB;
    --texte-doux: #A5B1BA;
    --titre: #8FC3E6;
    --accent: #D9BB79;
    --accent-texte: #D9BB79;
    --accent-fond: #2B2415;
    --info-fond: #17303F;
    --bordure: #2B3C47;
    --bordure-forte: #8FC3E6;
    --lien: #8FC3E6;
    --lien-survol: #B9DCF2;
    --focus: #D9BB79;
    --bouton-fond: #8FC3E6;
    --bouton-texte: #0F1B23;
    --bouton-or-fond: #D9BB79;
    --bouton-or-texte: #0F1B23;
    --succes: #7CC79A;
    --succes-fond: #15301F;
    --alerte: #E39A93;
    --alerte-fond: #3A1C1A;
    --ombre: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -18px rgba(0, 0, 0, .8);
    --ciel: #6CCBF2;
    --ciel-texte: #6CCBF2; --eau-fond: color-mix(in srgb, #6CCBF2 30%, #0F1B23); --eau-ligne: #6CCBF2;
  }
}
:root[data-theme="sombre"] {
  color-scheme: dark;
  --fond: #0F1B23;
  --fond-doux: #16252F;
  --texte: #E4E8EB;
  --texte-doux: #A5B1BA;
  --titre: #8FC3E6;
  --accent: #D9BB79;
  --accent-texte: #D9BB79;
  --accent-fond: #2B2415;
  --info-fond: #17303F;
  --bordure: #2B3C47;
  --bordure-forte: #8FC3E6;
  --lien: #8FC3E6;
  --lien-survol: #B9DCF2;
  --focus: #D9BB79;
  --bouton-fond: #8FC3E6;
  --bouton-texte: #0F1B23;
  --bouton-or-fond: #D9BB79;
  --bouton-or-texte: #0F1B23;
  --succes: #7CC79A;
  --succes-fond: #15301F;
  --alerte: #E39A93;
  --alerte-fond: #3A1C1A;
  --ombre: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -18px rgba(0, 0, 0, .8);
  --ciel: #6CCBF2;
  --ciel-texte: #6CCBF2; --eau-fond: color-mix(in srgb, #6CCBF2 30%, #0F1B23); --eau-ligne: #6CCBF2;
}
:root[data-theme="clair"] { color-scheme: light; }

/* ---------- Polices hébergées ----------
   « MathACoeur Serif » est un sous-ensemble renommé de Charis 7.000 (SIL Global, licence OFL 1.1),
   quasi identique à Bitstream Charter. Voir /assets/fonts/LISEZMOI.md et OFL.txt. */
/* polices:debut */
@font-face {
  font-family: "MathACoeur Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/mathacoeur-serif-regular-latin.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+0178, U+0192, U+02C6, U+02DA, U+02DC, U+2000-2042, U+2044, U+204A, U+2053, U+2057, U+2060-2063, U+206A-206F, U+20AC, U+2122, U+2212, U+FB00-FB04;
}
@font-face {
  font-family: "MathACoeur Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/mathacoeur-serif-regular-symboles.woff2") format("woff2");
  unicode-range: U+0100-0130, U+0132-0148, U+014A-0151, U+0154-0177, U+0179-017F, U+02C7-02D9, U+02DB, U+0300-033F, U+0346-036F, U+0387, U+0393-0394, U+0398, U+039E, U+03A0, U+03A8-03A9, U+03B1-03B4, U+03B8, U+03BB-03BC, U+03C0-03C1, U+03C3, U+03C6-03C7, U+03C9, U+03D1, U+03F4, U+2070-2071, U+2074-208E, U+2090-209C, U+20A0-20AB, U+20AD-20C0, U+210C, U+2113, U+2116-2117, U+211F, U+2123, U+2126, U+212D, U+2135, U+214F-218B, U+2190-219B, U+21A8, U+21AE, U+21B6-21B7, U+21BA-21BB, U+21D0-21D5, U+2202-2206, U+220F, U+2211, U+2213, U+2215, U+2219-221A, U+221E, U+2221, U+2225-2228, U+222B, U+2234-2235, U+223C, U+2248, U+225F-2262, U+2264-2265, U+226E-226F, U+2282-2287, U+22BB-22BD, U+2308-230B, U+2318, U+231C-231F, U+2329-232A, U+239B-23AD, U+23D1-23D6, U+25C9-25CC, U+2610-2612, U+2639-263A, U+2640, U+2642, U+266D, U+266F;
}
@font-face {
  font-family: "MathACoeur Serif";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/mathacoeur-serif-bold-latin.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+0178, U+0192, U+02C6, U+02DA, U+02DC, U+2000-2042, U+2044, U+204A, U+2053, U+2057, U+2060-2063, U+206A-206F, U+20AC, U+2122, U+2212, U+FB00-FB04;
}
@font-face {
  font-family: "MathACoeur Serif";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/mathacoeur-serif-bold-symboles.woff2") format("woff2");
  unicode-range: U+0100-0130, U+0132-0148, U+014A-0151, U+0154-0177, U+0179-017F, U+02C7-02D9, U+02DB, U+0300-033F, U+0346-036F, U+0387, U+0393-0394, U+0398, U+039E, U+03A0, U+03A8-03A9, U+03B1-03B4, U+03B8, U+03BB-03BC, U+03C0-03C1, U+03C3, U+03C6-03C7, U+03C9, U+03D1, U+03F4, U+2070-2071, U+2074-208E, U+2090-209C, U+20A0-20AB, U+20AD-20C0, U+210C, U+2113, U+2116-2117, U+211F, U+2123, U+2126, U+212D, U+2135, U+214F-218B, U+2190-219B, U+21A8, U+21AE, U+21B6-21B7, U+21BA-21BB, U+21D0-21D5, U+2202-2206, U+220F, U+2211, U+2213, U+2215, U+2219-221A, U+221E, U+2221, U+2225-2228, U+222B, U+2234-2235, U+223C, U+2248, U+225F-2262, U+2264-2265, U+226E-226F, U+2282-2287, U+22BB-22BD, U+2308-230B, U+2318, U+231C-231F, U+2329-232A, U+239B-23AD, U+23D1-23D6, U+25C9-25CC, U+2610-2612, U+2639-263A, U+2640, U+2642, U+266D, U+266F;
}
@font-face {
  font-family: "MathACoeur Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/mathacoeur-serif-italic-latin.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+0178, U+0192, U+02C6, U+02DA, U+02DC, U+2000-2042, U+2044, U+204A, U+2053, U+2057, U+2060-2063, U+206A-206F, U+20AC, U+2122, U+2212, U+FB00-FB04;
}
@font-face {
  font-family: "MathACoeur Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/mathacoeur-serif-italic-symboles.woff2") format("woff2");
  unicode-range: U+0100-0130, U+0132-0148, U+014A-0151, U+0154-0177, U+0179-017F, U+02C7-02D9, U+02DB, U+0300-033F, U+0346-036F, U+0387, U+0393-0394, U+0398, U+039E, U+03A0, U+03A8-03A9, U+03B1-03B4, U+03B8, U+03BB-03BC, U+03C0-03C1, U+03C3, U+03C6-03C7, U+03C9, U+03D1, U+03F4, U+2070-2071, U+2074-208E, U+2090-209C, U+20A0-20AB, U+20AD-20C0, U+210C, U+2113, U+2116-2117, U+211F, U+2123, U+2126, U+212D, U+2135, U+214F-218B, U+2190-219B, U+21A8, U+21AE, U+21B6-21B7, U+21BA-21BB, U+21D0-21D5, U+2202-2206, U+220F, U+2211, U+2213, U+2215, U+2219-221A, U+221E, U+2221, U+2225-2228, U+222B, U+2234-2235, U+223C, U+2248, U+225F-2262, U+2264-2265, U+226E-226F, U+2282-2287, U+22BB-22BD, U+2308-230B, U+2318, U+231C-231F, U+2329-232A, U+239B-23AD, U+23D1-23D6, U+25C9-25CC, U+2610-2612, U+2639-263A, U+2640, U+2642, U+266D, U+266F;
}
@font-face {
  font-family: "MathACoeur Serif";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/mathacoeur-serif-bold-italic-latin.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+0178, U+0192, U+02C6, U+02DA, U+02DC, U+2000-2042, U+2044, U+204A, U+2053, U+2057, U+2060-2063, U+206A-206F, U+20AC, U+2122, U+2212, U+FB00-FB04;
}
@font-face {
  font-family: "MathACoeur Serif";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/mathacoeur-serif-bold-italic-symboles.woff2") format("woff2");
  unicode-range: U+0100-0130, U+0132-0148, U+014A-0151, U+0154-0177, U+0179-017F, U+02C7-02D9, U+02DB, U+0300-033F, U+0346-036F, U+0387, U+0393-0394, U+0398, U+039E, U+03A0, U+03A8-03A9, U+03B1-03B4, U+03B8, U+03BB-03BC, U+03C0-03C1, U+03C3, U+03C6-03C7, U+03C9, U+03D1, U+03F4, U+2070-2071, U+2074-208E, U+2090-209C, U+20A0-20AB, U+20AD-20C0, U+210C, U+2113, U+2116-2117, U+211F, U+2123, U+2126, U+212D, U+2135, U+214F-218B, U+2190-219B, U+21A8, U+21AE, U+21B6-21B7, U+21BA-21BB, U+21D0-21D5, U+2202-2206, U+220F, U+2211, U+2213, U+2215, U+2219-221A, U+221E, U+2221, U+2225-2228, U+222B, U+2234-2235, U+223C, U+2248, U+225F-2262, U+2264-2265, U+226E-226F, U+2282-2287, U+22BB-22BD, U+2308-230B, U+2318, U+231C-231F, U+2329-232A, U+239B-23AD, U+23D1-23D6, U+25C9-25CC, U+2610-2612, U+2639-263A, U+2640, U+2642, U+266D, U+266F;
}
/* polices:fin */

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police-contenu);
  font-size: var(--corps);
  line-height: var(--interligne);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; }
/* Les flèches et accents de KaTeX (\vec, \overrightarrow) sont des SVG dimensionnés en em : la règle précédente les écrasait (26/10/2026). */
.katex svg { max-width: none; }
/* Images fixes de KaTeX (flèche de \vec, intégrales \oiint, \oiiint) : KaTeX donne leur largeur par un attribut style,
   que la CSP du site (style-src 'self') refuse ; sans elle, la flèche de \vec{u} avait une largeur nulle (07/11/2026,
   signalé par CA2). Mêmes largeurs que katex.min.js (0.17.0, staticSvg). */
.katex svg[width="0.471em"] { width: .471em; }
.katex svg[width="0.957em"] { width: .957em; }
.katex svg[width="1.304em"] { width: 1.304em; }
.katex svg[width="1.472em"] { width: 1.472em; }
.katex svg[width="1.98em"] { width: 1.98em; }

a {
  color: var(--lien);
  text-decoration-thickness: from-font;
  text-underline-offset: .15em;
}
a:hover { color: var(--lien-survol); }
/* Une longue adresse affichée en clair se coupe plutôt que de faire défiler la page (RGAA 10.11). */
p a, li a, td a { overflow-wrap: anywhere; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--rayon-petit);
}

::selection { background: var(--info-fond); color: var(--bleu-fonce); }

code, pre, kbd { font-family: var(--police-code); font-size: .92em; }
pre {
  overflow: auto;
  padding: .8em 1em;
  background: var(--fond-doux);
  border: var(--filet) solid var(--bordure);
  border-radius: var(--rayon-petit);
}

/* ---------- Titres : bleu foncé, filet fin, sous-titre doré italique ---------- */
h1, h2, h3, h4 {
  font-family: var(--police-contenu);
  color: var(--titre);
  line-height: 1.2;
  margin: 0 0 .5em;
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); }
h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); }
h3 { font-size: clamp(1.15rem, 1rem + .5vw, 1.35rem); }

h1, h2 {
  padding-bottom: .25em;
  border-bottom: var(--filet) solid var(--bordure-forte);
}

.sous-titre {
  color: var(--accent-texte);
  font-style: italic;
  font-weight: 700;
  margin: -.3em 0 1em;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* ---------- Mise en page ---------- */
.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--espace);
}

.site-contenu {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  padding-block: var(--espace) calc(var(--espace) * 2);
}
.site-contenu:focus { outline: none; }
/* Énoncé et correction reçoivent le focus au chargement, pour être lus en premier par les lecteurs d'écran ;
   ce ne sont pas des commandes : pas de contour. */
.enonce:focus, .correction:focus { outline: none; }

.grille {
  display: grid;
  gap: var(--espace);
  align-items: stretch;
}
.grille-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.grille-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

/* ---------- En-tête et pied ---------- */
.site-entete {
  background: var(--fond);
  border-bottom: 3px solid var(--ciel);
  font-family: var(--police-interface);
}
.site-entete-interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace);
  min-height: 4rem;
  padding-block: .6rem;
  flex-wrap: wrap;
}

.marque {
  display: inline-flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--titre);
  line-height: 1.1;
}
.marque:hover { color: var(--lien-survol); }
.marque-nom {
  font-family: var(--police-contenu);
  font-weight: 700;
  font-size: 1.55rem;
  letter-spacing: .01em;
}
.marque-slogan {
  color: var(--accent-texte);
  font-family: var(--police-contenu);
  font-style: italic;
  font-size: .95rem;
}

.navigation {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .75rem;
  align-items: center;
  margin-left: auto;
}
.navigation a {
  text-decoration: none;
  padding: .45em .8em;
  border-radius: 999px;
  color: var(--texte);
}
.navigation a:hover, .navigation a[aria-current="page"] {
  background: var(--info-fond);
  color: var(--titre);
}
.menu-compte { position: relative; }
/* Bascule clair / sombre (25/10/2026) : un bouton au bout du bandeau, en haut à droite ; sur un écran étroit, il
   reste sur la ligne du nom du site et la navigation passe dessous. La lune propose le sombre, le soleil le clair.
   Carré aux coins arrondis, à la demande d'Alex. */
.bascule-theme { display: flex; margin: 0; }
@media (max-width: 52rem) {
  .site-entete-interieur { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem var(--espace); }
  .site-entete-interieur > .navigation { grid-column: 1 / -1; grid-row: 2; margin-left: 0; }
  .site-entete-interieur > .bascule-theme { grid-column: 2; grid-row: 1; }
}
.bouton-theme { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: var(--filet) solid var(--bordure-forte); border-radius: var(--rayon); background: var(--fond); color: var(--titre); cursor: pointer; }
.bouton-theme:hover { border-color: var(--ciel); background: var(--info-fond); }
.icone-theme { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icone-soleil { display: none; }
:root[data-theme="sombre"] .icone-soleil { display: block; }
:root[data-theme="sombre"] .icone-lune { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) .icone-soleil { display: block; }
  :root:not([data-theme="clair"]) .icone-lune { display: none; }
}
/* Raccourcis de l'élève connecté : dans le bandeau sur un écran large, seulement dans le menu sinon */
@media (max-width: 52rem) { .navigation-raccourci { display: none; } }
/* Le menu déroulant du compte ne sert que lorsque ses éléments ne tiennent pas dans le bandeau (01/11/2026). */
@media (min-width: 52.01rem) { .menu-compte-etroit { display: none; } }
/* Le pseudo de l'élève connecté, à droite du nom du site (07/11/2026) : une pastille dorée au point vert « connecté » ;
   en ambiance match, un dossard aux couleurs du tableau d'affichage, ballon compris. */
.marque-bloc { display: flex; align-items: flex-start; gap: .55rem; min-width: 0; }
.marque-pseudo {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .35rem; padding: .12rem .6rem;
  border: 1.5px solid var(--accent); border-radius: 999px; background: var(--fond); color: var(--titre);
  font: 600 .78rem/1.35 var(--police-interface); letter-spacing: .02em; white-space: nowrap;
}
.marque-pseudo::before { content: ""; flex: none; width: .45rem; height: .45rem; border-radius: 50%; background: var(--succes); }
[data-bilan="match"] .marque-pseudo {
  border: 2px solid #2FAEE0; border-radius: .3rem .3rem .75rem .75rem; background: #0E2A38; color: #F2F6F8;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
[data-bilan="match"] .marque-pseudo::before { content: "⚽"; width: auto; height: auto; border-radius: 0; background: none; font-size: .8rem; text-transform: none; }
@media (max-width: 22rem) { .marque-pseudo { display: none; } }
.navigation-sortie { margin: 0; }
.navigation-sortie button { min-height: 2.75rem; padding: .45em .8em; border: 0; border-radius: 999px; background: none; color: var(--texte); font: inherit; cursor: pointer; }
.navigation-sortie button:hover { background: var(--info-fond); color: var(--titre); }
.menu-compte > summary {
  display: inline-flex; align-items: center; gap: .3rem; min-height: 2.75rem; padding: .45em .8em; border-radius: 999px;
  list-style: none; cursor: pointer; font-weight: 600; color: var(--texte);
}
.menu-compte > summary::-webkit-details-marker { display: none; }
.menu-compte > summary:hover, .menu-compte[open] > summary { background: var(--info-fond); color: var(--titre); }
.menu-compte-chevron { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.menu-compte[open] .menu-compte-chevron { transform: rotate(180deg); }
.menu-compte-liste {
  position: absolute; right: 0; top: calc(100% + .35rem); z-index: 20; min-width: 13rem; margin: 0; padding: .4rem; list-style: none;
  background: var(--fond); border: var(--filet) solid var(--bordure); border-radius: var(--rayon); box-shadow: var(--ombre);
}
.menu-compte-liste li { margin: 0; }
.menu-compte-liste a, .menu-compte-liste button {
  display: block; width: 100%; padding: .6rem .8rem; border: 0; border-radius: var(--rayon-petit); background: none;
  color: var(--texte); font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.menu-compte-liste a:hover, .menu-compte-liste button:hover { background: var(--info-fond); color: var(--titre); }
/* Menu des regards de l’administrateur : un groupe par niveau (sa page, puis chaque classe) */
.menu-regard-liste { left: 0; right: auto; min-width: min(23rem, calc(100vw - 2rem)); }
.menu-regard-classe { padding: .35rem .8rem .5rem; border-bottom: var(--filet) solid var(--bordure); }
.menu-regard-nom { display: block; font-weight: 700; color: var(--titre); }
.menu-regard-classe a { display: block; width: auto; padding: .2rem .5rem; font-size: .92rem; }
.menu-regard-liste > .menu-regard-classe + li:last-child { border-top: 0; margin-top: 0; }
.menu-compte-liste li:last-child { border-top: var(--filet) solid var(--bordure); margin-top: .3rem; padding-top: .3rem; }
.menu-compte-liste form { margin: 0; }
@media (prefers-reduced-motion: reduce) { .menu-compte-chevron { transition: none; } }
/* Écran étroit : le menu s'ouvre sous la navigation et reste dans l'écran, où que soit son nom dans le bandeau. */
@media (max-width: 52rem) {
  .navigation { position: relative; }
  .menu-compte { position: static; }
  .menu-compte-liste, .menu-regard-liste { left: 0; right: auto; top: 100%; width: min(22rem, 100%); min-width: 0; }
}

.site-pied {
  color: var(--texte-doux);
  font-family: var(--police-interface);
  font-size: .9rem;
}
.site-pied-interieur {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem var(--espace);
  padding-block: 1rem;
}
.site-pied p { margin: 0; }
/* Dessin de Marseille du bas de page (24/10/2026) : un dessin au trait vectorisé (docs/outils/pieds.py), posé en masque
   sur un aplat très pâle (--pied-encre) : une silhouette discrète, pleine largeur, proportions gardées, qui remonte
   sous le bas du contenu, lequel passe devant (on l'aperçoit entre les blocs). Le serveur en tire un ; interface.js
   fait tourner les dessins d'une page à l'autre (classe pied-<nom>). */
.pied-dessin { position: relative; z-index: 0; width: 100%; aspect-ratio: var(--pied-rapport, 6); margin-top: -6vw; background: var(--pied-encre); pointer-events: none;
  -webkit-mask: var(--pied) center bottom / 100% auto no-repeat; mask: var(--pied) center bottom / 100% auto no-repeat; }
.js .pied-dessin { visibility: hidden; }
.js .pied-dessin.prete { visibility: visible; }
/* pieds:début — produit par docs/outils/pieds.py */
.pied-port { --pied: url("../img/pieds/port.svg?v=28c8a86c"); --pied-rapport: 6.573; }
.pied-saint-victor { --pied: url("../img/pieds/saint-victor.svg?v=9b3b33ae"); --pied-rapport: 5.204; }
.pied-major { --pied: url("../img/pieds/major.svg?v=cf3452a5"); --pied-rapport: 5.243; }
.pied-longchamp { --pied: url("../img/pieds/longchamp.svg?v=e52d6ad5"); --pied-rapport: 5.469; }
.pied-velodrome { --pied: url("../img/pieds/velodrome.svg?v=d74c7c75"); --pied-rapport: 4.811; }
.pied-corniche { --pied: url("../img/pieds/corniche.svg?v=dbd05dc8"); --pied-rapport: 5.0; }
.pied-prado { --pied: url("../img/pieds/prado.svg?v=a5c42424"); --pied-rapport: 4.531; }
.pied-frioul { --pied: url("../img/pieds/frioul.svg?v=7279e142"); --pied-rapport: 5.303; }
.pied-if { --pied: url("../img/pieds/if.svg?v=6ea365ce"); --pied-rapport: 4.334; }
.pied-auffes { --pied: url("../img/pieds/auffes.svg?v=e3de2f75"); --pied-rapport: 4.118; }
.pied-sormiou { --pied: url("../img/pieds/sormiou.svg?v=8c8f649d"); --pied-rapport: 3.944; }
/* pieds:fin */
.site-pied-bande { border-top: var(--filet) solid var(--bordure); background: var(--fond-doux); }

/* ---------- Lien d'évitement et accessibilité ---------- */
.evitement {
  position: absolute;
  left: 1rem;
  top: 0;
  transform: translateY(-110%);   /* caché de sa propre hauteur : reste invisible à toute taille de texte */
  z-index: 100;
  padding: .6em 1em;
  background: var(--bouton-fond);
  color: var(--bouton-texte);
  border-radius: 0 0 var(--rayon) var(--rayon);
  font-family: var(--police-interface);
  text-decoration: none;
  transition: transform .15s ease;
}
.evitement:focus { transform: none; }

.champ-piege { position: absolute; left: -200vw; width: 1px; height: 1px; overflow: hidden; }   /* champ piège de l'inscription : les visiteurs ne le voient pas */
.reprise-compte { margin: .4rem 0 0; font-size: .9rem; color: var(--texte-doux); }
.visuellement-cache {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Encadrés (charte des cours) ---------- */
.encadre {
  background: var(--fond);
  border: var(--filet) solid var(--bordure-forte);
  border-radius: var(--rayon);
  padding: 1rem 1.2rem;
  box-shadow: var(--ombre);
}
.encadre-titre {
  font-size: 1.1rem;
  margin: 0 0 .7em;
  padding-bottom: .3em;
  border-bottom: var(--filet) solid var(--bordure-forte);
}
.encadre-sous-titre { font-family: var(--police-interface); font-size: 1rem; font-weight: 600; color: var(--titre); margin: 1.1rem 0 .3rem; padding-top: .8rem; border-top: var(--filet) dashed var(--bordure); }
.encadre-entree { display: flex; flex-direction: column; }
.encadre-entree p:last-child { margin-top: auto; padding-top: .5rem; }

.consigne {
  background: var(--info-fond);
  border: var(--filet) solid var(--bordure-forte);
  border-radius: var(--rayon);
  padding: .9rem 1.2rem;
}

.cartouche {
  background: var(--accent-fond);
  border: var(--filet) solid var(--accent);
  border-radius: var(--rayon);
  padding: .8rem 1.1rem;
  color: var(--texte);
}

.exemple, .demonstration {
  padding: .2rem 0 .2rem 1rem;
  margin: 1em 0;
  border-left: 4px solid var(--accent);
}
.demonstration { border-left-color: var(--bleu-moyen); }
.exemple > .etiquette { color: var(--accent-texte); font-weight: 700; }
.demonstration > .etiquette { color: var(--bleu-moyen); font-weight: 700; }

/* ---------- Boutons en pilule ---------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 2.75rem;
  padding: .55em 1.4em;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--bouton-fond);
  color: var(--bouton-texte);
  font-family: var(--police-interface);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;   /* pas de transition de couleur : Chromium la fige à la bascule clair/sombre (07/11/2026) */
}
.bouton:hover { color: var(--bouton-texte); box-shadow: var(--ombre); transform: translateY(-1px); }
.bouton:active { transform: translateY(0); }
.bouton-or { background: var(--bouton-or-fond); color: var(--bouton-or-texte); }
.bouton-or:hover { color: var(--bouton-or-texte); }
.bouton-secondaire { background: transparent; color: var(--titre); border-color: var(--bordure-forte); }
.bouton-secondaire:hover { background: var(--info-fond); color: var(--titre); }
.bouton-inactif, .bouton[aria-disabled="true"], .bouton:disabled {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* ---------- Pastilles et messages ---------- */
.pastille {
  display: inline-block;
  padding: .15em .7em;
  border-radius: 999px;
  font-family: var(--police-interface);
  font-size: .85em;
  font-weight: 600;
  background: var(--info-fond);
  color: var(--titre);
}
.pastille-or { background: var(--accent-fond); color: var(--accent-texte); }
.choix-eleves { margin: 0; padding: 0; border: 0; }
.liste-eleves-choix { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .3rem 1rem; margin: .6rem 0 1rem; padding: 0; list-style: none; font-family: var(--police-interface); }
.liste-eleves-choix input { accent-color: var(--bleu-fonce); }
.liste-rappels { display: grid; gap: .6rem; margin: 0; padding-left: 1.4rem; }
.liste-rappels code { overflow-wrap: anywhere; }
.devoir-amenagement { display: inline-block; margin: .2rem 0 0; padding: .3rem .8rem; border-left: 3px solid var(--accent); background: var(--accent-fond); font-family: var(--police-interface); font-size: .95rem; }

.flash {
  padding: .8rem 1.1rem;
  border-radius: var(--rayon);
  border: var(--filet) solid;
  font-family: var(--police-interface);
  margin-bottom: var(--espace);
}
.flash-succes { background: var(--succes-fond); border-color: var(--succes); color: var(--texte); }
.flash-info { background: var(--info-fond); border-color: var(--bordure-forte); color: var(--texte); }
.flash-alerte { background: var(--alerte-fond); border-color: var(--alerte); color: var(--texte); }

/* ---------- Accueil ---------- */
.hero {
  padding-block: calc(var(--espace) * .5) var(--espace);
  max-width: 46rem;
}
.hero h1 { border-bottom: 0; padding-bottom: 0; }
.hero .sous-titre { font-size: 1.15rem; }
.hero-note { color: var(--texte-doux); font-family: var(--police-interface); font-size: .95rem; }

/* ---------- Pages d'erreur ---------- */
.page-erreur { display: flex; align-items: flex-start; gap: calc(var(--espace) * 1.2); max-width: 46rem; margin-block: var(--espace); }
.erreur-tux { height: 8.5rem; }
.erreur-texte { min-width: 0; }
@media (max-width: 34rem) { .page-erreur { flex-direction: column; } .erreur-tux { height: 6.5rem; } }
.details-erreur {
  font-size: .8rem;
  white-space: pre-wrap;
  word-break: break-word;
  border-color: var(--alerte);
}

/* ---------- Formulaires ---------- */
label { display: block; font-family: var(--police-interface); font-weight: 600; margin-bottom: .3em; }
input[type="text"], input[type="password"], input[type="number"], input[type="search"],
input[type="email"], input[type="date"], select, textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: .5em .8em;
  font: inherit;
  font-family: var(--police-interface);
  color: var(--texte);
  background: var(--fond);
  border: var(--filet) solid var(--bordure-forte);
  border-radius: var(--rayon-petit);
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; }
.champ { margin-bottom: 1.1rem; }
/* Mot de passe : l'œil qui l'affiche en clair, ajouté par interface.js */
.champ-mdp { position: relative; display: flex; align-items: center; }
.champ-mdp input { flex: 1; padding-right: 3rem; }
.bouton-oeil { position: absolute; right: .25rem; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--texte-doux); cursor: pointer; }
.bouton-oeil:hover { color: var(--titre); background: var(--fond-doux); }
.bouton-oeil:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.bouton-oeil svg { width: 1.45rem; height: 1.45rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.bouton-oeil[aria-pressed="true"] { color: var(--titre); }
.bouton-oeil .oeil-barre { display: none; }
.bouton-oeil[aria-pressed="true"] .oeil-barre { display: block; }
.aide-champ { color: var(--texte-doux); font-size: .9rem; font-family: var(--police-interface); margin: .3em 0 0; }
.erreur-champ { color: var(--alerte); font-family: var(--police-interface); font-size: .9rem; margin: .3em 0 0; }

/* ---------- Tableaux ---------- */
table { width: 100%; border-collapse: collapse; font-family: var(--police-interface); font-size: .95rem; }
th, td { padding: .55em .7em; text-align: left; border-bottom: var(--filet) solid var(--bordure); vertical-align: top; }
th { color: var(--titre); border-bottom-color: var(--bordure-forte); }
/* position: relative : les textes réservés aux lecteurs d’écran (positionnés en absolu) restent dans le cadre défilant au lieu d’élargir la page. */
.tableau-defilant { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }


/* =====================================================================
   Pages de contenu
   ===================================================================== */

ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }

.entete-page { margin-bottom: calc(var(--espace) * 1.2); }
.entete-page h1 { margin-bottom: .35em; }
.entete-page .sous-titre { margin-top: 0; }

.rubrique { margin-block: calc(var(--espace) * 1.6); }
.plan { display: grid; gap: 0 var(--espace); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); align-items: start; }
.plan > .rubrique { margin-block: 0 var(--espace); }
.plan h3 { font-size: 1.05rem; margin: 1rem 0 .3rem; }
.plan ul { margin: 0; padding-left: 1.2rem; }
.plan li { margin: .2rem 0; }
.rubrique > h2 { margin-bottom: .6em; }
.rubrique > .sous-titre { margin-top: -.2em; }

.vide {
  color: var(--texte-doux);
  font-style: italic;
  padding: 1rem 1.2rem;
  border: var(--filet) dashed var(--bordure);
  border-radius: var(--rayon);
}

.changer { margin-top: calc(var(--espace) * 2); font-family: var(--police-interface); font-size: .95rem; }
.page-etroite { max-width: var(--largeur-texte); }
.page-etroite > .encadre + .encadre { margin-top: var(--espace); }
/* Sur un grand écran, la page s'élargit mais les paragraphes gardent une longueur de ligne lisible. */
.rubrique > p, .entete-page > p, .site-contenu > p { max-width: var(--largeur-texte); }
.formulaire { max-width: var(--largeur-texte); }
.js .formulaire-parametres .bouton-enregistrer { display: none; }

/* ---------- Fil d'Ariane ---------- */
.fil { font-family: var(--police-interface); font-size: .9rem; color: var(--texte-doux); margin-bottom: 1rem; }
.fil ol { display: flex; flex-wrap: wrap; gap: .2rem; list-style: none; margin: 0; padding: 0; }
.fil li + li::before { content: "›"; margin: 0 .45rem 0 .25rem; color: var(--accent-texte); }
.fil a { color: var(--texte-doux); }
.fil a:hover { color: var(--lien-survol); }
.fil [aria-current] { color: var(--texte); }

/* ---------- Écran de choix ---------- */
.grille-classes { display: flex; flex-wrap: wrap; gap: .8rem; }
.bouton-classe {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 7.5rem; min-height: 3.5rem; padding: .6rem 1.6rem;
  border-radius: 999px;
  background: var(--bouton-fond); color: var(--bouton-texte);
  font-family: var(--police-contenu); font-weight: 700; font-size: 1.35rem;
  text-decoration: none;
  box-shadow: var(--ombre);
  transition: transform .12s ease;
}
.bouton-classe:hover { color: var(--bouton-texte); transform: translateY(-2px); }

.carte-niveau {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 1rem;
  align-items: center;
  height: 100%;
  padding: 1rem 1.2rem;
  border: var(--filet) solid var(--bordure-forte);
  border-radius: var(--rayon);
  background: var(--fond);
  color: var(--texte);
  text-decoration: none;
  box-shadow: var(--ombre);
  transition: transform .12s ease;
}
.carte-niveau:hover { color: var(--texte); border-color: var(--accent); transform: translateY(-2px); }
.carte-niveau-court {
  grid-row: 1 / 3;
  display: grid; place-items: center;
  width: 3.6rem; height: 3.6rem;
  border-radius: 50%;
  background: var(--info-fond); color: var(--titre);
  font-weight: 700; font-size: 1.05rem; text-align: center; line-height: 1.1;
}
.carte-niveau-or .carte-niveau-court { background: var(--accent-fond); color: var(--accent-texte); }
.carte-niveau-libelle { font-weight: 700; color: var(--titre); font-size: 1.15rem; line-height: 1.25; }
.carte-niveau-meta { font-family: var(--police-interface); font-size: .9rem; color: var(--texte-doux); }
/* Projeter en classe (26/10/2026) : par classe, les parties à ouvrir une à une, cochées quand elles sont faites. */
.projection-onglets { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; border-bottom: var(--filet) solid var(--bordure); padding-bottom: .4rem; }
.projection-onglets [role="tab"] { min-height: 2.75rem; padding: .4rem 1.1rem; font: inherit; font-family: var(--police-interface); font-weight: 600; font-size: 1.05rem; color: var(--titre); background: var(--fond); border: 2px solid var(--bordure-forte); border-radius: var(--rayon); cursor: pointer; }
.projection-onglets [role="tab"][aria-selected="true"] { background: var(--accent-texte); color: var(--fond); border-color: var(--accent-texte); }
.projection-onglets [role="tab"]:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.projection-classe h3 { margin: 1rem 0 .4rem; font-size: 1.1rem; }
.projection-sous { font-weight: 400; color: var(--texte-doux); font-family: var(--police-interface); font-size: .95rem; }
.projection-groupe { padding: .6rem .9rem; border: var(--filet) solid var(--bordure); border-radius: var(--rayon); margin: .6rem 0; }
.projection-groupe.est-en-cours { border-color: var(--accent); }
/* Chapitre en cours et chapitre suivant côte à côte quand la largeur le permet ; la série d'automatismes reste au-dessus, sur toute la largeur. */
.projection-chapitres { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: .8rem; margin: .6rem 0; align-items: start; }
.projection-chapitres > .projection-groupe { margin: 0; }
.projection-document { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin: .35rem 0; }
.projection-document-nom { font-weight: 700; min-width: 8rem; }
.projection-parties { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.projection-partie { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: .3rem .9rem .3rem .6rem; font: inherit; font-family: var(--police-interface); font-weight: 600; color: var(--titre); background: var(--fond); border: 2px solid var(--bordure-forte); border-radius: 999px; text-decoration: none; cursor: pointer; }
.projection-partie:hover { border-color: var(--accent); color: var(--titre); }
.projection-partie:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.projection-coche { width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 2px solid var(--bordure-forte); display: inline-grid; place-items: center; font-size: .85rem; line-height: 1; }
.projection-partie.est-ouvert { border-style: dashed; }
.projection-partie.est-ouvert .projection-coche { border-style: dashed; border-color: var(--accent); }
.projection-partie.est-fait { background: var(--succes-fond); border-color: var(--succes); }
.projection-partie.est-fait .projection-coche { background: var(--succes); border-color: var(--succes); color: #fff; }
.projection-partie.est-fait .projection-coche::before { content: "✓"; }
.projection-partie-demarrage { border-color: var(--accent); }
.projection-item { display: inline-flex; align-items: center; gap: .15rem; }
.projection-bascule { display: inline; }
.projection-bascule button { min-width: 2.75rem; min-height: 2.75rem; padding: 0; font: inherit; font-size: 1rem; line-height: 1; color: var(--texte-doux); background: transparent; border: 2px solid transparent; border-radius: 50%; cursor: pointer; }
.projection-bascule button:hover, .projection-bascule button:focus-visible { color: var(--titre); border-color: var(--bordure-forte); }
.projection-bascule button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.projection-fin { margin: .6rem 0 .2rem; }
.projection-vacances { color: var(--texte-doux); margin: .4rem 0; }

.encart-enseignant {
  margin-top: calc(var(--espace) * 2);
  padding: .9rem 1.2rem;
  border-left: 4px solid var(--accent);
  background: var(--accent-fond);
  border-radius: 0 var(--rayon) var(--rayon) 0;
}

/* ---------- Cartes de chapitre ---------- */
.liste-chapitres { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.carte-chapitre {
  display: flex; gap: 1rem; align-items: flex-start;
  height: 100%;
  padding: .9rem 1.1rem;
  border: var(--filet) solid var(--bordure);
  border-left: 4px solid var(--bordure-forte);
  border-radius: var(--rayon);
  background: var(--fond);
  color: var(--texte);
  text-decoration: none;
  transition: box-shadow .12s ease, transform .12s ease;
}
.carte-chapitre:hover { color: var(--texte); border-left-color: var(--accent); box-shadow: var(--ombre); transform: translateY(-1px); }
.carte-chapitre-numero {
  flex: none;
  min-width: 2.2rem;
  font-size: 1.9rem; font-weight: 700; line-height: 1;
  color: var(--accent-texte);
}
.carte-chapitre-corps { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.carte-chapitre-titre { font-weight: 700; color: var(--titre); line-height: 1.3; }
.carte-chapitre-etiquettes { display: flex; flex-wrap: wrap; gap: .35rem; }
.carte-chapitre-etiquettes .pastille { font-size: .78rem; }

/* ---------- Chapitre en cours ---------- */
.chapitre-en-cours {
  padding: 1.1rem 1.3rem;
  border: 2px solid var(--accent);
  border-radius: var(--rayon);
  background: var(--fond);
  box-shadow: var(--ombre);
}
.chapitre-en-cours h3 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); margin-bottom: .8rem; }
.chapitre-en-cours h3 a { text-decoration: none; color: var(--titre); }
.chapitre-en-cours .liste-ressources { margin-bottom: 1rem; }

/* ---------- Ressources ---------- */
.liste-ressources { display: grid; gap: .55rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.ressource {
  display: flex; flex-direction: column; justify-content: center; gap: .15rem;
  height: 100%;
  min-height: 3.4rem;
  padding: .6rem 1rem .6rem 2.6rem;
  border: var(--filet) solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--fond);
  color: var(--texte);
  text-decoration: none;
  position: relative;
}
.ressource::before {
  content: "";
  position: absolute; left: .95rem; top: 50%;
  width: 1rem; height: 1.2rem;
  transform: translateY(-50%);
  border: 2px solid var(--titre);
  border-radius: 2px 6px 2px 2px;
}
.ressource-en-ligne::before { width: 1.05rem; height: 1.05rem; border-radius: 50%; border-color: var(--accent-texte); }
.ressource:hover { color: var(--texte); border-color: var(--bordure-forte); background: var(--info-fond); }
.ressource-titre { font-weight: 700; color: var(--titre); line-height: 1.3; }
.ressource-meta { font-family: var(--police-interface); font-size: .82rem; color: var(--texte-doux); }

/* ---------- Ateliers ---------- */
.liste-ateliers { display: grid; gap: .8rem; margin-top: .9rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 34rem), 1fr)); }
.atelier {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: .9rem 1rem;
  border: var(--filet) solid var(--bordure);
  border-radius: var(--rayon);
}
.atelier-lettre {
  flex: none;
  display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  border: 2px solid var(--accent);
  color: var(--accent-texte);
  font-weight: 700; font-size: 1.25rem;
}
.atelier-corps { flex: 1; min-width: 0; }
.atelier-titre { font-size: 1.05rem; margin: .35rem 0 .6rem; padding: 0; border: 0; }
.atelier-liens { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.atelier-liens .ressource { min-height: 2.9rem; padding-block: .45rem; }

/* ---------- Automatismes ---------- */
.pastilles-liens { display: flex; flex-wrap: wrap; gap: .45rem; }
.pastilles-liens a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 3.4rem; min-height: 2.6rem; padding: .3rem .8rem;
  border-radius: 999px;
  border: var(--filet) solid var(--bordure-forte);
  color: var(--titre);
  font-family: var(--police-interface); font-weight: 600; font-size: .92rem;
  text-decoration: none;
}
.pastilles-liens a:hover { background: var(--info-fond); }
.pastilles-liens li:first-child a { background: var(--bouton-fond); color: var(--bouton-texte); border-color: transparent; }
/* Bouton de téléchargement d'une archive (chapitre, automatismes) et sa description */
.archive-chapitre { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 1.1rem 0 0; }

/* ---------- Chapitres voisins ---------- */
.voisins {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  margin-top: calc(var(--espace) * 2);
  padding-top: var(--espace);
  border-top: var(--filet) solid var(--bordure);
}
.voisin {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .7rem 1rem;
  border-radius: var(--rayon);
  border: var(--filet) solid var(--bordure);
  text-decoration: none;
}
.voisin:hover { border-color: var(--bordure-forte); background: var(--info-fond); }
.voisin-suivant { text-align: right; grid-column: -2; }
.voisin-sens { font-family: var(--police-interface); font-size: .85rem; color: var(--texte-doux); }
.voisin-titre { font-weight: 700; color: var(--titre); }

/* ---------- Navigation principale ---------- */
.navigation a[aria-current] { font-weight: 600; }


/* =====================================================================
   Compte, administration, étiquettes
   ===================================================================== */

.formulaire-inline { display: inline; margin: 0; }
.lien-bouton {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; font-family: var(--police-interface);
  color: var(--lien); text-decoration: underline; text-underline-offset: .15em;
  cursor: pointer;
}
.lien-bouton:hover { color: var(--lien-survol); }
.lien-danger { color: var(--alerte); }
/* Sans script, le bouton Imprimer de la fiche d'inscription ne ferait rien : on ne le montre pas (audit du 09/11/2026). */
html:not(.js) #imprimer { display: none; }
.navigation .lien-bouton { text-decoration: none; padding: .45em .8em; border-radius: 999px; color: var(--texte); }
.navigation .lien-bouton:hover { background: var(--info-fond); color: var(--titre); }
.navigation-compte { font-weight: 600; }
.texte-doux { color: var(--texte-doux); }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

/* ---------- Formulaires ---------- */
.formulaire .bouton + .bouton { margin-left: .5rem; }
.formulaire-ligne { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: flex-end; }
.formulaire-ligne .champ { margin-bottom: 0; flex: 1 1 10rem; }
.formulaire-ligne .champ-large { flex: 3 1 18rem; }
.formulaire-ligne .bouton, .formulaire-ligne .lien-bouton { margin-bottom: .35rem; }
.champ-case { display: flex; align-items: center; gap: .6rem; }
.champ-case label { margin: 0; font-weight: 500; }
.champ-case input { width: 1.2rem; height: 1.2rem; accent-color: var(--bleu-fonce); }
textarea { resize: vertical; line-height: 1.5; }
fieldset { border: var(--filet) solid var(--bordure); border-radius: var(--rayon); padding: .8rem 1rem; margin: 0 0 1.1rem; }
legend { font-family: var(--police-interface); font-weight: 600; color: var(--titre); padding: 0 .4em; }
input[type="datetime-local"], input[type="number"] { min-height: 2.75rem; padding: .4em .6em; font: inherit; font-family: var(--police-interface); color: var(--texte); background: var(--fond); border: var(--filet) solid var(--bordure-forte); border-radius: var(--rayon-petit); }

/* ---------- Navigation d'administration ---------- */
.nav-admin {
  display: flex; flex-wrap: wrap; gap: .3rem;
  margin-bottom: var(--espace);
  padding: .4rem;
  border: var(--filet) solid var(--bordure);
  border-radius: 999px;
  font-family: var(--police-interface);
  background: var(--fond-doux);
}
.nav-admin a { text-decoration: none; padding: .4em .9em; border-radius: 999px; color: var(--texte); }
.nav-admin a:hover { background: var(--info-fond); color: var(--titre); }
.nav-admin a[aria-current] { background: var(--bouton-fond); color: var(--bouton-texte); }

/* Onglets d'une classe (08/11/2026) : Progression, Suivi, Comptes, sous le nom de la classe. */
.nav-classe { display: flex; flex-wrap: wrap; gap: .4rem; margin: -.4rem 0 var(--espace); padding-bottom: .4rem; border-bottom: var(--filet) solid var(--bordure); font-family: var(--police-interface); }
.nav-classe a { min-height: 2.75rem; display: inline-flex; align-items: center; padding: .4rem 1.1rem; border: var(--filet) solid var(--bordure); border-radius: 999px; text-decoration: none; color: var(--texte); font-weight: 600; }
.nav-classe a:hover { background: var(--info-fond); color: var(--titre); }
.nav-classe a[aria-current] { background: var(--accent-texte); color: var(--fond); border-color: var(--accent-texte); }
.nav-classe .nav-classe-apercu { margin-left: auto; font-weight: 400; }

/* « Cette semaine » : ce qu'il y a à faire, puis un bloc par classe. */
.a-faire { list-style: none; margin: 0 0 var(--espace); padding: 0; display: grid; gap: .5rem; }
.a-faire li { padding: .7rem 1rem; border-left: 4px solid var(--accent-texte); background: var(--fond-doux); border-radius: 0 var(--rayon) var(--rayon) 0; }
.semaine-classe .chiffres { margin-bottom: .8rem; }
.semaine-classe .chiffres li { padding: .6rem .9rem; }
.semaine-classe .fiche { margin-bottom: .6rem; }
.semaine-activites { margin: 0 0 .6rem; padding-left: 1.2rem; }
.semaine-activites li { margin: .15rem 0; }

/* ---------- Cartes de classe, fiches ---------- */
.carte-classe-inactive { opacity: .85; }   /* estompé, mais le texte garde 4,5:1 (RGAA 3.2) */
.fiche { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; margin: 0 0 1rem; font-family: var(--police-interface); font-size: .95rem; }
.fiche dt { color: var(--texte-doux); }
.fiche dd { margin: 0; }
.bloc-annee + .bloc-annee { margin-top: 1rem; }
.ligne-inactive { opacity: .85; }
.cellule-actions { display: flex; flex-wrap: wrap; gap: .3rem 1rem; }

/* ---------- Progression (admin) ---------- */
.liste-progression { display: grid; gap: .8rem; }
.ligne-progression { border: var(--filet) solid var(--bordure); border-left: 4px solid var(--bordure); border-radius: var(--rayon); padding: .8rem 1rem; }
.ligne-progression.ouverte { border-left-color: var(--succes); }
.ligne-progression.en-cours { border-left-color: var(--accent); background: var(--accent-fond); }
.ligne-progression-tete { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; }
.ligne-progression-corps { flex: 1 1 16rem; min-width: 0; }
.ligne-progression-corps h3 { font-size: 1.1rem; margin: 0 0 .15em; padding: 0; border: 0; }
.ligne-progression-corps p { margin: 0; font-family: var(--police-interface); font-size: .9rem; }
.details-ressources { margin-top: .6rem; font-family: var(--police-interface); font-size: .92rem; }
.details-ressources summary { cursor: pointer; color: var(--lien); }
.liste-exceptions { display: grid; gap: .35rem; margin-top: .5rem; }
.details-ressources .sous-partie { margin: .9rem 0 .2rem; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ciel-texte); }
.projection-vacances p { margin: 0; padding: 1rem 1.2rem; border: var(--filet) dashed var(--bordure); border-radius: var(--rayon); color: var(--texte-doux); font-style: italic; }
.partie-chapitre { margin-top: .8rem; padding: .7rem .9rem; border: var(--filet) solid var(--bordure); border-radius: var(--rayon-petit); }
.partie-chapitre-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.partie-chapitre-tete .sous-partie { margin: 0 0 .15rem; }
.partie-chapitre-tete p { margin: 0; font-size: .9rem; }
.partie-chapitre-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.partie-chapitre .details-anciens { margin-top: .5rem; font-family: var(--police-interface); font-size: .9rem; }
.etiquette-partage { margin-left: .3rem; padding: .05rem .5rem; border-radius: 999px; background: var(--info-fond); color: var(--texte-doux); font-size: .78rem; font-weight: 600; white-space: nowrap; }
.liste-exceptions li { display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: baseline; padding: .3rem 0; border-top: var(--filet) dashed var(--bordure); }
.exception-titre { font-weight: 600; color: var(--titre); }

/* ---------- Mot de la semaine, citation ---------- */
.mot-semaine {
  margin-bottom: var(--espace);
  padding: 1rem 1.3rem;
  border-left: 4px solid var(--accent);
  background: var(--accent-fond);
  border-radius: 0 var(--rayon) var(--rayon) 0;
}
.mot-semaine p:last-child { margin-bottom: 0; }
.citation { margin-bottom: var(--espace); padding: .4rem 1.3rem; border-left: 4px solid var(--bleu-moyen); }
.citation blockquote { margin: 0; font-style: italic; font-size: 1.1rem; }
.citation-auteur { margin: .2rem 0 0; color: var(--accent-texte); font-weight: 700; font-size: .95rem; }

/* ---------- Étiquettes à découper ---------- */
.etiquettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 0; margin-top: var(--espace); }
.etiquette {
  display: flex; flex-direction: column; gap: .2rem;
  padding: .9rem 1.1rem;
  border: 1px dashed #777;
  font-family: var(--police-interface);
  break-inside: avoid;
}
.etiquette-site { font-size: .8rem; color: var(--texte-doux); }
.etiquette-ligne { font-size: 1rem; }
.etiquette-ligne strong { font-family: var(--police-code); font-size: 1.1rem; letter-spacing: .03em; color: var(--titre); white-space: nowrap; }
.etiquette-note { font-size: .78rem; color: var(--texte-doux); }

/* ---------- Second facteur ---------- */
ol.etapes-activation { list-style: decimal; padding-left: 1.6rem; }
.etapes-activation > li::marker { font-weight: 700; color: var(--titre); }
.etapes-activation > li { margin-bottom: var(--espace); }
.etapes-activation h2 { font-size: 1.15rem; }
.qr-code { width: min(100%, 15rem); margin: .6rem 0; padding: .4rem; background: #fff; border: 1px solid var(--bordure); border-radius: .4rem; }
.qr-code svg { display: block; width: 100%; height: auto; }
.lien-projection code { overflow-wrap: anywhere; font-size: .95rem; }
.cle-totp code { font-size: 1.05rem; letter-spacing: .05em; word-spacing: .3em; overflow-wrap: anywhere; }
.codes-secours { margin-top: var(--espace); }
.codes-secours ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: .4rem 1.5rem; padding-left: 1.6rem; }
.codes-secours code { font-size: 1.1rem; letter-spacing: .05em; }

@media print {
  .pas-a-imprimer, .site-entete, .site-pied, .nav-admin, .flash { display: none !important; }
  .page-fiche .site-contenu { padding: 0; max-width: none; }
  .etiquettes { grid-template-columns: repeat(3, 1fr); }
  .etiquette { color: #000; border-color: #000; }
  .etiquette-ligne strong, .etiquette-site, .etiquette-note { color: #000; }
  .codes-secours, .codes-secours code, .codes-secours h2 { color: #000; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- Impression ---------- */
@media print {
  .site-entete, .site-pied, .evitement, .bouton { display: none; }
  body { color: #000; background: #fff; }
  a { color: inherit; text-decoration: none; }
}

/* =====================================================================
   Suivi
   ===================================================================== */
.chiffres { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); margin-bottom: var(--espace); font-family: var(--police-interface); }
.chiffres li { padding: .9rem 1.1rem; border: var(--filet) solid var(--bordure); border-radius: var(--rayon); color: var(--texte-doux); }
.chiffre { display: block; font-family: var(--police-contenu); font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--titre); }
/* Chapitres et séries plus anciens, repliés pour que les blocs gardent leur taille au fil de l'année */
.details-anciens { margin-top: .8rem; font-family: var(--police-interface); font-size: .92rem; }
.details-anciens summary { cursor: pointer; color: var(--lien); }
.details-anciens summary:hover { color: var(--lien-survol); }
.details-anciens[open] summary { margin-bottom: .6rem; }
.tous-chapitres { margin: .7rem 0 0; font-family: var(--police-interface); font-size: .9rem; }
.liste-chapitres-complets { display: grid; gap: var(--espace); grid-template-columns: repeat(auto-fill, minmax(min(100%, 42rem), 1fr)); margin: 0; padding: 0; list-style: none; }
/* Une carte par chapitre : l'en-tête (lien vers le chapitre) et son chemin d'étapes ensemble ; plusieurs cartes par ligne en grand écran */
.chapitre-complet { display: flex; flex-direction: column; min-width: 0; border: var(--filet) solid var(--bordure); border-radius: calc(var(--rayon) * 1.4); background: var(--info-fond); overflow: hidden; }
.chapitre-complet-entete { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; align-items: center; padding: .8rem 1.2rem; border-bottom: var(--filet) solid var(--bordure); background: var(--fond); color: var(--texte); text-decoration: none; }
.chapitre-complet-entete:hover { background: var(--fond-doux); }
.chapitre-complet-entete:hover .chapitre-complet-titre { text-decoration: underline; }
.chapitre-complet > .etapes-chapitre { flex: 1; margin: 0; border-radius: 0; background: none; }
.chapitre-complet-corps { display: grid; gap: .15rem; }
.chapitre-complet-titre { font-weight: 700; color: var(--titre); }
.chapitre-complet-meta { font-family: var(--police-interface); font-size: .85rem; color: var(--texte-doux); }
.chapitre-complet-jauge { grid-column: 2; width: 100%; }
.chapitre-complet-termine .tuile-numero { color: var(--succes); }
.score { display: inline-block; min-width: 3.6rem; padding: .1em .55em; border-radius: 999px; font-family: var(--police-interface); font-weight: 700; font-size: .88rem; text-align: center; border: var(--filet) solid; }
.score-bon { background: var(--succes-fond); color: var(--succes); border-color: var(--succes); }
.score-moyen { background: var(--accent-fond); color: var(--accent-texte); border-color: var(--accent); }
.score-faible { background: var(--alerte-fond); color: var(--alerte); border-color: var(--alerte); }
.fait { color: var(--succes); font-weight: 600; }
.matrice th, .matrice td { text-align: center; white-space: nowrap; padding: .35em .4em; }
.matrice th[scope="row"] { text-align: left; }
.matrice .score { min-width: 3rem; font-size: .8rem; }
.entete-vertical { writing-mode: vertical-rl; transform: rotate(180deg); display: inline-block; max-height: 9rem; font-size: .8rem; }
tbody th { border-bottom-color: var(--bordure); }

/* =====================================================================
   Exercices
   ===================================================================== */
.entete-seance { margin-bottom: var(--espace); }
.progression-seance { display: flex; gap: .3rem; margin-top: .4rem; }
.progression-seance li {
  flex: 1 1 0; min-width: 1.2rem; height: 1.2rem; border-radius: 999px;
  display: grid; place-items: center;
  background: transparent; border: var(--filet) solid var(--texte-doux);
  color: var(--bouton-texte); font-family: var(--police-interface); font-size: .78rem; font-weight: 700; line-height: 1;
}
/* L'état se lit à la forme et au symbole, pas seulement à la couleur (RGAA 3.1) :
   à venir = contour fin ; en cours = contour épais ; juste = plein et ✓ ; fausse = plein et ✗. */
.progression-seance li.courante { border: 3px solid var(--bouton-fond); }
.progression-seance li.juste { background: var(--succes); border-color: var(--succes); }
.progression-seance li.fausse { background: var(--alerte); border-color: var(--alerte); }
/* Ambiance « façon match » (24/10/2026) : la barre devient un terrain (pelouse rayée, ligne médiane) ; le ballon
   (pastille blanche) marque la question en cours, ⚽ les buts, ✗ les arrêts. Le temps de jeu en pastille. */
.progression-seance.terrain { position: relative; max-width: 52rem; gap: .35rem; padding: .5rem .6rem; border-radius: var(--rayon-petit); background: repeating-linear-gradient(90deg, #2F7D4E 0 3rem, #378A58 3rem 6rem); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }
.progression-seance.terrain::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px solid rgba(255, 255, 255, .55); }
.progression-seance.terrain li { position: relative; border-color: rgba(255, 255, 255, .8); }
.progression-seance.terrain li.courante { background: #FFFFFF; border-color: #FFFFFF; box-shadow: 0 0 0 2px #1B4D2F; }
.progression-seance.terrain li.juste { background: #FFFFFF; border-color: #FFFFFF; font-size: .85rem; }
.progression-seance.terrain li.fausse { background: var(--rouge); border-color: #FFFFFF; color: #FFFFFF; }
.match-temps { display: inline-block; margin: .2rem 0 0; padding: .1rem .7rem; border-radius: 999px; background: var(--accent-fond); border: var(--filet) solid var(--accent); color: var(--texte); font-family: var(--police-interface); font-size: .9rem; font-weight: 700; }
.correction-sens { font-size: .9rem; font-weight: 400; color: var(--texte); }
.mi-temps { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .9rem; margin: 1rem 0 .4rem; padding: .7rem 1rem; border-radius: var(--rayon); background: #1B4D2F; color: #FFFFFF; font-family: var(--police-interface); }
.acces-precision { font-weight: 400; font-size: .85em; color: var(--texte-doux); }
.mi-temps-titre { font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #F4E3A1; }
.mi-temps-score strong { font-size: 1.4rem; margin: 0 .3rem; }
.marquoir-tirs { grid-template-columns: auto auto; justify-content: center; }
.marquoir-tirs .equipe, .marquoir-tirs .marquoir-chiffres { white-space: nowrap; }
.marquoir-tirs .marquoir-chiffres { font-size: clamp(1.9rem, 1rem + 4vw, 4.6rem); padding: .3rem .8rem; }

.question { max-width: 46rem; }
.enonce { font-size: clamp(1.25rem, 1.05rem + .9vw, 1.6rem); font-weight: 400; line-height: 1.4; border: 0; padding: 0; margin-bottom: 1.2rem; }
.formulaire-question fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
.choix-reponses { display: grid; gap: .6rem; }
.choix-reponses-ligne { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 22rem; }
.choix-reponse { position: relative; }
.choix-reponse input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choix-reponse label {
  display: flex; align-items: center; gap: .8rem;
  min-height: 3.2rem; padding: .7rem 1rem;
  border: var(--filet) solid var(--bordure-forte); border-radius: var(--rayon);
  background: var(--fond); font-family: var(--police-contenu); font-weight: 400; font-size: 1.05rem;
  cursor: pointer; margin: 0;
}
.choix-reponse label:hover { background: var(--info-fond); }
.choix-reponse input:checked + label { background: var(--info-fond); border-width: 2px; }
.choix-reponse input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
.choix-lettre { flex: none; width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 50%; background: var(--accent-fond); color: var(--accent-texte); font-family: var(--police-interface); font-weight: 700; font-size: .9rem; }
.saisie-nombre { display: flex; align-items: center; gap: .6rem; max-width: 18rem; }
.saisie-nombre input { font-size: 1.3rem; text-align: center; }
.unite { font-family: var(--police-interface); color: var(--texte-doux); }
/* Clavier mathématique de la saisie numérique (24/10/2026, assets/js/clavier-nombre.js) : le champ composé et le pavé
   du moteur des parcours, aux couleurs du site. */
.champ-nombre .med { display: inline-flex; align-items: center; justify-content: center; min-width: 9rem; min-height: 3rem; padding: .3rem .8rem; font-size: 1.3rem; line-height: 1.2; color: var(--texte); background: var(--fond); border: 2px solid var(--bordure-forte, var(--bordure)); border-radius: var(--rayon); cursor: text; }
.champ-nombre .med:focus { outline: 3px solid var(--accent); outline-offset: 2px; }
.champ-nombre .med.vide:not(:focus)::before { content: "…"; color: var(--texte-doux); }
.champ-nombre .med.vide:not(:focus) .katex { display: none; }
.champ-nombre .med .mcaret { color: var(--accent-texte); animation: med-curseur 1s steps(1) infinite; }
.champ-nombre .med .mph { color: var(--texte-doux); opacity: .7; }
.champ-nombre .med.bad { border-color: var(--alerte); background: var(--alerte-fond); }
@keyframes med-curseur { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .champ-nombre .med .mcaret { animation: none; } }
.champ-nombre .pad-math { display: grid; gap: .4rem; max-width: 22rem; margin: .7rem 0 .4rem; }
.champ-nombre .pad-math.pad4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.champ-nombre .pad-math.pad5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.champ-nombre .pad-math button { min-height: 2.8rem; padding: 0 .2rem; font: inherit; font-family: var(--police-interface); font-size: 1.1rem; font-weight: 600; color: var(--texte); background: var(--fond); border: var(--filet) solid var(--bordure); border-radius: var(--rayon-petit); cursor: pointer; touch-action: manipulation; }
.champ-nombre .pad-math button:hover { border-color: var(--accent); }
.champ-nombre .pad-math button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.champ-nombre .pad-math button.fn { background: var(--info-fond); color: var(--titre); }
.champ-nombre .pad-math button.lettre { border-color: var(--accent); font-weight: 400; }
/* Sur un grand ordinateur sans écran tactile, le clavier donne les chiffres et les lettres : le pavé garde le reste, et π
   (01/11/2026, 03/11/2026). Téléphone, tablette, petite fenêtre : tout le pavé, seul. */
@media (hover: hover) and (pointer: fine) and (min-width: 64rem) and (not (any-pointer: coarse)) {
  .pad-math button.pad-chiffre, .pad-math button.lettre:not([data-k="var:π"]) { display: none; }
}
.champ-nombre .pad-math button .katex { font-size: 1em; }
.champ-nombre .pad-math button[data-k="frac"] .katex { font-size: 1.3em; }
.association-ligne label { font-weight: 400; font-family: var(--police-contenu); font-size: 1.05rem; }
.association select, .ordre select { width: auto; min-width: 12rem; }
.liste-formules { position: relative; max-width: 28rem; }
.liste-formules-bouton {
  display: flex; align-items: center; width: 100%; min-height: 2.75rem;
  padding: .45em 2.2em .45em .8em; position: relative; cursor: pointer; text-align: left;
  font: inherit; font-family: var(--police-contenu); font-size: 1.05rem; line-height: 1.5;
  color: var(--texte); background: var(--fond);
  border: var(--filet) solid var(--bordure-forte); border-radius: var(--rayon-petit);
}
.liste-formules-bouton::after { content: "\25BE"; position: absolute; right: .8em; top: 50%; transform: translateY(-50%); color: var(--accent-texte); }
.liste-formules-bouton.vide { color: var(--texte-doux); font-family: var(--police-interface); }
.liste-formules-manquante .liste-formules-bouton { border: 2px solid var(--alerte); }
.liste-formules-panneau {
  position: absolute; z-index: 30; left: 0; top: calc(100% + 2px); min-width: 100%; max-width: 92vw;
  max-height: 19rem; overflow-y: auto; margin: 0; padding: .25rem 0; list-style: none;
  background: var(--fond); border: var(--filet) solid var(--bordure-forte); border-radius: var(--rayon-petit);
  box-shadow: var(--ombre);
}
.liste-formules-panneau.haut { top: auto; bottom: calc(100% + 2px); }
.liste-formules-panneau:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.liste-formules-panneau li { margin: 0; padding: .5em .8em; cursor: pointer; font-family: var(--police-contenu); font-size: 1.05rem; border-left: 3px solid transparent; }
.liste-formules-panneau li.active { background: var(--info-fond); border-left-color: var(--accent-texte); }
.liste-formules-panneau li[aria-selected="true"] { font-weight: 700; }
.ordre { display: grid; gap: .6rem; margin-bottom: 1rem; }
.ordre-element { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .5rem .8rem; border: var(--filet) solid var(--bordure); border-radius: var(--rayon); }
.ordre-element label { margin: 0; font-weight: 400; font-family: var(--police-contenu); flex: 1 1 14rem; }
.ordre-element select { min-width: 5rem; }
.consigne-ordre { font-family: var(--police-interface); color: var(--texte-doux); }
/* Figures des questions de banque (App\Domaine\Exercice\Figure), dessinées par le serveur */
.figure-question { max-width: 44rem; margin: 0 0 1.2rem; }
.figure-droite { display: block; width: 100%; height: auto; overflow: visible; }
.figure-droite .fd-ligne, .figure-droite .fd-fleche, .figure-droite .fd-grande, .figure-droite .fd-petite { fill: none; stroke: var(--titre); stroke-linecap: round; }
.figure-droite .fd-ligne, .figure-droite .fd-fleche, .figure-droite .fd-grande { stroke-width: 2.4; }
.figure-droite .fd-petite { stroke-width: 1.5; }
.figure-droite .fd-nombre { fill: var(--texte); font: 400 19px var(--police-contenu); }
.figure-droite .fd-point { fill: var(--accent-texte); }
.figure-droite .fd-nom { fill: var(--accent-texte); font: 700 21px var(--police-contenu); }
.figure-droite .fd-saut, .figure-droite .fd-saut-pointe { fill: none; stroke: var(--ciel-texte); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.figure-droite .fd-etiquette { fill: var(--ciel-texte); font: 700 15px var(--police-contenu); }
.figure-repere { display: block; max-width: 100%; height: auto; overflow: visible; }
/* Figure de géométrie des banques (Domaine\Exercice\Geo, 25/10/2026) : couleurs 0 à 6 portées par --fgc */
.figure-geo { display: block; max-width: 100%; height: auto; margin: 0 auto; overflow: visible; --fgc: var(--titre); }
.figure-geo .fg-c1 { --fgc: var(--ciel-texte); }
.figure-geo .fg-c2, .figure-geo .fg-co { --fgc: var(--accent-texte); }
.figure-geo .fg-c3 { --fgc: var(--succes); }
.figure-geo .fg-c4 { --fgc: var(--alerte); }
.figure-geo .fg-c5 { --fgc: var(--bleu-moyen); }
.figure-geo .fg-c6 { --fgc: var(--accent-texte); }
.figure-geo .fg-grille line { stroke: var(--bordure); stroke-width: 1; }
.figure-geo .fg-trait { stroke: var(--fgc); stroke-width: 1.8; stroke-linecap: round; }
.figure-geo .fg-arc { stroke-width: 1.6; }
.figure-geo .fg-vide { fill: none; }
.figure-geo .fg-rempli { fill: var(--fgc); fill-opacity: .14; }
.figure-geo .fg-poly { fill: var(--fgc); stroke: none; }
.figure-geo .fg-pointille { stroke-dasharray: 5 4; }
.figure-geo .fg-code, .figure-geo .fg-marque { stroke: var(--fgc); stroke-width: 1.6; }
.figure-geo .fg-point { fill: var(--fgc); }
.figure-geo .fg-nom { fill: var(--titre); font: 700 15px var(--police-contenu); }
.figure-geo .fg-nomdroite { fill: var(--texte-doux); font: italic 700 14px var(--police-contenu); }
.figure-geo .fg-texte { fill: var(--texte); font: 400 13px var(--police-interface); }
.figure-geo .fg-fleche { fill: var(--fgc); stroke: none; }
.figure-geo .fg-rap-fond { fill: var(--accent-fond); fill-opacity: .55; stroke: var(--accent-texte); stroke-width: 1.2; }
.figure-geo .fg-rap-trait { fill: none; stroke: var(--texte); stroke-width: .7; }
.figure-geo .fg-rap-ext { fill: var(--texte); font: 700 12px var(--police-interface); }
.figure-geo .fg-rap-int { fill: var(--ciel-texte); font: 400 11px var(--police-interface); }
@media (max-width: 40rem) {
  .figure-geo .fg-rap-dix { display: none; }
}
.figure-geo .fg-nomvec { fill: var(--titre); font: italic 700 15px var(--police-contenu); }
.figure-geo .fg-flechenom { fill: none; stroke: var(--titre); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.figure-geo .fg-halo { stroke: var(--fond); stroke-width: 4px; stroke-linejoin: round; }
.figure-geo .fg-eleve { stroke: var(--accent-texte); stroke-width: 2.4; fill: none; stroke-linecap: round; }
.figure-geo .fg-choix { fill: var(--accent-texte); }
.figure-geo .fg-curseur { fill: none; stroke: var(--accent-texte); stroke-width: 2.5; stroke-dasharray: 4 3; }
/* Zones cliquables (type « zone », 26/10/2026) : sous les tracés ; choisie, juste, fausse, attendue. */
.figure-geo .fg-zone { fill: transparent; stroke: transparent; outline: none; }
.figure-geo[role="radiogroup"] .fg-zone, .figure-geo[role="group"] .fg-zone { cursor: pointer; }
.figure-geo .fg-zone:hover, .figure-geo .fg-zone:focus-visible { fill: var(--info-fond); stroke: var(--accent-texte); stroke-width: 1.5; }
.figure-geo .fg-zone-sel { fill: var(--accent-texte); fill-opacity: .4; stroke: var(--accent-texte); stroke-width: 2; }
.figure-geo .fg-zone-juste, .figure-geo .fg-zone-attendu { fill: var(--succes-fond); stroke: var(--succes); stroke-width: 2; }
.figure-geo .fg-zone-attendu { stroke-dasharray: 5 4; }
.figure-geo .fg-zone-faux { fill: var(--alerte-fond); stroke: var(--alerte); stroke-width: 2; }
.zone-js .zone-liste { display: none; }
.zone-liste { border: 0; padding: 0; margin: .4rem 0; }
.zone-choix { display: block; margin: .3rem 0; }
.figure-geo.geo-actif { cursor: crosshair; touch-action: manipulation; border-radius: var(--rayon-petit); }
.figure-geo.geo-actif:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.geo-bloc .geo-nommes { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0; }
.geo-bloc .geo-nommes .bouton { padding: .3rem .8rem; font-size: .9rem; }
.geo-bloc .geo-sans-js { padding: .5rem .8rem; border-left: 4px solid var(--alerte); background: var(--alerte-fond); color: var(--texte); }
.figure-repere .fr-grille { stroke: var(--bordure); stroke-width: 1; }
.figure-repere .fr-axe { stroke: var(--texte-doux); stroke-width: 1.6; }
.figure-repere .fr-graduation { fill: var(--texte-doux); font: 400 13px var(--police-interface); }
.figure-repere .fr-courbe { fill: none; stroke: var(--titre); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.figure-repere .fr-tangente, .figure-repere .fr-droite { stroke: var(--accent-texte); stroke-width: 2.2; }
.figure-repere .fr-point { fill: var(--titre); stroke: var(--fond); stroke-width: 1.5; }
.figure-repere .fr-nuage { fill: var(--accent-texte); stroke: var(--fond); stroke-width: 1.5; }
.figure-repere .fr-nom { fill: var(--titre); font: italic 700 17px var(--police-contenu); }
.figure-repere.tracer-actif { cursor: crosshair; touch-action: manipulation; border-radius: var(--rayon-petit); }
.figure-repere.tracer-actif:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
/* Cercle trigonométrique (24/10/2026) : figure de lecture et question « cercle » (points à cliquer). */
.figure-cercle { display: block; max-width: 100%; height: auto; overflow: visible; }
.figure-cercle .fct-axe { stroke: var(--texte-doux); stroke-width: 1.4; }
.figure-cercle .fct-fleche { fill: none; stroke: var(--texte-doux); stroke-width: 1.4; }
.figure-cercle .fct-cercle { fill: none; stroke: var(--titre); stroke-width: 2.2; }
.figure-cercle .fct-graduation { stroke: var(--titre); stroke-width: 1.6; }
.figure-cercle .fct-repere { fill: var(--texte); font: 700 15px var(--police-contenu); }
.figure-cercle .fct-point { fill: var(--accent-texte); stroke: var(--fond); stroke-width: 1.5; }
.figure-cercle .fct-nom { fill: var(--accent-texte); font: italic 700 17px var(--police-contenu); }
.figure-cercle .fct-projection { stroke: var(--accent-texte); stroke-width: 1.4; stroke-dasharray: 4 4; }
.figure-cercle .fct-pied { fill: var(--accent-texte); }
.figure-cercle .fct-arc, .figure-cercle .fct-pointe { fill: none; stroke: var(--accent-texte); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.figure-cercle .fct-choix { fill: var(--fond); stroke: var(--titre); stroke-width: 2; }
.cercle-bloc { border: 0; margin: 0; padding: 0; min-width: 0; }
.cercle-bloc legend { margin-bottom: .5rem; font-weight: 600; }
.cercle-figure { max-width: 22rem; }
.cercle-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .2rem .8rem; margin-top: .6rem; }
.cercle-liste .aide-champ { grid-column: 1 / -1; }
.cercle-js .cercle-liste { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.figure-cercle .fct-cible { fill: transparent; stroke: none; }
.cercle-js .fct-choix, .cercle-js .fct-cible { cursor: pointer; }
.cercle-js .fct-choix:hover { fill: var(--info-fond); }
.figure-cercle .fct-choix.vise { stroke: var(--focus); stroke-width: 4; }
.figure-cercle .fct-choix.choisi { fill: var(--accent); stroke: var(--accent-texte); }
@media (pointer: coarse) { .figure-cercle .fct-choix { stroke-width: 2.5; } }
.figure-repere .fr-curseur { fill: none; stroke: var(--accent-texte); stroke-width: 2.5; stroke-dasharray: 4 3; }
.figure-repere .fr-choix { fill: var(--accent-texte); }
.tracer-champs { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; }
.tracer-champs input { width: 7rem; }
.tracer-annonce { min-height: 1.5em; font-family: var(--police-interface); font-size: .95rem; }
.figure-cadran { display: block; max-width: 100%; height: auto; overflow: visible; }
.figure-cadran .fc-cercle { fill: var(--fond-doux); stroke: var(--titre); stroke-width: 3; }
.figure-cadran .fc-trait, .figure-cadran .fc-grand-trait { stroke: var(--titre); stroke-linecap: round; }
.figure-cadran .fc-trait { stroke-width: 2; }
.figure-cadran .fc-grand-trait { stroke-width: 3.5; }
.figure-cadran .fc-chiffre { fill: var(--texte); font: 400 17px var(--police-contenu); }
.figure-cadran .fc-minute, .figure-cadran .fc-heure { stroke: var(--titre); stroke-linecap: round; }
.figure-cadran .fc-minute { stroke-width: 3.5; }
.figure-cadran .fc-heure { stroke-width: 7; }
.figure-cadran .fc-prolonge { stroke: var(--texte-doux); stroke-width: 1.8; stroke-dasharray: 6 5; }
.figure-cadran .fc-axe { fill: var(--titre); }
.figure-cadran .fc-point { fill: var(--accent-texte); }
.figure-cadran .fc-nom { fill: var(--accent-texte); font: 700 20px var(--police-contenu); }
.figure-arbre { display: block; max-width: 100%; height: auto; overflow: visible; }
.figure-arbre .fa-branche { stroke: var(--titre); stroke-width: 2; stroke-linecap: round; }
.figure-arbre .fa-racine { fill: var(--titre); }
.figure-arbre .fa-nom, .figure-arbre .fa-issue { fill: var(--titre); font: 700 21px var(--police-contenu); }
.figure-arbre .fa-issue { fill: var(--texte); font-weight: 400; font-size: 18px; }
.figure-arbre .fa-barre { stroke: var(--titre); stroke-width: 1.6; }
.figure-arbre .fa-indice { font-size: .68em; }
.figure-arbre .fa-valeur { fill: var(--texte); font: 400 17px var(--police-contenu); }
.figure-arbre .fa-inconnue { fill: var(--accent-texte); font-weight: 700; font-size: 20px; }
.figure-arbre .fa-fond { fill: var(--fond); }
.figure-arbre .fa-trait { stroke: var(--texte); stroke-width: 1.5; }
/* Arbre d'épreuves répétées (ArbreRepete) : mêmes proportions que Parcours.arbreRepete du moteur. */
.figure-arbre-repete .far-traits line { stroke: var(--titre); stroke-width: 1; stroke-linecap: round; }
.figure-arbre-repete .far-forts line { stroke: var(--accent-texte); stroke-width: 3; stroke-linecap: round; }
.figure-arbre-repete .far-nom { fill: var(--titre); font: 700 14px var(--police-contenu); }
.figure-arbre-repete .far-issue { fill: var(--texte); font: 400 13px var(--police-contenu); }
.figure-arbre-repete .far-forte { fill: var(--accent-texte); font-weight: 700; }
.figure-arbre-repete .far-indice { font-size: 70%; }
.figure-arbre-repete .barre { text-decoration: overline; }
.figure-arbre-repete .far-poids { fill: var(--accent-texte); font: 700 11px var(--police-contenu); text-anchor: middle; }
.figure-arbre-repete .far-barre-fraction { stroke: var(--accent-texte); stroke-width: 1; }
/* Tableau de proportionnalité (24/10/2026) : figure, choix de QCM, et saisie posée sur la case « ? » (Parcours.caseTableau). */
.figure-tableau { display: block; max-width: 100%; height: auto; overflow: visible; }
/* Opérations posées des banques (25/10/2026), d'ordinaire dans la correction */
.figure-correction { max-width: 44rem; margin: .6rem 0 .8rem; }
.figure-operation { display: block; max-width: 100%; height: auto; overflow: visible; }
.figure-operation .fop-chiffre { fill: var(--texte); font: 400 27px var(--police-contenu); }
.figure-operation .fop-clair { fill: var(--texte-doux); }
.figure-operation .fop-resultat { fill: var(--accent-texte); font-weight: 700; }
.figure-operation .fop-retenue { fill: var(--accent-texte); font: 700 15px var(--police-contenu); }
.figure-operation .fop-haut { font-size: 17px; }
.figure-operation .fop-plus { font-size: 17px; }
.figure-operation .fop-titre { fill: var(--titre); font: 700 15px var(--police-contenu); }
.figure-operation .fop-trait, .figure-operation .fop-potence { stroke: var(--titre); stroke-width: 2.4; }
.figure-operation .fop-souligne { stroke: var(--texte-doux); stroke-width: 1.8; }
.figure-operation .fop-barre { stroke: var(--accent-texte); stroke-width: 2; }
.fop-deux { display: flex; flex-wrap: wrap; gap: .6rem 1.8rem; align-items: flex-end; }
.figure-tableau .ftp-cadre { fill: none; stroke: var(--titre); stroke-width: 1.5; }
.figure-tableau .ftp-entete { fill: var(--texte); font: 400 16px var(--police-contenu); }
.figure-tableau .ftp-valeur { fill: var(--texte); font: 400 18px var(--police-contenu); }
.figure-tableau .ftp-inconnue { fill: var(--accent-texte); font-weight: 700; }
.figure-tableau .ftp-trait { fill: none; stroke: var(--titre); stroke-width: 1.6; }
.figure-tableau .ftp-pointe { fill: var(--titre); }
.figure-tableau .ftp-ovale { fill: var(--fond); stroke: var(--titre); stroke-width: 1.4; }
.figure-tableau .ftp-op { fill: var(--accent-texte); font: 700 15px var(--police-contenu); }
.figure-tableau .ftp-cachee { visibility: hidden; }
.figure-tableau .ftp-reponse { fill: var(--succes); font-weight: 700; }
/* Programme d'un énoncé (06/11/2026) : chasse fixe, défile s'il est trop large */
.code-question { max-width: 46rem; margin: 0 0 var(--espace); }
.code-question figcaption { margin-bottom: .3rem; color: var(--texte-doux); font-family: var(--police-interface); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.code-question pre { margin: 0; padding: .8rem 1rem; overflow-x: auto; border: var(--filet) solid var(--bordure); border-left: 4px solid var(--ciel); border-radius: var(--rayon-petit); background: var(--fond-doux); color: var(--texte); font: 400 .95rem/1.5 ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace; tab-size: 4; }
.code-question pre:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Tableau de valeurs (06/11/2026) : l'étiquette de ligne comme une lettre mathématique, son indice plus petit */
.figure-tableau .ftp-etiquette { font-size: 19px; font-style: italic; }
.figure-tableau .ftp-indice { font-size: 13px; }
.correction-tableau { margin: 0 0 .8rem; }
/* Tableau de signes à compléter (26/10/2026) : la ligne des x, puis celle des signes ; un trait vertical à chaque racine. */
.tableau-signes-cadre { overflow-x: auto; margin: 0 0 .8rem; padding-bottom: .2rem; }
.tableau-signes { border-collapse: collapse; border: 1px solid var(--bordure-forte); font-size: 1.05rem; }
.tableau-signes th, .tableau-signes td { padding: .45rem .5rem; text-align: center; vertical-align: middle; white-space: nowrap; }
.tableau-signes th { border-right: 1px solid var(--bordure-forte); font-weight: 400; min-width: 3.2rem; }
.tableau-signes tr + tr > * { border-top: 1px solid var(--bordure-forte); }
.tableau-signes .ts-ecart { min-width: 1.6rem; }
.tableau-signes .ts-zero { --ts-trait: linear-gradient(var(--bordure-forte), var(--bordure-forte)); background: var(--ts-trait) center top / 1px calc(50% - .75em) no-repeat, var(--ts-trait) center bottom / 1px calc(50% - .75em) no-repeat; }
.tableau-signes .ts-marque { margin-left: .25rem; font-size: .85em; font-weight: 700; }
.tableau-signes .ts-signe { min-width: 2.6rem; font-weight: 700; }
.tableau-signes select { min-height: 2.75rem; min-width: 3.2rem; font: inherit; text-align: center; border: 1px solid var(--bordure-forte); border-radius: .4rem; background: var(--fond); color: var(--texte); }
.tableau-signes .ts-champ { width: 6.5rem; min-height: 2.75rem; font: inherit; }
.tableau-signes .med { min-width: 4.5rem; min-height: 2.75rem; padding: .2rem .45rem; font-size: 1.1rem; }
.tableau-signes .ts-juste { color: var(--succes); background-color: var(--succes-fond); }
.tableau-signes .ts-faux { color: var(--alerte); background-color: var(--alerte-fond); }
@media (max-width: 30rem) {
  .tableau-signes { font-size: 1rem; }
  .tableau-signes th, .tableau-signes td { padding: .35rem .2rem; }
  .tableau-signes th { min-width: 2rem; }
  .tableau-signes .ts-ecart, .tableau-signes .ts-signe { min-width: 0; }
  .tableau-signes select { min-width: 2.5rem; padding: 0 .1rem; }
  .tableau-signes .med { min-width: 2.75rem; padding: .2rem .25rem; }
}
.figure-question:has(.figure-tableau) { overflow-x: auto; padding-bottom: .2rem; }
.figure-question .ftp-m250 { min-width: 250px; }
.figure-question .ftp-m300 { min-width: 300px; }
.figure-question .ftp-m350 { min-width: 350px; }
.figure-question .ftp-m400 { min-width: 400px; }
.figure-question .ftp-m450 { min-width: 450px; }
.figure-question .ftp-m500 { min-width: 500px; }
.figure-question .ftp-m550 { min-width: 550px; }
.figure-question .ftp-m600 { min-width: 600px; }
.figure-question .ftp-m650 { min-width: 650px; }
.figure-question .ftp-m700 { min-width: 700px; }
.ftp-zone { position: relative; display: inline-block; vertical-align: top; }
.ftp-zone .ftp-saisie { position: absolute; z-index: 1; transform: translate(-50%, -50%); display: flex; max-width: none; margin: 0; }
.champ-nombre .ftp-saisie .med, .ftp-saisie .med { min-width: inherit; min-height: inherit; padding: .1rem .35rem; font-size: inherit; }
.ftp-saisie .unite { display: none; }
.choix-tableaux { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.choix-tableaux .choix-reponse label { align-items: flex-start; height: 100%; }
.choix-tableaux .figure-tableau { flex: 0 1 auto; min-width: 0; }
/* Rangement par étiquettes (assets/js/ordre.js) : cases séparées par le signe, étiquettes à poser */
.ordre-js .ordre { display: none; }
.ordre-glisser { display: grid; gap: .8rem; margin-bottom: 1rem; }
.ordre-aide { margin: 0; font-family: var(--police-interface); font-size: .92rem; color: var(--texte-doux); }
.ordre-aide-alerte { color: var(--alerte); font-weight: 700; }
.ordre-cases { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ordre-case { display: inline-grid; place-items: center; min-width: 6.5rem; min-height: 3.2rem; padding: .25rem; border: 2px dashed var(--bordure-forte); border-radius: var(--rayon); background: var(--fond-doux); cursor: pointer; }
.ordre-case:hover, .ordre-case:focus-visible { border-color: var(--ciel); background: var(--info-fond); }
.ordre-case-pleine { border-style: solid; border-color: var(--ciel); background: var(--fond); }
.ordre-signe { font: 700 1.6rem/1 var(--police-contenu); color: var(--titre); }
.ordre-reserve { display: flex; flex-wrap: wrap; gap: .5rem; min-height: 3.4rem; padding: .5rem; border-radius: var(--rayon); background: var(--info-fond); }
.ordre-reserve-vide::before { content: "Toutes les étiquettes sont posées."; align-self: center; padding-left: .3rem; font-family: var(--police-interface); font-size: .88rem; color: var(--texte-doux); }
.ordre-etiquette { min-height: 2.6rem; padding: .35rem 1rem; border: 2px solid var(--ciel); border-radius: 999px; background: var(--fond); color: var(--titre); font: 700 1.15rem/1.2 var(--police-contenu); cursor: grab; touch-action: none; user-select: none; }
.ordre-etiquette-choisie { background: var(--accent-fond); border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.ordre-etiquette-glissee { position: relative; z-index: 5; cursor: grabbing; box-shadow: var(--ombre); }
@media (max-width: 30rem) { .ordre-case { min-width: 4.8rem; } .ordre-signe { font-size: 1.3rem; } }

.correction { padding: 1rem 1.3rem; border-radius: var(--rayon); border: 2px solid; margin-bottom: 1rem; }
.correction-juste { border-color: var(--succes); background: var(--succes-fond); }
.correction-fausse { border-color: var(--alerte); background: var(--alerte-fond); }
.correction-verdict { font-family: var(--police-interface); font-weight: 700; font-size: 1.15rem; margin-bottom: .4rem; }
.correction-juste .correction-verdict { color: var(--succes); }
.correction-fausse .correction-verdict { color: var(--alerte); }
/* « Je ne sais pas » (25/10/2026) : la correction sans le rouge de l'erreur, dans le bleu du site. */
.correction-nsp { border-color: var(--ciel); background: var(--info-fond); }
.correction-nsp .correction-verdict { color: var(--titre); }
.actions-question { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.correction-retour { font-style: italic; }
/* Ordre avec intrus (06/11/2026) : les éléments à écarter, barrés (un trait posé par-dessus, qui traverse aussi les formules). */
.barre { position: relative; display: inline-block; text-decoration: none; }
.barre::after { content: ""; position: absolute; left: -2px; right: -2px; top: 52%; border-top: 2px solid currentColor; }
.correction-explication { padding-top: .5rem; border-top: var(--filet) dashed var(--bordure); }
.correction-reference { font-family: var(--police-interface); font-size: .92rem; color: var(--accent-texte); font-weight: 600; margin-bottom: 0; }

.badge-nouveau { display: inline-block; margin-top: .8rem; padding: .5rem 1rem; border-radius: 999px; background: var(--accent-fond); border: var(--filet) solid var(--accent); font-family: var(--police-interface); }

.liste-competences { display: grid; grid-template-columns: minmax(0, 1fr); gap: .45rem; margin-top: .5rem; }
.competence { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .7rem; align-items: center; padding: .5rem .8rem; border-radius: var(--rayon-petit); border: var(--filet) solid var(--bordure); font-family: var(--police-interface); font-size: .95rem; }
.competence-etat { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 2px solid var(--bordure-forte); background: transparent; font-weight: 700; font-size: .85rem; line-height: 1; }
.competence-acquis .competence-etat { background: var(--succes-fond); border-color: var(--succes); color: var(--succes); }
.competence-acquis .competence-etat::before { content: "✓"; }
.competence-en_cours .competence-etat { background: var(--accent-fond); border-color: var(--accent-texte); color: var(--accent-texte); }
.competence-en_cours .competence-etat::before { content: "~"; }
.competence-fragile .competence-etat { background: var(--alerte-fond); border-color: var(--alerte); color: var(--alerte); }
.competence-fragile .competence-etat::before { content: "!"; }
.competence-valeur { color: var(--texte-doux); white-space: nowrap; }

.entrainement { display: grid; gap: var(--espace); }
.choix-portee { border: var(--filet) solid var(--bordure); border-radius: var(--rayon); padding: .2rem 1rem; }
.choix-portee > summary { cursor: pointer; padding: .6rem 0; font-family: var(--police-interface); font-weight: 600; color: var(--lien); }
.choix-portee > summary:hover { color: var(--lien-survol); }
.choix-portee-defaut { font-weight: 400; color: var(--texte-doux); }
.choix-portee-defaut::before { content: " · "; }
.choix-portee[open] { padding-bottom: .8rem; }
.liste-choix-chapitres { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; margin: .4rem 0 .6rem; padding: 0; list-style: none; }
.choix-chapitre { display: flex; align-items: center; gap: .7rem; padding: .55rem .8rem; border: var(--filet) solid var(--bordure); border-radius: var(--rayon-petit); }
.choix-chapitre:has(input:checked) { border-color: var(--bleu-fonce); background: var(--info-fond); }
.choix-chapitre > input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--bleu-fonce); }
.choix-chapitre > label { flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; cursor: pointer; font-family: var(--police-contenu); font-size: 1.05rem; font-weight: 700; color: var(--titre); }
.choix-chapitre-numero { color: var(--accent-texte); }
.choix-chapitre-titre { flex: 1 1 12rem; }
/* Sans classe, les chapitres rangés comme le programme : un groupe par thème, le nom de la partie au-dessus. */
.choix-theme-chapitres { margin: .6rem 0 .2rem; padding: 0; border: 0; }
.choix-theme-chapitres > legend { padding: 0; color: var(--ciel-texte); font-family: var(--police-interface); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.choix-theme-chapitres .choix-partie { margin: .4rem 0 0; font-family: var(--police-interface); font-size: .9rem; }
/* « Mes chapitres » (25/10/2026) : les chapitres du programme à gauche, la liste rangée à droite. Sans script, un rang
   par chapitre ; avec, des étiquettes à ajouter ou à glisser et des boutons monter, descendre, retirer. */
.mes-chapitres-intro { max-width: var(--largeur-texte); }
.mes-chapitres-zones { display: grid; gap: var(--espace); align-items: start; }
.mes-chapitres-zones h2 { margin: 0 0 .3rem; padding: 0; border: 0; font-size: 1.25rem; }
.mes-chapitres-programme .choix-theme-chapitres:first-of-type { margin-top: .2rem; }
.mes-chapitres-ligne { position: relative; }
.mes-chapitres-rang { width: 4.2rem; }
.mes-chapitres-travailles { padding: 1rem 1.1rem 1.1rem; border: var(--filet) solid var(--bordure); border-radius: var(--rayon); background: var(--info-fond); }
.mes-chapitres-liste { margin: .5rem 0 0; padding: 0 0 0 1.4rem; display: grid; gap: .45rem; }
.mes-chapitres-liste > li { padding: .3rem .4rem; font-family: var(--police-contenu); font-weight: 700; color: var(--titre); }
.mes-chapitres-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: var(--espace); }
.mes-chapitres-etat { font-family: var(--police-interface); font-size: .9rem; color: var(--texte-doux); }
.mc-etat-erreur { color: var(--alerte); font-weight: 700; }
/* Avec le script */
.mes-chapitres-js .mes-chapitres-rang, .mes-chapitres-js .mes-chapitres-ligne > label, .mes-chapitres-js .bouton[hidden] { display: none; }
.mc-etiquette { flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; padding: .1rem 0; border: 0; background: none; color: var(--titre); font: 700 1.05rem/1.3 var(--police-contenu); text-align: left; cursor: grab; touch-action: none; user-select: none; }
.mc-etiquette .choix-chapitre-numero { color: var(--accent-texte); }
.mc-etiquette::after { content: "+"; margin-left: auto; padding: 0 .45rem; border-radius: 999px; background: var(--fond-doux); color: var(--ciel-texte); font: 700 1rem/1.5 var(--police-interface); }
.mes-chapitres-js .mes-chapitres-ligne:hover, .mes-chapitres-js .mes-chapitres-ligne:focus-within { border-color: var(--ciel); background: var(--info-fond); }
.mes-chapitres-js .mc-deja { opacity: .55; }
.mes-chapitres-js .mc-deja .mc-etiquette::after { content: "✓"; background: var(--succes-fond); color: var(--succes); }
.mes-chapitres-js .mes-chapitres-liste { list-style: none; padding: 0; min-height: 3.2rem; }
.mc-travaille { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem .35rem .8rem; border: var(--filet) solid var(--bordure); border-radius: var(--rayon-petit); background: var(--fond); cursor: grab; touch-action: none; user-select: none; }
.mc-travaille.mc-en-cours { border-color: var(--ciel); }
.mc-texte { flex: 1; min-width: 0; }
.mc-texte .choix-en-classe { margin-left: .5rem; }
.mc-actions { display: flex; gap: .2rem; flex: none; }
.mc-action { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; padding: 0; border: var(--filet) solid var(--bordure-forte); border-radius: 999px; background: var(--fond); color: var(--titre); font: 700 1.1rem/1 var(--police-interface); cursor: pointer; }
.mc-action:hover, .mc-action:focus-visible { border-color: var(--ciel); background: var(--info-fond); }
.mc-glisse { position: relative; z-index: 5; cursor: grabbing; box-shadow: var(--ombre); }
.mc-zone-cible { outline: 2px dashed var(--ciel); outline-offset: 2px; }
.mes-chapitres-js .mc-liste-vide::before { content: "Dépose ici tes chapitres travaillés."; display: block; padding: .8rem; border: 2px dashed var(--bordure-forte); border-radius: var(--rayon-petit); color: var(--texte-doux); font-family: var(--police-interface); font-size: .9rem; font-weight: 400; }
@media (min-width: 60rem) {
  .mes-chapitres-zones { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .mes-chapitres-travailles { position: sticky; top: var(--espace); }
}
.etat-chapitre { padding: .05rem .6rem; border-radius: 999px; border: var(--filet) solid; font-family: var(--police-interface); font-size: .85rem; font-weight: 600; white-space: nowrap; }
.etat-chapitre-fragile { color: var(--alerte); background: var(--alerte-fond); }
.etat-chapitre-en_cours { color: var(--accent-texte); background: var(--accent-fond); }
.etat-chapitre-acquis { color: var(--succes); background: var(--succes-fond); }
.intention-fermee .bouton[disabled] { opacity: .5; cursor: not-allowed; }
@media (max-width: 30rem) {
  .competence { grid-template-columns: auto minmax(0, 1fr); }
  .competence-valeur { grid-column: 2; white-space: normal; }
}

.questions-du-jour { border: 2px solid var(--accent); background: var(--accent-fond); border-radius: var(--rayon); padding: 1rem 1.3rem; margin-bottom: var(--espace); }
.questions-du-jour h2 { border: 0; padding: 0; font-size: 1.2rem; margin-bottom: .4rem; }
.questions-du-jour p { margin-bottom: .6rem; }

/* ---------- Pages d'explication (aide, parents, à propos) ---------- */
.entete-illustree { display: flex; align-items: center; gap: 1.2rem; }
.entete-illustree .mascotte { width: auto; height: 7rem; flex: none; }
.texte-page h2 { margin-top: 2rem; }
.texte-page li { margin-bottom: .35rem; }

/* ---------- Choix en liste (saisie d'un angle) ---------- */
.choix { display: grid; grid-template-columns: auto 1fr; gap: 0 .6rem; align-items: center; padding: .35rem 0; }
.choix input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--bouton-fond); }
.choix-aide { grid-column: 2; color: var(--texte-doux); font-size: .92em; }

/* Tux est noir : un halo clair le détache du fond sombre. */
:root[data-theme="sombre"] .mascotte-tux { filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, .85)) drop-shadow(0 0 6px rgba(143, 195, 230, .35)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) .mascotte-tux { filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, .85)) drop-shadow(0 0 6px rgba(143, 195, 230, .35)); }
}

/* =====================================================================
   Page de classe : une seule structure, deux présentations par public
   (body[data-public][data-presentation], réglées sur la page Paramètres).

   Ossature (20/10/2026). Trois groupes : l'identité de la classe (.accueil-classe), la colonne principale
   (devoir à rendre, la semaine en classe ou la série de la semaine, le parcours du chapitre, les documents
   distribués) et la colonne de côté (questions du jour, curiosité, S'entraîner, puis suivi et automatismes).
   - téléphone : tout s'empile dans l'ordre des priorités (la semaine, puis le parcours et les trois blocs,
     puis le reste) ;
   - dès 48rem : identité en bandeau, puis deux colonnes ;
   - dès 64rem : trois colonnes, l'identité à gauche et fixe au défilement (le carnet garde son bandeau et une
     seule colonne de côté, comme une page de document) ;
   - dès 90rem et 112rem : les proportions propres à chaque présentation.
   Les priorités 1 et 2 commencent ainsi dans le premier écran dès que la largeur le permet.
   ===================================================================== */
.page-classe { display: grid; gap: var(--espace); grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; margin-bottom: calc(var(--espace) * 1.5); }
.page-classe > * { grid-column: 1 / -1; min-width: 0; }
/* Les deux colonnes sont transparentes à la grille sur téléphone ; de vraies colonnes dès 48rem */
.colonne-principale, .colonne-laterale { display: contents; }
/* Le corps de la page : transparent à la grille pour le carnet ; une vraie grille pour le parcours, la cour et le tableau de bord (01/11/2026) */
.corps-classe { display: contents; }
.indicateurs, .reprise-jauge { display: none; }
.colonne-principale > *, .colonne-laterale > * { grid-column: 1 / -1; min-width: 0; }
/* Téléphone : les devoirs passés, sans devoir à rendre, restent derniers ; le suivi et les séries après les trois blocs */
.bloc-suivi, .bloc-series { order: 4; }
.bloc-devoirs-passes { order: 6; }
.page-classe h2 { margin: 0 0 .35rem; padding: 0; border: 0; }
.surtitre { margin: 0 0 .35rem; font-family: var(--police-interface); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ciel-texte); }

.accueil-classe { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.accueil-texte { flex: 1 1 auto; min-width: 0; }
.accueil-annee { margin: 0; font-family: var(--police-interface); font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ciel-texte); }
.accueil-classe h1 { padding: 0; border: 0; margin: .1em 0 .3em; font-size: clamp(2.4rem, 1.6rem + 3.5vw, 4.4rem); line-height: 1; letter-spacing: -.01em; }
.accueil-classe .bulle { margin: 0; }
.mascotte { display: block; flex: none; width: auto; max-width: none; }
.mascotte-celia { height: clamp(8rem, 5.5rem + 7vw, 12.5rem); }

/* « Changer de chapitre » (25/10/2026) : à droite des flèches ; ouvert, la liste prend toute la largeur du bloc,
   rangée comme le programme (thèmes, parties, chapitres). */
.titre-precision { display: block; margin-top: .25em; font-size: .38em; font-weight: 400; letter-spacing: 0; line-height: 1.2; }
.bloc-series .pastilles-liens { margin-top: .4rem; }
.fleche { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; max-width: 16rem; min-height: 2rem; padding: .15rem .7rem; border: var(--filet) solid var(--bordure-forte); border-radius: 999px; color: var(--titre); text-decoration: none; font-weight: 600; }
.fleche > span[aria-hidden] { font-size: 1.25rem; line-height: 1; }
.fleche-texte { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fleche:hover { background: var(--info-fond); border-color: var(--ciel); }
.choix-partie { display: block; margin: .35rem 0 .1rem; color: var(--texte-doux); font-style: italic; }
.choix-en-classe { margin-left: .45rem; padding: 0 .4rem; border-radius: 999px; background: var(--accent-fond); color: var(--accent-texte); font-size: .75rem; font-weight: 700; white-space: nowrap; }
.depuis { margin: 0 0 1.1rem; color: var(--texte-doux); font-style: italic; }
/* Les deux chapitres à reprendre (01/11/2026) : de petits blocs, seulement le « Tu en es là ». */
.reprises h2 { font-size: 1.25rem; margin: 0 0 .6rem; }
.reprises-liste, .reprise-etapes { margin: 0; padding: 0; list-style: none; }
.reprises-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--espace); }
.reprise { display: flex; flex-direction: column; gap: .55rem; min-width: 0; padding: 1rem 1.1rem; border: var(--filet) solid var(--bordure); border-radius: calc(var(--rayon) * 1.4); background: var(--fond); box-shadow: var(--ombre); }
.reprise h3 { margin: 0; padding: 0; border: 0; font-size: 1.05rem; line-height: 1.3; }
.reprise h3 a { color: var(--titre); text-decoration: none; }
.reprise h3 a:hover { text-decoration: underline; }
.reprise-numero { color: var(--texte-doux); }
.reprise-etape a { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; min-height: 2.75rem; padding: .4rem .6rem; border-radius: var(--rayon); background: var(--info-fond); color: var(--texte); text-decoration: none; }
.reprise-etape a:hover { outline: var(--filet) solid var(--accent); }
.reprise-repere { flex: none; display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border: 3px solid var(--accent); border-radius: 50%; background: var(--fond); color: var(--titre); font-family: var(--police-interface); font-weight: 700; }
.reprise-repere svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.reprise-libelle { flex: 1 1 8rem; min-width: 0; font-weight: 600; line-height: 1.25; }
.reprise-marque { padding: .2rem .55rem; border-radius: 999px; background: var(--accent); color: #0F1B23; font-family: var(--police-interface); font-size: .72rem; font-weight: 700; white-space: nowrap; }
.reprise-avancee { margin: 0; color: var(--texte-doux); font-family: var(--police-interface); font-size: .85rem; }
.reprises-liens { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin: .7rem 0 0; font-family: var(--police-interface); font-size: .9rem; }

.blocs-semaine { display: grid; gap: var(--espace); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); align-content: start; }
.blocs-semaine:empty { display: none; }
.bloc { display: flex; gap: 1rem; align-items: center; padding: 1.1rem 1.2rem; border: var(--filet) solid var(--bordure); border-radius: calc(var(--rayon) * 1.4); background: var(--fond); box-shadow: var(--ombre); }
.bloc h2 { font-size: 1.25rem; }
.bloc p { margin: 0 0 .5rem; }
.bloc p:last-child, .bloc form { margin-bottom: 0; }
.bloc-jour { background: var(--accent-fond); border-color: transparent; }
/* Trois familles, trois teintes de la charte, dans toutes les présentations (24/10/2026) : le chapitre et son parcours
   mis en avant (bleu clair, ou carte blanche ombrée selon la présentation) ; ce qui est du jour en doré clair (questions
   du jour, curiosité, devoirs à rendre, vacances) ; les outils permanents en gris doux (s'entraîner, suivi,
   automatismes, documents, programme). Le titre de la classe garde le ton de sa présentation. */
.bloc-curiosite, .bloc-devoirs { background: var(--accent-fond); border-color: transparent; }
.bloc-entrainement, .bloc-suivi, .bloc-series, .bloc-devoirs-passes { background: var(--fond-doux); border-color: var(--bordure); }
/* « Travailler les exemples » (lycée), en tête du parcours (07/11/2026) : une bande, son icône de cahier, son bouton */
.parcours-exemples {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 0 0 1rem; padding: .8rem 1rem;
  border: var(--filet) solid var(--bordure); border-left: 4px solid var(--accent); border-radius: var(--rayon-petit); background: var(--fond);
}
.exemples-icone { flex: none; width: 2.4rem; height: 2.4rem; padding: .4rem; border-radius: 50%; background: var(--accent-fond); fill: none; stroke: var(--accent-texte); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.exemples-corps { flex: 1 1 16rem; min-width: 0; }
.exemples-titre { margin: 0; color: var(--titre); font-weight: 700; }
.parcours-exemples .aide-champ { margin: .1rem 0 0; }
/* Le carnet : une note dans la marge, sur un filet doré */
[data-public="lycee"][data-presentation="carnet"] .parcours-exemples { border: 0; border-left: 3px solid var(--accent); border-radius: 0; background: none; padding-block: .4rem; }
[data-public="lycee"][data-presentation="carnet"] .exemples-titre { font-family: var(--police-contenu); font-size: 1.05rem; }
[data-public="lycee"][data-presentation="carnet"] .parcours-exemples .aide-champ { font-family: var(--police-contenu); font-style: italic; }
/* Le tableau de bord : une carte compacte, son titre en petites capitales comme les autres blocs */
[data-public="lycee"][data-presentation="tableau"] .parcours-exemples { border-left-width: var(--filet); border-top: 4px solid var(--accent); padding: .6rem .85rem; }
[data-public="lycee"][data-presentation="tableau"] .exemples-titre { color: var(--texte-doux); font-family: var(--police-interface); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
[data-public="lycee"][data-presentation="tableau"] .exemples-icone { width: 2rem; height: 2rem; border-radius: var(--rayon-petit); }
.parcours-chapitre { padding: 1.3rem 1.4rem 1.4rem; border-radius: calc(var(--rayon) * 1.6); background: var(--info-fond); }
.curiosites { padding: 1rem 1.2rem 1.1rem; border-left: 4px solid var(--accent); border-radius: 0 var(--rayon) var(--rayon) 0; background: var(--accent-fond); }
.curiosites .liste-curiosites a { border-color: transparent; background: var(--fond); }
.documents-distribues { order: 5; padding: 1rem 1.2rem 1.1rem; border: var(--filet) solid var(--bordure); border-radius: var(--rayon); background: var(--fond-doux); }
.page-classe ~ .rubrique { padding: 1rem 1.2rem 1.1rem; border: var(--filet) solid var(--bordure); border-radius: var(--rayon); background: var(--fond-doux); }
.bloc-jour .mascotte { height: 6.9rem; }
.gros-numero { flex: none; display: grid; place-items: center; width: 4.6rem; height: 4.6rem; border-radius: 1.2rem; background: var(--titre); color: var(--fond); font: 700 2.3rem/1 var(--police-contenu); transform: rotate(-4deg); }
.bloc-icone { flex: none; width: 3.2rem; height: 3.2rem; fill: none; stroke: var(--ciel-texte); stroke-width: 1.8; }

.tuile-numero { font: 700 1.8rem/1 var(--police-contenu); color: var(--titre); }
.tuile-titre { line-height: 1.25; }

/* Étapes d'un chapitre : pastilles par défaut */
.etapes { display: grid; gap: .9rem .6rem; grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); margin: 0; padding: 0; list-style: none; }
.etape { margin: 0; }
.etape a { display: flex; flex-direction: column; align-items: center; gap: .35rem; color: var(--texte); font-family: var(--police-interface); font-size: .8rem; line-height: 1.2; text-align: center; text-decoration: none; }
.etape-repere { position: relative; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border: 3px solid var(--ciel); border-radius: 50%; background: var(--fond); color: var(--titre); font: 700 1.35rem/1 var(--police-contenu); }
.etape-repere svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.etape a:hover .etape-repere { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ciel) 35%, transparent); }
.etape-faite .etape-repere { background: var(--ciel); color: #0F1B23; }
.etape-faite .etape-repere::after {
  content: "✓"; position: absolute; right: -6px; bottom: -4px; display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%;
  background: var(--succes); color: var(--fond); font: 700 .75rem/1 var(--police-interface);
}
/* Cours « vu » (vérification de la partie réussie, 24/10/2026) : coche discrète ; « à revoir » : flèche dorée. */
.etape-vue .etape-repere { border-color: var(--bordure); color: var(--texte-doux); }
.etape-vue .etape-repere::after { content: "✓"; background: var(--fond-doux); color: var(--texte-doux); border: 2px solid var(--bordure-forte); }
.etape-a-revoir .etape-repere::after { content: "↺"; background: var(--accent-fond); color: var(--accent-texte); border: 2px solid var(--accent-texte); }
.etape-a-reprendre .etape-repere::after, .etape-en-cours .etape-repere::after, .etape-vue .etape-repere::after, .etape-a-revoir .etape-repere::after {
  position: absolute; right: -6px; bottom: -4px; display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%;
  font: 700 .75rem/1 var(--police-interface);
}
.etape-a-reprendre .etape-repere::after { content: "!"; background: var(--accent-texte); color: var(--fond); }
.etape-en-cours .etape-repere::after { content: "…"; background: var(--accent-fond); color: var(--accent-texte); border: 2px solid var(--accent-texte); }
.chapitre-termine { display: inline-flex; gap: .35rem; align-items: center; margin: .4rem 0 0; padding: .2rem .7rem; border-radius: 999px; background: var(--succes-fond); color: var(--succes); font: 700 .9rem/1.3 var(--police-interface); }
.etapes-legende { margin: .3rem 0 0; font-size: .82rem; color: var(--texte-doux); }
.etapes-regle { flex-basis: 100%; margin: .4rem 0 0; font-size: .85rem; color: var(--texte-doux); }
.curiosite-grande { flex: none; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--ciel); color: var(--fond); font-size: 1.6rem; }
.bloc-curiosite h2 a { color: var(--titre); text-decoration: none; }
.bloc-curiosite h2 a:hover { text-decoration: underline; }
[data-public="lycee"][data-presentation="carnet"] .curiosite-grande { display: none; }
.liste-curiosites { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.liste-curiosites a { display: flex; gap: .6rem; align-items: baseline; padding: .7rem .9rem; border: var(--filet) solid var(--bordure); border-radius: var(--rayon); background: var(--fond-doux); color: var(--texte); text-decoration: none; font-family: var(--police-contenu); }
.liste-curiosites a:hover { border-color: var(--ciel); }
.curiosite-etoile { color: var(--ciel-texte); }
.etapes-conseil { margin: .5rem 0 0; padding: .45rem .8rem; border-left: 3px solid var(--accent); background: var(--accent-fond); font-family: var(--police-interface); font-size: .92rem; }
/* Rôle et durée d'une étape (manifeste du chapitre) : visibles dans les présentations en liste, cachés dans les pastilles */
.etape-detail { display: none; font-family: var(--police-interface); font-size: .78rem; color: var(--texte-doux); white-space: nowrap; }
[data-public="lycee"] .etape-detail { display: inline; }
/* Vignettes en ligne (tableau du lycée, parcours du collège) : le libellé garde sa place, le détail passe dessous */
[data-public="lycee"][data-presentation="tableau"] .etape a, [data-public="college"][data-presentation="parcours"] .etape a { flex-wrap: wrap; }
[data-public="lycee"][data-presentation="tableau"] .etape-libelle, [data-public="college"][data-presentation="parcours"] .etape-libelle { flex: 1 1 0; min-width: 0; overflow-wrap: normal; }
[data-public="lycee"][data-presentation="tableau"] .etape-detail { flex-basis: 100%; margin-left: calc(2.4rem + .7rem); white-space: normal; }
[data-public="lycee"][data-presentation="tableau"] .etape-ici-marque { flex-basis: 100%; width: max-content; margin-left: calc(2.4rem + .7rem); }
.legende-vu { background: var(--fond-doux); color: var(--texte-doux); border: 2px solid var(--bordure-forte); }
.legende-a-revoir { background: var(--accent-fond); color: var(--accent-texte); border: 2px solid var(--accent-texte); }
.legende-a-reprendre, .legende-en-cours, .legende-vu, .legende-a-revoir { display: inline-grid; place-items: center; width: 1.1rem; height: 1.1rem; margin-right: .2rem; border-radius: 50%; font: 700 .7rem/1 var(--police-interface); vertical-align: .1em; }
.legende-a-reprendre { background: var(--accent-texte); color: var(--fond); }
.legende-en-cours { background: var(--accent-fond); color: var(--accent-texte); border: 2px solid var(--accent-texte); }
.etape-ici .etape-repere { border-color: var(--accent); border-width: 4px; }
.etape-ici-marque { padding: .2rem .55rem; border-radius: 999px; background: var(--accent); color: #0F1B23; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.etape-libelle { max-width: 100%; overflow-wrap: anywhere; }
.etape-tour { display: block; font-family: var(--police-interface); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-texte); overflow-wrap: normal; }


/* ---------- Collège · « Le parcours » : le chapitre comme un chemin ---------- */
[data-public="college"][data-presentation="parcours"] .accueil-classe {
  overflow: hidden; padding: 1.3rem 1.3rem 0; border-radius: 1.5rem; background: var(--titre); color: var(--fond);
}
[data-public="college"][data-presentation="parcours"] .accueil-texte { padding-bottom: 1.2rem; }
[data-public="college"][data-presentation="parcours"] .accueil-classe h1,
[data-public="college"][data-presentation="parcours"] .accueil-annee { color: inherit; }
[data-public="college"][data-presentation="parcours"] .accueil-classe .bulle { padding: .7rem .9rem; border: 0; border-radius: var(--rayon); background: color-mix(in srgb, var(--fond) 14%, transparent); color: inherit; font-size: .95rem; }
[data-public="college"][data-presentation="parcours"] .accueil-classe .bulle a,
[data-public="college"][data-presentation="parcours"] .accueil-classe .citation-auteur { color: inherit; }
[data-public="college"][data-presentation="parcours"] .mascotte-celia { height: 7rem; margin: 0 0 0 auto; }
/* Le chemin : vertical (une étape par ligne, pointillé à gauche) quand la place manque ; horizontal dès 60rem sur la
   page d'un chapitre et la liste des chapitres (pleine largeur), dès 90rem sur la page de classe (le chapitre y a
   7 colonnes sur 12). En lignes, le rôle et la durée trouvent leur place sous le libellé. */
[data-public="college"][data-presentation="parcours"] .etapes { display: flex; flex-direction: column; gap: .7rem; padding: .2rem 0 0 .3rem; }
[data-public="college"][data-presentation="parcours"] .etape { position: relative; min-width: 0; }
[data-public="college"][data-presentation="parcours"] .etape:not(:last-child)::after {
  content: ""; position: absolute; top: 1.6rem; left: calc(1.6rem - 2.5px); width: 0; height: calc(100% + .7rem); border-left: 5px dotted var(--ciel);
}
[data-public="college"][data-presentation="parcours"] .etape a { position: relative; flex-direction: row; flex-wrap: wrap; gap: .8rem; font-size: .95rem; text-align: left; }
[data-public="college"][data-presentation="parcours"] .etape-repere { z-index: 1; }
[data-public="college"][data-presentation="parcours"] .etape-detail { display: inline; flex-basis: 100%; margin: -.4rem 0 0 calc(3.2rem + .8rem); white-space: normal; }
[data-public="college"][data-presentation="parcours"] .etape-ici .etape-repere { width: 3.8rem; height: 3.8rem; margin: 0 0 0 -.3rem; box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 30%, transparent); }

/* ---------- Collège · « La cour » : mosaïque de cartes, Célia dans sa bulle ---------- */
[data-public="college"][data-presentation="cour"] .accueil-classe {
  align-items: flex-end; padding: 1.5rem 1.5rem 0; border-radius: 1.75rem;
  background: radial-gradient(circle at 88% 118%, var(--ciel) 0 9rem, transparent 9.05rem), var(--info-fond);
}
[data-public="college"][data-presentation="cour"] .accueil-texte { max-width: 36rem; padding-bottom: 1.5rem; }
[data-public="college"][data-presentation="cour"] .accueil-classe .bulle { padding: 1rem 1.2rem; border: 2px solid var(--ciel); border-radius: 1.25rem; background: var(--fond); box-shadow: var(--ombre); font-size: 1.05rem; }
[data-public="college"][data-presentation="cour"] .mascotte-celia { margin-right: 1rem; }
[data-public="college"][data-presentation="cour"] .parcours-chapitre { border: var(--filet) solid var(--bordure); background: var(--fond); box-shadow: var(--ombre); }
[data-public="college"][data-presentation="cour"] .etape-doc .etape-repere { border-radius: 1rem; }

/* Page d'un chapitre : le chemin des étapes en tête, au collège */
.etapes-chapitre { margin: 0 0 calc(var(--espace) * 1.4); padding: 1.1rem 1.2rem 1.2rem; border-radius: calc(var(--rayon) * 1.4); background: var(--info-fond); }
.atelier { scroll-margin-top: 1rem; }
.atelier:target { outline: 3px solid var(--ciel); outline-offset: 3px; }

/* =====================================================================
   Bilan d'une séance : classique (tous) ou façon match (collège, au choix)
   ===================================================================== */
.entete-bilan { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; }
.choix-presentation { display: inline-flex; padding: 3px; border: var(--filet) solid var(--bordure); border-radius: 999px; background: var(--fond); font-family: var(--police-interface); font-size: .9rem; }
.choix-presentation button { min-height: 2.4rem; padding: .4rem .95rem; border: 0; border-radius: 999px; background: none; color: var(--texte-doux); font: inherit; cursor: pointer; }
.choix-presentation button[aria-pressed="true"] { background: var(--bouton-fond); color: var(--bouton-texte); }
.choix-presentation button:hover { color: var(--titre); }
.choix-presentation button[aria-pressed="true"]:hover { color: var(--bouton-texte); }

.bilan-grille { display: grid; gap: var(--espace); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; margin-bottom: var(--espace); }
.bilan-score { display: grid; justify-items: center; gap: .5rem; padding: 1.4rem 1rem; border-radius: calc(var(--rayon) * 1.6); background: var(--info-fond); text-align: center; }
.anneau { position: relative; width: 11rem; height: 11rem; }
.anneau svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anneau circle { fill: none; stroke-width: 12; }
.anneau-fond { stroke: var(--bordure); }
.anneau-valeur { stroke: var(--ciel); stroke-linecap: round; }
.anneau-chiffre { position: absolute; inset: 0; display: grid; place-content: center; margin: 0; line-height: 1; }
.anneau-chiffre .chiffre { font: 700 3rem/1 var(--police-contenu); color: var(--titre); }
.anneau-sur { display: block; margin-top: .25rem; font-family: var(--police-interface); font-size: 1rem; color: var(--texte-doux); }
.bilan-message { margin: .2rem 0 0; font-size: 1.45rem; font-weight: 700; color: var(--titre); }
.bilan-conseil { margin: 0; color: var(--texte-doux); }
.bilan-score .mascotte { height: 7.5rem; margin-top: .3rem; }
.bilan-detail { padding: 1.3rem; border: var(--filet) solid var(--bordure); border-radius: calc(var(--rayon) * 1.6); background: var(--fond); box-shadow: var(--ombre); }
.bilan-detail h2 { margin-top: 0; }
.bilan-progresser { margin: 1.2rem 0 .5rem; padding: 0; border: 0; font-size: 1.05rem; }
.liens-pastilles { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.liens-pastilles a { display: inline-block; padding: .45rem .9rem; border: 2px solid var(--ciel); border-radius: 999px; font-family: var(--police-interface); font-weight: 600; text-decoration: none; }
.liens-pastilles a:hover { background: var(--info-fond); }
@media (max-width: 48rem) { .bilan-grille { grid-template-columns: minmax(0, 1fr); } }

/* Façon match : le tableau d'affichage, mêmes couleurs dans les deux thèmes */
.tableau-match {
  display: grid; gap: 1.2rem; max-width: 60rem; margin-bottom: var(--espace); padding: 1.4rem; border-radius: 1.25rem;
  background: #0E2A38 repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 60px, transparent 60px 120px);
  color: #F2F6F8; box-shadow: var(--ombre); font-family: var(--police-interface);
}
.tableau-match a { color: #6CCBF2; }
.marquoir { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; text-align: center; }
.equipe { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.equipe-toi { color: #6CCBF2; }
.marquoir-chiffres { padding: .3rem 1.2rem; border: 2px solid #2FAEE0; border-radius: .75rem; background: #061820; font-size: clamp(2.6rem, 1.8rem + 4vw, 4.6rem); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.sifflet { margin: 0; color: #D9BB79; font-family: var(--police-contenu); font-style: italic; text-align: center; }
.frise { display: grid; grid-template-columns: repeat(auto-fit, minmax(2.4rem, 1fr)); gap: .4rem; margin: 0; padding: 0; list-style: none; }
.frise li { display: grid; justify-items: center; gap: .25rem; color: #A9C3CF; font-size: .72rem; font-weight: 600; }
.frise li > span:first-child { display: grid; place-items: center; width: 100%; max-width: 2.6rem; aspect-ratio: 1; border-radius: 50%; font-size: 1.1rem; }
.frise .but > span:first-child { background: #2FAEE0; color: #0F1B23; }
.frise .rate > span:first-child { color: #E39A93; box-shadow: inset 0 0 0 2px #E39A93; }
.faits-match { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: .8rem; }
.fait-match { margin: 0; padding: .8rem 1rem; border-radius: .75rem; background: rgba(255, 255, 255, .06); }
.fait-match-titre { display: block; margin-bottom: .3rem; color: #D9BB79; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.match-mascotte { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 0; color: #6CCBF2; font-family: var(--police-contenu); font-size: 1.3rem; font-weight: 700; }
.match-mascotte .mascotte { height: 6rem; }

/* Avancée des activités en ligne d'un chapitre (élève connecté) */
.etapes-avancee { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; margin: 0 0 1rem; font-family: var(--police-interface); font-size: .9rem; color: var(--texte-doux); }
.etapes-avancee p { margin: 0; }
.etapes-jauge { flex: 1 1 8rem; height: .45rem; border: 0; border-radius: 999px; background: var(--bordure); overflow: hidden; appearance: none; }
.etapes-jauge::-webkit-progress-bar { background: var(--bordure); border-radius: 999px; }
.etapes-jauge::-webkit-progress-value { background: var(--ciel-texte); border-radius: 999px; }   /* 3:1 sur le fond (RGAA 3.3) */
.etapes-jauge::-moz-progress-bar { background: var(--ciel-texte); border-radius: 999px; }

/* ---------- Accès rapides de la semaine (page de classe, lycée) ---------- */
.acces-rapides { padding: 1rem 1.2rem 1.1rem; border: 0; border-left: 4px solid var(--accent); border-radius: 0 var(--rayon) var(--rayon) 0; background: var(--accent-fond); }
.acces-rapides h2 { margin-bottom: .2rem; }
.acces-chapitre { margin: 0 0 .7rem; }
.acces-message { max-width: var(--largeur-texte); margin: .4rem 0 0; font-size: 1.08rem; font-style: italic; }
.bloc-vacances { background: var(--info-fond); border-color: transparent; }
.acces-groupes { display: flex; flex-wrap: wrap; gap: .9rem 2.2rem; }
.acces-groupe h3 { margin: 0 0 .4rem; font-family: var(--police-interface); font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--texte-doux); }
.acces-liens { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.acces-liens a { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.6rem; padding: .4rem 1rem; border: 2px solid var(--ciel); border-radius: 999px; background: var(--fond); color: var(--titre); font-family: var(--police-interface); font-weight: 700; text-decoration: none; }
.acces-liens a:hover { background: var(--info-fond); }
.acces-liens a.acces-coche { border-color: var(--succes); color: var(--succes); }
.acces-marque { display: inline-grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--succes); color: var(--fond); font-size: .75rem; line-height: 1; }
.acces-legende { margin: .7rem 0 0; font-family: var(--police-interface); font-size: .82rem; color: var(--texte-doux); }

/* ---------- Documents distribués en classe (page de classe, lycée) ---------- */
.documents-distribues h2 { margin-bottom: .2rem; }
.documents-distribues .sous-titre { margin-top: 0; }
.distribues-grille { display: grid; gap: var(--espace); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.distribues-ateliers { grid-column: 1 / -1; }
.distribues-groupe h3 { margin: 0 0 .5rem; font-size: 1.05rem; }

/* ---------- Lycée · « Le carnet » : une page de document, fidèle à la charte LaTeX ---------- */
[data-public="lycee"][data-presentation="carnet"] .accueil-classe { display: block; padding-bottom: .6rem; border-bottom: 2px solid var(--titre); box-shadow: 0 3px 0 -2px var(--accent); }
[data-public="lycee"][data-presentation="carnet"] .accueil-annee { color: var(--accent-texte); font-family: var(--police-contenu); font-size: 1rem; font-style: italic; font-weight: 400; letter-spacing: 0; text-transform: none; }
[data-public="lycee"][data-presentation="carnet"] .accueil-classe h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); }
[data-public="lycee"][data-presentation="carnet"] .accueil-classe .citation,
[data-public="lycee"][data-presentation="carnet"] .accueil-classe .mot-semaine { max-width: 46rem; border-left-color: var(--ciel); background: transparent; }
[data-public="lycee"][data-presentation="carnet"] .etapes { display: block; }
[data-public="lycee"][data-presentation="carnet"] .etape a { flex-direction: row; align-items: center; gap: 1rem; padding: .7rem 0; border-bottom: var(--filet) solid var(--bordure); font-family: var(--police-contenu); font-size: 1.05rem; text-align: left; }
[data-public="lycee"][data-presentation="carnet"] .etape a:hover .etape-libelle { text-decoration: underline; }
[data-public="lycee"][data-presentation="carnet"] .etape-repere { width: 2rem; height: auto; border: 0; border-radius: 0; background: none; color: var(--accent-texte); font-size: 1.55rem; }
[data-public="lycee"][data-presentation="carnet"] .etape a:hover .etape-repere { box-shadow: none; }
[data-public="lycee"][data-presentation="carnet"] .etape-faite .etape-repere { background: none; color: var(--accent-texte); }
[data-public="lycee"][data-presentation="carnet"] .etape-faite .etape-repere::after, [data-public="lycee"][data-presentation="carnet"] .etape-vue .etape-repere::after, [data-public="lycee"][data-presentation="carnet"] .etape-a-revoir .etape-repere::after { content: none; }
[data-public="lycee"][data-presentation="carnet"] .etape-vue .etape-libelle::after { content: "vu"; float: right; margin-left: 1rem; color: var(--texte-doux); font-family: var(--police-interface); font-size: .82rem; font-weight: 600; }
[data-public="lycee"][data-presentation="carnet"] .etape-a-revoir .etape-libelle::after { content: "à revoir"; float: right; margin-left: 1rem; color: var(--accent-texte); font-family: var(--police-interface); font-size: .82rem; font-weight: 600; }
[data-public="lycee"][data-presentation="carnet"] .etape-libelle { flex: 1; color: var(--titre); font-weight: 700; }
[data-public="lycee"][data-presentation="carnet"] .etape-faite .etape-libelle::after { content: "fait"; float: right; margin-left: 1rem; color: var(--succes); font-family: var(--police-interface); font-size: .82rem; font-weight: 600; }
[data-public="lycee"][data-presentation="carnet"] .etape-ici .etape-repere { border: 0; }
/* Téléphone en portrait (demande d'Alex, 09/11/2026) : le rôle et la durée ne volent plus la place du libellé, ils passent
   dessous, alignés sur lui ; la marque « Tu en es là » aussi. */
@media (max-width: 40rem) {
  [data-public="lycee"][data-presentation="carnet"] .etape a { flex-wrap: wrap; row-gap: .2rem; }
  [data-public="lycee"][data-presentation="carnet"] .etape-libelle { flex: 1 1 0; min-width: 0; }
  [data-public="lycee"][data-presentation="carnet"] .etape-detail,
  [data-public="lycee"][data-presentation="carnet"] .etape-ici-marque { flex-basis: 100%; width: max-content; max-width: 100%; margin-left: 3rem; white-space: normal; }
}
[data-public="lycee"][data-presentation="carnet"] .bloc { display: block; padding: 1rem 1.1rem; border: var(--filet) solid var(--titre); border-radius: var(--rayon-petit); box-shadow: none; }
[data-public="lycee"][data-presentation="carnet"] .bloc h2 { margin-bottom: .6rem; padding-bottom: .35rem; border-bottom: var(--filet) solid var(--titre); font-size: 1.1rem; }
[data-public="lycee"][data-presentation="carnet"] .bloc-jour { border: 0; border-left: 4px solid var(--accent); border-radius: 0; background: var(--accent-fond); }
[data-public="lycee"][data-presentation="carnet"] .bloc-jour h2 { border: 0; }
[data-public="lycee"][data-presentation="carnet"] .gros-numero,
[data-public="lycee"][data-presentation="carnet"] .bloc-icone { display: none; }
[data-public="lycee"][data-presentation="carnet"] .bloc-automatismes .surtitre { display: none; }
[data-public="lycee"][data-presentation="carnet"] .documents-distribues h2 { padding-bottom: .3rem; border-bottom: var(--filet) solid var(--titre); }
[data-public="lycee"][data-presentation="carnet"] .tuile-numero { color: var(--accent-texte); }
/* Trois familles, trois teintes de la charte (24/10/2026), pour lire la page d'un coup d'œil à toute largeur :
   bleu clair = le chapitre et son parcours (apprendre) ; doré clair = ce qui est du jour (questions, curiosité, devoirs
   à rendre, vacances) ; gris doux = les outils permanents (s'entraîner, suivi, automatismes, documents, programme).
   Le titre de la classe reste sur le blanc de la page. */
[data-public="lycee"][data-presentation="carnet"] .parcours-chapitre { padding: 1.2rem 1.4rem 1.3rem; border-radius: var(--rayon-petit); background: var(--info-fond); }
[data-public="lycee"][data-presentation="carnet"] .parcours-chapitre > h2 { padding-bottom: .3rem; border-bottom: var(--filet) solid var(--titre); }
[data-public="lycee"][data-presentation="carnet"] .etape a { border-bottom-color: color-mix(in srgb, var(--titre) 22%, transparent); }
[data-public="lycee"][data-presentation="carnet"] .etape:last-child a { border-bottom: 0; }
[data-public="lycee"][data-presentation="carnet"] .bloc-jour, [data-public="lycee"][data-presentation="carnet"] .bloc-curiosite, [data-public="lycee"][data-presentation="carnet"] .bloc-devoirs, [data-public="lycee"][data-presentation="carnet"] .acces-rapides, [data-public="lycee"][data-presentation="carnet"] .curiosites { padding: 1rem 1.1rem 1.1rem; border: 0; border-left: 4px solid var(--accent); border-radius: 0 var(--rayon-petit) var(--rayon-petit) 0; background: var(--accent-fond); }
[data-public="lycee"][data-presentation="carnet"] .bloc-jour h2, [data-public="lycee"][data-presentation="carnet"] .bloc-curiosite h2, [data-public="lycee"][data-presentation="carnet"] .bloc-devoirs h2, [data-public="lycee"][data-presentation="carnet"] .acces-rapides h2, [data-public="lycee"][data-presentation="carnet"] .curiosites > h2 { padding-bottom: 0; border-bottom: 0; }
[data-public="lycee"][data-presentation="carnet"] .curiosites .liste-curiosites a { border-color: transparent; background: var(--fond); }
[data-public="lycee"][data-presentation="carnet"] .bloc-entrainement, [data-public="lycee"][data-presentation="carnet"] .bloc-suivi, [data-public="lycee"][data-presentation="carnet"] .bloc-series, [data-public="lycee"][data-presentation="carnet"] .documents-distribues, [data-public="lycee"][data-presentation="carnet"] .page-classe ~ .rubrique { padding: 1rem 1.1rem 1.1rem; border: var(--filet) solid var(--bordure); border-radius: var(--rayon-petit); background: var(--fond-doux); }
[data-public="lycee"][data-presentation="carnet"] .documents-distribues { margin-top: var(--espace); }
[data-public="lycee"][data-presentation="carnet"] .bloc-devoirs-passes { border: var(--filet) solid var(--bordure); border-radius: var(--rayon-petit); background: var(--fond-doux); }

/* ---------- Lycée · « Le tableau de bord » : tout le chapitre d'un coup d'œil ---------- */
[data-public="lycee"][data-presentation="tableau"] .accueil-classe {
  display: block; padding: 1.3rem 1.5rem 1.5rem; border-bottom: 4px solid #2FAEE0; border-radius: var(--rayon);
  background: #0E2A38; color: #F2F6F8;
}
[data-public="lycee"][data-presentation="tableau"] .accueil-annee { color: #6CCBF2; }
[data-public="lycee"][data-presentation="tableau"] .accueil-classe h1 { color: #FFFFFF; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem); }
[data-public="lycee"][data-presentation="tableau"] .accueil-classe .bulle { max-width: 50rem; border-left-color: #2FAEE0; background: rgba(255, 255, 255, .06); color: #E4E8EB; }
[data-public="lycee"][data-presentation="tableau"] .accueil-classe .bulle a { color: #6CCBF2; }
[data-public="lycee"][data-presentation="tableau"] .accueil-classe .citation-auteur { color: #D9BB79; }
[data-public="lycee"][data-presentation="tableau"] .parcours-chapitre { border: var(--filet) solid var(--bordure); background: var(--fond); box-shadow: var(--ombre); }
[data-public="lycee"][data-presentation="tableau"] .etapes { grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: .8rem; }
[data-public="lycee"][data-presentation="tableau"] .etape a {
  flex-direction: row; justify-content: flex-start; gap: .7rem; height: 100%; padding: .75rem .8rem;
  border: var(--filet) solid var(--bordure); border-top: 4px solid var(--bordure); border-radius: var(--rayon-petit);
  background: var(--fond); font-size: .9rem; text-align: left;
}
[data-public="lycee"][data-presentation="tableau"] .etape-faite a { border-top-color: var(--succes); }
[data-public="lycee"][data-presentation="tableau"] .etape-vue a { border-top-color: var(--bordure-forte); }
[data-public="lycee"][data-presentation="tableau"] .etape-a-revoir a { border-top-color: var(--accent); }
[data-public="lycee"][data-presentation="tableau"] .etape-ici a { border-top-color: var(--accent); }
[data-public="lycee"][data-presentation="tableau"] .etape a:hover { border-color: var(--ciel); }
[data-public="lycee"][data-presentation="tableau"] .etape-repere { width: 2.4rem; height: 2.4rem; border-width: 2px; border-radius: var(--rayon-petit); font-size: 1.15rem; }
[data-public="lycee"][data-presentation="tableau"] .etape-repere svg { width: 1.2rem; height: 1.2rem; }
[data-public="lycee"][data-presentation="tableau"] .etape-libelle { flex: 1; color: var(--titre); font-weight: 600; line-height: 1.25; }
[data-public="lycee"][data-presentation="tableau"] .etapes-avancee { font-weight: 600; color: var(--titre); }
[data-public="lycee"][data-presentation="tableau"] .etapes-jauge { height: .6rem; }
[data-public="lycee"][data-presentation="tableau"] .bloc { border-radius: var(--rayon); }

/* =====================================================================
   Grands écrans : plus d'éléments par ligne plutôt que des éléments étirés
   ===================================================================== */
.rubriques { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr)); gap: 0 calc(var(--espace) * 2.5); align-items: start; }
.rubriques > .rubrique-large { grid-column: 1 / -1; }

@media (max-width: 47.99rem) {
  /* Téléphone, collège : Célia en petit à droite du nom de la classe, le mot de la semaine sur toute la largeur
     en dessous, pour que l'identité ne prenne pas tout l'écran */
  .accueil-classe .bulle { font-size: .92rem; }
  [data-public="college"] .accueil-classe { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: .8rem; }
  [data-public="college"] .accueil-texte { display: contents; }
  [data-public="college"] .accueil-annee { grid-column: 1; grid-row: 1; align-self: start; }
  [data-public="college"] .accueil-classe h1 { grid-column: 1; grid-row: 2; }
  [data-public="college"] .accueil-classe .bulle { grid-column: 1 / -1; grid-row: 3; margin-top: .6rem; }
  [data-public="college"] .mascotte-celia { grid-column: 2; grid-row: 1 / 3; height: 5.5rem; margin: 0; justify-self: end; }
  [data-public="college"][data-presentation="parcours"] .accueil-classe { padding: 1.1rem; }
  [data-public="college"][data-presentation="cour"] .accueil-classe {
    padding: 1.1rem; background: radial-gradient(circle at 100% 0, var(--ciel) 0 4.5rem, transparent 4.55rem), var(--info-fond);
  }
}

/* Le parcours (collège) : chemin horizontal dès 60rem sur la page d'un chapitre et la liste des chapitres */
@media (min-width: 60rem) {
  [data-public="college"][data-presentation="parcours"] .etapes-chapitre .etapes { flex-direction: row; gap: 0; padding: 2.3rem 0 0; }
  [data-public="college"][data-presentation="parcours"] .etapes-chapitre .etape { flex: 1 1 0; max-width: 9rem; padding: 0 .15rem; }
  [data-public="college"][data-presentation="parcours"] .etapes-chapitre .etape:not(:last-child)::after { top: calc(1.6rem - 2.5px); left: 50%; width: 100%; height: 0; border-left: 0; border-top: 5px dotted var(--ciel); }
  [data-public="college"][data-presentation="parcours"] .etapes-chapitre .etape a { flex-direction: column; gap: .35rem; font-size: .8rem; text-align: center; }
  [data-public="college"][data-presentation="parcours"] .etapes-chapitre .etape-detail { display: none; }
  [data-public="college"][data-presentation="parcours"] .etapes-chapitre .etape-ici .etape-repere { margin: -.3rem 0 0; }
  [data-public="college"][data-presentation="parcours"] .etapes-chapitre .etape-ici-marque { position: absolute; top: -2.2rem; }
}

/* ---------- Page de classe : deux colonnes dès 48rem ---------- */
@media (min-width: 48rem) {
  .colonne-principale, .colonne-laterale { display: flex; flex-direction: column; gap: var(--espace); min-width: 0; }
  .colonne-laterale .blocs-semaine { display: contents; }
  [data-public] .accueil-classe { grid-column: 1 / -1; grid-row: 1; }
  [data-public] .colonne-principale { grid-column: 1 / 8; grid-row: 2; }
  [data-public] .colonne-laterale { grid-column: 8 / -1; grid-row: 2; }
  /* Colonne de côté : des blocs compacts au lycée, sans grande icône */
  [data-public="lycee"] .colonne-laterale .bloc { padding: .9rem 1rem; }
  [data-public="lycee"] .colonne-laterale .bloc h2 { font-size: 1.05rem; }
  /* Lycée : l'identité en bandeau, le nom de la classe et la citation côte à côte */
  [data-public="lycee"] .accueil-texte { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem 2rem; }
  [data-public="lycee"] .accueil-annee { flex-basis: 100%; }
  [data-public="lycee"] .accueil-classe h1 { margin-bottom: .1em; }
  [data-public="lycee"] .accueil-texte .bulle { flex: 1 1 18rem; }
  [data-public="lycee"][data-presentation="carnet"] .accueil-classe { padding-bottom: .5rem; }
  /* Le carnet aère ses deux colonnes (sur téléphone, cet écart dépasserait la largeur de l'écran) */
  [data-public="lycee"][data-presentation="carnet"] .page-classe { column-gap: calc(var(--espace) * 2); }
  /* Collège : la bannière reste en ligne, Célia à droite */
  [data-public="college"][data-presentation="parcours"] .mascotte-celia { height: 8rem; }
}

/* ---------- Trois colonnes dès 64rem : l'identité à gauche, fixe au défilement ---------- */
@media (min-width: 64rem) {
  [data-public] .accueil-classe { grid-column: 1 / 4; grid-row: 1; position: sticky; top: var(--espace); }
  [data-public] .colonne-principale { grid-column: 4 / 10; grid-row: 1; }
  [data-public] .colonne-laterale { grid-column: 10 / -1; grid-row: 1; }
  /* Le carnet : une page de document, un bandeau et une seule colonne de côté */
  [data-public="lycee"][data-presentation="carnet"] .accueil-classe { grid-column: 1 / -1; grid-row: 1; position: static; }
  [data-public="lycee"][data-presentation="carnet"] .colonne-principale { grid-column: 1 / 9; grid-row: 2; }
  [data-public="lycee"][data-presentation="carnet"] .colonne-laterale { grid-column: 9 / -1; grid-row: 2; }
  /* L'identité en carte verticale : le texte, puis Célia (collège) ; le tableau de bord retrouve sa carte */
  [data-public="college"][data-presentation="parcours"] .accueil-classe { flex-direction: column; align-items: stretch; }
  [data-public="college"][data-presentation="parcours"] .accueil-classe { justify-content: space-between; }
  [data-public="college"][data-presentation="parcours"] .accueil-texte { padding-bottom: 0; }
  [data-public="college"][data-presentation="parcours"] .mascotte-celia { align-self: center; height: 10rem; margin: 1rem 0 0; }
  [data-public="lycee"][data-presentation="tableau"] .accueil-texte { display: block; }
  [data-public="lycee"][data-presentation="tableau"] .accueil-classe h1 { margin-bottom: .3em; }
  /* Collège : la colonne de côté garde 4 colonnes sur 12, pour les blocs à mascotte ; mascotte réduite */
  [data-public="college"] .colonne-principale { grid-column: 4 / 9; }
  [data-public="college"] .colonne-laterale { grid-column: 9 / -1; }
  [data-public="college"] .colonne-laterale .bloc-jour .mascotte { height: 5.5rem; }
  /* Page de niveau : « Quatrième » ou « Première » doit tenir dans la carte étroite, faite pour « 6e B » */
  [data-public] .page-niveau .accueil-classe h1 { font-size: clamp(1.8rem, .9rem + 1.1vw, 2.5rem); }
  [data-public="lycee"][data-presentation="carnet"] .page-niveau .accueil-classe h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); }
}

/* ---------- Dès 90rem : les proportions propres à chaque présentation ---------- */
@media (min-width: 90rem) {
  /* Le parcours : identité étroite, le chapitre large pour le chemin horizontal */
  [data-public="college"][data-presentation="parcours"] .accueil-classe { grid-column: 1 / 3; }
  [data-public="college"][data-presentation="parcours"] .corps-classe { grid-column: 3 / -1; grid-row: 1; }
  [data-public="college"] .colonne-laterale .bloc-jour .mascotte { height: 6.9rem; }
  [data-public="college"][data-presentation="parcours"] .etapes { flex-direction: row; gap: 0; padding: 2.3rem 0 0; }
  [data-public="college"][data-presentation="parcours"] .etape { flex: 1 1 0; max-width: 9rem; padding: 0 .15rem; }
  /* Le pointillé relie le centre de chaque étape à celui de la suivante */
  [data-public="college"][data-presentation="parcours"] .etape:not(:last-child)::after { top: calc(1.6rem - 2.5px); left: 50%; width: 100%; height: 0; border-left: 0; border-top: 5px dotted var(--ciel); }
  [data-public="college"][data-presentation="parcours"] .etape a { flex-direction: column; gap: .35rem; font-size: .8rem; text-align: center; }
  [data-public="college"][data-presentation="parcours"] .etape-detail { display: none; }
  [data-public="college"][data-presentation="parcours"] .etape-ici .etape-repere { margin: -.3rem 0 0; }
  [data-public="college"][data-presentation="parcours"] .etape-ici-marque { position: absolute; top: -2.2rem; }
}

/* ---------- Très grands écrans : davantage de colonnes plutôt que des blocs étirés ---------- */
@media (min-width: 112rem) {
  [data-public="lycee"][data-presentation="tableau"] .accueil-classe { grid-column: 1 / 3; }
  [data-public="lycee"][data-presentation="tableau"] .corps-classe { grid-column: 3 / -1; grid-row: 1; }
  /* Lycée : la colonne de côté deux par deux, les automatismes sur toute sa largeur */
  [data-public="lycee"] .colonne-laterale { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
  [data-public="lycee"] .colonne-laterale .bloc-series { grid-column: 1 / -1; }
  [data-public="lycee"] .colonne-laterale .bloc-suivi { grid-column: auto; }
}

/* ---- Devoirs : bloc « Devoir à rendre » et page de la passation ---- */
/* Le titre et son icône sur une ligne, les devoirs dessous sur toute la largeur : jamais en colonnes étroites sur téléphone (01/11/2026). */
.bloc-devoirs { flex-wrap: wrap; }
.bloc-devoirs > .liste-devoirs, .bloc-devoirs > .devoirs-passes { flex: 1 1 100%; min-width: 0; }
.liste-devoirs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.devoir-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .7rem .9rem; border: var(--filet) solid var(--bordure); border-radius: var(--rayon); background: var(--fond-carte, var(--fond)); }
.devoir-ligne .devoir-texte { flex: 1 1 16rem; min-width: 0; }
.devoir-ligne .devoir-texte p { margin: .15rem 0 0; }
.devoir-titre { font-weight: 700; text-decoration: none; }
.devoir-titre:hover { text-decoration: underline; }
.devoir-clos { opacity: .85; }
.devoir-cibles { padding: .6rem .9rem; border-left: .3rem solid var(--accent); background: var(--accent-fond); border-radius: 0 var(--rayon) var(--rayon) 0; }
.tableau-essais { width: 100%; border-collapse: collapse; margin: .5rem 0 1rem; }
.tableau-essais th, .tableau-essais td { padding: .4rem .6rem; text-align: left; border-bottom: var(--filet) solid var(--bordure); }
.liste-regles { padding-left: 1.2rem; } .liste-regles li { margin: .35rem 0; }

/* Onglet « Devoir » du bandeau : un point rouge en bas à droite tant qu'un devoir attend l'élève. */
.navigation-devoir { position: relative; border-radius: 999px; background-color: rgba(211, 58, 44, .14); animation: devoir-pulse 2.4s ease-in-out 2; }   /* pulse deux fois (moins de 5 s, RGAA 13.8), puis reste teinté */
.navigation-devoir .pastille-alerte { position: absolute; right: .15rem; bottom: .15rem; width: .55rem; height: .55rem; border-radius: 50%; background: #d33a2c; box-shadow: 0 0 0 2px var(--fond-entete, var(--fond)); }
@media (max-width: 52rem) { .navigation-devoir.navigation-raccourci { display: inline-flex; } }
/* Un devoir attend l'élève : l'onglet pulse doucement en rouge estompé, en plus du point. */
@keyframes devoir-pulse {
  0%, 100% { background-color: transparent; box-shadow: none; }
  50% { background-color: rgba(211, 58, 44, .16); box-shadow: 0 0 0 .3rem rgba(211, 58, 44, .10); }
}
@media (prefers-reduced-motion: reduce) { .navigation-devoir { animation: none; background-color: rgba(211, 58, 44, .14); } }

.devoirs-passes { margin-top: .6rem; }
.devoirs-passes > summary { cursor: pointer; font-weight: 600; color: var(--texte-doux); }
.devoirs-passes > ul { margin-top: .6rem; }


/* Page d'un chapitre : passer au chapitre voisin sans descendre (tablette et grand écran). */
.voisins-haut { display: none; }
@media (min-width: 48rem) {
  .voisins-haut { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
  .voisins-haut .fleche-place { flex: 1; }
}

/* ---------------------------------------------------------------------------------------------------------------
   Mon suivi (refonte du 20/10/2026) : le prochain pas, la série, les chapitres, les badges, les activités.
   Même ossature au collège et au lycée ; le collège a la mascotte, les étoiles et les médailles, le lycée des
   tuiles sobres, les pourcentages et le tableau des activités.
   --------------------------------------------------------------------------------------------------------------- */
.suivi { display: grid; gap: var(--espace); grid-template-columns: minmax(0, 1fr); align-items: start; }
.suivi > section { min-width: 0; }
.suivi h2 { font-size: 1.3rem; margin-bottom: .6rem; }
.suivi-nouveaux { margin: 0 0 var(--espace); padding: .8rem 1.1rem; border-radius: var(--rayon); background: var(--accent-fond); border: var(--filet) solid var(--accent); font-family: var(--police-interface); }

.suivi-prochain { display: flex; gap: 1.2rem; align-items: center; padding: 1.3rem 1.4rem; border-radius: calc(var(--rayon) * 1.6); background: var(--info-fond); }
.suivi-prochain h2 { font-size: 1.45rem; margin-bottom: .4rem; }
.suivi-prochain p { margin: 0 0 .7rem; }
.suivi-prochain-texte { min-width: 0; flex: 1; }
.suivi-prochain .mascotte { height: 8.5rem; }
.suivi-form { margin: 0; }
.suivi-jour { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: center; margin-top: .9rem; padding-top: .8rem; border-top: var(--filet) solid var(--bordure); font-family: var(--police-interface); font-size: .95rem; }

.suivi-regularite { padding: 1.1rem 1.2rem; border: var(--filet) solid var(--bordure); border-radius: calc(var(--rayon) * 1.4); background: var(--fond); box-shadow: var(--ombre); }
.serie { margin: 0 0 .7rem; font-family: var(--police-interface); }
.serie-chiffre { font-family: var(--police-contenu); font-size: 2.4rem; font-weight: 700; line-height: 1; color: var(--titre); }
.suivi .semaines { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .35rem; max-width: 24rem; margin: 0 0 .7rem; padding: 0; list-style: none; }
.semaine { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--rayon-petit); border: 2px solid var(--bordure); font-size: 1.1rem; line-height: 1; }
.semaine-active { border-color: var(--titre); background: var(--titre); }
.semaine-courante { outline: 2px dashed var(--accent-texte); outline-offset: 2px; }
.semaine-vacances { border-style: dashed; background: var(--fond-doux); color: var(--texte-doux); font-weight: 600; }
.serie-conseil { margin: 0 0 .3rem; font-weight: 600; }
.suivi-regularite .texte-doux { margin: 0; font-size: .9rem; }

.chapitre-suivi, .activites-groupe { margin-bottom: .6rem; border: var(--filet) solid var(--bordure); border-radius: var(--rayon); background: var(--fond); }
.chapitre-suivi > summary, .activites-groupe > summary { display: grid; grid-template-columns: minmax(0, 1fr); gap: .3rem; padding: .8rem 1rem .8rem 2.2rem; cursor: pointer; list-style: none; position: relative; }
.chapitre-suivi > summary::-webkit-details-marker, .activites-groupe > summary::-webkit-details-marker { display: none; }
.chapitre-suivi > summary::before, .activites-groupe > summary::before { content: "▸"; position: absolute; left: .85rem; top: .8rem; color: var(--titre); transition: transform .15s; }
.chapitre-suivi[open] > summary::before, .activites-groupe[open] > summary::before { transform: rotate(90deg); }
.cs-titre { font-weight: 700; color: var(--titre); }
.cs-resume { font-family: var(--police-interface); font-size: .88rem; color: var(--texte-doux); }
.cs-jauge { display: flex; gap: 3px; max-width: 22rem; }
.cs-case { flex: 1; height: .55rem; border-radius: 3px; background: var(--bordure); }
.cs-acquis { background: var(--succes); }
.cs-en_cours { background: var(--accent); }
.cs-fragile { background: var(--alerte); }
.cs-domaine { margin: .4rem 1rem .3rem; font-size: 1rem; }
.suivi .competences-suivi { margin: 0; padding: 0 1rem .4rem; list-style: none; }
.cp { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1rem; padding: .45rem 0; border-top: var(--filet) solid var(--bordure); font-size: .95rem; }
.cp-libelle { flex: 1 1 14rem; }
.cp-etat { font-family: var(--police-interface); font-size: .88rem; white-space: nowrap; }
.cp-acquis .cp-etat { color: var(--succes); }
.cp-en_cours .cp-etat { color: var(--accent-texte); }
.cp-fragile .cp-etat { color: var(--alerte); font-weight: 700; }
.cp-inconnu .cp-etat { color: var(--texte-doux); }
.cp-etoiles { font-size: 1.05rem; letter-spacing: .08em; }
.cp-legende { margin: 0 1rem .4rem; font-family: var(--police-interface); font-size: .8rem; color: var(--texte-doux); }
.cs-actions { display: flex; flex-wrap: wrap; gap: .5rem; padding: .3rem 1rem 1rem; }
.cs-actions .bouton { font-size: .9rem; }

.badges-famille { margin: 1.1rem 0 .5rem; font-size: 1rem; color: var(--texte-doux); font-family: var(--police-interface); text-transform: uppercase; letter-spacing: .08em; }
.badges-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: .6rem; margin: 0; padding: 0; list-style: none; }
.medaille { display: flex; gap: .8rem; align-items: center; padding: .7rem .9rem; border: var(--filet) solid var(--bordure); border-radius: var(--rayon); background: var(--fond); }
.medaille-obtenue { border-color: var(--accent); background: var(--accent-fond); }
.medaille-icone { display: grid; place-items: center; flex: none; width: 3.2rem; height: 3.2rem; border-radius: 50%; border: 3px solid var(--bordure); font-size: 1.6rem; line-height: 1; filter: grayscale(1); opacity: .45; }
.medaille-obtenue .medaille-icone { border-color: var(--accent); background: var(--fond); filter: none; opacity: 1; box-shadow: 0 0 0 3px var(--accent-fond), 0 0 0 5px var(--accent); }
.medaille-texte { display: grid; gap: .1rem; min-width: 0; }
.medaille-nom { color: var(--titre); }
.medaille:not(.medaille-obtenue) .medaille-nom { color: var(--texte); }
.medaille-description { font-size: .88rem; color: var(--texte-doux); }
.medaille-etat { font-family: var(--police-interface); font-size: .8rem; font-weight: 600; color: var(--texte-doux); }
.medaille-obtenue .medaille-etat { color: var(--accent-texte); }
.medaille-jauge { width: 100%; max-width: 12rem; height: .45rem; accent-color: var(--titre); }
.badges-chapitres { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.medaille-chapitre { display: grid; justify-items: center; gap: .2rem; width: 4.6rem; font-family: var(--police-interface); font-size: .78rem; color: var(--texte-doux); text-align: center; }
.mc-numero { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; border: 3px dashed var(--bordure); font-family: var(--police-contenu); font-size: 1.3rem; font-weight: 700; color: var(--texte-doux); }
.medaille-chapitre.medaille-obtenue { color: var(--accent-texte); font-weight: 700; }
.medaille-chapitre.medaille-obtenue .mc-numero { border: 3px solid var(--accent); background: var(--accent-fond); color: var(--titre); }

.suivi .activites-liste { margin: 0; padding: 0 1rem .6rem; list-style: none; }
.activites-liste li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .3rem 1rem; padding: .45rem 0; border-top: var(--filet) solid var(--bordure); }
.al-titre { display: grid; gap: .1rem; min-width: 0; flex: 1 1 12rem; }
.al-titre a { font-weight: 600; }
.al-detail { font-family: var(--police-interface); font-size: .8rem; color: var(--texte-doux); }
.al-match { font-family: var(--police-interface); font-size: .82rem; font-weight: 700; color: var(--texte-doux); white-space: nowrap; }
.suivi-activites > .texte-doux { margin-top: -.3rem; }
.suivi + .actions { margin-top: calc(var(--espace) * 1.5); }

/* Collège : plus grand, plus coloré ; le lycée garde des tuiles sobres. */
[data-public="college"] .suivi-prochain { background: var(--accent-fond); }
[data-public="college"] .semaine-active { border-color: var(--accent); background: var(--accent-fond); }
[data-public="college"] .serie-chiffre { font-size: 3rem; color: var(--accent-texte); }
[data-public="college"] .medaille-icone { width: 3.6rem; height: 3.6rem; font-size: 1.9rem; }
[data-public="college"][data-presentation="cour"] .suivi-prochain { background: var(--info-fond); }
[data-public="lycee"] .medaille { padding: .6rem .8rem; border-left-width: 4px; }
[data-public="lycee"] .medaille-obtenue { background: var(--fond); border-color: var(--bordure); border-left-color: var(--accent); }
[data-public="lycee"] .suivi-prochain { border-left: 4px solid var(--titre); border-radius: var(--rayon); }
[data-public="lycee"][data-presentation="tableau"] .suivi-prochain { background: var(--fond); border: var(--filet) solid var(--bordure); border-left: 4px solid var(--titre); box-shadow: var(--ombre); }

@media (max-width: 30rem) {
  .suivi-prochain { flex-direction: column; align-items: flex-start; }
  .suivi-prochain .mascotte { height: 6rem; align-self: center; }
}
@media (min-width: 64rem) {
  .suivi { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-areas: "prochain regularite" "badges badges" "chapitres activites"; }
  .suivi-prochain { grid-area: prochain; }
  .suivi-regularite { grid-area: regularite; align-self: stretch; }
  .suivi-chapitres { grid-area: chapitres; }
  .suivi-badges { grid-area: badges; }
  .suivi-activites { grid-area: activites; }
}

/* ---------------------------------------------------------------------------------------------------------------
   Le championnat (24/10/2026) : carte de « Mon suivi », page du classement, inscription dans Paramètres, podium à
   projeter. Noms de joueurs seulement ; les élèves voient les 10 premiers et leur ligne.
   --------------------------------------------------------------------------------------------------------------- */
.nom-joueur { color: var(--titre); font-weight: 700; }
.suivi-championnat { padding: 1.1rem 1.2rem; border: var(--filet) solid var(--bordure); border-radius: calc(var(--rayon) * 1.4); background: var(--fond); box-shadow: var(--ombre); }
.sc-entete { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem; margin-bottom: .7rem; }
.suivi .sc-entete h2 { margin: 0; }
.sc-joueur { margin: 0; font-family: var(--police-interface); font-size: .92rem; color: var(--texte-doux); }
.sc-attente { margin: 0 0 .7rem; }
.sc-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); grid-auto-flow: row dense; gap: .6rem; margin: 0 0 .9rem; padding: 0; list-style: none; }
.sc-chiffres .sc-large { grid-column: span 2; }
.sc-chiffres li { display: grid; align-content: start; gap: .15rem; padding: .6rem .8rem; border-radius: var(--rayon); background: var(--fond-doux); }
.sc-libelle { font-family: var(--police-interface); font-size: .8rem; color: var(--texte-doux); }
.sc-valeur { font-family: var(--police-contenu); font-size: 1.7rem; font-weight: 700; line-height: 1.1; color: var(--titre); }
.sc-valeur-texte { font-size: 1.15rem; white-space: nowrap; }
.sc-sur { font-family: var(--police-interface); font-size: .85rem; font-weight: 400; color: var(--texte-doux); }
.sc-evolution { font-family: var(--police-interface); font-size: .85rem; font-weight: 700; }
.sc-evolution-hausse { color: var(--succes); }
.sc-evolution-baisse { color: var(--alerte); }
.sc-evolution-stable { color: var(--texte-doux); }
.sc-lien { margin: 0; }
[data-public="college"] .suivi-championnat { border-color: var(--accent); }
[data-public="college"] .sc-chiffres li { background: var(--accent-fond); }
@media (min-width: 64rem) {
  .suivi.suivi-avec-championnat { grid-template-areas: "prochain regularite" "championnat championnat" "badges badges" "chapitres activites"; }
  .suivi-championnat { grid-area: championnat; }
}

.classement-vues { display: flex; flex-wrap: wrap; gap: .3rem; width: fit-content; max-width: 100%; margin: 0 0 var(--espace); padding: .3rem; border: var(--filet) solid var(--bordure); border-radius: 999px; background: var(--fond-doux); font-family: var(--police-interface); }
.classement-vues a { padding: .4em 1em; border-radius: 999px; color: var(--texte); text-decoration: none; }
.classement-vues a:hover { background: var(--info-fond); color: var(--titre); }
.classement-vues a[aria-current] { background: var(--bouton-fond); color: var(--bouton-texte); }
.tableau-classement { max-width: 46rem; }
.classement { width: 100%; border-collapse: collapse; font-family: var(--police-interface); }
.classement caption { margin-bottom: .5rem; text-align: left; font-family: var(--police-contenu); font-weight: 700; color: var(--titre); }
.classement th, .classement td { padding: .5rem .45rem; border-bottom: var(--filet) solid var(--bordure); text-align: left; }
.classement thead th { font-size: .82rem; color: var(--texte-doux); }
.classement .classement-nom { font-weight: 600; }
.classement .classement-nombre { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.classement .classement-place { width: 3rem; white-space: nowrap; font-weight: 700; }
.classement-moi th, .classement-moi td { background: var(--accent-fond); color: var(--accent-texte); }
.classement-toi { font-weight: 400; }
.classement-ellipse td { text-align: center; color: var(--texte-doux); }
.classement-note { margin-top: .6rem; font-size: .9rem; }
.classement-regles { max-width: 46rem; margin: var(--espace) 0; padding: .7rem 1rem; border: var(--filet) solid var(--bordure); border-radius: var(--rayon); background: var(--fond); }
.classement-regles summary { cursor: pointer; font-weight: 600; color: var(--titre); }
.classement-regles ul { margin: .6rem 0 0; padding-left: 1.2rem; }
@media (max-width: 30rem) {
  .classement th, .classement td { padding: .45rem .25rem; }
  .classement .classement-joues { display: none; }
}

.championnat-etat { margin: 0 0 .6rem; }
.championnat-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: .4rem 0 0; }
.championnat-interrupteur { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: 1rem; }
.championnat-etat-niveau { margin: 0; }

.podium-entete { text-align: center; }
.podium { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 1rem; margin: 2rem 0; padding: 0; list-style: none; }
.podium-marche { display: grid; justify-items: center; align-content: start; gap: .3rem; flex: 1 1 13rem; max-width: 22rem; padding: 1.2rem 1rem; border: var(--filet) solid var(--bordure); border-radius: calc(var(--rayon) * 1.4) calc(var(--rayon) * 1.4) var(--rayon-petit) var(--rayon-petit); background: var(--fond); box-shadow: var(--ombre); text-align: center; }
/* Hauteurs minimales décroissantes : le 1er reste le plus haut même quand un autre nom tient sur deux lignes. */
.podium-1 { order: 2; min-height: 15rem; padding-top: 2.6rem; border: 3px solid var(--accent); background: var(--accent-fond); }
.podium-2 { order: 1; min-height: 13rem; padding-top: 1.8rem; }
.podium-3 { order: 3; min-height: 11.5rem; }
.podium-place { font-family: var(--police-interface); font-size: 1.1rem; font-weight: 700; color: var(--texte-doux); }
.podium-1 .podium-place { color: var(--accent-texte); }
.podium-nom { font-family: var(--police-contenu); font-size: clamp(1.4rem, 1rem + 1.8vw, 2.6rem); font-weight: 700; line-height: 1.15; color: var(--titre); overflow-wrap: anywhere; }
.podium-points { font-family: var(--police-interface); font-size: 1.05rem; }
.podium-leader { margin: 0 0 var(--espace); text-align: center; font-size: clamp(1.1rem, 1rem + .6vw, 1.5rem); }
.page-podium .actions { text-align: center; }
@media (max-width: 40rem) {
  .podium { flex-direction: column; align-items: stretch; }
  .podium-marche { max-width: none; flex-basis: auto; min-height: 0; padding-top: 1.2rem; }
  .podium-1, .podium-2, .podium-3 { order: 0; }
}

/* ---- Progression d'une classe, recalculée d'après son avancée (01/11/2026) ---- */
.prog-nombres, .prog-algebre { --prog: var(--titre); }
.prog-geometrie { --prog: var(--alerte); }
.prog-grandeurs, .prog-analyse, .prog-fonctions { --prog: var(--succes); }
.prog-autres, .prog-probas, .prog-stats_probas { --prog: var(--accent-texte); }
.prog-transversal { --prog: var(--texte-doux); }
.progression-note { max-width: var(--largeur-texte); margin: 0 0 1rem; color: var(--texte-doux); }
.progression-legende { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin: 0 0 1rem; padding: 0; list-style: none; color: var(--texte-doux); font-family: var(--police-interface); font-size: .85rem; }
.progression-legende li { display: inline-flex; align-items: center; gap: .4rem; }
.progression-legende li::before { content: ""; width: .8rem; height: .8rem; border-radius: .2rem; background: var(--prog); }
.progression { display: grid; gap: .8rem; margin-bottom: var(--espace); }
/* Le programme d'un niveau (08/11/2026) : ses thèmes, ses parties, ses chapitres. */
.programme { display: grid; gap: var(--espace); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); align-items: start; margin-bottom: var(--espace); }
.programme-theme { padding: .9rem 1.1rem; border: var(--filet) solid var(--bordure); border-radius: var(--rayon); }
.programme-theme h2 { margin: 0 0 .4rem; padding: 0; border: 0; font-size: 1.15rem; }
.programme-theme h3 { margin: .8rem 0 .2rem; font-size: 1rem; color: var(--accent-texte); }
.programme-chapitres { margin: 0; padding-left: 1.1rem; }
.programme-chapitres li { margin: .15rem 0; }
.programme-a-venir { color: var(--texte-doux); }
.programme-note { font-family: var(--police-interface); color: var(--texte-doux); }
.progression-periode { display: grid; grid-template-columns: minmax(0, 1fr); gap: .3rem 1.2rem; padding: .9rem 1.1rem; border: var(--filet) solid var(--bordure); border-left: .25rem solid var(--accent); border-radius: var(--rayon); background: var(--fond); break-inside: avoid; }
.progression-periode.est-en-cours { border-color: var(--accent); background: var(--accent-fond); }
.progression-periode h2, .progression-periode h3 { margin: 0; padding: 0; border: 0; color: var(--accent-texte); font-size: 1.1rem; }
.progression-dates { margin: 0; color: var(--texte-doux); font-family: var(--police-interface); font-size: .85rem; line-height: 1.4; }
.progression-maintenant, .progression-etat { padding: .1rem .5rem; border-radius: 999px; background: var(--accent); color: #0F1B23; font-family: var(--police-interface); font-size: .72rem; font-weight: 700; white-space: nowrap; }
.progression-chapitres { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: .45rem .6rem; margin: .4rem 0 0; padding: 0; list-style: none; }
.progression-chapitres li { display: flex; gap: .55rem; align-items: flex-start; min-width: 0; padding: .4rem .55rem; border-radius: var(--rayon-petit); background: color-mix(in srgb, var(--prog) 9%, var(--fond)); line-height: 1.3; }
.progression-rang { flex: none; display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 .25rem; border: 2px solid var(--prog); border-radius: 999px; background: var(--fond); color: var(--texte); font-family: var(--police-interface); font-size: .8rem; font-weight: 700; }
.progression-chapitres .est-fait .progression-rang { background: var(--prog); border-color: var(--prog); color: var(--fond); }
.progression-chapitres .est-en-cours { outline: 2px solid var(--accent); }
.progression-titre { min-width: 0; }
.progression-chapitres a { color: inherit; }
.progression-duree { color: var(--texte-doux); font-style: italic; white-space: nowrap; }
.progression-vide { margin: .3rem 0 0; color: var(--texte-doux); font-style: italic; }
@media (min-width: 48rem) {
  .progression-periode { grid-template-columns: 11rem minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .progression-periode > h2, .progression-periode > h3, .progression-periode > .progression-dates { grid-column: 1; }
  .progression-periode > .progression-chapitres, .progression-periode > .progression-vide { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}
@media print {
  .progression-periode, .progression-periode.est-en-cours, .progression-chapitres li, .progression-rang { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .progression-periode { padding: .4rem .7rem; grid-template-columns: 9rem minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .progression-periode > h2, .progression-periode > h3, .progression-periode > .progression-dates { grid-column: 1; }
  .progression-periode > .progression-chapitres, .progression-periode > .progression-vide { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .progression { gap: .35rem; margin-bottom: .4rem; }
  .progression-periode h2 { font-size: .9rem; }
  .progression-dates { font-size: .68rem; }
  .progression-chapitres { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .2rem .3rem; font-size: .68rem; }
  .progression-chapitres li { gap: .3rem; padding: .15rem .3rem; }
  .progression-rang { min-width: 1.15rem; height: 1.15rem; font-size: .6rem; border-width: 1px; }
  .progression-legende { margin-bottom: .4rem; font-size: .68rem; }
  .progression-vide { font-size: .72rem; }
  .fil { display: none; }
  .progression-note:not(.progression-note-fixe) { display: none; }
  .entete-page { margin-bottom: .3rem; }
}

/* ---- Option « couleurs vives » (01/11/2026), demandée par des élèves : une couleur par nature d'activité, le blanc et le
   bleu de la charte restant le fond de la page. :not(#v) : elle passe devant les quatre présentations. ---- */
[data-couleurs="vives"] {
  --n-cours: #1B6FB0; --n-cours-fond: #EAF2FA;
  --n-verif: #28703F; --n-verif-fond: #E7F3EC;
  --n-capacite: #8A6A1F; --n-capacite-fond: #F6EFDD;
  --n-consolider: #B0442C; --n-consolider-fond: #FBECE7;
  --n-approfondir: #6B4FA0; --n-approfondir-fond: #F0EBF8;
  --n-sur: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) [data-couleurs="vives"] {
    --n-cours: #8FC3E6; --n-cours-fond: #17303F;
    --n-verif: #7CC79A; --n-verif-fond: #15301F;
    --n-capacite: #D9BB79; --n-capacite-fond: #2B2415;
    --n-consolider: #EDA08E; --n-consolider-fond: #3A211B;
    --n-approfondir: #C2A8EC; --n-approfondir-fond: #2A2142;
    --n-sur: #0F1B23;
  }
}
:root[data-theme="sombre"] [data-couleurs="vives"] {
  --n-cours: #8FC3E6; --n-cours-fond: #17303F;
  --n-verif: #7CC79A; --n-verif-fond: #15301F;
  --n-capacite: #D9BB79; --n-capacite-fond: #2B2415;
  --n-consolider: #EDA08E; --n-consolider-fond: #3A211B;
  --n-approfondir: #C2A8EC; --n-approfondir-fond: #2A2142;
  --n-sur: #0F1B23;
}
[data-couleurs="vives"] .nature-cours { --n: var(--n-cours); --n-fond: var(--n-cours-fond); }
[data-couleurs="vives"] .nature-verif { --n: var(--n-verif); --n-fond: var(--n-verif-fond); }
[data-couleurs="vives"] .nature-capacite { --n: var(--n-capacite); --n-fond: var(--n-capacite-fond); }
[data-couleurs="vives"] .nature-consolider { --n: var(--n-consolider); --n-fond: var(--n-consolider-fond); }
[data-couleurs="vives"] .nature-approfondir { --n: var(--n-approfondir); --n-fond: var(--n-approfondir-fond); }
[data-couleurs="vives"]:not(#v) .etape .etape-repere, [data-couleurs="vives"]:not(#v) .reprise-repere { border-color: var(--n); background: var(--n); color: var(--n-sur); }
[data-couleurs="vives"]:not(#v) .etape-faite .etape-repere { box-shadow: inset 0 0 0 2px var(--n-sur); }
[data-couleurs="vives"]:not(#v) .etape a { border-left-color: var(--n); }
[data-couleurs="vives"]:not(#v) .etape-detail { color: var(--texte); }
[data-couleurs="vives"]:not(#v) .reprise-etape a { background: var(--n-fond); }
[data-couleurs="vives"]:not(#v) .reprise { border-top: 5px solid var(--n-cours); }
[data-couleurs="vives"]:not(#v) .bloc { border-top: 5px solid var(--n-cours); background: var(--n-cours-fond); }
[data-couleurs="vives"]:not(#v) .bloc-jour, [data-couleurs="vives"]:not(#v) .bloc-automatismes { border-top-color: var(--n-capacite); background: var(--n-capacite-fond); }
[data-couleurs="vives"]:not(#v) .bloc-curiosite { border-top-color: var(--n-approfondir); background: var(--n-approfondir-fond); }
[data-couleurs="vives"]:not(#v) .bloc-suivi, [data-couleurs="vives"]:not(#v) .bloc-vacances { border-top-color: var(--n-verif); background: var(--n-verif-fond); }
[data-couleurs="vives"]:not(#v) .bloc-devoirs, [data-couleurs="vives"]:not(#v) .bloc-series { border-top-color: var(--n-consolider); background: var(--n-consolider-fond); }
[data-couleurs="vives"]:not(#v) .ressource { border-left: 4px solid var(--n-capacite); }
[data-couleurs="vives"]:not(#v) .ressource[href*="_Corrige"] { border-left-color: var(--n-verif); }
[data-couleurs="vives"]:not(#v) .ressource[href*="-Cours"] { border-left-color: var(--n-cours); }
[data-couleurs="vives"]:not(#v) .rubrique > h2 { padding-bottom: .3rem; border-bottom: 3px solid var(--n-cours); }

/* =====================================================================
   Quatre présentations, quatre façons de lire la page (01/11/2026, demande d'Alex : elles se ressemblaient trop).
   - Le parcours : un chemin à suivre, un pointillé relie les blocs ;
   - La cour : tout à portée de main, une bannière avec Célia puis une mosaïque de tuiles ;
   - Le carnet : une page de cahier, le travail en lignes, le reste dans la marge ;
   - Le tableau de bord : des chiffres, des jauges, des blocs compacts.
   Le parcours, la cour et le tableau rendent leurs colonnes transparentes : chaque bloc se place dans .corps-classe.
   ===================================================================== */
[data-public="college"][data-presentation="parcours"] .colonne-principale, [data-public="college"][data-presentation="parcours"] .colonne-laterale, [data-public="college"][data-presentation="parcours"] .colonne-laterale .blocs-semaine,
[data-public="college"][data-presentation="cour"] .colonne-principale, [data-public="college"][data-presentation="cour"] .colonne-laterale, [data-public="college"][data-presentation="cour"] .colonne-laterale .blocs-semaine,
[data-public="lycee"][data-presentation="tableau"] .colonne-principale, [data-public="lycee"][data-presentation="tableau"] .colonne-laterale, [data-public="lycee"][data-presentation="tableau"] .colonne-laterale .blocs-semaine { display: contents; }

/* ---------- Le parcours : un chemin ; une colonne à gauche du pointillé sur téléphone, de part et d'autre dès 48rem ---------- */
[data-public="college"][data-presentation="parcours"] .corps-classe { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; padding-left: 1.8rem; }
[data-public="college"][data-presentation="parcours"] .corps-classe::before { content: ""; position: absolute; top: .6rem; bottom: .6rem; left: .42rem; border-left: 5px dotted var(--ciel); }
[data-public="college"][data-presentation="parcours"] .corps-classe .bloc, [data-public="college"][data-presentation="parcours"] .corps-classe .reprises, [data-public="college"][data-presentation="parcours"] .corps-classe .acces-rapides, [data-public="college"][data-presentation="parcours"] .corps-classe .documents-distribues { position: relative; grid-column: auto; order: 0; min-width: 0; }
[data-public="college"][data-presentation="parcours"] .corps-classe .bloc::before, [data-public="college"][data-presentation="parcours"] .corps-classe .reprises::before { content: ""; position: absolute; top: 1.3rem; left: -1.8rem; width: 1.1rem; height: 1.1rem; border: 4px solid var(--ciel); border-radius: 50%; background: var(--fond); }
[data-public="college"][data-presentation="parcours"] .reprises { padding: 1rem 1.1rem 1.1rem; border-radius: 1.5rem; background: var(--info-fond); }
[data-public="college"][data-presentation="parcours"] .reprise { box-shadow: none; }
[data-public="college"][data-presentation="parcours"] .reprises::before { border-color: var(--accent); }

/* ---------- La cour : une mosaïque de tuiles, deux par ligne dès le téléphone ---------- */
[data-public="college"][data-presentation="cour"] .corps-classe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; align-items: stretch; }
[data-public="college"][data-presentation="cour"] .corps-classe .bloc, [data-public="college"][data-presentation="cour"] .corps-classe .reprises { grid-column: auto; order: 0; min-width: 0; }
[data-public="college"][data-presentation="cour"] .corps-classe .bloc { flex-direction: column; justify-content: center; gap: .55rem; padding: 1.1rem .8rem; border: 3px solid var(--bordure); border-radius: 1.75rem; box-shadow: none; text-align: center; }
[data-public="college"][data-presentation="cour"] .corps-classe .bloc-jour, [data-public="college"][data-presentation="cour"] .corps-classe .bloc-curiosite { border-color: var(--accent); }
[data-public="college"][data-presentation="cour"] .corps-classe .bloc-vacances, [data-public="college"][data-presentation="cour"] .corps-classe .bloc-automatismes { border-color: var(--ciel); background: var(--info-fond); }
[data-public="college"][data-presentation="cour"] .corps-classe .bloc-devoirs { border-color: var(--accent); }
[data-public="college"][data-presentation="cour"] .corps-classe .bloc-devoirs, [data-public="college"][data-presentation="cour"] .corps-classe .bloc-vacances, [data-public="college"][data-presentation="cour"] .corps-classe .bloc-automatismes, [data-public="college"][data-presentation="cour"] .corps-classe .reprises { grid-column: 1 / -1; }
[data-public="college"][data-presentation="cour"] .corps-classe .bloc-devoirs { flex-direction: row; justify-content: flex-start; text-align: left; }
[data-public="college"][data-presentation="cour"] .corps-classe .bloc h2 { font-size: 1.15rem; }
[data-public="college"][data-presentation="cour"] .corps-classe .bloc-icone, [data-public="college"][data-presentation="cour"] .corps-classe .curiosite-grande { width: 3.6rem; height: 3.6rem; }
[data-public="college"][data-presentation="cour"] .reprises { padding: 1rem; border: 3px solid var(--ciel); border-radius: 1.75rem; }
[data-public="college"][data-presentation="cour"] .reprises h2 { text-align: center; }
[data-public="college"][data-presentation="cour"] .reprises-liens { justify-content: center; }
[data-public="college"][data-presentation="cour"] .reprise { align-items: center; border: 0; border-radius: 1.25rem; background: var(--info-fond); box-shadow: none; text-align: center; }
[data-public="college"][data-presentation="cour"] .reprise-etape a { background: var(--fond); }
[data-public="college"][data-presentation="cour"] .reprise-etapes { width: 100%; }
[data-public="college"][data-presentation="cour"] .corps-classe .bloc-texte { display: none; }
[data-public="college"][data-presentation="cour"] .corps-classe .bloc .bouton { padding: .4rem .7rem; font-size: .88rem; overflow-wrap: normal; }
/* Le chapitre en tuiles, sans chemin */
[data-public="college"][data-presentation="cour"] .parcours-chapitre { border: 0; background: none; box-shadow: none; }
[data-public="college"][data-presentation="cour"] .etapes-chapitre { padding: 0; background: none; }
[data-public="college"][data-presentation="cour"] .etapes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr)); gap: .8rem; }
[data-public="college"][data-presentation="cour"] .etape { min-width: 0; }
[data-public="college"][data-presentation="cour"] .etape a { height: 100%; padding: 1rem .6rem; border: 3px solid var(--bordure); border-radius: 1.5rem; background: var(--fond); }
[data-public="college"][data-presentation="cour"] .etape a:hover { border-color: var(--ciel); }
[data-public="college"][data-presentation="cour"] .etape-ici a { border-color: var(--accent); background: var(--accent-fond); }
[data-public="college"][data-presentation="cour"] .etape-repere { width: 3.6rem; height: 3.6rem; }
[data-public="college"][data-presentation="cour"] .etape-doc .etape-repere { border-radius: 1rem; }
/* Téléphone en portrait (09/11/2026) : deux cartes par rangée plutôt qu'une seule, haute et presque vide. */
@media (max-width: 40rem) {
  [data-public="college"][data-presentation="cour"] .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  [data-public="college"][data-presentation="cour"] .etape a { padding: .8rem .5rem; }
}

/* ---------- Le carnet : une page de cahier, les chapitres en lignes ---------- */
[data-public="lycee"][data-presentation="carnet"] .reprises-liste { display: block; border-top: var(--filet) solid var(--titre); }
[data-public="lycee"][data-presentation="carnet"] .reprise { display: grid; grid-template-columns: minmax(0, 1fr); gap: .15rem 1.2rem; padding: .7rem 0; border: 0; border-bottom: var(--filet) solid var(--bordure); border-radius: 0; background: none; box-shadow: none; }
[data-public="lycee"][data-presentation="carnet"] .reprise h3 { font-size: 1.1rem; }
[data-public="lycee"][data-presentation="carnet"] .reprise-etape a { min-height: 2.75rem; padding: .2rem .5rem .2rem 0; border-radius: 0; background: none; }
[data-public="lycee"][data-presentation="carnet"] .reprise-etape a:hover { outline: 0; }
[data-public="lycee"][data-presentation="carnet"] .reprise-etape a:hover .reprise-libelle { text-decoration: underline; }
[data-public="lycee"][data-presentation="carnet"] .reprise-repere { width: auto; height: auto; border: 0; background: none; color: var(--accent-texte); }
[data-public="lycee"][data-presentation="carnet"] .reprise-libelle { flex: 0 1 auto; font-family: var(--police-contenu); font-weight: 400; }
[data-public="lycee"][data-presentation="carnet"] .reprise-marque { padding: 0; background: none; color: var(--accent-texte); font-family: var(--police-contenu); font-size: .9rem; font-style: italic; font-weight: 400; }
[data-public="lycee"][data-presentation="carnet"] .reprise-avancee { font-family: var(--police-contenu); font-style: italic; }
[data-public="lycee"][data-presentation="carnet"] .bloc-entrainement, [data-public="lycee"][data-presentation="carnet"] .bloc-suivi, [data-public="lycee"][data-presentation="carnet"] .bloc-series { padding-right: 0; padding-left: 0; border: 0; border-radius: 0; background: none; }

/* ---------- Le tableau de bord : des chiffres, des jauges, des blocs compacts ---------- */
[data-public="lycee"][data-presentation="tableau"] .corps-classe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; align-items: stretch; }
[data-public="lycee"][data-presentation="tableau"] .corps-classe .bloc, [data-public="lycee"][data-presentation="tableau"] .corps-classe .reprises, [data-public="lycee"][data-presentation="tableau"] .corps-classe .acces-rapides, [data-public="lycee"][data-presentation="tableau"] .corps-classe .documents-distribues { grid-column: auto; order: 0; min-width: 0; }
[data-public="lycee"][data-presentation="tableau"] .corps-classe .reprises, [data-public="lycee"][data-presentation="tableau"] .corps-classe .acces-rapides, [data-public="lycee"][data-presentation="tableau"] .corps-classe .documents-distribues, [data-public="lycee"][data-presentation="tableau"] .corps-classe .bloc-devoirs, [data-public="lycee"][data-presentation="tableau"] .corps-classe .bloc-series, [data-public="lycee"][data-presentation="tableau"] .indicateurs { grid-column: 1 / -1; }
[data-public="lycee"][data-presentation="tableau"] .indicateurs { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0; padding: 0; list-style: none; }
[data-public="lycee"][data-presentation="tableau"] .indicateurs li { flex: 1 1 6.5rem; padding: .55rem .8rem; border: var(--filet) solid var(--bordure); border-top: 3px solid var(--ciel); border-radius: var(--rayon-petit); background: var(--fond); font-size: .8rem; line-height: 1.25; }
[data-public="lycee"][data-presentation="tableau"] .indicateurs .chiffre { font-size: 1.45rem; }
[data-public="lycee"][data-presentation="tableau"] .corps-classe .bloc { align-items: flex-start; padding: .7rem .85rem; border-radius: var(--rayon-petit); box-shadow: none; }
[data-public="lycee"][data-presentation="tableau"] .corps-classe .bloc h2, [data-public="lycee"][data-presentation="tableau"] .reprises h2 { margin-bottom: .3rem; color: var(--texte-doux); font-family: var(--police-interface); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
[data-public="lycee"][data-presentation="tableau"] .corps-classe .bloc-curiosite h2 { color: var(--titre); font-family: var(--police-contenu); font-size: 1rem; letter-spacing: 0; text-transform: none; }
[data-public="lycee"][data-presentation="tableau"] .corps-classe .bloc-icone, [data-public="lycee"][data-presentation="tableau"] .corps-classe .curiosite-grande, [data-public="lycee"][data-presentation="tableau"] .corps-classe .bloc-texte { display: none; }
[data-public="lycee"][data-presentation="tableau"] .corps-classe .acces-rapides { padding: .7rem .9rem; }
[data-public="lycee"][data-presentation="tableau"] .corps-classe .acces-rapides h2 { font-size: 1.1rem; }
[data-public="lycee"][data-presentation="tableau"] .corps-classe .bloc .bouton { min-height: 2.4rem; padding: .25rem .8rem; font-size: .85rem; }
[data-public="lycee"][data-presentation="tableau"] .reprises-liste { gap: .7rem; }
[data-public="lycee"][data-presentation="tableau"] .reprise { gap: .35rem; padding: .7rem .85rem; border-top: 3px solid var(--titre); border-radius: var(--rayon-petit); box-shadow: none; }
[data-public="lycee"][data-presentation="tableau"] .reprise h3 { font-size: .95rem; }
[data-public="lycee"][data-presentation="tableau"] .reprise-jauge { display: block; width: 100%; height: .6rem; accent-color: var(--ciel-texte); }

@media (min-width: 48rem) {
  /* Le parcours : le pointillé au milieu, un bloc de chaque côté ; les chapitres à travailler le traversent */
  [data-public="college"][data-presentation="parcours"] .corps-classe { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 1.1rem 3rem; align-items: start; padding-left: 0; }
  [data-public="college"][data-presentation="parcours"] .corps-classe::before { left: calc(50% - 2.5px); }
  [data-public="college"][data-presentation="parcours"] .corps-classe .bloc, [data-public="college"][data-presentation="parcours"] .corps-classe .acces-rapides, [data-public="college"][data-presentation="parcours"] .corps-classe .documents-distribues { grid-column: 1; }
  [data-public="college"][data-presentation="parcours"] .corps-classe .bloc-jour, [data-public="college"][data-presentation="parcours"] .corps-classe .bloc-entrainement { grid-column: 2; }
  [data-public="college"][data-presentation="parcours"] .corps-classe .reprises, [data-public="college"][data-presentation="parcours"] .corps-classe .bloc-devoirs { grid-column: 1 / -1; }
  [data-public="college"][data-presentation="parcours"] .corps-classe .bloc::before { right: calc(-1.5rem - .55rem); left: auto; }
  [data-public="college"][data-presentation="parcours"] .corps-classe .bloc-jour::before, [data-public="college"][data-presentation="parcours"] .corps-classe .bloc-entrainement::before { right: auto; left: calc(-1.5rem - .55rem); }
  [data-public="college"][data-presentation="parcours"] .corps-classe .reprises::before, [data-public="college"][data-presentation="parcours"] .corps-classe .bloc-devoirs::before { display: none; }
  /* La cour : la bannière sur toute la largeur, Célia à droite de sa bulle */
  [data-public="college"][data-presentation="cour"] .accueil-classe { align-items: flex-end; padding: 1.2rem 2rem 0; background: radial-gradient(ellipse 22rem 8rem at calc(100% - 7rem) 100%, var(--ciel) 0 99%, transparent 100%), var(--info-fond); }
  [data-public="college"][data-presentation="cour"] .accueil-texte { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 2rem; padding-bottom: 1.2rem; max-width: none; }
  [data-public="college"][data-presentation="cour"] .accueil-annee { flex-basis: 100%; }
  [data-public="college"][data-presentation="cour"] .accueil-classe h1 { margin: 0; }
  [data-public="college"][data-presentation="cour"] .accueil-classe .bulle { position: relative; flex: 1 1 18rem; max-width: 40rem; }
  [data-public="college"][data-presentation="cour"] .mascotte-celia { height: 11rem; margin: 0 2rem 0 1rem; }
  [data-public="college"][data-presentation="cour"] .corps-classe { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
  [data-public="college"][data-presentation="cour"] .corps-classe .bloc { grid-column: span 6; }
  [data-public="college"][data-presentation="cour"] .corps-classe .bloc-devoirs, [data-public="college"][data-presentation="cour"] .corps-classe .reprises, [data-public="college"][data-presentation="cour"] .corps-classe .bloc-vacances, [data-public="college"][data-presentation="cour"] .corps-classe .bloc-automatismes { grid-column: 1 / -1; }
  /* Le carnet : la colonne de côté devient la marge du cahier, derrière un filet doré */
  [data-public="lycee"][data-presentation="carnet"] .reprise { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  [data-public="lycee"][data-presentation="carnet"] .reprise-avancee { grid-column: 2; }
  [data-public="lycee"][data-presentation="carnet"] .colonne-laterale { padding-left: 1.6rem; border-left: 2px solid var(--accent); }
  /* Le tableau : une grille serrée, les chapitres à gauche, les petits blocs deux par deux à droite */
  [data-public="lycee"][data-presentation="tableau"] .corps-classe { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: row dense; }
  [data-public="lycee"][data-presentation="tableau"] .corps-classe .bloc { grid-column: span 3; }
  [data-public="lycee"][data-presentation="tableau"] .corps-classe .reprises { grid-column: span 6; grid-row: span 2; }
  [data-public="lycee"][data-presentation="tableau"] .corps-classe .bloc-devoirs, [data-public="lycee"][data-presentation="tableau"] .corps-classe .bloc-series, [data-public="lycee"][data-presentation="tableau"] .corps-classe .acces-rapides, [data-public="lycee"][data-presentation="tableau"] .corps-classe .documents-distribues { grid-column: 1 / -1; }
  [data-public="lycee"][data-presentation="tableau"] .reprises-liste { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
}

@media (min-width: 64rem) {
  [data-public="college"][data-presentation="parcours"] .corps-classe, [data-public="lycee"][data-presentation="tableau"] .corps-classe { grid-column: 4 / -1; grid-row: 1; }
  /* Les devoirs descendus en bas de page ne passent pas sous l'identité, fixe au défilement */
  [data-public="college"][data-presentation="parcours"] .page-classe > .bloc-devoirs, [data-public="lycee"][data-presentation="tableau"] .page-classe > .bloc-devoirs { grid-column: 4 / -1; }
  /* La cour garde sa bannière ; quatre petites tuiles par ligne */
  [data-public="college"][data-presentation="cour"] .accueil-classe { grid-column: 1 / -1; grid-row: 1; position: static; flex-direction: row; }
  [data-public="college"][data-presentation="cour"] .corps-classe { grid-row: 2; }
  [data-public="college"][data-presentation="cour"] .corps-classe .bloc { grid-column: span 3; }
  [data-public="college"][data-presentation="cour"] .corps-classe .bloc-devoirs { grid-column: 1 / -1; }
  [data-public="college"][data-presentation="cour"] .corps-classe .bloc-vacances, [data-public="college"][data-presentation="cour"] .corps-classe .bloc-automatismes { grid-column: span 4; }
  [data-public="college"][data-presentation="cour"] .corps-classe .reprises { grid-column: span 8; }
}

/* La cour sur grand écran (01/11/2026, demande d'Alex) : la vue d'ensemble d'un coup, bannière basse, les chapitres à gauche,
   les petites tuiles à droite sur deux rangs. */
@media (min-width: 75rem) {
  [data-public="college"][data-presentation="cour"] .accueil-classe { padding: .7rem 2rem 0; background: radial-gradient(ellipse 18rem 5.5rem at calc(100% - 6rem) 100%, var(--ciel) 0 99%, transparent 100%), var(--info-fond); }
  [data-public="college"][data-presentation="cour"] .accueil-texte { padding-bottom: .8rem; }
  [data-public="college"][data-presentation="cour"] .accueil-classe h1 { font-size: clamp(2rem, 1.2rem + 1.4vw, 3rem); }
  [data-public="college"][data-presentation="cour"] .accueil-classe .bulle { padding: .55rem 1rem; font-size: .95rem; }
  [data-public="college"][data-presentation="cour"] .mascotte-celia { height: 7.5rem; margin: 0 1.5rem 0 1rem; }
  [data-public="college"][data-presentation="cour"] .corps-classe { grid-auto-flow: row dense; gap: .8rem; }
  [data-public="college"][data-presentation="cour"] .corps-classe .bloc { grid-column: span 2; gap: .35rem; padding: .7rem .6rem; }
  [data-public="college"][data-presentation="cour"] .corps-classe .bloc h2 { font-size: 1.05rem; }
  [data-public="college"][data-presentation="cour"] .corps-classe .bloc-jour .mascotte { height: 4.2rem; }
  [data-public="college"][data-presentation="cour"] .corps-classe .bloc-icone, [data-public="college"][data-presentation="cour"] .corps-classe .curiosite-grande { width: 2.6rem; height: 2.6rem; font-size: 1.3rem; }
  [data-public="college"][data-presentation="cour"] .corps-classe .gros-numero { width: 3.4rem; height: 3.4rem; font-size: 1.7rem; }
  [data-public="college"][data-presentation="cour"] .corps-classe .bloc-devoirs { grid-column: 1 / -1; flex-wrap: nowrap; gap: 1rem; padding: .4rem 1rem; }
  [data-public="college"][data-presentation="cour"] .corps-classe .bloc-devoirs > .liste-devoirs, [data-public="college"][data-presentation="cour"] .corps-classe .bloc-devoirs > .devoirs-passes { flex: 1 1 0; }
  [data-public="college"][data-presentation="cour"] .corps-classe .bloc-vacances, [data-public="college"][data-presentation="cour"] .corps-classe .bloc-automatismes { grid-column: 7 / span 4; }
  [data-public="college"][data-presentation="cour"] .corps-classe .reprises { grid-column: 1 / span 6; grid-row: span 2; padding: .7rem .8rem; }
  [data-public="college"][data-presentation="cour"] .reprise { gap: .3rem; padding: .7rem .8rem; }
  [data-public="college"][data-presentation="cour"] .etapes { grid-template-columns: repeat(auto-fill, minmax(min(100%, 7.2rem), 1fr)); }
}

/* ---- Suivi d'une classe : l'essentiel d'un coup d'œil, le détail replié (01/11/2026) ---- */
.suivi-chiffres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; list-style: none; padding: 0; }
@media (max-width: 40rem) { .suivi-chiffres li { padding: .6rem .7rem; font-size: .85rem; } .suivi-chiffres .chiffre { font-size: 1.3rem; } }
.suivi-essentiel { display: grid; gap: 0 var(--espace); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: start; }
.suivi-eleves, .suivi-fragiles { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.suivi-eleves li, .suivi-fragiles li { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .7rem; padding: .35rem .6rem; border-left: .25rem solid var(--accent); border-radius: 0 var(--rayon-petit) var(--rayon-petit) 0; background: var(--fond-doux); }
.suivi-eleves .suivi-jamais, .suivi-eleves .suivi-absent { border-left-color: var(--alerte); }
.suivi-motif { flex: 1 1 8rem; color: var(--texte-doux); font-family: var(--police-interface); font-size: .85rem; }
.suivi-fragiles li > span:first-child { flex: 1 1 100%; }
.suivi-solides li { border-left-color: var(--succes); }
.suivi-chapitres td { white-space: nowrap; }
.suivi-detail { margin-top: var(--espace); }
.suivi-detail > summary { min-height: 2.75rem; padding: .6rem .9rem; border: var(--filet) solid var(--bordure); border-radius: var(--rayon); background: var(--fond-doux); font-family: var(--police-interface); font-weight: 600; cursor: pointer; }
.suivi-detail[open] > summary { margin-bottom: 1rem; }

/* =====================================================================
   Page Paramètres (06/11/2026, demande d'Alex) : faite des blocs de la page de classe, elle prend aussitôt la
   présentation, les couleurs et l'ambiance choisies (body[data-public][data-presentation], parametres.js). Chaque choix
   est une carte (nom et description) ; son effet se voit sur des exemples faits des vrais éléments de la page de classe
   (étapes d'un chapitre, questions du jour, curiosité, S'entraîner). Les réglages prennent toute la largeur du corps de
   page ; le parcours y garde son chemin d'une seule colonne, pointillé à gauche.
   ===================================================================== */
.page-parametres .accueil-classe h1 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); overflow-wrap: anywhere; }
.page-parametres .formulaire-parametres { max-width: none; }
.reglages-etat { font-family: var(--police-interface); font-size: .85rem; font-weight: 700; }
/* « Suivre mon appareil » : seulement quand un thème a été choisi, y compris à l'instant par le bouton du bandeau */
:root:not([data-theme]) .theme-appareil { display: none; }
[data-public="lycee"] .page-parametres .mascotte-tux { display: none; }
[data-public="college"][data-presentation="parcours"] .page-parametres .mascotte-tux { filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, .85)) drop-shadow(0 0 6px rgba(143, 195, 230, .35)); }
.bloc-reglage > div, .bloc-exemple > div, .page-parametres .colonne-laterale .bloc > div { flex: 1 1 auto; width: 100%; min-width: 0; }

.cartes-choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); gap: .7rem; max-width: 32rem; margin-top: .5rem; }
[data-presentation="cour"] .cartes-choix { margin-inline: auto; }
.carte-choix {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .35rem .5rem; align-items: center; align-content: start; min-width: 0;
  padding: .5rem .55rem .7rem; border: 2px solid var(--bordure); border-radius: var(--rayon); background: var(--fond); color: var(--texte);
  text-align: left; cursor: pointer;
}
.carte-choix:hover { border-color: var(--ciel); }
.carte-choix:has(input:checked) { border-color: var(--bouton-fond); background: var(--info-fond); }
.carte-choix:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.carte-choix input { grid-row: 1; grid-column: 1; width: 1.2rem; height: 1.2rem; margin: 0; accent-color: var(--bouton-fond); }
.carte-nom { grid-row: 1; grid-column: 2; color: var(--titre); font-family: var(--police-interface); font-weight: 700; line-height: 1.25; }
.carte-aide { grid-row: 2; grid-column: 1 / -1; color: var(--texte-doux); font-size: .88rem; line-height: 1.35; }

/* Les exemples (06/11/2026) : de vrais éléments de la page de classe, inertes, qui prennent chaque réglage. L'ambiance
   choisit son texte (data-bilan). */
.exemple-blocs { display: contents; }
.exemple-note { color: var(--texte-doux); font-size: .9rem; }
.exemple-etapes { margin-top: .6rem; }
.si-match { display: none; }
[data-bilan="match"] .si-match { display: inline; }
[data-bilan="match"] .si-match.etape-tour { display: block; }
[data-bilan="match"] .si-classique { display: none; }

/* Placement : les réglages sur toute la largeur du corps de page, quelle que soit la présentation */
[data-public] .page-parametres .corps-classe .bloc-reglage, [data-public] .page-parametres .corps-classe .bloc-exemple, [data-public] .page-parametres .corps-classe .colonne-laterale .bloc { grid-column: 1 / -1; }
[data-public="college"][data-presentation="parcours"] .page-parametres .corps-classe { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; padding-left: 1.8rem; }
[data-public="college"][data-presentation="parcours"] .page-parametres .corps-classe::before { left: .42rem; }
[data-public="college"][data-presentation="parcours"] .page-parametres .corps-classe .bloc { grid-column: 1; }
[data-public="college"][data-presentation="parcours"] .page-parametres .corps-classe .bloc::before { right: auto; left: -1.8rem; }
@media (min-width: 48rem) {
  [data-public="college"][data-presentation="cour"] .page-parametres .corps-classe .bloc:not(.bloc-reglage, .bloc-exemple),
  [data-public="lycee"][data-presentation="tableau"] .page-parametres .corps-classe .bloc:not(.bloc-reglage, .bloc-exemple) { grid-column: span 6; }
}
@media (min-width: 64rem) {
  [data-public] .page-parametres .accueil-classe h1 { font-size: clamp(1.8rem, .9rem + 1.1vw, 2.5rem); }
  [data-public="lycee"][data-presentation="carnet"] .page-parametres .accueil-classe h1,
  [data-public="college"][data-presentation="cour"] .page-parametres .accueil-classe h1 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); }
}

/* ---- Catalogue des banques (administrateur, 06/11/2026) ---- */
.banque-question { max-width: 52rem; margin: 0 0 var(--espace); padding: 1rem 1.2rem; border: var(--filet) solid var(--bordure); border-radius: var(--rayon); background: var(--fond); scroll-margin-top: 1rem; }
.banque-question h2 { margin: 0 0 .2rem; padding: 0; border: 0; font-size: 1.1rem; }
.banque-type { margin-left: .4rem; color: var(--texte-doux); font-family: var(--police-interface); font-size: .85rem; font-weight: 600; }
.banque-meta { margin: 0 0 .7rem; color: var(--texte-doux); font-family: var(--police-interface); font-size: .85rem; }
.banque-enonce { font-size: 1.05rem; }
.banque-choix { margin: 0 0 .8rem; padding-left: 1.2rem; }
.banque-choix li { margin-bottom: .2rem; }
.banque-juste { color: var(--succes); }
.banque-explication { color: var(--texte-doux); }

/* ---- Visite guidée (06/11/2026, assets/js/visite.js) : le reste assombri, l'élément éclairé, une bulle ---- */
.visite-voile { position: fixed; inset: 0; z-index: 1000; background: transparent; }
.visite-voile-sombre { background: rgba(10, 22, 30, .7); }
.visite-trou { position: fixed; z-index: 1001; border-radius: var(--rayon); box-shadow: 0 0 0 200vmax rgba(10, 22, 30, .7); outline: 3px solid var(--accent); outline-offset: 0; pointer-events: none; transition: top .25s, left .25s, width .25s, height .25s; }
.visite-bulle { position: fixed; z-index: 1002; width: min(24rem, calc(100vw - 24px)); padding: 1rem 1.1rem 1.1rem; border: 2px solid var(--accent); border-radius: var(--rayon); background: var(--fond); color: var(--texte); box-shadow: 0 12px 40px rgba(0, 0, 0, .35); }
.visite-centre { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); }
.visite-bas { top: auto !important; right: 12px; bottom: 12px; left: 12px !important; width: auto; transform: none; }
.visite-compte { margin: 0 0 .2rem; color: var(--texte-doux); font: 700 .75rem/1.2 var(--police-interface); letter-spacing: .08em; text-transform: uppercase; }
.visite-compte:empty { display: none; }
.visite-titre { margin: 0 2.2rem .4rem 0; padding: 0; border: 0; font-size: 1.2rem; }
.visite-titre:focus { outline: none; }
.visite-texte { margin: 0; }
.visite-suite { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.visite-suite:empty { display: none; }
.visite-actions { display: flex; gap: .6rem; margin-top: .9rem; }
.visite-actions [hidden] { display: none; }
.visite-suivant { margin-left: auto; }
.visite-fermer { position: absolute; top: .4rem; right: .45rem; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; background: none; color: var(--texte-doux); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.visite-fermer:hover { background: var(--fond-doux); color: var(--texte); }
.visite-fermer:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .visite-trou { transition: none; } }
@media print { .visite-voile, .visite-trou, .visite-bulle { display: none; } }
.visite-lancer { margin: 1.5rem 0; }
.visite-liens { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 0; }

/* ---- Tous les chapitres, un à la fois (07/11/2026, assets/js/chapitres.js) : de petites icônes, dans l'ordre de l'année,
   choisissent le chapitre détaillé dessous ; chaque présentation a les siennes ---- */
.chapitres-selecteur { margin: 0 0 var(--espace); }
.chapitres-icones { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.chapitres-icones li { display: flex; align-items: center; }
.chapitre-icone {
  position: relative; display: grid; place-items: center; width: 3rem; height: 3rem; border: 3px solid var(--ciel);
  border-radius: 50%; background: var(--fond); color: var(--titre); font: 700 1.15rem/1 var(--police-contenu); text-decoration: none;
}
.chapitre-icone:hover { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ciel) 35%, transparent); }
.chapitre-icone[aria-current="true"] { border-color: var(--accent); background: var(--accent-fond); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 30%, transparent); }
.chapitre-icone.est-termine::after {
  content: "✓"; position: absolute; right: -6px; bottom: -4px; display: grid; place-items: center; width: 1.25rem; height: 1.25rem;
  border-radius: 50%; background: var(--succes); color: var(--fond); font: 700 .72rem/1 var(--police-interface);
}
/* Commencé : où en est l'élève, « 3/9 » ; en ambiance match, le prochain tour, sur le bleu du tableau d'affichage */
.chapitre-icone-etat {
  position: absolute; right: -.8rem; bottom: -.45rem; min-width: 1.45rem; padding: .14rem .32rem; border: 2px solid var(--accent-texte);
  border-radius: 999px; background: var(--accent-fond); color: var(--accent-texte); font: 700 .72rem/1 var(--police-interface);
  font-style: normal; text-align: center; white-space: nowrap;
}
[data-bilan="match"] .chapitre-icone-etat { border-color: #2FAEE0; background: #0E2A38; color: #F2F6F8; }
.chapitre-icone-jauge { display: none; appearance: none; border: 0; border-radius: 999px; background: var(--bordure); overflow: hidden; }
.chapitre-icone-jauge::-webkit-progress-bar { background: var(--bordure); border-radius: 999px; }
.chapitre-icone-jauge::-webkit-progress-value { background: var(--jauge, var(--ciel-texte)); border-radius: 999px; }
.chapitre-icone-jauge::-moz-progress-bar { background: var(--jauge, var(--ciel-texte)); border-radius: 999px; }
.liste-chapitres-complets > li[hidden] { display: none; }
.un-a-la-fois .liste-chapitres-complets { grid-template-columns: minmax(0, 1fr); }
.chapitre-complet > .parcours-exemples { margin: 0; padding-inline: 1.2rem; border-width: 0 0 var(--filet); border-radius: 0; }
[data-public="lycee"][data-presentation="carnet"] .chapitre-complet > .parcours-exemples { margin: .6rem 1.2rem 0; padding-inline: .9rem; border-left: 3px solid var(--accent); }
[data-public="lycee"][data-presentation="tableau"] .chapitre-complet > .parcours-exemples { border-top: 4px solid var(--accent); }

/* Le parcours : les icônes sur un chemin en pointillé */
[data-public="college"][data-presentation="parcours"] .chapitres-icones { gap: 0; row-gap: .7rem; }
[data-public="college"][data-presentation="parcours"] .chapitres-icones li:not(:last-child)::after { content: ""; width: 1.3rem; border-top: 4px dotted var(--ciel); }
/* … et chaque rond se remplit d'eau par le bas, à mesure que les étapes sont faites, une vague à la surface
   (07/11/2026, demande d'Alex) ; l'eau remplace l'étiquette « 3/9 ». Niveau par dixièmes (rempli-1 à rempli-10) :
   la politique de sécurité interdit les styles écrits dans la page. */
.chapitre-icone-eau { display: none; }
.chapitre-icone-numero { position: relative; z-index: 1; }
/* La ligne de surface de l'eau passe derrière le chiffre : un halo couleur du fond le garde lisible. */
.chapitre-icone.est-entame .chapitre-icone-numero { text-shadow: 0 0 2px var(--fond), 0 0 2px var(--fond), 0 0 3px var(--fond); }
[data-public="college"][data-presentation="parcours"] .chapitre-icone-eau { display: block; position: absolute; inset: 0; border-radius: 50%; overflow: hidden; pointer-events: none; }
[data-public="college"][data-presentation="parcours"] .chapitre-icone-eau::before {
  content: ""; position: absolute; top: calc(100% - var(--remplissage, 0%)); left: -50%; width: 200%; height: 200%;
  box-sizing: border-box; border: 3px solid var(--eau-ligne); border-radius: 42%; background: var(--eau-fond); animation: vague 4.8s linear 1;   /* un tour à l'arrivée (moins de 5 s, RGAA 13.8), puis au survol ou au focus */
}
[data-public="college"][data-presentation="parcours"] .chapitre-icone:hover .chapitre-icone-eau::before, [data-public="college"][data-presentation="parcours"] .chapitre-icone:focus-visible .chapitre-icone-eau::before { animation: vague 8s linear infinite; }
[data-public="college"][data-presentation="parcours"] .chapitre-icone-etat { display: none; }
@keyframes vague { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { [data-public="college"][data-presentation="parcours"] .chapitre-icone-eau::before { animation: none; } }
.rempli-1 { --remplissage: 10%; } .rempli-2 { --remplissage: 20%; } .rempli-3 { --remplissage: 30%; } .rempli-4 { --remplissage: 40%; }
.rempli-5 { --remplissage: 50%; } .rempli-6 { --remplissage: 60%; } .rempli-7 { --remplissage: 70%; } .rempli-8 { --remplissage: 80%; }
.rempli-9 { --remplissage: 90%; } .rempli-10 { --remplissage: 106%; }
/* La cour : des tuiles arrondies, plus grandes */
[data-public="college"][data-presentation="cour"] .chapitre-icone { width: 3.6rem; height: 3.6rem; border-color: var(--bordure-forte); border-radius: 1rem; font-size: 1.35rem; }
[data-public="college"][data-presentation="cour"] .chapitre-icone[aria-current="true"] { border-color: var(--accent); }
/* … et, pour un chapitre commencé, une jauge fine sous le numéro à la place de l'étiquette (07/11/2026, demande d'Alex) */
[data-public="college"][data-presentation="cour"] .chapitre-icone.est-entame { grid-template-rows: auto auto; align-content: center; gap: .3rem; }
[data-public="college"][data-presentation="cour"] .chapitre-icone.est-entame .chapitre-icone-jauge { display: block; width: 2.4rem; height: .4rem; --jauge: var(--accent-texte); }
[data-public="college"][data-presentation="cour"] .chapitre-icone-etat { display: none; }
/* Le carnet : une table des matières, les numéros soulignés */
[data-public="lycee"][data-presentation="carnet"] .chapitres-icones { gap: .2rem .4rem; padding-bottom: .3rem; border-bottom: var(--filet) solid var(--titre); }
[data-public="lycee"][data-presentation="carnet"] .chapitre-icone {
  width: auto; height: auto; min-width: 2.75rem; min-height: 2.75rem; padding: 0 .55rem; border: 0; border-bottom: 3px solid transparent;
  border-radius: 0; background: none; color: var(--accent-texte); font-size: 1.3rem;
}
[data-public="lycee"][data-presentation="carnet"] .chapitre-icone:hover { box-shadow: none; border-bottom-color: var(--bordure-forte); }
[data-public="lycee"][data-presentation="carnet"] .chapitre-icone[aria-current="true"] { border-bottom-color: transparent; border-radius: .3rem; background: var(--accent-fond); box-shadow: none; color: var(--titre); }
[data-public="lycee"][data-presentation="carnet"] .chapitre-icone.est-termine::after { right: -2px; bottom: auto; top: 2px; width: 1rem; height: 1rem; font-size: .6rem; }
/* … et, sous le numéro d'un chapitre commencé, un trait d'encre bleue tracé de gauche à droite à mesure que les étapes sont
   faites (07/11/2026, demande d'Alex), à la place de l'étiquette « 3/9 » ; terminé, le trait est entier. Le chapitre
   choisi est surligné. */
[data-public="lycee"][data-presentation="carnet"] .chapitre-icone-etat { display: none; }
[data-public="lycee"][data-presentation="carnet"] .chapitre-icone.est-entame::before, [data-public="lycee"][data-presentation="carnet"] .chapitre-icone.est-termine::before {
  content: ""; position: absolute; right: .35rem; bottom: .3rem; left: .35rem; height: 3px; border-radius: 2px;
  background: linear-gradient(to right, var(--titre) var(--remplissage, 0%), var(--bordure) var(--remplissage, 0%));
}
/* Le tableau de bord : de petites cartes avec leur jauge d'avancée */
[data-public="lycee"][data-presentation="tableau"] .chapitre-icone {
  grid-template-rows: auto auto; gap: .3rem; width: 4.4rem; height: auto; min-height: 3.6rem; padding: .45rem .4rem;
  border: var(--filet) solid var(--bordure); border-top: 4px solid var(--bordure-forte); border-radius: var(--rayon-petit);
}
[data-public="lycee"][data-presentation="tableau"] .chapitre-icone.est-termine { border-top-color: var(--succes); }
[data-public="lycee"][data-presentation="tableau"] .chapitre-icone.est-entame { border-top-color: var(--accent); }
[data-public="lycee"][data-presentation="tableau"] .chapitre-icone[aria-current="true"] { border-color: var(--ciel); border-top-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ciel) 35%, transparent); background: var(--info-fond); }
[data-public="lycee"][data-presentation="tableau"] .chapitre-icone::after, [data-public="lycee"][data-presentation="tableau"] .chapitre-icone-etat { display: none; }
/* … remplie par le bas, sans vague, à mesure que les étapes sont faites (07/11/2026, demande d'Alex) */
[data-public="lycee"][data-presentation="tableau"] .chapitre-icone.est-entame, [data-public="lycee"][data-presentation="tableau"] .chapitre-icone.est-termine {
  background: linear-gradient(to top, var(--eau-fond) var(--remplissage, 0%), var(--eau-ligne) var(--remplissage, 0%), var(--eau-ligne) calc(var(--remplissage, 0%) + 3px), var(--fond) calc(var(--remplissage, 0%) + 3px));
}