/* COPIE de frontend/shared/tokens.css - NE PAS EDITER ICI ; resynchroniser via scripts/sync_site_shared.sh */
/* ============================================================
   DENICHOR - TOKENS (source de vérité design, V3)
   ------------------------------------------------------------
   Extraits du design system retenu : exploration round2/V5,
   typo T1 (Fraunces + General Sans), validée le 2026-07-03.
   Contrat d'usage : docs/denichor-v3/UI-SPEC.md.
   Toute couleur / espacement / durée hors tokens = refus en review.

   Là où ce fichier contredit DIRECTION.md (palette bleu nuit,
   Clash Display/Satoshi, radius max 8px, vouvoiement), c'est CE
   fichier qui gagne : la V5 ivoire/or est la charte retenue.
   ============================================================ */

:root{

  /* ---------- PALETTE ----------
     Dominante ivoire, encre chaude, or précieux.
     Règle : l'or ne sert QUE la valeur (prix, marge, CTA, le mot
     en évidence des titres, la « pépite »). Jamais d'or décoratif. */
  --ivoire:      #F6F3EB;              /* fond principal des pages */
  --ivoire-2:    #FBF9F3;              /* sections alternées (fond légèrement levé) */
  --papier:      #FFFEFA;              /* surfaces : cartes, panneaux, tableaux */
  --encre:       #17130C;              /* texte principal, boutons primaires */
  --encre-2:     #2A241A;              /* dégradé des boutons primaires, surfaces encre levées */
  --nuit:        #14100A;              /* fond des sections sombres (contrepoint « Derrière le fil ») */
  --line:        rgba(23,19,12,.12);   /* bordures, séparateurs */
  --line-soft:   rgba(23,19,12,.06);   /* séparateurs de rangs de tableau */

  --or:          #B07A1E;              /* L'accent signature. Titres (mot en or), data clés, tags */
  --or-vif:      #D6A84F;              /* hover, dégradés, or sur fond sombre */
  --or-pale:     #E8C87E;              /* kickers sur fond sombre, détails */
  --or-sombre:   #8A5E12;              /* fin de dégradé du fil, pointe de l'aiguille */

  --cash:        #177A4B;              /* les gains, marges positives, verdict ACHÈTE */
  --bad:         #B3364A;              /* baisses, alertes de chute, verdict ÉVITE */

  --dim:         rgba(23,19,12,.64);   /* texte secondaire */
  --faint:       rgba(23,19,12,.38);   /* labels, méta, légendes */

  --creme:       #F6E9C8;              /* texte sur bouton encre */
  --blanc-chaud: #FFF8E8;              /* texte sur fond or (badges, scores) */
  --sur-nuit:    #F6F3EB;              /* texte principal sur fond nuit */
  --sur-nuit-dim:rgba(246,243,235,.66);/* texte secondaire sur fond nuit */
  --sur-nuit-faint:rgba(246,243,235,.4);

  /* Teintes utilitaires dérivées (fonds de chips, halos, voiles) */
  --or-bg:       rgba(214,168,79,.08); /* fond des chips/lignes mises en avant */
  --or-bg-2:     rgba(214,168,79,.12); /* fond appuyé (plan Pro, tag chaud) */
  --or-border:   rgba(176,122,30,.3);  /* bordure des panneaux « produit » */
  --or-border-2: rgba(176,122,30,.45); /* bordure appuyée (chips filtres, plan Pro) */
  --cash-bg:     rgba(23,122,75,.1);
  --bad-bg:      rgba(179,54,74,.1);
  --veil-nav:    rgba(246,243,235,.88);/* nav au scroll (avec backdrop blur 12px) */
  --veil-panel:  rgba(255,254,250,.92);/* barres/HUD flottants (avec backdrop blur 8px) */

  /* ---------- HÉRITAGE DIRECTION.md (app sombre / data-viz) ----------
     Conservés pour compatibilité : réservés aux écrans internes hérités
     et à la data-viz bleue de l'app. INTERDITS sur le site marketing. */
  --ink-950:  #050A1E;
  --ink-900:  #0A1230;
  --ink-700:  #16214D;
  --pulse-500:#2E6BFF;
  --pulse-300:#4D9FFF;
  --paper-50: #F4F6FB;
  --gold-400: #F0B450;
  --gold-500: #E8A33D;

  /* ---------- TYPOGRAPHIE ----------
     Display : Fraunces (serif à axe optique - poids 400/550/650,
       italiques 450/550 ; l'italique or est LA voix des titres).
     Body : General Sans (400/500/600/700).
     Data : JetBrains Mono (400/700) - TOUS les chiffres, prix, %,
       badges, labels techniques. La donnée se lit comme un instrument. */
  --f-display: 'Fraunces', 'Georgia', serif;
  --f-body:    'General Sans', 'Helvetica Neue', sans-serif;
  --f-mono:    'JetBrains Mono', 'SFMono-Regular', monospace;

  /* Échelle de taille (sauts ×3 mini entre body et héros) */
  --t-count:   clamp(3rem, 9.5vw, 8rem);      /* compteurs spectaculaires (le million) */
  --t-giant:   clamp(2.8rem, 8vw, 6.6rem);    /* finale « Tire le fil. » */
  --t-hero:    clamp(2.4rem, 5.6vw, 4.9rem);  /* H1 de page */
  --t-big-n:   clamp(2.8rem, 7.4vw, 5.8rem);  /* gros chiffre narratif (italique or) */
  --t-h2:      clamp(1.9rem, 4vw, 3.3rem);    /* titres de section */
  --t-h3:      clamp(1.5rem, 2.7vw, 2.3rem);  /* titres d'étape / de scène */
  --t-total:   clamp(2.6rem, 6vw, 4.8rem);    /* total « argent » (vert cash) */
  --t-card:    19px;                          /* titre de carte (en --f-body 650) */
  --t-plan:    23px;                          /* nom de plan pricing */
  --t-price:   42px;                          /* prix des plans (en display 650) */
  --t-body-lg: clamp(15.5px, 1.4vw, 18.5px);  /* sous-titre héros */
  --t-sub:     clamp(15px, 1.25vw, 17.5px);   /* chapo de section */
  --t-body:    17px;                          /* texte courant (body par défaut) */
  --t-small:   13.5px;                        /* texte de carte, listes */
  --t-caption: 12px;                          /* méta, légendes */
  --t-micro:   11px;                          /* labels mono uppercase */
  --t-nano:    9.5px;                         /* tags de type de signal, badges fins */

  /* Interlignages & espacements de lettres */
  --lh-display: 1.05;
  --lh-body:    1.6;
  --ls-display: -.01em;
  --ls-tag:     .24em;   /* kickers / chap-tags mono uppercase */
  --ls-badge:   .14em;   /* badges, pilules */
  --ls-label:   .1em;    /* labels de stats */

  /* ---------- ESPACEMENTS (base 8) ---------- */
  --s-1: 8px;   --s-2: 16px;  --s-3: 24px;  --s-4: 32px;
  --s-5: 40px;  --s-6: 48px;  --s-8: 64px;  --s-10: 80px;
  --s-12: 96px; --s-16: 128px;
  /* Rythmes de page */
  --sec-pad:    clamp(100px, 14vh, 170px);   /* padding vertical d'une section majeure */
  --sec-pad-sm: clamp(80px, 10vh, 130px);    /* section secondaire */
  --breath:     74vh;                        /* respiration entre chapitres (le fil seul en scène) */
  --wrap-max:   1220px;
  --wrap-pad:   clamp(20px, 4vw, 56px);

  /* ---------- RADIUS (sémantiques) ---------- */
  --r-tag:   5px;    /* tags de type (HAUSSE/BAISSE), petits chips */
  --r-chip:  7px;    /* badges verdict/plafond, boutons d'action compacts */
  --r-thumb: 8px;    /* vignettes photo dans les rangs */
  --r-btn:   12px;   /* boutons, barres d'URL, mini-cartes */
  --r-hud:   13px;   /* panneaux HUD flottants */
  --r-bulle: 14px;   /* bulles de chat */
  --r-card:  18px;   /* cartes (signaux, features, spec) */
  --r-panel: 20px;   /* grands panneaux produit (tableaux, chat, coffre, plans) */
  --r-aud:   22px;   /* cartes immersives pleine image */
  --r-pill:  999px;  /* pilules (filtres, canaux) */

  /* ---------- OMBRES ----------
     RÈGLE : chaque écran/mockup produit porte le glow or en SECOND
     box-shadow - c'est la lumière de la marque. */
  --sh-glow-or:    0 26px 90px rgba(176,122,30,.28);
  --sh-card:       0 14px 40px rgba(23,19,12,.06);
  --sh-card-hover: 0 24px 60px rgba(23,19,12,.12);
  --sh-panel:      0 40px 100px rgba(23,19,12,.14);
  --sh-hud:        0 18px 44px rgba(23,19,12,.12);
  --sh-btn:        0 12px 34px rgba(23,19,12,.22);
  --sh-btn-hover:  0 18px 48px rgba(23,19,12,.3);
  --sh-lit:        0 14px 44px rgba(176,122,30,.25);  /* carte « REPÉRÉE PAR DENICHOR » */
  --sh-verdict:    0 18px 60px rgba(23,122,75,.25);

  /* ---------- MOUVEMENT ----------
     Doctrine complète : UI-SPEC.md §Motion. Les helpers JS
     (denichor.js) lisent ces tokens - une seule source. */
  --micro-transition: 160ms ease-out;  /* TOUTES les micro-interactions (hover, bordure, ombre) */
  --dur-micro:     160ms;
  --reveal-duration: .75s;             /* reveal d'un groupe ([data-rg], enfants en cascade) */
  --reveal-duration-solo: .9s;         /* reveal d'un élément seul ([data-r]) */
  --reveal-y:      26px;               /* offset Y des groupes - DOIT rester < marge sous la grille */
  --reveal-y-solo: 34px;
  --stagger-step:  .09s;               /* cascade dans un groupe */
  --stagger-open:  .12s;               /* cascade de l'ouverture de page (hero) */
  --ease-reveal:   power3.out;         /* easings GSAP nommés, lus par DN.tokens() */
  --ease-open:     power4.out;
  --lerp-thread:   0.14;               /* lissage de la pointe du fil (et de tout scrub maison) */

  /* ---------- PLANS (z-index) ---------- */
  --z-nav:   100;
  --z-hud:   8;
  --z-toast: 300;
}

/* ---------- Base minimale portée par les tokens ---------- */
.dn-root, body.dn{
  background: var(--ivoire);
  color: var(--encre);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
.dn ::selection, .dn-root ::selection{ background: var(--or-vif); color: var(--encre); }
.dn :focus-visible, .dn-root :focus-visible{ outline: 2px solid var(--or); outline-offset: 3px; }

/* Reduced-motion / mode statique : la classe .static sur <html> est
   posée par denichor.js (prefers-reduced-motion ou ?static=1).
   Chaque composant animé DOIT avoir un état final propre sous .static. */
@media (prefers-reduced-motion: reduce){
  :root{ --micro-transition: 0ms linear; }
}