:root {
      --bg: #F7F9FC;
      --card: #FFFFFF;
      --fg: #111827;         /* zinc-900 */
      --muted: #6B7280;      /* gray-600 */
      --border: #E6EAF0;     /* light line */
      --accent: #3A7BD5;     /* Belchertown-like blue */
      --ok: #22C55E;         /* green 500 */
      --warn: #F59E0B;       /* amber 500 */
      --bad: #EF4444;        /* red 500 */
      --violet: #8B5CF6;     /* violet 500 */
    }

    /* Base */
    html, body {
		overflow-x: hidden;
		height: 100%;
	}
    body {
      margin: 0; font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      color: var(--fg); background: var(--bg);
    }
    .container { max-width: 1440px; margin: 0 auto; padding: 0 20px; }
    .a11y-hidden { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

    /* Header */
    header {
      position: sticky; top: 0; z-index: 50;
      backdrop-filter: saturate(180%) blur(6px);
      background: color-mix(in oklab, var(--card) 92%, transparent);
      border-bottom: 1px solid var(--border);
    }
    .header-wrap { display: flex; align-items: center; justify-content: space-between; height: 56px; }
    .brand { font-weight: 600; font-size: 18px; letter-spacing: .1px; }
    nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; }
    nav a { text-decoration: none; color: var(--fg); font-weight: 500; }
    nav a:hover { text-decoration: underline; }
    
/* Mobile menu */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--fg);
  padding: 8px;
}

.nav-mobile {
  position: fixed;
  top: 0;
  right: -100%;
  width: 280px;
  height: 100vh;
  background: var(--card);
  border-left: 1px solid var(--border);
  z-index: 100;
  transition: right 0.3s ease;
  box-shadow: -4px 0 8px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
}

.nav-mobile.open {
  right: 0;
}

.nav-mobile-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
}

.nav-mobile-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--fg);
  padding: 4px;
  line-height: 1;
}

.nav-mobile ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}

.nav-mobile li {
  margin: 0;
  padding: 0;
  display: block;
  width: 100%;
}

.nav-mobile a {
  display: block;
  width: 100%;
  padding: 18px 20px;
  text-decoration: none;
  color: var(--fg);
  font-weight: 500;
  border-bottom: 1px solid var(--border);
  transition: background-color 0.2s ease;
  box-sizing: border-box;
}

.nav-mobile a:hover {
  background: var(--bg);
  text-decoration: none;
}

.nav-mobile li:last-child a {
  border-bottom: none;
}

/* Overlay */
.nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.nav-overlay.open {
  opacity: 1;
  visibility: visible;
}

@media (min-width: 768px) {
  .nav-mobile {
    display: none !important; /* Force le masquage sur desktop */
  }
  
  .nav-overlay {
    display: none !important; /* Force le masquage de l'overlay sur desktop */
  }
  
  .menu-toggle {
    display: none !important; /* Force le masquage du bouton sur desktop */
  }
}

@media (min-width: 768px) {
  .nav-desktop {
    display: flex !important;
  }
}

@media (max-width: 767.98px) {
  .menu-toggle {
    display: block;
  }
  
  .nav-desktop {
    display: none !important;
  }
  
  /* S'assurer que le menu mobile peut être affiché sur mobile */
  .nav-mobile {
    display: block;
  }
}



    /* Cards */
    .card { background: var(--card); border: 1px solid var(--border); border-radius: 2px; padding: 18px; }

    /* Home grid */
    .home { display: grid; gap: 16px; padding: 16px 0 28px; }
    /* Desktop ≥1024px: 3 colonnes */
    @media (min-width: 1024px) {
      .home { grid-template-columns: 1fr 1fr 1fr; }
      #webcam { grid-row: 1 / span 2; grid-column: 3; }
      #current { grid-column: 1; grid-row: 1; }
      #misc    { grid-column: 2; grid-row: 1; }
      #wind    { grid-column: 1; grid-row: 2; }
      #astro   { grid-column: 2; grid-row: 2; }
      #nearby  { grid-column: 1 / span 3; grid-row: 3; }
    }
    /* Tablet 768–1023px: 2 colonnes */
    @media (min-width: 768px) and (max-width: 1023.98px) {
      .home { grid-template-columns: 1fr 1fr; }
      #current { grid-column: 1; }
      #misc    { grid-column: 2; }
      #wind    { grid-column: 1; }
      #astro   { grid-column: 2; }
      #webcam  { grid-column: 1 / span 2; }
      #nearby  { grid-column: 1 / span 2; }
    }
    /* Mobile <768px: 1 colonne + ordre personnalisé */
    @media (max-width: 767.98px) {
      .home { grid-template-columns: 1fr; }
      /* Ordre mobile : Conditions, Vent, Webcam, Données diverses, Éphémérides, Villes voisines */
      #current { order: 1; }
      #wind    { order: 2; }
      #webcam  { order: 3; }
      #misc    { order: 4; }
      #astro   { order: 5; }
      #nearby  { order: 6; }
    }

    /* Current conditions block */
	/* Currentcond title */
	.cond-title {
	  margin: 0 0 12px 0;
	  font-size: 16px;
	  font-weight: 600;
	  text-align: left;
	  color: var(--fg);
	}
    
