/* =============================================================
 * SOS CREDIT · CRISTAL · DESIGN TOKENS v1
 * =============================================================
 * Référentiel unique de tous les tokens visuels du thème.
 * À charger AVANT theme.json (qui réutilise les mêmes valeurs).
 * Pas de surcouche : ce sont les sources de vérité.
 *
 * Sommaire :
 *   1. Palette primitives  → couleurs brutes (jamais utilisées directement en CSS de composant)
 *   2. Palette sémantique  → tokens d'usage (--color-text, --color-cta-bg, etc.)
 *   3. Typography          → families, sizes, weights, leading, tracking
 *   4. Spacing scale       → échelle géométrique 4px → 96px
 *   5. Radii               → arrondis
 *   6. Shadows             → 3 niveaux + glow indigo
 *   7. Gradients           → 3 gradients officiels du thème
 *   8. Motion              → durations + easings
 *   9. Z-index             → empilement
 *  10. Breakpoints         → CSS custom media (à recompiler côté JS si utilisé)
 * ============================================================= */

:root {

  /* ----------------------------------------------------------
   * 1 · PALETTE PRIMITIVES
   * Ne jamais utiliser directement dans le code de composant.
   * Ces variables existent uniquement pour construire les tokens
   * sémantiques ci-dessous (--color-*, --bg-*, etc.).
   * ---------------------------------------------------------- */

  /* Neutrals */
  --c-ink-1000: #0F1530;   /* texte principal, headers, CTA noir */
  --c-ink-800:  #1F2545;   /* hover de l'ink-1000 */
  --c-slate-600: #6B7290;  /* texte secondaire, captions, mute */
  --c-slate-400: #A8AEC4;  /* texte placeholder, désactivé */
  --c-slate-200: #D9DCE7;  /* borders inactives */
  --c-slate-100: rgba(15, 21, 48, 0.08);  /* borders cards, dividers */
  --c-slate-050: #F9FAFD;  /* fond card alternatif */
  --c-bg:       #F4F6FB;  /* fond global de page */
  --c-white:    #FFFFFF;  /* fond card principal */

  /* Brand · Indigo (couleur principale, gradient cristal) */
  --c-indigo-700: #1F2EB8;
  --c-indigo-600: #2D3FE0;  /* indigo brand */
  --c-indigo-300: #A4ACFF;
  --c-indigo-100: #E0E4FF;  /* indigo-soft, fonds d'accent, badges */

  /* Brand · Violet (deuxième stop du gradient) */
  --c-violet-600: #8B5CF6;
  --c-violet-300: #C4B0FB;
  --c-violet-100: #EFE7FE;

  /* Functional · Yellow (CTAs urgents, accents, surlignement) */
  --c-yellow-500: #FFD23F;
  --c-yellow-300: #FFE07A;
  --c-yellow-100: #FFF6CC;

  /* Functional · Green (success, validation, social proof) */
  --c-green-700: #0D8159;
  --c-green-600: #14B07A;
  --c-green-100: #D9F3E8;

  /* Functional · Coral (alertes, warnings, anti-bounce) */
  --c-coral-600: #FF5C49;
  --c-coral-100: #FFE2DD;

  /* Trustpilot brand (utilisé tel quel sur badge) */
  --c-trustpilot: #00B67A;
  --c-stars: #FFA800;


  /* ----------------------------------------------------------
   * 2 · PALETTE SÉMANTIQUE
   * Tokens d'usage. C'est ce que tu écris dans le CSS des composants.
   * Si tu veux changer le thème, tu modifies CES variables, jamais
   * les primitives ci-dessus.
   * ---------------------------------------------------------- */

  /* Backgrounds */
  --bg-page:        var(--c-bg);
  --bg-card:        var(--c-white);
  --bg-card-2:      var(--c-slate-050);
  --bg-card-dark:   var(--c-ink-1000);
  --bg-accent-soft: var(--c-indigo-100);

  /* Surfaces · Foreground */
  --color-text:        var(--c-ink-1000);
  --color-text-mute:   var(--c-slate-600);
  --color-text-soft:   var(--c-slate-400);
  --color-text-invert: var(--c-white);
  --color-text-link:   var(--c-indigo-600);

  /* Borders & dividers */
  --border-line:    var(--c-slate-100);
  --border-strong:  var(--c-slate-200);
  --border-accent:  var(--c-indigo-600);

  /* CTAs */
  --cta-primary-bg:     var(--c-ink-1000);
  --cta-primary-bg-hover: var(--c-ink-800);
  --cta-primary-fg:     var(--c-white);

  --cta-accent-bg:      var(--c-yellow-500);
  --cta-accent-fg:      var(--c-ink-1000);

  --cta-affiliate-bg:   var(--c-coral-600);  /* CTAs partenaires conversion-pure */
  --cta-affiliate-fg:   var(--c-white);

  /* Status colors (callouts, badges, sliders, charts) */
  --status-tip-bg:      var(--c-indigo-100);
  --status-tip-fg:      var(--c-indigo-600);
  --status-tip-border:  var(--c-indigo-600);

  --status-warn-bg:     var(--c-coral-100);
  --status-warn-fg:     var(--c-coral-600);
  --status-warn-border: var(--c-coral-600);

  --status-success-bg:    var(--c-green-100);
  --status-success-fg:    var(--c-green-600);
  --status-success-border: var(--c-green-600);


  /* ----------------------------------------------------------
   * 3 · TYPOGRAPHY
   * Trois familles, jamais plus. Sizes en clamp() pour le fluide,
   * sans dépasser le 96px de cap sur le H1 marketing.
   * ---------------------------------------------------------- */

  /* Font families */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-text:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Font sizes (fluid clamps + steps fixes pour le corps) */
  --fs-display-xl: clamp(48px, 6vw, 76px);   /* H1 hero marketing */
  --fs-display-lg: clamp(36px, 4.5vw, 56px); /* H1 article */
  --fs-display-md: clamp(28px, 3vw, 36px);   /* H1 page secondaire */
  --fs-h2:         clamp(24px, 2.4vw, 32px); /* H2 section article */
  --fs-h3:         19px;                     /* H3 sous-section */
  --fs-h4:         17px;                     /* H4 micro */
  --fs-lead:       18px;                     /* paragraphe d'intro */
  --fs-body:       15px;                     /* corps de texte */
  --fs-small:      13px;                     /* meta, captions */
  --fs-micro:      11px;                     /* labels mono, tags */
  --fs-nano:       10px;                     /* badges, ribbons */

  /* Font weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   800;

  /* Line heights */
  --lh-tight:   1.02;  /* H1, gros chiffres */
  --lh-snug:    1.15;  /* H2, H3 */
  --lh-base:    1.55;  /* paragraphes corps + lead */
  --lh-relaxed: 1.65;  /* article-body long-form */

  /* Letter spacing */
  --ls-tight-xl:   -0.035em;  /* display extra large */
  --ls-tight-lg:   -0.025em;  /* display */
  --ls-tight-md:   -0.015em;  /* H3, H4 */
  --ls-normal:      0;
  --ls-loose-sm:    0.04em;
  --ls-loose-md:    0.08em;   /* mono labels */
  --ls-loose-lg:    0.12em;   /* mono badges */
  --ls-loose-xl:    0.16em;   /* mono labels TOC */


  /* ----------------------------------------------------------
   * 4 · SPACING SCALE
   * Échelle 4-based. À utiliser pour padding, margin, gap.
   * Ne pas inventer de valeurs hors échelle.
   * ---------------------------------------------------------- */

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;


  /* ----------------------------------------------------------
   * 5 · RADII
   * ---------------------------------------------------------- */

  --radius-xs:   4px;  /* badges, pills */
  --radius-sm:   6px;  /* boutons compacts, ribbons */
  --radius-md:   8px;  /* boutons CTA, inputs */
  --radius-lg:   10px; /* boutons primaires hero */
  --radius-xl:   12px; /* callouts, sliders */
  --radius-2xl:  14px; /* small cards */
  --radius-3xl:  16px; /* cards classiques (partner, match) */
  --radius-4xl:  18px; /* hero cards XL */
  --radius-full: 999px;


  /* ----------------------------------------------------------
   * 6 · SHADOWS
   * Quatre niveaux + un glow indigo pour les éléments accentués.
   * ---------------------------------------------------------- */

  --shadow-xs: 0 1px 2px rgba(15, 21, 48, 0.04);
  --shadow-sm: 0 4px 12px -2px rgba(15, 21, 48, 0.08);
  --shadow-md: 0 12px 28px -8px rgba(15, 21, 48, 0.12);
  --shadow-lg: 0 24px 50px -16px rgba(15, 21, 48, 0.20);
  --shadow-xl: 0 32px 70px -24px rgba(15, 21, 48, 0.28);

  /* Glows colorés (cards featured, hero) */
  --glow-indigo: 0 12px 24px -8px rgba(45, 63, 224, 0.40);
  --glow-yellow: 0 8px 20px -8px rgba(255, 210, 63, 0.45);
  --glow-coral:  0 8px 20px -8px rgba(255, 92, 73, 0.40);


  /* ----------------------------------------------------------
   * 7 · GRADIENTS
   * Trois gradients officiels. Tous les autres sont interdits
   * pour préserver la cohérence visuelle.
   * ---------------------------------------------------------- */

  --grad-brand:    linear-gradient(135deg, var(--c-indigo-600), var(--c-violet-600));
  --grad-warm:     linear-gradient(135deg, var(--c-yellow-500), var(--c-coral-600));
  --grad-success:  linear-gradient(135deg, var(--c-green-600), var(--c-indigo-600));

  /* Radial glow (background ambient des heroes) */
  --glow-ambient-indigo: radial-gradient(circle, rgba(45, 63, 224, 0.12), transparent 70%);
  --glow-ambient-yellow: radial-gradient(circle, rgba(255, 210, 63, 0.25), transparent 70%);


  /* ----------------------------------------------------------
   * 8 · MOTION
   * ---------------------------------------------------------- */

  --motion-fast: 0.15s;
  --motion-base: 0.25s;
  --motion-slow: 0.40s;

  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);  /* pour les CTAs hover */


  /* ----------------------------------------------------------
   * 9 · Z-INDEX
   * ---------------------------------------------------------- */

  --z-base:        1;
  --z-sticky:      10;
  --z-dropdown:    50;
  --z-header:      100;
  --z-overlay:     500;
  --z-modal:       1000;
  --z-toast:       2000;


  /* ----------------------------------------------------------
   * 10 · LAYOUT
   * ---------------------------------------------------------- */

  --container-max:  1440px;
  --container-prose: 720px;   /* largeur de lecture optimale article body */
  --container-toc:   220px;
  --container-aside: 320px;
  --container-gutter: var(--space-12);  /* padding latéral pages */

  /* Layout article 3 colonnes */
  --layout-article-cols: var(--container-toc) 1fr var(--container-aside);
  --layout-article-gap:  var(--space-10);

}


/* =============================================================
 * UTILITIES UNIVERSELLES
 * Helpers réutilisables dans tous les composants.
 * ============================================================= */

/* Gradient text — appliquer .gradient-text à n'importe quel span */
.gradient-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gradient-text--warm {
  background: var(--grad-warm);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Soulignement jaune sous un mot */
.underline-yellow {
  position: relative;
}
.underline-yellow::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 3px;
  background: var(--c-yellow-500);
  border-radius: 2px;
}

/* Badge "live" pulsant */
.live-dot::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--c-green-600);
  border-radius: 50%;
  margin-right: var(--space-2);
  animation: cristal-pulse 1.5s infinite;
}

@keyframes cristal-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.3); }
}

/* Container helpers */
.cristal-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-gutter);
  padding-right: var(--container-gutter);
}

.cristal-prose {
  max-width: var(--container-prose);
}