/* ============================================================
   variables.css — tokens de design (couleurs, typographies, espacements)
   Source de vérité unique. Aucune valeur hardcodée dans les autres CSS.
   Référence : docs/PALETTE.md
   ============================================================ */

:root {
  /* ----- Palette principale (échantillonnée depuis Nouvelle-DA.pdf) ----- */
  --bleu-signature: #034183;
  --bleu-signature-fonce: #022E5C;
  --bleu-signature-clair: #1F5FA8;
  --bleu-pale: #E8EFF7;

  --blanc: #FFFFFF;
  --gris-fond: #F7F8FA;
  --gris-bordure: #D9DEE6;
  --gris-texte: #5A6478;
  --noir-texte: #0A1F3A;

  /* ----- Couleurs fonctionnelles (formulaire uniquement, pas en décoration) ----- */
  --rouge-alerte: #A8302F;
  --rouge-alerte-fonce: #842524;
  --vert-succes: #1F8A4F;

  /* ----- Couleurs des réseaux sociaux (pour les visuels uniquement) ----- */
  --reseau-facebook: #1877F2;
  --reseau-linkedin: #0A66C2;
  --reseau-twitter-x: #0F1419;
  --reseau-instagram-1: #F58529;
  --reseau-instagram-2: #DD2A7B;
  --reseau-instagram-3: #8134AF;

  /* ----- Polices ----- */
  --police-titres: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --police-courante: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --police-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, "Courier New", monospace;

  /* ----- Échelle typographique (rem, base 16 px) ----- */
  --taille-h1: 4rem;          /* 64 px — Hero principal */
  --taille-h1-mobile: 2.5rem; /* 40 px — Hero principal mobile */
  --taille-h2: 2.5rem;        /* 40 px — Titres de section */
  --taille-h2-mobile: 1.75rem;/* 28 px */
  --taille-h3: 1.5rem;        /* 24 px — Sous-titres */
  --taille-grande: 1.25rem;   /* 20 px — Intro, baseline */
  --taille-courante: 1rem;    /* 16 px — Texte courant */
  --taille-petite: 0.875rem;  /* 14 px — Mentions, footer */
  --taille-mini: 0.75rem;     /* 12 px — Labels, micro-mentions */

  /* ----- Hauteurs de ligne ----- */
  --ligne-titre: 1.15;
  --ligne-courante: 1.6;
  --ligne-aerée: 1.8;

  /* ----- Graisses Montserrat ----- */
  --graisse-regular: 400;
  --graisse-medium: 500;
  --graisse-semibold: 600;
  --graisse-bold: 700;
  --graisse-extrabold: 800;

  /* ----- Espacements (échelle 8 pt) ----- */
  --espace-1: 0.5rem;   /*  8 px */
  --espace-2: 1rem;     /* 16 px */
  --espace-3: 1.5rem;   /* 24 px */
  --espace-4: 2rem;     /* 32 px */
  --espace-6: 3rem;     /* 48 px */
  --espace-8: 4rem;     /* 64 px */
  --espace-12: 6rem;    /* 96 px */
  --espace-16: 8rem;    /* 128 px */

  /* ----- Largeurs de container ----- */
  --largeur-max: 1280px;
  --largeur-texte: 720px;
  --largeur-etroite: 560px;

  /* ----- Rayons de bordure ----- */
  --rayon-petit: 4px;
  --rayon-moyen: 8px;
  --rayon-grand: 12px;
  --rayon-pilule: 999px;

  /* ----- Ombres ----- */
  --ombre-douce: 0 2px 8px rgba(10, 31, 58, 0.06);
  --ombre-moyenne: 0 6px 18px rgba(10, 31, 58, 0.10);
  --ombre-forte: 0 14px 32px rgba(10, 31, 58, 0.16);

  /* ----- Transitions ----- */
  --transition-rapide: 120ms ease-out;
  --transition-moyenne: 220ms ease-out;
  --transition-lente: 360ms ease-out;

  /* ----- Z-index ----- */
  --z-header: 100;
  --z-wizard-overlay: 1000;
  --z-wizard-dialog: 1010;
}

/* ----- Adaptation mobile pour les tailles de titres ----- */
@media (max-width: 768px) {
  :root {
    --taille-h1: var(--taille-h1-mobile);
    --taille-h2: var(--taille-h2-mobile);
  }
}

/* ----- Respect de la préférence utilisateur pour les animations ----- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-rapide: 0ms;
    --transition-moyenne: 0ms;
    --transition-lente: 0ms;
  }
}