/* ==========================================================================
   Calcul mental Mathovore — feuille de style unique
   Une couleur par niveau : CP mandarine · CE1 grenat · CE2 prune · CM1 sauge · CM2 ocre
   6e azur · 5e émeraude · 4e brique · 3e ardoise · 2de cobalt · 1re cerise · Tale olive
   ========================================================================== */

:root {
  --encre: #0f1b2d;
  --encre-douce: #46566e;
  --encre-pale: #78899f;
  --fond: #eef3f8;
  --carte: #ffffff;
  --bord: #d9e2ec;
  --bord-fort: #bdcbdb;

  /* Bleu nuit de la charte, utilisé pour la barre, le héros et les bandeaux */
  --nuit: #0f2545;
  --nuit-clair: #1b3a63;

  /* Primaire */
  --mandarine: #e05e00;
  --mandarine-clair: #fdeee2;
  --grenat: #b32447;
  --grenat-clair: #fbe8ec;
  --prune: #7b3fa0;
  --prune-clair: #f3ebfa;
  --sauge: #3f7d5c;
  --sauge-clair: #e8f3ed;
  --ocre: #9a7a10;
  --ocre-clair: #fbf3dc;

  /* Collège */
  --azur: #0a7ec4;
  --azur-clair: #e2f1fb;
  --emeraude: #0a8f74;
  --emeraude-clair: #e0f3ef;
  --brique: #c0452a;
  --brique-clair: #fdeae6;
  --ardoise: #46618b;
  --ardoise-clair: #e9eef6;

  /* Lycée */
  --cobalt: #2a44b8;
  --cobalt-clair: #e8ebfb;
  --cerise: #c01f63;
  --cerise-clair: #fce7f0;
  --olive: #6b7f14;
  --olive-clair: #f2f6df;

  --accent: var(--azur);
  --accent-clair: var(--azur-clair);

  --rayon: 10px;
  --rayon-s: 6px;
  --ombre: 0 1px 1px rgba(15, 27, 45, .05), 0 6px 18px -10px rgba(15, 27, 45, .22);
  --ombre-forte: 0 2px 3px rgba(15, 27, 45, .07), 0 16px 34px -14px rgba(15, 27, 45, .34);
  --police: "Trebuchet MS", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--police);
  font-size: 17px;
  line-height: 1.65;
  color: var(--encre);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.contenu { width: min(1120px, 100% - 40px); margin-inline: auto; }
.contenu-etroit { width: min(760px, 100% - 40px); margin-inline: auto; }

/* --- Thèmes de niveau : une couleur par niveau, du CP à la terminale ------ */
.t-mandarine { --accent: var(--mandarine); --accent-clair: var(--mandarine-clair); }
.t-grenat    { --accent: var(--grenat);    --accent-clair: var(--grenat-clair); }
.t-prune     { --accent: var(--prune);     --accent-clair: var(--prune-clair); }
.t-sauge     { --accent: var(--sauge);     --accent-clair: var(--sauge-clair); }
.t-ocre      { --accent: var(--ocre);      --accent-clair: var(--ocre-clair); }
.t-azur      { --accent: var(--azur);      --accent-clair: var(--azur-clair); }
.t-emeraude  { --accent: var(--emeraude);  --accent-clair: var(--emeraude-clair); }
.t-brique    { --accent: var(--brique);    --accent-clair: var(--brique-clair); }
.t-ardoise   { --accent: var(--ardoise);   --accent-clair: var(--ardoise-clair); }
.t-cobalt    { --accent: var(--cobalt);    --accent-clair: var(--cobalt-clair); }
.t-cerise    { --accent: var(--cerise);    --accent-clair: var(--cerise-clair); }
.t-olive     { --accent: var(--olive);     --accent-clair: var(--olive-clair); }

/* --- En-tête ------------------------------------------------------------- */
.entete {
  position: sticky; top: 0; z-index: 40;
  background: var(--nuit);
  border-bottom: 3px solid var(--azur);
  transition: transform .26s ease;
  will-change: transform;
}
/* La barre s'escamote vers le haut dès qu'on descend dans la page, sur tous
   les écrans, et revient dès qu'on remonte. Voir assets/js/app.js. */
.entete.entete-cachee { transform: translateY(-101%); }
@media (prefers-reduced-motion: reduce) { .entete { transition: none; } }
.entete-inner {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 8px 0; min-height: 54px;
}

