/* ════════════════════════════════════════════════════════════════
   Réalisons — Design tokens
   Source de vérité : 04_marketing/02_branding/charte_graphique/
                      REALISONS_charte_graphique.md
   En cas de divergence, Figma prévaut sur ce fichier (cf. charte).
   ════════════════════════════════════════════════════════════════ */

:root {

  /* ── Brand ──────────────────────────────────────────────────── */
  --r-teal: #28A8BF;
  --r-teal-dark: #1E7F8E;
  --r-teal-light: #CAEEF4;
  --r-orange: #EEA32A;
  --r-orange-dark: #BC770B;
  --r-green: #48BB78;
  --r-purple: #805AD5;

  /* ── Palette élargie pour catégories (v1 cartes) ─────────────
     Promues en tokens à l'implémentation Divi sous --r-cat-*.
     Toutes hors-marque (pas de teal ni d'orange). */
  --r-blue: #2B6CB0;
  --r-coral: #E53E3E;
  --r-emerald: #2F855A;
  --r-amber: #B7791F;
  --r-pink: #D53F8C;
  --r-indigo: #4C51BF;
  --r-fuchsia: #B83280;
  --r-navy: #2C5282;

  /* ── Surfaces ──────────────────────────────────────────────── */
  --r-bg: #F3F5F8;
  --r-dark: #2D3748;
  --r-white: #FFFFFF;
  --r-separator: #C8D0D8;

  /* ── Texte ─────────────────────────────────────────────────── */
  --r-text-dark: #2D3748;
  --r-text-body: #718096;
  --r-text-muted: #9AA5B4;
  --r-dot-inactive: #B0BEC5;

  /* ── Typographie ───────────────────────────────────────────── */
  --r-font-heading: 'Kulim Park', system-ui, -apple-system, sans-serif;
  --r-font-body: 'Lato', system-ui, -apple-system, sans-serif;

  /* ── Espacement ────────────────────────────────────────────── */
  --r-page-margin: 80px;
  --r-card-padding: 26px;
  --r-btn-padding-h: 32px;
  --r-btn-padding-v: 15px;
  --r-section-gap: 12px;
  --r-gutter-sm: 16px;
  --r-gutter-md: 32px;
  --r-gutter-lg: 48px;

  /* Hauteur du footer fixe (sticky bottom) — utilisée pour le
     padding-bottom du body, afin que le contenu ne soit jamais
     caché derrière le footer. Le footer empile la bannière d'offre
     de lancement (--r-launch-banner-h, mise à 0px par le JS quand la
     bannière est fermée) et la barre de liens (--r-footer-bar-height). */
  --r-footer-bar-height: 48px;
  --r-launch-banner-h: 46px;
  --r-footer-height: calc(var(--r-footer-bar-height) + var(--r-launch-banner-h));

  /* ── Rayons ────────────────────────────────────────────────── */
  --r-radius-card: 20px;
  --r-radius-carousel: 24px;
  --r-radius-btn: 23px;
  --r-radius-input: 12px;
  --r-radius-badge: 16px;
  --r-radius-pill: 12px;
  --r-radius-dot: 11px;

  /* ── Ombres neumorphiques ──────────────────────────────────── */
  --neu-card: -6px -6px 12px rgba(255,255,255,0.85), 6px 6px 14px rgba(163,177,198,0.45);
  --neu-card-hover: -8px -8px 16px rgba(255,255,255,0.9), 8px 8px 20px rgba(163,177,198,0.55);
  --neu-btn: -4px -4px 8px rgba(255,255,255,0.85), 4px 4px 8px rgba(163,177,198,0.4);
  --neu-btn-hover: -6px -6px 10px rgba(255,255,255,0.9), 6px 6px 12px rgba(163,177,198,0.5);
  --neu-btn-sm: -3px -3px 6px rgba(255,255,255,0.8), 3px 3px 5px rgba(163,177,198,0.4);
  --neu-btn-sm-active: inset -3px -3px 5px rgba(255,255,255,0.6), inset 3px 3px 6px rgba(163,177,198,0.35);
  --neu-inner: inset -4px -4px 8px rgba(255,255,255,0.75), inset 4px 4px 8px rgba(163,177,198,0.35);

  /* ── Layout 2 colonnes (v2 spécifique) ─────────────────────── */
  --r-page-2col-hero-width: 38%;
  --r-page-2col-content-width: 62%;
  --r-page-2col-gap: 48px;
  --r-page-2col-sticky-top: 90px;  /* hauteur header sticky (le banner est sous le header, hors flux sticky) */

  /* ── Transitions ───────────────────────────────────────────── */
  --r-transition-shadow: box-shadow 200ms ease-out;
  --r-transition-color: color 150ms ease-out;
  --r-transition-transform: transform 250ms ease-out;
}

/* ── Dark mode (réservé, pas activé sur le site public) ──────── */
[data-theme="dark"] {
  --r-teal: #4FD1C5;
  --r-teal-dark: #38B2AC;
  --r-teal-light: #1D3D3D;
  --r-orange: #F6AD55;
  --r-orange-dark: #ED8936;
  --r-green: #68D391;
  --r-purple: #B794F4;
  --r-bg: #1A202C;
  --r-dark: #E2E8F0;
  --r-separator: #2D3748;
  --r-text-dark: #E2E8F0;
  --r-text-body: #A0AEC0;
  --r-text-muted: #718096;
  --r-dot-inactive: #4A5568;
}