/* MathPulse - Styles de base, composants et écrans */

:root {
    /* Palette espace */
    --color-primary: #5b4bc4;
    --color-primary-light: #7c6ee0;
    --color-accent: #ff6b9d;
    --color-bg: #f0f4f8;
    --color-surface: #ffffff;
    --color-text: #1a1a2e;
    --color-text-light: #4b5563;
    --color-border: #d1d5db;
    --color-success: #4ade80;
    --color-success-text: #15803d;
    --color-error-text: #be185d;
    --color-stars: #fbbf24;
    --color-space-blue: #0ea5e9;
    --color-space-purple: #a78bfa;

    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 2.5rem;

    --radius-sm: 0.25rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-full: 9999px;

    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.15);

    --duration-fast: 150ms;
    --duration-base: 300ms;
    --duration-slow: 500ms;
    --easing-out: cubic-bezier(0, 0, 0.2, 1);
    --easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #0f0f1e;
        --color-surface: #1c1c34;
        --color-text: #f0f4f8;
        --color-text-light: #b6bcc9;
        --color-border: #3b3b5c;
        --color-primary: #8b7df0;
        --color-primary-light: #a79bf5;
        --color-success-text: #4ade80;
        --color-error-text: #ff8fb7;
    }
    .btn-primary { color: #0f0f1e; }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 16px; }

body {
    font-family: var(--font-sans);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.app-container { min-height: 100vh; min-height: 100dvh; width: 100%; }

.screen {
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    animation: fadeIn var(--duration-base) var(--easing-out);
}
.screen.active { display: flex; flex-direction: column; }

h1, h2, h3 { font-weight: 700; line-height: 1.2; }
h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-lg); }
p { margin-bottom: 0; }

/* ----- Boutons ----- */
button {
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    font-weight: 600;
    padding: var(--spacing-md) var(--spacing-lg);
    min-height: 48px;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: transform var(--duration-fast) var(--easing-in-out), box-shadow var(--duration-fast), background-color var(--duration-fast);
    touch-action: manipulation;
    user-select: none;
}
button:disabled { opacity: 0.6; cursor: default; }
button:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }

.btn-primary { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-md); }
.btn-primary:hover:not(:disabled) { background: var(--color-primary-light); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-primary:active:not(:disabled) { transform: translateY(0); }

.btn-secondary { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn-secondary:hover:not(:disabled) { background: color-mix(in srgb, var(--color-primary) 12%, transparent); }

.btn-large { padding: var(--spacing-md) var(--spacing-2xl); font-size: var(--font-size-lg); min-height: 60px; border-radius: var(--radius-lg); }

.btn-hint { background: transparent; color: var(--color-text-light); font-weight: 500; }
.btn-hint[hidden] { display: none; }
.btn-quit { background: transparent; color: var(--color-text-light); min-width: 48px; padding: 0; font-size: var(--font-size-lg); }

/* ----- Pavé numérique ----- */
.answer-display {
    display: block;
    width: 100%;
    max-width: 320px;
    min-height: 72px;
    line-height: 66px;
    text-align: center;
    font-size: var(--font-size-3xl);
    font-weight: 800;
    border: 3px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}
.answer-display.empty { color: var(--color-text-light); }
.answer-display.correct { border-color: var(--color-success-text); color: var(--color-success-text); }
.answer-display.wrong { border-color: var(--color-error-text); color: var(--color-error-text); }

.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-sm); width: 100%; max-width: 320px; }
.keypad[hidden] { display: none; }
.key { min-height: 60px; padding: 0; font-size: var(--font-size-2xl); font-weight: 800; background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); box-shadow: var(--shadow-md); }
.key:active:not(:disabled) { transform: scale(0.96); }
.key-del { font-size: var(--font-size-xl); color: var(--color-text-light); }
.key-ok { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
@media (prefers-color-scheme: dark) { .key-ok { color: #0f0f1e; } }

/* ----- Utilitaires ----- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-center { align-items: center; justify-content: center; }
.flex-between { justify-content: space-between; }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }
.text-center { text-align: center; }
.text-sm { font-size: var(--font-size-sm); }
.text-lg { font-size: var(--font-size-lg); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.font-bold { font-weight: 700; }
.muted { color: var(--color-text-light); }
.mt-md { margin-top: var(--spacing-md); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.p-lg { padding: var(--spacing-lg); }
.btn-column { width: 100%; max-width: 320px; }
.fox-big { font-size: 4rem; line-height: 1.1; }
.formula { font-size: var(--font-size-2xl); font-weight: 800; color: var(--color-primary); }

/* ----- Univers ----- */
.universe-wrap { width: 100%; flex: 1; }
.universe-container { display: flex; flex-direction: column; align-items: center; width: 100%; }

.star-counter { font-size: var(--font-size-xl); }

.chapter-banner { aspect-ratio: 2 / 1; }
.chapter-banner .cast.small { height: 66%; }

.sky-detail { position: relative; margin-bottom: var(--spacing-sm); }
.sky-detail .chapter-card { min-height: 5.5rem; }
.sky-scroll { position: relative; width: 100%; height: min(62vh, 440px); overflow-y: auto; border-radius: var(--radius-lg); border: 2px solid var(--color-border); overscroll-behavior: contain; background: #150f3a; }
.sky-map { position: relative; width: 100%; }
.sky-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sky-star { position: absolute; transform: translate(-50%, -50%); width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sky-star img { display: block; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,213,74,.9), 0 0 16px 4px rgba(255,213,74,.45); }
.sky-star.selected img, .sky-star:focus-visible img { box-shadow: 0 0 0 3px #fff, 0 0 18px 6px rgba(255,255,255,.55); }
.sky-star:focus-visible { outline: none; }
.sky-star.current img { animation: skyPulse 2s ease-in-out infinite; }
.sky-dot { width: 14px; height: 14px; border-radius: 50%; background: #aab2d4; opacity: .7; box-shadow: 0 0 8px 2px rgba(170,178,212,.35); }
.sky-star.selected .sky-dot { opacity: 1; box-shadow: 0 0 0 3px #fff; }
.sky-goal { position: absolute; top: 100%; left: 50%; transform: translate(-50%, -6px); white-space: nowrap; color: #cfd6f5; font-weight: 600; text-shadow: 0 1px 3px #0e0d2b; }
.chapters-list { list-style: none; margin: 0 0 var(--spacing-lg); padding: 0; display: flex; flex-direction: column; gap: var(--spacing-sm); width: 100%; }
.chapter-card { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md); border-radius: var(--radius-lg); border: 2px solid var(--color-border); background: var(--color-surface); }
.chapter-card.unlocked { border-color: var(--color-primary); }
.chapter-card.current { box-shadow: 0 0 0 2px var(--color-primary); }
.chapter-card.locked { opacity: 0.75; }
.chapter-icon { width: 44px; height: 44px; flex: 0 0 auto; }
.chapter-card.locked .chapter-icon { opacity: .75; }
.chapter-body { flex: 1 1 auto; min-width: 0; text-align: left; }
.chapter-number, .chapter-mission, .chapter-goal { color: var(--color-text-light); }
.chapter-title { font-weight: 600; }
.chapter-goal { flex: 0 0 auto; white-space: nowrap; }
.chapter-tag { flex: 0 0 auto; color: var(--color-primary); font-weight: 600; }

.progress-bar { width: 100%; }
.progress-track { height: 10px; background: var(--color-border); border-radius: var(--radius-full); overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--color-space-blue), var(--color-space-purple)); transition: width 0.4s ease; }
.next-goal { color: var(--color-text-light); }

/* ----- Jeu ----- */
.game-screen { justify-content: flex-start; padding-top: var(--spacing-md); }
.game-top { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.dots { display: flex; gap: var(--spacing-sm); }
.dot { width: 14px; height: 14px; border-radius: var(--radius-full); background: var(--color-border); }
.dot.done { background: var(--color-success-text); }
.dot.current { background: var(--color-primary); transform: scale(1.3); }

.question { font-size: var(--font-size-3xl); font-weight: 800; text-align: center; margin-top: var(--spacing-md); }
.review-tag { text-align: center; margin-top: var(--spacing-md); font-size: var(--font-size-sm); font-weight: 600; color: var(--color-primary); }
.review-tag + .question { margin-top: var(--spacing-xs); }
.cleared { color: var(--color-success-text); animation: planetAppear var(--duration-slow) var(--easing-out); }

.choices { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); width: 100%; max-width: 360px; }
.choice { min-height: 72px; font-size: var(--font-size-2xl); font-weight: 800; background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); box-shadow: var(--shadow-md); }
.choice:hover:not(:disabled) { border-color: var(--color-primary); }
.choice.correct { border-color: var(--color-success-text); background: color-mix(in srgb, var(--color-success) 25%, var(--color-surface)); opacity: 1; }
.choice.wrong { border-color: var(--color-error-text); opacity: 1; }

.feedback-container { min-height: 70px; width: 100%; text-align: center; }
.feedback-success { color: var(--color-success-text); }
.feedback-error { color: var(--color-error-text); display: flex; flex-direction: column; align-items: center; gap: var(--spacing-sm); }
.feedback-error .muted { color: var(--color-text-light); }

/* ----- Représentations visuelles ----- */
.visual { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--spacing-md); width: 100%; margin: var(--spacing-sm) 0; }
.visual-sign { font-size: var(--font-size-xl); font-weight: 800; }
.block-row { display: flex; flex-wrap: wrap; gap: 6px; max-width: 170px; justify-content: center; }
.group { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; max-width: 150px; padding: var(--spacing-sm); border: 2px dashed var(--color-primary-light); border-radius: var(--radius-md); }
.group-item { font-size: 1.4rem; line-height: 1.2; }

/* ----- Résultat ----- */
.result-card { background: var(--color-surface); border: 2px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-lg); display: flex; flex-direction: column; gap: var(--spacing-sm); align-items: center; min-width: min(320px, 100%); }
.result-stars { font-size: 2.5rem; min-height: 3rem; }
.unlock { color: var(--color-primary); animation: planetAppear var(--duration-slow) var(--easing-out); }

/* ----- Espace parent ----- */
.parent-screen { justify-content: flex-start; align-items: stretch; }
.parent-wrap { width: 100%; }
.skill-card { padding: var(--spacing-md); border-radius: var(--radius-md); background: var(--color-surface); border: 2px solid var(--color-border); }
.skill-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-xs); }
.history { list-style: none; display: flex; flex-direction: column; gap: var(--spacing-xs); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Image d'intro (écran d'accueil) */
.intro-img { display: block; margin: 0 auto var(--space-md, 12px); width: auto; max-width: 100%; max-height: 42vh; border-radius: 20px; }