/* --- Bandeau pleine largeur ----------------------------------------------
   Il défile avec la page : seule la barre de navigation reste collée en haut,
   sinon un bandeau de 549 px de haut occuperait tout l'écran. */
.banniere { display: block; width: 100%; line-height: 0; background: #fff; border-bottom: 1px solid var(--bord); }
.banniere:hover { text-decoration: none; }
.banniere img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 2106 / 418;   /* réserve la place, évite le saut de mise en page */
}

/* --- Navigation par cycle ------------------------------------------------ */
.nav { display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; }
.nav-groupe { position: relative; }
.nav-bouton, .nav-lien {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 15px; border-radius: var(--rayon-s);
  font-family: inherit; font-size: .92rem; font-weight: 650;
  color: #c9d8ea; background: none; border: 0; cursor: pointer;
  white-space: nowrap; text-transform: uppercase; letter-spacing: .04em;
  font-size: .8rem;
}
.nav-bouton:hover, .nav-lien:hover { background: var(--nuit-clair); color: #fff; text-decoration: none; }
.nav-bouton.actif, .nav-lien.actif { background: var(--azur); color: #fff; }
.nav-bouton[aria-expanded="true"] { background: var(--nuit-clair); color: #fff; }
/* Retour au site principal, en tête de la barre : couleur de la marque. */
.nav-marque {
  color: #fff; font-weight: 800; letter-spacing: .08em;
  margin-right: 10px; background: var(--azur);
}
.nav-marque:hover { background: #0a8fdc; color: #fff; }

.nav-bouton .chevron { font-size: .7em; transition: transform .18s; }
.nav-bouton[aria-expanded="true"] .chevron { transform: rotate(180deg); }

.nav-menu {
  position: absolute; right: 0; top: calc(100% + 9px); z-index: 60;
  min-width: 246px; padding: 8px;
  display: grid; gap: 2px;
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: 14px; box-shadow: var(--ombre-forte);
}
.nav-menu[hidden] { display: none; }
.nav-menu a {
  display: flex; align-items: center; gap: 11px;
  padding: 7px 9px; border-radius: 9px;
  font-size: .9rem; font-weight: 600; color: var(--encre);
}
.nav-menu a:hover { background: var(--fond); text-decoration: none; }
.nav-menu a.actif { background: var(--accent-clair); }
.nav-menu .pastille { flex: none; min-width: 46px; height: 27px; font-size: .78rem; }

/* Barre compacte sur petit écran : les quatre entrées tiennent sur une ligne. */
@media (max-width: 860px) {
  .entete-inner { padding: 6px 0; min-height: 46px; }
  .nav { gap: 1px; }
  .nav-bouton, .nav-lien { padding: 7px 9px; font-size: .84rem; gap: 4px; }
  /* Le menu se déploie sur toute la largeur de l'en-tête. */
  .nav-groupe { position: static; }
  .nav-menu { left: 0; right: 0; min-width: 0; top: calc(100% + 7px); }
}
@media (max-width: 620px) {
  .nav-bouton, .nav-lien { padding: 6px 8px; font-size: .8rem; }
  .nav-marque { margin-right: 2px; }
  .nav-methode { display: none; }   /* reste dans le pied de page */
}

/* --- Héros --------------------------------------------------------------- */
.heros {
  position: relative; overflow: hidden; text-align: center;
  padding: 54px 0 46px;
  background: var(--nuit);
  color: #eaf2fa;
}
/* Quadrillage discret, clin d'œil au cahier de brouillon */
.heros::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(75% 75% at 50% 40%, #000 30%, transparent 100%);
}
.heros > .contenu { position: relative; z-index: 1; }

.heros h1 {
  margin: 0 0 14px;
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  line-height: 1.06; letter-spacing: -.03em; font-weight: 800;
  color: #fff;
}
.heros h1::after {
  content: ""; display: block; width: 72px; height: 4px; margin: 16px auto 0;
  background: var(--azur); border-radius: 2px;
}
.heros .chapeau {
  margin: 0 auto; max-width: 620px; font-weight: 500;
  font-size: clamp(1.02rem, 2.1vw, 1.16rem); color: #b8cbdf;
}
.badge-degrade {
  display: inline-block; margin-bottom: 18px;
  padding: 6px 16px; border-radius: var(--rayon-s);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #d9e8f6; font-size: .78rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
}

/* --- Recherche ----------------------------------------------------------- */
.recherche { position: relative; max-width: 620px; margin: 28px auto 0; }
.recherche input {
  width: 100%; padding: 16px 20px 16px 50px;
  font-family: inherit; font-size: 1.03rem; color: var(--encre);
  background: var(--carte);
  border: 2px solid transparent; border-radius: var(--rayon);
  box-shadow: var(--ombre-forte); transition: border-color .15s, box-shadow .15s;
}
.recherche input:focus {
  outline: none; border-color: var(--azur);
  box-shadow: 0 0 0 4px rgba(10, 126, 196, .3), var(--ombre-forte);
}
.recherche .loupe {
  position: absolute; left: 19px; top: 50%; transform: translateY(-50%);
  color: var(--encre-pale); pointer-events: none; font-size: 1.1rem;
}
.recherche-aide { margin-top: 10px; font-size: .85rem; color: #90a8c2; }
.heros kbd {
  padding: 1px 7px; border-radius: 4px; font-family: inherit; font-size: .9em;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .26);
  color: #fff;
}

#resultats { margin-top: 22px; text-align: left; }
.res-titre {
  margin: 0 0 12px; font-size: .84rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--encre-pale);
}
.res-liste { display: grid; gap: 8px; }
.res-item {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px; background: var(--carte);
  border: 1px solid var(--bord); border-radius: var(--rayon-s);
  transition: border-color .12s, transform .12s, box-shadow .12s;
}
.res-item:hover {
  border-color: var(--accent); transform: translateX(3px);
  box-shadow: var(--ombre); text-decoration: none;
}
.res-item .pastille { flex: none; }
.res-item b { display: block; font-size: .98rem; color: var(--encre); font-weight: 650; }
.res-item span { display: block; font-size: .85rem; color: var(--encre-pale); }
.res-vide { padding: 22px; text-align: center; color: var(--encre-pale); }

/* --- Pastille de niveau -------------------------------------------------- */
.pastille {
  display: inline-grid; place-items: center;
  min-width: 38px; height: 30px; padding: 0 9px;
  border-radius: 8px; font-size: .84rem; font-weight: 800;
  background: var(--accent-clair); color: var(--accent);
}
.pastille.p-mandarine { background: var(--mandarine-clair); color: var(--mandarine); }
.pastille.p-grenat    { background: var(--grenat-clair); color: var(--grenat); }
.pastille.p-prune     { background: var(--prune-clair); color: var(--prune); }
.pastille.p-sauge     { background: var(--sauge-clair); color: var(--sauge); }
.pastille.p-ocre      { background: var(--ocre-clair); color: var(--ocre); }
.pastille.p-azur      { background: var(--azur-clair); color: var(--azur); }
.pastille.p-emeraude  { background: var(--emeraude-clair); color: var(--emeraude); }
.pastille.p-brique    { background: var(--brique-clair); color: var(--brique); }
.pastille.p-ardoise   { background: var(--ardoise-clair); color: var(--ardoise); }
.pastille.p-cobalt    { background: var(--cobalt-clair); color: var(--cobalt); }
.pastille.p-cerise    { background: var(--cerise-clair); color: var(--cerise); }
.pastille.p-olive     { background: var(--olive-clair); color: var(--olive); }

/* --- Sections par cycle (accueil et plan du site) ------------------------- */
.section-cycle { padding: 30px 0 6px; }
.cycle-titre {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin: 0 0 6px; font-size: clamp(1.5rem, 3.4vw, 2rem);
  font-weight: 800; letter-spacing: -.025em;
}
.cycle-titre .cycle-compte {
  padding: 4px 12px; border-radius: 99px;
  background: var(--fond); border: 1px solid var(--bord);
  font-size: .8rem; font-weight: 700; color: var(--encre-pale);
  letter-spacing: 0;
}
.cycle-chapeau { margin: 0; color: var(--encre-douce); font-size: 1.02rem; }
.cycles-raccourcis {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8px;
  margin-top: 22px;
}
.cycles-raccourcis a {
  padding: 9px 22px; border-radius: var(--rayon-s);
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .24);
  font-size: .86rem; font-weight: 700; color: #e6f0f9;
  text-transform: uppercase; letter-spacing: .06em;
}
.cycles-raccourcis a:hover { background: var(--azur); border-color: var(--azur); color: #fff; text-decoration: none; }

/* --- Cartes de niveau (accueil) ------------------------------------------ */
.niveaux { display: grid; gap: 18px; margin: 22px 0 30px; }
@media (min-width: 620px) { .niveaux { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .niveaux { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) {
  .niveaux-4 { grid-template-columns: repeat(4, 1fr); }
  .niveaux-5 { grid-template-columns: repeat(5, 1fr); }
}

.carte-niveau {
  display: flex; flex-direction: column;
  padding: 22px 22px 18px; text-align: left;
  background: var(--carte);
  border: 1px solid var(--bord);
  border-left: 5px solid var(--accent);
  border-radius: var(--rayon);
  box-shadow: 0 1px 2px rgba(21, 25, 43, .05),
              0 14px 30px -18px color-mix(in srgb, var(--accent) 70%, transparent);
  cursor: pointer; font: inherit; color: inherit;
  transition: transform .18s, box-shadow .18s, border-color .18s;
  position: relative; overflow: hidden;
}
.carte-niveau::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 0;
}
.carte-niveau:hover, .carte-niveau[aria-expanded="true"] {
  transform: translateY(-3px); border-color: var(--accent);
  box-shadow: 0 2px 4px rgba(21, 25, 43, .06),
              0 24px 44px -20px color-mix(in srgb, var(--accent) 85%, transparent);
}

/* Numero du niveau dans une pastille pleine */
.carte-niveau .gros-chiffre {
  /* largeur libre : « 6ème » est plus large qu'un carré de 62 px.
     align-self evite que la pastille ne s'etire sur toute la carte. */
  align-self: flex-start;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  min-width: 62px; height: 56px; padding: 0 17px;
  border-radius: 18px; white-space: nowrap;
  background: var(--accent); color: #fff;
  font-size: 1.42rem; font-weight: 800; letter-spacing: -.02em;
  box-shadow: 0 10px 22px -10px var(--accent);
}
.carte-niveau h3 { margin: 0 0 5px; font-size: 1.1rem; font-weight: 750; }
.carte-niveau p { margin: 0 0 14px; font-size: .92rem; color: var(--encre-douce); }

/* Themes du niveau, en petites puces colorees */
.puces-themes {
  display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 16px;
  flex: 1; align-content: flex-start;
}
.puce-theme {
  padding: 4px 10px; border-radius: 99px;
  background: color-mix(in srgb, var(--accent) 13%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  color: color-mix(in srgb, var(--accent) 82%, #000);
  font-size: .715rem; font-weight: 700; line-height: 1.5;
}

.carte-niveau .pied {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px;
  border-top: 1px dashed color-mix(in srgb, var(--accent) 32%, transparent);
  font-size: .86rem; font-weight: 700; color: var(--accent);
}
.carte-niveau .pied > span:first-child {
  padding: 5px 13px; border-radius: 99px;
  background: var(--accent); color: #fff; font-size: .79rem;
}
.carte-niveau .chevron {
  display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; background: color-mix(in srgb, var(--accent) 15%, #fff);
  transition: transform .22s;
}
.carte-niveau[aria-expanded="true"] .chevron { transform: rotate(180deg); }

/* --- Panneau dépliant ---------------------------------------------------- */
.panneau { display: none; margin: -42px 0 60px; }
.panneau.ouvert { display: block; animation: apparait .22s ease-out; }
@keyframes apparait { from { opacity: 0; transform: translateY(-8px); } }

.panneau-inner {
  padding: 28px; background: var(--carte);
  border: 1px solid var(--bord); border-top: 4px solid var(--accent);
  border-radius: var(--rayon); box-shadow: var(--ombre);
}
.panneau-entete {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px;
  margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--bord);
}
.panneau-entete h3 { margin: 0; font-size: 1.3rem; font-weight: 750; }
.panneau-entete .compte { font-size: .9rem; color: var(--encre-pale); }
.panneau-entete .lien-niveau { margin-left: auto; font-weight: 650; font-size: .9rem; color: var(--accent); }

/* --- Listes de quiz ------------------------------------------------------ */
.groupe-theme + .groupe-theme { margin-top: 26px; }
.groupe-theme h4 {
  margin: 0 0 12px; font-size: .78rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em; color: var(--encre-pale);
}
.grille-quiz { display: grid; gap: 10px; }
@media (min-width: 640px) { .grille-quiz { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grille-quiz { grid-template-columns: repeat(3, 1fr); } }

.carte-quiz {
  display: block; padding: 15px 17px 15px 20px;
  background: var(--fond); border: 1px solid transparent;
  border-left: 4px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: var(--rayon-s);
  transition: background .12s, border-color .12s, transform .12s;
}
.carte-quiz:hover {
  background: var(--accent-clair); border-color: var(--accent);
  transform: translateY(-2px); text-decoration: none;
}
.carte-quiz b { display: block; font-size: .97rem; font-weight: 650; color: var(--encre); }
.carte-quiz span { display: block; margin-top: 3px; font-size: .84rem; color: var(--encre-pale); }

/* --- Bloc de contenu / SEO ----------------------------------------------- */
.section { padding: 46px 0; }
.section-titre {
  margin: 0 0 8px; font-size: clamp(1.45rem, 3.2vw, 1.9rem);
  font-weight: 780; letter-spacing: -.02em;
}
.section-chapeau { margin: 0 0 26px; color: var(--encre-douce); max-width: 68ch; }
.chapeau-domaine { display: block; margin-top: 6px; font-size: .82rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent); font-weight: 700; }
.bande-couleur .chapeau-domaine { color: #cfe0ef; }

.prose { max-width: 72ch; }
.prose p { margin: 0 0 16px; }
.prose h2 {
  margin: 34px 0 12px; font-size: 1.32rem; font-weight: 750; letter-spacing: -.01em;
}
.prose h3 { margin: 24px 0 8px; font-size: 1.06rem; font-weight: 700; }
.prose ul { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin-bottom: 7px; }

.cartouche {
  padding: 20px 22px; margin: 0 0 20px;
  background: var(--accent-clair); border-radius: var(--rayon-s);
  border-left: 4px solid var(--accent);
}
.cartouche p:last-child { margin-bottom: 0; }

.liste-methode { list-style: none; margin: 0 0 20px; padding: 0; counter-reset: etape; }
.liste-methode li {
  position: relative; padding: 0 0 14px 44px; counter-increment: etape;
}
.liste-methode li::before {
  content: counter(etape);
  position: absolute; left: 0; top: 1px;
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--accent); color: #fff;
  font-size: .85rem; font-weight: 700;
}
.liste-methode strong { display: block; font-weight: 700; }
.liste-methode span { color: var(--encre-douce); font-size: .95rem; }

.liste-puces { list-style: none; margin: 0 0 20px; padding: 0; }
.liste-puces li { position: relative; padding-left: 28px; margin-bottom: 9px; }
.liste-puces li::before {
  content: "→"; position: absolute; left: 0; top: 0;
  color: var(--accent); font-weight: 700;
}
.liste-alertes li::before { content: "⚠"; font-size: .9rem; }

.faq details {
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--rayon-s); margin-bottom: 9px; overflow: hidden;
}
.faq summary {
  padding: 15px 18px; cursor: pointer; font-weight: 650; font-size: .99rem;
  list-style: none; display: flex; justify-content: space-between; gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-weight: 700; font-size: 1.2rem; }
.faq details[open] summary::after { content: "−"; }
.faq details[open] summary { border-bottom: 1px solid var(--bord); }
.faq .reponse { padding: 14px 18px 16px; color: var(--encre-douce); font-size: .96rem; }

/* --- Réglages du quiz ---------------------------------------------------- */
.reglages {
  background: var(--carte); border: 1px solid var(--bord);
  border-top: 4px solid var(--accent);
  border-radius: var(--rayon); box-shadow: var(--ombre);
  padding: 26px; margin-bottom: 34px;
}
.reglages h2 { margin: 0 0 4px; font-size: 1.18rem; font-weight: 750; }
.reglages .sous { margin: 0 0 22px; font-size: .92rem; color: var(--encre-pale); }

.bloc-reglage { margin-bottom: 24px; }
.bloc-reglage > label, .bloc-reglage > .intitule {
  display: block; margin-bottom: 10px;
  font-size: .8rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--encre-pale);
}

.cases { display: grid; gap: 8px; }
@media (min-width: 620px) { .cases { grid-template-columns: repeat(2, 1fr); } }
.case {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px; background: var(--fond);
  border: 1px solid var(--bord); border-radius: var(--rayon-s);
  cursor: pointer; font-size: .95rem;
  transition: background .12s, border-color .12s;
}
.case:hover { border-color: var(--bord-fort); }
.case:has(input:checked) { background: var(--accent-clair); border-color: var(--accent); font-weight: 600; }
.case input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; cursor: pointer; }

.curseur-ligne { display: flex; align-items: center; gap: 16px; }
.curseur-ligne input[type="range"] { flex: 1; accent-color: var(--accent); height: 6px; cursor: pointer; }
.valeur {
  min-width: 78px; text-align: center; padding: 7px 10px;
  background: var(--accent-clair); color: var(--accent);
  border-radius: var(--rayon-s); font-weight: 750; font-size: .97rem;
}

.exemple-question {
  /* bloc et non flex : un <br> dans l'énoncé doit provoquer un vrai
     retour à la ligne, ce qu'un conteneur flex empêche */
  margin-top: 10px; padding: 20px 18px;
  background: var(--fond); border: 1px dashed var(--bord-fort);
  border-radius: var(--rayon-s); text-align: center;
  font-size: 1.25rem; min-height: 64px; line-height: 1.5;
}

.barre-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.bouton {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px; border: none; border-radius: var(--rayon-s);
  font-family: inherit; font-size: 1.02rem; font-weight: 750;
  letter-spacing: .01em;
  background: var(--accent); color: #fff; cursor: pointer;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18);
  transition: transform .13s, box-shadow .13s, filter .13s;
}
.bouton:hover { transform: translateY(-2px); filter: brightness(1.06); text-decoration: none; }
.bouton:active { transform: translateY(0); }
.bouton.secondaire {
  background: var(--carte); color: var(--encre-douce);
  border: 1px solid var(--bord); box-shadow: none; font-weight: 650;
}
.bouton.secondaire:hover { border-color: var(--bord-fort); background: var(--fond); }
.bouton:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* --- Fil d'Ariane -------------------------------------------------------- */
.ariane { padding: 20px 0 0; font-size: .87rem; color: var(--encre-pale); }
.ariane a { color: var(--encre-pale); }
.ariane a:hover { color: var(--accent); }
.ariane span { margin: 0 7px; opacity: .55; }

/* --- Pied de page -------------------------------------------------------- */
.pied {
  margin-top: 60px; padding: 40px 0 34px;
  background: var(--carte); border-top: 1px solid var(--bord);
  font-size: .91rem; color: var(--encre-douce);
}
.pied-grille { display: grid; gap: 28px; }
@media (min-width: 760px) { .pied-grille { grid-template-columns: 1.4fr 1fr 1fr; } }
.pied h5 {
  margin: 0 0 10px; font-size: .78rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--encre-pale);
}
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: 6px; }
.pied a { color: var(--encre-douce); }
.pied-bas {
  margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--bord);
  font-size: .85rem; color: var(--encre-pale);
  display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between;
}

