/*
 * zone-annonces.net - design (MIG-008, Bootstrap 5.3; architecture of 321reduc/bricofy, ROADMAP D11).
 * Brand: the red and yellow of the logo, on white surfaces; a classified-ads layout (search first,
 * categories, ad cards with photo, price and place).
 */
:root {
    --brand-red: #e3001b;
    --brand-red-dark: #b80016;
    --brand-red-soft: #fff0f1;
    --brand-yellow: #ffd400;
    --brand-yellow-soft: #fff8d6;
    --brand-ink: #1f2430;
    --surface: #f5f6f8;
    --text-muted-2: #646b78;
    --card-radius: 12px;
    --shadow-soft: 0 1px 2px rgba(31, 36, 48, .06), 0 4px 14px rgba(31, 36, 48, .06);
    --shadow-hover: 0 2px 4px rgba(31, 36, 48, .08), 0 10px 26px rgba(31, 36, 48, .12);

    --bs-primary: var(--brand-red);
    --bs-primary-rgb: 227, 0, 27;
    --bs-link-color: var(--brand-red-dark);
    --bs-link-color-rgb: 184, 0, 22;
    --bs-link-hover-color: var(--brand-ink);
    --bs-body-bg: var(--surface);
    --bs-body-color: var(--brand-ink);
    --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-border-radius: .55rem;
}

