/* ========================================
   COMMERCIFY MODAL SEARCH ADVANCED
   Typologie couleurs : docs/typologie-couleurs-themes-contraste.md
   Palette dédiée (fond sombre, texte clair, accent #ffcc00) pour
   lisibilité identique en thème clair et thème sombre.
   ======================================== */

/* Backdrop Bootstrap masqué quand le modal recherche est ouvert : overlay + flou portés par le modal (comme langues) */
body.modal-search-advanced-open .modal-backdrop {
    display: none !important;
}

/* MODAL SEARCH ADVANCED - 80 % écran (HD), centré, overlay semi-transparent + flou sur la page */
#modalSearchAdvanced {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0;
    box-shadow: none !important;
    transition: opacity 0.1s linear !important;
    overflow: hidden !important; /* SUPPRIMER TOUTE BARRE DE SCROLL */
}

#modalSearchAdvanced.show {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding-top: 20px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* SUPPRIMER LE SCROLL DE LA PAGE QUAND LE MODAL EST OUVERT */
body.modal-open {
    overflow: hidden !important;
}

/* Dimensionnement .modal-dialog : géré par commercify_modal_dashboard_fullscreen_touch.css (plein écran toutes résolutions) */

#modalSearchAdvanced .search-modal-content.dashboard-modal-content,
#modalSearchAdvanced .modal-content.search-modal-content {
    background: #0a0a0a !important;
    color: #f8f9fa !important;
    border: none !important;
    border-radius: 0;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    contain: layout paint !important;
    flex: 1 1 auto !important; /* Remplir le dialog pour que le body ait une hauteur bornée et puisse scroller */
}

/* Header et footer : identiques au Dashboard via commercify_modal_dashboard_family.css */
/* Correction du décalage logo : contrer fullscreen_touch.css qui force padding-right: 4rem */
body.modal-search-advanced-open #modalSearchAdvanced .dashboard-modal-header .col.dashboard-modal-header-col,
body.modal-search-advanced-open #modalSearchAdvanced .dashboard-modal-header .col,
#modalSearchAdvanced .dashboard-modal-header .col.dashboard-modal-header-col,
#modalSearchAdvanced .dashboard-modal-header .col {
    padding-right: 18rem !important;
}
/* Logo : bordure 10px noire tout autour */
#modalSearchAdvanced .dashboard-modal-header .dashboard-modal-logo {
    border: 10px solid #000000 !important;
}
/* Footer : gap entre les trois boutons (Retour, Rechercher, Fermer) */
#modalSearchAdvanced .dashboard-modal-footer .dashboard-modal-footer-actions {
    display: flex !important;
    align-items: center !important;
    gap: 1.25rem !important;
}

/* 🎯 BODY DU MODAL — zone scrollable (ascenseur caché) */
#modalSearchAdvanced .search-modal-body {
    background: transparent !important;
    color: #f8f9fa !important;
    padding: 2rem 0 !important;
    flex: 1 1 auto !important; /* Prendre l’espace restant entre header et footer */
    min-height: 0 !important;   /* Permettre le shrink pour activer overflow-y: auto */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    overscroll-behavior: contain !important;
    transform: translateZ(0);
}

#modalSearchAdvanced .search-modal-body::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Sections filtres : content-visibility pour alléger le paint hors viewport */
#modalSearchAdvanced .filter-section {
    content-visibility: auto;
    min-height: 1px;
}

