/* ============================================================
   D3RF -- tokens.css
   Systeme de variables unique du site. Version 1.0 (01/08/2026)
   Auteur : forge-da. Reference : STYLE_GUIDE.md

   ORDRE DE CHARGEMENT OBLIGATOIRE
   1. tokens.css          (ce fichier)
   2. base.css
   3. logo-animation.css     [GELE, ne pas toucher]
   4. text-animations-v4.css [GELE, ne pas toucher]
   5. layout.css
   6. v4-styles.css
   7. pages/*.css

   REGLE : ce fichier ETEND l'existant, il ne renomme rien.
   Tous les noms deja utilises dans v4-styles.css sont repris
   a l'identique, avec les memes valeurs. Le bloc :root duplique
   en tete de v4-styles.css (lignes 20 a 59) doit etre supprime
   une fois tokens.css charge, dans cet ordre et pas avant.
   ============================================================ */

:root {

  /* ==========================================================
     1. COULEURS -- existantes, valeurs inchangees
     ========================================================== */

  /* Fond et surfaces */
  --bg-primary:      #FAFAF8;   /* fond global, warm shift */
  --bg-surface:      #FFFFFF;   /* cards et modales UNIQUEMENT, jamais un fond de page */
  --bg-elevated:     #F7F7F5;   /* zones internes de card */
  --bg-section-alt:  #F4F3F0;   /* sections alternees */

  /* Bordures */
  --border:          #E0DED8;
  --border-hover:    #C8C5BC;

  /* Noeuds et connexions */
  --node-default:    #BDB9AE;
  --node-active:     #0A0A0A;
  --line-default:    #CFCBC2;
  --line-active:     #0A0A0A;

  /* Texte */
  --text-primary:    #1A1A18;
  --text-secondary:  #6B6960;
  --text-muted:      #6F6C65;
  --text-code:       #4A4840;

  /* Effets */
  --glow:               rgba(10, 10, 10, 0.06);
  --shadow-card:        0 2px 12px rgba(10, 10, 10, 0.06);
  --shadow-card-hover:  0 12px 40px rgba(10, 10, 10, 0.08);
  --shadow-modal:       0 32px 80px rgba(10, 10, 10, 0.16);

  /* ==========================================================
     2. COULEURS -- ajouts v5
     ========================================================== */

  /* Focus visible. Un seul anneau pour tout le site. */
  --focus-ring:        0 0 0 2px var(--bg-primary), 0 0 0 4px var(--text-primary);
  --focus-outline:     2px solid var(--text-primary);
  --focus-offset:      3px;

  /* Statuts de fiche projet. Une seule couleur semantique (le vert
     de SHIPPED). Les trois autres restent dans la famille neutre
     chaude : la difference se lit par la FORME du point, pas par
     la teinte. Verifie au test de reduction (lisible en N et B). */
  --status-shipped:    #10B981;
  --status-built:      #4A4840;
  --status-explored:   #6B6960;
  --status-spark:      #C8C5BC;

  /* Selection de texte */
  --selection-bg:      rgba(10, 10, 10, 0.10);

  /* Accents par projet. Solides, jamais en degrade.
     Consommes via --card-accent sur .project-card. */
  --accent-gpswitch:   #3B82F6;
  --accent-toutvamal:  #EF4444;
  --accent-dataspy:    #8B5CF6;
  --accent-homesync:   #10B981;
  --accent-overth1nk:  #F59E0B;
  --accent-spothuman:  #EC4899;
  --accent-31337:      #6B7280;
  --accent-villages:   #D97706;
  --accent-enumalon:   #1E40AF;
  --accent-atelier:    #0A0A0A;

  /* ==========================================================
     3. TYPOGRAPHIE
     Deux familles, zero exception. KoHo porte la voix,
     JetBrains Mono porte les instruments de mesure.
     ========================================================== */

  --font-display: 'KoHo', 'Trebuchet MS', sans-serif;
  --font-body:    'KoHo', 'Trebuchet MS', sans-serif;
  --font-mono:    'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;

  /* Graisses autorisees. Aucune autre. */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* Echelle typographique appliquee.
     Ratio 1.25 au plancher mobile, 1.333 au plafond desktop.
     Le plancher est toujours >= 16px sur le corps de texte. */
  --fs-d1:     clamp(2.40rem, 1.60rem + 3.40vw, 4.20rem);  /* titre de page */
  --fs-d2:     clamp(1.80rem, 1.35rem + 1.90vw, 2.80rem);  /* .section-title, valeur historique conservee */
  --fs-h3:     clamp(1.25rem, 1.10rem + 0.65vw, 1.60rem);  /* sous-section, titre de porte */
  --fs-h4:     clamp(1.00rem, 0.95rem + 0.28vw, 1.15rem);  /* .card-title */
  --fs-lead:   clamp(1.05rem, 0.98rem + 0.38vw, 1.25rem);  /* chapo, manifeste */
  --fs-body:   clamp(1.00rem, 0.96rem + 0.16vw, 1.05rem);  /* paragraphe courant, plancher 16px */
  --fs-small:  0.85rem;                                     /* .card-pitch */
  --fs-mono-l: 0.75rem;                                     /* .nav-item-label */
  --fs-mono-m: 0.65rem;                                     /* .section-label, .filter-pill */
  --fs-mono-s: 0.55rem;                                     /* .card-tag, .card-status */

  /* Hauteurs de ligne. Plus le corps est gros, plus la ligne serre. */
  --lh-display:  1.10;
  --lh-title:    1.20;
  --lh-body:     1.60;
  --lh-compact:  1.40;
  --lh-mono:     1.30;

  /* Interlettrage. Le mono est toujours espace, jamais le KoHo de corps. */
  --ls-display:  -0.02em;
  --ls-title:    -0.01em;
  --ls-body:      0;
  --ls-mono:      0.10em;
  --ls-mono-wide: 0.15em;

  /* Longueur de ligne. Au dela, l oeil perd la ligne suivante. */
  --measure-prose:  68ch;
  --measure-lead:   46ch;
  --measure-short:  32ch;

  /* ==========================================================
     4. ESPACEMENTS
     Base 4px. Aucune valeur hors echelle dans le CSS de page.
     ========================================================== */

  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10: 128px;

  /* Respirations fluides */
  --section-padding: clamp(80px, 10vw, 140px);          /* existant, conserve */
  --block-gap:       clamp(var(--space-6), 5vw, var(--space-8));
  --header-gap:      clamp(40px, 6vw, 80px);            /* .section-header, conserve */
  --gutter:          clamp(20px, 5vw, 60px);            /* .container, conserve */
  --grid-gap:        24px;                              /* existant, conserve */

  /* ==========================================================
     5. LARGEURS ET GRILLE
     ========================================================== */

  --container-max:    1200px;   /* existant, defaut */
  --container-wide:   1360px;   /* /projets/ a partir de 1440px */
  --container-narrow:  760px;   /* pages de prose : manifeste, a propos, fiche */

  --grid-cols-wide:    4;   /* >= 1440px */
  --grid-cols-desktop: 3;   /* 1024 a 1439px */
  --grid-cols-tablet:  2;   /* 768 a 1023px */
  --grid-cols-mobile:  1;   /* < 768px */

  /* Rayons. Plafond 16px, sauf cercles. */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-pill: 999px;

  /* Bordures */
  --stroke-hair:  1px;
  --stroke-node:  1.5px;
  --stroke-logo:  5px;   /* trait des cercles du logo, ne pas changer */

  /* ==========================================================
     6. NAVIGATION CONSTELLATION
     Geometrie en pourcentages. Une largeur fixe ne peut plus
     exister ici : c est ce qui produisait le debordement mobile.
     ========================================================== */

  --nav-size:          48px;   /* existant, bouton declencheur */
  --nav-node:          26px;   /* diametre noeud desktop */
  --nav-node-mobile:   22px;   /* diametre noeud mobile */
  --nav-label-gap:     12px;   /* desktop */
  --nav-label-gap-m:   10px;   /* mobile */
  --nav-gutter:        clamp(16px, 6vw, 40px);   /* marge laterale de la scene */
  --nav-stage-top:     15vh;
  --nav-stage-bottom:  12vh;
  --nav-backdrop:      rgba(250, 250, 248, 0.70);
  --nav-blur:          3px;

  /* ==========================================================
     7. MOUVEMENT
     Trois courbes existantes, deux ajouts. Aucune courbe lineaire.
     ========================================================== */

  --ease-card:    cubic-bezier(0.25, 0.46, 0.45, 0.94);  /* existant : deplacement, opacite */
  --ease-expand:  cubic-bezier(0.34, 1.56, 0.64, 1);     /* existant : apparition, rebond contenu */
  --ease-menu:    cubic-bezier(0.34, 1.56, 0.64, 1);     /* existant : constellation */
  --ease-out:     cubic-bezier(0.16, 1, 0.30, 1);        /* ajout : sortie longue, scroll reveal */
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);        /* ajout : aller-retour, filtres */

  /* Durees. Cinq paliers, rien entre les deux. */
  --dur-instant:  120ms;   /* changement d etat pur : couleur, opacite d un pill */
  --dur-fast:     250ms;   /* hover, focus, micro-interaction */
  --dur-base:     400ms;   /* card hover, transformation locale */
  --dur-slow:     600ms;   /* reveal au scroll, trace SVG */
  --dur-scene:    800ms;   /* deploiement constellation, trace de frise */

  /* Decalages en cascade */
  --stagger-tight:  50ms;
  --stagger-base:   80ms;

  /* Plans */
  --z-base:      1;
  --z-sticky:   90;
  --z-overlay: 999;
  --z-trigger:1000;
  --z-modal:  1100;
}

