/* ==========================================
   STYLE GLOBAL (Anciennement dans Layout)
   ========================================== */
   body { background-color: #f8f9fa; }

   .navbar { background-color: #0d47a1 !important; } 
   
   .navbar-brand { 
       font-weight: bold; 
       letter-spacing: 0.5px; 
   }
   
   .card { 
       border: none; 
       border-radius: 12px; 
       transition: transform 0.2s; 
   }
   
   .card:hover { transform: translateY(-5px); }
   
   code { color: #d63384; font-weight: bold; }
   
   .dropdown-menu { 
       border: none; 
       box-shadow: 0 4px 12px rgba(0,0,0,0.1); 
       border-radius: 8px; 
   }
   
   /* Style spécifique pour le bouton Mon Compte */
   #userDropdown {
       background-color: #ffffff !important;
       color: #0d47a1 !important;
       font-weight: bold;
       border-radius: 50px !important;
       transition: all 0.3s ease;
   }
   
   #userDropdown:hover {
       background-color: #e3f2fd !important;
       transform: scale(1.05);
   }
   
/* ==========================================
   STYLE POUR LA CARTE ET LES STATIONS
   ========================================== */

/* Conteneur principal de la carte Leaflet */
#map { 
    height: 450px; 
    width: 100%; 
    border-radius: 12px; 
    border: 2px solid #343a40;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 1; /* Assure que la carte reste sous les menus déroulants */
}

/* Listes de stations avec défilement vertical */
.station-list { 
    height: 200px; 
    overflow-y: auto; 
    background: #ffffff; 
    border: 1px solid #dee2e6; 
    border-radius: 8px;
    padding: 10px;
}

/* Lignes de stations (Checkboxes) */
.form-check {
    transition: background 0.2s ease;
    border-radius: 4px;
    padding-top: 5px;
    padding-bottom: 5px;
    cursor: pointer;
}

.form-check:hover {
    background-color: #f8f9fa; /* Effet de surbrillance au survol de la souris */
}

/* Badges affichant le rayon (km) */
.badge-radius { 
    font-size: 0.9rem; 
    padding: 6px 12px;
    min-width: 80px; /* Évite que le badge ne bouge quand le texte change */
    text-align: center;
    display: inline-block;
}

/* Personnalisation des curseurs (Sliders) */
/* Rend le curseur (slider) plus gros et facile à manipuler */
/* Assure que la barre (le rail) du curseur est bien visible */
/* --- Style du Rail (la barre sur laquelle on glisse) --- */
.form-range {
    -webkit-appearance: none; /* Chrome, Safari, Opera */
    -moz-appearance: none;    /* Firefox */
    appearance: none;         /* Propriété standard */
    
    width: 100%;
    height: 8px;              /* Épaisseur de la barre */
    background: #dee2e6;      /* Couleur de fond du rail */
    border-radius: 5px;
    outline: none;
    margin: 15px 0;
    display: block !important; /* Force l'affichage */
}

/* --- Style du Bouton (le cercle qu'on déplace) --- */

/* Pour Chrome, Safari, Edge et iOS */
.form-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #0d6efd;
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    margin-top: -6px; /* Centre le bouton sur le rail */
}

/* Pour Firefox */
.form-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #0d6efd;
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* État actif/focus pour l'accessibilité */
.form-range:focus {
    outline: none;
}
.form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.3);
}

.badge-radius {
    font-size: 1.1rem !important; /* Plus grand */
    padding: 8px 15px !important;
    border-radius: 20px !important;
}

.station-list {
    margin-top: 15px;
    border-radius: 10px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}

/* Force l'affichage du tooltip au premier plan absolu */
.leaflet-tooltip-pane {
    z-index: 9999 !important;
}

.leaflet-tooltip {
    pointer-events: none; /* Empêche le tooltip de bloquer le clic sur le point */
    visibility: visible !important;
    opacity: 1 !important;
}