/* RESPONSIVE - tablettes et résolutions moyennes : aligné sur modal dashboard */
@media (max-width: 1279px) {
    /* Header tablette — comme dashboard : logo, titre, boutons réduits */
    #modalSearchAdvanced .dashboard-modal-header {
        padding: 0.5rem 0.75rem !important;
        min-height: 0 !important;
    }
    #modalSearchAdvanced .dashboard-modal-header .dashboard-modal-logo {
        height: 40px !important;
    }
    #modalSearchAdvanced .dashboard-modal-header .dashboard-modal-title {
        font-size: 1.1rem !important;
        padding-bottom: 0.25rem !important;
    }
    #modalSearchAdvanced .dashboard-modal-lang-btn,
    #modalSearchAdvanced .dashboard-modal-search-btn,
    #modalSearchAdvanced .dashboard-modal-theme-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }
    #modalSearchAdvanced .dashboard-modal-lang-btn { right: 10.5rem !important; }
    #modalSearchAdvanced .dashboard-modal-search-btn { right: 7.2rem !important; }
    #modalSearchAdvanced .dashboard-modal-theme-btn { right: 3.9rem !important; }
    #modalSearchAdvanced .dashboard-modal-close {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        right: 0.5rem !important;
    }
    #modalSearchAdvanced .dashboard-modal-lang-btn .dashboard-modal-lang-btn-icon,
    #modalSearchAdvanced .dashboard-modal-lang-btn img.dashboard-modal-lang-btn-icon,
    #modalSearchAdvanced .dashboard-modal-search-btn .dashboard-modal-search-btn-icon,
    #modalSearchAdvanced .dashboard-modal-search-btn svg {
        width: 20px !important;
        height: 20px !important;
    }
    #modalSearchAdvanced .dashboard-modal-theme-btn .theme-icon,
    #modalSearchAdvanced .dashboard-modal-close svg {
        width: 20px !important;
        height: 20px !important;
    }
    [dir="rtl"] #modalSearchAdvanced .dashboard-modal-lang-btn { left: 10.5rem !important; right: auto !important; }
    [dir="rtl"] #modalSearchAdvanced .dashboard-modal-search-btn { left: 7.2rem !important; right: auto !important; }
    [dir="rtl"] #modalSearchAdvanced .dashboard-modal-theme-btn { left: 3.9rem !important; right: auto !important; }
    [dir="rtl"] #modalSearchAdvanced .dashboard-modal-close { left: 0.5rem !important; right: auto !important; }
    /* Footer tablette — boutons et espacement réduits pour les 3 boutons */
    #modalSearchAdvanced .modal-footer.dashboard-modal-footer {
        padding: 0.4rem 0.6rem !important;
        gap: 0.4rem 0.5rem !important;
    }
    #modalSearchAdvanced .dashboard-modal-footer .dashboard-modal-footer-nav {
        font-size: 0.65rem !important;
        gap: 0 0.25rem !important;
    }
    #modalSearchAdvanced .dashboard-modal-footer .dashboard-modal-footer-back-btn {
        min-width: 4.5rem !important;
        padding: 0.3rem 0.5rem !important;
        font-size: 0.7rem !important;
    }
    #modalSearchAdvanced .dashboard-modal-footer .dashboard-modal-footer-back-btn .dashboard-modal-footer-back-btn-icon {
        width: 12px !important;
        height: 12px !important;
    }
    #modalSearchAdvanced .dashboard-modal-footer .search-modal-footer-search-btn {
        min-width: 4rem !important;
        padding: 0.3rem 0.5rem !important;
        font-size: 0.7rem !important;
    }
    #modalSearchAdvanced .modal-footer .commercify-modal-btn-fermer {
        padding: 0.3rem 0.75rem !important;
        font-size: 0.8rem !important;
    }
    #modalSearchAdvanced .search-modal-body {
        padding: 0.75rem 0 !important;
    }
    
    #modalSearchAdvanced .search-modal-body .container-fluid {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    /* Réduire gaps et margins du formulaire */
    #modalSearchAdvanced .search-form-row {
        --bs-gutter-y: 0.75rem !important;
        --bs-gutter-x: 0.75rem !important;
    }
    
    #modalSearchAdvanced .search-advanced-wrapper {
        padding: 1rem !important;
    }
    /* Tablette : icônes header 20px (comme Dashboard) — optionnel, family gère le base */
    #modalSearchAdvanced .dashboard-modal-lang-btn .dashboard-modal-lang-btn-icon,
    #modalSearchAdvanced .dashboard-modal-lang-btn img.dashboard-modal-lang-btn-icon,
    #modalSearchAdvanced .dashboard-modal-search-btn .dashboard-modal-search-btn-icon,
    #modalSearchAdvanced .dashboard-modal-search-btn svg {
        width: 20px !important;
        height: 20px !important;
    }
    #modalSearchAdvanced .dashboard-modal-theme-btn .theme-icon,
    #modalSearchAdvanced .dashboard-modal-close svg {
        width: 20px !important;
        height: 20px !important;
    }
    #modalSearchAdvanced .dashboard-modal-footer .dashboard-modal-footer-back-btn {
        min-width: 5.5rem !important;
        padding: 0.4rem 0.6rem !important;
        font-size: 0.75rem !important;
    }
    #modalSearchAdvanced .dashboard-modal-footer .dashboard-modal-footer-back-btn .dashboard-modal-footer-back-btn-icon {
        width: 14px !important;
        height: 14px !important;
    }
    #modalSearchAdvanced .modal-footer .commercify-modal-btn-fermer {
        padding: 0.5rem 1rem !important;
        font-size: 0.9rem !important;
    }
    /* Tablette + smartphone : masquer les 3 liens du footer */
    #modalSearchAdvanced .dashboard-modal-footer-nav {
        display: none !important;
    }
}

