/* ===== ACCUEIL REDESIGN - Style harmonisé ===== */
.home-page-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Hero section amélioré */
.home-hero.pro-card {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 32px;
  margin: 24px 0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.hero-title {
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 800;
  color: #0f172a;
  line-height: 1.3;
  margin-bottom: 12px;
}

.hero-title .accent {
  color: #1b5f8c;
  background: linear-gradient(135deg, #1b5f8c 0%, #0c4a6e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Quick buttons améliores */
.home-hero .btn.small-btn {
  background: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 100%);
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 600;
  color: #334155;
  transition: all 0.2s ease;
}

.home-hero .btn.small-btn:hover {
  background: linear-gradient(145deg, #1b5f8c 0%, #0c4a6e 100%);
  color: white;
  border-color: #1b5f8c;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(27, 95, 140, 0.25);
}

/* Home Grid amélioré */
.home-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 20px 0 30px;
}

@media (max-width: 900px) {
  .home-grid { grid-template-columns: 1fr; }
}

/* Cards modernes */
.home-grid .pro-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  transition: all 0.25s ease;
}

.home-grid .pro-card:hover {
  border-color: #1b5f8c;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  transform: translateY(-3px);
}

/* Titres des cards */
.card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #f1f5f9;
}

.card-title h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.card-title .icon-24 {
  color: #1b5f8c;
  opacity: 0.9;
}

/* Sun card - Lever & Coucher */
.sun-card {
  background: linear-gradient(145deg, #fffbeb 0%, #fef3c7 100%) !important;
  border-color: #fcd34d !important;
}

.sun-card .card-title {
  border-bottom-color: rgba(251, 191, 36, 0.3);
}

.sun-card .card-title .icon-24 {
  color: #f59e0b;
}

.sun-rows {
  display: grid;
  gap: 14px;
}

.sun-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.7);
  border-radius: 12px;
  transition: all 0.2s;
}

.sun-row:hover {
  background: rgba(255,255,255,0.95);
  transform: translateX(4px);
}

.sun-ico {
  flex-shrink: 0;
}

.sun-meta .label {
  font-size: 0.75rem;
  color: #92400e;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.sun-meta .value {
  font-size: 1.25rem;
  font-weight: 800;
  color: #78350f;
}

/* Vigilance card */
.vigilance-card {
  position: relative;
  overflow: hidden;
}

.vigilance-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--vig-color, #30D158);
}

.vigilance-card.color-jaune::before { background: #FFD700; }
.vigilance-card.color-orange::before { background: #FFA500; }
.vigilance-card.color-rouge::before { background: #FF3B30; }
.vigilance-card.color-verte::before { background: #30D158; }

.vigilance-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.vigilance-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.vigilance-text {
  font-weight: 600;
  color: #334155;
  flex: 1;
}

/* Radar card */
.radar-card {
  background: linear-gradient(145deg, #f0f9ff 0%, #e0f2fe 100%) !important;
  border-color: #7dd3fc !important;
}

.radar-card .card-title {
  border-bottom-color: rgba(14, 165, 233, 0.2);
}

.radar-card .card-title .icon-24 {
  color: #0284c7;
}

.radar-figure {
  text-align: center;
}

.radar-figure img {
  border-radius: 12px;
  border: 2px solid rgba(14, 165, 233, 0.2);
  margin-bottom: 12px;
}

.radar-caption {
  margin-bottom: 12px;
}

/* Links card */
.links-card {
  background: linear-gradient(145deg, #fdf4ff 0%, #fae8ff 100%) !important;
  border-color: #e879f9 !important;
}

.links-card .card-title {
  border-bottom-color: rgba(217, 70, 239, 0.2);
}

.links-card .card-title .icon-24 {
  color: #c026d3;
}

.links-grid .btn {
  background: white;
  border: 1px solid rgba(217, 70, 239, 0.3);
  color: #86198f;
  font-weight: 600;
  transition: all 0.2s;
}

.links-grid .btn:hover {
  background: #c026d3;
  color: white;
  border-color: #c026d3;
}

/* Social join modernisé */
.social-join {
  margin: 24px auto;
  padding: 20px;
  background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 16px;
  border: 1px solid #e2e8f0;
}

.social-join__text {
  font-size: 1rem;
  font-weight: 700;
  color: #334155;
}

.social-join__icons a {
  width: 42px;
  height: 42px;
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  transition: all 0.2s;
}

.social-join__icons a:hover {
  background: #1b5f8c;
  border-color: #1b5f8c;
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(27, 95, 140, 0.3);
}

.social-join__icons a:hover svg {
  fill: white;
}

/* Weather carousel section */
.weather-carousel-section.pro-card {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  padding: 12px 14px;
}

.carousel-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1e293b;
  letter-spacing: -0.01em;
}

/* Badge kicker */
.kicker .badge {
  background: linear-gradient(145deg, #1b5f8c 0%, #0c4a6e 100%);
  color: white;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 8px;
}

/* Responsive mobile */
@media (max-width: 640px) {
  .home-hero.pro-card {
    padding: 20px;
    margin: 16px 0;
  }
  
  .hero-title {
    font-size: 1.3rem;
    text-align: center;
  }
  
  .home-grid .pro-card {
    padding: 16px;
  }
  
  .sun-row {
    padding: 8px 12px;
  }
  
  .sun-meta .value {
    font-size: 1.1rem;
  }
}

/* Promo styles */
.promo-mobile {
  display: block;
}

.promo-desktop {
  display: none;
}

@media (min-width: 769px) {
  .promo-mobile {
    display: none;
  }
  .promo-desktop {
    display: block;
  }
}

/* Bouton Prévisions CTA - Styles saisonniers */
  .previsions-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 28px;
    border-radius: 16px;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    position: relative;
    overflow: hidden;
  }
  .previsions-cta-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
  }
  .previsions-cta-btn:hover::before {
    left: 100%;
  }
  .previsions-cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.25);
  }
  .previsions-cta-icon {
    font-size: 24px;
    animation: previsions-icon-bounce 2s ease-in-out infinite;
  }
  @keyframes previsions-icon-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
  }
  .previsions-cta-arrow {
    transition: transform 0.3s ease;
  }
  .previsions-cta-btn:hover .previsions-cta-arrow {
    transform: translateX(4px);
  }
  /* Thème Hiver */
  .previsions-cta-hiver {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 50%, #1e40af 100%);
    color: #fff;
    border: 2px solid rgba(255,255,255,0.2);
  }
  .previsions-cta-hiver:hover {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #1d4ed8 100%);
  }
  /* Thème Printemps */
  .previsions-cta-printemps {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 50%, #15803d 100%);
    color: #fff;
    border: 2px solid rgba(255,255,255,0.2);
  }
  .previsions-cta-printemps:hover {
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 50%, #16a34a 100%);
  }
  /* Thème Été */
  .previsions-cta-ete {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
    color: #fff;
    border: 2px solid rgba(255,255,255,0.2);
  }
  .previsions-cta-ete:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
  }
  /* Thème Automne */
  .previsions-cta-automne {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 50%, #c2410c 100%);
    color: #fff;
    border: 2px solid rgba(255,255,255,0.2);
  }
  .previsions-cta-automne:hover {
    background: linear-gradient(135deg, #fb923c 0%, #f97316 50%, #ea580c 100%);
  }
  @media (max-width: 480px) {
    .previsions-cta-btn {
      padding: 14px 20px;
      font-size: 14px;
      gap: 10px;
    }
    .previsions-cta-icon {
      font-size: 20px;
    }
  }

/* ===== OPTIMISATIONS POUR LA CONVERSION ===== */

/* Hero Section Optimisée */
.hero-optimized {
  background: linear-gradient(135deg, #0c4a6e 0%, #1b5f8c 50%, #0369a1 100%);
  border-radius: 24px;
  padding: 48px 32px;
  margin: 24px 0;
  color: white;
  box-shadow: 0 10px 40px rgba(12, 74, 110, 0.3);
  position: relative;
  overflow: hidden;
}

.hero-optimized::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(30%, -30%);
}

.hero-optimized::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-30%, 30%);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin: 0 auto;
}

.hero-date-box {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 32px;
  display: inline-block;
}

.hero-date-title {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.9;
  margin-bottom: 8px;
}

.hero-date-content {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.hero-date-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-date-icon {
  width: 24px;
  height: 24px;
  opacity: 0.9;
}

.hero-date-text {
  font-size: 1.1rem;
  font-weight: 700;
}

.hero-ephemerides-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 16px;
  background: rgba(251, 191, 36, 0.2);
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 20px;
  color: #fef3c7;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.hero-ephemerides-link:hover {
  background: rgba(251, 191, 36, 0.35);
  border-color: rgba(251, 191, 36, 0.6);
  transform: translateX(4px);
}

.hero-main-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 16px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}

.hero-subtitle {
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  line-height: 1.6;
  margin-bottom: 32px;
  opacity: 0.95;
  font-weight: 400;
}

/* CTAs Primaires Optimisés */
.hero-ctas-primary {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  justify-content: center;
}

.btn-hero-primary {
  background: white;
  color: #0c4a6e;
  padding: 16px 32px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  border: 2px solid white;
}

.btn-hero-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  background: #f0f9ff;
}

.btn-hero-secondary {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  color: white;
  padding: 16px 32px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.btn-hero-secondary:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.5);
}

/* CTAs Secondaires */
.hero-ctas-secondary {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.btn-hero-link {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-hero-link:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

/* Section "Pourquoi Météo Belge" */
.why-section {
  background: linear-gradient(145deg, #f8fafc 0%, #ffffff 100%);
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 48px 32px;
  margin: 32px 0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.why-header {
  text-align: center;
  margin-bottom: 40px;
}

.why-title {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 12px;
}

.why-subtitle {
  font-size: 1.1rem;
  color: #64748b;
  max-width: 700px;
  margin: 0 auto;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  margin-top: 40px;
}

.why-card {
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  padding: 28px;
  text-align: center;
  transition: all 0.3s ease;
}

.why-card:hover {
  border-color: #1b5f8c;
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(27, 95, 140, 0.15);
}

.why-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  background: linear-gradient(145deg, #0c4a6e 0%, #1b5f8c 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.why-icon svg {
  width: 36px;
  height: 36px;
}

.why-card-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 12px;
}

.why-card-text {
  font-size: 1rem;
  color: #64748b;
  line-height: 1.6;
}

.why-stats {
  display: flex;
  justify-content: center;
  gap: 48px;
  margin-top: 48px;
  flex-wrap: wrap;
  padding-top: 32px;
  border-top: 2px solid #e2e8f0;
}

.why-stat {
  text-align: center;
}

.why-stat-number {
  font-size: 2.5rem;
  font-weight: 900;
  background: linear-gradient(135deg, #0c4a6e 0%, #1b5f8c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
  margin-bottom: 8px;
}

.why-stat-label {
  font-size: 0.95rem;
  color: #64748b;
  font-weight: 600;
}

/* Informations du jour - Design amélioré */
.info-jour-section {
  background: linear-gradient(145deg, #fef3c7 0%, #fde68a 100%);
  border: 2px solid #fbbf24;
  border-radius: 20px;
  padding: 32px;
  margin: 24px 0;
  box-shadow: 0 4px 20px rgba(251, 191, 36, 0.2);
}

.info-jour-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: #78350f;
  margin-bottom: 24px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.info-jour-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.info-jour-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 14px;
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease;
}

.info-jour-card:hover {
  background: rgba(255, 255, 255, 0.95);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(251, 191, 36, 0.3);
}

.info-jour-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
}

.info-jour-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #92400e;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.info-jour-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: #78350f;
}

.info-jour-sub {
  font-size: 0.85rem;
  color: #a16207;
  margin-top: 4px;
}

.info-jour-diff {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  margin-top: 8px;
}

.info-jour-diff.positive {
  background: #d1fae5;
  color: #065f46;
}

.info-jour-diff.negative {
  background: #fee2e2;
  color: #991b1b;
}

.info-jour-diff.neutral {
  background: #f1f5f9;
  color: #64748b;
}

.info-jour-link {
  display: inline-block;
  padding: 12px 24px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  font-weight: 700;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.info-jour-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}

/* Vigilance mise en avant */
.vigilance-highlight {
  background: white;
  border-left: 6px solid #30D158;
  border-radius: 14px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
}

.vigilance-highlight:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.12);
  transform: translateX(4px);
}

