/* ============================================================
   PICBOIS47 — JETONS DE DESIGN
   Source unique de vérité. Aucune valeur codée en dur ailleurs.
   Dérivé de : Sequence [STRUCTURE] · Resend [PERSONNALITÉ] · n8n [OUVERTURE]
   Direction retenue : B « La preuve » — fond sombre, une seule marque rouge.

   RÉVISION 31 août 2026 — application de AUDIT_2026-08-31.md :
   · contraste des textes relevé (priorité 9) ;
   · corps de texte minimal porté à 16 px (priorité 9) ;
   · deux surfaces ajoutées pour casser la monotonie du fond (priorité 8) :
     une bande brun-noir plus claire, et un grand panneau ivoire.
   ============================================================ */

:root {

  /* --- SURFACES -------------------------------------------------
     Noir CHAUD, jamais violet. Le violet est la signature de n8n et
     le premier signe d'un site généré. L'élévation se fait par la
     couleur et le filet, jamais par une ombre. [n8n]                */

  --canvas:      #131110;   /* fond de page */
  --band:        #1e1a17;   /* bande de section, un cran plus claire */
  --surface:     #1c1917;   /* cartes, panneaux */
  --surface-2:   #242020;   /* boutons fantômes, survol */
  --line:        #2f2a26;   /* filet 1px — l'ossature [Resend] */
  --line-strong: #453e39;   /* filet au survol */

  /* --- LE PANNEAU IVOIRE ----------------------------------------
     Une seule section du site quitte le fond sombre : les projets
     conceptuels. C'est le sommet visuel de la page, et le contraste
     de surface est ce qui le crée. [audit — priorité 8]
     Les papiers des concepts se posent DESSUS, jamais dessous :
     le panneau est volontairement plus foncé que le plus foncé
     des trois papiers, pour que les maquettes flottent.            */

  --panel:       #e9e3d9;   /* le panneau lui-même */
  --panel-ink:   #201d19;   /* titres — 13.2:1 */
  --panel-text:  #55504a;   /* corps — 6.3:1 */
  --panel-muted: #6b645b;   /* étiquettes — 4.6:1 */
  --panel-line:  #d3ccc0;

  /* --- TEXTE ----------------------------------------------------
     Jamais de blanc pur en corps de texte sur fond sombre. [n8n]
     Contrastes relevés le 31 août : le corps passe de 8.4:1 à 10.3:1
     et les étiquettes de 4.6:1 à 6.3:1. [audit — priorité 9]        */

  --ink:    #f2efe9;   /* titres, haute emphase — 16.4:1 */
  --text:   #c6bfb6;   /* corps — 10.3:1 sur canvas */
  --muted:  #9c948a;   /* étiquettes, légendes — 6.3:1 sur canvas */

  /* --- ACCENT ---------------------------------------------------
     UN SEUL élément rouge par écran — EN DEHORS DU LOGO.
     Le logo est une constante de marque, pas un accent d'interface :
     son point de joint et son « 47 » portent le rouge en permanence
     et ne comptent pas dans la règle.
     Ne remplit jamais une section, un bandeau ou un titre.
     Aucun dégradé : le dégradé est la signature de n8n.

     31 août — le soulignement rouge était employé quatre fois et
     finissait par ressembler à un correcteur orthographique. Il ne
     reste qu'UNE seule occurrence sur toute la page. Ailleurs, le
     rouge ne sert plus qu'au bouton principal et au marquage de
     l'étape où une personne reprend la décision. [audit §8]         */

  --red:       #d8321f;   /* texte blanc dessus = 4.78:1, AA */
  --red-hover: #e8412c;
  --red-ring:  rgba(216, 50, 31, 0.45);

  /* --- TYPOGRAPHIE ---------------------------------------------- */

  --f-sans:  "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --f-serif: "Instrument Serif", Georgia, serif;
  --f-mono:  "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --t-display:    clamp(2.4rem, 5.2vw, 3.6rem);
  --t-display-lh: 1.0;
  --t-display-ls: -0.032em;

  --t-lead:    clamp(1.0625rem, 1.35vw, 1.1875rem);
  --t-body:    1rem;         /* 16 px — plancher du corps de texte */
  --t-small:   0.9375rem;    /* 15 px — navigation et second plan seulement */
  --t-label:   0.75rem;      /* 12 px — étiquettes mono, relevé de 11 px */
  --t-label-ls: 0.15em;

  /* --- ESPACE ET FORME ------------------------------------------
     Base 8px, densité confortable. [n8n]
     Trois rayons seulement — jamais un quatrième. [Sequence]         */

  --sp-1: 8px;   --sp-2: 16px;  --sp-3: 24px;  --sp-4: 32px;
  --sp-5: 48px;  --sp-6: 64px;  --sp-7: 80px;  --sp-8: 112px;

  --r-button: 6px;
  --r-card:   10px;
  --r-pill:   9999px;

  /* Seule ombre du système. Réservée aux maquettes de concepts, qui
     doivent lire comme un site qui flotte au-dessus de la page.
     Partout ailleurs, l'élévation se fait au filet. [Sequence]      */
  --shadow-float:
    0 1px 2px rgba(32, 29, 25, 0.10),
    0 8px 18px rgba(32, 29, 25, 0.12),
    0 26px 50px rgba(32, 29, 25, 0.16);

  --page-max: 1200px;
  --gutter:   clamp(1.15rem, 4vw, 2.5rem);
  --nav-h:    76px;

  /* --- MOUVEMENT ------------------------------------------------ */

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:  150ms;          /* survol [Resend] */
  --dur-enter: 620ms;     /* entrée du héros */
}