/* Visages (mascotte de jeu, lapine de résultat) */
.face { display: block; width: 96px; height: 96px; }
.game-screen { position: relative; }
.mascot { position: absolute; top: 4.4rem; left: .75rem; width: 56px; height: 56px; pointer-events: none; }
.mascot .face { width: 56px; height: 56px; }
.speech { position: relative; max-width: 11rem; padding: .6rem .9rem; background: var(--color-surface); border: 2px solid var(--color-border); border-radius: 16px; text-align: left; font-weight: 700; }
.speech::before { content: ''; position: absolute; left: -9px; top: 50%; width: 14px; height: 14px; background: inherit; border-left: 2px solid var(--color-border); border-bottom: 2px solid var(--color-border); transform: translateY(-50%) rotate(45deg); }

/* Bouton son (écran de jeu) */
.btn-sound { min-width: 44px; min-height: 44px; font-size: 1.25rem; background: transparent; border: 0; border-radius: 12px; cursor: pointer; }
.btn-sound:focus-visible { outline: 3px solid var(--color-primary); }
.game-top-right { display: flex; align-items: center; gap: .25rem; }

/* Intro animée */
.intro-screen { position: fixed; inset: 0; padding: 0; max-width: none; background: #0e0d2b; display: flex; align-items: center; justify-content: center; overflow: hidden; z-index: 5; }
.intro-art { width: 100%; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.intro-art svg { width: 100%; height: 100%; display: block; }
.btn-skip { position: absolute; top: .75rem; right: .75rem; min-height: 44px; padding: .4rem 1rem; border: 0; border-radius: 999px; background: rgba(255,255,255,.18); color: #fff; font-weight: 700; cursor: pointer; z-index: 2; }
.btn-skip:focus-visible, .intro-cover:focus-visible { outline: 3px solid #fbbf24; }
.intro-cover { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; border: 0; background: radial-gradient(circle at 50% 40%, #2b2370, #0e0d2b); color: #fff; cursor: pointer; }
.intro-cover-icon { font-size: 4rem; }
.screen.intro-screen { padding: 0 !important; max-width: none !important; gap: 0; }

/* Bouton « Passer » / « Continuer › » : discret ; en fin d'animation, une jauge de 5 s se remplit avant le passage automatique */
.btn-skip { position: absolute; overflow: hidden; background: rgba(255,255,255,.14); font-weight: 600; font-size: .9rem; }
.btn-skip.counting::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: rgba(255,255,255,.7); transform-origin: left; animation: skipCount 3s linear forwards; }
@keyframes skipCount { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ----- Espace parent : voies et graphiques ----- */
.path { margin-bottom: var(--spacing-lg); padding: var(--spacing-md); border-radius: var(--radius-lg); background: var(--color-surface); border: 2px solid var(--color-border); }
.path-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--spacing-sm); margin-bottom: var(--spacing-sm); }
.pbar { height: .7rem; border-radius: 999px; background: var(--color-border); overflow: hidden; margin-bottom: .35rem; }
.pbar span { display: block; height: 100%; border-radius: 999px; background: var(--color-primary); transition: width .6s var(--easing-out, ease-out); }
.radar-wrap { display: flex; flex-direction: column; align-items: center; margin: var(--spacing-sm) 0; }
.radar { width: 100%; max-width: 280px; height: auto; }
.radar-ring, .radar-spoke { fill: none; stroke: var(--color-border); stroke-width: 1; }
.radar-shape { fill: color-mix(in srgb, var(--color-primary) 28%, transparent); stroke: var(--color-primary); stroke-width: 2; stroke-linejoin: round; }
.radar-dot { fill: var(--color-primary); }
.radar-dot.full { fill: #e0a100; }
.radar-label { font-size: 12px; font-weight: 700; fill: var(--color-text, #1a1a2e); }
.path-details summary { cursor: pointer; padding: .6rem 0; font-weight: 600; color: var(--color-primary); min-height: 44px; }
.path-details[open] summary { margin-bottom: var(--spacing-sm); }
.week { display: flex; align-items: flex-end; gap: .4rem; height: 8.5rem; padding: .5rem; border-radius: var(--radius-md); background: var(--color-surface); border: 2px solid var(--color-border); }
.wk-col { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .15rem; }
.wk-bar { width: 100%; max-width: 2.2rem; border-radius: 6px 6px 2px 2px; background: #e0a100; min-height: 4px; }
.wk-bar.empty { background: var(--color-border); }
.wk-val { font-size: .8rem; font-weight: 700; min-height: 1rem; }
.wk-day { font-size: .75rem; color: var(--color-text-light); text-transform: capitalize; }

/* Mode test */
.cheat-panel { margin-bottom: var(--spacing-lg); padding: var(--spacing-md); border-radius: var(--radius-md); background: #fff7d6; border: 2px dashed #e0a100; color: #5a4300; display: flex; flex-direction: column; gap: var(--spacing-sm); }
.btn-small { min-height: 40px; padding: .4rem .9rem; font-size: var(--font-size-sm, .9rem); margin-top: var(--spacing-sm); }

/* Scènes d'histoire (visionneuse de vignettes) */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.scene-screen { justify-content: flex-start; }
.scene-top { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); }
.scene-chapter { margin: 0; color: var(--color-text-light); font-weight: 600; }
.btn-scene-skip { flex: 0 0 auto; min-height: 44px; padding: .4rem 1rem; border: 2px solid var(--color-border); border-radius: 999px; background: transparent; color: var(--color-text-light); font-weight: 600; cursor: pointer; }
.scene-stage { position: relative; width: 100%; aspect-ratio: 3 / 2; border-radius: var(--radius-lg); overflow: hidden; background: #0e0d2b; }
.scene-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: fadeIn .45s ease backwards; }
.scene-cast { position: absolute; inset: 0; pointer-events: none; }
.cast { position: absolute; bottom: 1%; height: 74%; width: auto; transform-origin: 50% 100%; animation: castIn .5s var(--easing-out) backwards, breathe 4.2s ease-in-out .6s infinite; transition: filter .3s, opacity .3s; }
.cast + .cast { animation-delay: 0s, 1.4s; }
.cast.quiet { filter: brightness(.82); }
.cast.speaking { animation: castIn .5s var(--easing-out) backwards, speak .5s var(--easing-out) 1, breathe 4.2s ease-in-out .6s infinite; }
.cast.left { left: 3%; }
.cast.right { right: 3%; }
.cast.center { left: 0; right: 0; margin: 0 auto; }
.cast.small { height: 56%; }
.scene-lines { width: 100%; min-height: 12.5rem; display: flex; flex-direction: column; gap: var(--spacing-sm); }
.scene-narr { margin: 0; text-align: center; font-size: var(--font-size-lg); font-style: italic; animation: fadeIn .5s ease backwards; }
.scene-line { display: flex; align-items: center; gap: var(--spacing-md); animation: fadeIn .4s ease backwards; }
.scene-line .face { width: 56px; height: 56px; flex: 0 0 auto; }
.scene-line .speech { flex: 1 1 auto; max-width: none; margin: 0; }
.scene-dots { display: flex; gap: .4rem; justify-content: center; }
.scene-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--color-border); }
.scene-dot.on { background: var(--color-primary); }
.scene-screen .btn-large { width: 100%; max-width: 320px; }
.story-line { margin: 0; text-align: center; font-weight: 700; }
.universe-wrap .rabbit-says { margin-top: var(--spacing-lg); }
.universe-wrap .rabbit-says .speech { max-width: 15rem; }
.chapter-replay { flex: 0 0 auto; min-height: 44px; padding: .3rem .9rem; border: 2px solid var(--color-primary); border-radius: 999px; background: transparent; color: var(--color-primary); font-weight: 600; cursor: pointer; }

/* Bouton son (scènes et univers) : une cible tactile facile à atteindre */
.btn-sound { min-width: 44px; min-height: 44px; padding: 0 .6rem; border-radius: 999px; border: 2px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.btn-sound:focus-visible { outline: 3px solid #fbbf24; outline-offset: 2px; }
.btn-sound[aria-pressed="false"] { opacity: .75; }
.sound-row { display: flex; justify-content: flex-end; width: 100%; }
.scene-top-actions { display: flex; align-items: center; gap: var(--spacing-sm); flex: 0 0 auto; }