/* S'assure que le curseur change bien */
.leaflet-interactive {
    cursor: pointer !important;
}

/* Animation pour la surbrillance (utilisée lors de la sélection) */
@keyframes pulse-red {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}
/* FORCE l'affichage du rail du slider */
input[type=range].form-range {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    height: 10px !important; /* On l'épaissit pour être sûr de la voir */
    background: #ccc !important; /* Gris bien visible */
    border-radius: 5px;
    cursor: pointer;
    display: block !important;
    margin: 20px 0 !important;
}

/* Force l'affichage du bouton du slider pour Chrome/Safari */
input[type=range].form-range::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    background: #0d6efd !important;
    border-radius: 50% !important;
    border: 2px solid white !important;
    margin-top: -5px !important; /* Centre sur le rail */
}

/* Force pour Firefox */
input[type=range].form-range::-moz-range-thumb {
    width: 20px !important;
    height: 20px !important;
    background: #0d6efd !important;
    border-radius: 50% !important;
    border: 2px solid white !important;
}

/* ==========================================
   HARMONISATION FINALE : TITRE & BOUTON
   ========================================== */

/* 1. NETTOYAGE DU TITRE (Suppression du noir et centrage) */
/* Ce style ne s'applique qu'au card-header du formulaire de déploiement */
#deploy-form .card-header.bg-dark {
    background-color: transparent !important;
    border-bottom: none !important;
}

.card-header h3.text-primary {
    color: #0d6efd !important; /* Force le bleu sur le texte */
    justify-content: center !important; /* Centre l'icône et le texte */
    display: flex !important;
    align-items: center !important;
}

/* 2. L'ICÔNE DANS LE TITRE */
.turbine-icon-title {
    width: 50px !important; /* Taille ajustée pour être bien visible */
    height: 50px !important;
    object-fit: contain;
    margin-right: 15px; /* Espace entre l'image et le texte */
}

/* 3. LE BOUTON DE DÉPLOIEMENT (Couleur identique à Rechercher) */
#btn-deploy {
    background-color: #0d6efd !important; /* Bleu Primary */
    border: none !important;
    padding: 15px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 4. L'ICÔNE DANS LE BOUTON (Blanche et taille moyenne) */
#btn-deploy .turbine-icon {
    width: 30px !important;
    height: 30px !important;
    filter: brightness(0) invert(1) !important; /* Force l'icône en blanc */
    object-fit: contain;
    margin-right: 12px;
}

/* Effet au survol du bouton */
#btn-deploy:hover {
    filter: brightness(90%);
    transform: scale(1.01);
    transition: all 0.2s ease;
}

/* Couleur bouton curseur Meteo */
#radius-meteo::-webkit-slider-thumb {
    background: #ffc107 !important;
    border: 2px solid #fff !important;
}
#radius-meteo::-moz-range-thumb {
    background: #ffc107 !important;
    border: 2px solid #fff !important;
}

/* Boutons étape 1 */
.btn-outline-primary { color: #0d6efd; }
.btn-outline-primary:hover { color: white !important; background-color: #0d6efd !important; }
/* Boutons dynamiques arbre de configuration étape 1 */
.btn-outline-secondary.bg-white:hover {
    color: white !important;
    background-color: #6c757d !important;
}

/* Code paramètre en lecture seule */
input[readonly].fw-mono {
    background-color: #f0f0f0 !important;
    cursor: not-allowed;
    color: #6c757d !important;
    border-style: solid !important;
}

/* Paramètres standards — état utilisé / non utilisé */
.param-used td { opacity: 1; }
.param-used .param-label { font-weight: bold !important; color: #000 !important; }

.param-unused td { opacity: 0.35; }
.param-unused input { background-color: #f8f8f8 !important; }

/* Checkbox utiliser */
.param-use-checkbox { 
    cursor: pointer; 
    width: 18px; 
    height: 18px;
    accent-color: #0d6efd;
}