/* ============================================================ */
/* RESPONSIVE FIX PACK - OuagaAutoChine                         */
/* Corrige les cartes allongées, débordements, et lisibilité      */
/* mobile/tablette pour les principaux composants               */
/* ============================================================ */

/* --- Anti-débordement global : ne pas casser la largeur viewport --- */
html, body {
    overflow-x: hidden;
}

body {
    min-height: 100vh;
}

/* --- Page banner H1 : forcer BLANC avec text-shadow pour lisibilité
       sur fond sombre (image). Corrige le titre illisible "Contact" etc. --- */
.page-banner h1 {
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 2px rgba(0, 0, 0, 0.8) !important;
}
.page-banner .breadcrumb-item,
.page-banner .breadcrumb-item a,
.page-banner .breadcrumb-item.active {
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7) !important;
}
.page-banner .breadcrumb-item::before {
    color: #ffffff !important;
}

/* --- Listing single banner H1 : forcer BLANC avec text-shadow
       theme_chinois.css force tous les h1 en var(--text-primary) (bleu foncé).
       Le commentaire ligne 208 de theme_chinois.css mentionne l'exclusion de
       .page-banner h1 mais oublie .listing-single-banner h1. --- */
.listing-single-banner h1 {
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 2px rgba(0, 0, 0, 0.8) !important;
}

/* --- Icône WhatsApp dans les réseaux sociaux de la fiche véhicule --- */
.listing-single-banner .social a i.fab.fa-whatsapp {
    color: #25D366 !important;
}
.listing-single-banner .social a:hover i.fab.fa-whatsapp {
    color: #ffffff !important;
}

/* --- WOW.js fallback : si non initialisé, forcer la visibilité --- */
/* (évite les éléments cachés en visibility:hidden sans animation) */
.wow {
    color: #ffffff !important;
}
    color: #ffffff !important;
}

