/* =====================================================================
   Pokerium — main.css (rénové)
   - Design system (variables fixes)
   - Composants
   - 10 blocs [data-theme="..."] (5 univers × light/dark)
   ===================================================================== */

/* ---------- 1. Reset léger ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

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

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    background: var(--bg-primary);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transition:
        background-color var(--transition-normal),
        color var(--transition-normal);
}

img, svg, video { display: block; max-width: 100%; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

input, textarea, select { font: inherit; color: inherit; }

::selection { background: rgba(var(--color-primary-rgb), 0.25); color: var(--text-primary); }


/* ---------- 2. :root — variables fixes ---------- */
:root {
    /* Type stacks */
    --font-sans: "Inter Tight", Inter, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", ui-monospace,
                 Consolas, Monaco, monospace;
    --font-display: var(--font-sans);

    /* Type scale */
    --text-xs:   12px;
    --text-sm:   14px;
    --text-base: 16px;
    --text-lg:   18px;
    --text-xl:   20px;
    --text-2xl:  24px;
    --text-3xl:  32px;
    --text-4xl:  40px;
    --text-5xl:  56px;
    --text-6xl:  64px;
    --text-7xl:  80px;

    /* Line-heights */
    --leading-none:    1;
    --leading-tight:   1.15;
    --leading-snug:    1.3;
    --leading-normal:  1.55;
    --leading-relaxed: 1.7;

    /* Weights */
    --font-light:    300;
    --font-normal:   400;
    --font-regular:  400;
    --font-medium:   500;
    --font-semibold: 600;
    --font-bold:     700;

    /* Tracking */
    --tracking-tightest: -0.035em;
    --tracking-tight:    -0.02em;
    --tracking-normal:   0;
    --tracking-wide:     0.02em;
    --tracking-wider:    0.05em;
    --tracking-widest:   0.14em;

    /* Spacing (4px base) */
    --space-1:  4px;   --space-2:  8px;   --space-3:  12px; --space-4:  16px;
    --space-5:  20px;  --space-6:  24px;  --space-8:  32px; --space-10: 40px;
    --space-12: 48px;  --space-16: 64px;  --space-18: 72px; --space-20: 80px;
    --space-22: 90px;

    /* Radii — un peu plus serrés qu'avant pour un look moins arrondi */
    --radius-sm:   3px;
    --radius-md:   6px;
    --radius-lg:   10px;
    --radius-xl:   14px;
    --radius-2xl:  20px;
    --radius-full: 9999px;

    /* Shadows neutres (light par défaut — surchargées en dark) */
    --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.06), 0 6px 12px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.18);

    /* Transitions */
    --transition-fast:   0.12s ease;
    --transition-normal: 0.2s ease;
    --transition-cubic:  0.28s cubic-bezier(0.34, 0, 0.12, 1);

    /* Statuts (fixes — peuvent être ajustés par thème) */
    --color-success:     #1FA84B; --color-success-rgb: 31, 168, 75;
    --color-info:        #2D7FF9; --color-info-rgb:    45, 127, 249;
    --color-warning:     #E5A100; --color-warning-rgb: 229, 161, 0;
    --color-error:       #DC3545; --color-error-rgb:   220, 53, 69;

    --color-correct:   var(--color-success);
    --color-incorrect: var(--color-error);
    --color-partial:   var(--color-warning);

    /* Card suits (--suit-spade/heart/diamond/club) come from the active range
       theme — they are emitted into :root by config/themes/*.yaml via
       generate_themes.py (see app/services/range_theme.py). Tools should
       consume var(--suit-*) through the .suit-* utility classes, NOT hardcode
       hexes. To change the 4-color deck, edit the YAML files and re-run
       `python scripts/generate_themes.py`. */

    /* Brand mark (logo "P" en navbar) — fond et texte suivent le thème.
       Seul l'anneau intérieur garde sa propre teinte (override en light). */
    --brand-mark-bg:         var(--bg-primary);
    --brand-mark-ring-inner: #1B3A54;
    --brand-mark-text:       var(--text-primary);

    /* Layout */
    --container-narrow: 800px;
    --container-base:   1200px;
    --container-wide:   1440px;
    --navbar-h: 64px;

    /* ---- Legacy palette (raw color tokens, theme-independent) ----
       Conservée pour la compatibilité avec les CSS d'outils
       (range-editor, equity-calculator, solver, hand-replayer, etc.) */
    --md-white:        #FFFFFF;
    --md-snow:         #F8F8F7;
    --md-dark-snow:    #ECE5DD;
    --md-sand:         #F4EFEA;
    --md-sand-grey:    #ECE6DF;
    --md-dark-sand:    #E1D6CB;
    --md-lighter-grey: #D7D7D7;
    --md-light-grey:   #C0C0C0;
    --md-grey:         #A1A1A1;
    --md-dark-grey:    #818181;
    --md-black:        #383838;
    --md-deep-black:   #000000;
    --md-sky:          #6FC2FF;     --md-sky-rgb:        111, 194, 255;
    --md-sky-light:    #97D4FF;
    --md-sky-dark:     #2BA5FF;     --md-sky-dark-rgb:   43, 165, 255;
    --md-garden:       #16AA98;     --md-garden-rgb:     22, 170, 152;
    --md-garden-light: #50C7B7;
    --md-garden-dark:  #068475;
    --md-sun:          #FFDE00;     --md-sun-rgb:        255, 222, 0;
    --md-sun-light:    #F9EE3E;
    --md-watermelon:      #FF7169;  --md-watermelon-rgb:      255, 113, 105;
    --md-watermelon-light:#FF9A94;
    --md-watermelon-dark: #E23F35;  --md-watermelon-dark-rgb: 226, 63, 53;
    --md-duck:         #FF9538;     --md-duck-rgb:       255, 149, 56;

    /* Tailwind-ish gray scale (legacy, used by a few tool CSS) */
    --gray-50:  #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;
    --gray-950: #030712;

    --border-light: #EBEDF0; /* legacy alias */
    --pk-font-mono: var(--font-mono); /* legacy alias used by tool CSS */
}