@media (max-width: 575.98px) {
    /* Smartphones : override des règles tablette pour un layout plus compact */
    #modalSearchAdvanced .dashboard-modal-header {
        padding: 0.5rem 0.75rem !important;
        max-height: 100px !important;
    }
    
    #modalSearchAdvanced .dashboard-modal-header .row {
        margin: 0 !important;
    }
    
    #modalSearchAdvanced .dashboard-modal-title {
        font-size: 0.9rem !important;
        margin: 0 !important;
        line-height: 1.2 !important;
    }
    #modalSearchAdvanced .dashboard-modal-theme-btn {
        right: 2.5rem !important;
    }
    
    #modalSearchAdvanced .dashboard-modal-close {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        top: 50% !important;
        right: 0.4rem !important;
        transform: translateY(-50%) !important;
    }
    #modalSearchAdvanced .dashboard-modal-close:hover {
        transform: translateY(-50%) scale(1.05) !important;
    }
    
    #modalSearchAdvanced .dashboard-modal-close svg {
        width: 18px !important;
        height: 18px !important;
    }
    #modalSearchAdvanced .dashboard-modal-footer .dashboard-modal-footer-nav {
        display: none !important;
    }
    [dir="rtl"] #modalSearchAdvanced .dashboard-modal-header .col.dashboard-modal-header-col,
    [dir="rtl"] #modalSearchAdvanced .dashboard-modal-header .col {
        padding-right: 0 !important;
        padding-left: 4rem !important;
    }
    [dir="rtl"] #modalSearchAdvanced .dashboard-modal-theme-btn {
        left: 2.5rem !important;
        right: auto !important;
    }
    [dir="rtl"] #modalSearchAdvanced .dashboard-modal-close {
        left: 0.4rem !important;
        right: auto !important;
    }
    /* Smartphone : icône header lune 18px */
    #modalSearchAdvanced .dashboard-modal-theme-btn .theme-icon {
        width: 18px !important;
        height: 18px !important;
    }
    #modalSearchAdvanced .dashboard-modal-footer .dashboard-modal-footer-back-btn {
        min-width: 4.5rem !important;
        padding: 0.3rem 0.5rem !important;
        font-size: 0.7rem !important;
    }
    #modalSearchAdvanced .dashboard-modal-footer .dashboard-modal-footer-back-btn .dashboard-modal-footer-back-btn-icon {
        width: 12px !important;
        height: 12px !important;
    }
    #modalSearchAdvanced .modal-footer .commercify-modal-btn-fermer {
        padding: 0.4rem 0.75rem !important;
        font-size: 0.8rem !important;
    }
    
    #modalSearchAdvanced .search-modal-body {
        padding: 0.5rem 0 !important;
    }
    
    #modalSearchAdvanced .search-modal-body .container-fluid {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    /* Réduire gaps et margins du formulaire */
    #modalSearchAdvanced .search-form-row {
        --bs-gutter-y: 0.5rem !important;
        --bs-gutter-x: 0.5rem !important;
    }
    
    #modalSearchAdvanced .search-advanced-wrapper {
        padding: 0.75rem !important;
    }
    
    /* Réduire margins internes des sections */
    #modalSearchAdvanced .filter-section-label {
        margin-bottom: 0.75rem !important;
        padding-bottom: 0.5rem !important;
    }
    
    #modalSearchAdvanced .mb-3 {
        margin-bottom: 0.75rem !important;
    }
    
    #modalSearchAdvanced .mt-4 {
        margin-top: 1rem !important;
    }
    
    #modalSearchAdvanced .mb-4 {
        margin-bottom: 1rem !important;
    }
}

/* 🎯 BOUTONS DE NAVIGATION (RACCOURCIS) */
#modalSearchAdvanced .search-modal-shortcuts .modal-shortcuts {
    gap: 0.5rem !important;
}

#modalSearchAdvanced .search-modal-shortcuts .modal-shortcut-btn {
    background: #141c26 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0;
    color: #f8f9fa !important;
    font-size: 0.85rem !important;
    padding: 0.4rem 0.75rem !important;
    transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

#modalSearchAdvanced .search-modal-shortcuts .modal-shortcut-btn:hover {
    background: rgba(255, 204, 0, 0.15) !important;
    border-color: #ffcc00 !important;
    color: #ffcc00 !important;
}

#modalSearchAdvanced .search-modal-shortcuts .modal-shortcut-btn:active {
    background: rgba(255, 204, 0, 0.25) !important;
    transform: scale(0.98) !important;
}

#modalSearchAdvanced .search-modal-shortcuts .modal-shortcut-btn:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.25) !important;
}

/* 🎯 ÉLÉMENTS INTERNES DU MODAL - TYPOLOGIE docs/typologie-couleurs-themes-contraste.md */
#modalSearchAdvanced .search-advanced-wrapper {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0;
    color: #f8f9fa !important;
}

#modalSearchAdvanced .filter-section-container {
    background: #141c26 !important; /* Fond carte/panneau typologie */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0;
    color: #f8f9fa !important;
}

/* Séparation verticale entre sections (chaque bloc = une carte distincte) */
#modalSearchAdvanced .search-advanced-wrapper .filter-section-container {
    margin-bottom: 1rem !important;
}
#modalSearchAdvanced .search-advanced-wrapper .filter-section-container:last-of-type {
    margin-bottom: 0 !important;
}

/* Bande d'en-tête de section (fond groupement typologie) */
#modalSearchAdvanced .filter-section-label {
    color: #ffcc00 !important; /* Accent typologie */
    background: #101924 !important; /* Fond groupement typologie */
    border-bottom: 2px solid rgba(255, 204, 0, 0.35) !important;
    margin: -1rem -1rem 0 -1rem !important;
    margin-bottom: 1.25rem !important; /* Aération entre titre de section et contenu */
    padding: 0.5rem 1rem 0.75rem 1rem !important;
    border-radius: 0;
}

#modalSearchAdvanced .filter-section-label-text {
    color: #f8f9fa !important;
}

/* Titres de section : accent, graisse et hiérarchie (typologie) */
#modalSearchAdvanced .filter-section-label .filter-section-title {
    color: #ffcc00 !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
}

#modalSearchAdvanced .filter-section-label .filter-section-icon {
    color: inherit !important;
}

#modalSearchAdvanced .filter-input-light {
    background: #141c26 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #8094ae !important;
}

#modalSearchAdvanced .filter-input-light:focus {
    border-color: rgba(255, 255, 255, 0.1) !important;
    background: #141c26 !important;
    box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.25) !important;
}

#modalSearchAdvanced .filter-btn {
    background: #141c26 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0;
    color: #8094ae !important;
}

