@charset "utf-8";

/*
 * Page agence /fr/agence-immobiliere.
 * Mise en page reprise d'espritlandes (photo + carte, barre de contact sticky,
 * texte + formulaire en colonne), recolorée à la charte Tout l'Immobilier Landes.
 */

/* ===============================
 *  PHOTO + CARTE
 * =============================== */
.agence-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
    /* margin-top : décolle la photo du fil d'Ariane */
    margin: var(--space-4) 0;
}

.agence-hero-photo,
.agence-hero-map {
    border-radius: var(--radius-sm);
    overflow: hidden;
    aspect-ratio: 3 / 2;
    min-height: 220px;
}

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

/* ===============================
 *  HORAIRES
 * =============================== */
.agence-horaires {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    font-size: .875rem;
    color: var(--neutral-x-dark);
    text-align: center;
}

.agence-horaires-list {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.agence-horaire-item {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: .4rem;
}

.agence-horaire-day {
    color: var(--primary-x-dark);
}

.agence-horaires-note {
    margin: 0;
    font-weight: var(--fw-bold);
    color: var(--primary-x-dark);
}

/* ===============================
 *  BARRE CONTACT STICKY
 * =============================== */
.agence-contact-bar {
    position: sticky;
    top: var(--space-3);
    z-index: var(--zindex-floating-contact);
    background: var(--primary-x-light);
    border-radius: var(--radius-sm);
    padding: .75rem 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .4rem .75rem;
    margin-bottom: var(--space-5);
}

.agence-contact-item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--primary-x-dark);
    font-size: .813rem;
    line-height: 1.3;
}

/* a:link (base.css) l'emporte sur la seule classe : on la reprécise */
a.agence-contact-item,
a.agence-contact-item:link,
a.agence-contact-item:visited {
    color: var(--primary-x-dark);
    text-decoration: none;
}

a.agence-contact-item:hover,
a.agence-contact-item:focus {
    color: var(--primary-2x-dark);
    text-decoration: underline;
}

.agence-contact-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.agence-contact-separator {
    display: none;
    width: 1px;
    height: 1.25rem;
    background: var(--primary-light);
}

.agence-contact-cta {
    font-weight: var(--fw-bold);
}

/* ===============================
 *  TEXTE + INFORMATIONS LÉGALES
 * =============================== */
.agence-description {
    margin-bottom: var(--space-4);
}

.agence-legal {
    background: var(--neutral-x-light);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-5);
    font-size: .875rem;
}

.agence-legal h2 {
    margin-bottom: var(--space-2);
}

.agence-legal ul {
    list-style: none;
    padding: 0;
    margin-bottom: var(--space-3);
}

.agence-legal li {
    margin-bottom: .25rem;
}

/* ===============================
 *  FORMULAIRE
 * =============================== */
.agence-sidebar {
    background: var(--primary-x-light);
    border-radius: var(--radius-sm);
    padding: var(--space-4);
}

#nousContacter {
    scroll-margin-top: 6rem;
}

/* ===============================
 *  BIENS EN VENTE (titre à filet, idiome de la home et des villes)
 * =============================== */
.agence-listing {
    margin-bottom: var(--space-5);
}

.agence-listing h2.title {
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--focus-main);
    color: var(--focus-main);
    text-transform: none;
}

/*
===================================================================
    Medium devices (tablets, 768px and up)
===================================================================
*/
@media screen and (min-width: 768px) {

    .agence-horaires-list {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .agence-horaire-item::after {
        content: "|";
        color: var(--primary-light);
        margin: 0 .6rem;
    }

    .agence-horaire-item:last-child::after {
        display: none;
    }

    .agence-contact-bar {
        padding: .875rem 1.5rem;
        gap: .5rem 1.25rem;
    }

    .agence-contact-item {
        font-size: .875rem;
    }

}

/*
===================================================================
    Large devices (desktops, 992px and up)
===================================================================
*/
@media screen and (min-width: 992px) {

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

    .agence-hero-photo,
    .agence-hero-map {
        aspect-ratio: auto;
        height: 420px;
    }

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

    .agence-contact-bar {
        gap: .75rem 2rem;
    }

    .agence-contact-separator {
        display: block;
    }

    /* top : barre de contact (1rem) + sa hauteur (~3.25rem) + marge */
    .agence-sidebar {
        position: sticky;
        top: 6rem;
    }

}