/* DataGrade — habillage météo de l'interface élève (voir app/weather.php).
   FICHIER GÉNÉRÉ par tools/gen-meteo-frost.py : ne pas l'éditer à la main.

   <body class="meteo-froid"> : il fait froid  → givre léger dans les coins
   <body class="meteo-gel">   : il gèle        → givre marqué + glaçons sous la barre
   .meteo-snow                : il neige       → quelques flocons
   .meteo-rain                : il pleut       → de fins traits de pluie
   <body class="meteo-chaud"> : canicule (≥ 32 °C) → halo de soleil dans le coin
   .eleve-liu.is-meteo-*      : Liu en tenue d'hiver, prise dans la glace, ou sous son parapluie
   Les décors ne captent aucun clic et restent sous les fenêtres et les menus. */

/* ── Pastille météo de la barre du haut (toujours là quand la météo est connue) ── */
.eleve-topbar__meteo {
    display: inline-flex; align-items: center; gap: 5px; flex: none; cursor: default;
    padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1.2;
    font-variant-numeric: tabular-nums; white-space: nowrap;
    color: var(--ink-muted); background: var(--line-soft);
}
.eleve-topbar__meteo span { font-size: 13px; }
body.meteo-froid .eleve-topbar__meteo, body.meteo-gel .eleve-topbar__meteo {
    color: color-mix(in srgb, #0369a1 72%, var(--ink));
    background: color-mix(in srgb, #7dd3fc 26%, var(--bg-elev));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #7dd3fc 55%, transparent);
}
body.meteo-chaud .eleve-topbar__meteo {
    color: color-mix(in srgb, #c2410c 78%, var(--ink));
    background: color-mix(in srgb, #fdba74 30%, var(--bg-elev));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fb923c 50%, transparent);
}
@media (max-width: 720px) { .eleve-topbar__meteo { padding: 3px 8px; font-size: 11.5px; } }

/* ── Givre dans les quatre coins de la fenêtre ── */
.meteo-frost { position: fixed; inset: 0; z-index: 45; pointer-events: none; overflow: hidden; }
.meteo-frost i {
    position: absolute; width: min(34vw, 340px); aspect-ratio: 1;
    background: url("../img/meteo/givre.svg") no-repeat 0 0 / 100% 100%;
    filter: drop-shadow(0 0 2px rgba(56, 149, 222, .55));
    opacity: 0; transition: opacity 1.2s ease;
}
.meteo-frost i:nth-child(1) { top: 0; left: 0; }
.meteo-frost i:nth-child(2) { top: 0; right: 0; transform: scaleX(-1); }
.meteo-frost i:nth-child(3) { bottom: 0; left: 0; transform: scaleY(-1); }
.meteo-frost i:nth-child(4) { bottom: 0; right: 0; transform: scale(-1); }
body.meteo-froid .meteo-frost i { opacity: .5; width: min(24vw, 230px); }
body.meteo-gel .meteo-frost i { opacity: .95; }
/* un voile de buée froide sur les bords, à peine visible */
body.meteo-gel .meteo-frost::before {
    content: ""; position: absolute; inset: 0;
    box-shadow: inset 0 0 90px 10px rgba(186, 225, 255, .28);
}

/* ── Glaçons sous la barre du haut (seulement quand il gèle) ── */
.meteo-icicles { display: none; }
body.meteo-gel .eleve-topbar { border-bottom-color: #cfe8fb; box-shadow: inset 0 -2px 0 rgba(207, 232, 251, .9); }
body.meteo-froid .eleve-topbar { border-bottom-color: color-mix(in srgb, #bfe3fb 60%, var(--line)); }
body.meteo-gel .meteo-icicles {
    display: block; position: absolute; left: 0; right: 0; top: 100%; height: 26px; pointer-events: none;
    background: url("../img/meteo/glacons.svg") repeat-x 0 0 / 420px 26px;
    filter: drop-shadow(0 2px 2px rgba(30, 80, 140, .22));
    animation: meteo-icicles-in 1.4s ease both;
}
@keyframes meteo-icicles-in { from { transform: scaleY(0); transform-origin: top; opacity: 0; } to { transform: scaleY(1); transform-origin: top; opacity: 1; } }

/* ── Flocons (quand il neige) ── */
.meteo-snow { position: fixed; inset: 0; z-index: 44; pointer-events: none; overflow: hidden; }
.meteo-snow span {
    position: absolute; top: -12px; border-radius: 50%;
    background: #fff; box-shadow: 0 0 4px rgba(125, 190, 240, .9), 0 0 0 1px rgba(160, 205, 245, .35);
    animation: meteo-fall linear infinite;
}
@keyframes meteo-fall {
    from { transform: translate(0, -5vh); opacity: 0; }
    8%   { opacity: .95; }
    92%  { opacity: .9; }
    to   { transform: translate(var(--drift, 0), 106vh); opacity: 0; }
}
.meteo-snow span:nth-child(1) { left: 32.7%; width: 3.6px; height: 3.6px; animation-duration: 15.5s; animation-delay: -1.4s; --drift: 3px; }
.meteo-snow span:nth-child(2) { left: 36.8%; width: 3.2px; height: 3.2px; animation-duration: 14.1s; animation-delay: -0.7s; --drift: -5px; }
.meteo-snow span:nth-child(3) { left: 7.8%; width: 3.4px; height: 3.4px; animation-duration: 13.2s; animation-delay: -15.7s; --drift: -30px; }
.meteo-snow span:nth-child(4) { left: 22.9%; width: 5.5px; height: 5.5px; animation-duration: 18.5s; animation-delay: -11.0s; --drift: -8px; }
.meteo-snow span:nth-child(5) { left: 96.7%; width: 3.2px; height: 3.2px; animation-duration: 17.6s; animation-delay: -5.5s; --drift: -28px; }
.meteo-snow span:nth-child(6) { left: 12.5%; width: 4.2px; height: 4.2px; animation-duration: 17.2s; animation-delay: -3.4s; --drift: 7px; }
.meteo-snow span:nth-child(7) { left: 63.6%; width: 4.5px; height: 4.5px; animation-duration: 14.5s; animation-delay: -1.2s; --drift: -35px; }
.meteo-snow span:nth-child(8) { left: 21.2%; width: 5.7px; height: 5.7px; animation-duration: 13.3s; animation-delay: -6.0s; --drift: 7px; }
.meteo-snow span:nth-child(9) { left: 45.4%; width: 4.2px; height: 4.2px; animation-duration: 16.9s; animation-delay: -13.3s; --drift: -20px; }
.meteo-snow span:nth-child(10) { left: 57.3%; width: 5.1px; height: 5.1px; animation-duration: 17.8s; animation-delay: -13.9s; --drift: -17px; }
.meteo-snow span:nth-child(11) { left: 97.1%; width: 3.5px; height: 3.5px; animation-duration: 13.2s; animation-delay: -14.4s; --drift: -28px; }
.meteo-snow span:nth-child(12) { left: 48.9%; width: 3.2px; height: 3.2px; animation-duration: 15.7s; animation-delay: -14.5s; --drift: 6px; }
.meteo-snow span:nth-child(13) { left: 86.8%; width: 4.3px; height: 4.3px; animation-duration: 16.0s; animation-delay: -11.3s; --drift: 6px; }
.meteo-snow span:nth-child(14) { left: 45.7%; width: 6.4px; height: 6.4px; animation-duration: 18.4s; animation-delay: -9.0s; --drift: 13px; }
.meteo-snow span:nth-child(15) { left: 6.9%; width: 5.8px; height: 5.8px; animation-duration: 15.5s; animation-delay: -18.9s; --drift: 26px; }
.meteo-snow span:nth-child(16) { left: 28.9%; width: 4.5px; height: 4.5px; animation-duration: 15.7s; animation-delay: -0.4s; --drift: -3px; }
.meteo-snow span:nth-child(17) { left: 17.5%; width: 3.5px; height: 3.5px; animation-duration: 9.6s; animation-delay: -14.6s; --drift: -30px; }
.meteo-snow span:nth-child(18) { left: 25.3%; width: 4.6px; height: 4.6px; animation-duration: 17.7s; animation-delay: -1.5s; --drift: -4px; }

/* ── Pluie (quand il pleut) : de fins traits obliques, très discrets ── */
.meteo-rain { position: fixed; inset: 0; z-index: 44; pointer-events: none; overflow: hidden; transform: rotate(9deg) scale(1.15); }
.meteo-rain span {
    position: absolute; top: -70px; width: 1.5px; border-radius: 2px;
    background: linear-gradient(to bottom, rgba(96, 165, 250, 0), rgba(96, 165, 250, .5));
    animation: meteo-rain linear infinite;
}
@keyframes meteo-rain { from { transform: translateY(0); } to { transform: translateY(110vh); } }
.meteo-rain span:nth-child(1) { left: 25.9%; height: 50px; animation-duration: 1.38s; animation-delay: -1.36s; }
.meteo-rain span:nth-child(2) { left: 18.6%; height: 35px; animation-duration: 1.00s; animation-delay: -0.36s; }
.meteo-rain span:nth-child(3) { left: 73.4%; height: 32px; animation-duration: 1.27s; animation-delay: -0.34s; }
.meteo-rain span:nth-child(4) { left: 29.5%; height: 42px; animation-duration: 1.49s; animation-delay: -0.97s; }
.meteo-rain span:nth-child(5) { left: 1.4%; height: 37px; animation-duration: 1.00s; animation-delay: -1.39s; }
.meteo-rain span:nth-child(6) { left: 81.0%; height: 54px; animation-duration: 1.48s; animation-delay: -1.19s; }
.meteo-rain span:nth-child(7) { left: 94.9%; height: 53px; animation-duration: 1.08s; animation-delay: -1.36s; }
.meteo-rain span:nth-child(8) { left: 48.7%; height: 52px; animation-duration: 1.29s; animation-delay: -0.69s; }
.meteo-rain span:nth-child(9) { left: 36.4%; height: 42px; animation-duration: 1.12s; animation-delay: -0.19s; }
.meteo-rain span:nth-child(10) { left: 82.0%; height: 54px; animation-duration: 1.59s; animation-delay: -1.11s; }
.meteo-rain span:nth-child(11) { left: 55.4%; height: 52px; animation-duration: 0.99s; animation-delay: -1.08s; }
.meteo-rain span:nth-child(12) { left: 44.3%; height: 34px; animation-duration: 1.04s; animation-delay: -0.84s; }
.meteo-rain span:nth-child(13) { left: 25.3%; height: 43px; animation-duration: 1.32s; animation-delay: -0.63s; }
.meteo-rain span:nth-child(14) { left: 13.1%; height: 44px; animation-duration: 1.06s; animation-delay: -0.38s; }
.meteo-rain span:nth-child(15) { left: 19.4%; height: 40px; animation-duration: 0.95s; animation-delay: -1.04s; }
.meteo-rain span:nth-child(16) { left: 95.4%; height: 40px; animation-duration: 1.40s; animation-delay: -1.49s; }
.meteo-rain span:nth-child(17) { left: 4.3%; height: 33px; animation-duration: 1.46s; animation-delay: -1.34s; }
.meteo-rain span:nth-child(18) { left: 63.9%; height: 33px; animation-duration: 1.19s; animation-delay: -1.39s; }
.meteo-rain span:nth-child(19) { left: 88.6%; height: 54px; animation-duration: 1.04s; animation-delay: -1.37s; }
.meteo-rain span:nth-child(20) { left: 37.5%; height: 51px; animation-duration: 1.00s; animation-delay: -1.55s; }
.meteo-rain span:nth-child(21) { left: 60.4%; height: 51px; animation-duration: 1.05s; animation-delay: -0.99s; }
.meteo-rain span:nth-child(22) { left: 58.1%; height: 47px; animation-duration: 1.15s; animation-delay: -1.16s; }

/* ── Canicule : un halo de soleil chaud dans le coin haut droit, qui respire lentement ── */
.meteo-heat {
    position: fixed; top: -22vmax; right: -22vmax; width: 60vmax; height: 60vmax; z-index: 44; pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(253, 186, 116, .38) 0%, rgba(251, 191, 36, .16) 38%, rgba(251, 191, 36, 0) 68%);
    animation: meteo-heat 7s ease-in-out infinite;
}
@keyframes meteo-heat { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.06); opacity: 1; } }

/* ── Liu habillée selon la météo (tableau de bord élève) ── */
.eleve-liu.is-meteo-froid { background: radial-gradient(circle at 50% 40%, #ffffff 0%, #f1ecff 62%, #e2d9ff 100%); }
.eleve-liu.is-meteo-gel {
    background: radial-gradient(circle at 50% 38%, #ffffff 0%, #e3f3ff 60%, #c4e4fb 100%);
    box-shadow: 0 10px 26px rgba(56, 149, 222, .28), 0 0 0 4px #fff, 0 0 0 5px #bfe0f8, 0 0 22px 6px rgba(186, 225, 255, .55);
}
.eleve-liu.is-meteo-chaud { background: radial-gradient(circle at 50% 40%, #ffffff 0%, #fff4e0 62%, #ffe2b8 100%); box-shadow: 0 10px 24px rgba(234, 88, 12, .2), 0 0 0 4px #fff, 0 0 0 5px #fed7aa; }
.eleve-liu.is-meteo-pluie { background: radial-gradient(circle at 50% 40%, #ffffff 0%, #eef4ff 62%, #dbe7fb 100%); }
/* la Liu figée dans la glace ne fait pas coucou : elle grelotte */
.eleve-liu.is-meteo-gel.eleve-liu--hello, .eleve-liu.is-meteo-gel.eleve-liu--sleep { animation: meteo-shiver 2.6s ease-in-out infinite; }
@keyframes meteo-shiver {
    0%, 72%, 100% { transform: translateX(0); }
    75% { transform: translateX(-1.5px); } 78% { transform: translateX(1.5px); }
    81% { transform: translateX(-1.5px); } 84% { transform: translateX(1.5px); } 87% { transform: translateX(0); }
}

/* Pas d'animation pour qui les a désactivées ; rien à l'impression. */
@media (prefers-reduced-motion: reduce) {
    .meteo-snow, .meteo-rain { display: none; }
    .eleve-liu.is-meteo-gel { animation: none !important; }
    .meteo-heat { animation: none; }
    .meteo-frost i { transition: none; }
    body.meteo-gel .meteo-icicles { animation: none; }
}
@media print { .meteo-frost, .meteo-snow, .meteo-rain, .meteo-heat, .meteo-icicles { display: none !important; } }