/* ==========================================================================
   🗺️ ANIMATION CARTE DES VOYAGES - RÉALISME ET HALOS GLOBAUX
   ========================================================================== */

.map-animation {
    width: 100%;
    max-width: 680px; /* Augmenté pour mettre en valeur les nouveaux détails */
    height: auto !important; /* Force l'annulation du height fixe de 240px */
    margin: 25px auto 0 auto;
    position: relative;
    padding: 10px;
}

.map-svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

/* Taille ajustée des émojis pour la nouvelle échelle haute résolution */
.map-svg text {
    font-size: 32px;
    text-anchor: middle;
    dominant-baseline: central;
}

/* Élimine le bleu par défaut et applique un gris moderne */
.map-svg g path {
    fill: var(--text-color) !important; /* Gris-bleu doux (ou mettez #cbd5e1 pour du gris neutre) */
    stroke: #ffffff !important; /* Lignes de côtes / frontières en blanc */
    stroke-width: 0.6px;
    transition: fill 0.3s ease;
}

/* Changement de couleur uniquement au survol de la souris */
.map-svg:hover g path {
    fill: var(--section-bg) !important; /* Toute la carte change de couleur en même temps */
}

/* 🕒 Application automatique du point pivot sur le centre de chaque élément */
.pin {
  transform-box: fill-box;
  transform-origin: center;
  animation: professionalPopIn 10s cubic-bezier(0.25, 1, 0.5, 1) infinite;
  animation-fill-mode: backwards; /* Empêche le pin de clignoter au départ pendant le delay */
}

/* Délais d'animation uniques pour casser la monotonie */
.pin.p1  { animation-delay: 0.2s; }
.pin.p2  { animation-delay: 2.3s; }
.pin.p3  { animation-delay: 0.9s; }
.pin.p4  { animation-delay: 3.8s; }
.pin.p5  { animation-delay: 1.6s; }
.pin.p6  { animation-delay: 5.0s; }
.pin.p7  { animation-delay: 3.0s; }
.pin.p8  { animation-delay: 0.5s; }
.pin.p9  { animation-delay: 4.4s; }
.pin.p10 { animation-delay: 5.7s; }

/* Assure que le texte à l'intérieur du pin conserve son échelle redressée pendant l'animation */
.pin text {
  display: inline-block;
  overflow: visible;
}

/* Effet de survol sur les pins */
.pin:hover {
  cursor: pointer;
  filter: brightness(1.2); /* Rend le pin légèrement plus lumineux */
}

.pin:hover .halo {
  animation: pulse 0.8s infinite ease-in-out; /* Accélère le halo au survol */
}

/* 🎬 Animation de fondu et zoom sans saccade */
@keyframes professionalPopIn {
    0% {
        opacity: 0;
        transform: scale(0.4);
    }
    10% {
        opacity: 1;
        transform: scale(1.15); /* Rebond discret et élégant */
    }
    14% {
        transform: scale(1);
    }
    84% {
        opacity: 1;
        transform: scale(1);
    }
    92%, 100% {
        opacity: 0;
        transform: scale(0.6);
    }
}

/* Pulsation lente en arrière-plan des continents réalistes */
.map-continents path {
    animation: realMapPulse 6s ease-in-out infinite alternate;
}

@keyframes realMapPulse {
    0% { opacity: 0.28; }
    100% { opacity: 0.48; }
}

/* Conteneur principal dans le bloc intro */
.animated-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

/* Textes de présentation */
.hero-tagline {
  margin-bottom: 10px;
}

.intro-text {
  max-width: 800px;
  margin: 0 auto 20px auto;
  line-height: 1.5;
}

/* Zone réceptacle pour la carte SVG */
.animation-container {
  width: 100%;
  max-width: 1000px; /* Adapte la largeur max selon tes préférences */
  margin: 20px auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.map-animation {
  width: 100%;
  height: auto;
}

/* Le SVG s'adapte à 100% du conteneur sans déborder */
.map-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Ajustements pour mobiles */
@media (max-width: 768px) {
  .animation-container {
    margin: 15px auto;
  }
}