/* ==========================================================================
   Notation mathématique
   ========================================================================== */
.frac {
  display: inline-flex; flex-direction: column; align-items: center;
  vertical-align: -.55em; margin: 0 .18em; line-height: 1.12;
}
.frac .num { padding: 0 .3em; border-bottom: .09em solid currentColor; }
.frac .den { padding: 0 .3em; }
sup { font-size: .68em; vertical-align: super; line-height: 0; }
.sqrt { display: inline-block; }
.sqrt::before { content: "√"; }
.sqrt > span {
  border-top: .08em solid currentColor;
  padding: 0 .16em 0 .06em; margin-left: -.04em;
}
.hl { color: var(--accent); font-weight: 750; }

/* Vecteur : fleche au-dessus de la lettre tant que MathJax n'a pas pris la
   main (apercu de question, impression). MathJax ecrit ensuite un ec. */
.vecteur {
  position: relative; display: inline-block;
  font-style: italic; padding: .3em .06em 0;
}
.vecteur::before {
  content: "→"; position: absolute; inset: 0 0 auto 0;
  font-size: .66em; line-height: 1; text-align: center; font-style: normal;
}
em { font-style: italic; }

/* ==========================================================================
   Diaporama plein écran
   ========================================================================== */
#diaporama {
  position: fixed; inset: 0; z-index: 9999;
  display: none; flex-direction: column;
  background: #0d1020; color: #fff;
  font-size: 17px;
}
#diaporama.actif { display: flex; }
#diaporama.actif ~ * { visibility: hidden; }

