/* ============================================================================
   TOKENS — le système de design de la page.
   ============================================================================

   RIEN ICI N'EST CHOISI À L'ŒIL.

   Le fond et la couleur d'accent sont les valeurs OFFICIELLES de The 5ers,
   relevées le 2026-08-08 dans les variables CSS de leur propre site
   (`docs/sources/00-identite-et-sources-primaires.md` §1) :
       --background : #100f0f   (un noir CHAUD, pas un noir neutre)
       --accent     : #ddfd6c   (le lime signature)
   Tout le reste en dérive par balayage de clarté en OKLCH, à teinte chaude
   constante (40°) pour rester dans la famille du noir officiel.

   TOUS les contrastes ci-dessous sont MESURÉS, pas estimés, par
   `scripts/palette.mjs`. Ce script porte deux témoins (blanc/noir = 21:1 exact,
   oklch(1 0 0) = blanc pur) et SORT EN ERREUR si une paire passe sous son seuil.
   Il a déjà refusé une version de cette palette : `bordure-forte` mesurait
   2,85:1 pour un seuil de 3:1. Relance-le après toute modification de couleur.
   Dernier verdict : 21 paires contrôlées, 0 sous le seuil.

   LA RÈGLE QUI GOUVERNE LA COULEUR (DECISIONS.md D3) :
   une couleur = UNE SEULE signification, sur toute la page.
       lime    → « c'est The 5ers » ou « ça réagit si tu cliques »
       danger  → « ça fait perdre le compte »
       alerte  → « zone grise, ou deux sources qui se contredisent »
       info    → « précision utile, pas un risque »
   Le lime ne qualifie JAMAIS l'état d'un compte : il serait lu comme
   « tout va bien » et dirait deux choses à la fois.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ── Surfaces ─────────────────────────────────────────────────────────── */
  --bg: oklch(0.155 0.002 40);
  --bg-eleve: oklch(0.175 0.004 40);
  --surface: oklch(0.225 0.006 40);
  --surface-2: oklch(0.275 0.008 40);
  --surface-3: oklch(0.335 0.010 40);
  --bordure: oklch(0.375 0.010 40);
  --bordure-forte: oklch(0.495 0.012 40);

  /* ── Texte ────────────────────────────────────────────────────────────── */
  --texte: oklch(0.965 0.004 70);          /* 17,29:1 sur --bg */
  --texte-attenue: oklch(0.775 0.014 70);  /*  9,35:1 */
  --texte-discret: oklch(0.685 0.016 70);  /*  6,73:1 — et 5,25:1 sur --surface-2, le pire cas */

  /* ── La marque ────────────────────────────────────────────────────────── */
  --lime: oklch(0.945 0.185 122);          /* 16,72:1 sur --bg */
  --lime-sourd: oklch(0.80 0.15 122);      /* pour les aplats larges : un accent saturé bave sur fond sombre */

  /* ── Sémantique ───────────────────────────────────────────────────────── */
  --danger: oklch(0.705 0.185 25);         /*  6,72:1 */
  --alerte: oklch(0.805 0.145 75);         /* 10,18:1 */
  --info: oklch(0.805 0.105 220);          /* 10,71:1 */

  /* ── Les quatre niveaux de fiabilité ──────────────────────────────────── */
  --lvl-officiel: oklch(0.805 0.105 220);
  --lvl-recoupe: oklch(0.795 0.145 150);
  --lvl-temoignage: oklch(0.805 0.145 75);
  --lvl-contredit: oklch(0.705 0.185 25);

  --focus: oklch(0.945 0.185 122);

  /* ── Typographie ──────────────────────────────────────────────────────────
     Couple assumé, et volontairement à l'opposé de la page FundingPips (qui
     porte Anton + Inter). Instrument Serif est un SERIF ÉDITORIAL : sur une
     page de trading, il est inattendu, et il sert la direction retenue — un
     document contractuel qu'on éclaire, pas un tableau de bord de plus.
     Les deux sont auto-hébergées sous licence SIL OFL vérifiée et versionnée
     à côté des fichiers. Aucun CDN : un lien de police qui rompt casse la page,
     et fait fuiter la visite. */
  --font-display: 'InstrumentSerif', 'InstrumentSerifRepli', Georgia, 'Times New Roman', serif;
  --font-corps: 'InterVar', 'InterRepli', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Segoe UI Mono', Menlo, monospace;

  /* Échelle fluide. Le rapport display/corps est volontairement large : c'est
     lui qui donne le rythme d'un document, pas la décoration. */
  --fs-hero: clamp(2.9rem, 1.6rem + 6.2vw, 6.5rem);
  --fs-h2: clamp(2.05rem, 1.35rem + 3.3vw, 3.6rem);
  --fs-h3: clamp(1.35rem, 1.12rem + 1.15vw, 2.05rem);
  --fs-h4: clamp(1.06rem, 0.99rem + 0.36vw, 1.28rem);
  --fs-lead: clamp(1.09rem, 1.01rem + 0.42vw, 1.36rem);
  --fs-corps: clamp(1rem, 0.975rem + 0.14vw, 1.09rem);
  --fs-petit: 0.875rem;
  --fs-micro: 0.78rem;

  /* 68 caractères : la mesure de ligne au-delà de laquelle l'œil perd la ligne
     suivante en revenant à la marge. */
  --mesure: 68ch;

  /* ── Espacements ──────────────────────────────────────────────────────── */
  --e1: 0.25rem;  --e2: 0.5rem;   --e3: 0.75rem;  --e4: 1rem;
  --e5: 1.5rem;   --e6: 2rem;     --e7: 3rem;     --e8: 4rem;
  --e9: 6rem;     --e10: 8rem;

  /* ── Rayons — VARIÉS, et c'est délibéré ───────────────────────────────────
     Un même rayon partout est l'une des signatures les plus reconnaissables
     d'une page générée à la chaîne. Chaque valeur correspond ici à une échelle
     d'objet : plus l'objet est grand, plus son rayon est ample. */
  --r-puce: 5px;
  --r-petit: 9px;
  --r-carte: 14px;
  --r-panneau: 22px;
  --r-pilule: 999px;

  /* ── Ombres — DIFFÉRENCIÉES par niveau d'élévation ────────────────────────
     En thème sombre, l'élévation se lit d'abord par l'éclaircissement de la
     surface ; l'ombre ne fait que détacher. Une ombre unique appliquée partout
     aplatit la page — c'est l'autre signature du générique. */
  --ombre-1: 0 1px 2px oklch(0 0 0 / 0.5);
  --ombre-2: 0 8px 24px oklch(0 0 0 / 0.46), 0 1px 2px oklch(0 0 0 / 0.5);
  --ombre-3: 0 26px 64px oklch(0 0 0 / 0.55), 0 2px 6px oklch(0 0 0 / 0.5);
  --halo-lime: 0 0 0 1px oklch(0.945 0.185 122 / 0.28), 0 8px 26px oklch(0.945 0.185 122 / 0.14);

  /* ── Courbes ──────────────────────────────────────────────────────────── */
  --ease-sortie: cubic-bezier(0.16, 1, 0.30, 1);
  --ease-doux: cubic-bezier(0.33, 1, 0.68, 1);
  --t-court: 0.14s;
  --t: 0.24s;
  --t-long: 0.55s;

  /* ── Mise en page ─────────────────────────────────────────────────────── */
  --largeur: 1180px;
  --largeur-ample: 1440px;
  --h-nav: 64px;

  /* Grain : casse le banding des dégradés sombres, invisible autrement.
     feTurbulence en data-URI — aucun fichier à charger, aucun lien à rompre. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='0.30'/%3E%3C/svg%3E");
}

/* Repli hexadécimal pour les moteurs sans OKLCH. `oklch()` est Baseline Widely
   depuis mai 2023 : ce bloc ne sert plus qu'aux navigateurs très anciens, mais
   son absence les laisserait sans AUCUNE couleur — les variables seraient
   invalides et le texte hériterait du noir sur noir. Valeurs issues du même
   calcul que ci-dessus, converties par `scripts/palette.mjs`. */
