/* -------------------------------------------------- */
/* Theme tokens & reset                               */
/* -------------------------------------------------- */
:root {
    color-scheme: dark;

    /* -------------------------------------------------- */
    /* Typography                                         */
    /* -------------------------------------------------- */
    --font-sans: "Space Grotesk", "Inter", "Segoe UI", system-ui, -apple-system,
        sans-serif;

    /* -------------------------------------------------- */
    /* Page layout                                        */
    /* -------------------------------------------------- */
    --page-bg: #020414; /* plus profond, moins bleu clair */
    --page-bg-accent: #020617; /* très léger shift pour le dégradé */
    --page-padding-x: clamp(1rem, 3vw, 2.5rem);
    --page-padding-y: clamp(1.5rem, 3vw, 3.5rem);
    --shell-width: 1160px;
    --layout-gap: clamp(1.5rem, 3vw, 3rem);

    /* -------------------------------------------------- */
    /* Background & surfaces                              */
    /* -------------------------------------------------- */
    --page-gradient: radial-gradient(
            80% 70% at 12% 0%,
            rgba(56, 189, 248, 0.16),
            transparent 60%
        ),
        radial-gradient(
            60% 60% at 88% -8%,
            rgba(192, 132, 252, 0.12),
            transparent 55%
        ),
        linear-gradient(180deg, var(--page-bg), var(--page-bg-accent));

    /* Échelle de surfaces : background < subtle < muted < card */
    --surface-subtle: rgba(4, 6, 20, 0.96); /* bandes, sections fondales */
    --surface-muted: rgba(7, 11, 26, 0.98); /* panneaux secondaires */
    --surface-card: rgba(10, 16, 32, 0.98); /* blocs principaux */

    --surface-border: rgba(148, 163, 184, 0.28);
    --surface-border-strong: rgba(191, 219, 254, 0.52);
    --divider: rgba(51, 65, 85, 0.6);

    /* -------------------------------------------------- */
    /* Core palette                                       */
    /* -------------------------------------------------- */

    /* Accent principal (cyan) : boutons primaires, liens actifs */
    --accent: #0ea5e9; /* un cran plus sombre que #38bdf8 visuellement */
    --accent-strong: #0284c7;
    --accent-soft: rgba(14, 165, 233, 0.16);

    /* Accent secondaire (violet) : highlights, badges, halo */
    --accent-secondary: #a855f7;
    --accent-secondary-strong: #7c3aed;
    --accent-secondary-soft: rgba(124, 58, 237, 0.16);

    /* Accent chaud (CTA alternatifs, actions importantes) */
    --accent-warm: #ea580c;
    --accent-warm-strong: #c2410c;
    --accent-warm-soft: rgba(234, 88, 12, 0.18);

    /* -------------------------------------------------- */
    /* Text scale                                         */
    /* -------------------------------------------------- */
    /* text-high : texte principal sur surfaces sombres */
    /* text-high : texte principal sur surfaces claires (et assez lisible sur sombre) */
    --text-high: #020617; /* même axe que body.landing --text */
    --text-mid: #334155; /* sous-titres, labels importants */
    --text-low: #64748b; /* hints, texte secondaire, aligné avec --muted */

    /* Aliases pour compatibilité / sémantique */
    --text-primary: var(--text-high);
    --text-secondary: var(--text-mid);
    --text-muted: var(--text-low);
    --text--light: rgba(226, 232, 240, 0.88);
    /* Texte sur surfaces accentuées (boutons, badges) */
    --text-on-accent: #020617;
    --text-on-accent-soft: #020617;
    --text-on-danger: #1f0a10;
    --text-on-success: #02130a;

    /* -------------------------------------------------- */
    /* Semantic states                                    */
    /* -------------------------------------------------- */
    --success: #22c55e;
    --success-soft: rgba(22, 163, 74, 0.16);
    --success-border: rgba(74, 222, 128, 0.6);

    --warning: #eab308;
    --warning-soft: rgba(234, 179, 8, 0.16);
    --warning-border: rgba(250, 204, 21, 0.7);

    --danger: #f97373;
    --danger-strong: #e11d48;
    --danger-soft: rgba(248, 113, 113, 0.16);
    --danger-border: rgba(248, 113, 113, 0.7);

    /* -------------------------------------------------- */
    /* Radii                                              */
    /* -------------------------------------------------- */
    --radius-xl: 42px;
    --radius-lg: 28px;
    --radius-md: 18px;
    --radius-sm: 12px;
    --radius-pill: 999px;

    /* -------------------------------------------------- */
    /* Spacing                                            */
    /* -------------------------------------------------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 2rem;
    --space-8: 2.5rem;

    /* -------------------------------------------------- */
    /* Shadows                                            */
    /* -------------------------------------------------- */
    --shadow-soft: 0 25px 60px rgba(2, 6, 23, 0.7);
    --shadow-elevated: 0 45px 120px rgba(2, 6, 23, 0.9);
    --shadow-strong: 0 60px 160px rgba(15, 23, 42, 0.92);
    --shadow-gold: 0 40px 120px rgba(250, 204, 21, 0.45);

    /* -------------------------------------------------- */
    /* Motion & focus                                     */
    /* -------------------------------------------------- */
    --transition-base: 240ms cubic-bezier(0.4, 0, 0.2, 1);

    --focus-ring-width: 2px;
    --focus-ring-offset: 4px;
    --focus-ring-color: rgba(56, 189, 248, 0.9);
    --focus-ring-strong: rgba(224, 242, 254, 0.92);

    /* -------------------------------------------------- */
    /* Buttons                                            */
    /* -------------------------------------------------- */
    --btn-height-lg: 3.75rem;
    --btn-height-md: 3.25rem;
    --btn-height-sm: 2.5rem;
    --btn-padding-x: 1.75rem;
    --btn-gap: 0.45rem;

    /* -------------------------------------------------- */
    /* Z-index tokens                                     */
    /* -------------------------------------------------- */
    --z-nav: 20;
    --z-overlay: 40;
    --z-toast: 50;

    /* Raretés (fallbacks) */
    --rarity-common: #bbf7d0;
    --rarity-common-glow: rgba(34, 197, 94, 0.28);
    --rarity-rare: #bfdbfe;
    --rarity-rare-glow: rgba(59, 130, 246, 0.32);
    --rarity-epic: #e9d5ff;
    --rarity-epic-glow: rgba(192, 132, 252, 0.35);
    --rarity-legendary: #fef3c7;
    --rarity-legendary-glow: rgba(250, 204, 21, 0.4);

    --shadow-strong: 0 40px 120px rgba(3, 4, 14, 0.85);
    --shadow-gold: 0 34px 90px rgba(250, 204, 21, 0.4);
}

