/*-- 
    Nom du fichier : button.css
    Description    : Gere l'affichage des boutons pour le site

    Auteur         : French Riviera Conciergerie
    Copyright      : © 2024-2025 French Riviera Conciergerie. Tous droits réservés.
    Licence        : Ce fichier  est la propriété de French Riviera Conciergerie. 
                     Toute utilisation, reproduction, modification, ou distribution
                     de ce fichier  est strictement interdite sans l'autorisation 
                     écrite préalable de French Riviera Conciergerie.

    Date de création     : 22 septembre 2024
    Dernière mise à jour : 21 juillet 2025
--*/

@import url('/_COMMON/CSS/constantes.css');

/* ======= Bouton de base ======= */
.btn {
  width            : clamp(160px, 8vw, 220px);
  height           : clamp(50px, 8vw, 60px);
  padding          : 0.35rem 1.5rem;
  font-size        : var(--button-font-size);
  font-weight      : 600;
  color            : white;
  background       : #0ca88e;
  border           : none;
  border-radius    : 8px;
  cursor           : pointer;
  text-align       : center;
  display          : inline-flex;
  align-items      : center;
  justify-content  : center;
  box-sizing       : border-box;
  transition       : background-color 0.3s ease;
  font-family      : var(--button-font-family);
}

.btn.center {
  margin-left       : auto;
  margin-right      : auto;
  text-align        : center;
  display           : flex;
  flex-wrap         : wrap;
  gap               : 1rem;
  justify-content   : center;

}

.btn:hover,
.btn:focus {
  background-color  : #11ecc8;
  color             : black;
  outline           : none;
  box-shadow        : 0 0 8px rgba(0, 86, 179, 0.6);
}

/* ======= Alignements flex optionnels ======= */
.btn.align-start {
  align-self        : flex-start;
}

.btn.align-center {
  align-self        : center;
}

/* ======= Pleine largeur (mobile ou contextuel) ======= */
.btn.full-width {
  width             : 100%;
  display           : block;
}