#modalSearchAdvanced .filter-btn:hover {
    background: #141c26 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #f8f9fa !important;
}

#modalSearchAdvanced .filter-btn.filter-revealed {
    /* Aucun style supplémentaire : conserve le style par défaut du bouton */
}

#modalSearchAdvanced .btn-toggle-option {
    background: #141c26 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0;
    color: #8094ae !important;
}

#modalSearchAdvanced .btn-toggle-option:hover:not(:disabled) {
    background: #141c26 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #f8f9fa !important;
}

#modalSearchAdvanced .btn-toggle-option.active {
    background: rgba(255, 204, 0, 0.15) !important;
    border-color: #ffcc00 !important;
    color: #ffcc00 !important;
}

#modalSearchAdvanced .btn-toggle-option:disabled {
    background: #101924 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #adb5bd !important;
}

#modalSearchAdvanced .btn-toggle-option:focus-visible,
#modalSearchAdvanced .filter-btn:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.25) !important;
}

#modalSearchAdvanced .search-input-group {
    background: #141c26 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0;
}

#modalSearchAdvanced .search-input-group .input-group-text {
    background: #141c26 !important;
    color: #ffcc00 !important;
    border: none !important;
}

#modalSearchAdvanced .search-input-group .form-control {
    background: #141c26 !important;
    border: none !important;
    color: #8094ae !important;
}

#modalSearchAdvanced .search-input-group .form-control:focus {
    background: #141c26 !important;
    border-color: transparent !important;
    box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.25) !important;
}

#modalSearchAdvanced .search-input-group .form-control::placeholder {
    color: #adb5bd !important;
}

/* Champs formulaire (form-control, form-select) - typologie — angles droits */
#modalSearchAdvanced .form-control {
    background: #141c26 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0;
    color: #8094ae !important;
}

#modalSearchAdvanced .form-control::placeholder {
    color: #adb5bd !important;
}

#modalSearchAdvanced .form-control:focus {
    background: #141c26 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.25) !important;
    color: #f8f9fa !important;
}

#modalSearchAdvanced .form-select,
#modalSearchAdvanced select.form-control,
#modalSearchAdvanced select {
    background: #141c26 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #8094ae !important;
}

#modalSearchAdvanced .form-select:focus,
#modalSearchAdvanced select:focus {
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.25) !important;
}

/* Liste déroulante : option et optgroup - typologie */
#modalSearchAdvanced select option {
    background: #141c26 !important;
    color: #8094ae !important;
}

#modalSearchAdvanced select optgroup {
    background: #101924 !important;
    color: #ffcc00 !important;
    font-weight: 700 !important;
}

/* Icône chevron select (natif) - trait clair */
#modalSearchAdvanced .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}

/* Alertes (validation, erreurs) - lisibles dans le bloc */
#modalSearchAdvanced .alert {
    background: #141c26 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f8f9fa !important;
}

#modalSearchAdvanced .alert-danger {
    border-color: rgba(255, 100, 100, 0.4) !important;
    color: #f8f9fa !important;
}

#modalSearchAdvanced .invalid-feedback {
    color: #adb5bd !important;
}

/* Liste résultats villes (dropdown) - typologie */
#modalSearchAdvanced #search-cities-results.list-group,
#modalSearchAdvanced .list-group {
    background: #141c26 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#modalSearchAdvanced .list-group-item {
    background: #141c26 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #8094ae !important;
}

#modalSearchAdvanced .list-group-item:hover,
#modalSearchAdvanced .list-group-item:focus {
    background: #101924 !important;
    color: #f8f9fa !important;
}

/* Chips (villes, mots-clés) - cohérence avec le PHP scopé — angles droits */
#modalSearchAdvanced .city-chip,
#modalSearchAdvanced .keyword-chip {
    background: #141c26 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0;
    color: #f8f9fa !important;
}

#modalSearchAdvanced .city-chip:hover,
#modalSearchAdvanced .keyword-chip:hover {
    background: #101924 !important;
}

/* Bouton fermeture chips visible sur fond sombre */
#modalSearchAdvanced .city-chip-close,
#modalSearchAdvanced .keyword-chip-close {
    color: #dee2e6 !important;
    opacity: 0.9;
}

#modalSearchAdvanced .city-chip-close:hover,
#modalSearchAdvanced .keyword-chip-close:hover {
    color: #f8f9fa !important;
    opacity: 1;
}

#modalSearchAdvanced .category-card,
#modalSearchAdvanced .rayon-card,
#modalSearchAdvanced .devise-card,
#modalSearchAdvanced .langue-card,
#modalSearchAdvanced .qty-card,
#modalSearchAdvanced .delivery-card,
#modalSearchAdvanced .ratings-card,
#modalSearchAdvanced .dates-card,
#modalSearchAdvanced .resultats-card {
    background: #141c26 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0;
    color: #f8f9fa !important;
}

#modalSearchAdvanced .form-check-label {
    color: #f8f9fa !important;
}

#modalSearchAdvanced .form-check-input {
    border-color: rgba(255, 255, 255, 0.1) !important;
    background: #141c26 !important;
}

#modalSearchAdvanced .form-check-input:checked {
    background-color: #ffcc00 !important;
    border-color: #ffcc00 !important;
}