/* Brand mark — anneau plus clair en mode light (pendant inversé du #1B3A54). */
[data-color-scheme="light"] {
    --brand-mark-ring-inner: #B8D4EA;
}


/* =====================================================================
   3. THÈMES — 10 blocs [data-theme="..."]
   Univers : pokerium · felt · ocean · sunset · midnight  (chacun light/dark)
   ===================================================================== */

/* ---------- POKERIUM (signature) ---------- */
/* Light : graphite chaud sur lin, accent crimson */
[data-theme="pokerium-light"] {
    --bg-primary:    #F7F4EE;
    --bg-secondary:  #F1ECE3;
    --bg-tertiary:   #EAE2D3;
    --bg-navbar:     rgba(247, 244, 238, 0.85);
    --bg-footer:     #1A1714;
    --bg-card:       #FFFFFF;
    --bg-input:      #FFFFFF;

    --text-primary:   #1A1714;
    --text-secondary: #4A443D;
    --text-muted:     #7A7066;
    --text-faint:     #A89F94;
    --text-inverse:   #F7F4EE;

    --color-primary:       #C8332E;
    --color-primary-hover: #A52520;
    --color-primary-rgb:   200, 51, 46;

    --border-color:       #DDD3C2;
    --border-color-hover: #C8332E;
    --border-subtle:      #E8DFCE;
    --border-input:       #C8BEA9;
    --border-input-focus: #C8332E;

    --shadow-focus-accent: 0 0 0 3px rgba(var(--color-primary-rgb), 0.18);
    --shadow-focus-error:  0 0 0 3px rgba(var(--color-error-rgb), 0.18);
}
/* Dark : graphite très sombre + crimson légèrement plus chaud */
[data-theme="pokerium-dark"] {
    --bg-primary:    #14110F;
    --bg-secondary:  #1C1916;
    --bg-tertiary:   #25201B;
    --bg-navbar:     rgba(20, 17, 15, 0.82);
    --bg-footer:     #0B0908;
    --bg-card:       #1C1916;
    --bg-input:      #25201B;

    --text-primary:   #F2EDE4;
    --text-secondary: #C4BCAE;
    --text-muted:     #8B8275;
    --text-faint:     #5C544A;
    --text-inverse:   #14110F;

    --color-primary:       #E84E48;
    --color-primary-hover: #FF6962;
    --color-primary-rgb:   232, 78, 72;

    --border-color:       #2E2924;
    --border-color-hover: #E84E48;
    --border-subtle:      #221E1A;
    --border-input:       #3A332D;
    --border-input-focus: #E84E48;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 24px 48px -8px rgba(0, 0, 0, 0.6);

    --shadow-focus-accent: 0 0 0 3px rgba(var(--color-primary-rgb), 0.32);
    --shadow-focus-error:  0 0 0 3px rgba(var(--color-error-rgb), 0.32);
}