.diapo-barre {
  display: flex; align-items: center; gap: 18px;
  padding: 10px 22px; border-bottom: 1px solid rgba(255, 255, 255, .1);
  flex: none;
}
.diapo-barre .titre { font-weight: 700; font-size: 1rem; }
.diapo-barre .compteur {
  padding: 5px 13px; border-radius: 99px;
  background: rgba(255, 255, 255, .1); font-size: .87rem;
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.diapo-barre .droite { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.icone-btn {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(255, 255, 255, .1); color: #fff;
  border: none; cursor: pointer; font-size: 1.05rem;
  transition: background .12s;
}
.icone-btn:hover { background: rgba(255, 255, 255, .22); }

/* Barre de progression : une pastille par question */
.diapo-pistes {
  display: flex; align-items: center; gap: 8px; flex: none;
  padding: 9px 22px; overflow-x: auto; scrollbar-width: thin;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.diapo-pistes::-webkit-scrollbar { height: 5px; }
.diapo-pistes::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .2); border-radius: 9px; }

.piste-num {
  flex: none; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: transparent; color: rgba(255, 255, 255, .5);
  border: 1.5px solid rgba(255, 255, 255, .22);
  font-family: inherit; font-size: .88rem; font-weight: 700;
  font-variant-numeric: tabular-nums; cursor: pointer;
  transition: transform .18s, background .18s, color .18s, border-color .18s, box-shadow .18s;
}
.piste-num:hover { border-color: rgba(255, 255, 255, .55); color: #fff; }

/* question déjà passée */
.piste-num.faite {
  background: rgba(255, 255, 255, .2); color: #fff; border-color: transparent;
}

/* question en cours : pastille pleine, couleur du niveau */
.piste-num.actif {
  background: var(--accent); color: #fff; border-color: transparent;
  transform: scale(1.22); font-size: .95rem;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent),
              0 6px 16px -4px var(--accent);
}

.piste-fin {
  flex: none; margin-left: 4px; padding: 0 14px; height: 36px;
  display: grid; place-items: center; border-radius: 99px;
  border: 1.5px dashed rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .45);
  font-size: .82rem; font-weight: 700; white-space: nowrap;
}
.piste-fin.actif {
  background: #fff; color: #0d1020; border-style: solid; border-color: #fff;
}