#modalSearchAdvanced .form-check-input:focus {
    box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.25) !important;
}

#modalSearchAdvanced .search-buttons-container {
    background: #141c26 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f8f9fa !important;
}

#modalSearchAdvanced #advanced-search-btn {
    background: #141c26 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0;
    color: #ffcc00 !important;
}

#modalSearchAdvanced #advanced-search-btn:hover {
    background: rgba(255, 204, 0, 0.15) !important;
    color: #ffcc00 !important;
    border-color: #ffcc00 !important;
}

#modalSearchAdvanced #advanced-search-btn:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.25) !important;
}

/* Bouton principal (soumission) - typologie — angles droits */
#modalSearchAdvanced .search-btn {
    background: #ffcc00 !important;
    border: 1px solid #ffcc00 !important;
    border-radius: 0;
    color: #000000 !important;
}

#modalSearchAdvanced .search-btn:hover:not(:disabled) {
    background: #e6b800 !important;
    border-color: #e6b800 !important;
    color: #000000 !important;
}

#modalSearchAdvanced .search-btn:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.25) !important;
}

/* Bouton Rechercher du body : caché (validation via le bouton du footer), pas supprimé */
#modalSearchAdvanced #unique-simple-search-submit {
    display: none !important;
}

/* PERFORMANCE OPTIMISÉE */
#modalSearchAdvanced:not(.show) {
    content-visibility: hidden !important;
    contain: strict !important;
}

#modalSearchAdvanced:not(.show) * {
    animation-play-state: paused !important;
    transition: none !important;
}

/* ========================================
   THÈME CLAIR (body.light-mode) — Ma recherche avancée
   Palette docs/typologie-couleurs-themes-contraste.md
   bg #f5f6f8, card #ffffff, header #eef0f3, text #1a1d21, secondary #4a5568, accent-text #b8860b
   ======================================== */
body.light-mode #modalSearchAdvanced {
    background: rgba(0, 0, 0, 0.5) !important;
}
body.light-mode #modalSearchAdvanced .search-modal-content.dashboard-modal-content,
body.light-mode #modalSearchAdvanced .modal-content.search-modal-content {
    background: #f5f6f8 !important;
    color: #1a1d21 !important;
}
body.light-mode #modalSearchAdvanced .dashboard-modal-header {
    background: #eef0f3 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}
body.light-mode #modalSearchAdvanced .dashboard-modal-title {
    color: #1a1d21 !important;
    border-bottom-color: rgba(184, 134, 11, 0.6) !important;
}
body.light-mode #modalSearchAdvanced .dashboard-modal-lang-btn,
body.light-mode #modalSearchAdvanced .dashboard-modal-search-btn,
body.light-mode #modalSearchAdvanced .dashboard-modal-theme-btn {
    border: 2px solid #b8860b !important;
    color: #1a1d21 !important;
}
body.light-mode #modalSearchAdvanced .dashboard-modal-lang-btn:hover,
body.light-mode #modalSearchAdvanced .dashboard-modal-search-btn:hover,
body.light-mode #modalSearchAdvanced .dashboard-modal-theme-btn:hover {
    background: rgba(0, 0, 0, 0.08) !important;
    border-color: #b8860b !important;
    color: #1a1d21 !important;
}
body.light-mode #modalSearchAdvanced .dashboard-modal-search-btn:disabled,
body.light-mode #modalSearchAdvanced .dashboard-modal-search-btn[disabled] {
    cursor: not-allowed !important;
    pointer-events: none !important;
    opacity: 0.5 !important;
}
body.light-mode #modalSearchAdvanced .dashboard-modal-search-btn:disabled:hover,
body.light-mode #modalSearchAdvanced .dashboard-modal-search-btn[disabled]:hover {
    background: transparent !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    color: #6c757d !important;
    transform: translateY(-50%) scale(1) !important;
}
body.light-mode #modalSearchAdvanced .dashboard-modal-close {
    background: #1a1d21 !important;
    border: 2px solid #b8860b !important;
    color: #ffffff !important;
}
body.light-mode #modalSearchAdvanced .dashboard-modal-close:hover {
    background: #ffcc00 !important;
    border-color: #b8860b !important;
    color: #1a1d21 !important;
}
body.light-mode #modalSearchAdvanced .modal-footer.dashboard-modal-footer {
    background: #eef0f3 !important;
    border-top-color: rgba(184, 134, 11, 0.3) !important;
}
body.light-mode #modalSearchAdvanced .dashboard-modal-footer .dashboard-modal-footer-nav-link {
    color: #1a1d21 !important;
}
body.light-mode #modalSearchAdvanced .dashboard-modal-footer .dashboard-modal-footer-nav-link:hover {
    color: #b8860b !important;
    border-bottom-color: rgba(184, 134, 11, 0.5) !important;
}
body.light-mode #modalSearchAdvanced .dashboard-modal-footer .dashboard-modal-footer-nav-sep {
    color: rgba(0, 0, 0, 0.35) !important;
}
body.light-mode #modalSearchAdvanced .dashboard-modal-footer .dashboard-modal-footer-nav-current {
    color: rgba(0, 0, 0, 0.45) !important;
}
body.light-mode #modalSearchAdvanced .dashboard-modal-footer .dashboard-modal-footer-nav-link-tour {
    color: #b8860b !important;
    border-bottom-color: rgba(184, 134, 11, 0.4) !important;
}
body.light-mode #modalSearchAdvanced .dashboard-modal-footer .dashboard-modal-footer-nav-link-tour:hover {
    color: #1a1d21 !important;
    border-bottom-color: #b8860b !important;
}
/* Bouton Retour au tableau de bord — dark mode (identique modale Ma langue IHM) */
#modalSearchAdvanced .dashboard-modal-footer .dashboard-modal-footer-back-btn {
    border-color: rgba(255, 255, 255, 0.45) !important;
    color: #e9ecef !important;
}
#modalSearchAdvanced .dashboard-modal-footer .dashboard-modal-footer-back-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 204, 0, 0.6) !important;
    color: #ffcc00 !important;
}
#modalSearchAdvanced .dashboard-modal-footer .dashboard-modal-footer-back-btn .dashboard-modal-footer-back-btn-icon,
#modalSearchAdvanced .dashboard-modal-footer .dashboard-modal-footer-back-btn .dashboard-modal-footer-back-btn-text {
    color: inherit !important;
}
#modalSearchAdvanced .dashboard-modal-footer .dashboard-modal-footer-back-btn.dashboard-modal-footer-back-btn-disabled {
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: rgba(233, 236, 239, 0.6) !important;
}
#modalSearchAdvanced .dashboard-modal-footer .dashboard-modal-footer-back-btn.dashboard-modal-footer-back-btn-disabled:hover {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: rgba(233, 236, 239, 0.6) !important;
}
/* Bouton Retour au tableau de bord — light mode (identique « Mes murs et mes vignettes ») */
body.light-mode #modalSearchAdvanced .dashboard-modal-footer .dashboard-modal-footer-back-btn {
    border-color: rgba(0, 0, 0, 0.2) !important;
    color: #1a1d21 !important;
}
body.light-mode #modalSearchAdvanced .dashboard-modal-footer .dashboard-modal-footer-back-btn:hover {
    background: rgba(0, 0, 0, 0.06) !important;
    border-color: #b8860b !important;
    color: #1a1d21 !important;
}
body.light-mode #modalSearchAdvanced .dashboard-modal-footer .dashboard-modal-footer-back-btn.dashboard-modal-footer-back-btn-disabled {
    border-color: rgba(0, 0, 0, 0.2) !important;
    color: rgba(0, 0, 0, 0.4) !important;
}
body.light-mode #modalSearchAdvanced .dashboard-modal-footer .dashboard-modal-footer-back-btn.dashboard-modal-footer-back-btn-disabled:hover {
    background: transparent !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
    color: rgba(0, 0, 0, 0.4) !important;
}
body.light-mode #modalSearchAdvanced .modal-footer .commercify-modal-btn-fermer {
    background: #1a1d21 !important;
    border: 2px solid #b8860b !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}
