/* ============================================================ */
/* DESIGN SYSTEM MODERNE - OuagaAutoChine                       */
/* Palette : Bleu Électrique #0B5FFF | Anthracite #101828       */
/* Accent Racing #E63946 | Vert WhatsApp #25D366               */
/* ============================================================ */

/* Design Tokens */
:root {
  /* Marque */
  --brand-primary: #0B5FFF;
  --brand-primary-hover: #073B8E;
  --brand-primary-light: #E8F0FF;

  /* Accent */
  --accent-racing: #E63946;
  --accent-racing-hover: #C92C38;
  --whatsapp: #25D366;
  --whatsapp-hover: #1EAE54;

  /* Neutres */
  --text-primary: #101828;
  --text-secondary: #475467;
  --text-on-dark: #F9FAFB;
  --surface: #FFFFFF;
  --surface-muted: #F6F8FB;
  --surface-dark: #101828;
  --border: #D0D5DD;
  --border-light: #EAECF0;

  /* États Badges */
  --success: #16803C;
  --success-light: #EAF7EE;
  --warning: #B54708;
  --warning-light: #FFF4E5;
  --custom-order: #6941C6;
  --custom-order-light: #F4F3FF;
  --danger: #D92D20;
  --danger-light: #FEF3F2;

  /* Polices */
  --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Effets */
  --shadow-card: 0 4px 20px rgba(16, 24, 40, 0.06);
  --shadow-hover: 0 12px 28px rgba(16, 24, 40, 0.12);
  --shadow-button: 0 4px 12px rgba(11, 95, 255, 0.24);
}

/* Base Body & Typographie */
body {
    font-family: var(--font-body) !important;
    background-color: var(--surface) !important;
    color: var(--text-primary) !important;
}

/* ================================================================ */
/* MIGRATION PALETTE — remappe les anciennes couleurs style.css     */
/* vers les design tokens, sans modifier le fichier historique      */
/* ================================================================ */

/* Ancien rouge brique #bc442b → bleu primaire */
.main-nav nav .navbar-nav .nav-item a:hover,
.main-nav nav .navbar-nav .nav-item a:focus,
.main-nav nav .navbar-nav .nav-item a.active,
.main-nav nav .navbar-nav .nav-item:hover a,
.mobile-nav.mean-container .mean-nav ul li a.active,
.mean-container .mean-nav ul li a:hover,
.page-banner .breadcrumb li a:hover,
.page-banner .breadcrumb li.active,
.listing-item .text h3 a:hover,
.listing-item .text .location a:hover,
.popular-city-item .text h3 a:hover,
.popular-brand-item .text h3 a:hover,
.blog-item .text h3 a:hover,
.blog-item .text .button a:hover,
.heading h3,
.contact-item .contact-text h4,
.faq .panel-title a:hover,
.faq .panel-title a[aria-expanded="true"],
.footer-item ul li a:hover,
.footer-item h2 a:hover,
.copyright p a:hover,
.scroll-top,
.btn-primary,
.btn-outline-primary:not(:disabled):not(.disabled):hover,
.section-title h3,
.heading-section h3,
.about-item .text h3,
.feature-item .text h3,
/* Fiche véhicule : liens, icônes, titres de section */
.listing-page h2,
.listing-page h2 i,
.listing-page a,
.listing-page a i,
.listing-page .contact a,
.listing-page .features ul li i,
.listing-page .amenities ul li i,
.listing-sidebar a,
.listing-sidebar a i,
.listing-instruction-text,
.login-to-review,
.review-overall .total,
.breadcrumb a,
.breadcrumb li.active,
/* Bannière fiche véhicule : wishlist, edit, signaler */
.listing-single-banner a,
.listing-single-banner a i,
.listing-single-banner .wishlist a,
.listing-single-banner .listing-items a,
/* Icônes de contact et sections */
.contact-item .contact-icon i,
.contact-item i,
.about-item .icon i,
.feature-item .icon i,
/* FAQ accordéon */
.faq .panel-title a,
.faq .panel-title a.collapsed,
a:hover {
    color: var(--brand-primary) !important;
}