/* ============================================================
   TYPES DE BASE
   Reset minimal pour les pages sans #hero (qui n'incluent pas base.css,
   exclusif au hero -- cf. gabarits /projets/, /lab-notes/, /a-propos/).
   Sans effet sur le hero : base.css charge son propre reset avant celui-ci.
   ============================================================ */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

::selection { background: var(--selection-bg); }

:where(a, button, [tabindex]):focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-xs);
}

/* ============================================================
   MOUVEMENT REDUIT
   Portee volontairement limitee. Le hero n est PAS cible :
   ses quatre fichiers sont geles et gerent deja leur propre
   regle prefers-reduced-motion. Ne jamais elargir ce selecteur
   a #hero ni a * sans repasser par forge-da.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .nav-overlay *,
  .section-wrapper *,
  .page-header *,
  .site-footer * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* L opacite reste animee : sans elle, les elements reveles au
     scroll resteraient invisibles. */
  .reveal-on-scroll,
  .nav-item,
  .timeline-entry {
    opacity: 1 !important;
    transform: none !important;
  }
  .nav-line,
  .timeline-spine-path {
    stroke-dashoffset: 0 !important;
  }
}

  /* 3bis v2 (01/08) : respiration verticale du hero empile */
:root {
  --hero-gap: clamp(16px, 3vh, 32px);
  --hero-sep-gap: 16px;   /* 3bis v3 : gouttiere du connecteur */
  --hero-sep-node: 8px;   /* 3bis v3 : diametre des ronds */
}