/* Design tokens — Ariane Cosmetics (site vitrine)
   Palette claire premium (docs/plans/promos-et-identite-visuelle.md, Lot 8) :
   fond #F8F6F2, navy #1B2F6E, or #E8A020, beige #F5ECD7. tokens.css est la
   SEULE source de vérité des couleurs du site — aucune couleur littérale
   ailleurs (vérifié par test/public/palette.test.js), à l'exception du fond
   blanc des QR (contrainte de scannabilité, jamais esthétique).

   Cinq règles dérivées des ratios WCAG mesurés (voir docs/identite-
   visuelle.md pour le détail chiffré) :
   1. --gold ne sert JAMAIS de couleur de texte (2,05:1, échec WCAG) — tout
      texte/trait signifiant utilise --gold-ink (5,49:1).
   2. :focus-visible utilise --focus (= --gold-ink), jamais --gold.
   3. Tout remplissage --gold utilisé comme contrôle (bouton, onglet actif)
      reçoit une bordure --gold-ink.
   4. --text-dim est OPAQUE — jamais une opacité sur du texte (imprévisible
      selon la surface sous-jacente).
   5. L'élévation des surfaces passe par --line + une ombre, jamais par la
      seule couleur de fond (--surface vs --surface-warm ne sont séparés
      que de 1,09:1). */

:root {
  color-scheme: light;

  /* Surfaces — l'élévation se lit au filet et à l'ombre, pas au fond (règle 5) */
  --surface:        #F8F6F2;   /* page */
  --surface-raised: #FFFFFF;   /* panneaux, champs */
  --surface-warm:   #F5ECD7;   /* blocs promo, encadrés, accents chauds */
  --surface-sunk:   #EFEBE3;   /* rails, pistes de jauge */
  --surface-translucent: rgba(248, 246, 242, 0.85); /* topbar flottante, = --surface + alpha */

  /* Texte */
  --text:           #1B2F6E;   /* 11,60:1 sur --surface */
  --text-dim:       #4A5878;   /* 6,58:1 — opaque, jamais une opacité (règle 4) */
  --text-on-accent: #1B2F6E;   /* sur remplissage or : 5,65:1 */
  --text-on-inv:    #F5F1E6;   /* sur surface inversée */

  /* Accents */
  --navy:      #1B2F6E;
  --navy-soft: #2C4795;        /* 7,97:1 */
  --gold:      #E8A020;        /* REMPLISSAGES ET ORNEMENTS UNIQUEMENT (règle 1) */
  --gold-ink:  #8A5A00;        /* tout texte / trait signifiant — 5,49:1 */
  --gold-wash: rgba(232, 160, 32, 0.12);

  /* Filets, états */
  --line:        rgba(27, 47, 110, 0.14);
  --line-strong: rgba(27, 47, 110, 0.30);
  --line-gold:   rgba(138, 90, 0, 0.35);
  --focus:       #8A5A00;      /* règle 2 */
  --error:       #A32020;      /* 6,99:1 */
  --success:     #1E6B45;      /* 6,00:1 */

  --shadow-sm: 0 1px 2px rgba(27, 47, 110, 0.06);
  --shadow-md: 0 10px 30px -12px rgba(27, 47, 110, 0.18);
  --shadow-gold: 0 8px 28px -8px rgba(232, 160, 32, 0.45);
  --shadow-navy: 0 8px 28px -8px rgba(27, 47, 110, 0.45);
  --shadow-deep: 0 30px 60px -20px rgba(0, 0, 0, 0.45);

  /* Lavis (washes) — surfaces claires uniquement, alpha faible */
  --halo-gold:      rgba(232, 160, 32, 0.16);
  --halo-navy:      rgba(27, 47, 110, 0.1);
  --wash-gold-soft: rgba(232, 160, 32, 0.06);
  --wash-gold-strong: rgba(232, 160, 32, 0.22);

  /* Surfaces volontairement inversées (sombres) : carte fidélité, toast.
     Pas des oublis de migration — un objet premium posé sur une page claire.
     Lavis/traits propres à ces objets, jamais utilisés sur la page claire. */
  --inv-surface:   #10162B;
  --inv-surface-2: #1A2340;
  --inv-text:      #F5F1E6;
  --inv-text-dim:  #B9C0D4;
  --inv-wash-gold: rgba(232, 160, 32, 0.28);
  --inv-wash-navy: rgba(27, 47, 110, 0.55);
  --inv-border:    rgba(232, 160, 32, 0.35);
  --inv-track:     rgba(245, 241, 230, 0.18);
  --inv-highlight: rgba(255, 255, 255, 0.08);

  /* Exception nommée à "tokens uniquement" : fond du QR, contrainte de
     scannabilité (certains scanners bas de gamme décrochent sur un fond
     ivoire/beige), jamais esthétique. Voir scripts/generer-qr.js. */
  --qr-bg: #FFFFFF;

  /* Statuts (écrans admin : badges nouveau/confirmé/annulé, pastilles) —
     dérivés de --success/--error/--navy-soft, jamais une nouvelle couleur. */
  --wash-success: rgba(30, 107, 69, 0.16);
  --wash-muted:   rgba(74, 88, 120, 0.14);
  --wash-navy:    rgba(44, 71, 149, 0.16);
  --text-muted:   #6B7280;

  /* Voile plein écran derrière une modale — toujours sombre, quelle que
     soit la palette de la page (lisibilité de la modale au-dessus). */
  --scrim: rgba(16, 22, 43, 0.72);

  /* Typographie — deux familles réseau au maximum */
  --ff-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --ff-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ff-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --fs-hero:    clamp(2.75rem, 5.5vw + 1rem, 6rem);
  --fs-h2:      clamp(1.9rem, 2.8vw + 0.8rem, 3.2rem);
  --fs-h3:      clamp(1.45rem, 1.2vw + 0.9rem, 1.85rem);
  --fs-body:    1.05rem;
  --fs-small:   0.85rem;
  --fs-label:   0.75rem;

  /* Rythme */
  --space-xs:   0.5rem;
  --space-sm:   1rem;
  --space-md:   1.75rem;
  --space-lg:   3rem;
  --space-xl:   5.5rem;
  --space-2xl:  9rem;

  --radius:     14px;
  --radius-lg:  24px;
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* [hidden] doit toujours gagner, même face à des classes de layout
   (.loyalty-stage, .code-reveal, etc.) qui posent display:flex/grid. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Coupe le double-tap-to-zoom (retour utilisateur 2026-08-12 : casse
     l'effet app native une fois la PWA ajoutée à l'écran d'accueil).
     touch-action, pas user-scalable=no sur le viewport — cette dernière
     désactive aussi le pinch-zoom légitime pour l'accessibilité, alors que
     touch-action ne bloque que le double-tap. */
  touch-action: manipulation;
}

h1, h2, h3 {
  font-family: var(--ff-display);
  font-weight: 600;
  line-height: 1.08;
  margin: 0;
  color: var(--text);
}

p { margin: 0; }

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

.eyebrow {
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

/* Reveal au scroll — appliqué par reveal.js via IntersectionObserver */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@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;
  }
  .reveal { opacity: 1; transform: none; }
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}