/* Retiens Ça — thème « street pop » (refonte 01/11/2026, style des stickers du personnage).
   Chargé APRÈS app.css : redéfinit les couleurs et habille les composants (contours blancs « sticker », traits noirs,
   ombres décalées, éclats, trames de points). Le texte courant garde une police très lisible ; la police BD
   (Bangers, OFL) est réservée aux titres et boutons. Retirer la balise <link> de base.html.twig suffit à revenir en arrière. */
@font-face {
    font-family: "Bangers";
    src: url("../fonts/Bangers-Regular-nVEFNTV.woff2") format("woff2"), url("../fonts/Bangers-Regular-rLrWn__.ttf") format("truetype");
    font-display: swap;
}

:root {
    --acid: #b8ff2c;
    --pink: #ff2d95;
    --cyan: #22e4ff;
    --orange: #ff7a1a;
    --sun: #ffe03d;
    --ink-black: #10101a;
    --sticker-white: #ffffff;
    --display: "Bangers", "Impact", "Arial Black", var(--font);
    --neon-cyan: var(--cyan);
    --neon-yellow: var(--sun);
    --neon-orange: var(--orange);
    --neon-gradient: linear-gradient(180deg, #fff7a8 0%, var(--sun) 45%, var(--orange) 100%);
    --maths: #2b5cff;
    --francais: #0aa36b;
    --focus: var(--acid);
    --radius: 18px;
    /* Effet sticker : contour blanc épais + trait noir + ombre décalée colorée. */
    --sticker: 0 0 0 3px var(--ink-black), 0 0 0 7px var(--sticker-white), 0 0 0 10px var(--ink-black);
    --pop-shadow: 8px 9px 0 var(--pink);
}

/* Fond : nuit + taches de peinture (vert acide, rose, cyan) + trame de points discrète. */
body {
    background-image:
        radial-gradient(circle at 1px 1px, rgb(255 255 255 / 7%) 1.2px, transparent 1.6px),
        radial-gradient(38rem 24rem at -8% 8%, rgb(184 255 44 / 18%), transparent 62%),
        radial-gradient(34rem 26rem at 108% 18%, rgb(255 45 149 / 22%), transparent 62%),
        radial-gradient(40rem 26rem at 50% 115%, rgb(34 228 255 / 18%), transparent 65%),
        linear-gradient(180deg, #0a0c2a 0%, #16124f 55%, #2a0f63 100%);
    background-size: 14px 14px, auto, auto, auto, auto;
}

/* Titres façon BD : police d'affiche, contour noir, ombre décalée. */
h1, h2, .neon-title, .brand__name, .level-card__label, .hero h1 {
    font-family: var(--display);
    font-style: normal;
    font-weight: 400;
    letter-spacing: .03em;
}
h1, .neon-title {
    color: var(--sun);
    background: none;
    -webkit-text-fill-color: currentColor;
    filter: none;
    text-shadow: 3px 3px 0 var(--ink-black), -1px -1px 0 var(--ink-black), 1px -1px 0 var(--ink-black), -1px 1px 0 var(--ink-black), 5px 6px 0 var(--pink);
}
h2 { color: var(--acid); text-shadow: 2px 2px 0 var(--ink-black), 4px 4px 0 rgb(255 45 149 / 70%); font-size: 1.8rem; }
h3 { color: var(--cyan); }

/* En-tête : bandeau sombre souligné d'un trait « peinture » multicolore. */
.site-header {
    background: #0b0b24;
    border-bottom: 0;
    box-shadow: 0 4px 0 var(--acid), 0 8px 0 var(--pink), 0 12px 0 var(--cyan), 0 16px 30px rgb(0 0 0 / 45%);
    margin-bottom: 16px;
}
.brand__name {
    font-size: 1.9rem;
    color: var(--sun);
    background: none;
    -webkit-text-fill-color: currentColor;
    filter: none;
    text-shadow: 2px 2px 0 var(--ink-black), 4px 4px 0 var(--pink);
}
.brand__tagline { color: var(--acid); text-shadow: 1px 1px 0 var(--ink-black); }
.brand img { background: var(--sticker-white); box-shadow: 0 0 0 3px var(--ink-black), 0 0 0 6px var(--acid); }

/* Boutons : autocollants épais, police BD, ombre décalée qui « s'enfonce » au clic. */
.button {
    font-family: var(--display);
    font-weight: 400;
    font-size: 1.15rem;
    letter-spacing: .05em;
    border: 3px solid var(--ink-black);
    border-radius: 14px;
    box-shadow: 4px 5px 0 var(--ink-black);
    transition: transform .12s, box-shadow .12s;
}
.button:hover { transform: translate(-1px, -2px) rotate(-1deg); box-shadow: 6px 7px 0 var(--ink-black); }
.button:active { transform: translate(3px, 4px); box-shadow: 1px 1px 0 var(--ink-black); }
.button--primary { background: var(--acid); color: var(--ink-black); border-color: var(--ink-black); }
.button--ghost { box-shadow: none; border-color: transparent; }
.button--ghost:hover, .button--ghost:active { transform: none; box-shadow: none; }
.motion-toggle { border: 2px solid var(--acid); background: transparent; }

/* Accueil */
.hero {
    position: relative;
    overflow: visible;
    background:
        radial-gradient(circle at 1px 1px, rgb(255 45 149 / 35%) 1.5px, transparent 2px) 0 0 / 12px 12px,
        linear-gradient(120deg, #1b0f5a, #3a0f6e);
    border: 0;
    box-shadow: var(--sticker), 10px 12px 0 var(--acid);
    margin: 10px;
}
/* Éclat cyan en dents de scie et « !! » orange, comme sur les stickers. */
.hero::before {
    content: "";
    position: absolute;
    top: -26px;
    left: -22px;
    width: 92px;
    height: 92px;
    background: var(--cyan);
    clip-path: polygon(50% 0, 60% 30%, 95% 12%, 72% 42%, 100% 55%, 68% 62%, 82% 96%, 52% 72%, 30% 100%, 32% 66%, 0 72%, 26% 48%, 4% 22%, 36% 32%);
    filter: drop-shadow(3px 3px 0 var(--ink-black));
}
.hero::after {
    content: "!!";
    position: absolute;
    top: -30px;
    right: 18px;
    font-family: var(--display);
    font-size: 4.2rem;
    line-height: 1;
    color: var(--orange);
    transform: rotate(12deg);
    text-shadow: 3px 3px 0 var(--ink-black), -2px -2px 0 var(--sticker-white), 2px -2px 0 var(--sticker-white), -2px 2px 0 var(--sticker-white);
}
.hero__kicker { color: var(--acid); font-family: var(--display); font-size: 1.2rem; letter-spacing: .08em; }
.hero__free { color: var(--sun); }
.pill { font-family: var(--display); font-weight: 400; font-size: 1.1rem; border: 3px solid var(--ink-black); box-shadow: 3px 3px 0 var(--ink-black); }
.pill:nth-child(odd) { transform: rotate(-2deg); }
.pill:nth-child(even) { transform: rotate(2deg); }

.stage-title { font-family: var(--display); font-size: 1.4rem; letter-spacing: .06em; color: var(--cyan); text-shadow: 2px 2px 0 var(--ink-black); }

/* Cartes de classe : vrais autocollants, légèrement penchés, couleur par position. */
.level-grid { gap: 1.6rem; padding: 10px; }
.level-card {
    background: var(--sticker-white);
    color: var(--ink-black);
    border: 0;
    box-shadow: 0 0 0 3px var(--ink-black), 6px 7px 0 var(--pink);
}
.level-grid li:nth-child(4n + 1) .level-card { box-shadow: 0 0 0 3px var(--ink-black), 6px 7px 0 var(--acid); transform: rotate(-1.5deg); }
.level-grid li:nth-child(4n + 2) .level-card { box-shadow: 0 0 0 3px var(--ink-black), 6px 7px 0 var(--cyan); transform: rotate(1deg); }
.level-grid li:nth-child(4n + 3) .level-card { box-shadow: 0 0 0 3px var(--ink-black), 6px 7px 0 var(--orange); transform: rotate(-.5deg); }
.level-card:hover, .level-grid li .level-card:hover { transform: rotate(0) scale(1.05); box-shadow: 0 0 0 3px var(--ink-black), 0 0 0 7px var(--sun), 9px 10px 0 var(--ink-black); }
.level-card__label { font-size: 2.4rem; color: var(--pink); text-shadow: 2px 2px 0 var(--ink-black); }
.level-card__count { color: #3b3f5c; font-weight: 700; }
.level-card--primaire, .level-card--college { border-top: 0; }

/* Liste des compétences : bandeaux blancs avec liseré de couleur à gauche. */
.competence-card {
    background: var(--sticker-white);
    color: var(--ink-black);
    border: 0;
    border-left: 10px solid var(--acid);
    box-shadow: 0 0 0 3px var(--ink-black), 5px 6px 0 rgb(255 45 149 / 85%);
}
.competence-list li:nth-child(3n + 2) .competence-card { border-left-color: var(--cyan); }
.competence-list li:nth-child(3n) .competence-card { border-left-color: var(--orange); }
.competence-card:hover { transform: translateX(4px); box-shadow: 0 0 0 3px var(--ink-black), 8px 8px 0 var(--pink); }
.competence-card__label { color: var(--ink-black); }
.competence-card__summary { color: #3b3f5c; }
.subject__title { font-family: var(--display); font-size: 1.5rem; letter-spacing: .05em; border: 3px solid var(--ink-black); box-shadow: 4px 4px 0 var(--ink-black); transform: rotate(-1.5deg); }

/* Leçon et exercice : grande carte « autocollant ». */
.lesson, .exercise {
    border-radius: 22px;
    box-shadow: var(--sticker), 12px 14px 0 var(--pink);
    margin: 12px;
}
.lesson h1, .exercise h1 { color: var(--ink-black); text-shadow: 3px 3px 0 var(--sun); }
.exercise__prompt { font-weight: 800; }
.prose th { background: var(--ink-black); color: var(--acid); }
.prose th, .prose td { border-color: var(--ink-black); }

.tip {
    background: var(--sun);
    border: 3px solid var(--ink-black);
    box-shadow: 6px 6px 0 var(--pink);
    transform: rotate(-.6deg);
}
.tip__title { font-family: var(--display); font-weight: 400; font-size: 1.4rem; color: var(--ink-black); }

/* Choix de réponse : boutons autocollants, le choix coché passe en vert acide. */
.choice { border: 3px solid var(--ink-black); box-shadow: 3px 4px 0 var(--ink-black); background: #fff; font-weight: 700; }
.choice:has(input:checked) { background: var(--acid); }

/* Retours : vert acide (bravo), orange (pas encore), cyan (correction). */
.feedback { border: 3px solid var(--ink-black); box-shadow: 6px 6px 0 var(--ink-black); }
.feedback--ok { background: #ecffc7; border-color: var(--ink-black); box-shadow: 6px 6px 0 var(--acid); }
.feedback--ko { background: #ffe6d3; border-color: var(--ink-black); box-shadow: 6px 6px 0 var(--orange); }
.feedback--info { background: #d9faff; border-color: var(--ink-black); box-shadow: 6px 6px 0 var(--cyan); }
.hint { background: #fff8c4; border-left: 8px solid var(--pink); }

/* Personnage : petite ombre portée, il « décolle » de la page. */
.mascot img { filter: drop-shadow(4px 6px 0 rgb(16 16 26 / 55%)); }
.mascot__bubble {
    font-family: var(--display);
    font-size: 1.3rem;
    letter-spacing: .04em;
    background: var(--sticker-white);
    color: var(--ink-black);
    border: 3px solid var(--ink-black);
    box-shadow: 4px 4px 0 var(--pink);
}

.draft-banner { background: var(--sun); color: var(--ink-black); font-weight: 700; border-bottom: 3px solid var(--ink-black); }
.site-footer { border-top: 4px solid var(--pink); }

/* Collège : même univers, un peu plus calme (pas de cartes penchées, éclats retirés). */
.stage-college .level-grid li .level-card, .stage-college .tip, .stage-college .pill, .stage-college .subject__title { transform: none; }

/* Petits écrans : contours et ombres un peu réduits pour ne pas manger la place. */
@media (max-width: 480px) {
    .lesson, .exercise, .hero { margin: 8px 4px; box-shadow: 0 0 0 3px var(--ink-black), 0 0 0 6px var(--sticker-white), 0 0 0 8px var(--ink-black), 7px 8px 0 var(--pink); }
    .hero::after { font-size: 3rem; top: -22px; }
    .hero::before { width: 64px; height: 64px; top: -18px; left: -12px; }
    h2 { font-size: 1.5rem; }
}

/* Lisibilité : les énoncés d'exercice et les titres de leçon restent dans la police courante (pas de capitales BD). */
.exercise h1, .exercise__prompt, .lesson h1 {
    font-family: var(--font);
    font-weight: 900;
    letter-spacing: 0;
    text-transform: none;
    text-shadow: none;
    color: var(--ink-black);
}
.lesson h1 { box-shadow: inset 0 -.45em 0 var(--sun); display: inline; }
/* Titres de page courts (« CP », « 4e ») : plus grands, comme un tag. */
main > h1:only-of-type, .level-header h1 { font-size: clamp(2.4rem, 8vw, 3.6rem); }

/* ===== Street pop v2 (autocritique du 02/11) ===== */

/* En-tête compact sur téléphone : logo + bouton animations sur une ligne, menu sur UNE ligne qui défile
   horizontalement (comme une appli) ; il occupait un quart de l'écran avant le contenu. */
@media (max-width: 1040px) {
    .site-header__inner { min-height: 0; padding-block: .35rem .45rem; gap: .35rem .5rem; }
    .brand { flex: 1; gap: .55rem; }
    .brand img { width: 40px; height: 40px; }
    .brand__name { font-size: 1.55rem; }
    .brand__tagline { font-size: .75rem; }
    .site-header .motion-toggle { order: 2; min-height: 2.75rem; padding: .25rem .6rem; font-size: .75rem; }
    .site-nav {
        order: 3; width: 100%; margin: 0;
        flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
        gap: .4rem; padding-bottom: .1rem;
        mask-image: linear-gradient(90deg, #000 88%, transparent);
    }
    .site-nav::-webkit-scrollbar { display: none; }
    .site-nav a { flex: none; font-size: .92rem; padding: .25rem .75rem; white-space: nowrap; }
    .draft-banner { font-size: .8rem; padding: .3rem .75rem; line-height: 1.35; }
}

/* Menu : pastilles « autocollant » sur fond sombre. */
.site-header .site-nav a { background: transparent; border: 2px solid rgb(184 255 44 / 55%); color: #f4f6ff; }
.site-header .site-nav a:hover, .site-header .site-nav a[aria-current="page"] { background: var(--acid); color: var(--ink-black); border-color: var(--acid); }

/* Primaire : même univers street, en version claire (papier + trame + éclaboussures), au lieu des taches pastel. */
body.stage-primaire {
    background-color: #fffbea;
    background-image:
        radial-gradient(circle at 1px 1px, rgb(255 45 149 / 14%) 1.3px, transparent 1.7px),
        radial-gradient(22rem 16rem at -4% 12%, rgb(184 255 44 / 38%), transparent 65%),
        radial-gradient(20rem 18rem at 104% 28%, rgb(255 45 149 / 22%), transparent 65%),
        radial-gradient(26rem 18rem at 50% 108%, rgb(34 228 255 / 26%), transparent 65%),
        linear-gradient(180deg, #fffbea 0%, #fff3d6 100%);
    background-size: 13px 13px, auto, auto, auto, auto;
}
/* Titres de page du primaire : gros « tag » BD (jaune, contour noir, ombre rose), sans le vieux soulignement. */
body.stage-primaire main > h1, body.stage-primaire .neon-title {
    font-family: var(--display);
    font-size: clamp(2.6rem, 9vw, 4rem);
    color: var(--sun);
    -webkit-text-fill-color: currentColor;
    text-decoration: none;
    text-shadow: 3px 3px 0 var(--ink-black), -2px -2px 0 var(--ink-black), 2px -2px 0 var(--ink-black), -2px 2px 0 var(--ink-black), 6px 7px 0 var(--pink);
    transform: rotate(-2deg);
    display: inline-block;
    margin-left: .2rem;
}
body.stage-primaire .lesson h1, body.stage-primaire .exercise h1 { text-decoration: none; }
/* Cartes du primaire : autocollants (contour blanc + trait noir + ombre décalée), comme partout ailleurs. */
body.stage-primaire .lesson, body.stage-primaire .exercise {
    border: 0;
    border-radius: 22px;
    box-shadow: var(--sticker), 12px 14px 0 var(--acid);
}
body.stage-primaire .competence-card {
    border: 0;
    border-left: 10px solid var(--acid);
    border-radius: 18px;
    box-shadow: 0 0 0 3px var(--ink-black), 6px 7px 0 var(--pink);
}
body.stage-primaire .competence-list li:nth-child(3n + 2) .competence-card { border-left-color: var(--cyan); }
body.stage-primaire .competence-list li:nth-child(3n) .competence-card { border-left-color: var(--orange); }
body.stage-primaire .competence-card:hover { transform: translateX(4px) rotate(-.4deg); box-shadow: 0 0 0 3px var(--ink-black), 9px 9px 0 var(--pink); }
body.stage-primaire .button { border: 3px solid var(--ink-black); box-shadow: 4px 5px 0 var(--ink-black); }
body.stage-primaire .button:active { transform: translate(3px, 4px); box-shadow: 1px 1px 0 var(--ink-black); }
body.stage-primaire .choice { border: 3px solid var(--ink-black); box-shadow: 3px 4px 0 var(--ink-black); }
body.stage-primaire .my-progress, body.stage-primaire .demo { border: 3px dashed var(--ink-black); }
body.stage-primaire .subject__title { box-shadow: 4px 4px 0 var(--ink-black); }

/* Jeux : plateau et cartes de jeux au style autocollant. */
.board { border: 0; border-radius: 24px; box-shadow: 0 0 0 3px var(--ink-black), 0 0 0 7px var(--sticker-white), 0 0 0 10px var(--ink-black), 9px 11px 0 var(--cyan); margin: 14px 10px; }
.game-card { border: 0 !important; border-radius: 20px; box-shadow: 0 0 0 3px var(--ink-black), 6px 7px 0 var(--orange) !important; }
.game-card:nth-child(2n) { box-shadow: 0 0 0 3px var(--ink-black), 6px 7px 0 var(--pink) !important; }
.game-card__title, .game-card h3 { font-family: var(--display); font-weight: 400; letter-spacing: .04em; font-size: 1.5rem; color: var(--ink-black); }

/* Bureau : le bouton « Animations » reste sur la ligne du menu (il passait seul sur une deuxième ligne). */
@media (min-width: 1041px) {
    .site-header__inner { flex-wrap: nowrap; }
    .site-nav { flex-wrap: nowrap; }
    .site-header .motion-toggle { flex: none; font-size: .8rem; }
}

/* Contraste : sur le papier clair du primaire, les sous-titres passent en noir avec un trait vert acide (le cyan était peu lisible). */
body.stage-primaire h3, body.stage-primaire .domain__title { color: var(--ink-black); text-shadow: none; }
body.stage-primaire main h3 { display: inline-block; box-shadow: inset 0 -.35em 0 var(--acid); padding-inline: .15rem; }
body.stage-primaire h2 { color: var(--pink); text-shadow: 2px 2px 0 var(--ink-black); }

/* Plateau : cases aux couleurs street, bordure noire, départ en noir, arrivée en vert acide. */
.square { border: 3px solid var(--ink-black); box-shadow: 2px 3px 0 var(--ink-black); }
.square--tone0 { background: #fff27a; } .square--tone1 { background: #9ff3ff; } .square--tone2 { background: #ffb3d6; } .square--tone3 { background: #d6ff8a; }
.square--start { background: var(--ink-black); }
.square--end { background: var(--acid); }
.square--star { background: #fff27a; border-color: var(--orange); }
.square--rocket { background: #9ff3ff; border-color: var(--pink); }
/* Textes du menu et du logo jamais coupés (le menu sur une ligne les comprimait). */
.site-nav a, .brand__tagline, .brand__name, .site-header .motion-toggle { white-space: nowrap; }
@media (min-width: 1041px) { .site-nav a { flex: none; } .brand { flex: none; } }

/* Contrastes (contrôle automatique WCAG du 02/11) */
/* Barre du lecteur pas à pas : texte clair forcé (au primaire, --on-dark devient foncé : texte foncé sur fond foncé). */
.steps__toolbar { color: #f4f6ff; }
.steps__counter { color: #d6dcff; }
/* Pastille « Français » : vert plus foncé sous le texte blanc (rapport ≥ 4,5). */
:root { --francais: #087a50; }
/* Numéros de classe des cartes : encre noire et ombre rose, quelle que soit l'étape (le collège les passait en clair sur blanc). */
.level-card .level-card__label, .level-card--college .level-card__label { color: var(--ink-black); text-shadow: 3px 3px 0 var(--pink); }
/* Onglets Calcul / Français des mini-jeux : l'onglet actif était bleu sur bleu marine (règle des liens du primaire). */
body .theme-tab { border: 3px solid var(--ink-black); box-shadow: 3px 3px 0 var(--ink-black); color: var(--ink-black); background: #fff; }
body .theme-tab[aria-current="page"] { background: var(--acid); color: var(--ink-black); }

/* Espace parent : carte « Soutenir le projet » bien visible (adultes uniquement). */
.support-card {
    display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
    margin: 1.5rem 6px 2rem; padding: 1.1rem 1.25rem;
    background: var(--sun); color: var(--ink-black);
    border-radius: 20px;
    box-shadow: 0 0 0 3px var(--ink-black), 0 0 0 7px var(--sticker-white), 0 0 0 10px var(--ink-black), 9px 10px 0 var(--pink);
}
.support-card > div { flex: 1 1 16rem; }
.support-card h2 { margin-top: 0; color: var(--ink-black); text-shadow: 2px 2px 0 var(--sticker-white); }
.support-card a:not(.button) { color: var(--ink-black); }
.support__kids { padding: .75rem 1rem; background: #d9faff; border: 3px solid var(--ink-black); border-radius: 14px; box-shadow: 4px 4px 0 var(--cyan); }