body.light-mode #modalSearchAdvanced .modal-footer .commercify-modal-btn-fermer:hover {
    background: rgba(255, 204, 0, 0.2) !important;
    border-color: #b8860b !important;
    color: #1a1d21 !important;
    box-shadow: 0 0 0 2px rgba(184, 134, 11, 0.3) !important;
}
body.light-mode #modalSearchAdvanced .search-modal-body {
    color: #1a1d21 !important;
}
body.light-mode #modalSearchAdvanced .search-advanced-wrapper {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #1a1d21 !important;
}
body.light-mode #modalSearchAdvanced .filter-section-container {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #1a1d21 !important;
}
body.light-mode #modalSearchAdvanced .filter-section-label {
    color: #b8860b !important;
    background: #f5f6f8 !important;
    border-bottom: 2px solid rgba(0, 0, 0, 0.12) !important;
}
body.light-mode #modalSearchAdvanced .filter-section-label .filter-section-title {
    color: #b8860b !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
}
body.light-mode #modalSearchAdvanced .filter-section-label .filter-section-icon {
    color: inherit !important;
}
body.light-mode #modalSearchAdvanced .filter-section-label-text {
    color: #4a5568 !important;
}
body.light-mode #modalSearchAdvanced .filter-input-light {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    color: #1a1d21 !important;
}
body.light-mode #modalSearchAdvanced .filter-input-light:focus {
    border-color: #b8860b !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 2px rgba(184, 134, 11, 0.25) !important;
}
body.light-mode #modalSearchAdvanced .filter-btn {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    color: #1a1d21 !important;
}
body.light-mode #modalSearchAdvanced .filter-btn:hover {
    background: #f5f6f8 !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
    color: #1a1d21 !important;
}
body.light-mode #modalSearchAdvanced .btn-toggle-option {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    color: #1a1d21 !important;
}
body.light-mode #modalSearchAdvanced .btn-toggle-option:hover:not(:disabled) {
    background: #f5f6f8 !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
    color: #1a1d21 !important;
}
body.light-mode #modalSearchAdvanced .btn-toggle-option.active,
body.light-mode #modalSearchAdvanced .filter-btn.active-filter {
    background: rgba(184, 134, 11, 0.12) !important;
    border-color: #b8860b !important;
    color: #b8860b !important;
}
body.light-mode #modalSearchAdvanced .btn-toggle-option.filter-revealed,
body.light-mode #modalSearchAdvanced .filter-btn.filter-revealed {
    border-color: #b8860b !important;
    box-shadow: 0 0 0 2px rgba(184, 134, 11, 0.25) !important;
}
body.light-mode #modalSearchAdvanced .btn-toggle-option:disabled {
    background: #eef0f3 !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #4a5568 !important;
}
body.light-mode #modalSearchAdvanced .btn-toggle-option:focus-visible,
body.light-mode #modalSearchAdvanced .filter-btn:focus-visible {
    box-shadow: 0 0 0 2px rgba(184, 134, 11, 0.35) !important;
}
body.light-mode #modalSearchAdvanced .search-input-group {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
}
body.light-mode #modalSearchAdvanced .search-input-group .input-group-text {
    background: #eef0f3 !important;
    color: #b8860b !important;
}
body.light-mode #modalSearchAdvanced .search-input-group .form-control {
    background: #ffffff !important;
    color: #1a1d21 !important;
}
body.light-mode #modalSearchAdvanced .search-input-group .form-control::placeholder {
    color: #4a5568 !important;
}
body.light-mode #modalSearchAdvanced .search-input-group .form-control:focus {
    border-color: #b8860b !important;
    box-shadow: 0 0 0 2px rgba(184, 134, 11, 0.25) !important;
}
body.light-mode #modalSearchAdvanced .form-control {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    color: #1a1d21 !important;
}
body.light-mode #modalSearchAdvanced .form-control::placeholder {
    color: #4a5568 !important;
}
body.light-mode #modalSearchAdvanced .form-control:focus {
    border-color: #b8860b !important;
    box-shadow: 0 0 0 2px rgba(184, 134, 11, 0.25) !important;
    color: #1a1d21 !important;
}
body.light-mode #modalSearchAdvanced .form-select,
body.light-mode #modalSearchAdvanced select.form-control,
body.light-mode #modalSearchAdvanced select {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    color: #1a1d21 !important;
}
body.light-mode #modalSearchAdvanced .form-select:focus,
body.light-mode #modalSearchAdvanced select:focus {
    border-color: #b8860b !important;
    box-shadow: 0 0 0 2px rgba(184, 134, 11, 0.25) !important;
}
body.light-mode #modalSearchAdvanced select option {
    background: #ffffff !important;
    color: #1a1d21 !important;
}
body.light-mode #modalSearchAdvanced select optgroup {
    background: #eef0f3 !important;
    color: #b8860b !important;
}
body.light-mode #modalSearchAdvanced .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%234a5568' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}
body.light-mode #modalSearchAdvanced .alert {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #1a1d21 !important;
}
body.light-mode #modalSearchAdvanced .alert-danger {
    border-color: rgba(200, 80, 80, 0.4) !important;
    color: #1a1d21 !important;
}
body.light-mode #modalSearchAdvanced .invalid-feedback {
    color: #4a5568 !important;
}
body.light-mode #modalSearchAdvanced #search-cities-results.list-group,
body.light-mode #modalSearchAdvanced .list-group {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}
body.light-mode #modalSearchAdvanced .list-group-item {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #1a1d21 !important;
}
body.light-mode #modalSearchAdvanced .list-group-item:hover,
body.light-mode #modalSearchAdvanced .list-group-item:focus {
    background: #f5f6f8 !important;
    color: #1a1d21 !important;
}
body.light-mode #modalSearchAdvanced .city-chip,
body.light-mode #modalSearchAdvanced .keyword-chip {
    background: #eef0f3 !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #1a1d21 !important;
}
body.light-mode #modalSearchAdvanced .city-chip:hover,
body.light-mode #modalSearchAdvanced .keyword-chip:hover {
    background: #e2e5e9 !important;
}
body.light-mode #modalSearchAdvanced .city-chip-close,
body.light-mode #modalSearchAdvanced .keyword-chip-close {
    color: #4a5568 !important;
}
body.light-mode #modalSearchAdvanced .city-chip-close:hover,
body.light-mode #modalSearchAdvanced .keyword-chip-close:hover {
    color: #1a1d21 !important;
}
body.light-mode #modalSearchAdvanced .category-card,
body.light-mode #modalSearchAdvanced .rayon-card,
body.light-mode #modalSearchAdvanced .devise-card,
body.light-mode #modalSearchAdvanced .langue-card,
body.light-mode #modalSearchAdvanced .qty-card,
body.light-mode #modalSearchAdvanced .delivery-card,
body.light-mode #modalSearchAdvanced .ratings-card,
body.light-mode #modalSearchAdvanced .dates-card,
body.light-mode #modalSearchAdvanced .resultats-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #1a1d21 !important;
}
body.light-mode #modalSearchAdvanced .form-check-label {
    color: #1a1d21 !important;
}
body.light-mode #modalSearchAdvanced .form-check-input {
    border-color: rgba(0, 0, 0, 0.2) !important;
    background: #ffffff !important;
}
body.light-mode #modalSearchAdvanced .form-check-input:checked {
    background-color: #b8860b !important;
    border-color: #b8860b !important;
}
body.light-mode #modalSearchAdvanced .form-check-input:focus {
    box-shadow: 0 0 0 2px rgba(184, 134, 11, 0.25) !important;
}
body.light-mode #modalSearchAdvanced .search-buttons-container {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #1a1d21 !important;
}
body.light-mode #modalSearchAdvanced #advanced-search-btn {
    background: #ffffff !important;
    border: 1px solid #b8860b !important;
    border-radius: 0;
    color: #b8860b !important;
}
body.light-mode #modalSearchAdvanced #advanced-search-btn:hover {
    background: rgba(184, 134, 11, 0.12) !important;
    color: #b8860b !important;
    border-color: #b8860b !important;
}
body.light-mode #modalSearchAdvanced #advanced-search-btn:focus-visible {
    box-shadow: 0 0 0 2px rgba(184, 134, 11, 0.35) !important;
}
body.light-mode #modalSearchAdvanced .search-btn {
    background: #b8860b !important;
    border: 1px solid #b8860b !important;
    border-radius: 0;
    color: #ffffff !important;
}
body.light-mode #modalSearchAdvanced .search-btn:hover:not(:disabled) {
    background: #a67a0a !important;
    border-color: #a67a0a !important;
    color: #ffffff !important;
}
body.light-mode #modalSearchAdvanced .search-btn:focus-visible {
    box-shadow: 0 0 0 2px rgba(184, 134, 11, 0.35) !important;
}
body.light-mode #modalSearchAdvanced .search-modal-shortcuts .modal-shortcut-btn {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #1a1d21 !important;
}
body.light-mode #modalSearchAdvanced .search-modal-shortcuts .modal-shortcut-btn:hover {
    background: rgba(184, 134, 11, 0.12) !important;
    border-color: #b8860b !important;
    color: #b8860b !important;
}
body.light-mode #modalSearchAdvanced .dashboard-modal-close:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.5) !important;
}
body.light-mode #modalSearchAdvanced .search-cities-loading {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #4a5568 !important;
}

