/* ============================================================
   JETONS — legroun.fr
   Source unique de toute valeur du site. Aucun composant
   n'écrit une couleur, une taille ou une durée.

   Le site est SOMBRE : --bg est l'encre, --ink est le papier.
   Le clair est une exception locale, obtenue par .inverse.
   ============================================================ */

:root{

  /* --- ENCRE ET PAPIER --------------------------------------
     Aucune teinte. Toute la page vit dans ces valeurs.        */
  --bg:         #0b0c0c;   /* l'encre : fond du site */
  --bg-leve:    #131515;   /* bloc posé sur l'encre */
  --bg-creux:   #080909;   /* champ, retrait */

  --ink:        #f2f1ec;   /* le papier : texte principal */
  --ink-2:      #a6a8a3;   /* texte secondaire */
  --ink-3:      #8a8d89;   /* mention, légende — 5,8:1 sur l’encre (AA) */

  --rule:       #232626;   /* filet */
  --rule-fort:  #636764;   /* bordure de champ — 3,2:1, seuil des composants */

  --focus:      #f2f1ec;   /* anneau de focus, une seule expression */

  /* --- ÉTATS ------------------------------------------------
     LES SEULES COULEURS DU SITE.
     Réservées à une information qui porte un état.
     Aucune section décorative n'y accède : le seul point
     d'entrée est la classe .etat, définie dans base.css.      */
  --etat-verifie:         #5ca97c;
  --etat-verifie-fond:    #16241d;
  --etat-hypothese:       #c9a154;
  --etat-hypothese-fond:  #241f14;
  --etat-non-verifie:     #8a8d89;
  --etat-non-verifie-fond:#1a1c1c;

  /* --- TYPOGRAPHIE -----------------------------------------
     Archivo 700 : titres et logotype.
     Source Serif 4 : lecture.
     IBM Plex Mono : données, URL, états.
     Polices hébergées localement — voir styles/polices.css.  */
  --font-titre:  'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-texte:  'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono:   'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Échelle fluide : 375px → 1440px, sans palier brutal.
     Le titre d'ouverture remplit l'écran. */
  --fs-ecran: clamp(2.75rem, 1.6rem + 5.6vw, 7rem);
  --fs-h1:    clamp(2rem, 1.4rem + 2.9vw, 4rem);
  --fs-h2:    clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  --fs-h3:    clamp(1.15rem, 1.04rem + 0.5vw, 1.5rem);
  --fs-lede:  clamp(1.06rem, 1rem + 0.35vw, 1.3rem);
  --fs-body:  clamp(1rem, 0.97rem + 0.15vw, 1.09rem);
  --fs-small: 0.9375rem;
  --fs-micro: 0.8125rem;
  --fs-nano:  0.75rem;

  --lh-ecran: 0.98;
  --lh-titre: 1.1;
  --lh-body:  1.6;

  --ls-ecran: -0.035em;
  --ls-titre: -0.022em;
  --ls-caps:  0.11em;

  --fw-normal: 400;
  --fw-moyen:  500;
  --fw-gras:   700;

  --mesure:       36rem;   /* longueur de ligne confortable */
  --mesure-court: 27rem;

  /* --- ESPACEMENT — base 4px ------------------------------- */
  --e-1: 4px;   --e-2: 8px;   --e-3: 12px;  --e-4: 16px;
  --e-5: 20px;  --e-6: 24px;  --e-8: 32px;  --e-10: 40px;
  --e-12: 48px; --e-16: 64px; --e-20: 80px; --e-24: 96px;
  --e-32: 128px; --e-40: 160px;

  --marge-page: 20px;
  --contenant:  1240px;
  --tap-min:    44px;
  --entete-h:   64px;

  /* Un bloc plein écran. svh : la barre du navigateur mobile
     ne fait pas sauter la hauteur. */
  --plein-ecran: 100svh;

  /* --- FORMES ---------------------------------------------- */
  --r-0: 0px;  --r-1: 2px;  --r-2: 6px;  --r-3: 10px;  --r-4: 16px;
  --r-rond: 999px;
  --trait: 1px;
  --trait-fort: 2px;

  /* --- MOUVEMENT -------------------------------------------
     Trois durées, une seule courbe. Aucune milliseconde
     n'est écrite ailleurs dans le site.                       */
  --t-reaction: 130ms;   /* réponse immédiate à un geste */
  --t-etat:     280ms;   /* changement d'état */
  --t-entree:   620ms;   /* entrée composée */
  --courbe:     cubic-bezier(.22,.68,.28,1);
  --cascade:    60ms;    /* décalage entre deux éléments d'un groupe */

  --pause-recit: 900ms;  /* temps de lecture de l'impasse, pas une animation */
  --t-appel:    2600ms;  /* respiration du bouton tant qu'on ne l'a pas touché */

  --glisse: 8px;          /* décalage d'apparition — jamais d'opacité nulle */
  --glisse-section: 26px; /* décalage des en-têtes, piloté par le défilement */
  --glisse-carte:   34px; /* levée des cartes en grille */
  --parallaxe:      56px; /* écart entre les deux plans du premier écran */
  --t-balayage:    1100ms; /* balayage du titre à l’arrivée */
  --lettre-pas:     11ms; /* décalage entre deux lettres à l’arrivée */
  --lettre-eteinte: .07;  /* opacité d’une lettre pas encore atteinte */
  --trace:  1400ms;      /* tracé du signe, joué une seule fois */
}

/* ------------------------------------------------------------
   INVERSION LOCALE — le clair, réservé à un ou deux moments.
   On échange encre et papier ; rien d'autre ne bouge.
   ------------------------------------------------------------ */
.inverse{
  --bg:        #f2f1ec;
  --bg-leve:   #ffffff;
  --bg-creux:  #e7e5de;
  --ink:       #0b0c0c;
  --ink-2:     #4a4d4a;
  --ink-3:     #7c807c;
  --rule:      #dedbd2;
  --rule-fort: #bcb9ae;
  --focus:     #0b0c0c;

  --etat-verifie:         #2f7d5b;
  --etat-verifie-fond:    #e6efe9;
  --etat-hypothese:       #8a6212;
  --etat-hypothese-fond:  #f3ecdd;
  --etat-non-verifie:     #6e716d;
  --etat-non-verifie-fond:#e9e7e0;
}

/* ------------------------------------------------------------
   MOUVEMENT RÉDUIT — un mode, pas une désactivation.
   Les durées tombent, les transformations deviennent des
   changements d'état instantanés, la page garde toute son
   information et toutes ses commandes.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  :root{
    --t-reaction: 1ms;
    --t-etat:     1ms;
    --t-entree:   1ms;
    --cascade:    0ms;
    --glisse:         0px;
    --glisse-section: 0px;
    --glisse-carte:   0px;
    --parallaxe:      0px;
    --lettre-eteinte: 1;
    --lettre-pas:     0ms;
    --t-balayage:     1ms;
    --trace:      1ms;
  }
}