:root {
    /* ── Polices ── */
    --font-body: 'Source Sans 3', system-ui, sans-serif;
    /* Éther : titres sans-serif légers. Cinzel reste pour le registre showcase. */
    --font-heading: 'Source Sans 3', system-ui, sans-serif;
    --font-display: 'Cinzel', Georgia, serif;
    --font-grimoire: 'Crimson Pro', Georgia, serif;
    /* Marcellus : serif à empattements évasés, proche des noms de cartes MTG. */
    --font-nav: 'Marcellus', 'Cinzel', Georgia, serif;

    /* ── Échelle typographique — plancher de lisibilité à 0.75rem (12px) ── */
    --fs-2xs: 0.75rem;
    --fs-xs: 0.8125rem;
    --fs-sm: 0.875rem;
    --fs-md: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.375rem;
    --fs-2xl: 1.75rem;

    /* Interlignes */
    --lh-tight: 1.2;
    --lh-normal: 1.5;

    /* Graisses de titre / libellé */
    --tracking-label: 0.08em;

    /* ── Échelle d'espacement ── */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;

    /*
     * ── Surfaces : Éther ──
     * Identité D (design-lab/esthetiques.php) : encre bleu-violet, lumière
     * froide, cartes en suspension. Le chrome du site lit ces tokens ;
     * l'or métallique Magic reste dans --rarity-rare et --mana-w.
     */
    --bg: #08070f;
    --surface: #16152a;          /* panneaux — écart perceptible avec le fond */
    --surface-2: #1e1d36;        /* survol, contrôles */
    --surface-sunken: rgba(4, 3, 14, 0.45);
    --surface-raised: rgba(180, 190, 255, 0.06);
    --scrim: rgba(4, 3, 14, 0.72);

    /* ── Bordures : acier violet ── */
    --border: #3a3d6a;
    --border-strong: #5c62a0;
    --border-subtle: rgba(180, 190, 255, 0.14);

    /* ── Texte ── */
    --text: #eef0ff;
    --text-muted: #8b8ab0;
    --text-card: #f4f5ff;

    /*
     * ── Accent chrome : lumière stellaire ──
     * Le nom --gold est historique (liens, focus, boutons). En Éther ce n'est
     * plus du métal jaune : c'est la lueur lavande. L'or de rareté Magic
     * vit dans --rarity-rare, pas ici.
     */
    --gold: #b8bfff;
    --gold-bright: #d4d8ff;
    --gold-light: #e4e7ff;
    --gold-dim: rgba(180, 190, 255, 0.5);
    --gold-soft: rgba(140, 150, 255, 0.14);
    --gold-ink: #0c0b18;
    --gold-deep: #6e76d0;

    /* ── Accents ── */
    --accent: #0e68ab;
    --accent-soft: rgba(14, 104, 171, 0.18);
    --deck-accent: #6b9bd1;
    /* Encre lisible posée sur un lavis --tint-deck */
    --deck-accent-ink: #9ec5ef;

    /* ── États — une seule teinte par intention, --error couvre aussi le danger ── */
    --success: #4ade80;
    --error: #f87171;
    --warn: #fbbf24;
    /* Encre d'erreur sur lavis sombre : --error manque de tenue en petit corps */
    --error-ink: #ff8a80;

    /*
     * ── Teintes sémantiques ──
     * Trois intensités par famille, là où le CSS empilait avant une trentaine
     * d'opacités improvisées entre 0,06 et 0,4 :
     *   soft   → lavis de ligne, répété sur de longues listes
     *   base   → badge, pastille, état isolé
     *   strong → survol, sélection, remplissage assumé
     */
    --tint-success-soft: rgba(74, 222, 128, 0.07);
    --tint-success: rgba(74, 222, 128, 0.14);
    --tint-success-strong: rgba(74, 222, 128, 0.3);

    --tint-warn-soft: rgba(251, 191, 36, 0.07);
    --tint-warn: rgba(251, 191, 36, 0.14);
    --tint-warn-strong: rgba(251, 191, 36, 0.3);

    --tint-danger-soft: rgba(248, 113, 113, 0.07);
    --tint-danger: rgba(248, 113, 113, 0.14);
    --tint-danger-strong: rgba(248, 113, 113, 0.3);

    --tint-deck-soft: rgba(107, 155, 209, 0.07);
    --tint-deck: rgba(107, 155, 209, 0.14);
    --tint-deck-strong: rgba(107, 155, 209, 0.32);

    --tint-gold-soft: rgba(140, 150, 255, 0.08);
    --tint-gold: rgba(140, 150, 255, 0.16);
    --tint-gold-strong: rgba(140, 150, 255, 0.32);

    /* Le liseré qui accompagne chaque lavis. Au survol, on passe à la couleur pleine. */
    --edge-success: rgba(74, 222, 128, 0.4);
    --edge-warn: rgba(251, 191, 36, 0.4);
    --edge-danger: rgba(248, 113, 113, 0.42);
    --edge-deck: rgba(107, 155, 209, 0.4);

    /* ── Rareté MTG ── */
    --rarity-common: #6b7280;
    --rarity-uncommon: #6b9bd1;
    --rarity-rare: #c9a227;
    --rarity-mythic: #e85d04;

    /*
     * ── Couleurs de mana WUBRG ──
     * Source unique pour les pastilles de filtre, les pips de deck et les
     * barres du tableau de bord, qui portaient avant trois palettes distinctes.
     * Chaque teinte est livrée avec l'encre lisible dessus ; les variantes
     * « soft » sont désaturées pour les aplats larges (barres, jauges), où la
     * teinte pleine vibre trop sur fond sombre.
     */
    --mana-w: #f8e7a0;
    --mana-w-ink: #1a1a1a;
    --mana-u: #0e68ab;
    --mana-u-ink: #ffffff;
    --mana-b: #3b3340;
    --mana-b-ink: #f3e9ff;
    --mana-r: #d3202a;
    --mana-r-ink: #ffffff;
    --mana-g: #00733e;
    --mana-g-ink: #ffffff;
    --mana-c: #cbc2c0;
    --mana-c-ink: #1a1a1a;

    --mana-w-soft: #f0e6c8;
    --mana-u-soft: #4a9fd4;
    --mana-b-soft: #4a4038;
    --mana-r-soft: #d45a4a;
    --mana-g-soft: #4a9a5a;
    --mana-c-soft: #8a8098;

    /*
     * ── Types de cartes ──
     * Le code couleur des répartitions par type (courbe, mélange de types).
     * Même vocabulaire que le mana et la rareté : c'est du langage Magic, donc
     * ça vit dans le socle et pas dans le CSS d'une page.
     */
    --type-lands: #5d8a62;
    --type-creatures: #d4af37;
    --type-instants: #4f8ec4;
    --type-sorceries: #c45c2a;
    --type-artifacts: #9a948c;
    --type-enchantments: #9b6bb8;
    --type-planeswalkers: #e8d48b;
    --type-other: #6a6560;

    /*
     * ── Registres chromatiques ──
     * Identité D · Éther : le contenu et le rail Void sont dans la même
     * famille froide (encre, cyan, violet). Le contraste chaud/froid d'avant
     * est abandonné. Le tableau de bord (showcase) reste plus orné, mais
     * sur la même lumière stellaire.
     */
    --rail-bg: #030208;
    --rail-surface: rgba(6, 5, 10, 0.95);
    --rail-surface-mobile: rgba(13, 11, 18, 0.85);
    --rail-cyan: #4ecdc4;
    --rail-violet: #7c4dff;
    --rail-ink: #f2fbf8;

    --showcase-bg: #08070f;
    --showcase-panel: #0c0b18;
    --showcase-ink: #eef0ff;
    --showcase-ink-warm: #cfd2ff;
    --showcase-ink-gold: #d4d8ff;

    /*
     * ── Matière Éther ──
     * Nébuleuse + poussière d'étoiles. Branchées sur body / data-ui, pas
     * recopiées dans les CSS de page.
     */
    --ether-stars:
        radial-gradient(1px 1px at 20% 30%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 70% 15%, rgba(255, 255, 255, 0.35), transparent),
        radial-gradient(1.5px 1.5px at 45% 65%, rgba(200, 220, 255, 0.4), transparent),
        radial-gradient(1px 1px at 85% 55%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1px 1px at 12% 80%, rgba(255, 255, 255, 0.25), transparent);
    --ether-nebula:
        radial-gradient(circle at 15% 12%, rgba(120, 90, 255, 0.24), transparent 45%),
        radial-gradient(circle at 82% 8%, rgba(60, 190, 220, 0.16), transparent 42%),
        radial-gradient(circle at 60% 95%, rgba(180, 80, 220, 0.14), transparent 45%);
    --ether-glow: rgba(120, 130, 255, 0.28);

    /*
     * ── Sceau de cire ──
     * La pastille de quantité, signature visuelle du projet. Le dégradé était
     * recopié à l'identique dans cinq fichiers, à deux angles près.
     */
    /* Pastille de quantité : verre froid, plus de cire chaude. */
    --seal-wax: #2a2860;
    --seal-gradient: radial-gradient(circle at 32% 28%, rgba(220, 225, 255, 0.55), #2a2860 72%);

    /* ── Champs de saisie ── */
    --input-bg: rgba(4, 3, 14, 0.45);
    --focus-ring: 0 0 0 3px rgba(160, 170, 255, 0.35);

    /* ── Rayons ── */
    --radius: 8px;
    --radius-sm: 6px;
    /* Palier intermédiaire : le studio l'improvisait en 10px et 12px. */
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-card: 4px;
    /* Coin d’une carte physique — l’illustration, pas un cadre de site. */
    --radius-card-art: 12px;
    --radius-pill: 999px;
    /* Signature asymétrique « Sceau » — tokenisée */
    --radius-seal: 999px 8px 999px 12px;

    /* ── Ombres ── */
    --shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
    --shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.5);
    --shadow-card:
        0 0 0 1px rgba(180, 190, 255, 0.18),
        0 14px 30px rgba(0, 0, 0, 0.6),
        0 0 34px rgba(120, 130, 255, 0.14);
    --shadow-modal:
        0 0 0 1px rgba(180, 190, 255, 0.16),
        0 20px 50px rgba(0, 0, 0, 0.7),
        0 0 40px rgba(120, 130, 255, 0.12);

    /* ── Layout ── */
    --sidebar-width: 256px;
    --sidebar-width-collapsed: 72px;
    --max-width: 1400px;

    /*
     * ── Couches ──
     * Échelle nommée par rôle. Les empilements locaux (z-index 1 à 3 dans une
     * tuile ou un panneau) restent en dur : ils ne concernent que leur parent.
     * Ces tokens-là arbitrent ce qui passe devant quoi à l'échelle de la page.
     */
    --z-dropdown: 60;    /* autocomplétion dans le flux de page */
    --z-sticky: 100;     /* barre d'actions mobile */
    --z-backdrop: 150;   /* voile derrière la navigation mobile */
    --z-sidebar: 200;    /* navigation */
    --z-modal: 1400;     /* modales et panneaux plein écran */
    --z-popover: 1600;   /* popover ancrée par-dessus une modale */
    --z-toast: 1800;     /* notifications : au-dessus même d'une modale */
    --z-preview: 10000;  /* aperçu de carte au survol, au-dessus de tout */

    /* ── Transitions ── */
    --t-fast: 0.15s;
    --t-mid: 0.22s;

    /* Registre par défaut : sobre. body[data-ui] écrase ces valeurs. */
    --panel-bg: var(--surface);
    --panel-border: var(--border);
    --panel-radius: var(--radius);
    --panel-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
    --panel-flourish: none;
    --glow-strength: 0.5;
    --foil-animation: none;
    --foil-opacity: 0.35;
}

