/* ============================================================
   TD2026 – Module Annonces
   Design aligné sur le thème Bootscore (Bootstrap 5)
   Primary : #29235C | Secondary : #90D4F6 | Font : Afacad Flux
   ============================================================ */

/* ---- Variables (miroir des variables BS du thème) --------- */
:root {
    --ann-primary:        #29235C;
    --ann-primary-rgb:    41, 35, 92;
    --ann-secondary:      #90D4F6;
    --ann-location:       #0CA638;
    --ann-vente:          #DC2626;
    --ann-border:         #dee2e6;
    --ann-muted:          #6c757d;
    --ann-light:          #f8f9fa;
    --ann-radius:         6px;
}

/* ============================================================
   TOGGLE BAR  (sticky, identique à .view-toggle-bar du site)
   ============================================================ */
.ann-toggle-bar {
    background: #fff;
    border-bottom: 1px solid var(--ann-border);
    padding: .75rem 1.5rem;
    position: sticky;
    top: 148px;          /* hauteur header Bootscore */
    width: 100%;
    z-index: 100;
}
.ann-toggle-inner {
    display: flex;
    gap: .5rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Boutons toggle (identiques à .view-toggle-btn) */
.ann-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem 1.1rem;
    border: 1px solid var(--ann-primary);
    border-radius: var(--ann-radius);
    background: #fff;
    color: var(--ann-primary);
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.ann-toggle-btn.active,
.ann-toggle-btn:hover {
    background: var(--ann-primary);
    color: #fff;
}

/* ============================================================
   EN-TÊTE PAGE
   ============================================================ */
.ann-page-header {
    padding: 2rem 0 1rem;
}
.ann-page-header h1 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--ann-primary);
    margin-bottom: .25rem;
}
.ann-count {
    font-size: .85rem;
    color: var(--ann-muted);
}

/* Filtres rapides (archive générale) */
.ann-filtres {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.ann-filtre-btn {
    padding: .35rem 1rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    border: 1.5px solid currentColor;
    transition: background .15s, color .15s;
}
.ann-filtre-btn--location { color: var(--ann-location); }
.ann-filtre-btn--vente    { color: var(--ann-vente);    }
.ann-filtre-btn:hover { background: currentColor; color: #fff; }

/* ============================================================
   VUES (liste / carte)
   ============================================================ */
.ann-view         { display: none; }
.ann-view.active  { display: block; }
.ann-view--liste  { padding: 1.5rem 0 3rem; }

/* ============================================================
   CARTES LISTE  (style .realisation-card du site)
   ============================================================ */
.annonce-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--ann-border);
    border-radius: var(--ann-radius);
    overflow: hidden;
    background: #fff;
    transition: box-shadow .2s;
    text-decoration: none;
    color: inherit;
}
.annonce-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
    text-decoration: none;
    color: inherit;
}

/* Thumbnail */
.annonce-card__img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    background: #e9ecef;
}
.annonce-card__img-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #adb5bd;
    font-size: 2rem;
    position: relative;
}
.annonce-card__badge {
    position: absolute;
    top: .6rem;
    left: .6rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #fff;
}
.annonce-card__img-wrap {
    position: relative;
    display: block;
}

/* Corps */
.annonce-card__body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.annonce-card__title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: .35rem;
    line-height: 1.3;
    color: #212529;
}
.annonce-card__meta {
    font-size: .8rem;
    color: var(--ann-muted);
    margin-bottom: .6rem;
    display: flex;
    align-items: center;
    gap: .35rem;
}
.annonce-card__excerpt {
    font-size: .875rem;
    color: var(--ann-muted);
    margin-bottom: 1rem;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.annonce-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: .85rem;
    border-top: 1px solid var(--ann-border);
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: auto;
}
.annonce-card__prix {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ann-primary);
}

/* Badges couleur selon type */
.ann-badge--location { background: var(--ann-location); }
.ann-badge--vente    { background: var(--ann-vente);    }

/* ============================================================
   CARTE LEAFLET – ARCHIVE
   ============================================================ */
#annonces-map {
    height: 800px;
    width: 100%;
}

/* Marqueurs circulaires (identiques à .marker-pin du site) */
.ann-marker-pin {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--ann-primary);
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
    cursor: pointer;
    transition: transform .2s, background .2s;
}
.ann-marker-pin--location { background: var(--ann-location); }
.ann-marker-pin--vente    { background: var(--ann-vente);    }
.ann-marker-pin:hover     { transform: scale(1.4); }
.ann-marker-active        {
    transform: scale(1.6) !important;
    background: var(--ann-secondary) !important;
    border-color: var(--ann-primary);
}

