/* =====================================================================
   RÉGLAGES GÉNÉRAUX DU SITE — FICHIER À MODIFIER DANS DREAMWEAVER

   Toutes les pages utilisent ces valeurs. Pour changer la présentation
   générale, modifiez uniquement les lignes de ce fichier.
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&display=swap");

:root {
  /* POLICES */
  --police-texte: "DM Sans", Arial, sans-serif;
  --police-titres: "Playfair Display", Georgia, serif;
  --police-poemes: Georgia, "Times New Roman", serif;

  /* TEXTE COURANT */
  --taille-texte: 16px;
  --interligne-texte: 26px;

  /* TITRES H1 DES RUBRIQUES */
  --taille-titre-rubrique-ordinateur: 72px;
  --taille-titre-rubrique-tablette: 52px;
  --taille-titre-rubrique-mobile: 36px;

  /* TITRES H2 DES SECTIONS */
  --taille-titre-section-ordinateur: 42px;
  --taille-titre-section-tablette: 34px;
  --taille-titre-section-mobile: 28px;

  /* LOGO ET MENU */
  --taille-logo: 25px;
  --taille-slogan-logo: 12px;
  --taille-menu: 13px;
  --hauteur-entete: 76px;

  /* BOUTONS D’ACTION COMMUNS */
  --hauteur-bouton: 46px;
  --arrondi-bouton: 999px;
  --taille-bouton: 15px;
  --espace-bouton-horizontal: 20px;

  /* COULEURS PRINCIPALES */
  --navy: #020d29;
  --panel: #101b43;
  --pink: #ff5dac;
  --violet: #a865ff;
  --blue: #74baff;
  --line: #55729e;
  --white: #f8f4ff;

  /* ESPACEMENTS ET TRANSITIONS DES RUBRIQUES */
  --fond-contenu: #06112b;
  --hauteur-fondu-rubrique: 38px;
  --arrondi-rubrique-mobile: 24px;
  --espace-apres-rubrique-mobile: 34px;

  /* Valeur calculée automatiquement selon la largeur de l’écran. */
  --taille-titre-rubrique-active: var(--taille-titre-rubrique-ordinateur);
}

/* TABLETTE : tous les titres principaux utilisent la même taille. */
@media (max-width: 1024px) {
  :root {
    --taille-titre-rubrique-active: var(--taille-titre-rubrique-tablette);
  }
}

/* TÉLÉPHONE : tous les titres principaux utilisent la même taille. */
@media (max-width: 760px) {
  :root {
    --taille-titre-rubrique-active: var(--taille-titre-rubrique-mobile);
  }
}