/* Police : <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400..700;1,400..600&display=swap" rel="stylesheet"> */

:root {
  /* Couleurs de marque */
  --gama-noir: #0d0f1a;
  --gama-noir-2: #161a2b;
  --gama-bleu: #5bb8f5;
  --gama-bleu-fonce: #3a9de0;
  --gama-bleu-encre: #1f6aa8;
  --gama-blanc: #ffffff;
  --gama-gris-clair: #f7f7f5;
  --gama-gris-texte: #a3a9bd;
  --gama-ardoise: #4a4f63;

  /* Usages */
  --fond-sombre: var(--gama-noir);
  --fond-clair: var(--gama-gris-clair);
  --fond-blanc: var(--gama-blanc);
  --surface-sombre: var(--gama-noir-2);
  --texte-sur-sombre: var(--gama-blanc);
  --texte-sur-clair: var(--gama-noir);
  --texte-doux-sur-sombre: var(--gama-gris-texte);
  --texte-doux-sur-clair: var(--gama-ardoise);
  --accent-sur-sombre: var(--gama-bleu);
  --accent-sur-clair: var(--gama-bleu-encre);
  --point-final: var(--gama-bleu);
  --cercle: var(--gama-bleu);
  --bordure-sur-sombre: rgba(255, 255, 255, 0.12);
  --bordure-sur-clair: rgba(13, 15, 26, 0.12);

  /* Boutons : pilule + point */
  --bouton-fond-sur-clair: var(--gama-noir);
  --bouton-texte-sur-clair: var(--gama-blanc);
  --bouton-fond-sur-sombre: var(--gama-blanc);
  --bouton-texte-sur-sombre: var(--gama-noir);
  --bouton-point: var(--gama-bleu);
  --bouton-fleche: var(--gama-noir);
  --bouton-contour-sur-clair: rgba(13, 15, 26, 0.25);
  --bouton-contour-sur-sombre: rgba(255, 255, 255, 0.35);
  --bouton-taille-point: 34px;

  /* Espacements, base 8 px */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --radius-champ: 10px;
  --radius-pill: 999px;

  /* Typographie : une seule police, Montserrat, casse normale */
  --font-principale: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  /* Échelle, mobile par défaut */
  --fs-titre: 30px;       --lh-titre: 1.15;       --fw-titre: 500;     --ls-titre: -0.025em;
  --fs-sous-titre: 19px;  --lh-sous-titre: 1.4;   --fw-sous-titre: 400; --style-sous-titre: italic;
  --fs-texte: 16px;       --lh-texte: 1.65;       --fw-texte: 400;
  --fs-petit: 12px;       --lh-petit: 1.4;        --fw-petit: 600;     --style-petit: italic;
}

@media (min-width: 768px) {
  :root {
    --fs-titre: 44px;       --lh-titre: 1.1;
    --fs-sous-titre: 22px;
    --fs-texte: 17px;
    --fs-petit: 13px;
  }
}