/*
 * Breakpoints du projet (les media queries n'acceptent pas les var()) :
 *   640px  → mobile
 *   900px  → tablette
 * Toute autre valeur est une dérive : s'y ramener plutôt qu'en inventer une.
 */

* { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    line-height: var(--lh-normal);
}

body {
    background: var(--bg);
}

/*
 * Deux registres visuels explicites, pilotés par data-ui sur <body> :
 *   work     → pages de travail : nébuleuse plus calme, la place aux cartes
 *   showcase → tableau de bord : même lumière, plus d'ornement
 */

/*
 * Le registre ne pilote pas que la densité : il change la surface des panneaux,
 * la franchise des bordures, la présence des dorures et l'animation du foil.
 * Les composants lisent ces variables, ce qui rend data-ui visible à l'œil.
 */

body[data-ui="work"] {
    --ui-panel-pad: var(--space-4);
    --ui-gap: var(--space-2);
    --ui-row-pad-y: var(--space-2);
    --ui-row-pad-x: var(--space-3);

    --panel-bg: var(--surface);
    --panel-border: var(--border);
    --panel-radius: var(--radius);
    --panel-shadow: 0 1px 0 rgba(180, 190, 255, 0.08);
    --panel-flourish: none;
    --glow-strength: 0.85;
    --foil-animation: none;
    --foil-opacity: 0.35;

    background: var(--bg);
}

