/*
 * Annonces Bebium — styles liste/carte/filtres.
 * Breakpoints repris du thème thirty5 (pas de nouveaux seuils inventés) :
 * mobile 550px, tablette 990px, laptop 1180px.
 * Conventions : tiret simple (.btn-primary), pas de BEM, .is-active/.is-open/.is-loading pour les états.
 */

/* Le header est fixed + forcé en mode "scrollé" sur ces pages (pas de hero,
   voir includes/hooks.php) — il ne réserve donc pas sa place dans le flux.
   Ce padding cadre le contenu en dessous. Valeur approximative (~hauteur du
   header compact), à ajuster si besoin — scopé à ces pages uniquement. */
body.force-header-scrolled #main {
    padding-top: 95px;
}

.ab-page {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

/* Filtres — carte blanche, arrondie, ombre légère (cohérent avec le
   border-radius 8px du reste du site). Couleurs en dur (fichier CSS du
   plugin, pas compilé en SCSS) : #6ebb20 = $color-primary, #3f4456 = $font-dark. */

.ab-filtres {
    /* 90px : hauteur du header en mode "scrollé" (forcé sur cette page, valeur fixe) */
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    position: sticky;
    top: 90px;
}

/* Champs, séparés du bouton "Filtrer" pour pouvoir replier uniquement cette
   partie en dessous de $tablette (voir media query 990px) */
.ab-filtres-corps {
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: 100%;
}

.ab-filtre-champ {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}

.ab-filtre-champ label {
    font-size: 0.78em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #3f4456;
}

.ab-filtre-champ input[type="text"],
.ab-filtre-champ input[type="number"],
.ab-filtre-champ select {
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 0.9em;
    color: #3f4456;
    background: #fff;
    transition: border-color 0.2s ease;
}

.ab-filtre-champ input[type="text"]:focus,
.ab-filtre-champ input[type="number"]:focus,
.ab-filtre-champ select:focus {
    outline: none;
    border-color: #6ebb20;
}

.ab-filtre-champ input[type="range"] {
    accent-color: #6ebb20;
}

.ab-range-double {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ab-range-double input[type="number"] {
    width: 100%;
    min-width: 0;
}

.ab-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(52, 56, 76, 0.12);
    overflow: hidden;
    display: none;
}

.ab-suggestions.is-open {
    display: block;
}

.ab-suggestions button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    background: none;
    border: none;
    cursor: pointer;
}

.ab-suggestions button:hover,
.ab-suggestions button:focus {
    background: #f2f2f2;
}

/* Résultats */

.ab-resultats {
    flex: 1 1 auto;
    min-width: 0;
}

.ab-liste {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.ab-liste.is-loading {
    opacity: 0.5;
    pointer-events: none;
}

.ab-aucun-resultat {
    grid-column: 1 / -1;
    padding: 40px 20px;
    text-align: center;
}

.ab-annonce {
    display: flex;
    flex-direction: column;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    overflow: hidden;
}

.ab-annonce.is-active {
    border-color: currentColor;
}

.ab-annonce_image {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.ab-annonce_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ab-annonce_contenu {
    padding: 14px;
}

.ab-annonce_prix {
    font-weight: 700;
    margin: 0 0 4px;
}

.ab-annonce_titre {
    margin: 0 0 4px;
    font-size: 1em;
}

.ab-annonce_localisation {
    margin: 0 0 8px;
    opacity: 0.7;
}

.ab-annonce_infos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 0.85em;
}

.ab-pagination {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: 24px;
}

.ab-pagination a.is-active {
    font-weight: 700;
    text-decoration: underline;
}

/* Carte */

.ab-carte-conteneur {
    /* 90px : hauteur du header en mode "scrollé" (forcé sur cette page, voir
       includes/hooks.php) — valeur fixe, pas besoin de mesure JS ici. */
    flex: 0 0 40%;
    position: sticky;
    top: 90px;
    height: calc(100vh - 90px);
}

.ab-carte-map {
    width: 100%;
    height: 100%;
    min-height: 400px;
}

/* Cartouche tarif (remplace le pin Leaflet par défaut) */

.leaflet-marker-icon.ab-marqueur-prix {
    /* !important : le thème thirty5 charge volontairement son CSS en dernier
       (priority 99) pour toujours avoir la main — sans ça ces deux propriétés
       se font silencieusement écraser par les styles globaux du thème. */
    background: #3f4456 !important;
    color: #fff !important;
    font-size: 13px;
    line-height: 1;
    padding: 5px 9px;
    border-radius: 4px;
    border: none;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    transform: translate(-50%, -100%);
    cursor: pointer;
}

.leaflet-marker-icon.ab-marqueur-prix::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #3f4456;
}

/* Survol : passe au premier plan devant les autres pins et change de couleur.
   .is-survole reproduit le même état quand le survol vient de la liste de
   gauche plutôt que du pin lui-même (le :hover CSS ne peut pas être déclenché
   depuis un autre élément du DOM). */

.leaflet-marker-icon.ab-marqueur-prix:hover,
.leaflet-marker-icon.ab-marqueur-prix.is-survole {
    background: #ff6601 !important;
    z-index: 10000 !important;
}

.leaflet-marker-icon.ab-marqueur-prix:hover::after,
.leaflet-marker-icon.ab-marqueur-prix.is-survole::after {
    border-top-color: #ff6601;
}

