/* ==================== LÉGENDE - AU-DESSUS DE LA CARTE ==================== */
.meteo-peche-legend-fixed{
  width: 100%;
  background: #ffffff !important;
  padding: 12px 15px;
  border-radius: 8px; 
  box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
  border: 1px solid #e0e0e0 !important;
  font-family: 'Segoe UI', Tahoma, sans-serif; 
  color: #333333;
  transition: all 0.3s ease;
  position: static;
  margin-bottom: 12px;
  z-index: 1000;
}

.meteo-peche-legend-fixed h4{ 
  margin: 0 0 10px 0; 
  text-align: center; 
  color: #0078a8 !important; 
  font-size: 16px; 
  transition: color 0.3s ease;
  font-weight: 600;
}

.meteo-legend-compact{ 
  display: flex; 
  flex-wrap: nowrap;
  gap: 15px; 
  justify-content: center; 
  margin-bottom: 10px; 
  font-size: 13px; 
}

.meteo-legend-item{ 
  display: flex; 
  align-items: center; 
  gap: 5px; 
  transition: transform 0.2s ease;
  white-space: nowrap;
}

.meteo-legend-item:hover {
  transform: translateX(2px);
}

.meteo-legend-color{ 
  font-size: 14px; 
  transition: transform 0.3s ease;
}
.meteo-legend-color-green{ color: green; } 
.meteo-legend-color-lightgreen{ color: #32cd32; }
.meteo-legend-color-orange{ color: orange; } 
.meteo-legend-color-red{ color: red; } 

/* ==================== SECTION SPOTS PERSONNALISÉS ==================== */
.meteo-custom-spots-section {
  text-align: center;
  padding-top: 8px;
  border-top: 1px solid #e0e0e0;
}

.meteo-add-custom-spot {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  background: #0078a8 !important;
  color: white !important;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.meteo-add-custom-spot:hover {
  background: #005a87 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* ==================== POPUPS LEAFLET ==================== */
.meteo-popup {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  max-width: 280px !important;
  padding: 0 !important;
}

.meteo-popup-header {
  background: white;
  color: white;
  padding: 12px 15px;
  margin: -15px -15px 12px -15px;
  border-radius: 8px 8px 0 0;
  text-align: center;
}

.meteo-popup-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.meteo-popup-section {
  padding: 12px;
  margin-bottom: 8px;
  border-radius: 6px;
  border: 1px solid #e0e0e0;
  background: #fafafa;
}

.meteo-popup-section-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.meteo-popup-section-content {
  font-size: 13px;
  line-height: 1.4;
  color: #555;
}

.meteo-popup-section-content div {
  margin-bottom: 4px;
}

.meteo-popup-section-content b {
  color: #333;
}

/* Sections colorées selon le type */
.meteo-popup-section-conditions {
  background: #f0f8ff;
  border-color: #b8d4f0;
}

.meteo-popup-section-pressure {
  background: #fff0f0;
  border-color: #f0b8b8;
}

.meteo-popup-section-night {
  background: #f5f0ff;
  border-color: #d4b8f0;
}

/* Sections d'activité */
.meteo-popup-section-activity-excellent {
  background: #f0fff0;
  border-color: #90ee90;
  border-left: 4px solid green;
}

.meteo-popup-section-activity-good {
  background: #f0fff0;
  border-color: #90ee90;
  border-left: 4px solid lightgreen;
}

.meteo-popup-section-activity-moderate {
  background: #fff8f0;
  border-color: #ffd699;
  border-left: 4px solid orange;
}

.meteo-popup-section-activity-poor {
  background: #fff0f0;
  border-color: #ff9999;
  border-left: 4px solid red;
}

/* Badges de score */
.meteo-score-highlight {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  margin-top: 6px;
  text-align: center;
}

.meteo-score-highlight.excellent {
  background: green;
  color: white;
}

.meteo-score-highlight.good {
  background: lightgreen;
  color: #333;
}

.meteo-score-highlight.moderate {
  background: orange;
  color: white;
}

.meteo-score-highlight.poor {
  background: red;
  color: white;
}

/* Badge d'activité */
.meteo-activity-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 8px;
  text-align: center;
  width: 100%;
}

.meteo-activity-badge.excellent {
  background: green;
  color: white;
}

.meteo-activity-badge.good {
  background: lightgreen;
  color: #333;
}

.meteo-activity-badge.moderate {
  background: orange;
  color: white;
}

.meteo-activity-badge.poor {
  background: red;
  color: white;
}

/* Affichage du score */
.meteo-score-display {
  text-align: center;
  font-size: 13px;
  margin-top: 8px;
}

.meteo-score-display b {
  font-size: 14px;
}

/* Section de suppression */
.meteo-popup-delete-section {
  text-align: center;
  padding: 10px 0 0 0;
  margin-top: 10px;
  border-top: 1px solid #e0e0e0;
}

.meteo-delete-custom-spot {
  background: #dc3545;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.meteo-delete-custom-spot:hover {
  background: #c82333;
  transform: translateY(-1px);
}

/* Messages d'analyse */
.meteo-analysis-pending {
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 4px;
  padding: 8px;
  text-align: center;
}

.meteo-analysis-note {
  background: #e7f3ff;
  border: 1px solid #b8d4f0;
  border-radius: 4px;
  padding: 6px;
  margin-top: 8px;
  font-size: 11px;
}

.meteo-night-impact {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 6px;
  margin-top: 6px;
}

.meteo-full-moon-alert {
  background: #fff3cd;
  border: 1px solid #ffd699;
  border-radius: 4px;
  padding: 6px;
  margin-top: 6px;
  color: #856404;
}

/* ==================== HAUTEUR DE LA CARTE ==================== */

/* DESKTOP - Grands écrans */
@media (min-width: 1200px) {
  #meteo-peche-map{ 
    height: 800px !important;
    min-height: 700px;
  }
}

/* DESKTOP - Écrans standards */
@media (min-width: 1025px) {
  #meteo-peche-map{ 
    height: 750px !important;
    min-height: 650px;
  }
}

