/*-- 
    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 : 08 fevrier 2026
--*/

@import url('/_COMMON/CSS/constantes.css');

/* ======= Bouton de base ======= */
.btn {
  width            : clamp(200px, 25vw, 320px); 
  height           : clamp(50px, 5vw, 60px);
  padding          : 0.35rem 1.5rem;
  font-size        : var(--button-font-size);
  font-weight      : 600;
  color            : white;
  background       : #2a4cc7; 
  border           : none;
  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  : #d4bd87;
  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;
}


/* Bouton en forme de fleche */
.arrow-btn {
  width           : 40px;
  height          : 40px;
  border-radius   : 100%;
  border          : none;
  display         : flex;
  align-items     : center;
  justify-content : center;
  text-decoration : none;
  font-size       : 30px;
  color           : white;
  background      : gray;
  transition      : all 0.25s ease;
}

.arrow-btn:hover {
  background     : #000;
  color          : #fff;
  transform      : translateX(4px);
}