.temp-trend {
  font-size: 0.4em;
  margin-left: 8px;
  vertical-align: middle;
  color: var(--muted);
}

    .current-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 16px; align-items: center; }
    .cond-left { display: grid; grid-template-rows: auto auto; gap: 10px; }
.cond-iconline { 
  display: flex;
  flex-direction: column; /* Empile verticalement l'icône et le texte */
  align-items: center; /* Centre horizontalement l'icône et le contenu */
  gap: 10px;
}
.cond-text-container {
  display: flex;
  flex-direction: column;
  align-items: center; /* Centre le texte */
  gap: 8px;
  width: 100%; /* Prend toute la largeur disponible */
}
    .icon-48 { width: 24px; height: 24px; stroke: currentColor; fill: none; }
    .cond-text { font-size: 14px; color: var(--muted); }

    .temp-big { font-weight: 600; font-size: clamp(40px, 8vw, 64px); line-height: 0.95; text-align: right; }
    .temp-unit { font-weight: 500; }
    .temp-sub { display: grid; justify-items: center; gap: 6px; font-size: 14px; color: var(--muted); margin-top: 1em; }
    .minmax-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 1em; }
.minmax-grid > div { text-align: center; }
#tempMin { color: #3A7BD5; } /* bleu */
#tempMax { color: #EF4444; } /* rouge */

    .kv { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 6px 10px; font-size: 14px; }
    .kv .k { color: var(--muted); }
    .kv .v { text-align: right; }

    /* Sparkline */
    .spark-wrap { margin-top: 1em; }
    .spark svg { width: 100%; height: 54px; display: block; }
    .axis { stroke: #DDE3EA; stroke-width: .5; }
    .axis text { font-size: 10px; fill: var(--muted); }
    .spark-area { fill: color-mix(in oklab, var(--accent) 12%, white); }
    .spark-line { fill: none; stroke: var(--accent); stroke-width: 1; }

    /* Misc data (pile labels/values en colonnes) */
    .misc { display: grid; grid-template-columns: 1fr; gap: 8px; }
    .misc .kv { padding: 4px 0; border-bottom: 1px dashed var(--border); }
    .misc .kv:last-child { border-bottom: none; }

    /* Wind block */
    .wind { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
    .wind-rose { width: 160px; height: 160px; }
    @media (min-width: 768px) and (max-width: 1023.98px) { .wind-rose { width: 120px; height: 120px; } }
    @media (max-width: 767.98px) { .wind-rose { width: 96px; height: 96px; } }
    .wind-right { display: grid; gap: 8px; align-content: center; }
    .wind-speed { font-size: 20px; font-weight: 600; text-align: left; }
    .wind-meta { font-size: 14px; color: var(--muted); }

    /* Webcam */
    .webcam { display: block; width: 100%; height: auto; object-fit: contain; }
	
	/* Webcam title */
	.webcam-title {
	  margin: 0 0 12px 0;
	  font-size: 16px;
	  font-weight: 600;
	  text-align: center;
	  color: var(--fg);
	}

    /* Astro */
    .astro { display: grid; gap: 10px; font-size: 14px; }
	
	/* Astro title */
	.astro-title {
	  margin: 0 0 12px 0;
	  font-size: 16px;
	  font-weight: 600;
	  text-align: left;
	  color: var(--fg);
	}
	/* Nearby title */
	.nearby-title {
	  margin: 0 0 12px 0;
	  font-size: 16px;
	  font-weight: 600;
	  text-align: left;
	  color: var(--fg);
	}
    /* Nearby table (desktop/tablet) */
    .nearby { overflow-x: auto; }
    table.tbl { width: 100%; border-collapse: collapse; }
    .tbl thead th { text-align: left; font-weight: 600; font-size: 13px; color: var(--muted); padding: 10px 8px; border-bottom: 1px solid var(--border); }
    .tbl td { padding: 10px 8px; vertical-align: middle; }
    /* minimal: no row lines; only subtle column separation via background stripes */
    .tbl tbody tr:hover { background: #F9FBFF; }

    /* Nearby tiles (mobile) */
    .nearby-tiles { display: none; }
    @media (max-width: 767.98px) {
      .nearby .tbl { display: none; }
      .nearby-tiles { display: grid; gap: 12px; }
      .tile { border: 1px solid var(--border); border-radius: 2px; background: var(--card); padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
      .tile h4 { margin: 0; font-size: 15px; font-weight: 600; }
      .tile .left { display: grid; gap: 4px; align-content: start; }
      .tile .big { font-size: 18px; font-weight: 600; }
      .tile .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; font-size: 13px; }
      .tile .grid .k { color: var(--muted); }
      .tile .grid .v { text-align: right; }
    }

    /* Update visuals */
    .fade-update { animation: fadeIn .3s ease; }
    @keyframes fadeIn { from { opacity: .25 } to { opacity: 1 } }

/* Variantes de boutons */
.btn-small,
input.small {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-block;
  line-height: 1.4;
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	  background: var(--accent);
  color: white;
  border: 1px solid var(--accent);
  border-radius: 4px;
}

.btn-small:hover {
  background: color-mix(in oklab, var(--accent) 90%, black);
  border-color: color-mix(in oklab, var(--accent) 90%, black);
}

.btn-small:active {
  background: color-mix(in oklab, var(--accent) 80%, black);
  transform: translateY(1px);
}

.btn-small:focus {
  outline: 2px solid color-mix(in oklab, var(--accent) 40%, transparent);
  outline-offset: 2px;
}

.btn-small:disabled {
  background: var(--muted);
  border-color: var(--muted);
  color: white;
  cursor: not-allowed;
  opacity: 0.6;
}


.btn-small:disabled:hover {
  background: var(--muted);
  border-color: var(--muted);
  transform: none;
}

.btn-secondary {
  background: var(--card);
  color: var(--fg);
  border-color: var(--border);
}

.btn-secondary:hover {
  background: var(--bg);
  border-color: var(--accent);
}

/* Listes de sélection (select) */
select {
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 12px;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
  transition: all 0.2s ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 8px center;
  background-repeat: no-repeat;
  background-size: 16px;
  padding-right: 32px;
}

select:hover {
  border-color: var(--accent);
  background-color: var(--bg);
}

select:focus {
  outline: 2px solid color-mix(in oklab, var(--accent) 40%, transparent);
  outline-offset: 2px;
  border-color: var(--accent);
}

select:disabled {
  background-color: var(--bg);
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Options des listes */
select option {
  background: var(--card);
  color: var(--fg);
  padding: 8px;
}

/* Labels de formulaire */
label {
  color: var(--fg);
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 4px;
  display: block;
}

/* Groupes de formulaire */
.form-group {
  margin-bottom: 16px;
}

.form-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.form-inline label {
  margin-bottom: 0;
  white-space: nowrap;
}

/* Responsive - mobile */
@media (max-width: 767.98px) {
  .form-inline {
    flex-direction: column;
    align-items: stretch;
  }
  
  .form-inline label {
    margin-bottom: 4px;
  }
  
  select {
    width: 100%;
  }
  
  .btn-small {
    width: 100%;
    margin-bottom: 8px;
  }
  
  .btn-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
}

/* Groupes de boutons */
.btn-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .btn-group .btn {
    width: auto;
    margin-bottom: 0;
  }
}

    /* Discreet color coding for current temperature only */
    .temp-cold   { color: #3A7BD5; }
    .temp-cool   { color: #6FA8DC; }
    .temp-mild   { color: #475569; }
    .temp-warm   { color: #F59E0B; }
    .temp-hot    { color: #F97316; }
    .temp-veryhot{ color: #EF4444; }
	
/* Footer */
footer {
  background: var(--card);
  border-top: 1px solid var(--border);
}
.footer-wrap {
  padding: 24px 0;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
.footer-wrap p {
  margin: 0;
}

    /* Climatology page layout */
    .climatology { padding: 16px 0 28px; }
    
    .page-title {
	  margin: 0 0 12px 0;
	  font-size: 16px;
	  font-weight: 600;
	  text-align: left;
	  color: var(--fg);
	}
	
    .page-title-yearly {
	  margin: 0 0 12px 0;
	  font-size: 16px;
	  font-weight: 600;
	  text-align: left;
	  color: var(--fg);
	}

    /* Desktop table */
    .climate-table-wrapper {
      overflow-x: auto;
      margin-bottom: 20px;
    }

    .climate-table {
      width: 100%;
      border-collapse: collapse;
      /*font-size: 13px;
      min-width: 1000px;*/
    }

    .climate-table th {
      background: var(--card);
      border: 1px solid var(--border);
      padding: 12px 6px;
      text-align: center;
      font-weight: 600;
      color: var(--muted);
      position: sticky;
      top: 0;
      z-index: 10;
	  font-size: 13px;
    }

    .climate-table td {
      border: 1px solid var(--border);
      padding: 8px 6px;
      text-align: center;
	  font-size: 13px;
    }

    .climate-table .summary-row {
      background: color-mix(in oklab, var(--accent) 8%, white);
      font-weight: 600;
    }

    /*.climate-table .summary-row td {
      border-top: 2px solid var(--accent);
    }*/

    /* Palette de couleurs conforme à l'original */
    /* Température */
    .temp-minus-25 { background-color: #003366; color: white; }
    .temp-minus-20 { background-color: #003399; color: white; }
    .temp-minus-15 { background-color: #0000cc; color: white; }
    .temp-minus-10 { background-color: #0000ff; color: white; }
    .temp-minus-5 { background-color: #0099ff; color: black; }
    .temp-0 { background-color: #66ffff; color: black; }
    .temp-5 { background-color: #66ff99; color: black; }
    .temp-10 { background-color: #66ff00; color: black; }
    .temp-15 { background-color: #ffff00; color: black; }
    .temp-20 { background-color: #ffcc00; color: black; }
    .temp-25 { background-color: #ff9900; color: black; }
    .temp-30 { background-color: #ff6600; color: black; }
    .temp-35 { background-color: #ff3300; color: black; }
    .temp-40 { background-color: #cc0000; color: black; }
    .temp-40plus { background-color: #660000; color: white; }

    /* Précipitations */
    .rain-none { background-color: #ffffff; color: black; }
    .rain-light { background-color: #00fe96; color: black; }
    .rain-moderate { background-color: #00fefe; color: black; }
    .rain-moderate2 { background-color: #00c8fe; color: black; }
    .rain-heavy { background-color: #0096fe; color: black; }
    .rain-heavy2 { background-color: #0064fe; color: white; }
    .rain-very-heavy { background-color: #3200fe; color: white; }
    .rain-very-heavy2 { background-color: #6400fe; color: white; }
    .rain-extreme { background-color: #9600fe; color: white; }
    .rain-extreme2 { background-color: #c800fe; color: white; }
    .rain-extreme3 { background-color: #640064; color: white; }

    /* Vent */
    .wind-calm { background-color: #ffffff; color: black; }
    .wind-10 { background-color: #ebebeb; color: black; }
    .wind-20 { background-color: #d7d7d7; color: black; }
    .wind-30 { background-color: #c4c4c4; color: black; }
    .wind-40 { background-color: #afafaf; color: black; }
    .wind-50 { background-color: #AB8787; color: black; }
    .wind-60 { background-color: #D07676; color: black; }
    .wind-70plus { background-color: #ff0000; color: black; }
	
	/* Deviation */
    .temp-deviation-standard { background-color: #ffffff; color: black; }
    .temp-deviation-below { background-color: #66ffff; color: black; }
    .temp-deviation-above { background-color: #ff6600; color: black; }

    /* Pression */
    .pressure-990 { background-color: #0000ff; color: white; }
    .pressure-995 { background-color: #0099ff; color: black; }
    .pressure-1000 { background-color: #66ffff; color: black; }
    .pressure-1005 { background-color: #66ff99; color: black; }
    .pressure-1010 { background-color: #66ff00; color: black; }
    .pressure-1015 { background-color: #ffff00; color: black; }
    .pressure-1020 { background-color: #ffcc00; color: black; }
    .pressure-1025 { background-color: #ff9900; color: black; }
    .pressure-1030 { background-color: #ff6600; color: black; }
    .pressure-1035 { background-color: #ff3300; color: black; }
    .pressure-1040 { background-color: #cc0000; color: black; }
    .pressure-1040plus { background-color: #660000; color: white; }

    /* Ensoleillement */
    .sunshine-1 { background-color: #ffffff; color: black; }
    .sunshine-2 { background-color: #ffffa0; color: black; }
    .sunshine-4 { background-color: #ffff60; color: black; }
    .sunshine-6 { background-color: #ffff20; color: black; }
    .sunshine-8 { background-color: #ff9900; color: black; }
    .sunshine-10 { background-color: #ff6600; color: black; }
    .sunshine-12 { background-color: #ff3300; color: black; }
    .sunshine-12plus { background-color: #cc0000; color: white; }

    /* Humidité (classes simples, non définies dans la palette originale) */
    .humidity-very-dry { background-color: #ffeeee; color: black; }
    .humidity-dry { background-color: #ffffcc; color: black; }
    .humidity-comfortable { background-color: #ccffcc; color: black; }
    .humidity-humid { background-color: #ccccff; color: black; }
    .humidity-very-humid { background-color: #aaaaff; color: black; }
    .humidity-oppressive { background-color: #8888ff; color: white; }

    /* Mobile cards */
    .climate-cards {
      display: none;
      gap: 16px;
    }

    .climate-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 16px;
    }

    .climate-card h3 {
      margin: 0 0 12px 0;
      font-size: 18px;
      font-weight: 600;
      text-align: center;
      padding: 8px;
      border-radius: 4px;
      background: var(--bg);
    }

    .climate-card .day-number {
      font-size: 24px;
      font-weight: 700;
      display: inline-block;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      text-align: center;
      line-height: 40px;
      margin-right: 12px;
      background: var(--accent);
      color: white;
    }

    .climate-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px 16px;
      margin-top: 12px;
    }

    .climate-item {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .climate-label {
      font-size: 12px;
      color: var(--muted);
      font-weight: 500;
    }
    
    .climate-label-summary {
      font-size: 12px;
      color: white;
      font-weight: 500;
    }

    .climate-value {
      font-size: 16px;
      font-weight: 600;
      padding: 4px 8px;
      border-radius: 4px;
      text-align: center;
    }

    /* Summary card for mobile */
    .summary-card {
      background: linear-gradient(135deg, var(--accent) 0%, color-mix(in oklab, var(--accent) 80%, white) 100%);
      color: white;
      border: none;
      margin-top: 20px;
    }

    .summary-card h3 {
      color: white;
      background: rgba(255, 255, 255, 0.1);
      margin: -16px -16px 16px -16px;
      padding: 16px;
    }
	
	/* Webcam */
	.webcam { padding: 16px 0 16px; }

    /* Responsive */
    @media (max-width: 767.98px) {
      .climate-table-wrapper {
        display: none;
      }
	  
      .page-title-yearly {
        display: none;
      }
      
      .climate-cards {
        display: grid;
      }
    }
    
.alert {
    background: linear-gradient(135deg, #ff6b35 0%, #ff8e53 100%);
    border-radius: 12px;
    padding: 16px 16px 16px;
    margin: 20px 45px;
    box-shadow: 0 4px 20px rgba(255, 107, 53, 0.25);
    border-left: 4px solid #e55a2b;
    animation: slideIn 0.3s ease-out;
}

.alert.orange {
    background: linear-gradient(135deg, #ff9500 0%, #ffb347 100%);
    border-left-color: #e6851a;
    box-shadow: 0 4px 20px rgba(255, 149, 0, 0.25);
}

.alert.yellow {
    background: linear-gradient(135deg, #ffd60a 0%, #ffe135 100%);
    border-left-color: #e6c200;
    box-shadow: 0 4px 20px rgba(255, 214, 10, 0.25);
    color: #333;
}

.alert.green {
    background: linear-gradient(135deg, #28a745 0%, #34d058 100%);
    border-left-color: #228b3c;
    box-shadow: 0 4px 20px rgba(40, 167, 69, 0.25);
}
.alert-header {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 12px;
    align-items: center;
    margin-bottom: 8px;
}

        .alert-icon {
            font-size: 20px;
            opacity: 0.9;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            flex-shrink: 0;
            line-height: 1;
        }

        .alert-type {
            font-weight: 600;
            font-size: 16px;
            color: white;
            display: flex;
            align-items: center;
            line-height: 1.2;
        }

.alert.yellow .alert-type {
    color: #333;
}

.alert-text {
    color: white;
    font-size: 15px;
    line-height: 1.4;
    margin-bottom: 12px;
}

.alert.yellow .alert-text {
    color: #333;
}

.alert-period {
    font-size: 0.7em;
    opacity: 0.85;
    color: white;
    display: flex;
    align-items: center;
    gap: 6px;
}

.alert.yellow .alert-period {
    color: #666;
}

.alert-period::before {
    content: "🕐";
    font-size: 12px;
}

@keyframes slideIn {
    from {
        transform: translateY(-10px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .alert {
        padding: 14px 16px;
        margin: 15px 0;
    }
    
    .alert-header {
        gap: 10px;
    }
    
    .alert-icon {
        font-size: 1em;
        
    }
    
    .alert-type {
        font-size: 1em;
        vertical-align: middle;
    }
    
    .alert-text {
        font-size: 14px;
    }
}