/* ==========================================================================
   VARIABLES GLOBALES
   Point d'entrée pour ajuster la direction artistique : couleurs,
   typographies, espacements, points de rupture responsive.
   ========================================================================== */

:root {
  /* Couleurs (rôles et contrastes : docs/02-charte-graphique.md) */
  --couleur-fond: #F7F3EE;          /* off-white chaud */
  --couleur-texte: #22181C;          /* Coffee Bean */
  --couleur-surface-douce: #FAD8D6;  /* Soft Blush */
  --couleur-accent-chaud: #EDB88B;   /* Sandy Clay */
  --couleur-accent-fort-1: #17BEBB;  /* Tropical Teal */
  --couleur-accent-fort-2: #CD5334;  /* Rosy Copper */

  --couleur-contact-fond: var(--couleur-texte);
  --couleur-contact-texte: var(--couleur-fond);

  /* Typographies — hébergées dans /polices, déclarées dans css/polices.css */
  --police-titre: "Bricolage Grotesque", sans-serif;
  --police-texte: "Instrument Sans", sans-serif;

  /* Échelle typographique fluide (clamp : min, préféré, max) */
  --taille-nom-hero: clamp(3rem, 13vw, 11rem);
  --taille-titre-xl: clamp(2rem, 5vw, 4rem);
  --taille-titre-l: clamp(1.5rem, 3vw, 2.5rem);
  --taille-titre-m: clamp(1.25rem, 2vw, 1.75rem);
  --taille-texte-l: clamp(1.125rem, 1.5vw, 1.375rem);
  --taille-texte: 1rem;
  --taille-texte-petit: 0.875rem;
  --taille-meta: 0.8125rem;

  /* Espacements — échelle simple en rem */
  --espace-xxs: 0.5rem;
  --espace-xs: 1rem;
  --espace-s: 1.5rem;
  --espace-m: 2.5rem;
  --espace-l: 4rem;
  --espace-xl: 6rem;
  --espace-xxl: 9rem;

  /* Grille 12 colonnes */
  --grille-colonnes: 12;
  --grille-gouttiere: 1.5rem;
  --conteneur-marge: 1.5rem;
  --conteneur-max: 90rem;

  /* Mouvement */
  --duree-courte: 200ms;
  --duree-moyenne: 400ms;
  --easing-doux: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Points de rupture de référence (utilisés dans les media queries des
   autres fichiers ; CSS ne permet pas de variabiliser une media query,
   ces valeurs sont donc à reprendre telles quelles) :
   375px  — mobile
   768px  — tablette
   1024px — desktop
   1440px — grand desktop
*/

@media (prefers-color-scheme: dark) {
  /* Le site garde volontairement sa palette lumineuse même en mode
     sombre système : la direction artistique est fixe, pas adaptative.
     Bloc laissé en place pour documenter ce choix plutôt que de
     l'omettre silencieusement. */
}