/* ---------- FELT (old-school table) ---------- */
[data-theme="felt-light"] {
    --bg-primary:    #F4F1EA;
    --bg-secondary:  #EBE6DA;
    --bg-tertiary:   #DDE5D6;
    --bg-navbar:     rgba(244, 241, 234, 0.88);
    --bg-footer:     #11241B;
    --bg-card:       #FFFFFF;
    --bg-input:      #FFFFFF;

    --text-primary:   #1A2B22;
    --text-secondary: #3D5246;
    --text-muted:     #6B7A70;
    --text-faint:     #9DA89E;
    --text-inverse:   #F4F1EA;

    --color-primary:       #1F6B4A;
    --color-primary-hover: #154E36;
    --color-primary-rgb:   31, 107, 74;

    --border-color:       #D5D0C2;
    --border-color-hover: #1F6B4A;
    --border-subtle:      #E1DCCE;
    --border-input:       #BFB9A8;
    --border-input-focus: #1F6B4A;

    --shadow-focus-accent: 0 0 0 3px rgba(var(--color-primary-rgb), 0.2);
    --shadow-focus-error:  0 0 0 3px rgba(var(--color-error-rgb), 0.18);
}
[data-theme="felt-dark"] {
    --bg-primary:    #0E1F18;
    --bg-secondary:  #142B22;
    --bg-tertiary:   #1B362A;
    --bg-navbar:     rgba(14, 31, 24, 0.85);
    --bg-footer:     #060F0B;
    --bg-card:       #142B22;
    --bg-input:      #1B362A;

    --text-primary:   #ECEFE6;
    --text-secondary: #B7C4B5;
    --text-muted:     #7E8F82;
    --text-faint:     #4F5E55;
    --text-inverse:   #0E1F18;

    --color-primary:       #C9A24A;       /* laiton sur feutre */
    --color-primary-hover: #DDB55E;
    --color-primary-rgb:   201, 162, 74;

    --border-color:       #234234;
    --border-color-hover: #C9A24A;
    --border-subtle:      #1A3327;
    --border-input:       #2C4F3E;
    --border-input-focus: #C9A24A;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
    --shadow-xl: 0 24px 48px -8px rgba(0, 0, 0, 0.65);

    --shadow-focus-accent: 0 0 0 3px rgba(var(--color-primary-rgb), 0.32);
    --shadow-focus-error:  0 0 0 3px rgba(var(--color-error-rgb), 0.32);
}

/* ---------- OCEAN ---------- */
[data-theme="ocean-light"] {
    --bg-primary:    #F2F6FA;
    --bg-secondary:  #E7EEF5;
    --bg-tertiary:   #DCE7F1;
    --bg-navbar:     rgba(242, 246, 250, 0.88);
    --bg-footer:     #0B1E33;
    --bg-card:       #FFFFFF;
    --bg-input:      #FFFFFF;

    --text-primary:   #0B1E33;
    --text-secondary: #2F4865;
    --text-muted:     #6A7F94;
    --text-faint:     #A0B0C2;
    --text-inverse:   #F2F6FA;

    --color-primary:       #0E6BA8;
    --color-primary-hover: #084E80;
    --color-primary-rgb:   14, 107, 168;

    --border-color:       #CFD9E5;
    --border-color-hover: #0E6BA8;
    --border-subtle:      #DDE5EE;
    --border-input:       #B6C3D2;
    --border-input-focus: #0E6BA8;

    --shadow-focus-accent: 0 0 0 3px rgba(var(--color-primary-rgb), 0.2);
    --shadow-focus-error:  0 0 0 3px rgba(var(--color-error-rgb), 0.18);
}
[data-theme="ocean-dark"] {
    --bg-primary:    #0A1626;
    --bg-secondary:  #0F1F35;
    --bg-tertiary:   #142A47;
    --bg-navbar:     rgba(10, 22, 38, 0.84);
    --bg-footer:     #050D17;
    --bg-card:       #0F1F35;
    --bg-input:      #142A47;

    --text-primary:   #E6EDF7;
    --text-secondary: #A6B8D1;
    --text-muted:     #6E82A0;
    --text-faint:     #455774;
    --text-inverse:   #0A1626;

    --color-primary:       #38BDF8;
    --color-primary-hover: #67D0FB;
    --color-primary-rgb:   56, 189, 248;

    --border-color:       #1D3457;
    --border-color-hover: #38BDF8;
    --border-subtle:      #15263F;
    --border-input:       #243F66;
    --border-input-focus: #38BDF8;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
    --shadow-xl: 0 24px 48px -8px rgba(0, 0, 0, 0.65);

    --shadow-focus-accent: 0 0 0 3px rgba(var(--color-primary-rgb), 0.32);
    --shadow-focus-error:  0 0 0 3px rgba(var(--color-error-rgb), 0.32);
}