body { -webkit-font-smoothing: antialiased; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.bi { vertical-align: -.125em; }
.skip-link { position: absolute; top: .5rem; left: .5rem; z-index: 2000; padding: .5rem 1rem; background: #fff; }
.text-muted-2 { color: var(--text-muted-2); }

.btn-primary {
    --bs-btn-color: #fff; --bs-btn-bg: var(--brand-red); --bs-btn-border-color: var(--brand-red);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--brand-red-dark); --bs-btn-hover-border-color: var(--brand-red-dark);
    --bs-btn-active-bg: var(--brand-red-dark); --bs-btn-active-border-color: var(--brand-red-dark);
    font-weight: 600;
}
.btn-publish {
    --bs-btn-color: var(--brand-ink); --bs-btn-bg: var(--brand-yellow); --bs-btn-border-color: var(--brand-yellow);
    --bs-btn-hover-color: var(--brand-ink); --bs-btn-hover-bg: #f2c900; --bs-btn-hover-border-color: #f2c900;
    font-weight: 700;
}

/* Header */
.site-header { background: #fff; border-bottom: 3px solid var(--brand-red); box-shadow: 0 2px 10px rgba(31, 36, 48, .06); }
.site-header .navbar { --bs-navbar-padding-y: .5rem; }
.brand-logo { display: block; height: 44px; width: auto; }
.site-header .nav-link { font-weight: 500; color: var(--brand-ink); border-radius: .5rem; padding-inline: .75rem !important; }
.site-header .nav-link:hover, .site-header .nav-link.active { background: var(--brand-red-soft); color: var(--brand-red-dark); text-decoration: none; }
.site-header .dropdown-menu { max-height: 70vh; overflow-y: auto; }

/* Hero and search */
.hero { background: linear-gradient(135deg, var(--brand-red) 0%, #ff4b2b 100%); color: #fff; padding: 2.5rem 0 3rem; }
.hero h1 { font-weight: 800; letter-spacing: -.01em; }
.search-box { background: #fff; border-radius: 16px; padding: .75rem; box-shadow: var(--shadow-hover); color: var(--brand-ink); }
.search-box .form-select, .search-box .form-control { border-radius: .6rem; min-height: 3rem; }
.location-search { position: relative; }
.location-search-results {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 1050; margin: 0; padding: .35rem;
    list-style: none; background: #fff; border-radius: .6rem; box-shadow: var(--shadow-hover); max-height: 18rem; overflow-y: auto;
}
.location-search-results button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: .45rem .6rem; border-radius: .4rem; }
.location-search-results button:hover, .location-search-results button:focus { background: var(--brand-red-soft); }

/* Category tiles */
.category-tile { display: block; position: relative; border-radius: var(--card-radius); overflow: hidden; box-shadow: var(--shadow-soft); background: #fff; color: var(--brand-ink); height: 100%; }
.category-tile img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.category-tile .category-tile-body { padding: .6rem .8rem; font-weight: 600; display: flex; justify-content: space-between; gap: .5rem; }
.category-tile:hover { box-shadow: var(--shadow-hover); text-decoration: none; }

/* Ad cards */
.ad-card { background: #fff; border-radius: var(--card-radius); box-shadow: var(--shadow-soft); overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: box-shadow .15s; }
.ad-card:hover { box-shadow: var(--shadow-hover); }
.ad-card .ad-card-img { position: relative; background: #eef0f3; aspect-ratio: 4 / 3; }
.ad-card .ad-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-card .ad-card-body { padding: .75rem .9rem 1rem; display: flex; flex-direction: column; gap: .25rem; flex: 1; }
.ad-card .ad-card-title { font-weight: 600; font-size: 1rem; line-height: 1.3; color: var(--brand-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ad-card .ad-card-title::after { content: ""; position: absolute; inset: 0; }
.ad-card { position: relative; }
.ad-card .ad-card-price { font-weight: 800; color: var(--brand-red-dark); }
.ad-card .ad-card-meta { font-size: .85rem; color: var(--text-muted-2); margin-top: auto; }
.badge-demand { background: var(--brand-yellow-soft); color: #6b5800; }
.badge-pro { background: #e8f0ff; color: #1e4fa3; }

/* Listing layout */
.listing-head h1 { font-size: 1.6rem; font-weight: 700; }
.filter-panel { background: #fff; border-radius: var(--card-radius); box-shadow: var(--shadow-soft); padding: 1rem; }
.filter-panel h2 { font-size: 1rem; font-weight: 700; margin-bottom: .5rem; }
.filter-panel .list-unstyled a { display: flex; justify-content: space-between; gap: .5rem; padding: .2rem 0; color: var(--brand-ink); }
.filter-panel .list-unstyled a.active { color: var(--brand-red-dark); font-weight: 700; }
.breadcrumb { --bs-breadcrumb-divider-color: var(--text-muted-2); font-size: .9rem; }
.pagination { --bs-pagination-active-bg: var(--brand-red); --bs-pagination-active-border-color: var(--brand-red); --bs-pagination-color: var(--brand-red-dark); }

/* Ad page */
.ad-gallery { background: #fff; border-radius: var(--card-radius); box-shadow: var(--shadow-soft); overflow: hidden; }
.ad-gallery .carousel-item img { width: 100%; max-height: 32rem; object-fit: contain; background: #111; }
.ad-panel { background: #fff; border-radius: var(--card-radius); box-shadow: var(--shadow-soft); padding: 1.25rem; }
.ad-price { font-size: 1.8rem; font-weight: 800; color: var(--brand-red-dark); }
.ad-description { white-space: pre-line; }
.ad-specs dt { font-weight: 500; color: var(--text-muted-2); }
.ad-specs dd { font-weight: 600; }

/* Static pages */
.page-content { background: #fff; border-radius: var(--card-radius); box-shadow: var(--shadow-soft); padding: 1.5rem 1.75rem; }
.page-content h2 { font-size: 1.25rem; font-weight: 700; margin-top: 1.5rem; }

/* Footer */
.site-footer { background: var(--brand-ink); color: #c9ced8; margin-top: 3rem; padding: 2.5rem 0 1.5rem; font-size: .92rem; }
.site-footer a { color: #fff; }
.site-footer h2 { font-size: .95rem; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .04em; }
.category-pill { display: inline-flex; gap: .4rem; align-items: center; padding: .4rem .8rem; border-radius: 999px; background: #fff; box-shadow: var(--shadow-soft); color: var(--brand-ink); font-weight: 500; font-size: .92rem; }
.category-pill:hover { background: var(--brand-red-soft); text-decoration: none; }
.ad-gallery-empty { display: block; width: 100%; max-height: 18rem; object-fit: contain; background: #eef0f3; }
@media (max-width: 575.98px) {
    .ad-card { flex-direction: row; }
    .ad-card .ad-card-img { flex: 0 0 38%; aspect-ratio: auto; min-height: 7.5rem; }
    .ad-card .ad-card-body { padding: .6rem .75rem; }
}

/* AdSense unit (D14): reserved height against layout shift; label for transparency. */
.ad-slot { min-height: 280px; }
.ad-slot::before { content: "Publicité"; display: block; font-size: .7rem; color: var(--bs-secondary-color); text-align: center; margin-bottom: .25rem; }