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

/* ══ Hide reCAPTCHA v3 floating badge (shown inline in footer instead) ═══ */
.grecaptcha-badge { visibility: hidden !important; }

/* ══ Accessibility — skip link ═══════════════════════════════════ */
.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent, #E0527A);
  color: #fff;
  padding: .5rem 1.25rem;
  border-radius: 0 0 8px 8px;
  font-weight: 700;
  font-size: .85rem;
  z-index: 99999;
  text-decoration: none;
  transition: top .2s;
}
.skip-link:focus {
  top: 0;
}

/* ══ Screen-reader only ═══════════════════════════════════════════ */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

:root {
  /* ── Z-index scale ── */
  --z-header: 100;
  --z-overlay: 500;
  --z-modal: 1000;
  --z-drawer: 2000;
  --z-toast: 3000;
  --z-fab: 4000;
  --z-picker: 5000;
  --z-sheet: 6000;
  --z-fullscreen: 7000;
  --z-loader: 8000;
  --z-max: 9999;

  /* ══ Spacing scale — 4px grid ═══════════════════════════════════ */
  --sp-1:  0.25rem;   /*  4px */
  --sp-2:  0.5rem;    /*  8px */
  --sp-3:  0.75rem;   /* 12px */
  --sp-4:  1rem;      /* 16px */
  --sp-5:  1.25rem;   /* 20px */
  --sp-6:  1.5rem;    /* 24px */
  --sp-8:  2rem;      /* 32px */
  --sp-10: 2.5rem;    /* 40px */
  --sp-12: 3rem;      /* 48px */

  /* ══ Typography scale — 1.2 ratio ═══════════════════════════════ */
  --fs-xs:   0.75rem;   /* 12px  — fine print, timestamps (min floor) */
  --fs-sm:   0.8125rem; /* 13px  — captions, labels                   */
  --fs-base: 0.875rem;  /* ~12.2px — body text                      */
  --fs-md:   1rem;      /* 14px    — emphasized body                 */
  --fs-lg:   1.125rem;  /* ~15.8px — card titles, section headers   */
  --fs-xl:   1.35rem;   /* ~18.9px — page titles                    */
  --fs-2xl:  1.62rem;   /* ~22.7px — hero headings                  */

  /* ── Semantic title aliases (map to scale above) ── */
  --fs-card-title: var(--fs-lg);   /* 1.125rem — entity card titles */
  --fs-page-title: var(--fs-xl);   /* 1.35rem  — page-level titles  */
  --fs-section:    var(--fs-2xl);  /* 1.62rem  — section headings   */

  /* ══ Backgrounds ══════════════════════════════════════════════════ */
  --bg:       #09090E;
  --bg2:      #0E0E18;
  --bg3:      #121221;
  --surface:  #16162C;
  --surface2: #1D1D38;
  --surface-glass: rgba(22,22,44,0.7);
  --surface-glass-border: rgba(224,82,122,0.25);
  /* ── Glass blur tiers — use these, not ad-hoc blur() values ── */
  --glass-sm: saturate(1.4) blur(8px);   /* pills, chips, inline chrome */
  --glass-lg: saturate(1.5) blur(20px);  /* headers, tab bar, sheets    */
  --gradient-rose: linear-gradient(135deg, #E0527A, #BF3B63);
  --gradient-hero-text: linear-gradient(135deg, #EDE9F6 0%, #E0527A 100%);
  --card:     #16162C;

  /* ══ Borders — 3-tier opacity (boosted for OLED readability) ════ */
  --border:  rgba(255,255,255,0.09);
  --border2: rgba(255,255,255,0.13);
  --border3: rgba(255,255,255,0.20);

  /* ══ Brand — Accent ═════════════════════════════════════════════ */
  --accent:       #E0527A;
  --accent-dark:  #BF3B63;
  --accent-light: #EE7A97;
  --accent-glow:  rgba(224,82,122,0.16);
  --accent-text:  #ffffff;

  /* ══ Palette étendue ════════════════════════════════════════════ */
  --gold:    #F8BF45;
  --gold-light: #FCCF70;
  --lavender:#C4B5FD;
  --purple:  #A78BFA;
  --teal:    #2DD4BF;
  --green:   #34D399;
  --blue:    #60A5FA;
  --pink:    #F472B6;
  --orange:  #FB923C;

  /* ══ Couleurs sémantiques ═══════════════════════════════════════ */
  --success:        #34D399;
  --success-bg:     rgba(52,211,153,0.10);
  --success-border: rgba(52,211,153,0.20);
  --warning:        #F8BF45;
  --warning-bg:     rgba(248,191,69,0.10);
  --warning-border: rgba(248,191,69,0.20);
  --danger:         #F87171;
  --danger-bg:      rgba(248,113,113,0.10);
  --danger-border:  rgba(248,113,113,0.20);
  --info:           #60A5FA;
  --info-bg:        rgba(96,165,250,0.10);
  --info-border:    rgba(96,165,250,0.20);

  /* ══ Texte — Ivoire doux ════════════════════════════════════════ */
  --text:   #EDE9F6;
  --text2:  #ABA3C2;
  --muted:  #8A839E;
  --muted2: #ADA6C0;

  /* ══ Border-radius ══════════════════════════════════════════════ */
  --radius-sm:  6px;
  --radius:     10px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  20px;
  --radius-2xl: 28px;   /* hero cards, bottom sheets — softer, premium */
  --radius-pill: 40px;

  /* ══ Ombres ═════════════════════════════════════════════════════ */
  --shadow-sm:      0 1px 3px rgba(0,0,0,0.35);
  --shadow:         0 4px 16px rgba(0,0,0,0.50);
  --shadow-lg:      0 12px 40px rgba(0,0,0,0.65);
  --shadow-xl:      0 24px 64px rgba(0,0,0,0.75);
  --shadow-rose:    0 8px 32px rgba(224,82,122,0.35);
  --shadow-rose-sm: 0 4px 20px rgba(224,82,122,0.3);

  /* ══ Transitions ════════════════════════════════════════════════ */
  --ease:        cubic-bezier(0.4,0,0.2,1);       /* standard              */
  --ease-out:    cubic-bezier(0.22,1,0.36,1);     /* decelerate — enters   */
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);  /* overshoot — pressable */
  --t:      180ms var(--ease);
  --t-fast: 100ms var(--ease);
  --t-slow: 350ms var(--ease);
  /* NB: --spring (decelerate) is defined in klarrro-ux.css; use --ease-spring for overshoot */

  /* ══ Safe Area ══════════════════════════════════════════════════ */
  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left,   0px);
  --safe-right:  env(safe-area-inset-right,  0px);
}