/* Fonds rouges → bleus */
.main-nav,
.btn-primary,
.filter-button,
.scroll-top,
.page-banner,
.section-bg-primary,
.bg-brand {
    background-color: var(--brand-primary) !important;
}

/* Bordures rouges → bleues */
.btn-primary,
.btn-outline-primary,
.filter-button {
    border-color: var(--brand-primary) !important;
}

/* Hover bleu foncé */
.btn-primary:hover,
.btn-primary:focus,
.filter-button:hover,
.scroll-top:hover {
    background-color: var(--brand-primary-hover) !important;
    border-color: var(--brand-primary-hover) !important;
    color: #fff !important;
}

/* Liens actifs / hover navbar */
.main-nav nav .navbar-nav .nav-item .dropdown-menu li a:hover,
.main-nav nav .navbar-nav .nav-item .dropdown-menu li a:focus,
.main-nav nav .navbar-nav .nav-item .dropdown-menu li a.active {
    color: var(--brand-primary) !important;
    background: var(--brand-primary-light) !important;
}

/* Boutons "Voir plus" / CTA génériques */
.btn-outline-primary {
    color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    background: transparent !important;
}

/* Ancien vert #00b200 → bleu pour cohérence (sauf WhatsApp) */
.btn-success:not(.whatsapp-btn):not([style*="25D366"]) {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}
.btn-success:not(.whatsapp-btn):not([style*="25D366"]):hover {
    background-color: var(--brand-primary-hover) !important;
    border-color: var(--brand-primary-hover) !important;
}

/* Ancien #385FDD (bleu ancien) → bleu primaire */
.listing-item .text .type .inner-new,
.listing-item .text .type .inner-used,
.blog-item .text .type,
.feature-item .icon,
.about-item .icon,
.lf-heading {
    color: var(--brand-primary) !important;
}

/* Fond sombre #111 / #000 / #101828 → anthracite unifié */
.main-nav,
.footer-area,
.top,
.mean-container .mean-bar {
    background-color: var(--surface-dark) !important;
}

/* Texte gris ancien #8c8c8c / #818181 → secondaire */
.text-muted,
.text-secondary,
.listing-item .text .location,
.popular-city-item .text p,
.popular-brand-item .text p,
.blog-item .text p,
.about-item .text p,
.feature-item .text p,
.footer-item ul li,
.copyright p {
    color: var(--text-secondary) !important;
}

/* Titres #333 → primaire
   NOTE: .page-banner h1 est EXCLU de cette liste — il doit rester BLANC
   pour rester lisible sur le fond sombre (image) du banner. */
h1, h2, h3, h4, h5, h6,
.listing-item .text h3,
.popular-city-item .text h3,
.popular-brand-item .text h3,
.blog-item .text h3,
.about-item .text h3,
.feature-item .text h3,
.heading h2,
.section-title h2,
.heading-section h2,
.footer-item h2 {
    color: var(--text-primary) !important;
}

/* Fond gris clair #f1f5f9 / #f5f5f5 / #eaeaea → surface muted */
body,
.page-content,
.listing-filter,
.contact-form,
.reg-login-form {
    background-color: var(--surface-muted) !important;
}

/* Cartes blanches avec ombre douce */
.listing-item,
.popular-city-item,
.popular-brand-item,
.blog-item,
.about-item,
.feature-item,
.contact-item,
.faq .panel-default {
    background: var(--surface) !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06) !important;
    border-radius: 12px !important;
}

/* Bordures #ddd / #dbdbdb / #eee → border-light */
.table-bordered,
.listing-filter,
.contact-form,
.reg-login-form,
.faq .panel-default {
    border-color: var(--border-light) !important;
}

/* Inputs focus → bleu primaire */
.form-control:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(11, 95, 255, 0.15) !important;
}

/* Badges cohérents */
.badge-primary,
.badge-info {
    background-color: var(--brand-primary) !important;
    color: #fff !important;
}
.badge-success {
    background-color: var(--whatsapp) !important;
    color: #fff !important;
}
.badge-danger {
    background-color: var(--accent-racing) !important;
    color: #fff !important;
}

