/* Base commune pour tous les boutons */
.btn-vert,
.btn-blanc-bleu,
.btn-bords-blancs {
  font-family: "Exo2-Bold";
  font-size: 0.7rem; /* réduit */
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.3s ease;
  padding: 0.6rem; /* réduit */
  margin-top: 1rem;
}

/* Styles spécifiques */
.btn-vert {
  background: var(--light-blue-color);
  color: white;
}
.btn-vert:hover {
  background: var(--dark-grey-color);
  color: black;
}

.btn-blanc-bleu {
  background: white;
  border: 2px solid var(--dark-blue-color);
  color: var(--dark-blue-color);
}
.btn-blanc-bleu:hover {
  background: var(--dark-blue-color);
  color: white;
}

.btn-bords-blancs {
  background: transparent;
  border: 2px solid white;
  color: white;
}
.btn-bords-blancs:hover {
  background: white;
  color: black;
}

/* =======================
   Responsive tailles
======================= */

/* Smartphones (<576px) */
@media (max-width: 575.98px) {
  .btn-vert,
  .btn-blanc-bleu,
  .btn-bords-blancs {
    font-size: 0.65rem;
    padding: 0.5rem 0.7rem;
  }
}

/* Tablettes (576px–767px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .btn-vert,
  .btn-blanc-bleu,
  .btn-bords-blancs {
    font-size: 0.75rem;
    padding: 0.6rem 0.9rem;
  }
}

/* Petits laptops (768px–991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .btn-vert,
  .btn-blanc-bleu,
  .btn-bords-blancs {
    font-size: 0.85rem;
    padding: 0.7rem 1rem;
  }
}

/* Laptops standards (992px–1199px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .btn-vert,
  .btn-blanc-bleu,
  .btn-bords-blancs {
    font-size: 0.9rem;
    padding: 0.8rem 1.1rem;
  }
}

/* Grands écrans (1200px–1399px) */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .btn-vert,
  .btn-blanc-bleu,
  .btn-bords-blancs {
    font-size: 0.95rem;
    padding: 0.9rem 1.2rem;
  }
}

/* Très grands écrans (≥1400px) */
@media (min-width: 1400px) {
  .btn-vert,
  .btn-blanc-bleu,
  .btn-bords-blancs {
    font-size: 1rem;
    padding: 1rem 1.3rem;
  }
}