/* ============================================================
   OFFCANVAS DÉTAIL (Bootstrap Offcanvas)
   ============================================================ */
#ann-oc-annonce {
    width: 420px;
    max-width: 95vw;
}
#ann-oc-thumbnail img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: var(--ann-radius);
}
#ann-oc-prix {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ann-primary);
}
#ann-oc-localisation {
    font-size: .875rem;
    color: var(--ann-muted);
    display: flex;
    align-items: center;
    gap: .35rem;
}
.ann-oc-badge {
    display: inline-block;
    padding: .2rem .65rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #fff;
    margin-bottom: .5rem;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.ann-pagination {
    margin-top: 2.5rem;
    text-align: center;
}
.ann-pagination .nav-links {
    display: flex;
    justify-content: center;
    gap: .4rem;
    flex-wrap: wrap;
}
.ann-pagination .page-numbers {
    display: inline-block;
    padding: .4rem .85rem;
    border: 1px solid var(--ann-border);
    border-radius: var(--ann-radius);
    text-decoration: none;
    color: var(--ann-primary);
    font-size: .875rem;
    transition: background .15s;
}
.ann-pagination .page-numbers.current,
.ann-pagination .page-numbers:hover {
    background: var(--ann-primary);
    color: #fff;
    border-color: var(--ann-primary);
}

/* ============================================================
   SINGLE ANNONCE
   ============================================================ */
.ann-single {
    padding: 2rem 0 4rem;
}

/* Breadcrumb */
.ann-breadcrumb {
    font-size: .8rem;
    color: var(--ann-muted);
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.ann-breadcrumb a { color: var(--ann-muted); text-decoration: none; }
.ann-breadcrumb a:hover { color: var(--ann-primary); }

/* Hero image */
.ann-hero-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--ann-radius);
    display: block;
    margin-bottom: 1rem;
}

/* Prix */
.ann-single-prix {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ann-primary);
    margin-bottom: 1rem;
}

/* Section headings */
.ann-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ann-primary);
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--ann-secondary);
    margin-bottom: 1rem;
}

/* Grille tarifaire */
.ann-tarifs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}
.ann-tarifs-table th,
.ann-tarifs-table td {
    text-align: left;
    padding: .55rem .75rem;
    border-bottom: 1px solid var(--ann-border);
    vertical-align: top;
}
.ann-tarifs-table thead th {
    background: var(--ann-secondary);
    color: var(--ann-primary);
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.ann-tarifs-table tbody tr:nth-child(even) {
    background: var(--ann-light);
}
.ann-tarif-prix { font-weight: 700; }

/* Galerie */
.ann-galerie-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: .75rem;
}
.ann-galerie-item {
    display: block;
    border-radius: var(--ann-radius);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    cursor: pointer;
}
.ann-galerie-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s;
}
.ann-galerie-item:hover img { transform: scale(1.05); }

/* Carte single */
.ann-single-map {
    border-radius: var(--ann-radius);
    overflow: hidden;
    border: 1px solid var(--ann-border);
    height: 400px;
}

/* Lightbox */
.ann-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, .92);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ann-lightbox[hidden] { display: none; }
.ann-lightbox__content {
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.ann-lightbox__img {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: var(--ann-radius);
}
.ann-lightbox__counter {
    color: rgba(255, 255, 255, .6);
    font-size: .8rem;
    margin: .5rem 0 0;
}
.ann-lightbox__close,
.ann-lightbox__prev,
.ann-lightbox__next {
    position: fixed;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
}
.ann-lightbox__close:hover,
.ann-lightbox__prev:hover,
.ann-lightbox__next:hover { background: rgba(255, 255, 255, .3); }
.ann-lightbox__close { top: 1rem; right: 1rem; font-size: 1.8rem; }
.ann-lightbox__prev  { left: 1rem;  top: 50%; transform: translateY(-50%); }
.ann-lightbox__next  { right: 1rem; top: 50%; transform: translateY(-50%); }

/* ============================================================
   VIDE
   ============================================================ */
.ann-empty {
    padding: 3rem;
    text-align: center;
    color: var(--ann-muted);
    background: var(--ann-light);
    border-radius: var(--ann-radius);
    border: 1px dashed var(--ann-border);
}