/* =============================================================================
 * MAPIRANDO — mapirando-explorer
 * =============================================================================
 *
 * Ces règles étaient imprimées en <style> au milieu du HTML par le PHP. Les
 * sortir ici ne change rien à l'écran : mêmes règles, même ordre. Ce qu'on y
 * gagne, c'est le cache navigateur (elles repartaient dans chaque page) et un
 * fichier PHP qui ne contient plus que de la logique.
 *
 * ATTENTION À L'ORDRE DE CHARGEMENT : un <style> posé dans le corps de page
 * gagne la cascade sur tout ce qui vient de l'en-tête. Cette feuille doit donc
 * être mise en file APRÈS le thème Blocksy — voir la file en priorité 999 dans
 * mapirando-community.php. La charger normalement laisserait le thème reprendre
 * la main sur les marges et les positions.
 * -------------------------------------------------------------------------- */

/* --- Explorer : recherche et grille de topos
       (venait de includes/topo/class-topo-display.php, lignes 210-538) ------------------------------------- */
            /* NETTOYAGE : Les anciens styles globaux .site-content, .mapi-hero-full etc ont été supprimés.
               La page utilise désormais le CSS du fichier mapirando-events.css pour le bandeau supérieur. */
               
            .mapi-hero-btn { background: var(--mapi-surface, #141619); color: var(--mapi-text-primary, #f4f3f0); padding: 15px 40px; border-radius: 50px; font-weight: 800; text-decoration: none; font-size: 1.1em; display: inline-block; box-shadow: 0 10px 30px rgba(0,0,0,0.3); transition: transform 0.2s; position: relative; z-index: 2; margin-top: 20px; }
            .mapi-hero-btn:hover { transform: translateY(-3px); }

            /* ============================================================
               NOUVEAU DESIGN MOTEUR RECHERCHE - DARK MODE PREMIUM
               (Fix Safari Guillotine Bug)
               ============================================================ */
            .mapi-live-search-container { max-width: 1200px; margin: -80px auto 40px auto; position: relative; z-index: 10; padding: 0 20px; }
            .mapi-search-card { background: #111111; border-radius: 16px; box-shadow: 0 15px 40px rgba(0,0,0,0.3); padding: 30px; font-family: sans-serif; }
            
            .mapi-main-filters { display: flex; gap: 15px; flex-wrap: wrap; align-items: center; }
            .mapi-search-input-wrap { flex: 2; min-width: 250px; position: relative; }
            .mapi-search-input-wrap .ph { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #888; font-size: 24px; width: 24px; height: 24px; }
            
            /* FIX : Hauteur stricte (55px) et padding horizontal uniquement pour empêcher le rognage Safari */
            .mapi-main-filters input[type="text"], 
            .mapi-main-filters select { 
                height: 55px; 
                box-sizing: border-box; 
                margin: 0;
                font-size: 1.05em; 
                font-weight: normal;
                color: #fff; 
                background: #333; 
                border: 1px solid #444; 
                border-radius: 12px; 
                font-family: inherit; 
                transition: all 0.2s; 
                outline: none;
            }
            
            .mapi-main-filters input[type="text"] { 
                width: 100%; 
                padding: 0 15px 0 50px; 
            }
            .mapi-main-filters input[type="text"]:focus { 
                border-color: #ff5252; 
                background: #222; 
                box-shadow: 0 0 0 3px rgba(255,82,82,0.1); 
            }
            .mapi-main-filters input[type="text"]::placeholder { color: #aaa; }
            
            .mapi-main-filters select { 
                flex: 1; 
                min-width: 180px; 
                padding: 0 40px 0 15px; 
                appearance: none; 
                cursor: pointer; 
                background-image: url('data:image/svg+xml;utf8,<svg fill="white" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>'); 
                background-repeat: no-repeat; 
                background-position: right 10px center; 
            }
            .mapi-main-filters select:focus { border-color: #ff5252; }

            /* Le Bouton Rouge */
            .mapi-btn-toggle-adv { 
                height: 55px;
                display: flex; align-items: center; justify-content: center; gap: 8px; 
                padding: 0 25px; 
                background: #ff5252; color: white; border: none; border-radius: 12px; 
                font-weight: 700; font-size: 1em; cursor: pointer; transition: all 0.2s; 
                white-space: nowrap; font-family: inherit; text-transform: uppercase; 
                box-sizing: border-box;
            }
            .mapi-btn-toggle-adv:hover { background: #e04848; transform: translateY(-1px); }

            /* PANNEAU AVANCÉ DARK MODE */
            .mapi-advanced-panel { display: none; margin-top: 20px; padding-top: 20px; border-top: 1px solid #333; animation: fadeInDown 0.3s ease-out; }
            .mapi-advanced-panel.active { display: block; }
            .mapi-adv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 20px; }
            
            .mapi-adv-group label { display: block; font-size: 0.85em; font-weight: 700; color: #aaa; text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }
            
            /* FIX Menu panneau avancé : Hauteur stricte, police fine */
            .mapi-adv-group select { 
                height: 50px; 
                width: 100%; 
                box-sizing: border-box; 
                padding: 0 40px 0 15px; 
                border: 1px solid #444; border-radius: 8px; 
                font-size: 0.95em; font-weight: normal; color: #fff; background: #222; 
                appearance: none; cursor: pointer; 
                background-image: url('data:image/svg+xml;utf8,<svg fill="white" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>'); 
                background-repeat: no-repeat; background-position: right 10px center; 
                font-family: inherit; 
            }

            /* BOUTONS TAGS DARK MODE */
            .mapi-tags-row { display: flex; gap: 10px; flex-wrap: wrap; }
            .mapi-tag-checkbox { display: none; }
            .mapi-tag-label { display: inline-flex; align-items: center; gap: 6px; height: 45px; padding: 0 18px; background: #333; border: 1px solid #444; border-radius: 50px; font-size: 0.9em; font-weight: normal; color: #ddd; cursor: pointer; transition: all 0.2s; user-select: none; box-sizing: border-box; }
            .mapi-tag-checkbox:checked + .mapi-tag-label { background: #27ae60; border-color: #27ae60; color: #fff; box-shadow: 0 4px 10px rgba(39, 174, 96, 0.2); }
            
            /* ZONE INFERIEURE */
            .mapi-bottom-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; height: 30px; }
            .mapi-reset-btn { display: none; align-items: center; gap: 5px; color: #ff5252; font-weight: 700; font-size: 0.9em; cursor: pointer; background: transparent; border: none; padding: 5px 10px; border-radius: 6px; transition: background 0.2s; font-family: inherit; }
            .mapi-reset-btn:hover { background: rgba(255, 82, 82, 0.1); }
            .mapi-reset-btn.visible { display: inline-flex; }

            /* Bascule Vue carte / Vue liste — bouton flottant circulaire (FAB), icône
               seule sans texte, en bas à droite. La version précédente en pilule large
               centrée lisait comme une "barre" envahissante — remplacée par un vrai
               bouton compact, pattern Google Maps. Reste visible pendant le scroll. */
            .mapi-view-toggle-btn {
                position: fixed; bottom: 28px; right: 24px; z-index: 999;
                display: flex; align-items: center; justify-content: center;
                width: 58px; height: 58px; padding: 0;
                background: #262d34; color: #fff;
                border: none; border-radius: 50%; cursor: pointer;
                box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
                transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
            }
            .mapi-view-toggle-btn:hover { transform: scale(1.08); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4); }
            .mapi-view-toggle-btn.is-active { background: #ff5252; box-shadow: 0 8px 20px rgba(255, 82, 82, 0.4); }
            .mapi-view-toggle-btn.is-active:hover { box-shadow: 0 10px 24px rgba(255, 82, 82, 0.5); }
            .mapi-view-toggle-btn svg { width: 26px; height: 26px; }
            @media (max-width: 600px) {
                .mapi-view-toggle-btn { bottom: 20px; right: 18px; width: 52px; height: 52px; }
                .mapi-view-toggle-btn svg { width: 23px; height: 23px; }
            }

            /* Habillage du sélecteur de calques Leaflet — remplace le widget blanc brut par défaut */
            .leaflet-control-layers { border-radius: 12px !important; box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important; border: none !important; font-family: inherit !important; overflow: hidden; }
            .leaflet-control-layers-toggle { width: 40px !important; height: 40px !important; }
            .leaflet-control-layers-expanded { padding: 12px 16px !important; background: var(--mapi-surface, #141619) !important; }
            .leaflet-control-layers-expanded label { font-weight: 600; color: var(--mapi-text-primary, #f4f3f0); font-size: 0.9em; margin-bottom: 6px; display: flex; align-items: center; }
            .leaflet-control-layers-selector { margin-right: 8px !important; accent-color: #ff5252; }

            .mapi-live-loader { display: none; align-items: center; gap: 8px; color: #ff5252; font-weight: 800; font-size: 0.9em; }
            .mapi-live-loader.active { display: inline-flex; }
            @keyframes spin { 100% { transform: rotate(360deg); } }
            .mapi-spin-icon { animation: spin 1s linear infinite; }
            @keyframes fadeInDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

            /* ============================================================
               CUSTOM DROPDOWNS SOMBRES — Zone principale (fond #333, 55px, radius 12px)
               ============================================================ */

            .mapi-main-filters .mapi-custom-select {
                position: relative;
                flex: 1;
                min-width: 180px;
                box-sizing: border-box;
            }

            .mapi-main-filters .mapi-custom-select-trigger {
                height: 55px;
                box-sizing: border-box;
                font-size: 1.05em;
                font-weight: normal;
                color: #fff;
                background: #333;
                border: 1px solid #444;
                border-radius: 12px;
                font-family: inherit;
                transition: all 0.2s;
                outline: none;
                cursor: pointer;
                display: flex;
                align-items: center;
                padding: 0 40px 0 15px;
                background-image: url('data:image/svg+xml;utf8,<svg fill="white" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
                background-repeat: no-repeat;
                background-position: right 10px center;
                user-select: none;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .mapi-main-filters .mapi-custom-select-trigger:hover {
                border-color: #555;
                background-color: #3a3a3a;
            }
            .mapi-main-filters .mapi-custom-select.open .mapi-custom-select-trigger {
                border-color: #ff5252;
                border-radius: 12px 12px 0 0;
            }

            .mapi-main-filters .mapi-custom-select-dropdown {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                z-index: 99999;
                background: #2a2a2a;
                border: 1px solid #444;
                border-top: none;
                border-radius: 0 0 12px 12px;
                max-height: 250px;
                overflow-y: auto;
                box-shadow: 0 10px 30px rgba(0,0,0,0.4);
                scrollbar-width: thin;
                scrollbar-color: #555 #2a2a2a;
            }
            .mapi-main-filters .mapi-custom-select.open .mapi-custom-select-dropdown {
                display: block;
            }

            .mapi-main-filters .mapi-custom-select-option {
                padding: 12px 15px;
                color: #ccc;
                font-size: 0.95em;
                font-family: inherit;
                cursor: pointer;
                transition: background 0.15s;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .mapi-main-filters .mapi-custom-select-option:hover {
                background: #3a3a3a;
                color: #fff;
            }
            .mapi-main-filters .mapi-custom-select-option.selected {
                color: #ff5252;
                font-weight: 600;
            }

            /* ============================================================
               CUSTOM DROPDOWNS SOMBRES — Panneau avancé (fond #222, 50px, radius 8px)
               ============================================================ */

            .mapi-adv-group .mapi-custom-select {
                position: relative;
                width: 100%;
                box-sizing: border-box;
            }

            .mapi-adv-group .mapi-custom-select-trigger {
                height: 50px;
                box-sizing: border-box;
                font-size: 0.95em;
                font-weight: normal;
                color: #fff;
                background: #222;
                border: 1px solid #444;
                border-radius: 8px;
                font-family: inherit;
                transition: all 0.2s;
                outline: none;
                cursor: pointer;
                display: flex;
                align-items: center;
                padding: 0 40px 0 15px;
                background-image: url('data:image/svg+xml;utf8,<svg fill="white" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
                background-repeat: no-repeat;
                background-position: right 10px center;
                user-select: none;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .mapi-adv-group .mapi-custom-select-trigger:hover {
                border-color: #555;
                background-color: #2a2a2a;
            }
            .mapi-adv-group .mapi-custom-select.open .mapi-custom-select-trigger {
                border-color: #ff5252;
                border-radius: 8px 8px 0 0;
            }

            .mapi-adv-group .mapi-custom-select-dropdown {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                z-index: 99999;
                background: #2a2a2a;
                border: 1px solid #444;
                border-top: none;
                border-radius: 0 0 8px 8px;
                max-height: 250px;
                overflow-y: auto;
                box-shadow: 0 10px 30px rgba(0,0,0,0.4);
                scrollbar-width: thin;
                scrollbar-color: #555 #2a2a2a;
            }
            .mapi-adv-group .mapi-custom-select.open .mapi-custom-select-dropdown {
                display: block;
            }

            .mapi-adv-group .mapi-custom-select-option {
                padding: 12px 15px;
                color: #ccc;
                font-size: 0.95em;
                font-family: inherit;
                cursor: pointer;
                transition: background 0.15s;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .mapi-adv-group .mapi-custom-select-option:hover {
                background: #3a3a3a;
                color: #fff;
            }
            .mapi-adv-group .mapi-custom-select-option.selected {
                color: #ff5252;
                font-weight: 600;
            }
            .mapi-cs-group-header {
                padding: 8px 15px 4px 15px;
                font-size: 0.72em;
                font-weight: 800;
                text-transform: uppercase;
                letter-spacing: 0.8px;
                color: #888;
                cursor: default;
                border-top: 1px solid #3a3a3a;
                margin-top: 2px;
            }
            .mapi-cs-group-header:first-child { border-top: none; margin-top: 0; }

            @media (max-width: 768px) {
                .mapi-main-filters { flex-direction: column; align-items: stretch; gap: 12px; }
                .mapi-main-filters select, .mapi-btn-toggle-adv { width: 100%; }
                .mapi-main-filters .mapi-custom-select { flex: none; width: 100%; min-width: unset; }
                .mapi-main-filters .mapi-custom-select-trigger { width: 100%; }
                .mapi-tags-row { justify-content: space-between; }
                .mapi-tags-row div { flex: 1; text-align: center; }
                .mapi-tag-label { width: 100%; justify-content: center; box-sizing: border-box; }
            }

/* "Proposer un topo" — Remy, 2026-09-03 : à la différence de "Organiser une
   sortie" (même classe .mapi-hero-btn, mais sur la page Sorties), celui-ci
   doit GARDER son rouge d'origine avec texte blanc. Chargée après
   main-style.css (qui vient de passer .mapi-hero-btn au jaune), cette règle
   plus spécifique à la page Explorer reprend le dessus ici uniquement. */
.mapi-hero-btn { background: #ff5252 !important; color: #ffffff !important; }
.mapi-hero-btn:hover { background: #ff3b3b !important; color: #ffffff !important; }