/* =============================================================================
   0) FORCER LA COULEUR DES BOUTONS (TOUS ÉTATS) – pour empêcher le violet
   ============================================================================= */
.mse-main-action-btn,
.mse-main-action-btn:link,
.mse-main-action-btn:visited,
.mse-main-action-btn:hover,
.mse-main-action-btn:active,
.mse-main-action-btn:focus {
  color: #FFFFFF !important;
  text-decoration: none !important;
}

.mse-sub-btn,
.mse-sub-btn:link,
.mse-sub-btn:visited,
.mse-sub-btn:hover,
.mse-sub-btn:active,
.mse-sub-btn:focus {
  color: inherit !important;
  text-decoration: none !important;
}

/* =============================================================================
   1) Conteneur “mse-bottom-action” : position relative, centré sous la grille
   (on conserve le padding-bottom afin de ne jamais perdre le hover en 
   descendant vers les sous‐boutons)
   ============================================================================= */
.mse-bottom-action {
  position: relative !important;
  margin: 3rem auto 0 auto !important;
  width: fit-content !important;
  padding-bottom: 10px !important;  /* espace invisible sous le bouton */
  text-align: center !important;
}

/* =============================================================================
   2) Bouton principal “Nos Expertises”
   ============================================================================= */
.mse-main-action-btn {
  display: inline-block !important;
  background-color: #087CA7 !important; /* bleu vif */
  padding: 0.75rem 1.5rem !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  border-radius: 999px !important;      /* pill shape */
  box-shadow: 0 6px 18px rgba(59, 130, 246, 0.35) !important;
  transition: background-color 0.3s ease, transform 0.2s ease !important;
  z-index: 2 !important;
  cursor: pointer !important;
}
.mse-main-action-btn:hover {
  background-color: #075a78 !important;  /* bleu plus foncé */
  transform: scale(1.03) !important;
}

/* =============================================================================
   3) SOUS‐BOUTONS (Slide diagonale 3D + rotation extra éloigné)
   ============================================================================= */

/* 3.1) wrapper des sous-boutons (caché par défaut) */
.mse-sub-btns-wrapper {
  position: absolute !important;
  top: 100% !important;                 /* juste en dessous du bouton principal */
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  gap: 1rem !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.25s ease !important;
  z-index: 1 !important;
}

/* 3.2) Styles communs pour chaque sous-bouton */
.mse-sub-btn {
  display: inline-block !important;
  padding: 0.6rem 1rem !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  background-color: #FBBF24 !important;  /* jaune vif */
  color: #1F2937 !important;             /* gris foncé */
  transform: translate3d(0, 0, 0) rotate(0deg) scale(0) !important;
  opacity: 0 !important;
  transition: transform 0.4s cubic-bezier(0.5, 1.5, 0.5, 1),
            opacity   0.4s ease   !important;
  pointer-events: none !important;
  cursor: pointer !important;
}
.mse-sub-btn.mse-btn-cover {
  background-color: #FBBF24 !important;  /* blanc */
  border: 1px solid #FBBF24 !important;
  color: #1F2937 !important;
}

/* 3.3) Au hover de .mse-bottom-action : on fait apparaître le wrapper */
.mse-bottom-action:hover .mse-sub-btns-wrapper {
  opacity: 1 !important;
}

/* 3.4) “Nettoyage” (gauche + haut, plus éloigné) */
.mse-bottom-action:hover .mse-btn-clean {
  opacity: 1 !important;
  transform: translate3d(-80px, -180%, 0) rotate(-10deg) scale(1) !important;
  pointer-events: auto !important;
  transition-delay: 0.05s !important;
}

/* 3.5) “Couverture” (droite + haut, plus éloigné) */
.mse-bottom-action:hover .mse-btn-cover {
  opacity: 1 !important;
  transform: translate3d(85px, -180%, 0) rotate(10deg) scale(1) !important;
  pointer-events: auto !important;
  transition-delay: 0.15s !important;
}

/* ——————————————————————————————————————————————— */

/* 3.3-bis) Même animation déclenchée par .in-view */
.mse-bottom-action.in-view .mse-sub-btns-wrapper {
  opacity: 1 !important;
}

/* 3.4-bis) “Nettoyage” déclenché par .in-view */
.mse-bottom-action.in-view .mse-btn-clean {
  opacity: 1 !important;
  transform: translate3d(-100px, -180%, 0) rotate(-10deg) scale(1) !important;
  pointer-events: auto !important;
  transition-delay: 0.05s !important;
}

/* 3.5-bis) “Couverture” déclenché par .in-view */
.mse-bottom-action.in-view .mse-btn-cover {
  opacity: 1 !important;
  transform: translate3d(105px, -180%, 0) rotate(10deg) scale(1) !important;
  pointer-events: auto !important;
  transition-delay: 0.15s !important;
}


/* 3.6) Effet hover des sous-boutons */
.mse-btn-clean:hover {
  background-color: #F59E0B !important;
}
.mse-btn-cover:hover {
  background-color: #F59E0B !important;
}

/* =============================================================================
   4) Responsive – réduire l’écartement sur petits écrans
   ============================================================================= */
@media (max-width: 1024px) {
  /* entre 1024 et 768 px, on passe de 90px à 70px horiz. et -130% à -120% vert. */
/* 3.4-bis) “Nettoyage” déclenché par .in-view */
.mse-bottom-action.in-view .mse-btn-clean {
  opacity: 1 !important;
  transform: translate3d(-80px, -180%, 0) rotate(-10deg) scale(1) !important;
  pointer-events: auto !important;
  transition-delay: 0.05s !important;
}

/* 3.5-bis) “Couverture” déclenché par .in-view */
.mse-bottom-action.in-view .mse-btn-cover {
  opacity: 1 !important;
  transform: translate3d(85px, -180%, 0) rotate(10deg) scale(1) !important;
  pointer-events: auto !important;
  transition-delay: 0.15s !important;
}

}

@media (max-width: 768px) {
  /* sous 768 px, on passe à 50px horiz. et -110% vert. */
  .mse-sub-btns-wrapper {
    gap: 0.6rem !important;
  }
  .mse-sub-btn {
    padding: 0.5rem 0.9rem !important;
    font-size: 0.85rem !important;
  }

  /* 3.4-bis) “Nettoyage” déclenché par .in-view */
.mse-bottom-action.in-view .mse-btn-clean {
  opacity: 1 !important;
  transform: translate3d(-80px, -180%, 0) rotate(-10deg) scale(1) !important;
  pointer-events: auto !important;
  transition-delay: 0.05s !important;
}

/* 3.5-bis) “Couverture” déclenché par .in-view */
.mse-bottom-action.in-view .mse-btn-cover {
  opacity: 1 !important;
  transform: translate3d(85px, -180%, 0) rotate(10deg) scale(1) !important;
  pointer-events: auto !important;
  transition-delay: 0.15s !important;
}

}