/* --- WOW.js fallback : si non initialisé, forcer la visibilité --- */
/* (évite les éléments cachés en visibility:hidden sans animation) */
.wow {
/* (évite les éléments cachés en visibility:hidden sans animation) */
.wow {
    visibility: visible !important;
}

/* --- Images globales : ne jamais dépasser le conteneur --- */
img {
    max-width: 100%;
    height: auto;
}

/* --- POPULAR CITY (Marques) : empêcher l'allongement vertical --- */
/* theme_chinois.css impose aspect-ratio: 4/3 + height: auto sur .photo img    */
/* Sur mobile (<576px) : on cap la hauteur à 200px pour éviter l'image  */
/* ultra-large quand le card prend 100% de la viewport                 */
/* Sur 576-767px : on garde aspect-ratio 4/3 (2 colonnes)              */
@media (max-width: 575px) {
    .popular-city-item {
        height: auto !important;
        max-height: none !important;
    }
    .popular-city-item .photo {
        height: 200px !important;
        aspect-ratio: auto !important;
    }
    .popular-city-item .photo img {
        height: 200px !important;
        aspect-ratio: auto !important;
        width: 100% !important;
    }
}

/* --- LISTING ITEM (Voitures) : limiter la hauteur image mobile --- */
@media (max-width: 575px) {
    .listing-item .photo {
        height: 200px !important;
        aspect-ratio: auto !important;
    }
    .listing-item .photo img {
        height: 200px !important;
        aspect-ratio: auto !important;
        width: 100% !important;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .listing-item .photo {
        height: 220px !important;
        aspect-ratio: auto !important;
    }
    .listing-item .photo img {
        height: 220px !important;
        aspect-ratio: auto !important;
    }
}

/* --- LISTING RESULT : filtre latéral passe en haut sur mobile --- */
@media (max-width: 991px) {
    .listing .listing-filter {
        margin-bottom: 25px !important;
    }
}

@media (max-width: 767px) {
    .listing-filter {
        padding: 15px !important;
    }
    .listing-filter .lf-widget h2 {
        font-size: 15px !important;
        margin-bottom: 12px !important;
    }
    .listing-filter .lf-widget .form-check {
        font-size: 14px !important;
    }
}

/* --- PAGE BANNER : éviter débordement sur très petits écrans --- */
@media (max-width: 575px) {
    .page-banner {
        padding-top: 80px !important;
        padding-bottom: 60px !important;
    }
    .page-banner h1 {
        font-size: 1.4rem !important;
        line-height: 1.3 !important;
    }
    .page-banner .breadcrumb {
        font-size: 13px !important;
        flex-wrap: wrap !important;
    }
}

/* --- LISTING SINGLE BANNER : image en haut sur mobile --- */
@media (max-width: 767px) {
    .listing-single-banner .col-lg-7,
    .listing-single-banner .col-lg-5 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .listing-single-banner {
        padding-top: 90px !important;
        padding-bottom: 50px !important;
    }
    .listing-single-banner .listing-photo {
        margin-bottom: 25px !important;
    }
    .listing-single-banner .listing-items {
        margin-top: 15px !important;
        margin-bottom: 15px !important;
    }
    .listing-single-banner .listing-items a {
        display: inline-block !important;
        margin-right: 6px !important;
        margin-bottom: 8px !important;
    }
}

/* --- OPENING HOURS : tableau fluide sur mobile/tablette
       Sans fix, le tableau .openning-hour garde une largeur fixe (~520px)
       et déclenche un scroll horizontal sur mobile. --- */
.openning-hour .table-responsive {
    overflow-x: visible !important;
}
.openning-hour table.table,
.openning-hour table.table-bordered {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    word-wrap: break-word !important;
}
.openning-hour table.table td {
    width: 50% !important;
    word-break: break-word !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
}
@media (max-width: 575px) {
    .openning-hour table.table td {
        font-size: 12px !important;
        padding: 6px 8px !important;
    }
    .openning-hour h2 {
        font-size: 18px !important;
    }
}

/* --- FAQ : panneau plus compact sur mobile --- */
@media (max-width: 575px) {
    .faq .panel-heading {
        padding: 12px 15px !important;
    }
    .faq .panel-title {
        font-size: 15px !important;
        line-height: 1.4 !important;
    }
    .faq .panel-body {
        padding: 12px 15px !important;
        font-size: 14px !important;
    }
}

/* --- CONTACT : colonnes empilées, icônes plus petites --- */
@media (max-width: 767px) {
    .contact-item {
        margin-bottom: 25px !important;
        text-align: center !important;
    }
    .contact-item .contact-icon {
        margin-bottom: 10px !important;
    }
    .contact-item .contact-text h4 {
        font-size: 15px !important;
    }
    .contact-form .contact-form-title {
        font-size: 18px !important;
    }
}

/* --- LOGIN / REGISTER : formulaire pleine largeur --- */
@media (max-width: 575px) {
    .reg-login-form {
        padding: 20px 15px !important;
    }
    .reg-login-form h1 {
        font-size: 22px !important;
    }
    .reg-login-form .form-control {
        font-size: 14px !important;
        height: 44px !important;
    }
    .reg-login-form .btn {
        width: 100% !important;
    }
}

/* --- TABLETTE (768-991px) : corrections spécifiques --- */
@media (min-width: 768px) and (max-width: 991px) {
    /* Grille marques passe à 2 colonnes au lieu de 3 */
    .popular-city .row > [class*="col-md-6"]:nth-child(odd) {
        padding-right: 7.5px !important;
    }
    .popular-city .row > [class*="col-md-6"]:nth-child(even) {
        padding-left: 7.5px !important;
    }

    /* Listing cards : 2 par ligne */
    .listing .col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

/* --- FOOTER : pas de débordement de texte sur mobile --- */
@media (max-width: 575px) {
    .footer-area {
        padding-top: 40px !important;
    }
    .footer-item {
        margin-bottom: 25px !important;
        text-align: left !important;
    }
    .footer-item h2 {
        font-size: 15px !important;
        margin-bottom: 12px !important;
    }
    .footer-item ul li {
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }
    .footer-area .copyright p {
        font-size: 12px !important;
        line-height: 1.5 !important;
        padding: 0 10px !important;
    }
}

/* --- Ad sections (publicités) : fluides --- */
.ad-section img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

/* --- Reassurance bar : pas de débordement --- */
@media (max-width: 575px) {
    .reassurance-item i {
        font-size: 22px !important;
    }
    .reassurance-item strong {
        font-size: 13px !important;
    }
    .reassurance-item small {
        font-size: 11px !important;
    }
}

/* --- Search section : pas de débordement sur très petit --- */
@media (max-width: 360px) {
    .search-section h1 {
        font-size: 1.3rem !important;
    }
    .search-section p {
        font-size: 13px !important;
    }
    .search-section .input-box {
        padding: 8px !important;
    }
}

/* --- Containers : padding réduit sur mobile --- */
@media (max-width: 575px) {
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* --- Type-price ligne : pas de débordement --- */
.listing .listing-item .text .type-price {
    flex-wrap: wrap !important;
}
.listing .listing-item .text .type-price .price {
    white-space: normal !important;
    word-break: break-word !important;
}

/* --- Detail page : colonnes sidebar pleine largeur mobile --- */
@media (max-width: 991px) {
    .listing-sidebar {
        margin-top: 30px !important;
    }
}

/* --- Dynamic pages et about : titres --- */
@media (max-width: 575px) {
    .page-content {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }
    .page-content p,
    .page-content li {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
}

/* --- Boutons scroll-top et whatsapp flottants --- */
/* Fix: la couleur de l'icône était identique au fond (bleu sur bleu) → flèche invisible */
.scroll-top,
.scroll-top i,
.scroll-top i::before {
    color: #ffffff !important;
}
.scroll-top:hover,
.scroll-top:hover i {
    color: #ffffff !important;
}
@media (max-width: 575px) {
    .scroll-top {
        bottom: 16px !important;
        right: 16px !important;
        width: 40px !important;
        height: 40px !important;
        line-height: 40px !important;
        font-size: 18px !important;
    }
}

/* --- Cookie banner --- */
@media (max-width: 575px) {
    .cc-window {
        padding: 12px !important;
    }
    .cc-window .cc-message {
        font-size: 13px !important;
    }
    .cc-window .cc-btn {
        padding: 8px 16px !important;
        font-size: 13px !important;
    }
}