/* ============================================================
   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;

  /* Plafond porté de 3,6 à 5,2 rem. Un h1 de 57 px dans une colonne
     de 1380 px n'a pas la prestance des concepts, qui montent à 154 px.
     On ne va pas jusque-là — un site d'agence n'est pas une vitrine de
     produit — mais 83 px tiennent l'écran. */
  --t-display:    clamp(2.4rem, 5.2vw, 5.2rem);
  --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.8125rem;    /* 13 px — relevé de 12 px le 9 septembre : trop discret sur un grand écran */
  --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);

  /* 9 septembre — porté de 1200 à 1380 px. Sur un écran de 1930 px,
     1200 px laissait 365 px de vide de chaque côté : le site paraissait
     étroit à côté des concepts qu'il présente, tous en plein cadre.
     Le corps de texte reste borné par ses propres max-width en `ch`,
     donc les lignes ne s'allongent pas. */
  --page-max: 1380px;
  --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 */

  /* RÉVISION 6 septembre 2026 — système de mouvement.
     Le site vend des sites Web : l'immobilité se lit comme un gabarit
     acheté. Le mouvement est donc une PREUVE, pas une décoration, et il
     obéit aux mêmes règles d'économie que le rouge.

     Trois courbes seulement, comme il n'y a que trois rayons :
     · --ease        le survol, court et neutre ;
     · --ease-out    l'apparition — départ franc, dépose lente. C'est la
                     courbe qui fait la différence entre « ça bouge » et
                     « c'est bien fait » ;
     · --ease-spring un léger dépassement, réservé aux pastilles et aux
                     points de la séquence d'automatisation.               */

  --ease-out:    cubic-bezier(0.16, 1, 0.30, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-reveal: 1000ms;   /* apparition d'un bloc au défilement */
  --dur-word:   920ms;    /* remontée d'un mot de titre sous son masque */
  --dur-draw:   760ms;    /* tracé d'un filet */

  /* Décalage entre deux éléments d'une même série. Au-delà de 110 ms la
     page paraît lente ; en deçà de 45 ms la série se lit comme un bloc.
     7 sept. : relevés d'un cran — à 34 ms la vague sur un titre se lisait
     comme une simple apparition, l'effet ne se voyait pas. */
  --stagger:      86ms;
  --stagger-word: 48ms;

  /* Amplitudes. Ce sont elles, plus que les durées, qui décident si un
     mouvement se REMARQUE ou passe inaperçu. */
  --rise-block:  34px;    /* un bloc de texte qui monte */
  --rise-object: 64px;    /* une maquette, un portrait : plus lourd, va plus loin */
  --tilt-max:    5deg;    /* bascule des maquettes du panneau ivoire */

  --rotate-tab: 6200ms;   /* rotation automatique des onglets de démonstration */
}