/* ---------- SUNSET (chaleureux) ---------- */
[data-theme="sunset-light"] {
    --bg-primary:    #FFF8F1;
    --bg-secondary:  #FBEFE0;
    --bg-tertiary:   #F8E2C9;
    --bg-navbar:     rgba(255, 248, 241, 0.88);
    --bg-footer:     #2A1A0E;
    --bg-card:       #FFFFFF;
    --bg-input:      #FFFFFF;

    --text-primary:   #2A1A0E;
    --text-secondary: #5A4332;
    --text-muted:     #8A7666;
    --text-faint:     #B8A898;
    --text-inverse:   #FFF8F1;

    --color-primary:       #D86B2C;
    --color-primary-hover: #B7521A;
    --color-primary-rgb:   216, 107, 44;

    --border-color:       #E8D7BF;
    --border-color-hover: #D86B2C;
    --border-subtle:      #EFE2CD;
    --border-input:       #D4BFA1;
    --border-input-focus: #D86B2C;

    --shadow-focus-accent: 0 0 0 3px rgba(var(--color-primary-rgb), 0.2);
    --shadow-focus-error:  0 0 0 3px rgba(var(--color-error-rgb), 0.18);
}
[data-theme="sunset-dark"] {
    --bg-primary:    #1B1310;
    --bg-secondary:  #251915;
    --bg-tertiary:   #30201A;
    --bg-navbar:     rgba(27, 19, 16, 0.85);
    --bg-footer:     #0F0907;
    --bg-card:       #251915;
    --bg-input:      #30201A;

    --text-primary:   #FAEEDE;
    --text-secondary: #D2BFA9;
    --text-muted:     #968372;
    --text-faint:     #5E5044;
    --text-inverse:   #1B1310;

    --color-primary:       #F39C5C;
    --color-primary-hover: #FFB179;
    --color-primary-rgb:   243, 156, 92;

    --border-color:       #3A2A22;
    --border-color-hover: #F39C5C;
    --border-subtle:      #2B1E18;
    --border-input:       #47332A;
    --border-input-focus: #F39C5C;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
    --shadow-xl: 0 24px 48px -8px rgba(0, 0, 0, 0.65);

    --shadow-focus-accent: 0 0 0 3px rgba(var(--color-primary-rgb), 0.32);
    --shadow-focus-error:  0 0 0 3px rgba(var(--color-error-rgb), 0.32);
}

/* ---------- MIDNIGHT (luxe noir/or) ---------- */
[data-theme="midnight-light"] {
    --bg-primary:    #FAF8F2;
    --bg-secondary:  #F2EEE2;
    --bg-tertiary:   #E8E1CC;
    --bg-navbar:     rgba(250, 248, 242, 0.88);
    --bg-footer:     #0E0B05;
    --bg-card:       #FFFFFF;
    --bg-input:      #FFFFFF;

    --text-primary:   #14110A;
    --text-secondary: #4A412C;
    --text-muted:     #7E7559;
    --text-faint:     #A89E80;
    --text-inverse:   #FAF8F2;

    --color-primary:       #8C6A1A;
    --color-primary-hover: #6E5111;
    --color-primary-rgb:   140, 106, 26;

    --border-color:       #D9D1B8;
    --border-color-hover: #8C6A1A;
    --border-subtle:      #E5DFC8;
    --border-input:       #BFB59A;
    --border-input-focus: #8C6A1A;

    --shadow-focus-accent: 0 0 0 3px rgba(var(--color-primary-rgb), 0.2);
    --shadow-focus-error:  0 0 0 3px rgba(var(--color-error-rgb), 0.18);
}
[data-theme="midnight-dark"] {
    --bg-primary:    #0B0A07;
    --bg-secondary:  #131109;
    --bg-tertiary:   #1C190E;
    --bg-navbar:     rgba(11, 10, 7, 0.85);
    --bg-footer:     #050402;
    --bg-card:       #131109;
    --bg-input:      #1C190E;

    --text-primary:   #F5EFD8;
    --text-secondary: #C8BC92;
    --text-muted:     #8A815F;
    --text-faint:     #524B33;
    --text-inverse:   #0B0A07;

    --color-primary:       #D4AF37;       /* or */
    --color-primary-hover: #ECC759;
    --color-primary-rgb:   212, 175, 55;

    --border-color:       #2A2514;
    --border-color-hover: #D4AF37;
    --border-subtle:      #1A1709;
    --border-input:       #36301A;
    --border-input-focus: #D4AF37;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 24px 48px -8px rgba(0, 0, 0, 0.7);

    --shadow-focus-accent: 0 0 0 3px rgba(var(--color-primary-rgb), 0.32);
    --shadow-focus-error:  0 0 0 3px rgba(var(--color-error-rgb), 0.32);
}


