*, *::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%);
  /* Fond plus foncé que --accent : blanc dessus 5,01:1 (le rose seul donne 3,9:1). */
  background: var(--app-accent-fill, #C43D63);
  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);

  /* ══ Nuit & Jour (2026-10) — jetons séparés fond / texte ═══════════
     Un même jeton ne sert plus à la fois de fond et de texte :
     --rose-fill / --gold-fill = fonds de CTA, --rose-ink / --gold-ink = texte.
     Les landings (index, pro) n'utilisent que ces jetons ; --accent et --gold
     restent intacts pour l'app. */
  --brand-rose:  #E0527A;   /* marque : logo « rrr », anneaux, glows */
  --rose-fill:   #C43D63;   /* fond CTA participant — blanc dessus 5,01:1 */
  --rose-ink:    #EE7A97;   /* texte rose : liens, eyebrows */
  --on-rose:     #FFFFFF;
  --gold-fill:   #F8BF45;   /* fond CTA organisateur */
  --gold-ink:    #F8BF45;   /* texte or */
  --on-gold:     #09090E;
  --line-strong: rgba(237,233,246,.38);  /* bord des champs : ≥ 3:1 sur --surface2 (3,15), --surface et --bg */
  --display-accent:      #E0527A;  /* mot émotionnel de l'affiche (index) */
  --display-accent-gold: #F8BF45;  /* mot émotionnel de l'affiche (pro) */
  --nav-bg:   rgba(22,22,44,.86);
  --nav-text: #EDE9F6;
  --nav-line: rgba(237,233,246,.12);
  --shadow-card:     0 0 0 1px rgba(237,233,246,.06);
  --shadow-cta:      0 8px 28px rgba(224,82,122,.28);
  --shadow-cta-gold: 0 8px 28px rgba(248,191,69,.22);
  --hero-wash:      radial-gradient(120% 70% at 50% -10%, rgba(224,82,122,.30), rgba(224,82,122,0) 60%);
  --hero-wash-gold: radial-gradient(120% 70% at 50% -10%, rgba(248,191,69,.24), rgba(248,191,69,0) 60%);
  --section-alt: #08080C;
  --scrim:       rgba(4,3,8,.72);    /* voile derrière menus et modales */
  --nav-bg-solid: #16162C;           /* pilule de nav une fois la page défilée */
  /* Héros plein cadre : aurore profonde + projecteur (index) / or (pro) */
  --hero-aurora: radial-gradient(120% 55% at 50% -12%, rgba(224,82,122,.34), rgba(224,82,122,0) 60%),
                 radial-gradient(60% 45% at 8% 22%, #3A1F72, rgba(58,31,114,0) 70%),
                 radial-gradient(55% 45% at 94% 18%, #5C1F38, rgba(92,31,56,0) 70%),
                 radial-gradient(65% 50% at 84% 80%, #0F3A5E, rgba(15,58,94,0) 72%),
                 radial-gradient(60% 45% at 12% 88%, #4D3311, rgba(77,51,17,0) 72%),
                 #09090E;
  --hero-aurora-gold: radial-gradient(120% 55% at 50% -12%, rgba(248,191,69,.28), rgba(248,191,69,0) 60%),
                 radial-gradient(60% 45% at 8% 22%, #4D3311, rgba(77,51,17,0) 70%),
                 radial-gradient(55% 45% at 94% 18%, #3A1F72, rgba(58,31,114,0) 70%),
                 radial-gradient(65% 50% at 84% 80%, #0F3A5E, rgba(15,58,94,0) 72%),
                 radial-gradient(60% 45% at 12% 88%, #5C1F38, rgba(92,31,56,0) 72%),
                 #09090E;
  /* Écrans de téléphone (héros, bandeau) : SOMBRES dans les deux thèmes — jamais redéfinis en Jour */
  --screen-bg:       #0E0E18;
  --screen-surface:  #1D1D38;
  --screen-surface2: #2A2A50;
  --screen-text:     #EDE9F6;
  --screen-text2:    #ABA3C2;
  --screen-line:     rgba(237,233,246,.14);
  --screen-rose:     #EE7A97;
  --screen-teal:     #2DD4BF;
  --screen-green:    #34D399;
  --screen-gold:     #F8BF45;
  --screen-violet:   #A78BFA;
  --screen-lavender: #C4B5FD;
  --screen-orange:   #FB923C;
  --screen-blue:     #60A5FA;
  --shadow-float:    0 18px 40px -18px rgba(9,9,14,.55);
  --screen-wash:      radial-gradient(95% 50% at 10% 0%, rgba(224,82,122,.42), rgba(224,82,122,0) 70%),
                      radial-gradient(95% 55% at 100% 100%, rgba(124,58,237,.46), rgba(124,58,237,0) 70%), #0E0E18;
  --screen-wash-gold: radial-gradient(95% 50% at 10% 0%, rgba(248,191,69,.30), rgba(248,191,69,0) 70%),
                      radial-gradient(95% 55% at 100% 100%, rgba(124,58,237,.42), rgba(124,58,237,0) 70%), #0E0E18;
  --phone-body: #0B0B12;
  --phone-edge: rgba(237,233,246,.20);
  --grain: .028;
  /* Rayons : 12 px boutons/champs, 16 px cartes, 24 px médias, 999 px pilules */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 999px;
}

/* ══ Light mode tokens ════════════════════════════════════════════ */
[data-theme="light"] {
  /* ── Backgrounds — papier, neutres teintés indigo (Nuit & Jour) ── */
  --bg:       #FAF9FC;
  --bg2:      #F1EFF6;
  --bg3:      #E9E6F0;
  --surface:  #FFFFFF;
  --surface2: #F1EFF6;
  --card:     #FFFFFF;

  /* ── Borders — encre indigo alpha ── */
  --border:  rgba(26,26,46,.08);
  --border2: rgba(26,26,46,.12);
  --border3: rgba(26,26,46,.20);

  /* ── 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);

  /* ── Nuit & Jour (2026-10) — jetons séparés fond / texte ── */
  --brand-rose:  #E0527A;   /* le logo garde son rose : 4,60:1 sur la nav #1A1A2E */
  --rose-fill:   #C43D63;   /* blanc dessus 5,01:1 */
  --rose-ink:    #A33252;   /* 6,39:1 sur #FAF9FC, 5,87:1 sur #F1EFF6 */
  --on-rose:     #FFFFFF;
  --gold-fill:   #F8BF45;   /* l'or reste or en fond de CTA */
  --gold-ink:    #805A00;   /* ≥ 4,5:1 sur #F1EFF6 (5,45) et sur --hero-wash-gold (4,73 au pire) ; #956A00 tombait à 4,24 et 3,68 */
  --on-gold:     #1A1A2E;   /* 10,18:1 sur #F8BF45 */
  --line-strong: #8C87A0;   /* bord des champs : 3,45:1 sur blanc */
  --display-accent:      #A33252;  /* ≥ 4,79:1 sur chaque couleur de --hero-wash */
  --display-accent-gold: #956A00;  /* ≥ 3,68:1 sur --hero-wash-gold (grand texte) */
  --nav-bg:   #1A1A2E;
  --nav-text: #FAF9FC;
  --nav-line: transparent;
  --shadow-card:     0 1px 10px rgba(26,26,46,.06), inset 0 0 0 1px #E6E2EE;
  --shadow-cta:      0 1px 30px rgba(26,26,46,.22);
  --shadow-cta-gold: 0 1px 30px rgba(26,26,46,.18);
  --hero-wash:      linear-gradient(150deg, #F7D0DC 0%, #E3DAFB 42%, #FBE6C0 100%);
  --hero-wash-gold: linear-gradient(150deg, #FBE6C0 0%, #EFE9FB 55%, #F7D9E2 100%);
  --section-alt: #F1EFF6;
  --scrim:       rgba(26,26,46,.45);
  --grain: 0;
  --nav-bg-solid: #1A1A2E;
  --shadow-float: 0 18px 40px -18px rgba(26,26,46,.22);
  --hero-aurora: radial-gradient(55% 42% at 10% 16%, #CDBBFF, rgba(205,187,255,0) 72%),
                 radial-gradient(50% 42% at 92% 12%, #FFB8A6, rgba(255,184,166,0) 72%),
                 radial-gradient(60% 46% at 86% 72%, #A9D7FF, rgba(169,215,255,0) 72%),
                 radial-gradient(55% 44% at 12% 82%, #FFD47E, rgba(255,212,126,0) 72%),
                 linear-gradient(160deg, #FBF4FF 0%, #FFF1EC 50%, #F2F8FF 100%);
  --hero-aurora-gold: radial-gradient(55% 42% at 10% 16%, #FFD47E, rgba(255,212,126,0) 72%),
                 radial-gradient(50% 42% at 92% 12%, #E8DEFF, rgba(232,222,255,0) 72%),
                 radial-gradient(60% 46% at 86% 72%, #CFE7FF, rgba(207,231,255,0) 72%),
                 radial-gradient(55% 44% at 12% 82%, #FFE2C7, rgba(255,226,199,0) 72%),
                 linear-gradient(160deg, #FFF8EC 0%, #FBF6FF 50%, #FFF5E8 100%);

  /* ── Jetons qui n'avaient pas de valeur Jour ── */
  --surface-glass:        rgba(255,255,255,.82);
  --surface-glass-border: rgba(26,26,46,.10);
  --gradient-rose:        linear-gradient(135deg, #C43D63, #A33252);
  --gradient-hero-text:   linear-gradient(135deg, #1A1A2E, #A33252);
  --accent-text:          #FFFFFF;  /* texte SUR --accent (sélection, bulles) : blanc sur #C43D63 = 5,01:1 */
  --shadow-rose:          0 8px 28px rgba(196,61,99,.18);
  --shadow-rose-sm:       0 4px 14px rgba(196,61,99,.14);
}

/* ── System preference: auto-apply light when no explicit theme ── */
@media (prefers-color-scheme: light) {
  [data-theme="system"] {
    --bg:       #FAF9FC;
    --bg2:      #F1EFF6;
    --bg3:      #E9E6F0;
    --surface:  #FFFFFF;
    --surface2: #F1EFF6;
    --card:     #FFFFFF;
    --border:  rgba(26,26,46,.08);
    --border2: rgba(26,26,46,.12);
    --border3: rgba(26,26,46,.20);
    --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);
    /* ── Nuit & Jour (2026-10) — jetons séparés fond / texte ── */
    --brand-rose:  #E0527A;   /* le logo garde son rose : 4,60:1 sur la nav #1A1A2E */
    --rose-fill:   #C43D63;   /* blanc dessus 5,01:1 */
    --rose-ink:    #A33252;   /* 6,39:1 sur #FAF9FC, 5,87:1 sur #F1EFF6 */
    --on-rose:     #FFFFFF;
    --gold-fill:   #F8BF45;   /* l'or reste or en fond de CTA */
    --gold-ink:    #805A00;   /* ≥ 4,5:1 sur #F1EFF6 (5,45) et sur --hero-wash-gold (4,73 au pire) ; #956A00 tombait à 4,24 et 3,68 */
    --on-gold:     #1A1A2E;   /* 10,18:1 sur #F8BF45 */
    --line-strong: #8C87A0;   /* bord des champs : 3,45:1 sur blanc */
    --display-accent:      #A33252;  /* ≥ 4,79:1 sur chaque couleur de --hero-wash */
    --display-accent-gold: #956A00;  /* ≥ 3,68:1 sur --hero-wash-gold (grand texte) */
    --nav-bg:   #1A1A2E;
    --nav-text: #FAF9FC;
    --nav-line: transparent;
    --shadow-card:     0 1px 10px rgba(26,26,46,.06), inset 0 0 0 1px #E6E2EE;
    --shadow-cta:      0 1px 30px rgba(26,26,46,.22);
    --shadow-cta-gold: 0 1px 30px rgba(26,26,46,.18);
    --hero-wash:      linear-gradient(150deg, #F7D0DC 0%, #E3DAFB 42%, #FBE6C0 100%);
    --hero-wash-gold: linear-gradient(150deg, #FBE6C0 0%, #EFE9FB 55%, #F7D9E2 100%);
    --section-alt: #F1EFF6;
    --scrim:       rgba(26,26,46,.45);
    --grain: 0;
    --nav-bg-solid: #1A1A2E;
    --shadow-float: 0 18px 40px -18px rgba(26,26,46,.22);
    --hero-aurora: radial-gradient(55% 42% at 10% 16%, #CDBBFF, rgba(205,187,255,0) 72%),
                   radial-gradient(50% 42% at 92% 12%, #FFB8A6, rgba(255,184,166,0) 72%),
                   radial-gradient(60% 46% at 86% 72%, #A9D7FF, rgba(169,215,255,0) 72%),
                   radial-gradient(55% 44% at 12% 82%, #FFD47E, rgba(255,212,126,0) 72%),
                   linear-gradient(160deg, #FBF4FF 0%, #FFF1EC 50%, #F2F8FF 100%);
    --hero-aurora-gold: radial-gradient(55% 42% at 10% 16%, #FFD47E, rgba(255,212,126,0) 72%),
                   radial-gradient(50% 42% at 92% 12%, #E8DEFF, rgba(232,222,255,0) 72%),
                   radial-gradient(60% 46% at 86% 72%, #CFE7FF, rgba(207,231,255,0) 72%),
                   radial-gradient(55% 44% at 12% 82%, #FFE2C7, rgba(255,226,199,0) 72%),
                   linear-gradient(160deg, #FFF8EC 0%, #FBF6FF 50%, #FFF5E8 100%);

    /* ── Jetons qui n'avaient pas de valeur Jour ── */
    --surface-glass:        rgba(255,255,255,.82);
    --surface-glass-border: rgba(26,26,46,.10);
    --gradient-rose:        linear-gradient(135deg, #C43D63, #A33252);
    --gradient-hero-text:   linear-gradient(135deg, #1A1A2E, #A33252);
    --accent-text:          #FFFFFF;  /* texte SUR --accent (sélection, bulles) : blanc sur #C43D63 = 5,01:1 */
    --shadow-rose:          0 8px 28px rgba(196,61,99,.18);
    --shadow-rose-sm:       0 4px 14px rgba(196,61,99,.14);
  }
}

/* ══ 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); }
}

/* ══ Mot-sticker des titres (19/10/2026) ═════════════════════════════════
   Remplace le mot d'accent en Playfair italique : pavé plein incliné, encre sombre,
   petite ombre dure. UNE seule règle pour tout le produit ; chaque page ou mode pose
   ses jetons (rose = participant, or = organisateur). Contraste de l'encre #09090E :
   5,3:1 sur #E0527A, 11:1 sur #F8BF45, 10:1 sur #34D399 (AA, y compris en thème Jour
   puisque le pavé garde sa couleur). Les accueils www et pro ont leur propre copie
   (index.css, pro.css) : mêmes jetons, mêmes valeurs. */
:where(:root) {
  --sticker-bg: #E0527A;
  --sticker-ink: #09090E;
  --sticker-shadow: rgba(0, 0, 0, .55);
  --sticker-tilt: -3deg;
}
:where([data-theme="light"]) { --sticker-shadow: rgba(26, 26, 46, .28); }
.app-poster em, .kprem-title em, .auth-title em, .adm-page-title em, .page-header h2 em, .vw-poster em,
#dl-h1 em, #dl-install-h em, #dl-stores-h em, #dl-desk-h em,
.spp-h1 em, .spp-h2 em, .sec-hero h1 .acc, .ag-hero h1 span, .pt-hero h1 em, .klr-sticker {
  display: inline-block; max-width: 100%;
  margin: .12em .04em .06em; padding: .11em .14em .02em; border-radius: .1em;
  background: var(--sticker-bg); box-shadow: .05em .07em 0 var(--sticker-shadow);
  rotate: var(--sticker-tilt);
  font: inherit; font-style: normal; line-height: 1; text-transform: inherit; letter-spacing: inherit;
  overflow-wrap: anywhere;   /* garde-fou : un mot géant ne déborde jamais de l'écran */
  color: var(--sticker-ink); -webkit-text-fill-color: currentColor;
}
/* Côté organisateur : pavé or */
.adm-page-title, .page-header h2, .auth-gold, .kprem-title, .pt-hero h1 { --sticker-bg: #F8BF45; }
/* Safe Place : accent « sécurité » (vert) pour tout l'écran */
.s-safe-title, .klr-sticker--safe { --sticker-bg: #34D399; }
.klr-sticker--gold { --sticker-bg: #F8BF45; }