/* ======================================================================
   TYPOGRAPHY – règles globales
   ====================================================================== */

/* ---------- ÉCHELLE TYPO GRÂCE AUX VARIABLES ------------------------ */
:root {
  /* Taille “desktop” (>= 992 px) */
  --fs-h1: 3.125rem; /* 50 px */
  --fs-h2: 2.5rem; /* 40 px */
  --fs-h3: 1.875rem; /* 30 px */
  --fs-h4: 1.5rem; /* 24 px */
  --fs-body: 0.875rem; /* 14 px */
}

/* ---------- Police & liens ----------------------------------------- */
body {
  font-family: "Open Sans", sans-serif;
  font-size: var(--fs-body);
}

a {
  text-decoration: none;
}

/* ---------- Titres (couleur + police + taille) --------------------- */
h1,
h2,
h3,
h4 {
  font-family: "Inter", sans-serif;
  color: #527887;
}

h1 {
  font-size: var(--fs-h1);
}
h2 {
  font-size: var(--fs-h2);
}
h3 {
  font-size: var(--fs-h3);
}
h4 {
  font-size: var(--fs-h4);
}

/* ---------- Paragraphes -------------------------------------------- */
p {
  line-height: 1.4rem; /*  ≈ 20 px */
  color: #555;
}

/* ======================================================================
   RESPONSIVE – on ne change QUE les variables
   ----------------------------------------------------------------------
   Remarque : changer les variables dans les media-queries évite de
   réécrire les 4 sélecteurs <h*> à chaque fois.
   ====================================================================== */

/* === Tablette (≤ 992 px) === */
@media (max-width: 992px) {
  :root {
    --fs-h1: 2.625rem; /* 42 px */
    --fs-h2: 2.125rem; /* 34 px */
    --fs-h3: 1.625rem; /* 26 px */
    --fs-h4: 1.25rem; /* 20 px */
  }
}

/* === Mobile (≤ 768 px) === */
@media (max-width: 768px) {
  :root {
    --fs-h1: 2.125rem; /* 34 px */
    --fs-h2: 1.75rem; /* 28 px */
    --fs-h3: 1.375rem; /* 22 px */
    --fs-h4: 1.125rem; /* 18 px */
  }
}

/* === Très petit écran (≤ 480 px) === */
@media (max-width: 480px) {
  :root {
    --fs-h1: 1.75rem; /* 28 px */
    --fs-h2: 1.5rem; /* 24 px */
    --fs-h3: 1.25rem; /* 20 px */
    --fs-h4: 1rem; /* 16 px */
  }
}