/* =====================================================================
   4. ALIASES --pk-*  (un seul bloc — ils référencent les variables
      sémantiques du thème actif)
   ===================================================================== */
[data-theme] {
    --pk-background:        var(--bg-primary);
    --pk-container:         var(--bg-card);
    --pk-container-border:  var(--border-color);
    --pk-text-primary:      var(--text-primary);
    --pk-text-secondary:    var(--text-secondary);
    --pk-text-muted:        var(--text-muted);
    --pk-accent:            var(--color-primary);
    --pk-accent-hover:      var(--color-primary-hover);
    --pk-accent-rgb:        var(--color-primary-rgb);
    --pk-input-bg:          var(--bg-input);
    --pk-input-border:      var(--border-input);
    --pk-success:           var(--color-success);
    --pk-error:             var(--color-error);
    --pk-warning:           var(--color-warning);
    --pk-suit-spade:        var(--suit-spade);
    --pk-suit-heart:        var(--suit-heart);
    --pk-suit-diamond:      var(--suit-diamond);
    --pk-suit-club:         var(--suit-club);
}


/* =====================================================================
   5. TYPOGRAPHIE
   ===================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--text-primary);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    text-wrap: balance;
}

h1 {
    font-size: var(--text-4xl);
    letter-spacing: var(--tracking-tightest);
    font-weight: var(--font-bold);
}
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { color: var(--text-secondary); text-wrap: pretty; }

@media (min-width: 768px)  { h1 { font-size: var(--text-5xl); } h2 { font-size: var(--text-4xl); } }
@media (min-width: 1024px) { h1 { font-size: var(--text-6xl); } }
@media (min-width: 1440px) { h1 { font-size: var(--text-7xl); } }

/* Eyebrow — petit label mono UPPERCASE, conserve la signature */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: var(--text-muted);
    font-weight: var(--font-medium);
}
.eyebrow::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.18);
}

/* Section title — plus discret qu'avant, pas full UPPERCASE */
.section-title {
    font-size: var(--text-3xl);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--space-2);
}
@media (min-width: 768px) { .section-title { font-size: var(--text-4xl); } }

.section-lede {
    color: var(--text-secondary);
    font-size: var(--text-lg);
    max-width: 60ch;
    margin-bottom: var(--space-10);
}

/* Brand name (header/footer) — conserve mono UPPERCASE comme signature */
.brand-name {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    font-weight: var(--font-semibold);
    font-size: var(--text-base);
    color: var(--text-primary);
}


/* =====================================================================
   6. LAYOUT
   ===================================================================== */
.container,
.container-narrow,
.container-wide {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--space-5);
}
.container        { max-width: var(--container-base); }
.container-narrow { max-width: var(--container-narrow); }
.container-wide   { max-width: var(--container-wide); }

@media (min-width: 768px) {
    .container, .container-narrow, .container-wide { padding-inline: var(--space-8); }
}

.section {
    padding-block: var(--space-16);
}
.section.section-compact { padding-block: var(--space-10); }

@media (min-width: 1024px) {
    .section { padding-block: var(--space-20); }
}

/* Hero — composition plus moderne, pas de bg-tertiary par défaut */
.hero {
    position: relative;
    padding-block: var(--space-16) var(--space-12);
    border-bottom: 1px solid var(--border-subtle);
    overflow: hidden;
}
.hero.hero-compact { padding-block: var(--space-12) var(--space-8); }

@media (min-width: 1024px) {
    .hero { padding-block: var(--space-22) var(--space-16); }
}

.hero-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    max-width: 56rem;
}

.hero h1 {
    margin-top: var(--space-2);
}

.hero-lede {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    max-width: 50ch;
    line-height: var(--leading-relaxed);
}
@media (min-width: 768px) { .hero-lede { font-size: var(--text-xl); } }

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

/* Decorative chip stack in hero corner — signature poker mark */
.hero-chip-stack {
    position: absolute;
    right: -40px;
    top: 50%;
    transform: translateY(-50%);
    width: 280px;
    height: 280px;
    pointer-events: none;
    opacity: 0.55;
    display: none;
}
@media (min-width: 1024px) { .hero-chip-stack { display: block; } }


/* Section variantes "felt" — utiliser bg-tertiary explicitement */
.section-felt { background: var(--bg-tertiary); }
.section-secondary { background: var(--bg-secondary); }