/* Light mode - relief subtil du formulaire (body uniquement, pas de header) */
body.light-mode #modalSearchAdvanced .search-modal-body .search-advanced-wrapper {
    border: 1px solid rgba(0, 0, 0, 0.16) !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08), 0 12px 28px rgba(0, 0, 0, 0.08) !important;
}

body.light-mode #modalSearchAdvanced .search-modal-body .filter-section-container {
    border: 1px solid rgba(0, 0, 0, 0.16) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 8px 16px rgba(0, 0, 0, 0.06) !important;
}

body.light-mode #modalSearchAdvanced .search-modal-body .filter-section-label {
    background: linear-gradient(180deg, #eef1f5 0%, #e5e9ee 100%) !important;
    border-bottom: 2px solid rgba(0, 0, 0, 0.2) !important;
}

body.light-mode #modalSearchAdvanced .search-modal-body .filter-section-label .filter-section-title {
    font-weight: 800 !important;
    letter-spacing: 0.025em !important;
}

body.light-mode #modalSearchAdvanced .search-modal-body .category-card,
body.light-mode #modalSearchAdvanced .search-modal-body .rayon-card,
body.light-mode #modalSearchAdvanced .search-modal-body .devise-card,
body.light-mode #modalSearchAdvanced .search-modal-body .langue-card,
body.light-mode #modalSearchAdvanced .search-modal-body .qty-card,
body.light-mode #modalSearchAdvanced .search-modal-body .delivery-card,
body.light-mode #modalSearchAdvanced .search-modal-body .ratings-card,
body.light-mode #modalSearchAdvanced .search-modal-body .dates-card,
body.light-mode #modalSearchAdvanced .search-modal-body .resultats-card {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
    transition: box-shadow 0.2s ease !important;
}

