/* ==========================================
   1. GENERAL STYLES 
   pour l'alignement des chiffres (tabular-nums)
   ========================================== */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #EFEFEF;
    font-family: Tahoma, Arial, helvetica, sans-serif;
	font-variant-numeric: tabular-nums; 
    letter-spacing: 0.5px;
    font-size: 10px;
    color: #333366;
}

.grosrouge {
    font-size: 15px;
    font-weight: bold;
    color: red;
}

/* ==========================================
   2. ENTETE & GRID SYSTEM 
   ========================================== */
.entete {
    display: grid;
    float: left;
    height: 65px;
    padding: 5px 0 5px 5px;
    background: #EFEFEF;
}

#datas {
    float: left;
    display: grid;
}

/* Unification des champs de saisie d'adresse et locator */
#find_locator, #find_address {
    font-family: Tahoma, Arial, sans-serif; /* Identique au body */
    font-size: 11px;                       /* Taille unique */
    font-variant-numeric: tabular-nums;    /* Alignement des chiffres */
    padding: 2px 4px;
    border: 1px solid #ccc;                /* Bordure légère pour le relief */
    color: #333366;                        /* Couleur cohérente avec le body */
    height: 18px;                          /* Hauteur fixe pour l'alignement grid */
    box-sizing: border-box;
}

/* Optionnel : Style quand on clique dans le champ */
#find_locator:focus, #find_address:focus {
    border-color: #396a86;
    outline: none;
    background-color: #fff;
}

/* Style de l'image via CSS */
.help-icon {
    width: 20px;
    height: 20px;
    border: none;
    display: block; /* Évite les espaces résiduels sous l'image */
}

.presentation { grid-column: 1; grid-row: 1 / span 3; width: 120px; padding-right: 5px; }
.titreinput   { grid-column: 2; grid-row: 1; color: red; width: 150px; padding-right: 10px; }
.find_locator { grid-column: 2; grid-row: 2; font-weight: bold; }
.find_address { grid-column: 2; grid-row: 3; font-weight: bold; }

#titrelocator { grid-column: 3; grid-row: 1; color: red; width: 85px; }
#locator      { grid-column: 3; grid-row: 2; font-weight: bold; }
#DFCI         { grid-column: 3; grid-row: 3; font-weight: bold; }

#titrewgs     { grid-column: 4; grid-row: 1; color: red; width: 71px; }
#WGS84_lat    { grid-column: 4; grid-row: 2; font-weight: bold; }
#WGS84_lng    { grid-column: 4; grid-row: 3; font-weight: bold; }

#titredms     { grid-column: 5; grid-row: 1; color: red; width: 100px; }
#WGS84DMS_lat { grid-column: 5; grid-row: 2; font-weight: bold; }
#WGS84DMS_lng { grid-column: 5; grid-row: 3; font-weight: bold; }

#WGS84DDMM_titre { grid-column: 6; grid-row: 1; color: red; width: 86px; }
#WGS84DDMM_lat   { grid-column: 6; grid-row: 2; font-weight: bold; }
#WGS84DDMM_lng   { grid-column: 6; grid-row: 3; font-weight: bold; }

#titrelambert { grid-column: 7; grid-row: 1; color: red; width: 75px; }
#lambert_lat  { grid-column: 7; grid-row: 2; font-weight: bold; }
#lambert_lng  { grid-column: 7; grid-row: 3; font-weight: bold; }

#titreutm  { grid-column: 8; grid-row: 1; color: red; width: 33px; }
#titreutm2 { grid-column: 9; grid-row: 1; color: red; width: 90px; }
#UTM_Z     { grid-column: 8; grid-row: 2; font-weight: bold; width: 30px; }
#UTM_E     { grid-column: 9; grid-row: 2; font-weight: bold; }
#UTM_N     { grid-column: 9; grid-row: 3; font-weight: bold; }

#APRS_titre { grid-column: 10; grid-row: 1; color: red; width: 30px; }
#APRS_lat   { grid-column: 10; grid-row: 2; width: 30px; font-weight: bold; }
#APRS_lng   { grid-column: 10; grid-row: 3; width: 30px; font-weight: bold; }

#test { grid-column: 11; grid-row: 1; width: 30px; font-weight: bold; }

/* ==========================================
   3. INPUTS & FORMS 
   ========================================== */
.input, .input_left { 
    font-family: Tahoma, Arial, sans-serif; 
    font-size: 11px; 
    font-variant-numeric: tabular-nums;
}
.input { text-align: right; }
.input_left { text-align: left; }
form { margin: 0; padding: 0; }

/* ==========================================
   4. BULLES D'INFOS (HELP) 
   ========================================== */
