/* START - FONTS */
@font-face {
  font-family: "Exo2-Regular";
  src: url('../fonts/Exo2-Regular.ttf') format("truetype");
}
@font-face {
  font-family: "Exo2-Bold";
  src: url('../fonts/Exo2-Bold.ttf') format("truetype");
}
@font-face {
  font-family: "Exo2-Black";
  src: url('../fonts/Exo2-Black.ttf') format("truetype");
}
@font-face {
  font-family: "Exo2-Italic";
  src: url('../fonts/Exo2-Italic.ttf') format("truetype");
}

@font-face {
  font-family: "Exo2-Bold-Italic";
  src: url('../fonts/Exo2-Bold-Italic.ttf') format("truetype");
}
/* END - FONTS */

/* START - TEXTS */
p,
.p-italic,
.p-bold,
.p-bold-caps {
  font-size: 1.1em;
  text-align: left;
}

p { font-family: 'Exo2-Regular'; }
.p-italic { font-family: 'Exo2-Italic'; }
.p-bold { font-family: 'Exo2-Bold'; }
.p-bold-caps {
  font-family: 'Exo2-Bold';
  text-transform: uppercase;
}

.banner-titre {
  font-family: "Exo2-Black";
  font-size: 3em;
}

.banner-sous-titre {
  font-family: "Exo2-Regular";
  font-size: 2.5em;
}

.main-titre,
.titre-vert-caps,
.titre-bleu,
.titre-italic,
.titre-vert-bold-italic {
  font-size: 1.5em;
  margin: 0;
}

.main-titre{
  font-family: "Exo2-Bold-Italic";
  text-transform: uppercase;
  color: var(--red-color);
}

.titre-vert-caps {
  font-family: "Exo2-Bold";
  color: var(--light-blue-color);
  text-transform: uppercase;
}

.titre-bleu {
  font-family: "Exo2-Bold";
  color: var(--dark-blue-color);
}

.titre-italic {
  font-family: "Exo2-Italic";
}

.titre-vert-bold-italic {
  font-family: "Exo2-Bold-Italic";
  color: var(--light-blue-color);
}

.sous-titre-bleu {
  font-family: "Exo2-Bold";
  font-size: 1.1em;
  color: var(--dark-blue-color);
}

.sous-titre-letter-spacing {
  font-family: "Exo2-Regular";
  font-size: 1.1em;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--dark-blue-color);
}
/* END - TEXTS */

/* =======================
   Responsive
======================= */

/* Smartphones (<576px) */
@media (max-width: 575.98px) {
  p { font-size: 0.9em; }
  .banner-titre { font-size: 1.8em; }
  .banner-sous-titre { font-size: 1.4em; }
  .titre-vert-caps, .titre-bleu { font-size: 1.5em; }
  .titre-italic { font-size: 1.2em; }
  .main-titre {font-size: 1.3em; }
  .titre-vert-bold-italic { font-size: 1.3em; }
  .sous-titre-bleu { font-size: 1.1em; }
  .sous-titre-letter-spacing { font-size: 0.85em; }
}

/* Tablettes (576px–767px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  p { font-size: 1em; }
  .banner-titre { font-size: 2.2em; }
  .banner-sous-titre { font-size: 1.8em; }
  .titre-vert-caps, .titre-bleu { font-size: 1.8em; }
  .titre-italic { font-size: 1.3em; }
  .main-titre {font-size: 1.5em; }
  .titre-vert-bold-italic { font-size: 1.5em; }
  .sous-titre-bleu { font-size: 1.3em; }
  .sous-titre-letter-spacing { font-size: 1em; }
}

/* Petits laptops (768px–991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  p { font-size: 1.05em; }
  .banner-titre { font-size: 2.5em; }
  .banner-sous-titre { font-size: 2em; }
  .titre-vert-caps, .titre-bleu { font-size: 2em; }
  .titre-italic { font-size: 1.6em; }
  .main-titre {font-size: 1.8em; }
  .titre-vert-bold-italic { font-size: 1.8em; }
  .sous-titre-bleu { font-size: 1.5em; }
  .sous-titre-letter-spacing { font-size: 1.05em; }
}

/* Laptops standards (992px–1199px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  p { font-size: 1.1em; }
  .banner-titre { font-size: 2.7em; }
  .banner-sous-titre { font-size: 2.2em; }
  .titre-vert-caps, .titre-bleu { font-size: 2.1em; }
  .titre-italic { font-size: 1.7em; }
  .main-titre {font-size: 1.9em; }
  .titre-vert-bold-italic { font-size: 1.9em; }
  .sous-titre-bleu { font-size: 1.7em; }
  .sous-titre-letter-spacing { font-size: 1.1em; }
}

/* Grands écrans (1200px–1399px) */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .banner-titre { font-size: 3em; }
  .banner-sous-titre { font-size: 2.5em; }
  .titre-vert-caps, .titre-bleu { font-size: 2.3em; }
  .titre-italic { font-size: 1.8em; }
  .main-titre {font-size: 2em; }
  .titre-vert-bold-italic { font-size: 2em; }
  .sous-titre-bleu { font-size: 1.9em; }
}

/* Très grands écrans (≥1400px) */
@media (min-width: 1400px) {
  .banner-titre { font-size: 3.2em; }
  .banner-sous-titre { font-size: 2.6em; }
  .titre-vert-caps, .titre-bleu { font-size: 2.4em; }
  .titre-italic { font-size: 1.9em; }
  .main-titre {font-size: 2.1em; }
  .titre-vert-bold-italic { font-size: 2.1em; }
  .sous-titre-bleu { font-size: 2em; }
}