.diapo-scene {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 16px 3vw; text-align: center;
  gap: clamp(16px, 3.5vh, 44px);
  min-height: 0;
}

/* La taille est calculée par le lecteur selon la longueur de l'énoncé :
   voir tailleQuestion() dans player.js. */
.diapo-question {
  font-weight: 700; line-height: 1.18; letter-spacing: -.025em;
  max-width: 96vw; text-wrap: balance;
}
.diapo-question small {
  display: block; margin-top: .32em; font-size: .36em;
  font-weight: 500; opacity: .75; line-height: 1.35;
}

.chrono {
  position: relative; flex: none;
  width: clamp(88px, 11vh, 160px); height: clamp(88px, 11vh, 160px);
}
.chrono svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.chrono circle { fill: none; stroke-width: 7; }
.chrono .piste { stroke: rgba(255, 255, 255, .14); }
.chrono .jauge { stroke: #fff; stroke-linecap: round; transition: stroke-dashoffset .1s linear, stroke .3s; }
.chrono.urgence .jauge { stroke: #fb7185; }
.chrono span {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: clamp(1.7rem, 4.6vh, 3.4rem);
  font-weight: 800; font-variant-numeric: tabular-nums;
}

.decompte {
  font-size: clamp(6rem, 24vw, 15rem); font-weight: 800;
  line-height: 1; animation: pulse .9s ease-out;
}
@keyframes pulse { from { transform: scale(.55); opacity: 0; } }

.diapo-pied {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 10px 24px 16px; flex: none; flex-wrap: wrap;
}
.diapo-btn {
  padding: 13px 28px; border-radius: 99px; border: none;
  background: #fff; color: #0d1020;
  font-family: inherit; font-size: 1rem; font-weight: 700; cursor: pointer;
  transition: transform .12s;
}
.diapo-btn:hover { transform: translateY(-2px); }
.diapo-btn.fantome {
  background: transparent; color: #fff;
  border: 1px solid rgba(255, 255, 255, .3);
}
.aide-clavier { width: 100%; text-align: center; font-size: .78rem; opacity: .35; margin: 0; }

/* Récapitulatif de fin */
.recap { width: min(860px, 100%); text-align: left; overflow-y: auto; max-height: 100%; }
.recap h2 { text-align: center; font-size: 1.9rem; margin: 0 0 22px; }
.recap ol { list-style: none; counter-reset: r; margin: 0; padding: 0; }
.recap li {
  counter-increment: r; display: flex; gap: 16px;
  padding: 14px 16px; border-radius: 12px;
  background: rgba(255, 255, 255, .06); margin-bottom: 8px;
  font-size: 1.02rem; align-items: flex-start;
}
.recap li::before {
  content: counter(r); flex: none;
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(255, 255, 255, .14); font-size: .82rem; font-weight: 700;
}
.recap .q { flex: 1; }
.recap .r { flex: 1; color: #6ee7b7; font-weight: 600; }
@media (max-width: 680px) { .recap li { flex-direction: column; gap: 6px; } }

/* --- Impression ---------------------------------------------------------- */
@media print {
  .entete, .pied, .reglages, .recherche, #diaporama { display: none !important; }
  body { background: #fff; font-size: 12pt; }
}

/* Icône de relance du bouton final */
.icone-rejouer { display: inline-block; font-size: 1.15em; line-height: 1; }
.diapo-btn:hover .icone-rejouer { transform: rotate(-180deg); }
.icone-rejouer { transition: transform .35s ease; }
.diapo-btn { display: inline-flex; align-items: center; gap: 10px; }

/* --- Bandes et titres colorés -------------------------------------------- */
.bande-couleur {
  position: relative;
  background: var(--nuit); color: #d6e3f0;
  border-block: 1px solid var(--nuit-clair);
}
.bande-couleur .section-titre,
.bande-couleur .section-titre::after { color: #fff; }
.bande-couleur .section-chapeau { color: #a9c0d7; }
.bande-couleur .prose { color: #d6e3f0; }
.bande-couleur .prose p strong { color: #7fd0ff; }

.titre-degrade {
  display: inline-block; padding-bottom: .06em;
  color: var(--nuit);
  border-bottom: 4px solid var(--azur);
}

/* Titre de section souligné d'un trait aux couleurs du niveau */
.section-titre { position: relative; }

/* Pastille de niveau, version plus affirmée sur les pages intérieures */
.pastille {
  min-width: 46px; height: 34px; padding: 0 13px; font-size: .92rem;
  white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Pied de page : intitulés colorés */
.pied h5 { color: var(--azur); }
.pied-grille > div:nth-child(3) h5 { color: var(--emeraude); }
.pied-grille > div:nth-child(4) h5 { color: var(--cobalt); }
.pied { border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, #0e9f6e, #2563eb 38%, #e3721a 70%, #8b3fd4) 1; }

/* ==========================================================================
   MathJax — composition des formules
   Les énoncés sont convertis en LaTeX par latex.js puis composés en SVG.
   Le rendu HTML/CSS (.frac, .sqrt, sup) reste le repli si MathJax
   n'est pas chargé.
   ========================================================================== */
.maths { display: inline; }

mjx-container[jax="SVG"] {
  display: inline-block;
  vertical-align: -0.18ex;
  max-width: 100%;
}
mjx-container[jax="SVG"] > svg { overflow: visible; }
mjx-container[jax="SVG"] svg { fill: currentColor; stroke: currentColor; }
mjx-container:focus, mjx-container *:focus { outline: none; }

/* Dans le diaporama, les réponses surlignées doivent rester lisibles
   sur fond sombre : la couleur du niveau y serait trop foncée. */
#diaporama .hl { color: #6ee7b7; }
#diaporama .recap .r .hl { color: #6ee7b7; }

/* Un énoncé composé ne doit jamais déborder de la diapositive */
.diapo-question mjx-container[jax="SVG"] { max-width: 96vw; }
.exemple-question mjx-container[jax="SVG"] { max-width: 100%; }

/* ==========================================================================
   Figures — SVG générés par les quiz (voir _generateur/src/data/figures.js)
   ========================================================================== */
.figure-math {
  display: block; margin: 0 auto .45em;
  width: 100%; height: auto;
  color: inherit;                 /* les traits suivent la couleur du texte */
  overflow: visible;
}
.diapo-question .figure-math { max-height: 52vh; }
.exemple-question .figure-math { max-height: 190px; max-width: 420px; }
.recap .figure-math { max-height: 150px; max-width: 300px; margin: 0 0 .3em; }