/* ═══════════════════════════════════════════════════════════════
   Moirans Pratique — Animation de la carte Météo (js/meteo-anim.js)
   Couche décorative derrière le contenu de #home-meteo.
   Préfixe « ma- ». Uniquement transform / opacity (fluide et léger).
   ═══════════════════════════════════════════════════════════════ */

#home-meteo > :not(.meteo-anim) { position: relative; z-index: 1; }

.meteo-anim {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
}
.meteo-anim i { position: absolute; display: block; }

/* Teinte d'ambiance selon le temps */
#home-meteo[data-meteo="soleil"]      .meteo-anim { background: radial-gradient(70% 90% at 100% 0%, rgba(255,196,64,.28), transparent 65%); }
#home-meteo[data-meteo="eclaircies"]  .meteo-anim { background: radial-gradient(60% 80% at 100% 0%, rgba(255,196,64,.18), transparent 65%); }
#home-meteo[data-meteo="nuit"],
#home-meteo[data-meteo="nuit-nuages"] { --ma-nuit: 1; }
#home-meteo[data-meteo^="nuit"]       .meteo-anim { background: linear-gradient(180deg, rgba(30,40,110,.35), transparent 75%); }
#home-meteo[data-meteo="nuages"]      .meteo-anim { background: linear-gradient(180deg, rgba(148,163,184,.16), transparent 70%); }
#home-meteo[data-meteo="brouillard"]  .meteo-anim { background: linear-gradient(180deg, rgba(203,213,225,.14), rgba(203,213,225,.06)); }
#home-meteo[data-meteo="bruine"]      .meteo-anim,
#home-meteo[data-meteo="pluie"]       .meteo-anim { background: linear-gradient(180deg, rgba(96,165,250,.18), transparent 75%); }
#home-meteo[data-meteo="orage"]       .meteo-anim { background: linear-gradient(180deg, rgba(76,29,149,.32), rgba(30,41,59,.12)); }
#home-meteo[data-meteo="neige"]       .meteo-anim { background: linear-gradient(180deg, rgba(224,242,254,.14), transparent 75%); }

/* ── Soleil ─────────────────────────────────────────────────────── */
.ma-soleil {
  top: -46px; right: -40px;
  width: 150px; height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,214,102,.95) 0 26%, rgba(255,190,60,.35) 27% 40%, transparent 62%);
  animation: ma-pulse 5s ease-in-out infinite;
}
.ma-rayons {
  inset: -30px;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(255,214,102,.22) 0 6deg, transparent 6deg 22deg);
  -webkit-mask: radial-gradient(circle, transparent 34%, #000 36%, transparent 70%);
          mask: radial-gradient(circle, transparent 34%, #000 36%, transparent 70%);
  animation: ma-tourne 40s linear infinite;
}
@keyframes ma-pulse { 50% { transform: scale(1.06); } }
@keyframes ma-tourne { to { transform: rotate(360deg); } }

/* ── Nuit ───────────────────────────────────────────────────────── */
.ma-lune {
  top: 14px; right: 22px;
  width: 38px; height: 38px;
  border-radius: 50%;
  box-shadow: inset -11px -4px 0 0 rgba(241,245,255,.92);
  filter: drop-shadow(0 0 10px rgba(200,215,255,.45));
  transform: rotate(-20deg);
}
.ma-etoile {
  width: var(--t, 2px); height: var(--t, 2px);
  border-radius: 50%;
  background: #fff;
  opacity: .25;
  animation: ma-scintille 3.2s ease-in-out infinite;
  animation-delay: var(--retard, 0s);
}
@keyframes ma-scintille { 50% { opacity: .95; transform: scale(1.3); } }

/* ── Nuages ─────────────────────────────────────────────────────── */
.ma-nuage {
  top: var(--haut, 10%);
  left: 0;
  width: var(--taille, 120px);
  height: calc(var(--taille, 120px) * .34);
  border-radius: 999px;
  background: rgba(226,232,240,calc(var(--op, .5) * .5));
  filter: blur(3px);
  animation: ma-derive var(--duree, 50s) linear infinite;
  animation-delay: var(--retard, 0s);
}
.ma-nuage::before, .ma-nuage::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: inherit;
}
.ma-nuage::before { width: 46%; height: 140%; left: 16%; bottom: 30%; }
.ma-nuage::after  { width: 34%; height: 110%; left: 52%; bottom: 36%; }
@keyframes ma-derive {
  from { transform: translateX(-160px); }
  to   { transform: translateX(calc(100vw + 40px)); }
}

/* ── Brouillard ─────────────────────────────────────────────────── */
.ma-brume {
  left: -50%;
  width: 200%; height: 26%;
  background: linear-gradient(90deg, transparent, rgba(226,232,240,.22) 20%, rgba(226,232,240,.08) 50%, rgba(226,232,240,.22) 80%, transparent);
  filter: blur(6px);
  animation: ma-brume var(--duree, 20s) ease-in-out infinite alternate;
  animation-delay: var(--retard, 0s);
}
@keyframes ma-brume { to { transform: translateX(25%); } }

/* ── Pluie ──────────────────────────────────────────────────────── */
.ma-pluie {
  position: absolute; inset: -20% -10% 0;
  transform: skewX(calc(-1 * var(--pente, 0deg)));
}
.ma-goutte {
  top: -12%;
  width: 1.6px; height: 16px;
  border-radius: 2px;
  background: linear-gradient(transparent, rgba(186,220,255,.75));
  animation: ma-tombe var(--duree, .9s) linear infinite;
  animation-delay: var(--retard, 0s);
}
.ma-goutte--fine { width: 1px; height: 9px; opacity: .7; }
@keyframes ma-tombe { to { transform: translateY(420px); } }

/* ── Neige ──────────────────────────────────────────────────────── */
.ma-flocon {
  top: -10px;
  width: var(--t, 4px); height: var(--t, 4px);
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  box-shadow: 0 0 4px rgba(255,255,255,.6);
  animation: ma-neige var(--duree, 7s) linear infinite;
  animation-delay: var(--retard, 0s);
}
@keyframes ma-neige {
  50%  { transform: translate(var(--derive, 10px), 160px); }
  100% { transform: translate(calc(var(--derive, 10px) * -.5), 330px); }
}

/* ── Orage : éclair ponctuel ────────────────────────────────────── */
.ma-eclair {
  inset: 0;
  background: rgba(230,230,255,.55);
  opacity: 0;
  animation: ma-eclair 7s linear infinite;
}
@keyframes ma-eclair {
  0%, 89%, 93%, 100% { opacity: 0; }
  90% { opacity: .9; }
  91% { opacity: .1; }
  92% { opacity: .6; }
}

/* ── Sobriété ───────────────────────────────────────────────────── */
.meteo-anim-pause .meteo-anim *,
.meteo-anim-pause .meteo-anim *::before,
.meteo-anim-pause .meteo-anim *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .meteo-anim *, .meteo-anim *::before, .meteo-anim *::after { animation: none !important; }
  .ma-eclair { display: none; }
}