/* -------------------------------------------------- */
/* Reset & base                                       */
/* -------------------------------------------------- */

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

html {
    scroll-behavior: smooth;
    width: 100%;
    min-width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body {
    margin: 0 auto;
    min-height: 100vh;
    width: 100%;
    font-family: var(--font-sans);
    background: var(--page-gradient);
    color: var(--text-high);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--page-padding-y) var(--page-padding-x);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    position: relative;

    /* Palette spécifique landing (clair) mais alignée avec la palette globale */
    --bg: #f3f5ff;
    --panel: #ffffff;
    --panel-strong: rgba(255, 255, 255, 0.98);
    --panel-soft: rgba(79, 70, 229, 0.12); /* indigo soft */

    --text: #020617; /* texte principal sur fond clair */
    --muted: #64748b; /* texte secondaire */
    --primary: #4f46e5; /* indigo (cohérent avec thème global) */
    --primary-700: #4338ca;
    --accent: #38bdf8; /* même accent que le thème dark */
    --accent-strong: #0ea5e9;
    --danger: #e11d48;

    --ease-smooth: cubic-bezier(0.22, 0.61, 0.36, 1);
    --radius-xl: 32px;
    --radius-lg: 26px;
    --radius-md: 20px;

    background-color: var(--bg);

    overflow-x: hidden;
}

/* Évite les sections full-width bizarres en gardant un flux vertical propre */
body > :where(:not(script)):not(style) {
    width: min(100%, var(--shell-width));
    margin-inline: auto;
}

body > :where(:not(script)):not(style) + :where(:not(script)):not(style) {
    margin-top: var(--layout-gap);
}

/* Variantes de pages */
body.game {
    align-items: stretch;
    padding-bottom: clamp(1.5rem, 3vw, 2.75rem);
}

body.landing,
body.search {
    align-items: center;
    padding-top: clamp(1rem, 3vw, 2rem);
    overflow-x: hidden;
}

/* Shell centrée réutilisable */
.shell {
    width: min(100%, var(--shell-width));
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--layout-gap);
}

main.shell > * {
    width: 100%;
}

/* Liens */
a {
    text-decoration: none;
    transition: color var(--transition-base);
}

a:hover {
    color: var(--bg-outer);
}

/* Focus visible global : clair, pas agressif */
:where(
        a,
        button,
        textarea,
        select,
        summary,
        [role="button"],
        [tabindex]:not([tabindex="-1"])
    ):focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
    box-shadow: none;
}
/* Form controls héritent de la typo */

/* Images fluides */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Titres */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-mid);
}

/* Paragraphes */
p {
    margin: 0;
    color: var(--text-mid);
}

/* Utilitaires globaux */

.hidden {
    display: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.surface-card {
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--surface-border);
    box-shadow: var(--shadow-soft);
}