/* Pagination */
.pagination .page-item.active .page-link {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
}
.pagination .page-link:hover {
    color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

/* Onglets / Tabs */
.nav-tabs .nav-link.active {
    color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

/* Icônes sociales hover */
.social-links a:hover,
.footer-item .social a:hover {
    color: var(--brand-primary) !important;
    background: var(--brand-primary-light) !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading) !important;
    color: var(--text-primary) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
}

/* ==================== Barre Supérieure Topbar ====================== */
.top {
    background: var(--surface-dark) !important;
    border-bottom: 1px solid #1F2A37 !important;
    padding: 6px 0;
}

.top ul.top-left li,
.top ul.top-left li a,
.top ul.top-right li,
.top ul.top-right li a {
    color: #EAECF0 !important;
    font-size: 13px;
    font-weight: 500;
}

.top ul.top-left li i {
    color: #41A4FF !important;
    margin-right: 6px;
}

.top ul.top-right select {
    color: #EAECF0 !important;
    background: transparent !important;
    border: 0 !important;
}

/* ==================== Navigation Principale Navbar ================= */
.navbar-area {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border-light) !important;
    box-shadow: 0 2px 12px rgba(16, 24, 40, 0.04) !important;
}

.main-nav {
    background: var(--surface) !important;
}

.main-nav nav .navbar-nav .nav-item a {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    font-family: var(--font-heading) !important;
    letter-spacing: -0.01em;
    padding: 24px 14px !important;
    position: relative;
}

.main-nav nav .navbar-nav .nav-item a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: var(--brand-primary);
    border-radius: 3px 3px 0 0;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.main-nav nav .navbar-nav .nav-item a:hover::after,
.main-nav nav .navbar-nav .nav-item a.active::after {
    width: 70%;
}

.main-nav nav .navbar-nav .nav-item a:hover,
.main-nav nav .navbar-nav .nav-item a.active {
    color: var(--brand-primary) !important;
}

.main-nav img {
    height: 52px !important;
    width: auto !important;
    max-width: none !important;
    object-fit: contain !important;
}

/* Dropdown Menu */
.main-nav nav .navbar-nav .nav-item .dropdown-menu {
    background: var(--surface) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.1) !important;
    padding: 8px 0 !important;
}

.main-nav nav .navbar-nav .nav-item .dropdown-menu li a {
    color: var(--text-primary) !important;
    border-bottom: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 10px 18px !important;
}

.main-nav nav .navbar-nav .nav-item .dropdown-menu li a:hover {
    color: var(--brand-primary) !important;
    background: var(--brand-primary-light) !important;
}

