/* ==========================================================================
   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: flex-start;
  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: 2172 / 724;   /* réserve la place, évite le saut de mise en page */
}

/* --- Navigation par cycle ------------------------------------------------ */
.nav { display: flex; align-items: center; justify-content: flex-start; gap: 2px; 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; }

/* AdSense (annonces automatiques) peut inserer un bloc dans la barre de
   navigation, qui devient alors un enfant flex et ecrase le menu sur une
   colonne etroite. On lui interdit cet endroit. */
.entete .google-auto-placed,
.entete-inner > ins.adsbygoogle { display: none !important; }
.entete-inner > .nav { flex: 1 1 auto; min-width: 0; }

/* Retour a l'accueil du calcul mental, juste apres la marque. */
.nav-accueil { font-weight: 700; }
.nav-marque { margin-right: 2px; }