@charset "utf-8";

/* ===============================
 *  LISTING VILLES - Badges
 * =============================== */
.ville-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: auto;
}

.ville-badge {
    display: inline-block;
    font-size: .75rem;
    font-weight: var(--fw-bold);
    padding: .2rem .6rem;
    border-radius: var(--radius-lg);
    line-height: 1.4;
}

.ville-badge--vente {
    background: var(--primary-x-light);
    color: var(--primary-x-dark);
}

.ville-badge--location {
    background: var(--focus-x-light);
    color: var(--focus-2x-dark);
}

/* ===============================
 *  PAGE VILLE - En-tête (photo + carte), repris d'espritlandes
 * =============================== */
.ville-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
}

/* Hauteur fixe : les photos d'ERA sont en portrait */
.ville-hero-photo,
.ville-hero-map {
    border-radius: var(--radius-sm);
    overflow: hidden;
    height: 240px;
}

.ville-hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ville-map-iframe {
    border: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Intertitres des textes : h5 sur l'ancien site, h2 en Markdown ici */
.ville-texte h2 {
    font-size: clamp(16px, 2vw, 24px);
    margin-bottom: .5rem;
}

/* ===============================
 *  RESPONSIVE - Desktop (992px)
 * =============================== */
@media screen and (min-width: 992px) {

    .ville-hero {
        grid-template-columns: 55fr 45fr;
    }

    .ville-hero--photo-only,
    .ville-hero--map-only {
        grid-template-columns: 1fr;
    }

    .ville-hero-photo,
    .ville-hero-map {
        height: 380px;
    }

}