@supports not (color: oklch(0.5 0.1 40)) {
  :root {
    --bg: #100f0f;              --bg-eleve: #12100f;
    --surface: #1e1b1a;         --surface-2: #2b2625;
    --surface-3: #3b3533;       --bordure: #463f3d;
    --bordure-forte: #68605d;
    --texte: #f5f3f1;           --texte-attenue: #bcb4ac;
    --texte-discret: #a0988f;
    --lime: #ddfd6c;            --lime-sourd: #aecd55;
    --danger: #fe6863;          --alerte: #f5b043;      --info: #68cfee;
    --lvl-officiel: #68cfee;    --lvl-recoupe: #70d689;
    --lvl-temoignage: #f5b043;  --lvl-contredit: #fe6863;
    --focus: #ddfd6c;
  }
}

/* ── Polices auto-hébergées ────────────────────────────────────────────────
   `size-adjust` et les surcharges de métriques alignent le repli sur la police
   réelle : sans elles, l'échange au chargement décale la mise en page et
   compte comme un défaut de stabilité visuelle (CLS). */
@font-face {
  font-family: 'InstrumentSerif';
  src: url('../assets/fonts/instrument-serif-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'InstrumentSerifRepli';
  src: local('Georgia'), local('Times New Roman'), local('Times');
  size-adjust: 96%;
  ascent-override: 92%;
  descent-override: 24%;
}
@font-face {
  font-family: 'InterVar';
  src: url('../assets/fonts/inter-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'InterRepli';
  src: local('Segoe UI'), local('Helvetica Neue'), local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
}