/* =========================================
   MODE RESPONSIVE (MOBILES ET TABLETTES)
   Actif uniquement sur les écrans de moins de 768px
   ========================================= */

@media screen and (max-width: 768px) {

    /* --- 0. FIX GLOBAL BUGS (Anti-Dépassement) --- */
    /* Empêche les paddings d'agrandir la taille de la page (Règle le scroll horizontal) */
    *, *::before, *::after {
        box-sizing: border-box !important;
    }
    body, html {
        overflow-x: hidden !important; /* Bloque le scroll horizontal de la page entière */
        overflow-y: auto !important;
        width: 100vw !important;
        max-width: 100% !important;
    }

    /* --- 1. BARRE DE NAVIGATION (MOBILE PREMIUM) --- */
    .premium-nav-bar {
        padding: 15px 0 !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        height: auto !important;
    }
    
   /* ========================================================
       FIX ULTIME : DISSOCIER LA BARRE JAUNE DE LA FLÈCHE 
       ======================================================== */

    /* 1. On "détruit" totalement les flèches générées par la version PC (bordures, tailles, etc.) */
    .top-nav .nav-btn.dropdown::before,
    .top-nav .nav-btn.dropdown::after {
        border: none !important;
        background: transparent !important;
        clip-path: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: none !important; /* On cache tout par défaut */
    }

    /* 2. On RECÉE LA BARRE JAUNE de zéro sur le ::before, identique aux autres boutons */
    .top-nav .nav-btn.dropdown::before {
        display: block !important;
        content: '' !important;
        position: absolute !important;
        top: -10px !important; 
        left: 50% !important;
        transform: translateX(-50%) !important; /* Maintient au centre */
        width: 16px !important;
        height: 3px !important;
        background-color: #f1b52c !important; /* Jaune pur */
        border-radius: 5px !important;
        opacity: 0 !important; /* Caché tant que ce n'est pas actif */
        box-shadow: 0 2px 8px rgba(241, 181, 44, 0.8) !important;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; 
    }

    /* 3. L'animation de descente de la barre jaune quand on clique */
    .top-nav .nav-btn.dropdown.active::before {
        opacity: 1 !important;
        top: 6px !important;
        transform: translateX(-50%) !important; /* Bloque toute rotation parasite du PC */
    }

    /* 4. On ajoute la petite flèche de menu déroulant DIRECTEMENT sur le texte (et non plus sur le bouton) */
    .top-nav .nav-btn.dropdown .nav-txt {
        position: relative !important;
        padding-right: 12px !important; /* Place pour la flèche */
    }
    .top-nav .nav-btn.dropdown .nav-txt::after {
        content: '▼' !important; 
        position: absolute !important;
        right: -2px !important; 
        top: 50% !important;
        transform: translateY(-50%) !important;
        font-size: 8px !important;
        color: inherit !important; /* Prend la couleur du texte (gris ou blanc) */
        opacity: 0.7 !important;
        display: block !important;
    }
    
    .nav-logo-small {
        margin-bottom: 15px !important;
        height: 35px !important;
    }
    
    .nav-right { width: 100% !important; }
    .desktop-search-bar { display: none !important; } /* Cache la recherche PC */

    /* 💎 NOUVELLE RECHERCHE MOBILE PREMIUM */
    .mobile-search-bar {
        display: flex !important;
        align-items: center !important;
        width: 90% !important;
        max-width: 400px !important;
        background: rgba(10, 10, 10, 0.9) !important; /* Fond noir Dynasty */
        border: 1px solid rgba(241, 181, 44, 0.4) !important; /* Bordure dorée douce */
        border-radius: 25px !important; /* Bords très arrondis modernes */
        padding: 12px 20px !important;
        margin-bottom: 10px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
        transition: border-color 0.3s, box-shadow 0.3s !important;
    }

    /* Effet lumineux quand on tape dedans */
    .mobile-search-bar:focus-within {
        border-color: #f1b52c !important;
        box-shadow: 0 0 12px rgba(241, 181, 44, 0.2) !important;
    }
    
    .mobile-search-bar input {
        width: 100% !important;
        background: transparent !important;
        border: none !important;
        color: #fff !important;
        font-family: inherit !important;
        font-size: 14px !important;
        outline: none !important;
        letter-spacing: 1px !important;
    }

    .mobile-search-bar input::placeholder { color: rgba(255, 255, 255, 0.4) !important; }
    .mobile-search-bar .search-icon { color: #f1b52c !important; font-size: 18px !important; }

   /* 📱 BULLE DE NAVIGATION (DESIGN ORIGINAL "CONSOLE EXECUTIVE" - CORRIGÉ) */
    .top-nav {
        position: fixed !important;
        bottom: 15px !important;
        
        /* 🟢 CENTRAGE ABSOLU PHYSIQUE (Ignore les barres de défilement) */
        left: 50vw !important; 
        transform: translateX(-50%) !important;
        margin: 0 !important;
        
        /* 🟢 LARGEUR BASÉE SUR L'ÉCRAN PHYSIQUE */
        width: calc(100vw - 20px) !important; 
        max-width: 420px !important;
        height: 85px !important; 
        
        /* Design */
        background: linear-gradient(180deg, #161616 0%, #050505 100%) !important;
        border-radius: 28px !important; 
        border: 1px solid #222 !important;
        border-top: 1px solid #333 !important;
        border-bottom: 3px solid #f1b52c !important;
        box-shadow: 0 15px 30px rgba(0,0,0,0.8), inset 0 2px 5px rgba(255,255,255,0.05) !important;
        
        /* Grille des boutons */
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important; 
        align-items: center !important;
        justify-items: center !important;
        padding: 0 10px !important; 
        z-index: 99998 !important; 
        overflow: visible !important;
    }

    /* Écrase les anciennes marges PC qui pourraient pousser la bulle */
    .top-nav .nav-btn, 
    .top-nav .nav-btn:last-child {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Le conteneur du bouton */
    .nav-btn {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 16px !important;
        transition: background 0.4s ease !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
    }

    /* 💡 Effet "Spotlight" */
    .nav-btn.active {
        background: radial-gradient(circle at center 40%, rgba(241, 181, 44, 0.15) 0%, transparent 65%) !important;
    }

    /* ⬇️ Indicateur original : Un tiret descend du plafond */
    .nav-btn::before {
        content: '';
        position: absolute;
        top: -10px; 
        left: 50%;
        transform: translateX(-50%);
        width: 16px;
        height: 3px;
        background: #f1b52c;
        border-radius: 5px;
        opacity: 0;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; 
        box-shadow: 0 2px 8px rgba(241, 181, 44, 0.8);
    }

    /* --- FIX : RETIRER LA BARRE JAUNE DES BOUTONS SUR MOBILE --- */
    .top-nav .nav-btn::after {
        display: none !important;
        content: none !important;
    }

    .nav-btn.active::before {
        opacity: 1;
        top: 6px; 
    }

    /* Le texte (Ajusté pour que les grands mots rentrent) */
    .nav-txt { 
        display: block !important; 
        font-size: 11px !important; /* 🛠️ Taille ajustée pour PARTENAIRES et ENTREPRISES */
        font-weight: 600 !important;
        letter-spacing: 0px !important; /* 🛠️ On enlève l'espacement des lettres pour gagner de la place */
        color: #555 !important; 
        text-transform: uppercase !important;
        transition: all 0.3s ease !important;
        white-space: nowrap !important;
        margin-top: 5px !important;
    }

    /* Les icônes */
    .nav-icn { 
        display: block !important; 
        font-size: 22px !important; 
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; 
        transform: scale(1) !important;
    }

    /* L'icône s'illumine fortement et grossit */
    .nav-btn.active .nav-icn {
        filter: grayscale(0%) brightness(110%) drop-shadow(0 0 10px rgba(241, 181, 44, 0.5)) !important;
        transform: scale(1.15) !important; /* 🛠️ Grossissement très légèrement réduit pour ne pas chevaucher le texte */
    }

    /* Le texte s'allume en BLANC PUR */
    .nav-btn.active .nav-txt {
        color: #fff !important; 
        text-shadow: 0 0 8px rgba(255,255,255,0.4) !important;
    }
    /* --- 2. LAYOUT GÉNÉRAL --- */
    .page-content {
        padding: 15px !important;
        padding-bottom: 15px !important; /* <--- AJOUTER CECI : Évite que le contenu touche la bulle */
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
    }
    .properties-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    .scroll-list {
        height: auto !important;
        overflow-y: visible !important;
        padding-right: 0 !important;
    }
    #map-wrapper { display: none !important; } /* On cache la carte de droite */

    /* --- 3. DETAILS VIEW (Correction de la grille écrasée) --- */
    .details-container {
        padding: 15px !important;
        width: 100% !important;
    }
    /* On casse les 3 colonnes pour tout empiler de haut en bas */
    .detail-content {
        display: flex !important;
        flex-direction: column !important; 
        gap: 25px !important;
    }
    .detail-image, .detail-config, .detail-summary {
        width: 100% !important;
    }
    
    /* Empile le formulaire */
    .split-2-columns {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
    .custom-select-wrapper { width: 100% !important; }

    /* Fix du bouton Carte qui se superposait */
    .btn-small-map.square-map-btn {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        width: 100% !important;
        height: 70px !important;
        margin-top: 20px !important;
        margin-bottom: -25px !important;
        left: 100px !important;
        display: flex !important;
    }
    .square-map-btn .map-text { font-size: 16px !important; flex-direction: row !important; gap: 10px !important; }
    .square-map-btn .map-text br { display: none !important; }
    
    /* Fix des cases à cocher et boutons radios */
    .radio-group, .checkbox-grid, .pro-checkbox-grid {
        grid-template-columns: 1fr !important; /* 1 seule case par ligne */
        gap: 10px !important;
    }
    
    /* Fix du bloc des pièces/chambres sous l'image */
    .specs-box {
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0 !important;
    }
    .spec-item {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid #222 !important;
        padding: 10px 0 !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    .spec-item:last-child { border-bottom: none !important; }
    .spec-label { margin-bottom: 0 !important; }

    /* --- 4. ACCUEIL --- */
    .home-wrapper {
        padding: 40px 15px 110px 15px !important; /* <--- AJOUTER LE 110px ICI */
        gap: 30px !important;
        height: auto !important;      
        overflow: visible !important; 
    }
    .brand-title { font-size: 30px !important; line-height: 1.2 !important; }
    
    .home-cards-section { padding: 0 !important; }
    
    .home-cards-grid {
        flex-direction: column !important;
        height: auto !important;
        gap: 20px !important;
    }
    
    /* On force les cartes à ne pas s'écraser sur mobile */
    .home-card { 
        flex: none !important; 
        height: 220px !important; 
        width: 100% !important; 
    }

    /* --- FIX : CARTES ACCUEIL 100% STATIQUES SUR MOBILE --- */
    .home-cards-grid .home-card {
        pointer-events: none !important; /* 🚫 Bloque les clics et tous les effets de survol ! */
        cursor: default !important;
        
        /* On force le design par défaut pour écraser tout effet tactile parasite */
        border: 1px solid rgba(255, 255, 255, 0.1) !important; 
        outline: none !important;
        transform: translateY(0) !important; /* Empêche la carte de bouger */
        box-shadow: none !important; 
    }

    /* Sécurité visuelle : on fige l'image et les couleurs pour qu'elles ne s'allument pas */
    .home-cards-grid .home-card .card-slider-bg {
        opacity: 0.6 !important; 
        transform: scale(1) !important; 
    }
    .home-cards-grid .home-card h2 { color: #fff !important; }
    .home-cards-grid .home-card p { color: #aaa !important; }
    .home-cards-grid .home-card .card-sep-line { 
        transform: scaleX(0.5) !important; 
        opacity: 0.7 !important; 
        background: #f1b52c !important; 
    }
    
    .home-bottom-bar { 
        position: relative !important; 
        bottom: 0 !important; 
        left: 0 !important; 
        margin-top: 20px !important; 
        flex-direction: column !important; 
        text-align: center !important; 
    }

    /* --- FIX : SUPPRESSION DOUBLE SCROLLBAR ACCUEIL --- */
    .page-content, 
    #main-section, 
    .properties-container,
    .scroll-list, 
    .home-wrapper {
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important; 
    }

    /* Sécurité visuelle : on cache les scrollbars internes sur mobile */
    .scroll-list::-webkit-scrollbar,
    #main-section::-webkit-scrollbar,
    .page-content::-webkit-scrollbar {
        display: none !important;
    }

    /* --- 5. PARTENAIRES --- */
    .partners-view { padding: 30px 15px !important; width: 100% !important; }
    .partners-grid { grid-template-columns: 1fr !important; }
    .partners-title { font-size: 28px !important; letter-spacing: 4px !important; line-height: 1.2 !important; }
    
    /* --- 6. ENTREPRISES --- */
    .ent-grid { 
        flex-direction: column !important; 
        height: auto !important; 
        gap: 20px !important;
    }
    
    .ent-card { 
        flex: none !important; /* Empêche le navigateur d'écraser la carte */
        min-height: 220px !important; /* Force la hauteur */
        height: 220px !important; 
        width: 100% !important; 
        display: block !important;
    }

    /* ADAPTATION TACTILE (Pas de hover sur mobile) */
    .ent-card .ent-btn {
        opacity: 1.3 !important; /* Affiche le bouton en permanence */
        transform: translateY(0) !important; /* Remet le bouton à sa place */
        background: rgba(0, 0, 0, 0.1) !important; /* Léger fond pour qu'il ressorte */
    }
    .ent-card .ent-card-bg {
        opacity: 0.6 !important; /* Assombrit un peu l'image en permanence pour lire le texte */
    }
    .ent-card p {
        color: #f1b52c !important; /* Met le sous-titre en Or en permanence */
    }

    .ent-properties-grid { grid-template-columns: 1fr !important; }
    .ent-title { font-size: 26px !important; letter-spacing: 2px !important; line-height: 1.2 !important; }

    /* Correction de l'espacement du sous-titre et du badge sur mobile */
    .ent-subtitle { 
        line-height: 2.5 !important; /* Augmente l'espace entre les lignes pour ne pas écraser le texte */
        padding: 0 10px !important;
    }
    .discount-badge { 
        display: inline-block !important; /* Permet au badge d'avoir ses propres marges en haut/bas */
        margin-left: 0 !important; /* Enlève la marge de gauche qui déséquilibrait */
        margin-top: 5px !important; /* Rajoute un petit espace au dessus du badge */
    }

    /* ... (tout le code du haut que tu as déjà) ... */

    /* --- 7. MENU DÉROULANT : POP-UP PREMIUM FLOTTANT --- */
    .submenu {
        position: fixed !important;
        top: auto !important;
        bottom: 105px !important; /* S'ouvre juste au-dessus de la bulle de navigation */
        
        /* Centrage parfait sans utiliser transform (car le JS le modifie) */
        left: 5% !important;
        right: 5% !important;
        width: auto !important;
        max-width: 350px !important;
        margin: 0 auto !important; 
        
        /* Effet verre dépoli premium (Glassmorphism) */
        background: rgba(5, 5, 5, 0.85) !important; 
        backdrop-filter: blur(25px) saturate(120%) !important; 
        -webkit-backdrop-filter: blur(25px) saturate(120%) !important;
        border: 1px solid rgba(241, 181, 44, 0.4) !important; /* Bordure dorée */
        border-radius: 20px !important; /* Bords bien arrondis */
        padding: 5px 0 !important; 
        
        box-shadow: 0 15px 40px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.05) !important;
        z-index: 99999 !important; 
        
        /* Préparation de l'animation d'apparition */
        transform: translateY(20px) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s !important;
    }

    /* On retire la petite barre grise de l'ancien design iOS */
    .submenu::before {
        display: none !important;
    }

    /* Le style des éléments de la liste */
    .submenu li {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Les liens à l'intérieur du menu */
    .submenu li a {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        padding: 16px 20px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        letter-spacing: 1.5px !important;
        color: rgba(255, 255, 255, 0.7) !important;
        text-transform: uppercase !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        transition: color 0.3s, background 0.3s !important;
    }

    /* Le dernier bouton n'a pas de ligne en dessous */
    .submenu li:last-child a {
        border-bottom: none !important;
    }
    
    /* Effet quand on touche (tactile) */
    .submenu li a:active {
        background: rgba(10, 10, 10, 0.1) !important;
        color: #f1b52c !important;
    }

    /* --- FIX : AFFICHAGE DU TIROIR --- */
    .submenu.mobile-open {
        /* Le JS force translateY(0) ici, on le laisse faire son travail */
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* --- 9. MESSAGE AUCUN RÉSULTAT --- */
    .no-result-box {
        padding: 40px 15px !important;
        margin-top: 10px !important;
        margin-right: 0 !important; 
        width: 100% !important;
    }
    .no-result-icon { font-size: 30px !important; }
    .no-result-title { font-size: 16px !important; letter-spacing: 1px !important; }




    /* --- FIX : REMONTER LE FOOTER AU-DESSUS DE LA BULLE NAV --- */
    .main-footer {
        padding-bottom: 110px !important; /* Pousse le contenu du footer vers le haut */
        margin-top: 30px !important; /* Réduit un peu l'espace vide avant le footer */
    }
    
    .footer-content {
        gap: 10px !important; /* Rapproche un peu le logo et le texte pour faire plus propre */
    }

    /* --- FIX : CACHER LE BOUTON MODE GRILLE SUR MOBILE --- */
    #toggle-map-btn {
        display: none !important;
    }


    /* --- FIX : LÉGENDE DE LA CARTE DES ZONES SUR MOBILE (SOUS LA CARTE) --- */
    .modal-legend {
        position: relative !important; /* 🟢 Annule le mode "flottant" par-dessus la carte */
        order: 3 !important;           /* 🟢 Place la légende tout à la fin, SOUS le #zone-map */
        
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        
        width: 100% !important;
        min-width: 0 !important;
        padding: 10px 5px !important;
        
        /* Transformation en barre horizontale compacte */
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 5px 12px !important;
        
        border-radius: 0 0 4px 4px !important;
        border-top: 1px solid #333 !important; /* Petite ligne pour séparer de la carte */
    }

    /* Le titre prend la ligne du haut */
    .modal-legend .legend-title {
        width: 100% !important;
        text-align: center !important;
        margin: 0 0 4px 0 !important;
        padding: 0 !important;
        border: none !important;
        font-size: 11px !important;
    }

    /* Les pastilles s'alignent proprement en dessous */
    .modal-legend .legend-item {
        margin: 0 !important;
    }
    
    .modal-legend .legend-txt {
        font-size: 11px !important;
        margin-left: 4px !important;
    }

    /* Sécurité : On s'assure que la carte reste bien au-dessus de la légende */
    #zone-map {
        order: 2 !important; 
    }
} /* <=== FIN DU @media screen (CETTE ACCOLADE EST MAINTENANT BIEN À LA FIN) */