/* ======================================================================
   GLOBAL STYLESHEET – imports & bases
   ----------------------------------------------------------------------
   @import reset.css              – réinitialisation CSS
   @import typography.css         – variables & règles typographiques
   @import header.css             – en-tête du site
   @import footer.css             – pied de page
   @import template-page-generic  – gabarit générique
   @import form.css               – formulaires
   @import team-section.css       – section équipe
   @import two_cols-section.css   – section 2 colonnes (texte + média)
   @import services-sections.css  – section services
   @import info_cards-section.css – section info cards
   @import exemples-section.css   – section exemples
   @import teaching-section.css   – section teaching
   ====================================================================== */

@import url("reset.css"); /* Réinitialisation */
@import url("typography.css"); /* Typographie       */
@import url("header.css");
@import url("footer.css");
@import url("template-page-generic.css");
@import url("form.css");
@import url("team-section.css");
@import url("two_cols-section.css");
@import url("services-sections.css");
@import url("info_cards-section.css");
@import url("exemples-section.css");
@import url("teaching-section.css");

/* ======================================================================
   LAYOUT GÉNÉRAL
   ====================================================================== */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* hauteur minimale = viewport */
}

/* le <main> occupe tout l’espace restant ------------------------------ */
main {
  flex: 1;
}

/* ======================================================================
   BOUTONS GLOBAUX
   ----------------------------------------------------------------------
   .btn-primary    – CTA principal (fond bleu)
   .btn-secondary  – CTA texte + icône (inline)
   .plus-icon      – cercle blanc + signe +
   ====================================================================== */
.btn-primary,
.btn-secondary {
  padding: 12px 24px;
  cursor: pointer;
  border-radius: 5px;
  font-weight: 700;
  text-decoration: none;
}

.btn-primary {
  display: inline-block;
  background: #69b3f0;
  color: #fff;
  transition: background 0.3s ease;
}
.btn-primary:hover {
  background: #527887;
}

.btn-secondary {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #527887;
  transition: color 0.3s ease;
  padding-left: 0; /* texte collé à l’icône */
}
.btn-secondary:hover {
  color: #69b3f0;
}

.plus-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #69b3f0;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}

/* ======================================================================
   RESPONSIVE
   ====================================================================== */

/* TABLETTES (≤ 1024 px) ---------------------------------------------- */
@media (max-width: 1024px) {
  .btn-primary,
  .btn-secondary {
    padding: 10px 20px;
  }

  /* garde l’alignement texte-icône */
  .btn-secondary {
    padding-left: 0;
  }
}

/* MOBILES (≤ 768 px) -------------------------------------------------- */
@media (max-width: 768px) {
  .btn-primary,
  .btn-secondary {
    font-size: 0.9rem;
  }
}

/* PETITS ÉCRANS (≤ 480 px) ------------------------------------------- */
@media (max-width: 480px) {
  .btn-primary,
  .btn-secondary {
    padding: 8px 16px;
    font-size: 0.85rem;
  }
}