/*
 * ════════════════════════════════════════════════════════════════
 * AY-TOKENS.CSS — Source unique de vérité pour toutes les variables
 * Armand Yomi Theme v2.5.0
 *
 * RÈGLES D'ARCHITECTURE :
 *  1. Ce fichier est chargé EN PREMIER, avant style.css
 *  2. Toute couleur dans le thème DOIT utiliser une variable d'ici
 *  3. Jamais de rgba() hardcodée dans style.css ou les templates
 *  4. Le mode clair redéfinit uniquement les variables qui changent
 *  5. Les variables de layout (radius, spacing) ne changent PAS entre modes
 *
 * ORGANISATION :
 *  A. Palettes brutes (hex fixes — référence seulement)
 *  B. Variables sémantiques dark (défaut)
 *  C. Variables sémantiques light (overrides uniquement)
 *  D. Variables de layout & typographie (invariantes)
 *  E. Variables d'animation (invariantes)
 *  F. Variables glass (réglables par mode)
 * ════════════════════════════════════════════════════════════════
 */

/* ════════════════════════════════════════════════════════════════
   A. PALETTES BRUTES — référence, ne pas utiliser directement
   ════════════════════════════════════════════════════════════════ */
:root {
  /* Brand */
  --_gold:   #FBC926;
  --_blue:   #2785C4;
  --_navy:   #274B78;
  /* Neutres dark */
  --_ink-0:  #09111b;   /* le plus sombre */
  --_ink-1:  #0d1a27;
  --_ink-2:  #13243a;
  --_ink-3:  #162e47;
  --_ink-4:  #1d3a57;
  /* Neutres light */
  --_cream-0:#f5f2ed;   /* le plus clair */
  --_cream-1:#ece8e1;
  --_cream-2:#e2ddd6;
  --_cream-3:#d8d2c9;
  /* État */
  --_green:  #2ecc71;
  --_red:    #e74c3c;
}

/* ════════════════════════════════════════════════════════════════
   B. VARIABLES SÉMANTIQUES — DARK MODE (défaut)
   ════════════════════════════════════════════════════════════════ */
:root {

  /* ── Surfaces ─────────────────────────────────────────────── */
  --ay-bg:       var(--_ink-0);    /* fond page principal */
  --ay-black:    var(--_ink-0);    /* alias legacy */
  --ay-dark:     var(--_ink-1);    /* fond sections alternées */
  --ay-mid:      var(--_ink-2);    /* fond sections mid */
  --ay-card:     var(--_ink-3);    /* fond des cartes */
  --ay-card-2:   var(--_ink-4);    /* fond cartes hover/accent */

  /* ── Texte ────────────────────────────────────────────────── */
  --ay-white:    #f0f6fc;          /* texte principal */
  --ay-soft:     rgba(240,246,252,.65);   /* texte secondaire */
  --ay-muted:    rgba(240,246,252,.42);   /* texte tertiaire/labels */
  --ay-disabled: rgba(240,246,252,.25);   /* texte désactivé */

  /* Canaux RGB pour rgba() dynamiques */
  --ay-rgb-fg:   240,246,252;      /* canal texte principal */
  --ay-rgb-bg:   9,17,27;          /* canal fond principal */

  /* ── Bordures ─────────────────────────────────────────────── */
  --ay-border:   rgba(39,133,196,.15);
  --ay-border-h: rgba(39,133,196,.35);   /* hover */
  --ay-border-s: rgba(39,133,196,.06);   /* subtle */

  /* ── Brand colors (overridables par Customizer) ───────────── */
  --ay-gold:        #FBC926;
  --ay-gold-dark:   #d4a710;
  --ay-gold-dim:    rgba(251,201,38,.12);
  --ay-gold-glow:   rgba(251,201,38,.22);
  --ay-gold-border: #FCC94A;   /* gold éclairci 20% — bordures boutons */
  --ay-blue:      #2785C4;
  --ay-blue-dim:  rgba(39,133,196,.12);
  --ay-navy:      #274B78;

  /* ── États ────────────────────────────────────────────────── */
  --ay-success:     #2ecc71;
  --ay-success-dim: rgba(46,204,113,.12);
  --ay-error:       #e74c3c;
  --ay-error-dim:   rgba(231,76,60,.12);

  /* ── Ombres ───────────────────────────────────────────────── */
  --ay-shadow-xs:   0 1px 4px rgba(0,0,0,.3);
  --ay-shadow-sm:   0 4px 20px rgba(0,0,0,.4);
  --ay-shadow-md:   0 8px 36px rgba(0,0,0,.5);
  --ay-shadow-lg:   0 24px 64px rgba(0,0,0,.6);
  --ay-shadow-glow: 0 0 40px rgba(39,133,196,.18), 0 8px 36px rgba(0,0,0,.4);
  --ay-glow-gold:   0 0 24px rgba(251,201,38,.25);
  --ay-glow-blue:   0 0 24px rgba(39,133,196,.2);

  /* ── Transitions legacy (alias) ──────────────────────────── */
  --ay-transition:  cubic-bezier(.25,.46,.45,.94); /* alias de --ay-ease *for legacy CSS */

  /* ── Overlays (pour images, drawers) ─────────────────────── */
  --ay-overlay-sm: rgba(9,17,27,.6);
  --ay-overlay-md: rgba(9,17,27,.82);
  --ay-overlay-lg: rgba(9,17,27,.94);

  /* ── Glass (nav + tuiles) ─────────────────────────────────── */
  --ay-glass-blur:        14px;
  --ay-glass-saturate:    160%;
  --ay-glass-nav-bg:      rgba(9,17,27,.94);     /* nav dark */
  --ay-glass-nav-border:  rgba(39,133,196,.12);
  --ay-glass-tile-bg:     rgba(22,46,71,.7);     /* tuiles dark */
  --ay-glass-tile-border: rgba(39,133,196,.18);
  --ay-glass-tile-shine:  rgba(255,255,255,.04); /* highlight inset haut */
}

