/* ==========================================================================
   FINAMI - Design tokens
   Source de verite : fichier Figma « finami » (fileKey bxzwtS2GVdgs1UAV2xJcOr),
   pages « DS » (couleurs, composants) et « Maquettes » (7 gabarits).

   Arbitrage du 2026-09-03 : **Figma fait foi.** Le prototype Claude Design,
   qui avait pris le dessus le 2026-08-28, ne correspondait pas aux maquettes
   (vert d'action au lieu du bleu nuit, pied de page blanc au lieu du degrade
   sombre, simulateur a la place des trois cartes produit du hero). Sa version
   du design system est conservee dans archive/prototype/.

   Toutes les valeurs ci-dessous sont relevees dans les maquettes, revalidees
   par le MCP Figma le 2026-09-03 (hero 216:2615, navbar 216:2602, chiffres
   216:2659, produits 216:2672, etapes 355:3094, avantages 216:2913, encart
   216:2963, pied de page 216:2967, mobile 216:2997).
   Les valeurs marquees [PROPOSE] n'existent pas dans Figma : elles completent
   une echelle incomplete (etats hover / focus / mouvement notamment).
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- COULEURS
     Rampes primitives - nommage aligne sur les variables Figma
     (Couleurs/Primaire/... et Couleurs/Secondaire/...)                      */

  /* Vert vitalite - vert clair de marque, fin du degrade, hover doux */
  --fn-vert-vitalite-50:  #edf7f0;
  --fn-vert-vitalite-100: #c7e7d0;
  --fn-vert-vitalite-200: #abdcb9;
  --fn-vert-vitalite-300: #85cb99;
  --fn-vert-vitalite-400: #6dc185;
  --fn-vert-vitalite-500: #49b267;
  --fn-vert-vitalite-600: #42a25e;
  --fn-vert-vitalite-700: #347e49;
  --fn-vert-vitalite-800: #286239;
  --fn-vert-vitalite-900: #1f4b2b;

  /* Vert jungle - vert-bleu, etape mediane du degrade de marque */
  --fn-vert-jungle-50:  #e8f0f1;
  --fn-vert-jungle-100: #b7d1d3;
  --fn-vert-jungle-200: #94babe;
  --fn-vert-jungle-300: #649ba1;
  --fn-vert-jungle-400: #45888e;
  --fn-vert-jungle-500: #176a72;
  --fn-vert-jungle-600: #156068;
  --fn-vert-jungle-700: #104b51;
  --fn-vert-jungle-800: #0d3a3f;
  --fn-vert-jungle-900: #0a2d30;

  /* Bleu horizon - couleur d'action et de fond sombre */
  --fn-bleu-horizon-50:  #e6eef2;  /* fond des tuiles d'icones */
  --fn-bleu-horizon-100: #e4f5ff;  /* fond des pastilles (hors echelle : + clair que -50) */
  --fn-bleu-horizon-200: #8bb0c5;
  --fn-bleu-horizon-300: #568cab;
  --fn-bleu-horizon-400: #35759a;
  --fn-bleu-horizon-500: #035381;  /* liens, textes secondaires sur carte */
  --fn-bleu-horizon-600: #034c75;
  --fn-bleu-horizon-700: #023b5c;
  --fn-bleu-horizon-800: #022e47;  /* CTA principal, etat selectionne */
  --fn-bleu-horizon-900: #012336;  /* fin du degrade de footer */

  /* Couleurs uniques (pas de rampe dans Figma) */
  --fn-vert-croissance-500: #3ca06c;  /* accent, sur-titres, succes */
  --fn-vert-equilibre-500:  #277e60;
  --fn-beige-100:           #f8f7f5;  /* [PROPOSE] cartes chiffres de l'accueil, demande du 2026-09-30 */
  --fn-beige-500:           #f0efe8;  /* fond editorial, encart legal */

  /* Orange - signalements et mises en avant secondaires */
  --fn-orange-50:  #fff5e6;
  --fn-orange-100: #ffe1b0;
  --fn-orange-200: #ffd28a;
  --fn-orange-300: #ffbd54;
  --fn-orange-400: #ffb133;
  --fn-orange-500: #ff9d00;
  --fn-orange-600: #e88f00;
  --fn-orange-700: #b56f00;
  --fn-orange-800: #8c5600;
  --fn-orange-900: #6b4200;

  /* Rouge - erreur de saisie. [PROPOSE] : le fichier Figma n'en definit AUCUN
     (ecart 7), sa variante « invalid » se contentant du gris desactive. Quatre
     echelons seulement, ceux dont l'encart d'erreur a besoin — inutile de
     dessiner une rampe de dix pour un etat. Teinte choisie pour tenir a cote
     du bleu nuit et de l'orange de signalement, et **mesuree** :
       - texte  -700 sur fond -50  = 7,79 (AAA, seuil 7)
       - filet  -500 sur la page   = 5,57 (seuil non-texte 3)                */
  --fn-rouge-50:  #fdecec;  /* [PROPOSE] fond de l'encart d'erreur */
  --fn-rouge-100: #f5c2c2;  /* [PROPOSE] filet clair */
  --fn-rouge-500: #c62828;  /* [PROPOSE] bordure du champ invalide */
  --fn-rouge-700: #8f1d1d;  /* [PROPOSE] encre de l'encart */

  /* Noir & gris - textes */
  --fn-noir-50:  #e6e7e8;
  --fn-noir-100: #b0b5b8;
  --fn-noir-200: #8a9195;
  --fn-noir-300: #545f65;
  --fn-noir-400: #334047;
  --fn-noir-500: #001019;
  --fn-noir-600: #000f17;
  --fn-noir-700: #000b12;
  --fn-noir-800: #00090e;
  --fn-noir-900: #00070b;

  /* Blanc & gris - surfaces et bordures */
  --fn-blanc-50:  #fefefe;
  --fn-blanc-500: #f2f2f2;
  --fn-blanc-600: #dcdcdc;
  --fn-blanc-700: #acacac;

  /* -------------------------------------------------------------- SEMANTIQUE
     A utiliser dans le code. Les primitives restent la seule source.        */

  /* Texte */
  --fn-text:              var(--fn-noir-500);
  --fn-text-secondary:    var(--fn-noir-300);
  --fn-text-muted:        var(--fn-noir-200);   /* dates, metadonnees */
  --fn-text-disabled:     var(--fn-noir-100);   /* placeholders */
  --fn-text-inverse:      var(--fn-blanc-50);
  --fn-text-on-dark-soft: var(--fn-blanc-500);
  --fn-text-link:         var(--fn-bleu-horizon-500);
  --fn-text-accent:       var(--fn-vert-croissance-500);

  /* Surfaces */
  --fn-surface-page:   var(--fn-blanc-50);
  --fn-surface-raised: #ffffff;
  --fn-surface-muted:  var(--fn-blanc-500);  /* boutons de nav inactifs */
  --fn-surface-sand:   var(--fn-beige-500);  /* fond editorial, encart legal */
  --fn-surface-sand-soft: var(--fn-beige-100);  /* [PROPOSE] cartes chiffres */
  --fn-surface-badge:  var(--fn-bleu-horizon-100);
  --fn-surface-icon:   var(--fn-bleu-horizon-50);
  --fn-surface-dark:   var(--fn-bleu-horizon-800);
  --fn-surface-glass:  rgba(255, 255, 255, 0.05); /* panneau du hero */
  --fn-scrim:          rgba(0, 0, 0, 0.5);        /* pastille sur image */
  --fn-overlay-hero:   rgba(0, 0, 0, 0.2);        /* voile du hero */

  /* Bordures */
  --fn-border-subtle: var(--fn-blanc-600);        /* filets du pied de page, separateurs */
  --fn-border-card:   #dbdbdb;                    /* cartes produit et « avantage » */
  --fn-border-strong: var(--fn-bleu-horizon-800); /* cartes chiffres cles */

  /* Etats */
  --fn-action-bg:          var(--fn-bleu-horizon-800);
  --fn-action-fg:          var(--fn-blanc-50);
  --fn-action-bg-hover:    var(--fn-bleu-horizon-700); /* [PROPOSE] */
  --fn-action-bg-active:   var(--fn-bleu-horizon-900); /* [PROPOSE] */
  --fn-choice-bg:          #ffffff;
  --fn-choice-bg-hover:    var(--fn-vert-vitalite-50);
  --fn-choice-bg-selected: var(--fn-bleu-horizon-800);
  --fn-choice-border-secondary: var(--fn-vert-croissance-500);
  --fn-disabled-bg:        var(--fn-blanc-700);
  --fn-disabled-fg:        var(--fn-blanc-500);
  /* Erreur de saisie, depuis le 2026-09-15. [PROPOSE] — voir la rampe rouge.
     Avant cette date un champ invalide prenait `--fn-disabled-bg`, c'est-a-dire
     l'aspect exact d'un champ **desactive** : le tunnel disait « on ne peut
     plus y toucher » la ou il voulait dire « corrigez ceci ». */
  --fn-error-bg:           var(--fn-rouge-50);   /* [PROPOSE] */
  --fn-error-border:       var(--fn-rouge-500);  /* [PROPOSE] */
  --fn-error-fg:           var(--fn-rouge-700);  /* [PROPOSE] */
  --fn-focus-ring:         var(--fn-bleu-horizon-500); /* [PROPOSE] */

  /* Degrades */
  --fn-gradient-brand: linear-gradient(175.75deg,
      #035381 0%, #176a72 25%, #277e60 50%, #3ca06c 75%, #49b267 100%);
  --fn-gradient-footer: linear-gradient(7.08deg,
      #011e2f 64.35%, #3da16b 148.22%, var(--fn-bleu-horizon-900) 185.23%);

  /* ------------------------------------------------------------ TYPOGRAPHIE */
  --fn-font-heading: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --fn-font-body:    "Lato", "Helvetica Neue", Arial, sans-serif;

  --fn-weight-regular: 400;
  --fn-weight-bold:    700;
  --fn-weight-xbold:   800;  /* Barlow ExtraBold : tous les titres */

  /* Interlettrage : -2 % sur tous les textes des maquettes, sans exception */
  --fn-tracking: -0.02em;

  --fn-size-10: 0.625rem;  /* 10px - legende de carte */
  --fn-size-12: 0.75rem;   /* 12px - mentions legales */
  --fn-size-14: 0.875rem;  /* 14px - texte courant */
  --fn-size-15: 0.9375rem; /* 15px - texte courant large (etapes) */
  --fn-size-16: 1rem;      /* 16px - nav, pastilles, intertitre de footer */
  --fn-size-18: 1.125rem;  /* 18px - chapo desktop */
  --fn-size-20: 1.25rem;   /* 20px - titre de carte */
  --fn-size-22: 1.375rem;  /* 22px - intertitre editorial (.fn-prose h2) */
  /* 26px : le titre d'un article. Releve le 2026-09-08 dans « Article »
     (400:1400 / 400:1800) et confirme deux fois — la boite vaut 62 en
     desktop (2 lignes) et 93 en mobile (3 lignes), soit un pitch de 31 aux
     deux largeurs, et 31 / 1,1875 = 26,1 ; la hauteur de capitale mesuree
     sur la capture 1:1 vaut 19, soit 26 x 0,73. Aucune bascule : le meme
     corps en 390 et en 1920, comme tout le reste d'une page editoriale. */
  --fn-size-26: 1.625rem;  /* 26px - titre d'article */
  --fn-size-28: 1.75rem;   /* 28px - titre de section, mobile */
  --fn-size-30: 1.875rem;  /* 30px - valeur de champ, menu burger */
  --fn-size-32: 2rem;      /* 32px - titre de section */
  --fn-size-36: 2.25rem;   /* 36px - titre de page, mobile */
  --fn-size-42: 2.625rem;  /* 42px - chiffre cle */
  --fn-size-52: 3.25rem;   /* 52px - titre du hero et titre de page, desktop */
  --fn-size-92: 5.75rem;   /* 92px - 404 */

  --fn-leading-tight: 1.1;       /* titres (« normal » dans Figma) */
  --fn-leading-badge: 0.875rem;  /* 14px */
  /* Interlignage « auto » de Barlow ExtraBold, tel que Figma le calcule :
     22 -> 26,125 (boite 26), 36 -> 42,75 (43), 52 -> 61,75 (62). Les trois
     boites relevees dans « Mentions legales » tombent sur ce seul rapport. */
  --fn-leading-barlow: 1.1875;
  /* Interlignage « auto » de **Lato**, le pendant du precedent : 20 -> 24
     (boite 24 du titre de carte, 216:2687) et 42 -> 50,4 (boite 50 du chiffre
     cle, 216:2661). Lato declare 1974 d'ascendante et 426 de descendante sur
     2000 d'em, soit 1,2 tout rond. `--fn-leading-tight` (1,1) rendait ces
     deux boites 2 et 4 px trop courtes — c'est l'ecart 32, cote Lato. */
  --fn-leading-lato: 1.2;
  --fn-leading-body:  1.25rem;   /* 20px */
  --fn-leading-prose: 1.375rem;  /* 22px */
  --fn-leading-large: 1.5rem;    /* 24px */
  --fn-leading-list:  1.875rem;  /* 30px - liens de footer */

  /* --------------------------------------------------------------- ESPACES
     Trame de 10 px, avec des pas de 4/6/14/16 pour les controles.           */
  --fn-space-2:  0.125rem;
  --fn-space-4:  0.25rem;
  --fn-space-6:  0.375rem;
  --fn-space-10: 0.625rem;
  --fn-space-12: 0.75rem;   /* retrait lateral de la pastille de categorie (26) */
  --fn-space-14: 0.875rem;
  --fn-space-16: 1rem;
  --fn-space-17: 1.0625rem; /* gap icone / texte des cartes produit */
  --fn-space-20: 1.25rem;
  --fn-space-30: 1.875rem;
  --fn-space-40: 2.5rem;
  --fn-space-50: 3.125rem;
  --fn-space-60: 3.75rem;
  --fn-space-70: 4.375rem;  /* 70px - respiration de la section « avantages » */

  /* ---------------------------------------------------------------- FORMES */
  --fn-radius-control: 4px;   /* boutons, champs, tuiles d'icones, cases */
  --fn-radius-tile:    6px;   /* petite carte du hero */
  --fn-radius-media:   8px;   /* images internes, blocs de footer */
  --fn-radius-card:    10px;  /* cartes, panneaux, visuels d'article */
  --fn-radius-pill:    30px;  /* pastille de section */
  --fn-radius-chip:    40px;  /* pastille « temps de lecture » */
  --fn-radius-full:    999px;

  --fn-border-width: 1px;

  /* --------------------------------------------------------------- OMBRES
     Les trois ombres sont toutes centrees (offset 0 0), diffuses.           */
  --fn-shadow-sm: 0 0 14px 0 rgba(0, 0, 0, 0.14); /* navbar, boutons flottants */
  --fn-shadow-md: 0 0 44px 0 rgba(0, 0, 0, 0.10); /* panneau du hero */
  --fn-shadow-lg: 0 0 50px 0 rgba(0, 0, 0, 0.06); /* carte « etapes » */

  /* ---------------------------------------------------------------- LAYOUT */
  --fn-container:       1200px; /* 1920 - 2 x 360 */
  --fn-container-wide:  1160px; /* sections a padding 380 */
  --fn-container-prose: 800px;  /* pages editoriales (1920 - 2 x 560) */
  /* Troisieme grille plus etroite que le conteneur, apres celle des etapes
     (1025) et celle des avantages (1078) : l'index du blog et la bande
     « Articoli correlati » posent leurs cartes dans 1073,3334 = 4 x 253,3333
     + 3 x 20 (387:1262 et 400:1737, tous deux a x = 423,33). Les boutons
     fleches du carrousel tiennent dans ce qui reste du conteneur.

     ⚠️ **1073,3334 et non 1074**, corrige le 2026-09-10. La valeur portait
     1074 avec le commentaire « 4 x 253,33 + 3 x 20 », qui ne s'y referme pas :
     4 x 253,33 + 60 = 1073,32. Les deux boites du fichier valent 1073,3334, et
     l'arrondi a 1074 donnait des colonnes de 253,5 au lieu de 253,3333 — d'ou
     le **+0,09** que la table de controle du README portait sur quatre lignes
     a la fois : vignette 142,59 pour 142,5, carte de grille 276,59 pour 276,5,
     `.fn-blog__list` 340,59 pour 340,5, corps de l'index 1150,97 pour 1150,5.
     Une seule cause, un seul correctif. */
  --fn-container-blog:  1073.3334px; /* index du blog et articles correles */
  --fn-gutter:          var(--fn-space-20); /* marge laterale mobile */
  --fn-section-py:      var(--fn-space-50);
  --fn-navbar-height:   96px;

  /* -------------------------------------------------------------- ICONES
     Bibliotheque : Lucide. Tailles relevees : 14 / 16 / 20 / 24 / 30 px,
     dans des tuiles de 40 px (icone a 50 % du conteneur).                   */
  --fn-icon-xs: 14px;
  --fn-icon-sm: 16px;
  --fn-icon-md: 20px;
  --fn-icon-lg: 24px;
  --fn-icon-xl: 30px;
  --fn-icon-tile: 40px;     /* raccourcis du hero */
  --fn-icon-tile-lg: 48px;  /* cartes « avantage » */

  /* ------------------------------------------------------------- MOUVEMENT
     Aucune transition n'est specifiee dans Figma. [PROPOSE]                 */
  --fn-duration: 160ms;
  --fn-easing: cubic-bezier(0.2, 0, 0.2, 1);
  /* Mouvements du tunnel, repris du prototype du 2026-10-15 [PROPOSE] :
     entree d'etape et barre de progression (sortie douce), puis pastilles
     de validation (ressort, qui depasse un peu avant de se poser). */
  --fn-duration-step: 450ms;
  --fn-duration-progress: 600ms;
  --fn-easing-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --fn-easing-spring: cubic-bezier(0.3, 1.6, 0.5, 1);

  /* ---------------------------------------------------------------- POINTS
     Maquettes fournies en 1920 (desktop) et 390 (iPhone 13/14).             */
  --fn-bp-md: 768px;
  --fn-bp-lg: 1024px;
  --fn-bp-xl: 1280px;
}