/* ══ Light mode tokens ════════════════════════════════════════════ */
[data-theme="light"] {
  /* ── Backgrounds — warm ivory ── */
  --bg:       #FAF8F4;
  --bg2:      #F3F0EA;
  --bg3:      #EBE7DF;
  --surface:  #FFFFFF;
  --surface2: #F5F2EC;
  --card:     #FFFFFF;

  /* ── Borders — dark alpha ── */
  --border:  rgba(0,0,0,0.07);
  --border2: rgba(0,0,0,0.11);
  --border3: rgba(0,0,0,0.18);

  /* ── Text — warm dark ── */
  --text:   #1A1A2E;
  --text2:  #4A4660;
  --muted:  #6B6580;       /* was #7A7590 (4.15:1) → 5.21:1 on #FAF8F4 */
  --muted2: #6A6580;

  /* ── Brand — darkened for light bg contrast ── */
  --accent:       #C43D63;  /* was #E0527A (3.50:1) → 4.72:1 on #FAF8F4 */
  --accent-dark:  #A33252;  /* 6.31:1 */
  --accent-light: #BE4062;  /* was #EE7A97 (2.52:1) → 4.83:1 on #FAF8F4 */
  --accent-glow:  rgba(196,61,99,0.12);

  /* ── Secondary — gold darkened for readability ── */
  --gold:       #956A00;    /* was #F8BF45 (1.58:1) → 4.56:1 on #FAF8F4 */
  --gold-light: #B8860B;    /* hover state — 3.07:1 (AA large) */
  --gold-dark:  #7A5600;    /* 6.27:1 */

  /* ── Semantic — darkened for text contrast on light bg ── */
  --success:        #047857;  /* was #34D399 (1.92:1) → 5.17:1 */
  --success-bg:     rgba(4,120,87,0.08);
  --success-border: rgba(4,120,87,0.18);
  --warning:        #92400E;  /* was #F8BF45 (1.68:1) → 6.68:1 */
  --warning-bg:     rgba(146,64,14,0.08);
  --warning-border: rgba(146,64,14,0.18);
  --danger:         #B91C1C;  /* was #F87171 (2.77:1) → 6.10:1 */
  --danger-bg:      rgba(185,28,28,0.06);
  --danger-border:  rgba(185,28,28,0.16);
  --info:           #1D4ED8;  /* was #60A5FA (2.54:1) → 6.32:1 */
  --info-bg:        rgba(29,78,216,0.06);
  --info-border:    rgba(29,78,216,0.16);

  /* ── Extended palette — darkened for light bg ── */
  --lavender: #7C3AED;
  --purple:   #6D28D9;
  --teal:     #0D9488;
  --green:    #047857;
  --blue:     #1D4ED8;
  --pink:     #BE185D;
  --orange:   #C2410C;

  /* ── Shadows — softer for light ── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow:    0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.12);
  --shadow-xl: 0 24px 64px rgba(0,0,0,0.15);
}

/* ── System preference: auto-apply light when no explicit theme ── */
@media (prefers-color-scheme: light) {
  [data-theme="system"] {
    --bg:       #FAF8F4;
    --bg2:      #F3F0EA;
    --bg3:      #EBE7DF;
    --surface:  #FFFFFF;
    --surface2: #F5F2EC;
    --card:     #FFFFFF;
    --border:  rgba(0,0,0,0.07);
    --border2: rgba(0,0,0,0.11);
    --border3: rgba(0,0,0,0.18);
    --text:   #1A1A2E;
    --text2:  #4A4660;
    --muted:  #6B6580;
    --muted2: #6A6580;
    --accent:       #C43D63;
    --accent-dark:  #A33252;
    --accent-light: #BE4062;
    --accent-glow:  rgba(196,61,99,0.12);
    --gold:       #956A00;
    --gold-light: #B8860B;
    --gold-dark:  #7A5600;
    --success:        #047857;
    --success-bg:     rgba(4,120,87,0.08);
    --success-border: rgba(4,120,87,0.18);
    --warning:        #92400E;
    --warning-bg:     rgba(146,64,14,0.08);
    --warning-border: rgba(146,64,14,0.18);
    --danger:         #B91C1C;
    --danger-bg:      rgba(185,28,28,0.06);
    --danger-border:  rgba(185,28,28,0.16);
    --info:           #1D4ED8;
    --info-bg:        rgba(29,78,216,0.06);
    --info-border:    rgba(29,78,216,0.16);
    --lavender: #7C3AED;
    --purple:   #6D28D9;
    --teal:     #0D9488;
    --green:    #047857;
    --blue:     #1D4ED8;
    --pink:     #BE185D;
    --orange:   #C2410C;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow:    0 4px 16px rgba(0,0,0,0.10);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.12);
    --shadow-xl: 0 24px 64px rgba(0,0,0,0.15);
  }
}

/* ══ Global resets ════════════════════════════════════════════════ */
html {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  overscroll-behavior: none;
  overflow-x: hidden;
}
html[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: light) {
  html[data-theme="system"] { color-scheme: light; }
}

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  touch-action: manipulation;
}

