@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");

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Hauteur minimale = taille de l’écran */
}

/* Le main prendra tout l’espace restant */
main {
  flex: 1;
}

/* STYLE DES BOUTONS */
.btn-secondary,
.btn-primary {
  padding: 12px 24px;
  cursor: pointer;
  border-radius: 5px;
  font-weight: bold;
  text-decoration: none;
}

.btn-primary {
  display: inline-block;
  background-color: #69b3f0;
  color: white;
  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;
}

.btn-secondary:hover {
  color: #69b3f0;
}

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

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

/* TABLETTES (max-width: 1024px) */
@media screen and (max-width: 1024px) {
  .btn-primary,
  .btn-secondary {
    padding: 10px 20px; /* Réduction des boutons */
  }

  .btn-secondary {
    padding-left: 0;
  }
}

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

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