/*
 * Section Implantations (flexible-business-cases-implantations).
 * Dépend de flexible-business-cases-base.css (tokens --bc-*, conteneur, fonds).
 *
 * Proportions mesurées sur la maquette : la carte fait ~69 % de la largeur du
 * contenu, déborde de ~6 % à gauche et de ~30px au-dessus de la liste, et passe
 * derrière les badges. Les badges commencent à ~27,5 % de la largeur.
 */

/* Coupe le débordement de la carte à gauche ; pas de marge basse : le bord plat
   de la carte touche le bas de la section, comme sur la maquette. */
.flexible-business-cases-implantations {
    overflow: hidden;
    padding-bottom: 0;
}

.flexible-business-cases-implantations__eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    color: var(--bc-color-accent);
}

.flexible-business-cases-implantations__eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bc-color-accent);
    flex-shrink: 0;
}

/* Bleu accent illisible sur fond bleu foncé : bascule en blanc (même convention que le catalogue Event). */
.flexible-business-cases-section--bg-dark .flexible-business-cases-implantations__eyebrow {
    color: var(--bc-color-white);
}

.flexible-business-cases-section--bg-dark .flexible-business-cases-implantations__eyebrow::before {
    background: var(--bc-color-white);
}

.flexible-business-cases-implantations__title {
    margin: 0;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 800;
    font-size: 36px;
    line-height: 1.2;
    /* Force l'alignement : style/header.css centre les h2 globalement. */
    text-align: left;
    color: var(--bc-section-color-text);
}

.flexible-business-cases-implantations__description {
    margin: 16px 0 0;
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    line-height: 1.45;
    color: var(--bc-section-color-text);
}

/* Texte toujours au premier plan, au-dessus de la carte. */
.flexible-business-cases-implantations__eyebrow,
.flexible-business-cases-implantations__title,
.flexible-business-cases-implantations__description {
    position: relative;
    z-index: 2;
}

/* Zone carte + villes : carte et liste partagent la même cellule de grille. La
   hauteur de la zone vaut la plus grande des deux, donc la carte (calée en bas)
   ne peut jamais dépasser de plus de 30px au-dessus des badges, quelle que soit
   la largeur d'écran ou le nombre de villes. */
.flexible-business-cases-implantations__row {
    position: relative;
    display: grid;
    margin-top: 48px;
}

/* Carte au second plan : sous les badges et sous le texte. */
.flexible-business-cases-implantations__map {
    grid-area: 1 / 1;
    align-self: end;
    position: relative;
    z-index: 0;
    width: 69%;
    margin: -30px 0 0 -6%;
    pointer-events: none;
}

.flexible-business-cases-implantations__map-image {
    display: block;
    width: 100%;
    height: auto;
}

/* Chiffre clé optionnel, superposé à l'emplacement du « 13 » de la maquette.
   Laisser vide si l'image importée contient déjà le chiffre. */
.flexible-business-cases-implantations__badge {
    position: absolute;
    left: 23%;
    top: 54%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flexible-business-cases-implantations__badge-value {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 800;
    font-size: 110px;
    line-height: 1;
    color: var(--bc-color-white);
}

.flexible-business-cases-implantations__badge-label {
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    color: var(--bc-color-white);
}

/* Bouton « Voir nos N implantations » : masqué au-delà du mobile, cf. media
   query plus bas pour le comportement replié. */
.flexible-business-cases-implantations__cities-toggle {
    display: none;
}

/* Villes : badges sur 3 colonnes, retour à la ligne automatique. */
.flexible-business-cases-implantations__cities {
    grid-area: 1 / 1;
    align-self: start;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 22px;
    margin: 0 0 0 27.5%;
    padding: 0 0 56px;
    list-style: none;
}

.flexible-business-cases-implantations__city-link {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 50px;
    padding: 0 18px 0 20px;
    border-radius: 10px;
    background: #E2E5EA;
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: var(--bc-color-text);
    text-decoration: none;
    transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.flexible-business-cases-implantations__city-pin {
    flex-shrink: 0;
    color: var(--bc-color-accent);
}

.flexible-business-cases-implantations__city-name {
    flex: 1 1 auto;
    min-width: 0;
}

/* Flèche uniquement sur les villes qui ont un lien. */
a.flexible-business-cases-implantations__city-link::after {
    content: '';
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-color: #002266;
    -webkit-mask: url('../../assets/arrow-right.svg') no-repeat center / contain;
    mask: url('../../assets/arrow-right.svg') no-repeat center / contain;
    transition: transform 200ms ease;
}

/* Animation au survol : uniquement sur les villes avec un lien (le sélecteur
   `a.` ne matche jamais un badge rendu en <span>, cf. le partial). */
a.flexible-business-cases-implantations__city-link:hover {
    background: #D4D8DF;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 34, 102, 0.14);
}

a.flexible-business-cases-implantations__city-link:hover::after {
    transform: translateX(3px);
}

/* ── Tablette (<992px) : carte au-dessus, villes sur 2 colonnes ───────── */

@media (max-width: 991px) {
    .flexible-business-cases-implantations {
        padding-bottom: 40px;
    }

    .flexible-business-cases-implantations__map {
        grid-area: auto;
        align-self: auto;
        width: 100%;
        max-width: 560px;
        margin: 0 0 24px;
    }

    .flexible-business-cases-implantations__cities {
        grid-area: auto;
        margin-left: 0;
        padding-bottom: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .flexible-business-cases-implantations__badge-value {
        font-size: 72px;
    }
}

/* ── Mobile (<768px) : villes sur 1 colonne ────────────────────────────── */

@media (max-width: 767px) {
    .flexible-business-cases-implantations__title {
        font-size: 28px;
    }

    .flexible-business-cases-implantations__description {
        font-size: 16px;
    }

    /* Repliée derrière le bouton par défaut (cf. .cities-toggle ci-dessous) ;
       2 colonnes plutôt qu'empilée sur 1 une fois ouverte : avec 13 villes,
       une seule colonne fait une liste trop longue à faire défiler. */
    .flexible-business-cases-implantations__cities-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        margin-top: 8px;
        padding: 12px 16px;
        border: 1px solid #C9CDD3;
        border-radius: 8px;
        background: var(--bc-color-white);
        font-family: 'Manrope', sans-serif;
        font-weight: 600;
        font-size: 15px;
        color: var(--bc-color-text);
    }

    .flexible-business-cases-implantations__cities {
        display: none;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 16px;
    }

    .flexible-business-cases-implantations__cities.is-open {
        display: grid;
    }

    .flexible-business-cases-implantations__city-link {
        padding: 0 12px;
        font-size: 13px;
    }

    .flexible-business-cases-implantations__badge-value {
        font-size: 56px;
    }
}