/* ════════════════════════════════════════════════════════════
   B.P.M — Orbite des villes autour du logo (hero-orbit.css)
   Le positionnement et la rotation sont pilotés par JS
   (hero-orbit.js) afin de s'adapter automatiquement au nombre
   réel d'agences. Ce fichier ne gère que l'apparence visuelle.
   Remplace hero-badges-fix.css.
   ════════════════════════════════════════════════════════════ */

.hero-visual {
  position: relative;
  padding: 70px;
  overflow: visible;
}

/* Conteneur de l'orbite — centré exactement sur le logo */
.hero-agency-badges {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 1px;
  pointer-events: none;
  z-index: 5;
}

/*
 * Chaque badge : positionné en JS via transform inline (translate
 * calculé à chaque frame), habillé visuellement ici.
 *
 * IMPORTANT : style.css définit ses propres règles .float-badge-1/2/3
 * avec des positions fixes en % (top/left/right) ET ses propres
 * animations CSS (float1/float2) qui entrent en conflit direct avec
 * le système d'orbite piloté par JS. On neutralise explicitement
 * CES règles ici avec !important pour garantir que SEUL le JS
 * contrôle la position et qu'aucune ancienne règle ne puisse plus
 * jamais provoquer de chevauchement, peu importe l'ordre réel de
 * chargement des fichiers CSS sur le serveur.
 */
.hero-agency-badges .float-badge {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: 14px;
  padding: 9px 15px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18), 0 2px 6px rgba(198,40,40,0.1);
  border: 1px solid rgba(212,164,55,0.25);
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--texte-fonce);
  white-space: nowrap;
  pointer-events: auto;
  transition: box-shadow 0.2s, border-color 0.2s;
  /* Neutraliser toute animation héritée de style.css (float1/float2) */
  animation: none !important;
  will-change: transform;
}

/*
 * Annuler explicitement les anciennes règles positionnelles de
 * style.css pour .float-badge-1, .float-badge-2, .float-badge-3.
 * Sans ce bloc, ces sélecteurs (plus spécifiques par leur ID de
 * classe) peuvent reprendre le dessus selon l'ordre de chargement
 * réel des fichiers sur le serveur.
 */
.hero-agency-badges .float-badge-1,
.hero-agency-badges .float-badge-2,
.hero-agency-badges .float-badge-3 {
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  animation: none !important;
}

.hero-agency-badges .float-badge i {
  font-size: 16px;
  color: var(--rouge);
  flex-shrink: 0;
}

.hero-agency-badges .float-badge:hover {
  box-shadow: 0 12px 32px rgba(0,0,0,0.22), 0 4px 10px rgba(198,40,40,0.15);
  border-color: var(--rouge);
  z-index: 7;
}

/* ── RESPONSIVE — désactiver l'orbite sur mobile, empiler proprement ── */
@media (max-width: 768px) {
  .hero-visual {
    padding: 20px 16px 100px;
  }

  .hero-agency-badges {
    position: static;
    top: auto; left: auto;
    width: auto; height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
    pointer-events: auto;
  }

  .hero-agency-badges .float-badge {
    position: static !important;
    transform: none !important;
    margin: 0;
  }

  .hero-agency-badges .float-badge:hover {
    transform: translateY(-2px) !important;
  }
}