/* Retiens Ça • Apprends Malin — thème « nuit néon » inspiré de la bannière YouTube.
   Cadre sombre et lumineux ; leçons et exercices sur cartes claires pour la lisibilité. */
:root {
    /* Nuit */
    --night: #090d2e;
    --night-2: #141a5c;
    --violet: #3d1a8f;
    --glass: rgb(255 255 255 / 6%);
    --glass-line: rgb(120 200 255 / 28%);
    /* Néons */
    --neon-cyan: #3ee6ff;
    --neon-yellow: #ffd23f;
    --neon-orange: #ff8a1f;
    --neon-gradient: linear-gradient(180deg, #fff3a6 0%, var(--neon-yellow) 45%, var(--neon-orange) 100%);
    /* Matières (pastilles de la bannière) */
    --maths: #1f4fd1;
    --francais: #0f7a4a;
    /* Texte */
    --on-dark: #eef1ff;
    --on-dark-muted: #b5bdf0;
    --ink: #161b33;
    --muted: #4a5272;
    --line: #d6dbec;
    --card: #ffffff;
    /* États */
    --ok: #12673f;
    --ok-soft: #e2f6ea;
    --ko: #9a3412;
    --ko-soft: #fdeee4;
    --sun-soft: #fff4d1;
    --sky-soft: #e9f1ff;
    --focus: var(--neon-cyan);
    --radius: 16px;
    --shadow: 0 8px 28px rgb(0 0 0 / 35%);
    --glow: 0 0 6px rgb(255 210 63 / 70%), 0 0 18px rgb(255 138 31 / 45%);
    --font: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
    --step: 1rem;
    color-scheme: dark;
}

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

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

body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--step);
    line-height: 1.6;
    color: var(--on-dark);
    background-color: var(--night);
    /* Halos cyan et dorés, comme les éclats lumineux de la bannière. */
    background-image:
        radial-gradient(60rem 30rem at -10% -5%, rgb(62 230 255 / 16%), transparent 60%),
        radial-gradient(50rem 30rem at 110% 0%, rgb(255 170 40 / 14%), transparent 60%),
        radial-gradient(70rem 40rem at 50% 120%, rgb(110 50 220 / 35%), transparent 70%),
        linear-gradient(180deg, var(--night) 0%, var(--night-2) 55%, var(--violet) 100%);
    background-attachment: fixed;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Primaire : plus grand et plus lumineux. Collège : plus sobre. */
body.stage-primaire { --step: 1.15rem; }
body.stage-college { --glow: 0 0 4px rgb(255 210 63 / 45%); }

main { flex: 1; padding-block: 1.5rem 3rem; outline: none; }

.container { width: min(100% - 2rem, 62rem); margin-inline: auto; }

h1, h2, h3 { line-height: 1.2; }
h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 0 0 1rem; }
h2 { font-size: 1.45rem; margin: 2rem 0 .75rem; }
h3 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; color: var(--on-dark-muted); }

a { color: var(--neon-cyan); text-underline-offset: .2em; }

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

.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link { position: absolute; left: -999px; top: .5rem; background: var(--card); color: var(--ink); padding: .5rem 1rem; z-index: 10; }
.skip-link:focus { left: 1rem; }

/* Titre néon (jaune → orange, lueur douce) */
.neon-title, .brand__name {
    font-style: italic;
    font-weight: 900;
    letter-spacing: .01em;
    background: var(--neon-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 6px rgb(255 160 40 / 55%));
}

