html, body {
    margin: 0;
    padding: 0;
}

body {
    background-color: #ffffff;
    color: rgb(0, 0, 0);
    margin-top: 120px; /* Ajuster cette valeur en fonction de la hauteur de votre bandeau */
    padding: 20px;
}

@media screen and (max-width: 600px) {
  body {
    margin-top: 90px; /* Ajuster cette valeur en fonction de la hauteur de votre bandeau */
  }
  }

/* === TYPOGRAPHIE GLOBALE === */
body {
    font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #222;
    padding: 0;
  }
  
  /* Titres h1 à h6 : hiérarchie et style cohérents */
  h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    line-height: 1.2;
    font-weight: 300;
    color: inherit;
  }
  
  h1 { font-size: 2.25rem; }   /* ~36px */
  h2 { font-size: 1.75rem; }   /* ~28px */
  h3 { font-size: 1.5rem; }    /* ~24px */
  h4 { font-size: 1.25rem; }   /* ~20px */
  h5 { font-size: 1.125rem; }  /* ~18px */
  h6 { font-size: 1rem; }      /* ~16px */
  
  /* Paragraphes */
  p {
    margin-top: 0;
    margin-bottom: 1rem;
    line-height: 1.6;
    color: inherit;
  }
  
  /* Liens */
  a {
    color: inherit;
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline;
  }
  
  /* Listes */
  ul, ol {
    margin: 0 0 ;
    padding: 0;
  }
  
  li {
    margin-bottom: 0.5rem;
  }
  
  /* Textes forts et italiques */
  strong {
    font-weight: bold;
  }
  
  em {
    font-style: italic;
  }
  

/* Appliquer le style de police aux citations blockquote */
blockquote {
    font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
    font-size: 21px;
    font-weight: 400;
    line-height: 30px;
}

/* Appliquer le style de police aux blocs de code pre */
pre {
    font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 18.57143px;
}




:root {
  /* 🎨 Couleurs principales */
  --blue-primary: #042f4b;
  --blue-primary-rgba: rgba(4, 47, 75, 0.9);

  --yellow-accent: #fcbf49;
  --yellow-accent-rgba: rgba(252, 191, 73, 1);
  --yellow-smooth : #ffeb93;

  --white: #ffffff;
  --white-rgba: rgba(255, 255, 255, 1);

  --text-dark: #333333;
  --text-dark-rgba: rgba(51, 51, 51, 1);

  /* 🎨 Couleurs de fond */
  --bg-light: #f4f4f4;
  --bg-light-rgba: rgba(244, 244, 244, 1);

  --bg-blue-light: #e3f2fd;
  --bg-blue-light-rgba: rgba(227, 242, 253, 1);

  --bg-yellow-light: #fff3b0a2;
  --bg-yellow-light-rgba: rgba(255, 243, 176, 1);

  --bg-red-light:#f7cece;
  --overlay-blue: rgba(5, 53, 69, 0.4);
  --overlay-red: rgba(138, 2, 2, 0.5);

  /* 🎨 Couleurs secondaires / complémentaires */
  --blue-secondary: #5dade2;
  --blue-secondary-rgba: rgba(93, 173, 226, 1);

  --alert: #f08080;
  --alert-rgba: rgba(240, 128, 128, 1);

  /* 🔘 Boutons */
  --btn-primary: #007bff;
  --btn-primary-hover: #0056b3;

  --btn-accent: #fcbf49;
  --btn-accent-hover: #e09f2b;

  --btn-light-blue: #d0eafc;
  --btn-light-blue-text: #036;
  --btn-light-hover: #e3f2fd;
}