.ab-carte-toggle {
    display: none;
}

/* Fiche annonce individuelle */

/* 100px avant le footer, demandé explicitement — l'article est le dernier
   élément avant get_footer(). */
.ab-fiche {
    padding-bottom: 100px;
}

.ab-breadcrumbs {
    padding: 15px;
    text-align: right;
}

/* Diaporama de la fiche — même logique que celui des "Réalisations" du
   thème (pas d'autoplay, flèches au survol, pastilles cliquables), reproduit
   ici pour que le plugin reste autonome. Chaque image reste un lien vers son
   fichier média (Easy FancyBox s'en charge pour l'effet lightbox). */
.ab-fiche_diapo {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 16 / 9;
    margin-bottom: 20px;
}

.ab-fiche_diapo_track {
    display: flex;
    height: 100%;
    transition: transform 0.4s ease;
}

.ab-fiche_diapo_slide {
    flex: 0 0 100%;
    height: 100%;
}

.ab-fiche_diapo_slide a,
.ab-fiche_diapo_slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ab-fiche_diapo_prev,
.ab-fiche_diapo_next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.85);
    color: #3f4456;
    cursor: pointer;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.ab-fiche_diapo_prev { left: 10px; }
.ab-fiche_diapo_next { right: 10px; }

.ab-fiche_diapo:hover .ab-fiche_diapo_prev,
.ab-fiche_diapo:hover .ab-fiche_diapo_next {
    opacity: 1;
    pointer-events: auto;
}

.ab-fiche_diapo_dots {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    gap: 6px;
    z-index: 3;
}

.ab-fiche_diapo_dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    cursor: pointer;
}

.ab-fiche_diapo_dots button.is-active {
    background: #fff;
}

.ab-fiche_colonnes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
    padding: 40px 0;
    padding-bottom: 150px;
}

.ab-fiche_prix {
    font-size: 1.6em;
    font-weight: 700;
    margin: 0 0 16px;
}

.ab-fiche_infos {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ab-fiche_infos li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ab-fiche_infos i {
    /* #6ebb20 = $color-primary du thème (fichier CSS du plugin, pas compilé en SCSS) */
    color: #6ebb20;
    width: 1.1em;
    text-align: center;
}

.ab-fiche_description {
    margin-bottom: 24px;
}

.ab-carte-map--fiche {
    height: 100%;
    min-height: 400px;
}

@media (max-width: 990px) {
    .ab-fiche_colonnes {
        grid-template-columns: 1fr;
    }

    .ab-carte-map--fiche {
        height: 320px;
    }
}

/* Widget de recherche rapide (accueil) */

.ab-widget-recherche {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

/* Bouton "Filtrer" — masqué en desktop, affiché en dessous de $tablette
   (voir media query 990px) où .ab-filtres-corps se replie derrière lui. */

.ab-filtres-toggle {
    display: none;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: none;
    background: transparent;
    padding: 0;
    font-size: 0.9em;
    font-weight: 700;
    color: #3f4456;
    cursor: pointer;
}

/* Tablette : la carte passe en dessous plutôt que compressée, les filtres
   se replient derrière un bouton (toujours sticky, cf. .ab-filtres) */

@media (max-width: 990px) {
    .ab-page {
        flex-direction: column;
    }

    .ab-filtres {
        flex: 1 1 auto;
        width: 116px;
        height: 50px;
        top: 100px;
        left: 8px;
        padding: 14px 18px;
        z-index: 20;
        box-shadow: 0 2px 10px rgba(52, 56, 76, 0.06);
    }

    .ab-filtres-toggle {
        display: flex;
        width: auto;
        align-self: flex-start;
    }

    .ab-filtres.is-open {
        width: 95%;
        height: auto;
    }

    /* Animation en 2 temps : la hauteur se déploie en premier, le contenu
       (fondu + léger glissement) apparaît juste après avec un court délai —
       inverse à la fermeture. max-height fixe (700px) plutôt qu'une valeur
       calculée : la liste de champs est connue et ne dépasse pas cette hauteur. */
    .ab-filtres-corps {
        max-height: 0;
        opacity: 0;
        visibility: hidden;
        overflow: hidden;
        transform: translateY(-6px);
        margin-top: 0;
        transition: max-height 0.25s ease, margin-top 0.25s ease, transform 0.2s ease, opacity 0.18s ease, visibility 0s linear 0.25s;
    }

    .ab-filtres.is-open .ab-filtres-corps {
        max-height: 700px;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        margin-top: 18px;
        transition: max-height 0.25s ease, margin-top 0.25s ease, transform 0.22s ease 0.05s, opacity 0.22s ease 0.05s, visibility 0s linear 0s;
    }

    .ab-carte-conteneur {
        position: static;
        width: 100%;
        height: 400px;
    }
}

/* Mobile : carte togglable en plein écran plutôt qu'affichée en permanence */

@media (max-width: 550px) {
    .ab-liste {
        grid-template-columns: 1fr;
    }

    .ab-carte-toggle {
        display: block;
        width: 100%;
    }

    .ab-carte-conteneur {
        height: 0;
        overflow: hidden;
        transition: height 0.2s ease;
    }

    .ab-carte-conteneur.is-open {
        height: 60vh;
    }
}