/* ================================================================
   DESIGN SYSTEM — variables fondamentales du portfolio
   ================================================================
   Tout ce qui définit l'identité visuelle est centralisé ici.
   Modifier une valeur ici = modifier partout dans le site.
   ================================================================ */

:root {

  /* ---------- COULEURS ----------
     Palette neutre crème/noir. Les couleurs d'accent et de contraste
     seront affinées session 2 après validation visuelle avec Vincent.
     ------------------------------- */

  --couleur-fond:           #F4F0EA;   /* crème chaud */
  --couleur-fond-alt:       #EAE4DA;   /* crème légèrement plus foncé, pour sections alternées */
  --couleur-texte:          #1A1814;   /* noir chaud, pas pur */
  --couleur-texte-doux:     #6B6659;   /* gris-brun pour textes secondaires */
  --couleur-accent:         #FF4D00;   /* orange de la v1 — provisoire, à valider */
  --couleur-trait:          rgba(26, 24, 20, 0.12);  /* filets, séparateurs */


  /* ---------- TYPOGRAPHIES ----------
     Fraunces pour les titres (variable font : optical size, SOFT, WONK)
     Google Sans Flex pour l'UI et le corps (variable : wght, wdth, ROND…)
     ----------------------------------- */

  --typo-titre:             'Fraunces', 'Times New Roman', serif;
  --typo-corps:             'Google Sans Flex', 'Helvetica Neue', Arial, sans-serif;


  /* ---------- ÉCHELLE TYPOGRAPHIQUE ----------
     clamp(min, préféré, max) = taille qui s'adapte à la largeur d'écran
     ------------------------------------------- */

  --taille-giga:            clamp(60px, 10vw, 180px);   /* hero h1 */
  --taille-xl:              clamp(40px, 6vw, 96px);     /* titres projets */
  --taille-l:               clamp(28px, 3.5vw, 48px);   /* sous-titres, citations */
  --taille-m:               clamp(18px, 1.4vw, 22px);   /* corps lead */
  --taille-base:            16px;                        /* corps standard */
  --taille-s:               14px;                        /* petit texte, labels */
  --taille-xs:              12px;                        /* très petit : credits, footer */


  /* ---------- ESPACEMENTS ----------
     Échelle géométrique pour cohérence du rythme vertical et horizontal.
     --------------------------------- */

  --espace-xs:              8px;
  --espace-s:               16px;
  --espace-m:               32px;
  --espace-l:               64px;
  --espace-xl:              120px;
  --espace-xxl:             200px;


  /* ---------- LARGEURS DE CONTENU ---------- */

  --largeur-max:            1440px;    /* largeur max du site */
  --largeur-texte:          680px;     /* largeur confortable de lecture */
  --padding-cote:           clamp(20px, 4vw, 60px);  /* marge gauche/droite adaptative */


  /* ---------- DURÉES & EASINGS ----------
     Vocabulaire de temporalité réutilisable dans les transitions et JS.
     -------------------------------------- */

  --duree-courte:           0.25s;
  --duree-moyenne:          0.6s;
  --duree-longue:           1.2s;

  /* Easings = courbes de vitesse. "expo" = démarre lent, finit très vite.
     Utiliser var(--ease-doux) par défaut. */
  --ease-doux:              cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo:              cubic-bezier(0.87, 0, 0.13, 1);
  --ease-retour:            cubic-bezier(0.68, -0.55, 0.27, 1.55);


  /* ---------- Z-INDEX (empilement) ---------- */

  --z-fond:                 0;
  --z-contenu:              10;
  --z-header:               100;
  --z-overlay:              500;
  --z-modal:                1000;
}