/* ═══════════════════════════════════════════════════════════════
   RT VISUALS — v3 · tokens
   Couleurs, typographie, espacement et mouvement. Tout le site
   consomme ces variables ; aucune couleur n'est codée en dur ailleurs.
   ═══════════════════════════════════════════════════════════════ */
:root{
  /* ── Palette v1 (cahier des charges) ── */
  --anth:#070807;        /* anthracite profond : footer, blocs, bande de négatif */
  --anth2:#030403;       /* anthracite ultra-sombre : dropdowns, drawer, lightbox */
  --taupe:#1C1E1B;       /* gris kaki taupe : fond de contenu */
  --taupe2:#282B27;      /* surfaces surélevées, bacs */
  --kaki:#6B705C;        /* vert kaki mat : fil de timeline, bloc Pro */
  --kaki2:#8A9079;       /* kaki clair : onglet actif, survols */
  --moka:#584B43;        /* terre moka : color blocks, séparateurs */
  --moka2:#736257;       /* moka clair : pinces, couvercles */
  --sable:#DDC272;       /* or sable mat : « visuals », lampe, un highlight par page */

  /* ── Dérivés ── */
  --baryte:#EDE6D6;      /* texte courant (13:1 sur taupe) */
  --cendre:#A6A79B;      /* texte secondaire, légendes mono */
  --cuve:#0E0F0E;        /* intérieur des bacs, champs */
  --fil:rgba(237,230,214,.10);
  --card-bg:rgba(28,30,27,.85);
  --shadow-card:0 20px 40px rgba(0,0,0,.6);
  --shadow-hover:0 28px 56px rgba(0,0,0,.7);
  --shadow-block:0 12px 24px rgba(0,0,0,.45);

  /* ── Palette v3 (retours client, septembre 2026) ── */
  --brun:#211103;        /* barre du logo (header) */
  --brun-rgb:33,17,3;
  --flash:#F5722F;       /* logo réduit au scroll : la lampe inactinique s'allume */
  --flash-rgb:245,114,47;
  --cuivre:#C4724E;      /* départ du dégradé du portfolio */
  --cuivre-rgb:196,114,78;
  --fond-origine:#20221F;/* arrivée du dégradé du portfolio */
  --gris-chaud:#6E6460;  /* fond du bloc de texte « Ma vision » */
  --orange:#DB6033;      /* bloc Photographie */
  --orange-rgb:219,96,51;
  --encre:#211103;       /* texte sombre posé sur l'orange (5:1) */
  --sur-gris:#F4EEE2;    /* texte posé sur le gris chaud (≈ 4,9:1) */
  --sur-gris-2:rgba(255,250,242,.90);
  --pf-chaleur:58%;      /* dosage du cuivre dans le fond du portfolio : baisser si trop coloré */

  /* ── Typographie ── */
  --f-display:'Fraunces','Fraunces secours Georgia','Fraunces secours Times','Fraunces secours DejaVu',Georgia,serif;
  --f-h1:'Fraunces','Fraunces secours Georgia','Fraunces secours Times','Fraunces secours DejaVu',Georgia,serif;
  --f-body:"Segoe UI Variable Text","Segoe UI",Selawik,system-ui,-apple-system,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --fs-body:clamp(1rem,.96rem + .25vw,1.125rem);
  --lh-body:1.6;
  --mesure:62ch;

  /* ── Espacement & mise en page ── */
  --gutter:24px;
  --margin:clamp(20px,4vw,72px);
  --band:56px;
  --pad-l:var(--margin);
  --hd-h:64px;
  --sec-gap:clamp(72px,9vw,128px);

  /* ── Mouvement ── */
  --d-1:150ms;           /* micro : survol, focus */
  --d-2:300ms;           /* transition d'état : onglet, couvercle */
  --d-3:500ms;           /* apparition : bloc, carte */
  --d-4:700ms;           /* révélation : tirage, section */
  --e-out:cubic-bezier(.22,1,.36,1);
  --e-inout:cubic-bezier(.65,0,.35,1);
  --e-in:cubic-bezier(.5,0,.75,0);
  --stagger:60ms;

  --grain:none;
  color-scheme:dark;
}
@media (min-width:1024px){:root{--pad-l:calc(var(--margin) + var(--band));--hd-h:104px}}