body.light-mode #modalSearchAdvanced .search-modal-body .category-card:hover,
body.light-mode #modalSearchAdvanced .search-modal-body .rayon-card:hover,
body.light-mode #modalSearchAdvanced .search-modal-body .devise-card:hover,
body.light-mode #modalSearchAdvanced .search-modal-body .langue-card:hover,
body.light-mode #modalSearchAdvanced .search-modal-body .qty-card:hover,
body.light-mode #modalSearchAdvanced .search-modal-body .delivery-card:hover,
body.light-mode #modalSearchAdvanced .search-modal-body .ratings-card:hover,
body.light-mode #modalSearchAdvanced .search-modal-body .dates-card:hover,
body.light-mode #modalSearchAdvanced .search-modal-body .resultats-card:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), 0 10px 20px rgba(0, 0, 0, 0.08) !important;
}

body.light-mode #modalSearchAdvanced .search-modal-body .city-chip,
body.light-mode #modalSearchAdvanced .search-modal-body .keyword-chip {
    border: 1px solid rgba(0, 0, 0, 0.16) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.07) !important;
}

body.light-mode #modalSearchAdvanced .search-modal-body .search-input-group,
body.light-mode #modalSearchAdvanced .search-modal-body .form-control,
body.light-mode #modalSearchAdvanced .search-modal-body .form-select {
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

body.light-mode #modalSearchAdvanced .search-modal-body .filter-btn,
body.light-mode #modalSearchAdvanced .search-modal-body .btn-toggle-option {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.07) !important;
}

body.light-mode #modalSearchAdvanced .search-modal-body #advanced-search-btn,
body.light-mode #modalSearchAdvanced .search-modal-body .search-btn {
    box-shadow: 0 3px 8px rgba(184, 134, 11, 0.28) !important;
}