/* =====================================================================
   7. BOUTONS
   ===================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 12px 20px;
    min-height: 44px;
    border-radius: var(--radius-lg);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-normal);
    line-height: 1;
    cursor: pointer;
    transition:
        background-color var(--transition-normal),
        color var(--transition-normal),
        border-color var(--transition-normal),
        transform var(--transition-fast),
        box-shadow var(--transition-normal);
    border: 1px solid transparent;
    white-space: nowrap;
    user-select: none;
}
.btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus-accent);
}
.btn:active { transform: translateY(1px); }

/* Default: filled — plus confiant que l'outline de l'ancien design */
.btn-primary {
    background: var(--text-primary);
    color: var(--text-inverse);
    border-color: var(--text-primary);
}
.btn-primary:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--text-inverse);
}

.btn-accent {
    background: var(--color-primary);
    color: var(--text-inverse);
    border-color: var(--color-primary);
}
.btn-accent:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.btn-secondary,
.btn-outline {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border-color);
}
.btn-secondary:hover,
.btn-outline:hover {
    border-color: var(--text-primary);
    background: var(--bg-secondary);
}

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border-color: transparent;
}
.btn-ghost:hover {
    color: var(--text-primary);
    background: var(--bg-secondary);
}

.btn-small  { padding: 8px 14px; min-height: 36px; font-size: var(--text-xs); border-radius: var(--radius-md); }
.btn-large  { padding: 16px 28px; min-height: 52px; font-size: var(--text-base); }
.btn-full   { width: 100%; }

.btn .icon { width: 18px; height: 18px; }


/* =====================================================================
   8. CARDS
   ===================================================================== */
.card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    transition:
        border-color var(--transition-normal),
        box-shadow var(--transition-normal),
        transform var(--transition-cubic);
}
/* Subtle interactive lift — kept but lighter */
.card.is-interactive,
a.card,
.card-link {
    cursor: pointer;
    display: block;
}
.card.is-interactive:hover,
a.card:hover,
.card-link:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-5);
}
@media (min-width: 1024px) {
    .card-grid { gap: var(--space-6); }
}

/* Tool card — flex column with chip-marked icon */
.tool-card,
a.tool-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
    min-height: 220px;
}
a.tool-card {
    color: var(--text-primary);
    text-decoration: none;
}
a.tool-card:hover { color: var(--text-primary); }
.tool-card .tool-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    color: var(--text-primary);
    flex-shrink: 0;
    transition: background-color var(--transition-normal), color var(--transition-normal);
}
.tool-card .tool-icon svg {
    width: 22px; height: 22px;
    stroke: currentColor;
    stroke-width: 1.75;
    fill: none;
}
.tool-card h3 {
    font-size: var(--text-xl);
    letter-spacing: var(--tracking-tight);
    margin-bottom: 0;
}
.tool-card p {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    flex: 1;
}
.tool-card .tool-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px dashed var(--border-color);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--text-muted);
}
.tool-card .tool-cta {
    color: var(--color-primary);
    font-weight: var(--font-medium);
    display: inline-flex; align-items: center; gap: 6px;
}
a.tool-card:hover .tool-icon { background: var(--color-primary); color: var(--text-inverse); }