/* Focus sur surface en outline pour dépasser les overflow:hidden */
.surface-card:focus-within {
    outline: var(--focus-ring-width) solid var(--focus-ring-strong);
    outline-offset: var(--focus-ring-offset);
}

/* -------------------------------------------------- */
/* Chips & badges                                     */
/* -------------------------------------------------- */

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    border: 1px solid var(--surface-border);
    background: rgba(125, 211, 252, 0.12);
    color: var(--accent);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* -------------------------------------------------- */
/* Boutons                                            */
/* -------------------------------------------------- */

.btn,
.primary,
.secondary,
.ghost {
    --btn-bg: rgba(18, 24, 42, 0.7);
    --btn-color: var(--text);
    --btn-border: transparent;
    --btn-shadow: 0 12px 28px rgba(4, 7, 19, 0.35);

    min-height: var(--btn-height-md);
    padding: 0 clamp(1.2rem, 2vw, var(--btn-padding-x));
    border-radius: var(--radius-pill);
    border: 1px solid var(--btn-border);
    font-size: 1rem;
    font-weight: 600;
    text-transform: none;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-gap);
    background: var(--btn-bg);

    transition: transform var(--transition-base),
        box-shadow var(--transition-base), border-color var(--transition-base),
        background var(--transition-base), color var(--transition-base);
    box-shadow: var(--btn-shadow);
    text-decoration: none;
}

.btn:not(:disabled):hover,
.primary:not(:disabled):hover,
.secondary:not(:disabled):hover,
.ghost:not(:disabled):hover {
    transform: translateY(-2px);
}

.btn:not(:disabled):active,
.primary:not(:disabled):active,
.secondary:not(:disabled):active,
.ghost:not(:disabled):active {
    transform: translateY(0);
}

.btn:disabled,
.primary:disabled,
.secondary:disabled,
.ghost:disabled {
    opacity: 0.38;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Bouton principal */
.primary {
    --btn-bg: linear-gradient(135deg, #7dd3fc, #c084fc);
    --btn-color: #4c6380;
    --btn-border: rgb(255, 255, 255);
    --btn-shadow: 0 18px 46px rgba(7, 24, 53, 0.55);
}

.primary:not(:disabled):hover {
    --btn-shadow: 0 22px 62px rgba(9, 28, 63, 0.65);
}

.primary:not(:disabled):active {
    --btn-shadow: 0 10px 30px rgba(9, 28, 63, 0.5);
}

/* Secondaire */
.secondary {
    --btn-bg: rgba(255, 255, 255, 0.08);
    --btn-border: rgba(148, 163, 184, 0.5);
    --btn-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    --btn-color: var(--text-high);
}

.secondary:not(:disabled):hover {
    --btn-bg: rgba(255, 255, 255, 0.12);
    --btn-border: rgba(148, 163, 184, 0.7);
}

.secondary:not(:disabled):active {
    --btn-bg: rgba(255, 255, 255, 0.08);
}

/* Ghost */
.ghost {
    --btn-bg: rgba(255, 255, 255, 0.02);
    --btn-border: var(--surface-border);
    --btn-shadow: none;
    --btn-color: var(--text-mid);
}

.ghost:not(:disabled):hover {
    --btn-color: var(--text-high);
    --btn-border: var(--surface-border-strong);
    --btn-bg: rgba(255, 255, 255, 0.06);
}

.ghost:not(:disabled):active {
    --btn-bg: rgba(255, 255, 255, 0.09);
}

/* Alignement rapide à droite dans une toolbar */
.btn-marge {
    margin-left: auto;
}

/* Tailles */
.primary.small,
.secondary.small,
.ghost.small,
.btn.small,
.btn--sm {
    min-height: var(--btn-height-sm);
    padding: 0 1.15rem;
    font-size: 0.92rem;
}

.btn--lg {
    min-height: var(--btn-height-lg);
    padding: 0 calc(var(--btn-padding-x) + 0.5rem);
    font-size: 1.05rem;
}

/* Icon-only */
.btn--icon {
    padding: 0;
    min-width: var(--btn-height-sm);
    width: var(--btn-height-sm);
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    justify-content: center;
}

/* Texte d’aide */
.helper {
    font-size: 0.95rem;
    color: var(--text-low);
    line-height: 1.6;
}

/* Titres de section */
.section-title {
    font-size: clamp(1.4rem, 2vw, 2.15rem);
    letter-spacing: -0.01em;
}

/* -------------------------------------------------- */
/* Responsive                                          */
/* -------------------------------------------------- */

@media (max-width: 640px) {
    body {
        padding: clamp(1rem, 6vw, 2rem);
    }

    .shell {
        gap: clamp(1.2rem, 5vw, 2.2rem);
    }
}

/* Réduction des animations pour accessibilité */
@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}