.hidden { display: none !important; }

/* ── Focus-visible for accessibility ── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ══ Accessibility — reduced motion ══════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ══ Selection ═══════════════════════════════════════════════════ */
::selection {
  background: var(--accent);
  color: var(--accent-text);
}

/* ══ Pride Mode — shared variables & animations ═════════════════ */
.pride {
  --pride-r: #e40303;
  --pride-o: #ff8c00;
  --pride-y: #ffed00;
  --pride-g: #008026;
  --pride-b: #004dff;
  --pride-v: #750787;
  --pride-gradient: linear-gradient(90deg, var(--pride-r), var(--pride-o), var(--pride-y), var(--pride-g), var(--pride-b), var(--pride-v));
  --pride-gradient-loop: linear-gradient(90deg, var(--pride-r), var(--pride-o), var(--pride-y), var(--pride-g), var(--pride-b), var(--pride-v), var(--pride-r));
  /* Pride accent — lavande au lieu du rose, plus élégant */
  --accent: #A78BFA;
  --accent-dark: #7C3AED;
  --accent-glow: rgba(167,139,250,0.18);
  --lavender: #C4B5FD;
}

@keyframes prideShift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes prideShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes prideAmbient {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes pridePulse {
  0%, 100% { box-shadow: 0 0 30px rgba(228,3,3,.1), 0 0 60px rgba(117,7,135,.06); }
  33%      { box-shadow: 0 0 35px rgba(0,128,38,.12), 0 0 70px rgba(0,77,255,.08); }
  66%      { box-shadow: 0 0 32px rgba(255,140,0,.1), 0 0 65px rgba(255,237,0,.06); }
}