/* ==================== Hero Section ================= */
.search-section {
    position: relative;
    padding-top: 130px;
    padding-bottom: 130px;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.search-section .bg {
    display: none !important;
}

.search-section::before {
    display: none !important;
}

.search-section h1 {
    font-family: var(--font-heading) !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    font-size: 46px !important;
    text-align: center !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    letter-spacing: -0.03em;
}

.search-section .home-slogan {
    font-family: var(--font-body) !important;
    color: #EAECF0 !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    font-style: normal !important;
    text-align: center !important;
    margin: 16px auto !important;
}

.search-section .home-slogan::before,
.search-section .home-slogan::after {
    display: none !important;
}

.search-section p {
    color: #EAECF0 !important;
    font-size: 16px !important;
}

/* Boîte de recherche moderne */
.search-section .input-box {
    background: #FFFFFF !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.2) !important;
}

.search-section .input-box input,
.search-section .input-box select {
    background: #FFFFFF !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    height: 48px !important;
}

.search-section .input-box input::placeholder {
    color: var(--text-secondary) !important;
}

.search-section .input-group-append button,
.search-section button[type="submit"] {
    background: var(--brand-primary) !important;
    border: 1px solid var(--brand-primary) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    height: 48px !important;
    transition: all 0.3s ease !important;
}

.search-section .input-group-append button:hover {
    background: var(--brand-primary-hover) !important;
    border-color: var(--brand-primary-hover) !important;
    transform: translateY(-1px);
}

/* ==================== Sections & Grilles ================= */
.popular-city {
    background: var(--surface) !important;
    padding-top: 60px !important;
    padding-bottom: 40px !important;
}

.popular-city::before {
    display: none !important;
}

.heading h2 {
    font-family: var(--font-heading) !important;
    color: var(--text-primary) !important;
    font-weight: 800 !important;
}

.listing {
    background: var(--surface-muted) !important;
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}

/* Cartes Véhicules */
.listing .listing-item {
    border-radius: 12px !important;
    box-shadow: var(--shadow-card) !important;
    border: 1px solid var(--border-light) !important;
    transition: all 0.3s ease !important;
    background: var(--surface) !important;
    overflow: hidden;
}

.listing .listing-item:hover {
    box-shadow: var(--shadow-hover) !important;
    border-color: var(--brand-primary) !important;
    transform: translateY(-4px) !important;
}

.listing .listing-item .photo .brand a {
    background: var(--surface-dark) !important;
    color: #FFFFFF !important;
    font-weight: 600;
    border-radius: 6px;
    font-size: 12px;
    padding: 4px 10px;
}

.listing .listing-item .photo .featured-text {
    display: none !important;
}

.listing .listing-item .text {
    background: var(--surface) !important;
    padding: 20px !important;
}

.listing .listing-item .text h3 a {
    color: var(--text-primary) !important;
    font-weight: 700 !important;
    font-size: 18px !important;
}

.listing .listing-item .text h3 a:hover {
    color: var(--brand-primary) !important;
}

.listing .listing-item .text .location,
.listing .listing-item .text .location a {
    color: var(--text-secondary) !important;
    font-size: 14px !important;
}

.listing .listing-item .text .type-price .price {
    color: var(--text-primary) !important;
    font-weight: 800 !important;
}

/* Badges de Statut (Spécifications Audit) */
.badge-status-ouaga {
    background-color: var(--success-light) !important;
    color: var(--success) !important;
    border: 1px solid #A6E3B8 !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
}

.badge-status-transit {
    background-color: var(--warning-light) !important;
    color: var(--warning) !important;
    border: 1px solid #FECDCA !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
}

.badge-status-preorder {
    background-color: var(--custom-order-light) !important;
    color: var(--custom-order) !important;
    border: 1px solid #D9D6FE !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
}

.badge-status-danger {
    background-color: var(--danger-light) !important;
    color: var(--danger) !important;
    border: 1px solid #FECDCA !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
}

/* ==================== Boutons Généraux ==================== */
.btn-primary, .filter-button {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
}

.btn-primary:hover, .filter-button:hover {
    background-color: var(--brand-primary-hover) !important;
    border-color: var(--brand-primary-hover) !important;
}

.btn-whatsapp {
    background-color: var(--whatsapp) !important;
    border-color: var(--whatsapp) !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
}

.btn-whatsapp:hover {
    background-color: var(--whatsapp-hover) !important;
}

.btn-racing {
    background-color: var(--accent-racing) !important;
    border-color: var(--accent-racing) !important;
    color: #FFFFFF !important;
}

/* ==================== Footer Moderne =============================== */
.footer-area {
    background: var(--surface-dark) !important;
    border-top: 1px solid #1F2A37 !important;
    padding-top: 60px !important;
    padding-bottom: 30px !important;
}

.footer-area::after {
    display: none !important;
}

.footer-item h2 {
    color: #FFFFFF !important;
    font-family: var(--font-heading) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
}

.footer-item h2::after {
    background: var(--brand-primary) !important;
    width: 32px;
}

.footer-item p {
    color: #98A2B3 !important;
}

.footer-item ul li a {
    color: #98A2B3 !important;
    transition: all 0.2s ease !important;
}

.footer-item ul li a:hover {
    color: #41A4FF !important;
    padding-left: 6px !important;
}

.footer-social-link ul li a {
    background: #1D2939 !important;
    border-color: #1D2939 !important;
    color: #FFFFFF !important;
}

.footer-social-link ul li a:hover {
    background: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

.footer-bottom {
    border-top: 1px solid #1F2A37 !important;
    color: #667085 !important;
}

/* Scroll top button */
.scroll-top {
    background: var(--brand-primary) !important;
    border-radius: 8px !important;
}
.scroll-top:hover {
    background: var(--brand-primary-hover) !important;
}

/* ==========================================================================
   FLUID TYPOGRAPHY & RESPONSIVE DESIGNS SYSTEM FOR MOBILE / TABLET / DESKTOP
   ========================================================================== */

/* Typographie fluide globale */
h1, .display-4 {
    font-size: clamp(1.6rem, 4.5vw, 2.75rem) !important;
    line-height: 1.25 !important;
}

h2, .display-5 {
    font-size: clamp(1.3rem, 3.8vw, 2.2rem) !important;
    line-height: 1.3 !important;
}

p.lead, .home-slogan {
    font-size: clamp(0.92rem, 2.2vw, 1.15rem) !important;
    line-height: 1.55 !important;
}

/* Topbar Mobile & Tablette */
@media (max-width: 991px) {
    .header-area {
        padding: 8px 10px !important;
        background: #0B0E14 !important;
    }
    .header-area .left ul, 
    .header-area .right ul {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 6px 12px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .header-area ul li {
        font-size: 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        color: #EAECF0 !important;
    }
}

/* Hero Section Responsive */
@media (max-width: 768px) {
    .search-section {
        padding-top: 45px !important;
        padding-bottom: 45px !important;
    }
    .search-section h1 {
        font-size: clamp(1.4rem, 5.5vw, 2.2rem) !important;
        margin-bottom: 12px !important;
    }
    .search-section p.home-slogan {
        font-size: clamp(0.9rem, 3.2vw, 1.05rem) !important;
        max-width: 98% !important;
        margin: 10px auto 16px auto !important;
    }
    /* Stacking propre du formulaire de recherche hero sur smartphone */
    .search-section .input-box {
        flex-direction: column !important;
        padding: 12px !important;
        gap: 8px !important;
        width: 100% !important;
    }
    .search-section .input-box .form-group,
    .search-section .input-box input,
    .search-section .input-box select,
    .search-section .input-box button,
    .search-section .input-box .btn {
        width: 100% !important;
        max-width: 100% !important;
        height: 46px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
        margin: 0 !important;
    }
}

/* Section Vendez Votre Voiture Responsive */
@media (max-width: 768px) {
    .home-video {
        padding: 45px 16px !important;
    }
    /* Badge CTA bleu : plus large et aéré, texte non serré */
    .home-video .d-inline-block {
        display: block !important;
        width: 100% !important;
        max-width: 460px !important;
        margin: 0 auto 16px auto !important;
        padding: 16px 24px !important;
    }
    .home-video h2 {
        font-size: clamp(1.2rem, 4.5vw, 1.8rem) !important;
        line-height: 1.3 !important;
        margin: 0 !important;
    }
    /* Texte : laisse le contenu se répartir naturellement (pas de <br> forcés) */
    .home-video p.lead {
        font-size: clamp(0.95rem, 3.4vw, 1.1rem) !important;
        line-height: 1.6 !important;
        width: 100% !important;
        max-width: 520px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0 6px !important;
    }
    .home-video p.lead br {
        display: none !important;
    }
}

/* Cartes & Grille mobile */
@media (max-width: 576px) {
    .listing-item .photo img {
        height: 200px !important;
        object-fit: cover !important;
    }
    .listing-item .text h3 {
        font-size: 16px !important;
    }
    .listing-item .text .price {
        font-size: 15px !important;
    }
}

/* ==========================================================================
   AUDIT RESPONSIVE — Correctifs consolidés mobile / tablette / desktop
   Breakpoints : ≤576 mobile · ≤768 grande tablette · ≤991 tablette · ≥992 desktop
   ========================================================================== */

/* --- Anti-débordement global --- */
html, body {
    overflow-x: hidden;
}
img {
    max-width: 100%;
    height: auto;
}
.listing-item .photo img,
.popular-city-item .photo img,
.popular-brand-item img {
    width: 100%;
}

/* --- Topbar : empilement propre sous tablette --- */
@media (max-width: 991px) {
    .top .top-left,
    .top .top-right {
        justify-content: center !important;
    }
    .top .top-left li,
    .top .top-right li {
        margin: 2px 6px !important;
    }
}

@media (max-width: 576px) {
    .top {
        padding: 6px 0 !important;
    }
    .top .top-left,
    .top .top-right {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 4px 10px !important;
    }
    .top .top-left li,
    .top .top-right li {
        font-size: 12px !important;
    }
}

/* --- Navbar / Logo desktop --- */
.main-nav .navbar-brand img {
    max-height: 50px !important;
    width: auto !important;
}

@media (max-width: 991px) {
    /* Header mobile : bandeau sombre continu, sans bande blanche */
    .navbar-area {
        background: #0B0E14 !important;
        border-bottom: 0 !important;
        box-shadow: none !important;
    }
    .mobile-nav {
        display: block !important;
        position: relative !important;
        background: #0B0E14 !important;
        min-height: 64px !important;
    }
    .mobile-nav.mean-container .mean-bar {
        background: #0B0E14 !important;
        border-bottom: 0 !important;
        padding: 0 !important;
        height: 64px !important;
    }
    .main-nav {
        display: none !important;
    }

    /* Logo blanc centré verticalement */
    .mobile-nav .logo,
    .mean-container .logo {
        position: absolute !important;
        top: 50% !important;
        left: 14px !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 1000 !important;
    }
    .mobile-nav .logo img,
    .mean-container .logo img {
        height: 42px !important;
        width: auto !important;
        max-width: 180px !important;
        display: block !important;
    }

    /* Icône hamburger (drawer) en bleu, centrée verticalement */
    .mean-container a.meanmenu-reveal {
        color: var(--brand-primary) !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        padding: 0 15px 0 0 !important;
        height: auto !important;
    }
    .mean-container a.meanmenu-reveal span {
        background: var(--brand-primary) !important;
        height: 3px !important;
        margin-top: 4px !important;
        border-radius: 2px !important;
    }

    /* Drawer : panneau blanc à texte sombre */
    .mean-container .mean-nav {
        background: var(--surface) !important;
        margin-top: 64px !important;
    }
    .mean-container .mean-nav ul li a {
        color: var(--text-primary) !important;
        border-color: var(--border-light) !important;
        font-weight: 600 !important;
    }
    .mean-container .mean-nav ul li a:hover {
        background: var(--brand-primary-light) !important;
        color: var(--brand-primary) !important;
    }
    .mean-container .mean-nav ul li a.mean-expand {
        color: var(--text-secondary) !important;
    }
    .mean-container .mean-nav ul li a.mean-expand:hover {
        background: var(--brand-primary) !important;
        color: #FFFFFF !important;
    }
}

/* --- Hero : CTA empilés sur mobile --- */
.hero-cta-wrap .btn {
    white-space: normal !important;
}
@media (max-width: 576px) {
    .hero-cta-wrap {
        flex-direction: column !important;
    }
    .hero-cta-wrap .btn {
        width: 100% !important;
        margin: 0 0 10px 0 !important;
    }
}

/* --- Hero : formulaire de recherche Select2 --- */
.search-section .input-box {
    flex-wrap: wrap !important;
}
.search-section .input-box .form-control,
.search-section .input-box .select2-container {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

@media (max-width: 991px) {
    .search-section .input-box input,
    .search-section .input-box .select2-container {
        width: 48% !important;
        min-width: 0 !important;
        margin-bottom: 8px !important;
    }
    .search-section .input-group-append {
        width: 100% !important;
    }
    .search-section .input-group-append button {
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    .search-section .input-box {
        flex-direction: column !important;
        padding: 12px !important;
    }
    .search-section .input-box input,
    .search-section .input-box .select2-container,
    .search-section .input-box .select2-container--bootstrap .select2-selection--single,
    .search-section .input-box .btn,
    .search-section .input-group-append,
    .search-section .input-group-append button {
        width: 100% !important;
        max-width: 100% !important;
        height: 46px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
        margin: 0 0 8px 0 !important;
    }
    .search-section .input-box .select2-container--bootstrap .select2-selection--single {
        line-height: 32px !important;
    }
}

/* --- Barre de réassurance --- */
.reassurance-item {
    gap: 0 !important;
}
.reassurance-item i {
    flex-shrink: 0;
}
@media (max-width: 576px) {
    .reassurance-item {
        flex-direction: column !important;
        text-align: center !important;
    }
    .reassurance-item i {
        margin: 0 0 6px 0 !important;
    }
    .reassurance-item .text-left {
        text-align: center !important;
    }
}

/* --- Cartes véhicules : type/prix sans débordement --- */
.listing .listing-item .text .type-price {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
}
.listing .listing-item .text .type-price .type,
.listing .listing-item .text .type-price .price {
    width: auto !important;
    max-width: 100% !important;
}
.listing .listing-item .text .type-price .price {
    text-align: right !important;
}
.listing .listing-item .text h3 a {
    word-break: break-word !important;
}
.listing .listing-item .text .location {
    flex-wrap: wrap !important;
    word-break: break-word !important;
}

/* --- Page banner : titre fluide --- */
.page-banner h1 {
    font-size: clamp(1.4rem, 5vw, 2.2rem) !important;
}
.listing-single-banner h1 {
    font-size: clamp(1.4rem, 5vw, 2.5rem) !important;
}
.listing-single-banner .price {
    font-size: clamp(1.1rem, 4vw, 1.75rem) !important;
}

/* --- Fiche véhicule : badges et CTA --- */
.listing-single-banner .badge {
    font-size: 0.85rem !important;
    margin-bottom: 6px !important;
    white-space: normal !important;
}
.listing-single-banner .listing-items a {
    margin-bottom: 8px !important;
}
@media (max-width: 768px) {
    .listing-single-banner {
        padding-top: 100px !important;
        padding-bottom: 60px !important;
    }
    .listing-single-banner .btn-lg {
        width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* --- Footer : colonnes empilées --- */
@media (max-width: 576px) {
    .footer-area .footer-item {
        margin-bottom: 25px !important;
    }
    .footer-area .footer-item h2 {
        font-size: 15px !important;
    }
    .footer-area .copyright p {
        font-size: 13px !important;
        text-align: center !important;
    }
}

/* --- Boutons flottants : ne pas masquer le contenu --- */
@media (max-width: 576px) {
    .scroll-top {
        bottom: 16px !important;
        right: 16px !important;
        width: 42px !important;
        height: 42px !important;
        line-height: 38px !important;
        font-size: 18px !important;
    }
}

/* --- Grille cartes : une colonne sur mobile, deux sur tablette --- */
@media (max-width: 575px) {
    .listing .row > [class*="col-"],
    .popular-city .row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px !important;
    }
}

/* --- Images de cartes : ratio cohérent --- */
.listing-item .photo,
.popular-city-item .photo,
.popular-brand-item .photo {
    overflow: hidden !important;
}
.listing-item .photo img {
    aspect-ratio: 16 / 10;
    object-fit: cover !important;
    height: auto !important;
}
.popular-city-item .photo img,
.popular-brand-item .photo img {
    aspect-ratio: 4 / 3;
    object-fit: cover !important;
    height: auto !important;
}

/* --- Ad sections : images fluides --- */
.ad-section img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* --- Tableaux responsive : wrapper déjà présent, on sécurise --- */
.table-responsive,
.table-responsive-md {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}
.table-responsive table,
.table-responsive-md table {
    min-width: 520px;
}

/* --- Iframes (vidéos YouTube) : ratio 16/9 --- */
.listing-page .video-all iframe,
iframe[src*="youtube.com"],
iframe[src*="youtu.be"] {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    max-width: 100% !important;
}

/* --- Catalogue : filtres repliables et grille --- */
.filter-toggle-btn {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
}
.filter-toggle-btn[aria-expanded="true"] i.fa-sliders-h::before {
    content: "\f00d"; /* icône fermeture */
}

@media (max-width: 991px) {
    .listing-filter-col {
        margin-bottom: 20px !important;
    }
    .listing-filter {
        max-height: none !important;
    }
}

/* --- Cartes du catalogue : grille responsive --- */
@media (max-width: 991px) {
    .right-area .row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .right-area .row > .col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}