/* Tool icon variants — surface tint by family */
.tool-icon--sky        { background: rgba(56, 189, 248, 0.12);  color: #0E6BA8; }
.tool-icon--garden     { background: rgba(31, 107, 74, 0.12);   color: #1F6B4A; }
.tool-icon--sun        { background: rgba(212, 175, 55, 0.16);  color: #8C6A1A; }
.tool-icon--watermelon { background: rgba(220, 53, 69, 0.12);   color: #C8332E; }
.tool-icon--duck       { background: rgba(216, 107, 44, 0.14);  color: #B7521A; }


/* =====================================================================
   9. NAVBAR / HEADER
   ===================================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg-navbar);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--border-subtle);
}
.nav {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    height: var(--navbar-h);
    position: relative;
}
.nav-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.brand-mark {
    border-radius: 50%;
    background: var(--brand-mark-bg);
    color: var(--brand-mark-text);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-mono);
    font-weight: var(--font-bold);
    box-shadow: inset 0 0 0 2px var(--brand-mark-ring-inner);
}
.nav-brand .brand-mark {
    width: 28px; height: 28px;
    font-size: 13px;
}

.nav-links {
    display: none;
    align-items: center;
    gap: var(--space-1);
    margin-left: var(--space-4);
    list-style: none;
    padding: 0;
}
@media (min-width: 1024px) { .nav-links { display: flex; } }

.nav-links a {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--text-secondary);
    padding: 8px 12px;
    border-radius: var(--radius-md);
    transition: color var(--transition-normal), background var(--transition-normal);
}
.nav-links a:hover { color: var(--text-primary); background: var(--bg-secondary); }
.nav-links a.is-active { color: var(--text-primary); background: var(--bg-secondary); }

/* Mobile dropdown when toggled by hamburger */
@media (max-width: 1023px) {
    .nav-links.open {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        position: absolute;
        top: calc(var(--navbar-h) - 4px);
        left: var(--space-4);
        right: var(--space-4);
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        padding: var(--space-3);
        gap: var(--space-1);
        box-shadow: var(--shadow-lg);
        z-index: 90;
        list-style: none;
    }
    .nav-links.open a {
        width: 100%;
        padding: var(--space-3) var(--space-4);
    }
}

.nav-spacer { flex: 1; }

.nav-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    list-style: none;
    padding: 0;
}

.icon-btn {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    border: 1px solid transparent;
    transition: all var(--transition-normal);
}
.icon-btn:hover { color: var(--text-primary); background: var(--bg-secondary); }
.icon-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus-accent); }
.icon-btn svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.75; fill: none; }

/* Quick scheme toggle — show sun in dark mode (action: switch to light), moon in light mode */
.scheme-toggle .icon-sun,
.scheme-toggle .icon-moon { display: none; }
[data-color-scheme="light"] .scheme-toggle .icon-moon { display: block; }
[data-color-scheme="dark"]  .scheme-toggle .icon-sun  { display: block; }

.social-link {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    transition: color var(--transition-normal), background var(--transition-normal);
}
.social-link:hover { background: var(--bg-secondary); }
.social-link--youtube:hover   { color: #FF0033; }
.social-link--discord:hover   { color: #5865F2; }
.social-link--instagram:hover { color: #E1306C; }
.social-link--github:hover    { color: var(--text-primary); }
.social-link svg { width: 20px; height: 20px; }

.nav-hamburger {
    display: none;
    width: 40px; height: 40px;
    align-items: center; justify-content: center;
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    transition: all var(--transition-normal);
}
.nav-hamburger:hover { color: var(--text-primary); background: var(--bg-secondary); }
.nav-hamburger svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; fill: none; transition: transform 0.2s ease; }
.nav-hamburger.open svg { transform: rotate(90deg); }
@media (max-width: 1023px) { .nav-hamburger { display: inline-flex; } }


/* User menu (logged-in state in navbar) */
.user-menu {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 4px 6px 4px 4px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    background: transparent;
    transition: border-color var(--transition-normal), background var(--transition-normal);
}
.user-menu:hover {
    border-color: var(--text-primary);
}
.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    flex-shrink: 0;
}
.user-avatar.brand-mark {
    background: var(--brand-mark-bg);
    color: var(--brand-mark-text);
    font-family: var(--font-mono);
    text-transform: none;
    box-shadow: inset 0 0 0 2px var(--brand-mark-ring-inner);
}
.user-name {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-account-link,
.user-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: var(--text-secondary);
    transition: background var(--transition-normal), color var(--transition-normal);
}
.user-account-link:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}
.user-logout:hover {
    background: rgba(var(--color-error-rgb), 0.12);
    color: var(--color-error);
}
.user-logout:focus-visible,
.user-account-link:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus-accent);
}
@media (max-width: 600px) {
    .user-name { display: none; }
}


/* =====================================================================
   10. FOOTER
   ===================================================================== */
.site-footer {
    background: var(--bg-footer);
    color: rgba(255, 255, 255, 0.78);
    padding-block: var(--space-16) var(--space-8);
    margin-top: var(--space-16);
}
.site-footer a { color: rgba(255, 255, 255, 0.78); transition: color var(--transition-normal); }
.site-footer a:hover { color: #fff; }

.footer-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-10);
    margin-bottom: var(--space-12);
}
@media (min-width: 768px)  { .footer-content { grid-template-columns: 2fr 1fr 1fr; gap: var(--space-12); } }
@media (min-width: 1024px) { .footer-content { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; } }

.footer-brand-name {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    font-weight: var(--font-semibold);
    font-size: var(--text-lg);
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.footer-brand-name::before {
    content: "";
    width: 8px; height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.25);
}
.footer-brand p {
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--text-sm);
    max-width: 36ch;
    margin-bottom: var(--space-5);
}
.footer-column h4 {
    color: #fff;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    margin-bottom: var(--space-4);
}
.footer-column ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-sm); }