/* TABLETTE - Landscape et grands tablettes */
@media (max-width: 1024px) and (min-width: 769px){
  .meteo-peche-wrapper {
    gap: 10px;
  }
  
  #meteo-peche-map{ 
    height: 700px !important;
  }
  
  .meteo-peche-legend-fixed{
    background: #ffffff !important;
    padding: 10px 12px;
    margin-bottom: 10px;
  }
  
  .meteo-peche-legend-fixed h4{
    font-size: 15px;
  }
  
  /* Popups tablette */
  .meteo-popup {
    max-width: 260px !important;
  }
  
  .meteo-popup-section {
    padding: 10px;
  }
  
  .meteo-popup-section-title {
    font-size: 13px;
  }
  
  .meteo-popup-section-content {
    font-size: 12px;
  }
}

/* TABLETTE - Portrait et petits tablettes */
@media (max-width: 768px){
  .meteo-peche-wrapper {
    gap: 8px;
  }
  
  #meteo-peche-map{ 
    height: 650px !important;
  }
  
  .meteo-peche-legend-fixed{
    background: #ffffff !important;
    padding: 8px 10px;
    margin-bottom: 8px;
  }
  
  /* Popups mobile */
  .meteo-popup {
    max-width: 240px !important;
  }
  
  .meteo-popup-header {
    padding: 10px 12px;
  }
  
  .meteo-popup-header h3 {
    font-size: 15px;
  }
  
  .meteo-popup-section {
    padding: 8px;
    margin-bottom: 6px;
  }
  
  .meteo-popup-section-title {
    font-size: 12px;
  }
  
  .meteo-popup-section-content {
    font-size: 11px;
  }
  
  .meteo-activity-badge {
    font-size: 13px;
    padding: 5px 10px;
  }
}

/* MOBILE */
@media (max-width: 480px){
  #meteo-peche-map{ 
    height: 600px !important;
  }
  
  .meteo-peche-legend-fixed{
    background: #ffffff !important;
    padding: 6px 8px;
  }
  
  /* Popups petit mobile */
  .meteo-popup {
    max-width: 220px !important;
  }
  
  .meteo-popup-header {
    padding: 8px 10px;
  }
  
  .meteo-popup-header h3 {
    font-size: 14px;
  }
  
  .meteo-popup-section {
    padding: 6px;
  }
  
  .meteo-popup-section-title {
    font-size: 11px;
  }
  
  .meteo-popup-section-content {
    font-size: 10px;
  }
}

/* Règle de secours */
#meteo-peche-map {
  height: 750px !important;
  width: 100%;
}