.vigilance-highlight.jaune {
  border-left-color: #FFD700;
}

.vigilance-highlight.orange {
  border-left-color: #FFA500;
}

.vigilance-highlight.rouge {
  border-left-color: #FF3B30;
}

.vigilance-highlight-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
}

.vigilance-highlight-content {
  flex: 1;
}

.vigilance-highlight-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
}

.vigilance-highlight-text {
  font-size: 1rem;
  color: #64748b;
}

/* Responsive */
@media (max-width: 768px) {
  .hero-optimized {
    padding: 32px 20px;
  }
  
  .hero-date-box {
    padding: 16px 20px;
  }
  
  .hero-main-title {
    font-size: 2rem;
  }
  
  .hero-ctas-primary {
    flex-direction: column;
  }
  
  .btn-hero-primary,
  .btn-hero-secondary {
    width: 100%;
    justify-content: center;
  }
  
  .why-section {
    padding: 32px 20px;
  }
  
  .why-grid {
    grid-template-columns: 1fr;
  }
  
  .why-stats {
    gap: 32px;
  }
  
  .info-jour-section {
    padding: 24px 16px;
  }
  
  .info-jour-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .social-join + section > div { grid-template-columns: 1fr !important; }
}

.links-card{padding:18px}
        .links-card .links-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;justify-content:flex-start;align-self:flex-start}
        @media (min-width: 1000px){
          .links-card .links-grid{
display:grid;
            grid-template-columns: repeat(auto-fill, minmax(160px, max-content));
            grid-auto-rows: minmax(0, auto);
            justify-content:start;
            align-content:start
          }
        }
        .links-card .btn{padding:10px 14px;border-radius:12px}

/* Styles pour le carrousel météo */
.weather-carousel-section {
  padding: 14px 16px;
  margin: 0 auto;
  min-height: 280px; /* Reserve space for weather cards to prevent CLS */
  contain: layout style;
}

.carousel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

.carousel-title {
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: #1e293b;
}

.carousel-title .icon-24 {
  width: 20px;
  height: 20px;
  margin-right: 6px;
}

.carousel-controls {
  display: flex;
  gap: 6px;
}

.btn-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-icon:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.btn-icon svg {
  width: 16px;
  height: 16px;
}

.carousel-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.carousel-container {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 4px 2px;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f1f5f9;
}

.carousel-container::-webkit-scrollbar {
  height: 6px;
}

.carousel-container::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

.carousel-container::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.carousel-container::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.carousel-nav {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.carousel-nav:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.carousel-nav svg {
  width: 16px;
  height: 16px;
}

.weather-card {
  min-width: 200px;
  border-radius: 16px;
  padding: 16px;
  color: white;
  flex-shrink: 0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

.weather-card > * {
  position: relative;
  z-index: 2;
}

.weather-card .weather-animation,
.weather-card .weather-overlay {
  z-index: 0 !important;
}

.weather-card .weather-overlay {
  z-index: 1 !important;
}

.weather-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}

/* ===== FONDS ANIMÉS MÉTÉO - VERSION ULTRA PREMIUM ===== */

/* Container pour les animations */
.weather-card .weather-animation {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 16px;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

/* Overlay sombre GARANTI pour lisibilité */
.weather-card .weather-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.4) 100%);
  border-radius: 16px;
  z-index: 1;
  pointer-events: none;
}