.footer-social { display: flex; gap: var(--space-2); }
.footer-social .social-link { color: rgba(255, 255, 255, 0.6); }
.footer-social .social-link:hover { background: rgba(255, 255, 255, 0.06); }
.footer-social .social-link--youtube:hover   { color: #FF0033; }
.footer-social .social-link--discord:hover   { color: #5865F2; }
.footer-social .social-link--instagram:hover { color: #E1306C; }

.footer-bottom {
    padding-top: var(--space-6);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6);
    align-items: center; justify-content: space-between;
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}
.footer-legal { display: flex; gap: var(--space-5); flex-wrap: wrap; }


/* =====================================================================
   11. INPUTS / FORMS
   ===================================================================== */
.input,
input[type="text"].input,
input[type="email"].input,
input[type="password"].input {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    font-size: var(--text-base);
    color: var(--text-primary);
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
    min-height: 44px;
}
.input::placeholder { color: var(--text-faint); }
.input:hover { border-color: var(--text-muted); }
.input:focus {
    outline: none;
    border-color: var(--border-input-focus);
    box-shadow: var(--shadow-focus-accent);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.form-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--text-secondary);
    font-weight: var(--font-medium);
}
.form-hint {
    color: var(--text-muted);
    font-size: var(--text-xs);
}


/* =====================================================================
   12. ALERTS
   ===================================================================== */
.alert {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--bg-tertiary);
    border-left: 3px solid var(--color-primary);
    color: var(--text-primary);
    font-size: var(--text-sm);
}
.alert-info    { border-color: var(--color-info); }
.alert-success { border-color: var(--color-success); }
.alert-warning { border-color: var(--color-warning); }
.alert-error   { border-color: var(--color-error); }


/* =====================================================================
   13. SOCIAL BANNER (home)
   ===================================================================== */
.social-banner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding-block: var(--space-8);
    border-block: 1px solid var(--border-subtle);
    align-items: center;
    justify-content: center;
}
.social-banner-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-full);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    transition: all var(--transition-normal);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
}
.social-banner-link:hover {
    border-color: var(--color-primary);
    transform: translateY(-1px);
}
.social-banner-link--youtube:hover   { color: #FF0033; border-color: #FF0033; }
.social-banner-link--discord:hover   { color: #5865F2; border-color: #5865F2; }
.social-banner-link--instagram:hover { color: #E1306C; border-color: #E1306C; }
.social-banner-link svg { width: 18px; height: 18px; }
.social-banner-link .count {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}


/* =====================================================================
   14. AUTH (consomme les variables — une seule version)
   ===================================================================== */
.auth-container {
    min-height: calc(100vh - var(--navbar-h));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-5);
    background:
        radial-gradient(circle at 20% 0%, rgba(var(--color-primary-rgb), 0.06), transparent 50%),
        radial-gradient(circle at 80% 100%, rgba(var(--color-primary-rgb), 0.04), transparent 50%),
        var(--bg-primary);
}
.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    padding: var(--space-10) var(--space-8);
    box-shadow: var(--shadow-lg);
}
.auth-card--wide { max-width: 560px; }
.auth-header {
    text-align: center;
    margin-bottom: var(--space-8);
}
.auth-header .auth-mark {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--text-primary);
    color: var(--text-inverse);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-weight: var(--font-bold);
    margin-bottom: var(--space-4);
    box-shadow: inset 0 0 0 3px var(--bg-card), 0 0 0 1px var(--text-primary);
}
.auth-header h1 { font-size: var(--text-3xl); margin-bottom: var(--space-2); letter-spacing: var(--tracking-tight); }
.auth-header p { color: var(--text-muted); font-size: var(--text-sm); }
.auth-form { display: flex; flex-direction: column; gap: var(--space-4); }
.auth-footer { text-align: center; margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--border-subtle); font-size: var(--text-sm); color: var(--text-muted); }
.auth-footer a { color: var(--color-primary); font-weight: var(--font-medium); }


/* =====================================================================
   15. UTILITIES
   ===================================================================== */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); } .gap-4 { gap: var(--space-4); } .gap-8 { gap: var(--space-8); }
.mt-0 { margin-top: 0; } .mt-4 { margin-top: var(--space-4); } .mt-8 { margin-top: var(--space-8); }
.mb-0 { margin-bottom: 0; } .mb-4 { margin-bottom: var(--space-4); } .mb-8 { margin-bottom: var(--space-8); }
.hidden { display: none !important; }

/* Decorative chip — used as bullets, marks */
.chip-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.18);
    flex-shrink: 0;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}