/* Applique box-sizing à tous les éléments */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Active le défilement fluide sur la page */
html {
  scroll-behavior: smooth;
}

/* Style global du site */
body {
  margin: 0; /* Supprime les marges par défaut */
  font-family: var(--font-body); /* Police principale */
  color: var(--color-text); /* Couleur du texte */
  background-color: var(--color-background); /* Couleur de fond */
  line-height: 1.6; /* Espacement entre les lignes */
}

/* Rend les images responsives */
img {
  max-width: 100%;
  display: block;
}

/* Style général des liens */
a {
  color: inherit; /* Hérite de la couleur du parent */
  text-decoration: none; /* Supprime le soulignement */
}

/* Uniformise les champs de formulaire */
button,
input,
textarea,
select {
  font: inherit;
}

/* Réinitialise les listes */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Container principal du site */
.container {
  width: min(100% - 40px, var(--container-width));
  margin-inline: auto; /* Centre horizontalement */
}

/* Espacement vertical des sections */
.section {
  padding: var(--section-padding) 0;
}

/* Style des titres de section */
.section-title {
  margin: 0 0 16px;
  font-family: var(--font-heading);
  font-size: 2rem;
  line-height: 1.2;
  color: var(--color-primary);
}

/* Style des textes de section */
.section-text {
  margin: 0;
  color: var(--color-text-light);
}

* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  display: block;
}