/* En-tête */
.site-header {
    background: linear-gradient(90deg, rgb(9 13 46 / 92%), rgb(40 22 110 / 92%));
    border-bottom: 1px solid var(--glass-line);
    box-shadow: 0 1px 0 rgb(62 230 255 / 25%), 0 6px 24px rgb(0 0 0 / 30%);
}
.site-header__inner { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; min-height: 4.5rem; padding-block: .4rem; }
.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; }
.brand img { border-radius: 50%; background: radial-gradient(circle, #2a2f8f, var(--night)); box-shadow: 0 0 0 2px var(--neon-cyan), 0 0 14px rgb(62 230 255 / 60%); }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name { font-size: 1.6rem; text-transform: uppercase; }
.brand__tagline { color: var(--neon-cyan); font-weight: 700; font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 0 8px rgb(62 230 255 / 55%); }

.draft-banner { margin: 0; padding: .45rem 1rem; text-align: center; background: var(--sun-soft); color: #5c4400; font-size: .95rem; }
.flash { padding: .75rem 1rem; background: var(--sky-soft); color: var(--ink); border-radius: var(--radius); }

.site-footer { background: rgb(5 8 30 / 85%); color: var(--on-dark-muted); font-size: .9rem; padding-block: 1.25rem; border-top: 1px solid var(--glass-line); }
.site-footer p { margin: .25rem 0; }

/* Accueil */
.hero {
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
    padding: clamp(1.25rem, 4vw, 2.25rem);
    border-radius: calc(var(--radius) + 4px);
    background:
        radial-gradient(30rem 14rem at 0% 50%, rgb(62 230 255 / 22%), transparent 70%),
        radial-gradient(26rem 14rem at 100% 50%, rgb(255 170 40 / 22%), transparent 70%),
        linear-gradient(120deg, #0d1450, #2a1478);
    border: 1px solid var(--glass-line);
    box-shadow: var(--shadow), inset 0 0 40px rgb(62 230 255 / 10%);
}
.hero__text { flex: 1 1 18rem; }
.hero__kicker { margin: 0 0 .25rem; color: var(--neon-cyan); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .9rem; }
.hero h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); }
.hero__free { font-weight: 700; color: var(--neon-yellow); }

.pills { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 1rem 0; }
.pill { padding: .3rem .95rem; border-radius: 999px; font-weight: 800; font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; color: #fff; border: 2px solid rgb(255 255 255 / 35%); }
.pill--maths { background: var(--maths); }
.pill--francais { background: var(--francais); }

.stage-title { color: var(--on-dark-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .95rem; }

.level-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .85rem; }
.level-card {
    display: flex; flex-direction: column; gap: .25rem; padding: 1rem; min-height: 6rem;
    background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--radius);
    text-decoration: none; color: var(--on-dark);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.level-card:hover { transform: translateY(-3px); border-color: var(--neon-cyan); box-shadow: 0 0 0 1px var(--neon-cyan), 0 0 22px rgb(62 230 255 / 35%); }
.level-card__label { font-size: 1.8rem; font-weight: 900; font-style: italic; color: var(--neon-yellow); text-shadow: var(--glow); }
.level-card__count { font-size: .9rem; color: var(--on-dark-muted); }
.level-card--primaire { border-top: 4px solid var(--neon-yellow); }
.level-card--college { border-top: 4px solid var(--neon-cyan); }

/* Fil d'Ariane */
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem; padding: 0; margin: 0 0 1rem; font-size: .95rem; color: var(--on-dark-muted); }
.breadcrumb li + li::before { content: "›"; margin-right: .25rem; }

/* Page d'une classe */
.subject__title { display: inline-block; padding: .3rem 1rem; border-radius: 999px; color: #fff; font-size: 1.2rem; text-transform: uppercase; letter-spacing: .04em; }
.subject__title--maths { background: var(--maths); }
.subject__title--francais { background: var(--francais); }
.competence-list { list-style: none; padding: 0; display: grid; gap: .75rem; }
.competence-card { display: flex; flex-direction: column; gap: .25rem; padding: 1rem 1.25rem; background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--radius); color: var(--on-dark); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.competence-card:hover { border-color: var(--neon-cyan); box-shadow: 0 0 18px rgb(62 230 255 / 30%); }
.competence-card__label { font-weight: 800; color: #fff; }
.competence-card__summary { color: var(--on-dark-muted); font-size: .95rem; }

.badge-status { display: inline-block; align-self: flex-start; padding: .1rem .6rem; border-radius: 999px; background: var(--sun-soft); color: #5c4400; font-size: .8rem; font-weight: 700; font-style: normal; }

.empty { text-align: center; padding: 2rem 1rem; color: var(--on-dark-muted); }
.empty .mascot { margin-inline: auto; }

/* Cartes claires : leçon et exercice */
.lesson, .exercise {
    background: var(--card); color: var(--ink);
    border-radius: calc(var(--radius) + 4px);
    box-shadow: var(--shadow), 0 0 0 1px rgb(62 230 255 / 35%);
    padding: clamp(1rem, 3vw, 2rem);
    color-scheme: light;
}
.lesson h1, .exercise h1 { color: #11173f; }
.lesson h3, .exercise h3 { color: #11173f; }
.lesson a, .exercise a { color: #1d3fb8; }
.lesson__meta, .exercise__meta { margin: 0 0 .5rem; color: var(--muted); font-size: .95rem; }
.lesson__source { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
.prereq { padding: .75rem 1rem; background: var(--sky-soft); border-radius: var(--radius); }

.prose { max-width: 42rem; }
.prose pre { background: #0f1442; color: #fdf6d6; padding: 1rem; border-radius: 12px; font-size: 1.2rem; line-height: 1.35; overflow-x: auto; }
.prose table { border-collapse: collapse; margin: 1rem 0; font-size: 1.05rem; display: block; max-width: 100%; overflow-x: auto; }
.prose th, .prose td { border: 2px solid #1d2a6b; padding: .4rem .8rem; text-align: center; }
.prose th { background: #1d2a6b; color: var(--neon-yellow); }
.prose li { margin-block: .25rem; }

.tip { display: flex; gap: 1rem; align-items: center; margin-top: 1.5rem; padding: 1rem; background: linear-gradient(120deg, #fff6d6, #ffe7c2); border: 2px solid var(--neon-orange); border-radius: var(--radius); }
.tip__title { margin: 0; font-weight: 800; color: #8a3b00; }
.tip p:last-child { margin-bottom: 0; }

.video { aspect-ratio: 16 / 9; margin-block: 1rem; }
.video iframe { width: 100%; height: 100%; border: 0; border-radius: var(--radius); }

.cta { margin-top: 2rem; }

/* Personnage */
.mascot { margin: 0; display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.mascot img { display: block; height: auto; max-width: 100%; }
.mascot__bubble { margin-top: .25rem; padding: .4rem 1rem; background: var(--neon-gradient); color: #2a1300; border-radius: 999px; font-weight: 800; box-shadow: var(--glow); }

/* Boutons */
.button {
    display: inline-flex; align-items: center; justify-content: center; min-height: 2.9rem; padding: .6rem 1.25rem;
    border: 2px solid #1d2a6b; border-radius: 999px; background: #fff; color: #1d2a6b;
    font: inherit; font-weight: 800; text-decoration: none; cursor: pointer;
    transition: transform .1s, box-shadow .15s;
}
.button:hover { background: var(--sky-soft); }
.button--primary { background: var(--neon-gradient); border-color: #e07a10; color: #2a1300; box-shadow: 0 0 12px rgb(255 160 40 / 45%); }
.button--primary:hover { background: var(--neon-gradient); transform: translateY(-1px); box-shadow: 0 0 20px rgb(255 160 40 / 70%); }
.button--ghost { border-color: transparent; background: transparent; text-decoration: underline; }
.button--large { min-height: 3.4rem; padding-inline: 1.9rem; font-size: 1.1rem; }

/* Exercice */
.exercise__prompt { font-size: clamp(1.3rem, 3.2vw, 1.75rem); }
.exercise__visual { margin-block: 1rem; max-width: 26rem; }
.fraction-bar { width: 100%; height: auto; }
.fraction-bar .part { fill: #fff; stroke: #1d2a6b; stroke-width: 2; }
.fraction-bar .part--on { fill: var(--neon-yellow); }

.choices, .fraction-input { border: 0; padding: 0; margin: 0 0 1rem; }
.choices legend, .fraction-input legend, .field label { font-weight: 800; margin-bottom: .5rem; }
.choices { display: flex; flex-wrap: wrap; gap: .75rem; }
.choices legend { width: 100%; }
.choice { display: flex; align-items: center; gap: .6rem; min-height: 3rem; padding: .5rem 1.1rem; border: 2px solid var(--line); border-radius: var(--radius); cursor: pointer; font-size: 1.2rem; }
.choice:has(input:checked) { border-color: #1d2a6b; background: var(--sky-soft); box-shadow: 0 0 0 2px var(--neon-cyan); }
.choice input { width: 1.3rem; height: 1.3rem; accent-color: #1d2a6b; }

.fraction-input { display: inline-flex; flex-direction: column; align-items: center; gap: .3rem; }
.fraction-input input { width: 5rem; text-align: center; }
.fraction-input__bar { display: block; width: 6rem; height: 4px; background: var(--ink); border-radius: 2px; }

.field { margin-bottom: 1rem; }
.field label { display: block; }
.field__row { display: flex; align-items: center; gap: .5rem; }
.field__unit { font-weight: 800; font-size: 1.2rem; }
.field__help { margin: .25rem 0 0; color: var(--muted); font-size: .9rem; }

input:not([type="radio"]) { font: inherit; font-size: 1.3rem; padding: .5rem .75rem; min-height: 3rem; width: min(100%, 14rem); border: 2px solid var(--muted); border-radius: 10px; background: #fff; color: var(--ink); }
input:not([type="radio"]):focus-visible { border-color: #1d2a6b; }

.actions, .next { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.next { margin-top: 1.5rem; }

.feedback { display: flex; gap: 1rem; align-items: center; padding: 1rem; border-radius: var(--radius); margin-block: 1rem; }
.feedback p { margin: .25rem 0; }
.feedback__title { font-weight: 900; font-size: 1.15rem; }
.feedback--ok { background: var(--ok-soft); border: 2px solid var(--ok); }
.feedback--ok .feedback__title { color: var(--ok); }
.feedback--ko { background: var(--ko-soft); border: 2px solid var(--ko); }
.feedback--ko .feedback__title { color: var(--ko); }
.feedback--info { background: var(--sky-soft); border: 2px solid #1d2a6b; }
.hint { padding: .75rem 1rem; background: var(--sun-soft); border-left: 6px solid var(--neon-orange); border-radius: 10px; margin-block: 1rem; }
.hint__title { margin: 0; font-weight: 800; }

/* Petite apparition de la réussite (désactivée si l'élève réduit les animations). */
@keyframes pop { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.feedback--ok { animation: pop .25s ease-out; }

/* Bouton animations (en-tête) */
.site-header__inner { justify-content: space-between; gap: 1rem; }
.motion-toggle { font: inherit; font-size: .85rem; font-weight: 700; color: var(--on-dark); background: var(--glass); border: 1px solid var(--glass-line); border-radius: 999px; padding: .35rem .8rem; cursor: pointer; }
.motion-toggle[aria-pressed="false"] { color: var(--on-dark-muted); }

.button--small { min-height: 2.75rem; min-width: 2.75rem; padding: .3rem .8rem; font-size: .9rem; }

/* Lecteur pas à pas */
.steps { margin-block: 1rem; }
.steps__toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .6rem; border-radius: 12px; background: #11173f; color: var(--on-dark); }
.steps__toolbar .button { background: #fff; }
.steps__toolbar .button--primary { background: var(--neon-gradient); }
.steps__toolbar .button--ghost { color: var(--neon-cyan); background: transparent; }
.steps__speed { display: inline-flex; gap: .4rem; align-items: center; font-size: .9rem; }
.steps__speed select { font: inherit; border-radius: 8px; padding: .2rem .4rem; }
.steps__counter { margin-left: auto; font-size: .9rem; color: var(--on-dark-muted); }
.steps__list { margin: .75rem 0 0; padding-left: 1.5rem; }
.steps__item { margin-block: .6rem; }
.steps__item p { margin: 0 0 .4rem; }
.steps.is-enhanced .steps__item:not(.is-current) .steps__figure { display: none; }
.steps.is-enhanced .steps__item:not(.is-current) { color: var(--muted); }
.steps.is-enhanced .steps__item.is-current { animation: step-in .35s ease-out; }
.steps__figure { overflow-x: auto; }
@keyframes step-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.worked { margin-block: 1rem; }
.worked > summary { cursor: pointer; font-weight: 800; color: #1d3fb8; }

.demo { margin-top: 2rem; padding: 1rem 1.25rem; border-radius: var(--radius); background: #f3f6ff; border: 1px solid #c9d4f5; }
.demo h2 { margin-top: 0; color: #11173f; }
.demo__prompt { font-weight: 700; }

/* Figures */
.posed { border-collapse: collapse; font-family: ui-monospace, "DejaVu Sans Mono", monospace; font-size: 2rem; line-height: 1.2; }
.posed td { width: 2.2rem; height: 2.4rem; text-align: center; }
.posed__carry td { font-size: 1.1rem; color: var(--neon-orange); font-weight: 900; height: 1.4rem; }
.posed__result td { border-top: 3px solid #11173f; font-weight: 900; color: #1d3fb8; }

.table-scroll { overflow-x: auto; }
.conversion { border-collapse: collapse; font-size: 1.15rem; }
.conversion th, .conversion td { border: 2px solid #1d2a6b; min-width: 2.8rem; height: 2.6rem; text-align: center; padding: 0 .3rem; }
.conversion th { background: #1d2a6b; color: var(--neon-yellow); font-size: .95rem; }
.conversion td { position: relative; font-weight: 800; font-family: ui-monospace, "DejaVu Sans Mono", monospace; }
.conversion td.has-comma::after { content: ","; position: absolute; right: -.3rem; bottom: .15rem; font-size: 1.6rem; color: var(--ko); font-weight: 900; animation: comma-in .5s ease-out; }
.conversion td.is-new { color: #1d3fb8; background: #eef3ff; }

.bars { display: grid; gap: .5rem; max-width: 28rem; }
.bars__row { display: grid; grid-template-columns: 3.2rem 1fr; align-items: center; gap: .5rem; }
.bars__label { font-weight: 900; font-size: 1.15rem; text-align: right; }

.distrib { width: min(100%, 26rem); height: auto; overflow: visible; }
.distrib__text { font-family: ui-monospace, "DejaVu Sans Mono", monospace; font-size: 28px; fill: #11173f; font-weight: 700; }
.distrib .arrow { fill: none; stroke: var(--neon-orange); stroke-width: 3; stroke-dasharray: 220; stroke-dashoffset: 0; animation: draw 1s ease-out both; }
.distrib .arrow--2 { animation-delay: .6s; stroke: #1d3fb8; }
.distrib marker path { fill: #11173f; }

.is-new { animation: fade-in .5s ease-out both; }

@keyframes draw { from { stroke-dashoffset: 220; } to { stroke-dashoffset: 0; } }
@keyframes fade-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes comma-in { from { opacity: 0; transform: translateX(-1.2rem); } to { opacity: 1; transform: none; } }

/* Bande à colorier : cases à cocher présentées comme des parts. */
.parts-input { border: 0; padding: 0; margin: 0 0 1rem; counter-reset: colored; }
.parts-input legend { font-weight: 800; margin-bottom: .5rem; }
.parts-bar { display: flex; max-width: 30rem; height: 4.5rem; border: 3px solid #1d2a6b; border-radius: 6px; overflow: hidden; }
.part-toggle { flex: 1; position: relative; background: #fff; cursor: pointer; transition: background .15s; }
.part-toggle + .part-toggle { border-left: 2px solid #1d2a6b; }
.part-toggle:hover { background: #fff8dc; }
.part-toggle input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.part-toggle:has(input:checked) { background: var(--neon-yellow); counter-increment: colored; }
.part-toggle:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: -5px; }
.parts-count { font-weight: 800; color: var(--muted); }
.parts-count::after { content: counter(colored); color: #11173f; }

/* Rangement */
.order-input { border: 0; padding: 0; margin: 0 0 1rem; }
.order-input legend { font-weight: 800; margin-bottom: .25rem; }
.order-input__help { display: none; margin: 0 0 .5rem; color: var(--muted); font-size: .95rem; }
.order-input.is-enhanced .order-input__help { display: block; }
.order-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; max-width: 30rem; }
.order-item { display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem; border: 2px solid var(--line); border-radius: var(--radius); background: #fff; font-size: 1.25rem; }
.order-item__label { flex: 1; font-weight: 800; }
.order-item__rank { font-size: .95rem; display: inline-flex; gap: .4rem; align-items: center; }
.order-item__rank select { font: inherit; font-size: 1.1rem; padding: .2rem .4rem; border-radius: 8px; }
.order-item__handle, .order-item__pos { display: none; }
.order-input.is-enhanced .order-item__rank { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.order-input.is-enhanced .order-item__handle { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 10px; background: #eef1fb; color: #1d2a6b; font-size: 1.4rem; cursor: grab; touch-action: none; }
.order-input.is-enhanced .order-item__pos { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: #1d2a6b; color: var(--neon-yellow); font-weight: 900; font-size: 1rem; }
.order-item__moves { display: inline-flex; gap: .3rem; }
.order-item.is-dragging { border-color: var(--neon-cyan); box-shadow: 0 0 0 3px rgb(62 230 255 / 40%); cursor: grabbing; }

/* Signalement */
.report { margin-top: 1.25rem; color: var(--on-dark-muted); }
.report > summary { cursor: pointer; font-size: .95rem; }
.report form { margin-top: .75rem; padding: 1rem; border-radius: var(--radius); background: var(--card); color: var(--ink); color-scheme: light; max-width: 34rem; }
.report fieldset { border: 0; padding: 0; margin: 0 0 .75rem; }
.report legend, .report label[for] { font-weight: 800; }
.report__reason { display: block; padding: .25rem 0; }
.report textarea { width: 100%; font: inherit; padding: .5rem; border: 2px solid var(--muted); border-radius: 10px; }
.report__privacy { font-size: .85rem; color: var(--muted); }

.speak { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.speak .exercise__prompt { flex: 1 1 18rem; margin-bottom: .5rem; }
.stage-primaire .speak__button { min-height: 3.3rem; font-size: 1.1rem; }

/* Boîte de 10 et triangle rectangle */
.ten-frame { width: min(100%, 22rem); height: auto; }
.ten-frame .frame-cell { fill: #fff; stroke: #1d2a6b; stroke-width: 3; }
.ten-frame .token { fill: #e0457b; }
.ten-frame .token--added { fill: var(--neon-yellow); stroke: #b86e00; stroke-width: 2; animation: fade-in .5s ease-out both; }
.triangle { width: min(100%, 22rem); height: auto; }
.triangle__shape { fill: #eef3ff; stroke: #1d2a6b; stroke-width: 3; }
.triangle__right { fill: none; stroke: #1d2a6b; stroke-width: 2; }
.triangle text { font: 700 18px system-ui, sans-serif; fill: #11173f; }
.triangle .triangle__len { fill: #b4361c; }

.legal-draft { padding: .6rem 1rem; border-radius: 10px; background: var(--sun-soft); color: #5c4400; font-weight: 700; }
.site-footer a { color: var(--on-dark); }

.site-nav { display: flex; gap: .5rem; flex-wrap: wrap; }
.inline-form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.profile select, .inline-form select { font: inherit; font-size: 1.1rem; padding: .4rem .6rem; border-radius: 10px; border: 2px solid var(--muted); }

.link-code { font-size: 1.3rem; padding: .75rem 1rem; border-radius: var(--radius); background: var(--sun-soft); }
.link-code strong { font-family: ui-monospace, monospace; letter-spacing: .15em; font-size: 1.6rem; }

/* ===== Figures animées des mathématiques ===== */
.anim-dots, .anim-line, .anim-clock, .anim-shape, .anim-urn { display: block; height: auto; max-width: 100%; }
.anim-dots { width: min(100%, 26rem); }
.anim-dots .dot { fill: #e0457b; transform-box: fill-box; transform-origin: center; animation: pop-in .35s ease-out both; }
.anim-dots .dot--alt { fill: var(--neon-yellow); stroke: #b86e00; stroke-width: 2; }
.anim-dots .dot:nth-child(1) { animation-delay: 0.06s; }
.anim-dots .dot:nth-child(2) { animation-delay: 0.12s; }
.anim-dots .dot:nth-child(3) { animation-delay: 0.18s; }
.anim-dots .dot:nth-child(4) { animation-delay: 0.24s; }
.anim-dots .dot:nth-child(5) { animation-delay: 0.30s; }
.anim-dots .dot:nth-child(6) { animation-delay: 0.36s; }
.anim-dots .dot:nth-child(7) { animation-delay: 0.42s; }
.anim-dots .dot:nth-child(8) { animation-delay: 0.48s; }
.anim-dots .dot:nth-child(9) { animation-delay: 0.54s; }
.anim-dots .dot:nth-child(10) { animation-delay: 0.60s; }
.anim-dots .dot:nth-child(11) { animation-delay: 0.66s; }
.anim-dots .dot:nth-child(12) { animation-delay: 0.72s; }
.anim-dots .dot:nth-child(13) { animation-delay: 0.78s; }
.anim-dots .dot:nth-child(14) { animation-delay: 0.84s; }
.anim-dots .dot:nth-child(15) { animation-delay: 0.90s; }
.anim-dots .dot:nth-child(16) { animation-delay: 0.96s; }
.anim-dots .dot:nth-child(17) { animation-delay: 1.02s; }
.anim-dots .dot:nth-child(18) { animation-delay: 1.08s; }
.anim-dots .dot:nth-child(19) { animation-delay: 1.14s; }
.anim-dots .dot:nth-child(20) { animation-delay: 1.20s; }
.anim-dots .dot:nth-child(21) { animation-delay: 1.26s; }
.anim-dots .dot:nth-child(22) { animation-delay: 1.32s; }
.anim-dots .dot:nth-child(23) { animation-delay: 1.38s; }
.anim-dots .dot:nth-child(24) { animation-delay: 1.44s; }
.anim-dots .dot:nth-child(25) { animation-delay: 1.50s; }
.anim-dots .dot:nth-child(26) { animation-delay: 1.56s; }
.anim-dots .dot:nth-child(27) { animation-delay: 1.62s; }
.anim-dots .dot:nth-child(28) { animation-delay: 1.68s; }
.anim-dots .dot:nth-child(29) { animation-delay: 1.74s; }
.anim-dots .dot:nth-child(30) { animation-delay: 1.80s; }

.anim-line { width: min(100%, 36rem); }
.anim-line .axis { stroke: #1d2a6b; stroke-width: 3; }
.anim-line .tick { stroke: #1d2a6b; stroke-width: 2; }
.anim-line .tick-label { font: 700 16px system-ui, sans-serif; fill: #11173f; text-anchor: middle; }
.anim-line .mark { animation: drop-in .6s cubic-bezier(.3, 1.6, .5, 1) .2s both; }
.anim-line .mark-arrow { stroke: #e0457b; stroke-width: 4; }
.anim-line marker path { fill: #e0457b; }
.anim-line .mark-label { font: 900 18px system-ui, sans-serif; fill: #e0457b; text-anchor: middle; }

.anim-clock { width: min(100%, 15rem); }
.anim-clock .clock-face { fill: #fff; stroke: #1d2a6b; stroke-width: 5; }
.anim-clock .clock-tick { stroke: #1d2a6b; stroke-width: 2; }
.anim-clock .clock-num { font: 700 16px system-ui, sans-serif; fill: #11173f; text-anchor: middle; }
.anim-clock .hand { stroke-linecap: round; transform-box: view-box; transform-origin: 100px 100px; animation: hand-sweep 1.1s ease-out both; }
.anim-clock .hand--hour { stroke: #11173f; stroke-width: 7; }
.anim-clock .hand--minute { stroke: #e0457b; stroke-width: 4; animation-duration: 1.5s; }
.anim-clock .clock-center { fill: #11173f; }

.posed--column td { width: 2rem; }
.posed--column .is-new { animation: write-in .45s ease-out both; }
.posed--column .delay-1 { animation-delay: 0.35s; }
.posed--column .delay-2 { animation-delay: 0.70s; }
.posed--column .delay-3 { animation-delay: 1.05s; }
.posed--column .delay-4 { animation-delay: 1.40s; }
.posed--column .delay-5 { animation-delay: 1.75s; }
.posed--column .delay-6 { animation-delay: 2.10s; }
.posed--column .delay-7 { animation-delay: 2.45s; }
.posed--column .delay-8 { animation-delay: 2.80s; }
.posed--column .delay-9 { animation-delay: 3.15s; }

.anim-shape { width: min(100%, 22rem); }
.anim-shape .shape { fill: #eef3ff; stroke: #1d2a6b; stroke-width: 3; stroke-dasharray: 1200; animation: draw-shape 1.4s ease-out both; }
.anim-shape .shape-right { fill: none; stroke: #1d2a6b; stroke-width: 2; }
.anim-shape .shape-radius { stroke: #e0457b; stroke-width: 3; stroke-dasharray: 6 4; }
.anim-shape .shape-label { font: 800 17px system-ui, sans-serif; fill: #b4361c; text-anchor: middle; animation: fade-in .4s ease-out 1s both; }

.anim-urn { width: min(100%, 20rem); }
.anim-urn .ball { stroke: rgb(0 0 0 / 25%); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: drop-in .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.anim-urn .ball:nth-child(1) { animation-delay: 0.05s; }
.anim-urn .ball:nth-child(2) { animation-delay: 0.10s; }
.anim-urn .ball:nth-child(3) { animation-delay: 0.15s; }
.anim-urn .ball:nth-child(4) { animation-delay: 0.20s; }
.anim-urn .ball:nth-child(5) { animation-delay: 0.25s; }
.anim-urn .ball:nth-child(6) { animation-delay: 0.30s; }
.anim-urn .ball:nth-child(7) { animation-delay: 0.35s; }
.anim-urn .ball:nth-child(8) { animation-delay: 0.40s; }
.anim-urn .ball:nth-child(9) { animation-delay: 0.45s; }
.anim-urn .ball:nth-child(10) { animation-delay: 0.50s; }
.anim-urn .ball:nth-child(11) { animation-delay: 0.55s; }
.anim-urn .ball:nth-child(12) { animation-delay: 0.60s; }
.anim-urn .ball:nth-child(13) { animation-delay: 0.65s; }
.anim-urn .ball:nth-child(14) { animation-delay: 0.70s; }
.anim-urn .ball:nth-child(15) { animation-delay: 0.75s; }
.anim-urn .ball:nth-child(16) { animation-delay: 0.80s; }
.anim-urn .ball:nth-child(17) { animation-delay: 0.85s; }
.anim-urn .ball:nth-child(18) { animation-delay: 0.90s; }
.anim-urn .ball:nth-child(19) { animation-delay: 0.95s; }
.anim-urn .ball:nth-child(20) { animation-delay: 1.00s; }
.anim-urn .ball:nth-child(21) { animation-delay: 1.05s; }
.anim-urn .ball:nth-child(22) { animation-delay: 1.10s; }
.anim-urn .ball:nth-child(23) { animation-delay: 1.15s; }
.anim-urn .ball:nth-child(24) { animation-delay: 1.20s; }

.place-table td.is-target { background: var(--sun-soft); outline: 3px solid var(--neon-orange); outline-offset: -3px; }

.pair-input { border: 0; padding: 0; margin: 0 0 1rem; }
.pair-input legend { font-weight: 800; margin-bottom: .5rem; }
.pair-input__row { display: flex; flex-wrap: wrap; gap: .75rem; }
.pair-input__field { display: inline-flex; align-items: center; gap: .4rem; font-weight: 800; }
.pair-input__field input { width: 6rem; text-align: center; }

/* Célébration d'une bonne réponse : étoiles qui jaillissent (décoratif, non bloquant). */
.feedback--ok { position: relative; overflow: visible; }
.feedback--ok::before, .feedback--ok::after { content: "✦ ★ ✦"; position: absolute; top: -.6rem; font-size: 1.4rem; color: var(--neon-orange); letter-spacing: .4rem; pointer-events: none; animation: burst 1s ease-out both; }
.feedback--ok::before { left: 1rem; }
.feedback--ok::after { right: 1rem; animation-delay: .15s; color: #e0457b; }
.feedback--ok .mascot img { animation: bounce .7s ease-out .1s both; }

@keyframes pop-in { from { transform: scale(0); opacity: 0; } 70% { transform: scale(1.15); } to { transform: scale(1); opacity: 1; } }
@keyframes drop-in { from { transform: translateY(-30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes hand-sweep { from { transform: rotate(-90deg); } to { transform: rotate(0); } }
@keyframes write-in { from { opacity: 0; transform: translateY(-8px) scale(1.4); color: var(--neon-orange); } to { opacity: 1; transform: none; } }
@keyframes draw-shape { from { stroke-dashoffset: 1200; fill-opacity: 0; } 70% { fill-opacity: 0; } to { stroke-dashoffset: 0; fill-opacity: 1; } }
@keyframes burst { from { transform: translateY(10px) scale(.3); opacity: 0; } 40% { opacity: 1; } to { transform: translateY(-14px) scale(1); opacity: 0; } }
@keyframes bounce { 0% { transform: scale(.8); } 40% { transform: scale(1.12) rotate(-4deg); } 70% { transform: scale(.97) rotate(2deg); } to { transform: none; } }

/* Rubrique Astuces */
.tip-today { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; margin-block: 1.5rem; padding: 1.25rem; border-radius: calc(var(--radius) + 4px); background: linear-gradient(120deg, #2a1478, #0d1450); border: 1px solid var(--glass-line); box-shadow: var(--shadow); }
.tip-today__body { flex: 1 1 18rem; }
.tip-today h2 { margin: 0 0 .5rem; }
.tip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }
.tip-card { background: var(--card); color: var(--ink); border-radius: var(--radius); padding: 1rem 1.1rem; border-top: 6px solid var(--neon-yellow); box-shadow: var(--shadow); color-scheme: light; animation: pop .3s ease-out both; }
.tip-card--maths { border-top-color: var(--maths); }
.tip-card--francais { border-top-color: var(--francais); }
.tip-card__meta { margin: 0 0 .4rem; font-size: .85rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.tip-card__meta .pill { font-size: .7rem; padding: .1rem .5rem; }
.tip-card__text { font-size: 1.15rem; font-weight: 800; color: #11173f; margin: .2rem 0 .6rem; }
.tip-card__actions { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0; }
.tip-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-block: 1rem; }
.tip-filters select { font: inherit; padding: .4rem .6rem; border-radius: 10px; min-height: 2.75rem; }

.youtube-form { display: grid; gap: .6rem; max-width: 40rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); }
.youtube-form .field { display: grid; gap: .25rem; font-weight: 700; }
.youtube-form select, .youtube-form input[name="title"] { font: inherit; padding: .4rem; border-radius: 8px; border: 2px solid var(--muted); }
.youtube-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.youtube-table th, .youtube-table td { border-bottom: 1px solid var(--line); padding: .35rem; text-align: left; }

.toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 2rem); opacity: 0; margin: 0; padding: .7rem 1.2rem; border-radius: 999px; background: #11173f; color: var(--neon-yellow); font-weight: 800; box-shadow: var(--shadow); z-index: 50; pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.replay, .replay * { animation: none !important; }

/* Accueil : chaque carte de classe montre le style de son thème. */
.level-card--primaire { background: linear-gradient(160deg, #ffffff, #fff4d1); color: #11173f; border: 3px solid #1f2f5c; border-top: 8px solid var(--neon-yellow); border-radius: 22px; }
.level-card--primaire .level-card__label { color: #1f2f5c; text-shadow: 2px 2px 0 var(--neon-yellow); }
.level-card--primaire .level-card__count { color: #4a5272; }
.level-card--college { border-radius: 10px; border-left: 6px solid #3b5bdb; }
.level-card--college .level-card__label { color: var(--neon-cyan); text-shadow: none; font-style: normal; }

/* En-tête et pied de page : couleurs fixes, quel que soit le thème (le thème Primaire assombrit le texte). */
.site-header, .site-footer { --on-dark: #eef1ff; --on-dark-muted: #b5bdf0; --glass: rgb(255 255 255 / 8%); --glass-line: rgb(120 200 255 / 35%); color: var(--on-dark); }
.site-header .site-nav a, .site-header .motion-toggle { color: #eef1ff; background: rgb(255 255 255 / 8%); border: 1px solid rgb(120 200 255 / 45%); }
.site-header .site-nav a:hover, .site-header .motion-toggle:hover { border-color: var(--neon-cyan); background: rgb(62 230 255 / 15%); }
.site-footer a { color: #eef1ff; }
/* Un élément masqué reste masqué, même si une règle lui donne un affichage (bouton Animations avant JavaScript). */
[hidden] { display: none !important; }

/* ===== Jeu de plateau (primaire) ===== */
.game__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; }
.game__stars { font-size: 1.6rem; font-weight: 900; background: #fff; border: 3px solid #1f2f5c; border-radius: 999px; padding: .2rem 1rem; }
.board { position: relative; display: grid; gap: .5rem; margin-block: 1rem; padding: .75rem; border-radius: 26px; background: #ffffff; border: 4px solid #1f2f5c; box-shadow: 0 8px 0 rgb(31 47 92 / 15%); }
.board--cols5 { grid-template-columns: repeat(5, 1fr); }
.board--cols6 { grid-template-columns: repeat(6, 1fr); }
.board .r0 { grid-row: 1; }
.board .r1 { grid-row: 2; }
.board .r2 { grid-row: 3; }
.board .r3 { grid-row: 4; }
.board .r4 { grid-row: 5; }
.board .c0 { grid-column: 1; }
.board .c1 { grid-column: 2; }
.board .c2 { grid-column: 3; }
.board .c3 { grid-column: 4; }
.board .c4 { grid-column: 5; }
.board .c5 { grid-column: 6; }
.square { position: relative; aspect-ratio: 1; min-height: 3.2rem; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 900; font-size: clamp(.9rem, 2.6vw, 1.4rem); color: #11173f; border: 3px solid rgb(31 47 92 / 25%); transition: transform .2s; }
.square--tone0 { background: #ffe08a; } .square--tone1 { background: #a7e3ff; } .square--tone2 { background: #ffc2d6; } .square--tone3 { background: #b9f0c9; }
.square--start { background: #1f2f5c; color: #fff; font-size: .85rem; }
.square--end { background: linear-gradient(135deg, #ffd23f, #ff8a1f); font-size: 1.8rem; }
.square--star { background: #fff4d1; border-color: #ff8a1f; }
.square--rocket { background: #e3e9ff; border-color: #3b5bdb; }
.square__icon { font-size: 1.3rem; line-height: 1; }
.square.is-current { transform: scale(1.06); border-color: #e0457b; }
.pawn { position: absolute; left: 0; top: 0; width: clamp(40px, 9vw, 64px); height: auto; border-radius: 50%; background: #fff; border: 3px solid #e0457b; box-shadow: 0 6px 12px rgb(0 0 0 / 25%); transition: transform .3s ease-out; z-index: 2; pointer-events: none; }
.pawn.is-hopping { animation: hop .3s ease-out; }
.game__panel { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.game__question { flex: 1 1 20rem; }
.game__prompt { font-size: clamp(1.3rem, 3.6vw, 1.9rem); font-weight: 900; color: #11173f; margin-top: 0; }
.game__choice { font-size: 1.6rem; min-width: 4.5rem; justify-content: center; }
.game__feedback { font-weight: 800; font-size: 1.15rem; min-height: 1.6em; color: #11173f; }
.dice { font-size: 4.5rem; line-height: 1; width: 6rem; height: 6rem; display: flex; align-items: center; justify-content: center; background: #fff; border: 4px solid #1f2f5c; border-radius: 22px; box-shadow: 0 6px 0 rgb(31 47 92 / 20%); }
.dice.is-rolling { animation: dice-roll .3s linear infinite; }
.game__finish { text-align: center; margin-top: 1.5rem; padding: 1.5rem; background: #fff; border: 4px solid #ffd23f; border-radius: 28px; animation: pop .4s ease-out; color: #11173f; }
.game-link { display: flex; align-items: center; gap: 1rem; margin: 1rem 0 1.5rem; padding: 1rem 1.25rem; border-radius: 22px; text-decoration: none; background: linear-gradient(120deg, #ffd23f, #ff8a1f); color: #2a1300; font-weight: 900; font-size: 1.3rem; border: 3px solid #1f2f5c; box-shadow: 0 6px 0 rgb(31 47 92 / 25%); }
.game-link:hover { transform: translateY(-2px); }
.game-link span { font-size: 2.4rem; }
@keyframes hop { 0% { margin-top: 0; } 50% { margin-top: -18px; } 100% { margin-top: 0; } }
@keyframes dice-roll { from { transform: rotate(0); } 50% { transform: rotate(180deg) scale(1.1); } to { transform: rotate(360deg); } }
/* Mini-jeux : Associer, Trier, Attraper */
.games { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; margin: 1rem 0 1.5rem; }
a.game-card { text-decoration: none; }
.game-card { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1rem; border-radius: 22px; background: #fff; border: 3px solid #1f2f5c; box-shadow: 0 6px 0 rgb(31 47 92 / 20%); color: #11173f; text-align: center; }
.game-card__icon { font-size: 2.8rem; line-height: 1; }
.game-card__name { font-weight: 900; font-size: 1.15rem; }
.game-card__links { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; }
.theme-tabs { display: flex; gap: .4rem; }
.theme-tab { padding: .45rem 1rem; border-radius: 999px; border: 3px solid #1f2f5c; background: #fff; color: #11173f; font-weight: 800; text-decoration: none; }
.theme-tab[aria-current="page"] { background: #1f2f5c; color: #fff; }
.minigame__intro { display: flex; gap: 1rem; align-items: center; margin-block: 1rem; padding: .75rem 1rem; background: #fff; border: 3px solid #ffd23f; border-radius: 22px; color: #11173f; }
.minigame__intro .mascot { margin: 0; flex: none; }
.minigame__title { margin: 0; font-weight: 800; color: #5b3cc4; }
.minigame__intro .game__prompt { margin: .2rem 0 .5rem; font-size: clamp(1.15rem, 3vw, 1.5rem); }
.pairs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.75rem, 4vw, 3rem); }
.pairs__col { display: flex; flex-direction: column; gap: .7rem; }
.pair-card { min-height: 4rem; padding: .6rem .8rem; border-radius: 18px; border: 3px solid #1f2f5c; background: #fff; color: #11173f; font: inherit; font-size: clamp(1.1rem, 3.4vw, 1.6rem); font-weight: 800; cursor: pointer; box-shadow: 0 5px 0 rgb(31 47 92 / 20%); overflow-wrap: anywhere; }
.pair-card:hover { transform: translateY(-2px); }
.pair-card.is-selected { background: #ffe680; border-color: #ff8a1f; transform: scale(1.04); }
.pair-card.is-matched { cursor: default; box-shadow: none; color: #11173f; }
.pair-color0 { background: #c8f7c5; } .pair-color1 { background: #c5e4ff; } .pair-color2 { background: #ffd6e8; }
.pair-color3 { background: #e6d9ff; } .pair-color4 { background: #ffe9c2; } .pair-color5 { background: #c9f4f0; }
.sorter { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.sorter__card-box { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.sorter__card { margin: 0; min-width: 12rem; max-width: 100%; padding: 1.2rem 1.6rem; border-radius: 22px; background: #fff; border: 4px solid #5b3cc4; color: #11173f; font-size: clamp(1.4rem, 5vw, 2.2rem); font-weight: 900; text-align: center; box-shadow: 0 8px 0 rgb(91 60 196 / 25%); }
.sorter__card.is-flying { transition: transform .45s ease-in, opacity .45s ease-in; opacity: .2; }
.sorter__card.is-dealt { animation: drop-in .35s ease-out; }
.sorter__left { margin: 0; font-weight: 800; color: #11173f; }
.baskets { display: grid; gap: 1rem; width: 100%; }
.baskets--2 { grid-template-columns: 1fr 1fr; }
.baskets--3 { grid-template-columns: repeat(3, 1fr); }
.basket { display: flex; flex-direction: column; align-items: center; gap: .3rem; min-height: 7rem; padding: 1rem .5rem; border-radius: 0 0 40px 40px; border: 4px solid #1f2f5c; font: inherit; font-size: clamp(1.1rem, 3.6vw, 1.6rem); font-weight: 900; cursor: pointer; color: #11173f; box-shadow: 0 6px 0 rgb(31 47 92 / 25%); }
.basket--0 { background: #c5e4ff; } .basket--1 { background: #ffd6e8; } .basket--2 { background: #c8f7c5; }
.basket:hover { transform: translateY(-3px); }
.basket__count { font-size: 1.1rem; }
.bubbles-start { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.arena { position: relative; height: min(28rem, 62vh); margin-top: 1rem; overflow: hidden; border-radius: 26px; border: 4px solid #1f2f5c; background: linear-gradient(#bfe9ff, #e9f7ff 60%, #fff); }
.arena--still { height: auto; min-height: 10rem; display: flex; flex-wrap: wrap; gap: .8rem; padding: 1rem; justify-content: center; }
.bubble { position: absolute; top: 100%; min-width: 5.5rem; min-height: 5.5rem; padding: .6rem .9rem; border-radius: 999px; border: 3px solid #fff; color: #11173f; font: inherit; font-size: clamp(1rem, 3vw, 1.3rem); font-weight: 900; cursor: pointer; box-shadow: inset -6px -8px 0 rgb(255 255 255 / 45%), 0 6px 12px rgb(0 0 0 / 15%); animation: rise 8s linear forwards; transition: transform .3s ease-out, opacity .3s ease-out; }
.arena--still .bubble { position: static; animation: none; }
.bubble--c0 { background: #ffd6e8; } .bubble--c1 { background: #c8f7c5; } .bubble--c2 { background: #ffe680; } .bubble--c3 { background: #e6d9ff; } .bubble--c4 { background: #c5e4ff; }
.bubble.is-popped { transform: scale(1.7); opacity: 0; }
.bubble.is-wrong { filter: grayscale(1); opacity: .55; cursor: default; }
.finish__stars { font-size: 2rem; font-weight: 900; }
.other-games { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 2rem; }
.other-games p { margin: 0; font-weight: 800; }
.is-shaking { animation: shake .4s ease-in-out; }
.is-bouncing { animation: bounce .45s ease-out; }
@keyframes rise { from { top: 100%; } to { top: -7rem; } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@media (max-width: 30rem) { .baskets--3 { grid-template-columns: 1fr; } .basket { min-height: 4.5rem; border-radius: 22px; } .minigame__intro .mascot { display: none; } }

.lesson-text { margin-block: 1rem; border: 3px dashed #b9cdf5; border-radius: 18px; padding: .5rem 1rem; background: #fff; }
.lesson-text > summary { cursor: pointer; font-weight: 900; font-size: 1.2rem; color: #1f2f5c; padding: .4rem 0; }

/* Navigation */
.site-nav { margin-left: auto; }
.site-nav a { color: var(--on-dark); font-weight: 800; text-decoration: none; padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--glass-line); }
.site-nav a:hover { border-color: var(--neon-cyan); }
.button--danger { border-color: var(--ko); color: var(--ko); }

/* Progression */
.badges { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: .5rem 0; }
.badge { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .8rem; border-radius: 999px; font-weight: 800; font-size: .95rem; border: 2px solid transparent; }
.badge.is-earned { background: var(--neon-gradient); color: #2a1300; box-shadow: var(--glow); }
.badge.is-locked { background: #eef1fb; color: #6b7290; border-color: #d6dbec; }
.badge.is-locked .badge__icon { filter: grayscale(1); opacity: .5; }
.progress-summary { color: var(--muted); font-size: .95rem; }
.review-due { font-weight: 800; color: #8a3b00; background: var(--sun-soft); padding: .4rem .8rem; border-radius: 10px; display: inline-block; }
.my-progress { margin-top: 1.5rem; padding: 1rem 1.25rem; border-radius: var(--radius); background: #f3f6ff; border: 1px solid #c9d4f5; }
.my-progress__title { margin: 0 0 .25rem; font-size: 1.15rem; color: #11173f; }
.remediation { margin-block: 1rem; padding: 1rem 1.25rem; border-radius: var(--radius); background: #effaf5; border: 2px solid #12673f; color: var(--ink); }
.remediation__title { margin: 0 0 .25rem; font-weight: 900; color: #12673f; }
.remediation__evidence { color: var(--muted); font-size: .9rem; }
.remediation__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.remediation__free { font-size: .9rem; color: var(--muted); margin-bottom: 0; }
.new-badge { margin-block: 1rem; padding: .75rem 1rem; border-radius: var(--radius); background: var(--neon-gradient); color: #2a1300; font-size: 1.15rem; box-shadow: var(--glow); animation: pop .35s ease-out; }
.home-progress { margin-block: 1.25rem; padding: .9rem 1.25rem; border-radius: var(--radius); background: var(--glass); border: 1px solid var(--glass-line); }
.home-progress p { margin: .25rem 0; }
.progress-intro { color: var(--on-dark-muted); }
.progress-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.progress-card { padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); }
.progress-card__meta { margin: 0; color: var(--muted); font-size: .9rem; }
.progress-card__title { margin: .2rem 0 .4rem; font-size: 1.2rem; }
.progress-tools { margin-top: 2rem; }
.print-action { margin-top: 1.5rem; }

/* ===== Thème PRIMAIRE (CP–CM2) : clair, coloré, ludique, grandes cibles ===== */
body.stage-primaire {
    --on-dark: #11173f;
    --on-dark-muted: #4a5272;
    --glass: #ffffff;
    --glass-line: #b9cdf5;
    --step: 1.15rem;
    color: var(--ink);
    color-scheme: light;
    background-color: #e7f3ff;
    background-image:
        radial-gradient(circle at 8% 18%, rgb(255 210 63 / 45%) 0 3.5rem, transparent 3.6rem),
        radial-gradient(circle at 92% 30%, rgb(62 230 255 / 35%) 0 5rem, transparent 5.1rem),
        radial-gradient(circle at 15% 85%, rgb(224 69 123 / 22%) 0 4rem, transparent 4.1rem),
        radial-gradient(circle at 85% 90%, rgb(18 103 63 / 18%) 0 3rem, transparent 3.1rem),
        linear-gradient(180deg, #dff0ff 0%, #fff8e1 100%);
}
.stage-primaire main h1 { color: #11173f; }
.stage-primaire .neon-title { background: none; color: #1f2f5c; -webkit-text-fill-color: #1f2f5c; filter: none; text-shadow: 3px 3px 0 var(--neon-yellow); }
.stage-primaire main > h1, .stage-primaire .lesson h1, .stage-primaire .exercise h1 { text-decoration: underline 6px var(--neon-yellow); text-underline-offset: .25em; }
.stage-primaire .lesson, .stage-primaire .exercise { border: 4px solid #1f2f5c; border-top-width: 10px; border-top-color: var(--neon-yellow); border-radius: 28px; box-shadow: 0 10px 0 rgb(31 47 92 / 15%); }
.stage-primaire .competence-card { background: #fff; border: 3px solid #1f2f5c; border-radius: 22px; box-shadow: 0 6px 0 rgb(31 47 92 / 15%); color: var(--ink); }
.stage-primaire .competence-card:hover { transform: translateY(-3px) rotate(-.5deg); border-color: #e0457b; box-shadow: 0 9px 0 rgb(224 69 123 / 25%); }
.stage-primaire .competence-card__label { color: #1f2f5c; }
.stage-primaire .subject__title { font-size: 1.4rem; border-radius: 16px; box-shadow: 0 5px 0 rgb(0 0 0 / 18%); }
.stage-primaire .breadcrumb a, .stage-primaire main a:not(.button) { color: #1d3fb8; }
.stage-primaire .button { min-height: 3.3rem; padding-inline: 1.5rem; border-width: 3px; box-shadow: 0 4px 0 rgb(31 47 92 / 25%); }
.stage-primaire .button:active { transform: translateY(3px); box-shadow: none; }
.stage-primaire .choice { min-height: 3.6rem; font-size: 1.4rem; border-width: 3px; border-radius: 18px; background: #fff; }
.stage-primaire .mascot img { max-width: 150px; }
.stage-primaire .exercise__prompt { font-size: clamp(1.45rem, 3.6vw, 2rem); }
.stage-primaire .my-progress, .stage-primaire .demo { background: #fff; border: 3px dashed #b9cdf5; }
.stage-primaire .progress-intro, .stage-primaire .empty { color: #4a5272; }
.stage-primaire .report { color: #4a5272; }

/* ===== Thème COLLÈGE (6e–3e) : nuit néon sobre et structurée, sans halo ===== */
body.stage-college { background-image: linear-gradient(180deg, #0c1238 0%, #151c4d 100%); }
.stage-college .neon-title, .stage-college .brand__name { filter: none; }
.stage-college .level-card__label { text-shadow: none; }
.stage-college .lesson, .stage-college .exercise { border-radius: 10px; box-shadow: 0 4px 16px rgb(0 0 0 / 30%); border-left: 6px solid #3b5bdb; }
.stage-college .lesson h3, .stage-college .prose h3 { border-bottom: 2px solid #e1e6f5; padding-bottom: .2rem; }
.stage-college .mascot img { max-width: 84px; }
.stage-college .competence-card { border-radius: 10px; }
.stage-college .button--primary { box-shadow: none; }
.stage-college .badge.is-earned, .stage-college .new-badge { box-shadow: none; }

/* Impression : fiche de leçon lisible en noir et blanc. */
@media print {
    body { background: #fff !important; color: #000; }
    .site-header, .site-footer, .draft-banner, .breadcrumb, .cta, .print-action, .steps__toolbar, .motion-toggle,
    .site-nav, .report, .next, .actions, [data-controller="progress"] .remediation__actions, .tip .mascot { display: none !important; }
    .lesson, .exercise, .demo, .my-progress { box-shadow: none !important; border: 0 !important; background: #fff !important; color: #000 !important; }
    .steps__item[hidden] { display: list-item !important; }
    .steps.is-enhanced .steps__item .steps__figure { display: block !important; }
    a { color: #000; text-decoration: none; }
}

/* Multi-appareils : pas de défilement horizontal, cibles tactiles ≥ 44 px, encoches des téléphones. */
html, body { overflow-x: clip; }
img, svg, video, iframe { max-width: 100%; }
.motion-toggle, .site-nav a { min-height: 2.75rem; display: inline-flex; align-items: center; }
.choice, .order-item, .part-toggle { touch-action: manipulation; }
.container { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.exercise__prompt, .competence-card__label, .order-item__label { overflow-wrap: anywhere; }

/* Paysage sur téléphone : en-tête compact pour laisser la place à l'exercice. */
@media (orientation: landscape) and (max-height: 30rem) {
    .site-header__inner { min-height: 3rem; }
    .brand img { width: 36px; height: 36px; }
    .brand__tagline { display: none; }
    .stage-primaire .mascot img, .feedback .mascot img { max-width: 72px; }
}

@media (max-width: 34rem) {
    .site-nav { width: 100%; margin-left: 0; }
    .motion-toggle { margin-left: auto; }
    .steps__counter { margin-left: 0; width: 100%; }
    .feedback, .tip { flex-direction: column; text-align: center; }
    .hero { text-align: center; justify-content: center; }
    .pills { justify-content: center; }
    .actions .button { flex: 1 1 100%; }
    .brand__name { font-size: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
    :root:not([data-motion="full"]) *, :root:not([data-motion="full"]) *::before, :root:not([data-motion="full"]) *::after { transition: none !important; animation: none !important; }
}
:root[data-motion="reduced"] *, :root[data-motion="reduced"] *::before, :root[data-motion="reduced"] *::after { transition: none !important; animation: none !important; }

/* Admin : statistiques YouTube */
.youtube-stats { max-width: 72rem; }
.table-scroll { overflow-x: auto; margin-bottom: 1rem; }
.stats-table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.stats-table th, .stats-table td { padding: .35rem .6rem; border-bottom: 1px solid var(--line, rgb(127 127 127 / 30%)); text-align: right; white-space: nowrap; }
.stats-table th[scope="row"], .stats-table thead th:first-child { text-align: left; white-space: normal; min-width: 12rem; }
.stats-table thead th { font-size: .85rem; }
.goals { list-style: none; padding: 0; display: grid; gap: .6rem; }
.goals li { display: grid; gap: .25rem; }
.goals progress { width: 100%; height: .9rem; accent-color: #ff8a1f; }
.stats-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.youtube-stats details summary { cursor: pointer; font-weight: 700; }