/* ════════════════════════════════════════════════════════════════
   C. VARIABLES SÉMANTIQUES — LIGHT MODE (overrides uniquement)
      Seules les variables qui CHANGENT sont redéfinies ici.
      Les variables de layout/typo/animation héritent du dark.
   ════════════════════════════════════════════════════════════════ */
[data-theme="light"] {

  /* ── Surfaces ─────────────────────────────────────────────── */
  --ay-bg:       var(--_cream-0);
  --ay-black:    var(--_cream-0);
  --ay-dark:     var(--_cream-1);
  --ay-mid:      var(--_cream-2);
  --ay-card:     #ffffff;
  --ay-card-2:   var(--_cream-1);

  /* ── Texte ────────────────────────────────────────────────── */
  --ay-white:    #0d1b2a;
  --ay-soft:     rgba(13,27,42,.65);
  --ay-muted:    rgba(13,27,42,.42);
  --ay-disabled: rgba(13,27,42,.25);

  /* Canaux RGB inversés */
  --ay-rgb-fg:   13,27,42;
  --ay-rgb-bg:   245,242,237;

  /* ── Bordures ─────────────────────────────────────────────── */
  --ay-border:   rgba(39,75,120,.13);
  --ay-border-h: rgba(39,75,120,.32);
  --ay-border-s: rgba(39,75,120,.06);

  /* ── Brand (assombris pour lisibilité sur fond clair) ─────── */
  --ay-gold:        #b8860b;
  --ay-gold-dark:   #9a700a;
  --ay-gold-dim:    rgba(184,134,11,.1);
  --ay-gold-glow:   rgba(184,134,11,.2);
  --ay-gold-border: #C99B2A;   /* gold light éclairci 20% — bordures boutons */
  --ay-blue:      #1a6fa8;
  --ay-blue-dim:  rgba(26,111,168,.1);
  --ay-navy:      #1d3a57;

  /* ── Ombres (légères en mode clair) ──────────────────────── */
  --ay-shadow-xs:   0 1px 4px rgba(13,27,42,.06);
  --ay-shadow-sm:   0 4px 20px rgba(13,27,42,.08);
  --ay-shadow-md:   0 8px 36px rgba(13,27,42,.11);
  --ay-shadow-lg:   0 24px 64px rgba(13,27,42,.14);
  --ay-shadow-glow: 0 0 40px rgba(26,111,168,.12), 0 8px 36px rgba(13,27,42,.1);
  --ay-glow-gold:   0 0 24px rgba(184,134,11,.2);
  --ay-glow-blue:   0 0 24px rgba(26,111,168,.15);

  /* --ay-transition reste identique en clair */

  /* ── Overlays ─────────────────────────────────────────────── */
  --ay-overlay-sm: rgba(13,27,42,.5);
  --ay-overlay-md: rgba(13,27,42,.75);
  --ay-overlay-lg: rgba(13,27,42,.92);

  /* ── Glass (plus transparent, plus de blur en mode clair) ─── */
  --ay-glass-blur:        24px;
  --ay-glass-saturate:    200%;
  --ay-glass-nav-bg:      rgba(255,255,255,.28);
  --ay-glass-nav-border:  rgba(39,75,120,.08);
  --ay-glass-tile-bg:     rgba(255,255,255,.55);
  --ay-glass-tile-border: rgba(255,255,255,.72);
  --ay-glass-tile-shine:  rgba(255,255,255,.9);  /* highlight fort en clair */
}

/* ════════════════════════════════════════════════════════════════
   D. LAYOUT, TYPOGRAPHIE, SPACING — invariants (jamais overridés)
   ════════════════════════════════════════════════════════════════ */