body[data-ui="showcase"] {
    --font-heading: var(--font-display);
    --ui-panel-pad: var(--space-5);
    --ui-gap: var(--space-4);
    --ui-row-pad-y: var(--space-3);
    --ui-row-pad-x: var(--space-4);

    --panel-bg: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
    --panel-border: var(--border-strong);
    --panel-radius: var(--radius-lg);
    --panel-shadow:
        0 18px 44px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(180, 190, 255, 0.08);
    --panel-flourish: block;
    --glow-strength: 1;
    --foil-animation: card-foil-shimmer 4s ease-in-out infinite;
    --foil-opacity: 1;

    background:
        var(--ether-stars),
        var(--ether-nebula),
        var(--bg);
}

/*
 * En registre travail, les ornements de la sidebar sont coupés net plutôt
 * qu'atténués : c'est ce qui distingue l'atelier du sanctuaire.
 */
body[data-ui="work"] .site-void-rift__pulse,
body[data-ui="work"] .site-void-rift__node {
    opacity: 0;
}

a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 {
    font-family: var(--font-heading);
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: var(--lh-tight);
}

body[data-ui="showcase"] h1,
body[data-ui="showcase"] h2,
body[data-ui="showcase"] h3 {
    font-weight: 700;
    letter-spacing: 0.02em;
}

code {
    background: var(--surface-raised);
    padding: 0.1em 0.35em;
    border-radius: var(--radius-card);
    font-size: 0.9em;
}

/* ── Accessibilité globale ── */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--gold-bright);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

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