/* ========== CODE 0 : CIEL DÉGAGÉ (JOUR) ========== */
.weather-bg-clear {
  background: linear-gradient(180deg, #1a5276 0%, #2e86de 30%, #54a0ff 60%, #87ceeb 100%) !important;
}
.weather-bg-clear .sun-element {
  position: absolute;
  top: 12%;
  right: 15%;
  width: 50px;
  height: 50px;
  background: radial-gradient(circle, #fff7ae 0%, #ffd32a 40%, #ff9f1a 70%, transparent 100%);
  border-radius: 50%;
  box-shadow: 
    0 0 20px 10px rgba(255, 215, 0, 0.6),
    0 0 40px 20px rgba(255, 180, 0, 0.4),
    0 0 60px 30px rgba(255, 150, 0, 0.2);
  animation: sunRadiate 3s ease-in-out infinite;
}
.weather-bg-clear .sun-rays {
  position: absolute;
  top: 12%;
  right: 15%;
  width: 50px;
  height: 50px;
  animation: sunRaysRotate 20s linear infinite;
}
.weather-bg-clear .sun-rays::before,
.weather-bg-clear .sun-rays::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255,220,100,0.3) 10deg, transparent 20deg, transparent 45deg, rgba(255,220,100,0.3) 55deg, transparent 65deg, transparent 90deg, rgba(255,220,100,0.3) 100deg, transparent 110deg, transparent 135deg, rgba(255,220,100,0.3) 145deg, transparent 155deg, transparent 180deg, rgba(255,220,100,0.3) 190deg, transparent 200deg, transparent 225deg, rgba(255,220,100,0.3) 235deg, transparent 245deg, transparent 270deg, rgba(255,220,100,0.3) 280deg, transparent 290deg, transparent 315deg, rgba(255,220,100,0.3) 325deg, transparent 335deg, transparent 360deg);
  border-radius: 50%;
}
@keyframes sunRadiate {
  0%, 100% { transform: scale(1); box-shadow: 0 0 20px 10px rgba(255, 215, 0, 0.6), 0 0 40px 20px rgba(255, 180, 0, 0.4), 0 0 60px 30px rgba(255, 150, 0, 0.2); }
  50% { transform: scale(1.1); box-shadow: 0 0 30px 15px rgba(255, 215, 0, 0.8), 0 0 50px 25px rgba(255, 180, 0, 0.5), 0 0 80px 40px rgba(255, 150, 0, 0.3); }
}
@keyframes sunRaysRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ========== CODE 0 : CIEL DÉGAGÉ (NUIT) ========== */
.weather-bg-clear-night {
  background: linear-gradient(180deg, #0a0a1a 0%, #0d1b2a 20%, #1b263b 45%, #2d3a4f 70%, #415a77 100%) !important;
}
.weather-bg-clear-night .moon-element {
  position: absolute;
  top: 12%;
  right: 15%;
  width: 45px;
  height: 45px;
  background: radial-gradient(circle at 35% 35%, #fffef0 0%, #ffeaa7 30%, #f9ca24 60%, transparent 100%);
  border-radius: 50%;
  box-shadow: 
    0 0 20px 8px rgba(255, 238, 167, 0.5),
    0 0 40px 16px rgba(249, 202, 36, 0.3),
    0 0 60px 24px rgba(255, 255, 200, 0.15);
  animation: moonGlow 4s ease-in-out infinite;
}
.weather-bg-clear-night .moon-craters {
  position: absolute;
  top: 12%;
  right: 15%;
  width: 45px;
  height: 45px;
}
.weather-bg-clear-night .moon-craters::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: rgba(200, 180, 100, 0.3);
  border-radius: 50%;
  top: 12px;
  left: 10px;
}
.weather-bg-clear-night .moon-craters::after {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  background: rgba(200, 180, 100, 0.25);
  border-radius: 50%;
  top: 25px;
  left: 22px;
}
.weather-bg-clear-night .star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  animation: starTwinkle 2s ease-in-out infinite;
}
@keyframes moonGlow {
  0%, 100% { box-shadow: 0 0 20px 8px rgba(255, 238, 167, 0.5), 0 0 40px 16px rgba(249, 202, 36, 0.3), 0 0 60px 24px rgba(255, 255, 200, 0.15); }
  50% { box-shadow: 0 0 25px 12px rgba(255, 238, 167, 0.6), 0 0 50px 20px rgba(249, 202, 36, 0.4), 0 0 70px 28px rgba(255, 255, 200, 0.2); }
}
@keyframes starTwinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* ========== CODE 1 : GÉNÉRALEMENT DÉGAGÉ (JOUR) ========== */
.weather-bg-mostly-clear {
  background: linear-gradient(180deg, #2980b9 0%, #3498db 40%, #74b9ff 70%, #a8dadc 100%) !important;
}
.weather-bg-mostly-clear .sun-element {
  position: absolute;
  top: 10%;
  right: 18%;
  width: 40px;
  height: 40px;
  background: radial-gradient(circle, #fff7ae 0%, #ffd32a 50%, transparent 100%);
  border-radius: 50%;
  box-shadow: 0 0 30px 15px rgba(255, 215, 0, 0.5), 0 0 50px 25px rgba(255, 180, 0, 0.3);
  animation: sunRadiate 4s ease-in-out infinite;
}
.weather-bg-mostly-clear .cloud {
  position: absolute;
  background: linear-gradient(180deg, #fff 0%, #f0f0f0 100%);
  border-radius: 50px;
  opacity: 0.9;
  animation: cloudFloat 25s linear infinite;
}
.weather-bg-mostly-clear .cloud::before,
.weather-bg-mostly-clear .cloud::after {
  content: '';
  position: absolute;
  background: inherit;
  border-radius: 50%;
}
.weather-bg-mostly-clear .cloud-1 { width: 60px; height: 25px; top: 25%; left: -80px; animation-duration: 30s; }
.weather-bg-mostly-clear .cloud-1::before { width: 30px; height: 30px; top: -15px; left: 10px; }
.weather-bg-mostly-clear .cloud-1::after { width: 25px; height: 25px; top: -10px; left: 35px; }

/* ========== CODE 1 : GÉNÉRALEMENT DÉGAGÉ (NUIT) ========== */
.weather-bg-mostly-clear-night {
  background: linear-gradient(180deg, #0d1117 0%, #161b22 30%, #21262d 55%, #30363d 80%, #4a5568 100%) !important;
}
.weather-bg-mostly-clear-night .moon-element {
  position: absolute;
  top: 10%;
  right: 18%;
  width: 35px;
  height: 35px;
  background: radial-gradient(circle at 35% 35%, #fffef0 0%, #ffeaa7 40%, transparent 100%);
  border-radius: 50%;
  box-shadow: 0 0 20px 10px rgba(255, 238, 167, 0.4), 0 0 40px 20px rgba(249, 202, 36, 0.25);
  animation: moonGlow 4s ease-in-out infinite;
}
.weather-bg-mostly-clear-night .cloud {
  position: absolute;
  background: linear-gradient(180deg, rgba(100, 100, 120, 0.8) 0%, rgba(80, 80, 100, 0.7) 100%);
  border-radius: 50px;
  opacity: 0.7;
  animation: cloudFloat 25s linear infinite;
}
.weather-bg-mostly-clear-night .cloud::before,
.weather-bg-mostly-clear-night .cloud::after {
  content: '';
  position: absolute;
  background: inherit;
  border-radius: 50%;
}
.weather-bg-mostly-clear-night .cloud-1 { width: 60px; height: 25px; top: 25%; left: -80px; animation-duration: 30s; }
.weather-bg-mostly-clear-night .cloud-1::before { width: 30px; height: 30px; top: -15px; left: 10px; }
.weather-bg-mostly-clear-night .cloud-1::after { width: 25px; height: 25px; top: -10px; left: 35px; }
.weather-bg-mostly-clear-night .star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  animation: starTwinkle 2s ease-in-out infinite;
}

/* ========== CODE 2 : PARTIELLEMENT NUAGEUX (JOUR) ========== */
.weather-bg-partly-cloudy {
  background: linear-gradient(180deg, #6a8caf 0%, #8ba8c4 35%, #adc4d9 65%, #c8dae8 100%) !important;
}
.weather-bg-partly-cloudy .sun-element {
  position: absolute;
  top: 12%;
  right: 22%;
  width: 38px;
  height: 38px;
  background: radial-gradient(circle, #fff9c4 0%, #ffd54f 45%, #ffb300 80%, transparent 100%);
  border-radius: 50%;
  box-shadow: 0 0 30px 15px rgba(255, 215, 0, 0.5), 0 0 50px 25px rgba(255, 180, 0, 0.25);
  animation: sunHideBehindClouds 12s ease-in-out infinite;
  z-index: 1;
}
.weather-bg-partly-cloudy .sun-glow {
  position: absolute;
  top: 8%;
  right: 18%;
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, rgba(255,245,157,0.6) 0%, rgba(255,213,79,0.3) 40%, transparent 70%);
  border-radius: 50%;
  animation: sunGlowPulse 12s ease-in-out infinite;
  z-index: 0;
}
.weather-bg-partly-cloudy .cloud {
  position: absolute;
  background: linear-gradient(180deg, #f5f5f5 0%, #e0e0e0 60%, #bdbdbd 100%);
  border-radius: 50px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  animation: cloudFloat 18s linear infinite;
  z-index: 2;
}
.weather-bg-partly-cloudy .cloud::before,
.weather-bg-partly-cloudy .cloud::after {
  content: '';
  position: absolute;
  background: inherit;
  border-radius: 50%;
}
/* Nuage principal qui passe devant le soleil */
.weather-bg-partly-cloudy .cloud-1 { width: 110px; height: 38px; top: 8%; left: -130px; animation-duration: 12s; }
.weather-bg-partly-cloudy .cloud-1::before { width: 55px; height: 55px; top: -28px; left: 20px; }
.weather-bg-partly-cloudy .cloud-1::after { width: 48px; height: 48px; top: -22px; left: 58px; }
/* Autres nuages */
.weather-bg-partly-cloudy .cloud-2 { width: 95px; height: 34px; top: 35%; left: -115px; animation-duration: 16s; animation-delay: -6s; }
.weather-bg-partly-cloudy .cloud-2::before { width: 48px; height: 48px; top: -24px; left: 18px; }
.weather-bg-partly-cloudy .cloud-2::after { width: 42px; height: 42px; top: -18px; left: 50px; }
.weather-bg-partly-cloudy .cloud-3 { width: 85px; height: 30px; top: 60%; left: -105px; animation-duration: 20s; animation-delay: -10s; background: linear-gradient(180deg, #eeeeee 0%, #d5d5d5 60%, #b0b0b0 100%); }
.weather-bg-partly-cloudy .cloud-3::before { width: 42px; height: 42px; top: -21px; left: 15px; }
.weather-bg-partly-cloudy .cloud-3::after { width: 36px; height: 36px; top: -15px; left: 45px; }
.weather-bg-partly-cloudy .cloud-4 { width: 75px; height: 26px; top: 78%; left: -95px; animation-duration: 22s; animation-delay: -15s; background: linear-gradient(180deg, #e8e8e8 0%, #ccc 60%, #a8a8a8 100%); }
.weather-bg-partly-cloudy .cloud-4::before { width: 38px; height: 38px; top: -19px; left: 12px; }
.weather-bg-partly-cloudy .cloud-4::after { width: 32px; height: 32px; top: -14px; left: 40px; }
@keyframes sunHideBehindClouds {
  0%, 100% { opacity: 1; transform: scale(1); }
  25% { opacity: 0.85; }
  40%, 60% { opacity: 0.15; transform: scale(0.95); } /* Soleil caché par le nuage */
  75% { opacity: 0.85; }
}
@keyframes sunGlowPulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  40%, 60% { opacity: 0.1; transform: scale(0.9); }
}

/* ========== CODE 2 : PARTIELLEMENT NUAGEUX (NUIT) ========== */
.weather-bg-partly-cloudy-night {
  background: linear-gradient(180deg, #0d1117 0%, #1a1f2a 30%, #2d3748 55%, #4a5568 80%, #5a6a7a 100%) !important;
}
.weather-bg-partly-cloudy-night .moon-element {
  position: absolute;
  top: 12%;
  right: 22%;
  width: 32px;
  height: 32px;
  background: radial-gradient(circle at 35% 35%, #fffef0 0%, #ffeaa7 45%, #f9ca24 80%, transparent 100%);
  border-radius: 50%;
  box-shadow: 0 0 25px 12px rgba(255, 238, 167, 0.4), 0 0 45px 20px rgba(249, 202, 36, 0.2);
  animation: moonHideBehindClouds 12s ease-in-out infinite;
  z-index: 1;
}
.weather-bg-partly-cloudy-night .moon-glow {
  position: absolute;
  top: 8%;
  right: 18%;
  width: 55px;
  height: 55px;
  background: radial-gradient(circle, rgba(255,250,200,0.4) 0%, rgba(255,235,150,0.2) 40%, transparent 70%);
  border-radius: 50%;
  animation: moonGlowPulse 12s ease-in-out infinite;
  z-index: 0;
}
.weather-bg-partly-cloudy-night .cloud {
  position: absolute;
  background: linear-gradient(180deg, rgba(60, 70, 90, 0.9) 0%, rgba(45, 55, 72, 0.85) 60%, rgba(35, 45, 60, 0.8) 100%);
  border-radius: 50px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.3);
  animation: cloudFloat 18s linear infinite;
  z-index: 2;
}
.weather-bg-partly-cloudy-night .cloud::before,
.weather-bg-partly-cloudy-night .cloud::after {
  content: '';
  position: absolute;
  background: inherit;
  border-radius: 50%;
}
.weather-bg-partly-cloudy-night .cloud-1 { width: 110px; height: 38px; top: 8%; left: -130px; animation-duration: 12s; }
.weather-bg-partly-cloudy-night .cloud-1::before { width: 55px; height: 55px; top: -28px; left: 20px; }
.weather-bg-partly-cloudy-night .cloud-1::after { width: 48px; height: 48px; top: -22px; left: 58px; }
.weather-bg-partly-cloudy-night .cloud-2 { width: 95px; height: 34px; top: 35%; left: -115px; animation-duration: 16s; animation-delay: -6s; }
.weather-bg-partly-cloudy-night .cloud-2::before { width: 48px; height: 48px; top: -24px; left: 18px; }
.weather-bg-partly-cloudy-night .cloud-2::after { width: 42px; height: 42px; top: -18px; left: 50px; }
.weather-bg-partly-cloudy-night .cloud-3 { width: 85px; height: 30px; top: 60%; left: -105px; animation-duration: 20s; animation-delay: -10s; }
.weather-bg-partly-cloudy-night .cloud-3::before { width: 42px; height: 42px; top: -21px; left: 15px; }
.weather-bg-partly-cloudy-night .cloud-3::after { width: 36px; height: 36px; top: -15px; left: 45px; }
.weather-bg-partly-cloudy-night .cloud-4 { width: 75px; height: 26px; top: 78%; left: -95px; animation-duration: 22s; animation-delay: -15s; }
.weather-bg-partly-cloudy-night .cloud-4::before { width: 38px; height: 38px; top: -19px; left: 12px; }
.weather-bg-partly-cloudy-night .cloud-4::after { width: 32px; height: 32px; top: -14px; left: 40px; }
.weather-bg-partly-cloudy-night .star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  animation: starTwinkle 2s ease-in-out infinite;
}
@keyframes moonHideBehindClouds {
  0%, 100% { opacity: 1; transform: scale(1); }
  25% { opacity: 0.85; }
  40%, 60% { opacity: 0.2; transform: scale(0.95); }
  75% { opacity: 0.85; }
}
@keyframes moonGlowPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  40%, 60% { opacity: 0.1; transform: scale(0.9); }
}

/* ========== CODE 3 : COUVERT (JOUR) ========== */
.weather-bg-overcast {
  background: linear-gradient(180deg, #4a5568 0%, #636e72 30%, #7f8c8d 60%, #95a5a6 100%) !important;
}
.weather-bg-overcast .cloud {
  position: absolute;
  background: linear-gradient(180deg, #a0a0a0 0%, #888 100%);
  border-radius: 50px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.2);
  animation: cloudFloat 30s linear infinite;
}
.weather-bg-overcast .cloud::before,
.weather-bg-overcast .cloud::after {
  content: '';
  position: absolute;
  background: inherit;
  border-radius: 50%;
}
.weather-bg-overcast .cloud-1 { width: 100px; height: 35px; top: 15%; left: -120px; animation-duration: 35s; }
.weather-bg-overcast .cloud-1::before { width: 50px; height: 50px; top: -25px; left: 20px; }
.weather-bg-overcast .cloud-1::after { width: 45px; height: 45px; top: -20px; left: 55px; }
.weather-bg-overcast .cloud-2 { width: 90px; height: 32px; top: 45%; left: -110px; animation-duration: 28s; animation-delay: -12s; background: linear-gradient(180deg, #909090 0%, #787878 100%); }
.weather-bg-overcast .cloud-2::before { width: 45px; height: 45px; top: -22px; left: 18px; }
.weather-bg-overcast .cloud-2::after { width: 40px; height: 40px; top: -18px; left: 50px; }
.weather-bg-overcast .cloud-3 { width: 85px; height: 30px; top: 70%; left: -100px; animation-duration: 32s; animation-delay: -20s; background: linear-gradient(180deg, #858585 0%, #6d6d6d 100%); }
.weather-bg-overcast .cloud-3::before { width: 42px; height: 42px; top: -20px; left: 15px; }
.weather-bg-overcast .cloud-3::after { width: 38px; height: 38px; top: -16px; left: 45px; }

/* ========== CODE 3 : COUVERT (NUIT) ========== */
.weather-bg-overcast-night {
  background: linear-gradient(180deg, #1a1a2e 0%, #2d2d44 30%, #3d3d5c 60%, #4a4a6a 100%) !important;
}
.weather-bg-overcast-night .cloud {
  position: absolute;
  background: linear-gradient(180deg, rgba(70, 70, 90, 0.95) 0%, rgba(50, 50, 70, 0.9) 100%);
  border-radius: 50px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.4);
  animation: cloudFloat 30s linear infinite;
}
.weather-bg-overcast-night .cloud::before,
.weather-bg-overcast-night .cloud::after {
  content: '';
  position: absolute;
  background: inherit;
  border-radius: 50%;
}
.weather-bg-overcast-night .cloud-1 { width: 100px; height: 35px; top: 15%; left: -120px; animation-duration: 35s; }
.weather-bg-overcast-night .cloud-1::before { width: 50px; height: 50px; top: -25px; left: 20px; }
.weather-bg-overcast-night .cloud-1::after { width: 45px; height: 45px; top: -20px; left: 55px; }
.weather-bg-overcast-night .cloud-2 { width: 90px; height: 32px; top: 45%; left: -110px; animation-duration: 28s; animation-delay: -12s; }
.weather-bg-overcast-night .cloud-2::before { width: 45px; height: 45px; top: -22px; left: 18px; }
.weather-bg-overcast-night .cloud-2::after { width: 40px; height: 40px; top: -18px; left: 50px; }
.weather-bg-overcast-night .cloud-3 { width: 85px; height: 30px; top: 70%; left: -100px; animation-duration: 32s; animation-delay: -20s; }
.weather-bg-overcast-night .cloud-3::before { width: 42px; height: 42px; top: -20px; left: 15px; }
.weather-bg-overcast-night .cloud-3::after { width: 38px; height: 38px; top: -16px; left: 45px; }

/* ========== CODE 4 : TRÈS NUAGEUX (JOUR) ========== */
.weather-bg-very-cloudy {
  background: linear-gradient(180deg, #4a5568 0%, #5a6a7a 30%, #6b7b8a 60%, #7d8d9c 100%) !important;
}
/* Éclaircie rare et brève */
.weather-bg-very-cloudy .sun-peek {
  position: absolute;
  top: 18%;
  right: 30%;
  width: 25px;
  height: 25px;
  background: radial-gradient(circle, rgba(255,250,200,0.9) 0%, rgba(255,220,100,0.5) 40%, transparent 70%);
  border-radius: 50%;
  box-shadow: 0 0 20px 10px rgba(255, 220, 100, 0.3);
  animation: rareSunPeek 20s ease-in-out infinite;
  z-index: 1;
}
.weather-bg-very-cloudy .light-break {
  position: absolute;
  top: 15%;
  right: 28%;
  width: 50px;
  height: 80px;
  background: linear-gradient(180deg, rgba(255,250,200,0.5) 0%, rgba(255,245,180,0.2) 50%, transparent 100%);
  filter: blur(15px);
  animation: lightBreakRare 20s ease-in-out infinite;
  z-index: 0;
}
/* Masse nuageuse dense */
.weather-bg-very-cloudy .cloud {
  position: absolute;
  background: linear-gradient(180deg, #7a8a9a 0%, #6a7a8a 50%, #5a6a7a 100%);
  border-radius: 50px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
  animation: cloudFloat 25s linear infinite;
  z-index: 2;
}
.weather-bg-very-cloudy .cloud::before,
.weather-bg-very-cloudy .cloud::after {
  content: '';
  position: absolute;
  background: inherit;
  border-radius: 50%;
}
/* Couche de nuages dense - premier plan */
.weather-bg-very-cloudy .cloud-1 { width: 120px; height: 42px; top: 5%; left: -140px; animation-duration: 28s; z-index: 4; }
.weather-bg-very-cloudy .cloud-1::before { width: 60px; height: 60px; top: -30px; left: 25px; }
.weather-bg-very-cloudy .cloud-1::after { width: 52px; height: 52px; top: -24px; left: 65px; }
.weather-bg-very-cloudy .cloud-2 { width: 110px; height: 38px; top: 25%; left: -130px; animation-duration: 24s; animation-delay: -8s; background: linear-gradient(180deg, #6d7d8d 0%, #5d6d7d 50%, #4d5d6d 100%); z-index: 3; }
.weather-bg-very-cloudy .cloud-2::before { width: 55px; height: 55px; top: -28px; left: 22px; }
.weather-bg-very-cloudy .cloud-2::after { width: 48px; height: 48px; top: -22px; left: 60px; }
.weather-bg-very-cloudy .cloud-3 { width: 100px; height: 35px; top: 48%; left: -120px; animation-duration: 30s; animation-delay: -16s; background: linear-gradient(180deg, #606d7a 0%, #505d6a 50%, #404d5a 100%); z-index: 3; }
.weather-bg-very-cloudy .cloud-3::before { width: 50px; height: 50px; top: -25px; left: 20px; }
.weather-bg-very-cloudy .cloud-3::after { width: 44px; height: 44px; top: -20px; left: 55px; }
.weather-bg-very-cloudy .cloud-4 { width: 95px; height: 33px; top: 68%; left: -115px; animation-duration: 26s; animation-delay: -20s; background: linear-gradient(180deg, #556573 0%, #455563 50%, #354553 100%); z-index: 2; }
.weather-bg-very-cloudy .cloud-4::before { width: 48px; height: 48px; top: -24px; left: 18px; }
.weather-bg-very-cloudy .cloud-4::after { width: 42px; height: 42px; top: -18px; left: 52px; }
.weather-bg-very-cloudy .cloud-5 { width: 85px; height: 30px; top: 85%; left: -105px; animation-duration: 32s; animation-delay: -24s; background: linear-gradient(180deg, #4a5866 0%, #3a4856 50%, #2a3846 100%); z-index: 2; }
.weather-bg-very-cloudy .cloud-5::before { width: 42px; height: 42px; top: -21px; left: 15px; }
.weather-bg-very-cloudy .cloud-5::after { width: 36px; height: 36px; top: -15px; left: 46px; }
@keyframes rareSunPeek {
  0%, 100% { opacity: 0; transform: scale(0.8); }
  /* Court moment d'éclaircie */
  45% { opacity: 0; }
  50% { opacity: 0.8; transform: scale(1.1); }
  55% { opacity: 0.6; }
  60% { opacity: 0; transform: scale(0.8); }
}
@keyframes lightBreakRare {
  0%, 100% { opacity: 0; }
  45% { opacity: 0; }
  50% { opacity: 0.6; }
  55% { opacity: 0.4; }
  60% { opacity: 0; }
}

/* ========== CODE 4 : TRÈS NUAGEUX (NUIT) ========== */
.weather-bg-very-cloudy-night {
  background: linear-gradient(180deg, #0d1117 0%, #1a1f2a 30%, #252d3a 60%, #303a48 100%) !important;
}
.weather-bg-very-cloudy-night .moon-peek {
  position: absolute;
  top: 18%;
  right: 30%;
  width: 22px;
  height: 22px;
  background: radial-gradient(circle, rgba(255,250,220,0.7) 0%, rgba(255,235,150,0.3) 40%, transparent 70%);
  border-radius: 50%;
  box-shadow: 0 0 15px 8px rgba(255, 235, 150, 0.2);
  animation: rareMoonPeek 20s ease-in-out infinite;
  z-index: 1;
}
.weather-bg-very-cloudy-night .light-break {
  position: absolute;
  top: 15%;
  right: 28%;
  width: 45px;
  height: 70px;
  background: linear-gradient(180deg, rgba(200,210,230,0.3) 0%, rgba(180,190,210,0.15) 50%, transparent 100%);
  filter: blur(12px);
  animation: lightBreakRare 20s ease-in-out infinite;
  z-index: 0;
}
.weather-bg-very-cloudy-night .cloud {
  position: absolute;
  background: linear-gradient(180deg, rgba(45, 55, 70, 0.95) 0%, rgba(35, 45, 60, 0.9) 50%, rgba(25, 35, 50, 0.85) 100%);
  border-radius: 50px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  animation: cloudFloat 25s linear infinite;
  z-index: 2;
}
.weather-bg-very-cloudy-night .cloud::before,
.weather-bg-very-cloudy-night .cloud::after {
  content: '';
  position: absolute;
  background: inherit;
  border-radius: 50%;
}
.weather-bg-very-cloudy-night .cloud-1 { width: 120px; height: 42px; top: 5%; left: -140px; animation-duration: 28s; z-index: 4; }
.weather-bg-very-cloudy-night .cloud-1::before { width: 60px; height: 60px; top: -30px; left: 25px; }
.weather-bg-very-cloudy-night .cloud-1::after { width: 52px; height: 52px; top: -24px; left: 65px; }
.weather-bg-very-cloudy-night .cloud-2 { width: 110px; height: 38px; top: 25%; left: -130px; animation-duration: 24s; animation-delay: -8s; z-index: 3; }
.weather-bg-very-cloudy-night .cloud-2::before { width: 55px; height: 55px; top: -28px; left: 22px; }
.weather-bg-very-cloudy-night .cloud-2::after { width: 48px; height: 48px; top: -22px; left: 60px; }
.weather-bg-very-cloudy-night .cloud-3 { width: 100px; height: 35px; top: 48%; left: -120px; animation-duration: 30s; animation-delay: -16s; z-index: 3; }
.weather-bg-very-cloudy-night .cloud-3::before { width: 50px; height: 50px; top: -25px; left: 20px; }
.weather-bg-very-cloudy-night .cloud-3::after { width: 44px; height: 44px; top: -20px; left: 55px; }
.weather-bg-very-cloudy-night .cloud-4 { width: 95px; height: 33px; top: 68%; left: -115px; animation-duration: 26s; animation-delay: -20s; z-index: 2; }
.weather-bg-very-cloudy-night .cloud-4::before { width: 48px; height: 48px; top: -24px; left: 18px; }
.weather-bg-very-cloudy-night .cloud-4::after { width: 42px; height: 42px; top: -18px; left: 52px; }
.weather-bg-very-cloudy-night .cloud-5 { width: 85px; height: 30px; top: 85%; left: -105px; animation-duration: 32s; animation-delay: -24s; z-index: 2; }
.weather-bg-very-cloudy-night .cloud-5::before { width: 42px; height: 42px; top: -21px; left: 15px; }
.weather-bg-very-cloudy-night .cloud-5::after { width: 36px; height: 36px; top: -15px; left: 46px; }
@keyframes rareMoonPeek {
  0%, 100% { opacity: 0; transform: scale(0.8); }
  45% { opacity: 0; }
  50% { opacity: 0.7; transform: scale(1.1); }
  55% { opacity: 0.5; }
  60% { opacity: 0; transform: scale(0.8); }
}

/* ========== CODE 5 : CIEL VOILÉ (JOUR) ========== */
.weather-bg-veiled {
  background: linear-gradient(180deg, #7fb3d5 0%, #aed6f1 40%, #d4e6f1 70%, #ebf5fb 100%) !important;
}
.weather-bg-veiled .veil {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.2) 100%);
  animation: veilPulse 6s ease-in-out infinite;
}
.weather-bg-veiled .sun-diffuse {
  position: absolute;
  top: 15%;
  right: 20%;
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(255,255,220,0.5) 40%, transparent 70%);
  border-radius: 50%;
  filter: blur(10px);
  animation: diffuseSunPulse 5s ease-in-out infinite;
}
@keyframes veilPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.8; }
}
@keyframes diffuseSunPulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.15); opacity: 0.9; }
}

/* ========== CODE 5 : CIEL VOILÉ (NUIT) ========== */
.weather-bg-veiled-night {
  background: linear-gradient(180deg, #0d1117 0%, #1a202c 30%, #2d3748 55%, #4a5568 80%, #5a6577 100%) !important;
}
.weather-bg-veiled-night .veil {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(100,110,130,0.2) 0%, rgba(120,130,150,0.35) 50%, rgba(100,110,130,0.15) 100%);
  animation: veilPulse 6s ease-in-out infinite;
}
.weather-bg-veiled-night .moon-diffuse {
  position: absolute;
  top: 15%;
  right: 20%;
  width: 55px;
  height: 55px;
  background: radial-gradient(circle, rgba(255,250,220,0.6) 0%, rgba(255,240,180,0.3) 40%, transparent 70%);
  border-radius: 50%;
  filter: blur(8px);
  animation: diffuseMoonPulse 5s ease-in-out infinite;
}
.weather-bg-veiled-night .star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  opacity: 0.4;
  animation: starTwinkle 3s ease-in-out infinite;
}
@keyframes diffuseMoonPulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.12); opacity: 0.7; }
}

/* ========== CODE 45 : BROUILLARD (JOUR) - NUAGES VISIBLES ========== */
.weather-bg-fog {
  background: linear-gradient(180deg, #9ba5b0 0%, #b8c1ca 40%, #d0d7de 70%, #e3e8ec 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}
.weather-bg-fog .fog-layer {
  position: absolute !important;
  pointer-events: none !important;
}
/* Gros nuages bien visibles */
.weather-bg-fog .fog-layer-1 {
  top: 5%;
  left: 10%;
  width: 350px;
  height: 200px;
  background: radial-gradient(ellipse at center, 
    rgba(255,255,255,0.95) 0%, 
    rgba(255,255,255,0.85) 20%,
    rgba(248,250,252,0.7) 40%, 
    rgba(240,244,248,0.4) 60%, 
    rgba(230,236,242,0.15) 80%,
    transparent 100%) !important;
  border-radius: 60% 40% 50% 50% / 60% 50% 50% 40%;
  box-shadow: 
    inset -20px -20px 40px rgba(200,210,220,0.4),
    0 10px 30px rgba(0,0,0,0.1);
  filter: blur(8px);
  animation: fogCloudDrift1 30s ease-in-out infinite !important;
  z-index: 5 !important;
}
.weather-bg-fog .fog-layer-2 {
  top: 15%;
  right: 15%;
  width: 400px;
  height: 220px;
  background: radial-gradient(ellipse at center, 
    rgba(255,255,255,0.9) 0%, 
    rgba(252,254,255,0.8) 20%,
    rgba(245,248,252,0.65) 40%, 
    rgba(235,240,246,0.38) 60%, 
    rgba(225,232,240,0.12) 80%,
    transparent 100%) !important;
  border-radius: 50% 60% 40% 50% / 50% 60% 40% 50%;
  box-shadow: 
    inset -25px -25px 45px rgba(200,210,220,0.35),
    0 12px 35px rgba(0,0,0,0.08);
  filter: blur(8px);
  animation: fogCloudDrift2 35s ease-in-out infinite !important;
  z-index: 4 !important;
}
.weather-bg-fog .fog-layer-3 {
  top: 40%;
  left: 25%;
  width: 380px;
  height: 210px;
  background: radial-gradient(ellipse at center, 
    rgba(255,255,255,0.88) 0%, 
    rgba(250,252,254,0.78) 20%,
    rgba(242,246,250,0.6) 40%, 
    rgba(232,238,244,0.35) 60%, 
    rgba(220,228,236,0.1) 80%,
    transparent 100%) !important;
  border-radius: 55% 45% 60% 40% / 45% 55% 45% 55%;
  box-shadow: 
    inset -22px -22px 42px rgba(200,210,220,0.38),
    0 11px 32px rgba(0,0,0,0.09);
  filter: blur(8px);
  animation: fogCloudDrift3 32s ease-in-out infinite !important;
  z-index: 3 !important;
}
.weather-bg-fog .fog-layer-4 {
  bottom: 20%;
  right: 20%;
  width: 360px;
  height: 195px;
  background: radial-gradient(ellipse at center, 
    rgba(255,255,255,0.86) 0%, 
    rgba(248,251,254,0.75) 20%,
    rgba(240,245,250,0.58) 40%, 
    rgba(228,235,242,0.32) 60%, 
    rgba(215,225,235,0.08) 80%,
    transparent 100%) !important;
  border-radius: 45% 55% 50% 50% / 55% 45% 55% 45%;
  box-shadow: 
    inset -20px -20px 38px rgba(200,210,220,0.4),
    0 10px 30px rgba(0,0,0,0.1);
  filter: blur(8px);
  animation: fogCloudDrift4 28s ease-in-out infinite !important;
  z-index: 2 !important;
}
.weather-bg-fog .fog-layer-5 {
  top: 55%;
  left: 5%;
  width: 370px;
  height: 205px;
  background: radial-gradient(ellipse at center, 
    rgba(255,255,255,0.84) 0%, 
    rgba(246,250,253,0.72) 20%,
    rgba(238,244,249,0.55) 40%, 
    rgba(225,233,240,0.3) 60%, 
    rgba(210,222,232,0.07) 80%,
    transparent 100%) !important;
  border-radius: 50% 50% 60% 40% / 60% 40% 50% 50%;
  box-shadow: 
    inset -23px -23px 40px rgba(200,210,220,0.37),
    0 11px 33px rgba(0,0,0,0.09);
  filter: blur(8px);
  animation: fogCloudDrift5 36s ease-in-out infinite !important;
  z-index: 1 !important;
}
.weather-bg-fog .fog-particle {
  position: absolute !important;
  width: 180px !important;
  height: 120px !important;
  background: radial-gradient(ellipse at center, 
    rgba(255,255,255,0.75) 0%, 
    rgba(248,252,255,0.5) 30%,
    rgba(235,242,248,0.25) 60%, 
    transparent 100%) !important;
  border-radius: 50%;
  filter: blur(12px);
  animation: fogParticleDrift 20s ease-in-out infinite !important;
  pointer-events: none !important;
}
.weather-bg-fog .fog-wisp {
  position: absolute !important;
  width: 320px !important;
  height: 180px !important;
  background: radial-gradient(ellipse at center, 
    rgba(255,255,255,0.8) 0%, 
    rgba(250,253,255,0.6) 25%,
    rgba(242,248,252,0.35) 50%, 
    rgba(230,238,245,0.15) 75%,
    transparent 100%) !important;
  border-radius: 50%;
  box-shadow: inset -15px -15px 30px rgba(200,210,220,0.3);
  filter: blur(10px);
  animation: fogWispFloat 25s ease-in-out infinite !important;
  pointer-events: none !important;
}
@keyframes fogCloudDrift1 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-100px, -70px); }
}
@keyframes fogCloudDrift2 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(120px, 80px); }
}
@keyframes fogCloudDrift3 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-80px, 90px); }
}
@keyframes fogCloudDrift4 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(110px, -60px); }
}
@keyframes fogCloudDrift5 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-90px, 75px); }
}
@keyframes fogParticleDrift {
  0%, 100% { opacity: 0.6; transform: translate(0, 0) scale(1); }
  50% { opacity: 0.85; transform: translate(-70px, -90px) scale(1.15); }
}
@keyframes fogWispFloat {
  0%, 100% { opacity: 0.7; transform: translate(0, 0) rotate(0deg); }
  33% { opacity: 0.9; transform: translate(-80px, -100px) rotate(5deg); }
  66% { opacity: 0.8; transform: translate(100px, 60px) rotate(-5deg); }
}

/* ========== CODE 45 : BROUILLARD (NUIT) - NUAGES VISIBLES ========== */
.weather-bg-fog-night {
  background: linear-gradient(180deg, #2a323a 0%, #3a4248 40%, #4a5258 70%, #5a6268 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}
.weather-bg-fog-night .fog-layer {
  position: absolute !important;
  pointer-events: none !important;
}
/* Gros nuages sombres bien visibles */
.weather-bg-fog-night .fog-layer-1 {
  top: 8%;
  left: 12%;
  width: 340px;
  height: 190px;
  background: radial-gradient(ellipse at center, 
    rgba(130,140,155,0.9) 0%, 
    rgba(120,130,145,0.75) 20%,
    rgba(110,122,138,0.55) 40%, 
    rgba(95,108,125,0.32) 60%, 
    rgba(80,92,110,0.12) 80%,
    transparent 100%) !important;
  border-radius: 58% 42% 48% 52% / 58% 48% 52% 42%;
  box-shadow: 
    inset -18px -18px 35px rgba(60,70,85,0.5),
    0 8px 25px rgba(0,0,0,0.25);
  filter: blur(8px);
  animation: fogCloudDrift1 30s ease-in-out infinite !important;
  z-index: 5 !important;
}
.weather-bg-fog-night .fog-layer-2 {
  top: 18%;
  right: 18%;
  width: 390px;
  height: 210px;
  background: radial-gradient(ellipse at center, 
    rgba(125,135,150,0.85) 0%, 
    rgba(115,125,140,0.7) 20%,
    rgba(105,117,133,0.5) 40%, 
    rgba(90,103,120,0.28) 60%, 
    rgba(75,88,105,0.1) 80%,
    transparent 100%) !important;
  border-radius: 48% 58% 38% 52% / 52% 58% 42% 48%;
  box-shadow: 
    inset -20px -20px 38px rgba(60,70,85,0.48),
    0 9px 28px rgba(0,0,0,0.22);
  filter: blur(8px);
  animation: fogCloudDrift2 35s ease-in-out infinite !important;
  z-index: 4 !important;
}
.weather-bg-fog-night .fog-layer-3 {
  top: 42%;
  left: 28%;
  width: 370px;
  height: 200px;
  background: radial-gradient(ellipse at center, 
    rgba(122,132,147,0.82) 0%, 
    rgba(112,122,137,0.68) 20%,
    rgba(102,114,130,0.48) 40%, 
    rgba(87,100,117,0.26) 60%, 
    rgba(72,85,102,0.08) 80%,
    transparent 100%) !important;
  border-radius: 53% 47% 58% 42% / 47% 53% 47% 53%;
  box-shadow: 
    inset -19px -19px 36px rgba(60,70,85,0.49),
    0 8px 26px rgba(0,0,0,0.23);
  filter: blur(8px);
  animation: fogCloudDrift3 32s ease-in-out infinite !important;
  z-index: 3 !important;
}
.weather-bg-fog-night .fog-layer-4 {
  bottom: 22%;
  right: 22%;
  width: 350px;
  height: 185px;
  background: radial-gradient(ellipse at center, 
    rgba(120,130,145,0.8) 0%, 
    rgba(110,120,135,0.65) 20%,
    rgba(100,112,128,0.45) 40%, 
    rgba(85,98,115,0.24) 60%, 
    rgba(70,83,100,0.07) 80%,
    transparent 100%) !important;
  border-radius: 47% 53% 52% 48% / 53% 47% 53% 47%;
  box-shadow: 
    inset -18px -18px 34px rgba(60,70,85,0.5),
    0 8px 25px rgba(0,0,0,0.24);
  filter: blur(8px);
  animation: fogCloudDrift4 28s ease-in-out infinite !important;
  z-index: 2 !important;
}
.weather-bg-fog-night .fog-layer-5 {
  top: 58%;
  left: 8%;
  width: 360px;
  height: 195px;
  background: radial-gradient(ellipse at center, 
    rgba(118,128,143,0.78) 0%, 
    rgba(108,118,133,0.62) 20%,
    rgba(98,110,126,0.42) 40%, 
    rgba(83,96,112,0.22) 60%, 
    rgba(68,81,97,0.06) 80%,
    transparent 100%) !important;
  border-radius: 52% 48% 58% 42% / 58% 42% 52% 48%;
  box-shadow: 
    inset -19px -19px 35px rgba(60,70,85,0.48),
    0 8px 26px rgba(0,0,0,0.23);
  filter: blur(8px);
  animation: fogCloudDrift5 36s ease-in-out infinite !important;
  z-index: 1 !important;
}
.weather-bg-fog-night .fog-particle {
  position: absolute !important;
  width: 170px !important;
  height: 110px !important;
  background: radial-gradient(ellipse at center, 
    rgba(115,128,145,0.7) 0%, 
    rgba(100,115,130,0.45) 30%,
    rgba(85,100,115,0.2) 60%, 
    transparent 100%) !important;
  border-radius: 50%;
  filter: blur(12px);
  animation: fogParticleDrift 20s ease-in-out infinite !important;
  pointer-events: none !important;
}
.weather-bg-fog-night .fog-wisp {
  position: absolute !important;
  width: 310px !important;
  height: 170px !important;
  background: radial-gradient(ellipse at center, 
    rgba(120,133,150,0.75) 0%, 
    rgba(105,120,135,0.55) 25%,
    rgba(90,105,120,0.3) 50%, 
    rgba(75,90,105,0.12) 75%,
    transparent 100%) !important;
  border-radius: 50%;
  box-shadow: inset -13px -13px 25px rgba(50,60,75,0.4);
  filter: blur(10px);
  animation: fogWispFloat 25s ease-in-out infinite !important;
  pointer-events: none !important;
}

/* ========== CODE 48 : BROUILLARD GIVRANT - NUAGES GLACÉS VISIBLES ========== */
.weather-bg-frost {
  background: linear-gradient(180deg, #d5e8f5 0%, #e5f0f8 40%, #f0f6fc 70%, #f8fbff 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}
.weather-bg-frost .fog-layer {
  position: absolute !important;
  pointer-events: none !important;
}
/* Gros nuages givrants blancs bien visibles */
.weather-bg-frost .fog-layer-1 {
  top: 10%;
  left: 15%;
  width: 360px;
  height: 205px;
  background: radial-gradient(ellipse at center, 
    rgba(255,255,255,0.98) 0%, 
    rgba(250,254,255,0.88) 20%,
    rgba(242,250,255,0.7) 40%, 
    rgba(230,242,252,0.45) 60%, 
    rgba(215,232,248,0.18) 80%,
    transparent 100%) !important;
  border-radius: 60% 40% 55% 45% / 58% 52% 48% 42%;
  box-shadow: 
    inset -22px -22px 45px rgba(180,210,235,0.45),
    0 12px 35px rgba(173,216,230,0.4),
    0 0 60px 10px rgba(200,230,255,0.3);
  filter: blur(6px);
  animation: fogCloudDrift1 25s ease-in-out infinite !important;
  z-index: 5 !important;
}
.weather-bg-frost .fog-layer-2 {
  top: 20%;
  right: 12%;
  width: 400px;
  height: 225px;
  background: radial-gradient(ellipse at center, 
    rgba(255,255,255,0.95) 0%, 
    rgba(248,252,255,0.85) 20%,
    rgba(240,248,254,0.68) 40%, 
    rgba(225,240,250,0.42) 60%, 
    rgba(210,228,245,0.15) 80%,
    transparent 100%) !important;
  border-radius: 52% 58% 42% 48% / 48% 62% 38% 52%;
  box-shadow: 
    inset -24px -24px 48px rgba(180,210,235,0.42),
    0 13px 38px rgba(173,216,230,0.38),
    0 0 65px 12px rgba(200,230,255,0.28);
  filter: blur(6px);
  animation: fogCloudDrift2 30s ease-in-out infinite !important;
  z-index: 4 !important;
}
.weather-bg-frost .fog-layer-3 {
  top: 45%;
  left: 20%;
  width: 380px;
  height: 215px;
  background: radial-gradient(ellipse at center, 
    rgba(255,255,255,0.93) 0%, 
    rgba(246,251,255,0.82) 20%,
    rgba(238,246,252,0.65) 40%, 
    rgba(220,238,248,0.38) 60%, 
    rgba(205,225,242,0.12) 80%,
    transparent 100%) !important;
  border-radius: 56% 44% 60% 40% / 44% 56% 44% 56%;
  box-shadow: 
    inset -23px -23px 46px rgba(180,210,235,0.44),
    0 12px 36px rgba(173,216,230,0.39),
    0 0 62px 11px rgba(200,230,255,0.29);
  filter: blur(6px);
  animation: fogCloudDrift3 28s ease-in-out infinite !important;
  z-index: 3 !important;
}
.weather-bg-frost .fog-layer-4 {
  bottom: 18%;
  right: 25%;
  width: 370px;
  height: 200px;
  background: radial-gradient(ellipse at center, 
    rgba(255,255,255,0.9) 0%, 
    rgba(244,250,255,0.8) 20%,
    rgba(235,245,252,0.62) 40%, 
    rgba(218,235,246,0.35) 60%, 
    rgba(200,222,240,0.1) 80%,
    transparent 100%) !important;
  border-radius: 48% 52% 50% 50% / 52% 48% 52% 48%;
  box-shadow: 
    inset -22px -22px 44px rgba(180,210,235,0.43),
    0 12px 35px rgba(173,216,230,0.4),
    0 0 60px 10px rgba(200,230,255,0.3);
  filter: blur(6px);
  animation: fogCloudDrift4 26s ease-in-out infinite !important;
  z-index: 2 !important;
}
.weather-bg-frost .frost-particle {
  position: absolute !important;
  width: 16px !important;
  height: 16px !important;
  background: radial-gradient(circle, 
    rgba(255,255,255,1) 0%, 
    rgba(240,250,255,1) 40%,
    rgba(220,240,255,0.8) 70%,
    transparent 100%) !important;
  border-radius: 50% !important;
  box-shadow: 
    0 0 15px 6px rgba(173,216,230,1), 
    0 0 30px 12px rgba(200,230,255,0.8),
    0 0 45px 18px rgba(220,245,255,0.5) !important;
  animation: frostSparkle 4s ease-in-out infinite !important;
  pointer-events: none !important;
}
.weather-bg-frost .ice-crystal {
  position: absolute !important;
  width: 24px !important;
  height: 24px !important;
  background: linear-gradient(135deg, 
    rgba(220,240,255,1) 0%, 
    rgba(255,255,255,1) 25%, 
    rgba(240,250,255,1) 50%,
    rgba(255,255,255,1) 75%, 
    rgba(230,245,255,1) 100%) !important;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%) !important;
  box-shadow: 
    0 0 18px 8px rgba(173,216,230,1),
    0 0 36px 16px rgba(200,230,255,0.85),
    0 0 54px 24px rgba(220,245,255,0.6) !important;
  animation: iceCrystalSpin 7s linear infinite !important;
  pointer-events: none !important;
}
.weather-bg-frost .ice-shard {
  position: absolute !important;
  width: 8px !important;
  height: 22px !important;
  background: linear-gradient(180deg, 
    rgba(230,245,255,1) 0%, 
    rgba(255,255,255,1) 40%,
    rgba(240,250,255,1) 60%,
    rgba(255,255,255,1) 100%) !important;
  border-radius: 50% 50% 4px 4px !important;
  box-shadow: 
    0 0 12px 5px rgba(173,216,230,0.95),
    0 0 24px 10px rgba(200,230,255,0.7) !important;
  animation: iceShardFloat 8s ease-in-out infinite !important;
  pointer-events: none !important;
}
@keyframes frostSparkle {
  0%, 100% { 
    opacity: 0.7; 
    transform: scale(0.9) rotate(0deg); 
    filter: brightness(1.2);
  }
  25% { 
    opacity: 1; 
    transform: scale(1.4) rotate(90deg); 
    filter: brightness(1.8);
  }
  50% { 
    opacity: 1; 
    transform: scale(1.7) rotate(180deg); 
    filter: brightness(2);
  }
  75% { 
    opacity: 0.95; 
    transform: scale(1.3) rotate(270deg); 
    filter: brightness(1.7);
  }
}
@keyframes iceCrystalSpin {
  0% { 
    transform: rotate(0deg) scale(1); 
    filter: brightness(1.3);
  }
  25% { 
    transform: rotate(90deg) scale(1.2); 
    filter: brightness(1.6);
  }
  50% { 
    transform: rotate(180deg) scale(1.35); 
    filter: brightness(1.9);
  }
  75% { 
    transform: rotate(270deg) scale(1.2); 
    filter: brightness(1.6);
  }
  100% { 
    transform: rotate(360deg) scale(1); 
    filter: brightness(1.3);
  }
}
@keyframes iceShardFloat {
  0%, 100% { 
    transform: translateY(0px) rotate(-10deg); 
    opacity: 0.8; 
  }
  25% { 
    transform: translateY(-35px) rotate(8deg); 
    opacity: 1; 
  }
  50% { 
    transform: translateY(-55px) rotate(-6deg); 
    opacity: 1; 
  }
  75% { 
    transform: translateY(-40px) rotate(7deg); 
    opacity: 0.95; 
  }
}

/* ========== CODES 51, 53, 55 : BRUINE ========== */
.weather-bg-drizzle {
  background: linear-gradient(180deg, #576574 0%, #7f8fa6 40%, #a4b0bd 100%) !important;
}
.weather-bg-drizzle .drizzle-drop {
  position: absolute;
  width: 1px;
  height: 15px;
  background: linear-gradient(180deg, transparent 0%, rgba(174,194,224,0.6) 50%, rgba(174,194,224,0.8) 100%);
  animation: drizzleFall 1s linear infinite;
}
@keyframes drizzleFall {
  0% { transform: translateY(-20px); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(400px); opacity: 0; }
}

/* ========== CODES 56, 57 : BRUINE VERGLAÇANTE ========== */
.weather-bg-freezing-drizzle {
  background: linear-gradient(180deg, #4a5568 0%, #636e72 40%, #8395a7 100%) !important;
}
.weather-bg-freezing-drizzle .drizzle-drop {
  position: absolute;
  width: 1px;
  height: 15px;
  background: linear-gradient(180deg, transparent 0%, rgba(180,210,240,0.5) 50%, rgba(200,230,255,0.9) 100%);
  animation: drizzleFall 0.9s linear infinite;
}
.weather-bg-freezing-drizzle .ice-particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(200,230,255,0.9);
  border-radius: 50%;
  box-shadow: 0 0 4px 1px rgba(200,230,255,0.6);
  animation: iceSparkle 1.5s ease-in-out infinite;
}
.weather-bg-freezing-drizzle .warning-icon {
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-size: 16px;
  animation: warningPulse 1.5s ease-in-out infinite;
  z-index: 5;
}
@keyframes warningPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}
@keyframes iceSparkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* ========== CODES 61, 63, 65 : PLUIE ========== */
.weather-bg-rain {
  background: linear-gradient(180deg, #2c3e50 0%, #34495e 30%, #5d6d7e 60%, #85929e 100%) !important;
}
.weather-bg-rain .rain-drop {
  position: absolute;
  width: 2px;
  height: 20px;
  background: linear-gradient(180deg, transparent 0%, rgba(174,194,224,0.4) 30%, rgba(174,194,224,0.9) 100%);
  border-radius: 0 0 2px 2px;
  animation: rainFall 0.6s linear infinite;
}
@keyframes rainFall {
  0% { transform: translateY(-30px); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(400px); opacity: 0.3; }
}

/* ========== CODES 66, 67 : PLUIE VERGLAÇANTE ========== */
.weather-bg-freezing-rain {
  background: linear-gradient(180deg, #1e272e 0%, #2d3436 40%, #485460 100%) !important;
}
.weather-bg-freezing-rain .rain-drop {
  position: absolute;
  width: 2px;
  height: 22px;
  background: linear-gradient(180deg, transparent 0%, rgba(180,210,240,0.4) 30%, rgba(200,230,255,0.95) 100%);
  border-radius: 0 0 2px 2px;
  animation: rainFall 0.55s linear infinite;
}
.weather-bg-freezing-rain .ice-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 15%;
  background: linear-gradient(0deg, rgba(200,230,255,0.4) 0%, transparent 100%);
  animation: iceSheetGrow 3s ease-out infinite;
}
.weather-bg-freezing-rain .warning-icon {
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-size: 18px;
  animation: warningPulse 1s ease-in-out infinite;
  z-index: 5;
}
@keyframes iceSheetGrow {
  0%, 100% { opacity: 0.3; height: 12%; }
  50% { opacity: 0.6; height: 18%; }
}

/* ========== CODES 71, 73, 75 : CHUTES DE NEIGE ========== */
.weather-bg-snow {
  background: linear-gradient(180deg, #5d6d7e 0%, #85929e 30%, #aeb6bf 60%, #d5d8dc 85%, #f4f6f6 100%) !important;
}
.weather-bg-snow .snowflake {
  position: absolute;
  color: white;
  text-shadow: 0 0 5px rgba(255,255,255,0.8);
  animation: snowFall 4s linear infinite;
  opacity: 0;
}
@keyframes snowFall {
  0% { transform: translateY(-20px) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 0.8; }
  100% { transform: translateY(400px) rotate(360deg); opacity: 0; }
}

/* ========== CODE 77 : GRAINS DE NEIGE ========== */
.weather-bg-snow-grains {
  background: linear-gradient(180deg, #626567 0%, #909497 40%, #bdc3c7 70%, #ecf0f1 100%) !important;
}
.weather-bg-snow-grains .snow-grain {
  position: absolute;
  width: 3px;
  height: 3px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 3px rgba(255,255,255,0.8);
  animation: grainsFall 2s linear infinite;
}
@keyframes grainsFall {
  0% { transform: translateY(-10px); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(400px); opacity: 0; }
}

/* ========== CODES 80, 81, 82 : AVERSES ========== */
.weather-bg-showers {
  background: linear-gradient(180deg, #1a252f 0%, #2c3e50 40%, #34495e 100%) !important;
}
.weather-bg-showers .rain-drop {
  position: absolute;
  width: 3px;
  height: 25px;
  background: linear-gradient(180deg, transparent 0%, rgba(150,180,220,0.5) 30%, rgba(150,180,220,1) 100%);
  border-radius: 0 0 3px 3px;
  animation: heavyRainFall 0.35s linear infinite;
}
.weather-bg-showers .cloud {
  position: absolute;
  background: linear-gradient(180deg, #1a252f 0%, #2c3e50 100%);
  border-radius: 50px;
  animation: cloudFloat 25s linear infinite;
}
.weather-bg-showers .cloud::before,
.weather-bg-showers .cloud::after {
  content: '';
  position: absolute;
  background: inherit;
  border-radius: 50%;
}
.weather-bg-showers .cloud-1 { width: 90px; height: 32px; top: 10%; left: -110px; }
.weather-bg-showers .cloud-1::before { width: 45px; height: 45px; top: -22px; left: 18px; }
.weather-bg-showers .cloud-1::after { width: 40px; height: 40px; top: -18px; left: 50px; }
@keyframes heavyRainFall {
  0% { transform: translateY(-40px); opacity: 0; }
  5% { opacity: 1; }
  100% { transform: translateY(400px); opacity: 0.5; }
}

/* ========== CODES 85, 86 : AVERSES DE NEIGE ========== */
.weather-bg-snow-showers {
  background: linear-gradient(180deg, #4a5568 0%, #718096 40%, #a0aec0 70%, #e2e8f0 100%) !important;
}
.weather-bg-snow-showers .snowflake {
  position: absolute;
  color: white;
  text-shadow: 0 0 6px rgba(255,255,255,0.9);
  animation: snowFall 2.5s linear infinite;
  opacity: 0;
}
.weather-bg-snow-showers .cloud {
  position: absolute;
  background: linear-gradient(180deg, #5a6978 0%, #4a5568 100%);
  border-radius: 50px;
  animation: cloudFloat 22s linear infinite;
}
.weather-bg-snow-showers .cloud::before,
.weather-bg-snow-showers .cloud::after {
  content: '';
  position: absolute;
  background: inherit;
  border-radius: 50%;
}
.weather-bg-snow-showers .cloud-1 { width: 85px; height: 30px; top: 12%; left: -100px; }
.weather-bg-snow-showers .cloud-1::before { width: 42px; height: 42px; top: -21px; left: 16px; }
.weather-bg-snow-showers .cloud-1::after { width: 36px; height: 36px; top: -16px; left: 48px; }

/* ========== CODE 95 : ORAGES ========== */
.weather-bg-thunderstorm {
  background: linear-gradient(180deg, #0d1117 0%, #161b22 25%, #21262d 50%, #30363d 75%, #484f58 100%) !important;
}
.weather-bg-thunderstorm .lightning {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  animation: lightningFlash 5s ease-in-out infinite;
  z-index: 2;
  pointer-events: none;
}
.weather-bg-thunderstorm .lightning-bolt {
  position: absolute;
  width: 4px;
  height: 0;
  background: linear-gradient(180deg, #fff9c4 0%, #ffeb3b 50%, #ffc107 100%);
  filter: blur(1px);
  box-shadow: 0 0 10px 5px rgba(255,235,59,0.5), 0 0 20px 10px rgba(255,193,7,0.3);
  animation: boltStrike 5s ease-out infinite;
  opacity: 0;
}
@keyframes lightningFlash {
  0%, 89%, 91%, 93%, 95%, 100% { background: transparent; }
  90% { background: rgba(255, 255, 220, 0.4); }
  92% { background: rgba(255, 255, 220, 0.2); }
  94% { background: rgba(255, 255, 220, 0.3); }
}
@keyframes boltStrike {
  0%, 89%, 95%, 100% { height: 0; opacity: 0; }
  90%, 91% { height: 80px; opacity: 1; }
  92%, 94% { height: 0; opacity: 0; }
}
.weather-bg-thunderstorm .storm-cloud {
  position: absolute;
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 50px;
  animation: stormCloudMove 20s linear infinite;
}
.weather-bg-thunderstorm .storm-cloud::before,
.weather-bg-thunderstorm .storm-cloud::after {
  content: '';
  position: absolute;
  background: inherit;
  border-radius: 50%;
}
.weather-bg-thunderstorm .storm-cloud-1 { width: 100px; height: 35px; top: 8%; left: -120px; }
.weather-bg-thunderstorm .storm-cloud-1::before { width: 50px; height: 50px; top: -25px; left: 20px; }
.weather-bg-thunderstorm .storm-cloud-1::after { width: 45px; height: 45px; top: -20px; left: 55px; }
@keyframes stormCloudMove {
  0% { transform: translateX(0); }
  100% { transform: translateX(350px); }
}

/* ========== CODES 96, 99 : ORAGES AVEC GRÊLE ========== */
.weather-bg-thunderstorm-hail {
  background: linear-gradient(180deg, #0a0a0f 0%, #121218 30%, #1a1a25 60%, #252530 100%) !important;
}
.weather-bg-thunderstorm-hail .hailstone {
  position: absolute;
  width: 5px;
  height: 6px;
  background: radial-gradient(ellipse, rgba(220,235,255,1) 0%, rgba(180,200,230,0.8) 70%, transparent 100%);
  border-radius: 50%;
  animation: hailFall 0.5s linear infinite;
}
@keyframes hailFall {
  0% { transform: translateY(-20px); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(400px); opacity: 0.5; }
}
.weather-bg-thunderstorm-hail .lightning {
  animation-duration: 3s;
}

/* ========== DÉFAUT ========== */
.weather-bg-default {
  background: linear-gradient(180deg, #2980b9 0%, #3498db 40%, #5dade2 70%, #85c1e9 100%) !important;
}
.weather-bg-default .cloud {
  position: absolute;
  background: linear-gradient(180deg, #fff 0%, #e8e8e8 100%);
  border-radius: 50px;
  opacity: 0.8;
  animation: cloudFloat 28s linear infinite;
}
.weather-bg-default .cloud::before,
.weather-bg-default .cloud::after {
  content: '';
  position: absolute;
  background: inherit;
  border-radius: 50%;
}
.weather-bg-default .cloud-1 { width: 70px; height: 26px; top: 22%; left: -85px; }
.weather-bg-default .cloud-1::before { width: 35px; height: 35px; top: -17px; left: 12px; }
.weather-bg-default .cloud-1::after { width: 30px; height: 30px; top: -13px; left: 38px; }

/* Animation nuages */
@keyframes cloudFloat {
  0% { transform: translateX(0); }
  100% { transform: translateX(350px); }
}

.weather-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.city-name {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 4px 0;
}

.remove-city {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  border: none;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  transition: all 0.2s;
}

.remove-city:hover {
  background: rgba(255,255,255,0.3);
}

/* Section température (remplace l'icône) */
.temperature-section {
  text-align: center;
  margin: 16px 0;
}

.temperature-main {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.temperature-feels {
  font-size: 0.95rem;
  opacity: 0.9;
  margin-top: 4px;
}

.weather-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
  font-size: 0.85rem;
}

.weather-detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.weather-detail-label {
  opacity: 0.8;
  font-size: 0.75rem;
}

.weather-detail-value {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.wind-arrow {
  width: 16px;
  height: 16px;
  display: inline-block;
}

.weather-card-footer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.2);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.weather-card-buttons {
  display: flex;
  gap: 6px;
}

.btn-meteo {
  flex: 1;
  padding: 6px 10px;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 8px;
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.btn-meteo:hover {
  background: rgba(255,255,255,0.3);
  transform: translateY(-1px);
}

.update-time {
  font-size: 0.7rem;
  opacity: 0.7;
  text-align: center;
}

.loading-card {
  min-width: 200px;
  background: #e5e7eb;
  border-radius: 16px;
  padding: 16px;
  flex-shrink: 0;
  animation: pulse 1.5s ease-in-out infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
}

/* ===== STYLES COMPACTS POUR LES CARTES MÉTÉO ACTUELLES ===== */
.weather-card-compact {
  min-width: 165px !important;
  max-width: 185px;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  color: white;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
}
.weather-card-compact:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
}
.weather-card-header-compact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.city-name-compact {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}
.remove-city-compact {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: none;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  transition: all 0.15s;
  opacity: 0.7;
}
.remove-city-compact:hover {
  background: rgba(255,255,255,0.3);
  opacity: 1;
}
.temperature-section-compact {
  text-align: center;
  margin: 10px 0;
}
.temperature-main-compact {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.temperature-feels-compact {
  font-size: 0.75rem;
  opacity: 0.85;
  margin-top: 3px;
}
.weather-details-compact {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin: 10px 0 8px;
  font-size: 0.7rem;
}
.weather-detail-compact {
  display: flex;
  align-items: center;
  gap: 3px;
  opacity: 0.9;
}
.weather-detail-compact svg {
  flex-shrink: 0;
}
.wind-arrow-compact {
  width: 12px;
  height: 12px;
  display: inline-block;
}
.weather-card-footer-compact {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.btn-meteo-compact {
  flex: 1;
  padding: 6px 8px;
  background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.1) 100%);
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 0.72rem;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.2);
}
.btn-meteo-compact:hover {
  background: linear-gradient(135deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.2) 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.3);
}
/* Boutons colorés selon le contexte météo */
.weather-bg-clear .btn-meteo-compact,
.weather-bg-clear-partly .btn-meteo-compact {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  box-shadow: 0 2px 8px rgba(245,158,11,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
}
.weather-bg-clear .btn-meteo-compact:hover,
.weather-bg-clear-partly .btn-meteo-compact:hover {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
}
.weather-bg-clear-night .btn-meteo-compact,
.weather-bg-clear-partly-night .btn-meteo-compact {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  box-shadow: 0 2px 8px rgba(99,102,241,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
}
.weather-bg-clear-night .btn-meteo-compact:hover,
.weather-bg-clear-partly-night .btn-meteo-compact:hover {
  background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
}
.weather-bg-cloudy .btn-meteo-compact,
.weather-bg-overcast .btn-meteo-compact,
.weather-bg-very-cloudy .btn-meteo-compact {
  background: linear-gradient(135deg, #64748b 0%, #475569 100%);
  box-shadow: 0 2px 8px rgba(100,116,139,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
}
.weather-bg-cloudy .btn-meteo-compact:hover,
.weather-bg-overcast .btn-meteo-compact:hover,
.weather-bg-very-cloudy .btn-meteo-compact:hover {
  background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
}
.weather-bg-rain .btn-meteo-compact,
.weather-bg-drizzle .btn-meteo-compact,
.weather-bg-rain-light .btn-meteo-compact {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  box-shadow: 0 2px 8px rgba(14,165,233,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
}
.weather-bg-rain .btn-meteo-compact:hover,
.weather-bg-drizzle .btn-meteo-compact:hover,
.weather-bg-rain-light .btn-meteo-compact:hover {
  background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%);
}
.weather-bg-snow .btn-meteo-compact,
.weather-bg-snow-light .btn-meteo-compact,
.weather-bg-snow-heavy .btn-meteo-compact {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
  box-shadow: 0 2px 8px rgba(6,182,212,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
}
.weather-bg-snow .btn-meteo-compact:hover,
.weather-bg-snow-light .btn-meteo-compact:hover,
.weather-bg-snow-heavy .btn-meteo-compact:hover {
  background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 100%);
}
.weather-bg-thunderstorm .btn-meteo-compact,
.weather-bg-thunderstorm-hail .btn-meteo-compact {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  box-shadow: 0 2px 8px rgba(139,92,246,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
}
.weather-bg-thunderstorm .btn-meteo-compact:hover,
.weather-bg-thunderstorm-hail .btn-meteo-compact:hover {
  background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
}
.weather-bg-fog .btn-meteo-compact,
.weather-bg-fog-night .btn-meteo-compact {
  background: linear-gradient(135deg, #78716c 0%, #57534e 100%);
  box-shadow: 0 2px 8px rgba(120,113,108,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
}
.weather-bg-fog .btn-meteo-compact:hover,
.weather-bg-fog-night .btn-meteo-compact:hover {
  background: linear-gradient(135deg, #a8a29e 0%, #78716c 100%);
}
.update-time-compact {
  font-size: 0.65rem;
  opacity: 0.65;
  text-align: center;
  margin-top: 6px;
}
.loading-card-compact {
  min-width: 165px !important;
  max-width: 185px;
  min-height: 180px;
  border-radius: 14px !important;
  padding: 12px 14px !important;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Modal */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal-content {
  background: white;
  border-radius: 16px;
  max-width: 500px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.modal-header {
  padding: 20px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  font-size: 1.25rem;
}

.modal-close {
  background: none;
  border: none;
  font-size: 28px;
  color: #6b7280;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s;
}

.modal-close:hover {
  background: #f3f4f6;
  color: #111827;
}

.modal-body {
  padding: 20px;
}

.city-input {
  width: 100%;
  padding: 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 1rem;
}

.search-status {
  margin-top: 12px;
  padding: 10px;
  border-radius: 8px;
  font-size: 0.9rem;
  display: none;
}

.search-status.success {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #6ee7b7;
  display: block;
}

.search-status.error {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
  display: block;
}

.search-status.info {
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #93c5fd;
  display: block;
}

.modal-footer {
  padding: 20px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.btn-primary {
  background: #0ea5e9;
  color: white;
}

.btn-primary:hover {
  background: #0284c7;
}

.btn-secondary {
  background: #f3f4f6;
  color: #374151;
}

.btn-secondary:hover {
  background: #e5e7eb;
}

/* Styles pour le modal de réorganisation */
.reorder-modal-content {
  max-width: 450px;
  max-height: 85vh;
}

.reorder-hint {
  font-size: 0.85rem;
  color: #64748b;
  margin-bottom: 16px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-radius: 10px;
  border-left: 4px solid #0ea5e9;
}

.reorder-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 400px;
  overflow-y: auto;
}

.reorder-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  cursor: grab;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.reorder-item:hover {
  border-color: #0ea5e9;
  background: linear-gradient(145deg, #f0f9ff 0%, #e0f2fe 100%);
  transform: translateX(4px);
  box-shadow: 0 4px 16px rgba(14, 165, 233, 0.15);
}

.reorder-item:active {
  cursor: grabbing;
}

.reorder-item.dragging {
  opacity: 0.9;
  border-color: #0ea5e9;
  background: linear-gradient(145deg, #e0f2fe 0%, #bae6fd 100%);
  box-shadow: 0 12px 35px rgba(14, 165, 233, 0.35);
  transform: scale(1.03) rotate(1deg);
  z-index: 100;
}

.reorder-item.drag-over {
  border-color: #22c55e;
  background: linear-gradient(145deg, #f0fdf4 0%, #dcfce7 100%);
  transform: translateY(4px);
}

.drag-handle {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px;
  cursor: grab;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.drag-handle:hover {
  opacity: 1;
}

.drag-handle span {
  display: block;
  width: 22px;
  height: 3px;
  background: linear-gradient(90deg, #94a3b8 0%, #64748b 100%);
  border-radius: 2px;
}

.reorder-position {
  min-width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #0ea5e9 0%, #0284c7 100%);
  color: white;
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
}

.reorder-city-name {
  flex: 1;
  font-weight: 600;
  color: #1e293b;
  font-size: 1rem;
}

.reorder-actions {
  display: flex;
  gap: 6px;
}

.reorder-btn {
  width: 36px;
  height: 36px;
  border: 2px solid #e2e8f0;
  background: white;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  color: #64748b;
}

.reorder-btn:hover:not(:disabled) {
  border-color: #0ea5e9;
  background: #f0f9ff;
  color: #0ea5e9;
  transform: scale(1.1);
}

.reorder-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.reorder-btn svg {
  width: 18px;
  height: 18px;
}

.reorder-btn-delete {
  border-color: #fecaca;
  color: #ef4444;
}

.reorder-btn-delete:hover:not(:disabled) {
  border-color: #ef4444;
  background: #fef2f2;
  color: #dc2626;
}

#resetOrderBtn {
  background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%);
  border: 2px solid #cbd5e1;
  color: #475569;
}

#resetOrderBtn:hover {
  background: linear-gradient(145deg, #e2e8f0 0%, #cbd5e1 100%);
  border-color: #94a3b8;
}

#saveOrderBtn {
  background: linear-gradient(145deg, #22c55e 0%, #16a34a 100%);
  border: none;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

#saveOrderBtn:hover {
  background: linear-gradient(145deg, #16a34a 0%, #15803d 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
}

/* Amélioration esthétique du carousel */
.weather-carousel-section.pro-card {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border: 2px solid #e2e8f0;
  border-radius: 20px;
  box-shadow: 0 4px 25px rgba(0,0,0,0.06);
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
}

.weather-carousel-section.pro-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0ea5e9 0%, #22c55e 50%, #f59e0b 100%);
}

.carousel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.carousel-title {
  display: flex;
  align-items: center;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.carousel-title .icon-24 {
  width: 24px;
  height: 24px;
  margin-right: 10px;
  color: #f59e0b;
}

.carousel-controls {
  display: flex;
  gap: 8px;
}

.btn-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 2px solid #e2e8f0;
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  color: #64748b;
}

.btn-icon:hover {
  background: linear-gradient(145deg, #0ea5e9 0%, #0284c7 100%);
  border-color: #0ea5e9;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
}

.btn-icon svg {
  width: 20px;
  height: 20px;
}

#reorderCitiesBtn:hover {
  background: linear-gradient(145deg, #8b5cf6 0%, #7c3aed 100%);
  border-color: #8b5cf6;
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.carousel-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

.carousel-container {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 8px 4px;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f1f5f9;
}

.carousel-container::-webkit-scrollbar {
  height: 8px;
}

.carousel-container::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}

.carousel-container::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #94a3b8 0%, #64748b 100%);
  border-radius: 4px;
}

.carousel-container::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, #64748b 0%, #475569 100%);
}

.carousel-nav {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 2px solid #e2e8f0;
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  color: #64748b;
}

.carousel-nav:hover {
  background: linear-gradient(145deg, #0ea5e9 0%, #0284c7 100%);
  border-color: #0ea5e9;
  color: white;
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
}

.carousel-nav svg {
  width: 20px;
  height: 20px;
}

/* Cartes météo améliorées */
.weather-card {
  min-width: 210px;
  border-radius: 18px;
  padding: 18px;
  color: white;
  flex-shrink: 0;
  box-shadow: 0 6px 25px rgba(0,0,0,0.25);
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.weather-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 15px 45px rgba(0,0,0,0.35);
}

.weather-card-header-compact {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.city-name-compact {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
  letter-spacing: -0.02em;
}

.remove-city-compact {
  background: rgba(255,255,255,0.2);
  border: none;
  color: white;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  transition: all 0.2s;
  backdrop-filter: blur(4px);
}

.remove-city-compact:hover {
  background: rgba(239, 68, 68, 0.9);
  transform: scale(1.1);
}

.temperature-section-compact {
  margin-bottom: 12px;
}

.temperature-main-compact {
  font-size: 2.8rem;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 3px 12px rgba(0,0,0,0.3);
  letter-spacing: -0.03em;
}

.temperature-feels-compact {
  font-size: 0.85rem;
  opacity: 0.9;
  margin-top: 4px;
  font-weight: 500;
}

.weather-detail-compact.uv-detail {
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.weather-details-compact {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.weather-card-footer-compact {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.btn-meteo-compact {
  flex: 1;
  text-align: center;
  padding: 8px 12px;
  background: rgba(255,255,255,0.2);
  border-radius: 10px;
  color: white;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  transition: all 0.2s;
  backdrop-filter: blur(4px);
}

.btn-meteo-compact:hover {
  background: rgba(255,255,255,0.35);
  transform: translateY(-2px);
}

.update-time-compact {
  font-size: 0.7rem;
  opacity: 0.7;
  text-align: center;
}

/* Loading card */
.loading-card {
  min-width: 210px;
  padding: 30px;
  background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%);
  border-radius: 18px;
  text-align: center;
  color: #64748b;
  animation: pulse 1.5s ease-in-out infinite;
}

.loading-card-compact {
  min-width: 180px;
  padding: 20px;
}

@keyframes pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

@media (max-width: 768px) {
  .carousel-nav {
    display: none;
  }
  
  .weather-card {
    min-width: 180px;
  }
  
  .reorder-modal-content {
    max-width: 95%;
    margin: 10px;
  }
  
  .reorder-item {
    padding: 12px;
  }
  
  .reorder-city-name {
    font-size: 0.9rem;
  }
  
  .reorder-btn {
    width: 32px;
    height: 32px;
  }
}