/* ============================================================
   CLIMAX DESIGN — TOKENS
   ------------------------------------------------------------
   Source unique de verite pour la direction artistique.
   Importe par tout projet de l'ecosysteme Climax (site, ddp, etc.).

   En l'etat (mai 2026), le site studio (../css/styles.css)
   contient encore ses tokens en interne (bloc :root lignes 9-38).
   Migration possible (non urgente) en une operation :
     1) ajouter @import "../design/tokens.css" en haut du fichier
     2) supprimer le bloc :root local
   A faire quand JC le decidera. Ce fichier est strictement
   identique aux tokens en place dans le site (mai 2026), donc
   la migration sera transparente.
   ============================================================ */

:root {
  /* --- Couleurs ---------------------------------------------- */
  --bg-noir: #0a0a0a;                          /* fond principal */
  --texte-noir: #1a1a1a;                       /* texte sur fond clair */
  --texte-gris: #555;                          /* texte secondaire */
  --accent: #1a1a1a;                           /* accents (= texte noir) */
  --panneau-blanc: rgba(248, 246, 242, 0.62);  /* fond panneau translucide */

  /* --- Vignette (fond noir progressif) ----------------------- */
  --vignette-intensity: 0.85;
  --vignette-bottom: 0.92;
  --vignette-top: 0.55;

  /* --- Durees d'animation ------------------------------------ */
  --photo-duration: 10.5s;
  --fade-duration: 1.5s;
  --black-duration: 0.5s;

  /* --- Dimensions structurelles ------------------------------ */
  --nav-width: 360px;
  --panel-max-width: 760px;
  --panel-pad-h: 80px;
  --panel-pad-v: 80px;
  --oblique-offset: 60px;

  /* --- Logo + nav -------------------------------------------- */
  --logo-size: 275px;
  --nav-link-size: 33px;
  --nav-link-spacing: 0.5px;
}

/* Surcharges mobile reprises du site */
@media (max-width: 768px) {
  :root {
    --panel-pad-h: 28px;
    --panel-pad-v: 90px;
    --oblique-offset: 50px;
  }
}