.cardCollection{
        /* Bordure blanche subtile */
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: 12px;

        /* Effet relief / ombre */
        box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.08);

        /* Important pour que le radius s’applique partout */
        overflow: hidden;
        background-color: #2b3035 !important; /* ou ton fond actuel */
      }

      .card-img-top {
        position: relative;
        height: 300px;
        width: 100%;
        max-width : 400px;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        align-items: center;      /* centre verticalement */
        justify-content: center;  /* centre horizontalement */
        aspect-ratio: 1/1; /* carré */
        margin: 0 auto;
      }

      .flip-card {
        width: 100%;
        height: 100%;
        perspective: 1000px;
      }

      .flip-card-inner {
        position: relative;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        transition: transform 0.8s ease;
        cursor: pointer;
        will-change: transform;
      }

      .flip-card.flipped .flip-card-inner {
        transform: rotateY(180deg);
      }

      .flip-card-front,
      .flip-card-back {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        font-size: 1.5rem;
        color: #eceeef;
      }

      /* Recto : centrer la photo */
      .flip-card-front {
        background-color: transparent;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow : hidden;

      }

      .flip-card-front img {
        width: 100%;
        height: 100%;
        object-fit: contain;       /* remplit sans déformer */
        display: block;          /* supprime les espaces blancs */
        border-radius: inherit;  /* coins arrondis si flip-card-front en a */
        padding: 5px;
      }
      
      /* Verso : carte Folium */
      .flip-card-back {
        background-color: transparent;
        transform: rotateY(180deg);
        position: relative;       /* Important pour que map-container absolute se réfère à ce verso */
        overflow: hidden;
        border-radius: 15px;
      }

      /* Carte prend 100% de la flip-card-back */
      .flip-card-back .map-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 5px;  /* petit espace intérieur */
        box-sizing: border-box; /* pour que le padding ne déborde pas */
        border-radius: 10px;       /* arrondi de la carte */
        overflow: hidden;          /* important pour que l'iframe respecte les coins arrondis */
        
      }

      .flip-card-back .map-container iframe {
        width: 100%;
        height: 100%;
        border: 0;
        border-radius: 10px;       /* coins arrondis de l'iframe */
      }

/* Par défaut : la map cachée ne capte rien */
.flip-card-back .map-container {
  pointer-events: none;
  touch-action: none;
}

/* Recto : l'image ne bloque pas le scroll vertical de la page */
.flip-card-front,
.flip-card-front img {
  pointer-events: none;
  touch-action: pan-y;
}

/* Le conteneur peut rester cliquable pour le bouton/flip si besoin */
.flip-card,
.flip-card-inner {
  touch-action: pan-y;
}

/* Quand le verso est affiché : la map devient interactive */
.flip-card.flipped .map-container {
  pointer-events: auto;
  touch-action: pan-x pan-y;
}

/* Quand le verso est affiché, l'iframe Leaflet/Folium doit aussi capter */
.flip-card.flipped .map-container iframe {
  pointer-events: auto;
  touch-action: pan-x pan-y;
}