/* ═══════════════════════════════════════════════════════════════════════════
   PEAU « acier » — Maxence Favre / Indès — TOKENS (les VALEURS, rien d'autre)
   ───────────────────────────────────────────────────────────────────────────
   Dérivée de la peau de référence `bouvet` (gestes), registre basculé en CLAIR.
   Calcul complet et sources : ./DESIGN.md
   Émotion : fiabilité · H 200 · S 43 % (13/30) · L 60 % (12/20)
   Secondaire : complémentaire H 22, cuivre oxydé, plafond 5 % de surface.

   ⚠️ CONTRAT — noms de variables identiques à ceux des peaux de référence,
   dans le même ordre. On change les VALEURS, jamais les noms.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {

  /* ── 1. Surfaces ─────────────────────────────────────────────────────── */
  /* Le blanc est dérivé de la SECONDAIRE voilée à 97 %, pas du bleu : c'est
     par là que passe la chaleur réclamée par Maxence, sans aucune texture. */
  --bg:              #faf7f4;  /* pierre chaude, fond dominant */
  --bg-alt:          #f3ece8;  /* pierre plus dense, fond alterné */
  --bg-panel:        #f0f6f9;  /* déclinaison froide : blocs de réassurance */
  --bg-invert:       #11232c;  /* la seule surface sombre du site */
  --surface:         #ffffff;  /* fond des cartes, elles se détachent par le filet */

  /* ── 2. Encre ────────────────────────────────────────────────────────── */
  --ink:             #204050;  /* corps — acier voilé de noir à 63 % */
  --ink-strong:      #11232c;  /* titres — acier profond, JAMAIS du noir pur */
  --ink-muted:       #496979;  /* légendes, crédits photo — 5,5:1 sur --bg */
  --ink-on-invert:   #e2eef4;  /* texte posé sur --bg-invert — 13,6:1 */

  /* ── 3. Accent ───────────────────────────────────────────────────────── */
  --accent:          #a65b30;  /* cuivre oxydé — CTA, losange, filets d'accent */
  --accent-strong:   #8c4b26;  /* cuivre foncé — 6,3:1 sur --bg, sert au TEXTE */
  --accent-soft:     #f1e2da;  /* cuivre voilé de blanc : puces, pastilles */
  --accent-ink:      #ffffff;  /* texte posé sur --accent — 5,1:1 */

  /* ── 4. Traits & matière ─────────────────────────────────────────────── */
  /* Matière de cette peau : LE LOSANGE (cf. skin.css). Le filet est son
     support : hairline d'encre, jamais d'ombre portée sur le contenu. */
  --rule:            1px solid rgba(17, 35, 44, 0.14);
  --rule-strong:     1px solid rgba(17, 35, 44, 0.30);

  /* ── 5. Familles typographiques ──────────────────────────────────────── */
  /* UNE seule famille. Aucun @import distant, aucun @font-face : le site de
     Maxence ne doit dépendre d'aucun réseau ni d'aucun compte. */
  --font-heading:    'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --font-body:       'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --font-ui:         'Avenir Next', 'Segoe UI', system-ui, sans-serif;

  /* ── 6. Échelle typographique ────────────────────────────────────────── */
  --fs-h1:           54px;
  --fs-h2:           38px;
  --fs-h3:           20px;
  --fs-body-lg:      21px;
  --fs-body:         18px;
  --fs-small:        14px;
  --fs-eyebrow:      12px;

  /* ── 7. Interlignes, graisses, chasse ────────────────────────────────── */
  --lh-h1:           1.06;
  --lh-h2:           1.14;
  --lh-h3:           1.35;
  --lh-body:         1.65;
  --fw-heading:      600;   /* le contraste se fait par la TAILLE (54 vs 18), */
  --fw-body:         400;   /* pas par la graisse : écart de 200, jamais 400 */
  --fw-strong:       600;
  --fw-ui:           600;
  --ls-h1:           -0.9px;
  --ls-eyebrow:      1.8px;

  /* ── 8. Rayons ───────────────────────────────────────────────────────── */
  /* Vocabulaire d'arrondi : 0 / 2 / 4. Sec, déclaré, anti « carte Bootstrap ».
     Le losange du logo n'a pas d'arrondi ; le site non plus. */
  --radius-sm:       0px;
  --radius-card:     2px;
  --radius-media:    2px;
  --radius-panel:    4px;
  --radius-pill:     0px;

  /* ── 9. Ombres ───────────────────────────────────────────────────────── */
  /* Aucune ombre sur le contenu : le relief vient du fond et du filet.
     La seule ombre existante est TEINTÉE du cuivre, jamais grise. */
  --shadow-1:        rgba(166, 91, 48, 0.12) 0px 10px 28px 0px;
  --shadow-2:        rgba(166, 91, 48, 0.20) 0px 14px 40px 0px;

  /* ── 10. Espacements ─────────────────────────────────────────────────── */
  --space-2xs:       6px;
  --space-xs:        14px;
  --space-sm:        22px;
  --space-md:        28px;
  --space-lg:        44px;
  --space-xl:        72px;
  --space-section:   112px;  /* densité de vide déclarée, fente 12 */
  --gutter:          28px;
  --measure:         1080px;

  /* ── 11. Bouton principal ────────────────────────────────────────────── */
  --btn-bg:          #a65b30;
  --btn-ink:         #ffffff;
  --btn-radius:      2px;
  --btn-height:      54px;
  --btn-padding:     16px 34px;
  --btn-size:        15px;
  --btn-weight:      600;
  --btn-font:        var(--font-ui);
  --btn-transform:   none;
  --btn-tracking:    0.2px;

  /* ── 12. Bouton secondaire ───────────────────────────────────────────── */
  --btn-bg-2:        transparent;
  --btn-ink-2:       #11232c;
  --btn-border-2:    1px solid rgba(17, 35, 44, 0.30);
  --btn-radius-2:    2px;
  --btn-height-2:    54px;
  --btn-padding-2:   16px 30px;

}