/* ══════════════════════════════════════════════════════════════════════════
   SOCLE — les jetons du relief Sylen
   Chargé en PREMIER, avant toute autre feuille. Site et application
   partagent désormais ces valeurs.

   D'où elles viennent. Deux systèmes coexistaient : l'application sur un
   bleu-gris froid (#E8EDF2, ombre 163/177/198), le site sur un ivoire chaud
   (#F2F2F3, ombre 150/130/102). Ce n'était pas qu'une différence de couleur
   — l'application empilait CINQ couches par niveau de relief là où le site
   n'en empilait que deux, et ses touches avaient donc une épaisseur que
   celles du site n'avaient pas.

   Deux arbitrages successifs. Le 09/09/2026 au matin, on garde la TECHNIQUE
   de l'application — les cinq couches — et on la porte partout. Le même jour,
   après essai grandeur nature, l'ivoire est écarté : trop chaud, trop
   présent sur les grandes surfaces de fond. Le sol devient un gris
   parfaitement neutre, sans dominante. Le relief, lui, reste : c'est lui
   qui porte la barre à trois plaques, les gorges, les touches enfoncées,
   les puits d'image et les champs creusés, des deux côtés.

   Les cinq couches d'un niveau extrudé, dans l'ordre :
     1. une ombre de CONTACT, serrée, qui pose l'objet au sol ;
     2. une ombre LOINTAINE, diffuse, qui donne le volume ;
     3. la LUMIÈRE opposée, qui creuse le côté éclairé ;
     4. un filet clair en HAUT, l'arête qui accroche la lumière ;
     5. un filet sombre en BAS, l'arête dans l'ombre.
   Retirer les couches 4 et 5 suffit à rendre une surface molle : ce sont
   elles qui dessinent le bord.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Le sol et les surfaces ── */
  --sol:        #F2F2F3;
  --sol-creuse: #E9E9EB;
  --sol-haut:   #FBFBFC;

  /* Gradients de MATIÈRE — même teinte, moins de 5 points de luminance
     d'écart, sur la face d'une surface. Mesurés : 4,84 et 2,81 L*. */
  --face:       linear-gradient(148deg, #FDFDFE 0%, #EFEFF1 100%);
  --face-creuse:linear-gradient(148deg, #E5E5E7 0%, #EDEDEF 100%);

  /* ── L'encre ── */
  --encre:   #191919;
  --encre-2: #55555A;
  --encre-3: #8B8B90;

  /* ── Les teintes d'accent, recalculées sur le sol gris ── */
  --tint-bleu:   #DAE8F4;
  --tint-rose:   #F3E8F2;
  --tint-indigo: #E4E4F3;
  --tint-ambre:  #F3E4DF;
  --tint-vert:   #DAEFE8;

  /* ── Les deux teintes du relief ──
     L'ombre suit le sol : sur un gris neutre elle est grise, pas brune. */
  --neu-lo: 120, 120, 128;
  --neu-hi: 255, 255, 255;

  /* ── Extrudé, trois intensités ── */
  --neu-1:
    1px 1px 2px rgba(var(--neu-lo), 0.18),
    3px 3px 8px rgba(var(--neu-lo), 0.28),
    -3px -3px 7px rgba(var(--neu-hi), 0.60),
    inset 0 1px 0 rgba(var(--neu-hi), 0.32);
  --neu-2:
    1px 1px 2px rgba(var(--neu-lo), 0.20),
    5px 5px 13px rgba(var(--neu-lo), 0.36),
    -5px -5px 13px rgba(var(--neu-hi), 0.85),
    inset 0 1px 0 rgba(var(--neu-hi), 0.45),
    inset 0 -1px 0 rgba(var(--neu-lo), 0.14);
  --neu-3:
    1px 1px 2px rgba(var(--neu-lo), 0.22),
    8px 8px 20px rgba(var(--neu-lo), 0.44),
    -8px -8px 20px rgba(var(--neu-hi), 0.95),
    inset 0 1px 0 rgba(var(--neu-hi), 0.55),
    inset 0 -1px 0 rgba(var(--neu-lo), 0.18);

  /* ── Survol : l'objet monte, l'ombre s'éloigne et s'étale ── */
  --neu-lift:
    2px 2px 4px rgba(var(--neu-lo), 0.26),
    13px 13px 30px rgba(var(--neu-lo), 0.50),
    -11px -11px 26px rgba(var(--neu-hi), 1),
    inset 0 1px 0 rgba(var(--neu-hi), 0.60),
    inset 0 -1px 0 rgba(var(--neu-lo), 0.20);

  /* ── Creusé, trois intensités ── */
  --neu-in-1:
    inset 2px 2px 5px rgba(var(--neu-lo), 0.42),
    inset -2px -2px 5px rgba(var(--neu-hi), 0.88);
  --neu-in-2:
    inset 3px 3px 7px rgba(var(--neu-lo), 0.46),
    inset -3px -3px 7px rgba(var(--neu-hi), 0.90);
  --neu-in-3:
    inset 5px 5px 11px rgba(var(--neu-lo), 0.50),
    inset -5px -5px 11px rgba(var(--neu-hi), 0.92);
}