a.bulle { position: relative; color: #396a86; text-decoration: none; font-family: "Trebuchet MS", sans-serif; text-align: center; font-size: 11px; }
a.bulle:hover { background: none; z-index: 50; }
a.bulle span { display: none; }
a.bulle:hover span {
    display: block;
    position: absolute;
    top: 10px;
    left: 40px;
    text-align: justify;
    font-size: 12px;
    font-weight: normal;
    width: 400px;
    background: white;
    padding: 10px;
    border: 1px solid #62c0f4;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
}

/* ==========================================
   5. LEAFLET CONTROLS CUSTOM 
   ========================================== */
.leaflet-bar button {
    background-color: #fff;
    border: none;
    border-bottom: 1px solid #ccc;
    width: 26px;
    height: 26px;
    line-height: 26px;
    display: block;
    text-align: center;
    color: black;
}
.leaflet-bar button:hover { background-color: #f4f4f4; }
.leaflet-bar button:first-of-type { border-top-left-radius: 4px; border-top-right-radius: 4px; }
.leaflet-bar button:last-of-type { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-bottom: none; }
.leaflet-control { cursor: pointer; }

/* ==========================================
   6. RULER (REGLE) 
   ========================================== */
.leaflet-ruler{
  height: 26px;
  width: 26px;
  background-image: url("../images/ruler.png"); /* <div>Icons made by <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div> */
  background-repeat: no-repeat;
  background-position: center;
}
.leaflet-ruler:hover{
  background-image: url("../images/ruler-colored.png"); /* <div>Icons made by <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div> */
}
.leaflet-ruler-clicked{
  height: 30px;
  width: 30px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../images/ruler-colored.png");
  border-color: chartreuse !important;
}

/* Tooltips de la règle harmonisés */
.result-tooltip {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #de0000;
    padding: 2px 5px;
    border-radius: 4px;
}
.moving-tooltip {
    background-color: rgba(255, 255, 255, .7);
    border: 1px dotted red;
    opacity: 0.6;
}

/* ==========================================
   7. STYLE HARMONISÉ (SLIDER, COPYRIGHT, TIME)
   ========================================== */
.radar-opacity-control, 
.map-overlay-text, 
.radar-time-display {
    background: rgba(255, 255, 255, 0.7); /* Transparence uniforme */
    padding: 2px 6px;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 4px;
    font-family: Arial, sans-serif;
    font-size: 9px;
    color: #333;
    pointer-events: auto;
}

/* Spécificités du Copyright & Time */
.map-overlay-text, .radar-time-display {
    pointer-events: none; /* Ne bloque pas le clic sur la carte */
}

.radar-time-display {
    margin-left: 10px !important;
    margin-bottom: 10px !important;
    white-space: nowrap;
}

/* Spécificités du Slider Radar */
.radar-opacity-control {
    min-width: 120px;
    max-width: 150px;
    z-index: 1000;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    
    /* Gestion visibilité via JS class 'active' */
    display: none !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

.radar-opacity-control.active {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Éléments internes du Slider */
.radar-opacity-control label {
    display: block;
    font-weight: bold;
    margin-bottom: 3px;
    text-align: center;
}

.radar-opacity-control input[type=range] {
    width: 100%;
    height: 6px;
    cursor: pointer;
    display: block;
    margin: 0 auto;
	accent-color: #333366; /* Optionnel : change la couleur du curseur pour l'harmoniser */
}

/* Échelle de pluie (Légende) */
.radar-legend {
    margin-top: 4px;
    border-top: 1px solid rgba(0,0,0,0.05);
    padding-top: 4px;
}

.legend-bar {
    height: 5px;
    width: 100%;
    background: linear-gradient(to right, 
        rgba(0, 150, 255, 1), 
        rgba(0, 255, 0, 1), 
        rgba(255, 255, 0, 1), 
        rgba(255, 0, 0, 1)
    );
    border-radius: 1px;
}

/* css pour la légende de l'échelle de pluie */
.legend-labels {
    display: flex;
    justify-content: space-between; /* Aligne Low à gauche et Heavy à droite */
    margin-top: 3px;               /* Espace réduit sous la barre de 5px */
}

.legend-labels span {
    color: #666;                   /* Gris discret pour l'harmonie */
    font-family: sans-serif;
	font-weight: bold;
    letter-spacing: 0.3px;
}

@keyframes pulse-green {
    0% { opacity: 1; text-shadow: 0 0 2px #2ecc71; }
    50% { opacity: 0.5; text-shadow: 0 0 8px #2ecc71; }
    100% { opacity: 1; text-shadow: 0 0 2px #2ecc71; }
}

.radar-pulse {
    color: #2ecc71;
    margin-left: 2 px;
    display: inline-block;
    animation: pulse-green 2s infinite ease-in-out;
}