:root {
  /* Papiers */
  --papier-creme: #FAF6F0;
  --papier-clair: #FFFDF9;
  --papier-profond: #F2EBE1;

  /* Encres */
  --encre: #14211F;
  --encre-2: #4A5A57;
  --encre-3: #8A9693;

  /* Marque */
  --petrole: #1D6B6E;
  --petrole-fonce: #124B4E;
  --orange: #E9A03B;
  --magenta: #C4006B;

  /* Axes du modèle */
  --axe-modele: #6E9CB4;
  --axe-bien-commun: #4E8C5A;
  --axe-justice: #1D6B6E;
  --axe-valorisation: #E9A03B;
  --axe-cadre: #B4453C;

  /* Tons dérivés */
  --bord: #E7DFD3;
  --vignette: #FBF0DE;
  --filigrane: #F6DFB8;
  --hover-petrole: #EDF2F1;
  --hover-orange: #F0B45F;

  /* Neutres fonctionnels (états inactifs) */
  --inactif-bord: #C8CFCC;
  --inactif-texte: #A9B3B0;
  --neutre-clair: #DCE2E0;

  /* Typographie */
  --font-display: 'Fraunces', Georgia, serif;
  --font-texte: 'Inter', sans-serif;
  --font-accent: 'Caveat', cursive;

  --taille-display: 72px;
  --taille-h1: 56px;
  --taille-h2: 40px;
  --taille-h3: 28px;
  --taille-corps-l: 19px;
  --taille-corps: 17px;
  --taille-petit: 15px;
  --taille-surtitre: 13px;

  --taille-display-mobile: 40px;
  --taille-h1-mobile: 34px;
  --taille-h2-mobile: 27px;
  --taille-h3-mobile: 21px;
  --taille-corps-mobile: 17px;
  --taille-petit-mobile: 15px;

  /* Espacements */
  --espace-xs: 8px;
  --espace-s: 16px;
  --espace-m: 24px;
  --espace-l: 48px;
  --espace-xl: 64px;
  --espace-xxl: 96px;
  --espace-xxxl: 128px;

  /* Rayons */
  --rayon: 4px;
  --biseau: 28px;
  --biseau-mobile: 20px;

  /* ===== Vocabulaire de plis =====
     La maquette v1 n'avait qu'UNE forme de carte : un rectangle dont le coin
     supérieur droit est coupé en diagonale (.corne). Répétée une vingtaine de
     fois sur les deux pages, elle donnait un rythme plat — le reproche exact
     formulé en revue. On garde le principe (du papier plié) mais on en fait
     un VOCABULAIRE : cinq plis distincts, tous issus du même geste, qu'on
     répartit pour que deux blocs voisins n'aient jamais la même silhouette.

     Voir la section « Vocabulaire de plis » de style.css pour les cinq
     variantes (.pli--corne, --corne-bg, --onglet, --dechire, --croquis) et
     l'oreille de papier qui les accompagne.

     --pli        : profondeur du pli, en desktop. Sert de côté au carré dans
                    lequel on découpe la diagonale, donc aussi de taille à
                    l'oreille repliée.
     --pli-mobile : idem, réduit — 28 px sur une carte de 132 px de haut
                    mangeait un quart de la largeur.
     --pli-ouvert : profondeur de l'oreille au survol. Le pli « s'ouvre » :
                    c'est la micro-animation qui remplace le simple
                    translateY(-2px) de la v1. */
  --pli: 30px;
  --pli-mobile: 20px;
  --pli-ouvert: 46px;

  /* Sous-face du papier : la couleur qu'on voit quand un coin se replie.
     Un cran plus sombre et plus chaud que le papier crème, jamais un gris —
     du gris sur du papier lit comme une ombre numérique, pas comme du carton. */
  --papier-envers: #E4D9C6;
  --pli-ombre: rgba(20, 33, 31, 0.16);

  /* Ombres */
  --ombre-repos: 0 2px 4px rgba(20, 33, 31, 0.04);
  --ombre-survol: 0 12px 32px rgba(20, 33, 31, 0.06);

  /* Rupture responsive */
  --rupture: 900px;
}