:root {
  /* Typography — overridables par Customizer via ay_dynamic_styles() */
  --ay-font-display: 'Bebas Neue', sans-serif;
  --ay-font-body:    'DM Sans', sans-serif;
  --ay-font-mono:    'Space Mono', monospace;
  --ay-font-size-base:   16px;
  --ay-font-weight-body: 300;

  /* Scale typographique */
  --ay-text-xs:   0.65rem;
  --ay-text-sm:   0.8rem;
  --ay-text-base: 1rem;
  --ay-text-lg:   1.125rem;
  --ay-text-xl:   1.25rem;

  /* Letter-spacing pré-définis */
  --ay-tracking-tight: 0.02em;
  --ay-tracking-wide:  0.1em;
  --ay-tracking-wider: 0.16em;
  --ay-tracking-mono:  0.14em;  /* pour Space Mono */

  /* Spacing */
  --ay-space-xs:  4px;
  --ay-space-sm:  8px;
  --ay-space-md:  16px;
  --ay-space-lg:  32px;
  --ay-space-xl:  64px;
  --ay-space-2xl: 96px;

  /* Layout */
  --ay-max-w:     1200px;
  --ay-nav-h:     72px;
  --ay-section-py: clamp(5rem, 8vw, 8rem);

  /* Border radius */
  --ay-radius-sm: 4px;
  --ay-radius:    8px;
  --ay-radius-md: 12px;
  --ay-radius-lg: 16px;
  --ay-radius-xl: 24px;
  --ay-radius-pill: 999px;

  /* Z-index scale */
  --ay-z-base:    1;
  --ay-z-raised:  10;
  --ay-z-overlay: 100;
  --ay-z-nav:     1000;
  --ay-z-modal:   2000;
  --ay-z-toast:   3000;
}

/* ════════════════════════════════════════════════════════════════
   E. ANIMATIONS — durées et courbes (invariantes)
   ════════════════════════════════════════════════════════════════ */
:root {
  /* Courbes */
  --ay-ease:        cubic-bezier(.25,.46,.45,.94);
  --ay-ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ay-ease-in:     cubic-bezier(.4,0,1,1);
  --ay-ease-out:    cubic-bezier(0,0,.2,1);

  /* Durées */
  --ay-dur-fast:   150ms;
  --ay-dur-base:   250ms;
  --ay-dur-slow:   400ms;
  --ay-dur-slower: 600ms;

  /* Transitions courantes */
  --ay-trans-colors:    color var(--ay-dur-base) var(--ay-ease),
                        background var(--ay-dur-base) var(--ay-ease),
                        border-color var(--ay-dur-base) var(--ay-ease);
  --ay-trans-transform: transform var(--ay-dur-base) var(--ay-ease);
  --ay-trans-shadow:    box-shadow var(--ay-dur-base) var(--ay-ease);
  --ay-trans-all:       all var(--ay-dur-base) var(--ay-ease);
}

/* ════════════════════════════════════════════════════════════════
   F. VARIABLES GLASS — réglables facilement
      Modifier ici pour ajuster l'intensité glass globalement.
   ════════════════════════════════════════════════════════════════ */
:root {
  /* Glass boutons */
  --ay-btn-blur:      14px;
  --ay-btn-saturate:  160%;

  /* Glass nav au scroll */
  --ay-nav-blur:      24px;
  --ay-nav-saturate:  var(--ay-glass-saturate);

  /* Glass tuiles/cartes */
  --ay-tile-blur:     18px;
  --ay-tile-saturate: 180%;
}

/* ════════════════════════════════════════════════════════════════
   G. RESET ULTRA-LÉGER
      Séparé du style.css pour charger avant tout
   ════════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  font-size: var(--ay-font-size-base);
  -webkit-text-size-adjust: 100%;
  /* NE PAS utiliser visibility:hidden ici — bloque le Customizer WP
     et tout contexte iframe. Le FOUC est géré par le script inline
     dans header.php qui applique data-theme avant le CSS. */
}

/* Classe .fouc-ready ajoutée par le script header.php
   seulement si JS s'exécute normalement */
html.fouc-ready { visibility: visible; }

/* Fallback absolu : si JS ne s'exécute pas ou est bloqué,
   la page reste visible (dégradé gracieux sans anti-FOUC) */
html:not(.fouc-ready) { visibility: visible; }

body {
  background: var(--ay-bg);
  color: var(--ay-white);
  font-family: var(--ay-font-body);
  font-weight: var(--ay-font-weight-body);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Transition douce au changement de thème */
  transition: background var(--ay-dur-slow) var(--ay-ease),
              color var(--ay-dur-slow) var(--ay-ease);
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button, input, textarea, select { font-family: inherit; }

/* Focus visible global — accessible */
:focus-visible {
  outline: 2px solid var(--ay-gold);
  outline-offset: 3px;
  border-radius: var(--ay-radius-sm);
}

/* Sélection de texte */
::selection {
  background: var(--ay-gold-dim);
  color: var(--ay-white);
}

/* Prefers reduced motion — désactive toutes les animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}