/* ----------------------------------------------------- */
/* 1) ANIMATION “Hop5” pour le bouton DEVIS              */
/* ----------------------------------------------------- */
.hop5 {
  animation: hop5 1.8s infinite ease-in-out;
}
@keyframes hop5 {
  0%, 45%, 100% {
    transform: translateY(0) scaleX(1) scaleY(1);
  }
  50% {
    transform: translateY(-25px) scaleX(1.1) scaleY(0.9);
  }
  60% {
    transform: translateY(0) scaleX(1) scaleY(1.1);
  }
  70% {
    transform: translateY(-12px) scaleX(1.06) scaleY(0.94);
  }
  80% {
    transform: translateY(0) scaleX(1) scaleY(1.1);
  }
  90% {
    transform: translateY(0) scaleX(1) scaleY(1);
  }
}

/* ----------------------------------------------------- */
/* 2) POSITION DU CONTENEUR PRINCIPAL                    */
/* ----------------------------------------------------- */
.bfw-fab-container {
  position: fixed;
  bottom: 240px; /* Remonte le bouton “DEVIS” à 240px du bas */
  right: 20px;
  z-index: 9999;
}

/* ----------------------------------------------------- */
/* 3) BOUTON PRINCIPAL “DEVIS” / “×”                      */
/* ----------------------------------------------------- */
.bfw-fab-main {
  background: #373737;
  color: #efefef;
  padding: 0 20px;
  height: 56px;
  line-height: 56px;
  border: none;
  border-radius: 28px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  transition: background 0.3s, width 0.3s, padding 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.bfw-fab-main:hover {
  background: #282828;
}

/* Icône à gauche du texte “DEVIS” */
.bfw-fab-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  display: inline-block;
  vertical-align: middle;
}

.bfw-fab-text {
  display: inline-block;
}

/* Quand .opened est ajouté, le bouton devient un cercle 56×56 + croix */
.bfw-fab-main.opened {
  width: 56px;
  padding: 0;
  justify-content: center;
}

/* On cache icône+texte à l’état “ouvert” */
.bfw-fab-main.opened .bfw-fab-icon,
.bfw-fab-main.opened .bfw-fab-text {
  display: none;
}

/* Croix “×” injectée via ::after */
.bfw-fab-main.opened::after {
  content: "×";
  font-size: 28px;
  line-height: 56px;
  color: #efefef;
}

/* ----------------------------------------------------- */
/* 4) GROUPE GLOBAL – FLEX HORIZONTAL                    */
/* ----------------------------------------------------- */
.bfw-fab-group {
  position: absolute;
  bottom: 66px; /* 56px (hauteur bouton) + 10px d’écart */
  right: 0;
  display: flex;
  flex-direction: row; /* Deux colonnes : gauche ET droite */
  gap: 10px;
  align-items: flex-start; /* Aligne le haut des deux colonnes */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s;
}
.bfw-fab-group.show {
  opacity: 1;
  visibility: visible;
}

/* ----------------------------------------------------- */
/* 5) COLONNE SECONDAIRE (gauche) – 4 services           */
/* ----------------------------------------------------- */
.bfw-secondary-column {
  display: none;            /* Cachée jusqu’au clic "Autres" */
  flex-direction: column;   /* Aligner verticalement */
  gap: 10px;                /* Espace vertical si display:flex */
  order: 1;                 /* Position à gauche de la colonne primaire */
}

/* ----------------------------------------------------- */
/* 6) COLONNE PRIMAIRE (droite) – 4 services + Autres    */
/* ----------------------------------------------------- */
.bfw-primary-column {
  display: flex;
  flex-direction: column;   /* Aligner verticalement */
  gap: 10px;                /* Espace vertical entre les boutons */
  order: 2;                 /* Position à droite */
}

/* ----------------------------------------------------- */
/* 7) STYLES COMMUNS AUX SOUS-BOUTONS                    */
/* ----------------------------------------------------- */
.bfw-fab-sub {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: rgb(42, 180, 97);
  color: #ffffff;
  padding: 0 16px;
  height: 48px;
  line-height: 48px;
  text-decoration: none;
  border-radius: 24px;
  font-size: 14px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
  transition: background 0.3s;
  white-space: nowrap;
  border: none;
  cursor: pointer;
}
.bfw-fab-sub:hover {
  background: #4bf790;
}

/* ----------------------------------------------------- */
/* 8) ESPACEMENT ENTRE LES BOUTONS DE LA COLONNE GAUCHE */
/* ----------------------------------------------------- */
.bfw-secondary-column .bfw-fab-sub {
  margin-bottom: 10px;
}
.bfw-secondary-column .bfw-fab-sub:last-child {
  margin-bottom: 0;
}