@charset "UTF-8";

/* Scene horaire dynamique: soleil, midi, soir et nuit. */
:root {
    --time-scene-x: 0.5;
    --time-scene-y: 0.35;
    --scene-backdrop: linear-gradient(180deg, #fff8ed 0%, #eef5fe 45%, #eef3f9 100%);
    --scene-haze: rgba(8, 42, 146, 0.12);
    --scene-stars-opacity: 0;
    --scene-card-shadow: 0 24px 56px rgba(15, 23, 42, 0.12);
    --sun-left: 16%;
    --sun-top: 16%;
    --moon-left: 78%;
    --moon-top: 18%;
    --orb-scale: 1;
    --orb-rotate: 0deg;
}

body.login-page {
    background: var(--scene-backdrop);
}

body.login-page::before,
body.login-page::after {
    background: none;
    opacity: 0;
    animation: none;
    transform: none;
    filter: none;
}

.time-scene {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.time-scene__sky,
.time-scene__stars,
.time-scene__mist,
.time-scene__glow {
    position: absolute;
    inset: 0;
}

.time-scene__sky {
    inset: -8%;
    background: var(--scene-backdrop);
    transition: background 700ms ease, opacity 700ms ease;
}

.time-scene__sky::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.7), transparent 22%),
        radial-gradient(circle at 84% 14%, rgba(255, 255, 255, 0.5), transparent 18%),
        radial-gradient(circle at 64% 76%, rgba(255, 255, 255, 0.26), transparent 20%),
        radial-gradient(circle at 42% 34%, rgba(8, 42, 146, 0.08), transparent 26%);
    opacity: 0.12;
    transition: opacity 700ms ease;
}

.time-scene__sky::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.15) 42%, transparent 100%),
        radial-gradient(circle at 50% 100%, var(--scene-haze), transparent 36%);
    mix-blend-mode: screen;
    opacity: 0.75;
}

.time-scene__stars {
    opacity: var(--scene-stars-opacity);
    transition: opacity 700ms ease;
    z-index: 1;
}

.time-scene__star {
    position: absolute;
    left: var(--star-x);
    top: var(--star-y);
    width: var(--star-size);
    height: var(--star-size);
    border-radius: 50%;
    background: rgba(255, 255, 255, var(--star-opacity));
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.55);
    opacity: 0.88;
    transform: translate(-50%, -50%) scale(1);
    animation: starTwinkle var(--star-duration) ease-in-out infinite;
    animation-delay: var(--star-delay);
}

.time-scene__mist {
    z-index: 2;
    inset: auto -12% -14%;
    height: 44%;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.6), transparent 54%),
        radial-gradient(circle at 50% 28%, rgba(8, 42, 146, 0.08), transparent 46%);
    filter: blur(28px);
    opacity: 0.55;
    transform: translate3d(calc((var(--time-scene-x) - 0.5) * 14px), calc((var(--time-scene-y) - 0.35) * 12px), 0);
}

.time-scene__glow {
    z-index: 2;
    inset: -10%;
    background:
        radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.48), transparent 20%),
        radial-gradient(circle at 50% 52%, rgba(8, 42, 146, 0.1), transparent 34%);
    filter: blur(34px);
    opacity: 0.7;
    transform: translate3d(calc((var(--time-scene-x) - 0.5) * 12px), calc((var(--time-scene-y) - 0.35) * 10px), 0);
    transition: opacity 700ms ease, transform 700ms ease;
    mix-blend-mode: screen;
}

.time-scene__orb {
    position: absolute;
    z-index: 3;
    width: clamp(180px, 18vw, 300px);
    max-width: none;
    opacity: 0;
    transform:
        translate3d(
            calc((var(--time-scene-x) - 0.5) * 34px),
            calc((var(--time-scene-y) - 0.35) * 24px),
            0
        )
        rotateZ(var(--orb-rotate, 0deg))
        scale(var(--orb-scale, 1));
    transform-origin: 50% 50%;
    transition: opacity 520ms ease, transform 520ms ease, filter 520ms ease;
    filter: drop-shadow(0 28px 40px rgba(15, 23, 42, 0.14));
}

.time-scene__orb--sun {
    left: var(--sun-left);
    top: var(--sun-top);
}

.time-scene__orb--moon {
    left: var(--moon-left);
    top: var(--moon-top);
    filter: drop-shadow(0 22px 36px rgba(255, 255, 255, 0.12));
}

body.login-page[data-time-slot="morning"] {
    --scene-backdrop: linear-gradient(180deg, #fff6df 0%, #eff6ff 44%, #eef3f9 100%);
    --scene-haze: rgba(245, 158, 11, 0.18);
    --scene-stars-opacity: 0;
    --scene-card-shadow: 0 22px 54px rgba(245, 158, 11, 0.1);
}

body.login-page[data-time-slot="midday"] {
    --scene-backdrop: linear-gradient(180deg, #f5fbff 0%, #eef4fb 46%, #eaf1f9 100%);
    --scene-haze: rgba(8, 42, 146, 0.12);
    --scene-stars-opacity: 0;
    --scene-card-shadow: 0 22px 54px rgba(8, 42, 146, 0.1);
}

body.login-page[data-time-slot="evening"] {
    --scene-backdrop: linear-gradient(180deg, #fff0e0 0%, #eef1fa 46%, #e8eef7 100%);
    --scene-haze: rgba(248, 113, 113, 0.16);
    --scene-stars-opacity: 0.14;
    --scene-card-shadow: 0 22px 54px rgba(248, 113, 113, 0.09);
}

body.login-page[data-time-slot="night"] {
    --scene-backdrop: linear-gradient(180deg, #07111f 0%, #091528 48%, #0b1220 100%);
    --scene-haze: rgba(96, 165, 250, 0.16);
    --scene-stars-opacity: 0.85;
    --scene-card-shadow: 0 24px 58px rgba(5, 10, 20, 0.32);
}

body.login-page[data-time-slot="morning"] .time-scene__orb--sun,
body.login-page[data-time-slot="midday"] .time-scene__orb--sun,
body.login-page[data-time-slot="evening"] .time-scene__orb--sun {
    opacity: 1;
}

body.login-page[data-time-slot="night"] .time-scene__orb--moon {
    opacity: 1;
}

body.login-page[data-time-slot="night"] .time-scene__orb--sun {
    opacity: 0;
}

.login-stage {
    position: relative;
    z-index: 1;
}

.login-card {
    z-index: 1;
    box-shadow: var(--scene-card-shadow);
}

body.login-page[data-time-slot="morning"] .login-card {
    box-shadow: 0 24px 58px rgba(245, 158, 11, 0.08);
}

body.login-page[data-time-slot="midday"] .login-card {
    box-shadow: 0 24px 58px rgba(8, 42, 146, 0.08);
}

body.login-page[data-time-slot="evening"] .login-card {
    box-shadow: 0 24px 58px rgba(248, 113, 113, 0.08);
}

body.login-page[data-time-slot="night"] .login-card {
    box-shadow: 0 26px 64px rgba(5, 10, 20, 0.34);
}

@media (max-width: 768px) {
    .time-scene__orb {
        width: clamp(140px, 38vw, 220px);
        opacity: 0.65;
    }

    .time-scene__mist {
        opacity: 0.35;
    }

    .time-scene__sky::before {
        opacity: calc(var(--scene-stars-opacity) * 0.55);
    }
}

@media (prefers-reduced-motion: reduce) {
    .time-scene__star,
    .time-scene__orb,
    .time-scene__mist,
    .time-scene__glow,
    .time-scene__sky,
    .time-scene__stars {
        animation: none !important;
        transition: none !important;
    }
}

@keyframes starTwinkle {
    0%,
    100% {
        opacity: 0.65;
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.25);
    }
}

.login-card::before {
    opacity: 0.18;
    mix-blend-mode: normal;
}

.login-card.is-tilted {
    box-shadow: var(--scene-card-shadow);
}

body.login-page[data-time-slot="morning"] .login-card.is-tilted {
    box-shadow: 0 28px 64px rgba(245, 158, 11, 0.12);
}

body.login-page[data-time-slot="midday"] .login-card.is-tilted {
    box-shadow: 0 28px 64px rgba(8, 42, 146, 0.12);
}

body.login-page[data-time-slot="evening"] .login-card.is-tilted {
    box-shadow: 0 28px 64px rgba(248, 113, 113, 0.12);
}

body.login-page[data-time-slot="night"] .login-card.is-tilted {
    box-shadow: 0 30px 70px rgba(5, 10, 20, 0.38);
}

/* Scene pro: meteo, lumiere et couches cinematographiques. */
:root {
    --weather-cloud-opacity: 0;
    --weather-rain-opacity: 0;
    --weather-snow-opacity: 0;
    --weather-wind-opacity: 0;
    --weather-fog-opacity: 0;
    --weather-flash-opacity: 0;
    --scene-haze: rgba(8, 42, 146, 0.12);
    --scene-glow-strength: 1;
    --scene-mist-strength: 1;
}

body.login-page {
    overflow-x: hidden;
    background:
        radial-gradient(circle at 18% 20%, rgba(8, 42, 146, 0.08), transparent 24%),
        radial-gradient(circle at 84% 18%, rgba(255, 255, 255, 0.52), transparent 18%),
        radial-gradient(circle at 50% 88%, rgba(8, 42, 146, 0.05), transparent 26%),
        linear-gradient(180deg, #f7f9fc 0%, #eef3f9 100%);
}

body.login-page::before {
    background:
        radial-gradient(circle at calc(var(--scene-x, 50%) + 8%) calc(var(--scene-y, 50%) + 6%), rgba(8, 42, 146, 0.1), transparent 28%),
        radial-gradient(circle at 18% 76%, rgba(255, 255, 255, 0.46), transparent 20%),
        radial-gradient(circle at 86% 24%, rgba(8, 42, 146, 0.05), transparent 18%);
    filter: blur(34px);
    opacity: 0.72;
    transform: translate3d(calc(var(--scene-depth-x, 0px) * 0.08), calc(var(--scene-depth-y, 0px) * 0.08), 0) scale(1.02);
    animation: loginSceneDrift 26s ease-in-out infinite alternate;
}

body.login-page::after {
    background:
        linear-gradient(rgba(15, 23, 42, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.02) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(circle at center, black 24%, transparent 82%);
    opacity: 0.045;
    transform: none;
}

body.login-page[data-time-slot="morning"] {
    background:
        radial-gradient(circle at 18% 20%, rgba(245, 158, 11, 0.1), transparent 24%),
        radial-gradient(circle at 84% 18%, rgba(255, 255, 255, 0.54), transparent 18%),
        radial-gradient(circle at 50% 88%, rgba(8, 42, 146, 0.05), transparent 26%),
        linear-gradient(180deg, #fff8e9 0%, #eff5fb 100%);
}

body.login-page[data-time-slot="midday"] {
    background:
        radial-gradient(circle at 18% 20%, rgba(8, 42, 146, 0.08), transparent 24%),
        radial-gradient(circle at 84% 18%, rgba(255, 255, 255, 0.6), transparent 18%),
        radial-gradient(circle at 50% 88%, rgba(8, 42, 146, 0.05), transparent 26%),
        linear-gradient(180deg, #f7f9fc 0%, #eef3f9 100%);
}

body.login-page[data-time-slot="evening"] {
    background:
        radial-gradient(circle at 18% 20%, rgba(249, 115, 22, 0.12), transparent 24%),
        radial-gradient(circle at 84% 18%, rgba(255, 255, 255, 0.42), transparent 18%),
        radial-gradient(circle at 50% 88%, rgba(8, 42, 146, 0.06), transparent 26%),
        linear-gradient(180deg, #fff2e7 0%, #eef2f8 100%);
}

body.login-page[data-time-slot="night"] {
    background:
        radial-gradient(circle at 18% 20%, rgba(96, 165, 250, 0.16), transparent 24%),
        radial-gradient(circle at 84% 18%, rgba(255, 255, 255, 0.08), transparent 18%),
        radial-gradient(circle at 50% 88%, rgba(8, 42, 146, 0.08), transparent 26%),
        linear-gradient(180deg, #07111f 0%, #091528 48%, #0b1220 100%);
}

body.login-page[data-weather-mode="clouds"] {
    --scene-haze: rgba(148, 163, 184, 0.18);
}

body.login-page[data-weather-mode="rain"] {
    --scene-haze: rgba(59, 130, 246, 0.2);
}

body.login-page[data-weather-mode="storm"] {
    --scene-haze: rgba(96, 165, 250, 0.24);
}

body.login-page[data-weather-mode="snow"] {
    --scene-haze: rgba(255, 255, 255, 0.3);
}

body.login-page[data-weather-mode="fog"] {
    --scene-haze: rgba(226, 232, 240, 0.34);
}

body.login-page[data-weather-mode="wind"] {
    --scene-haze: rgba(148, 163, 184, 0.16);
}

.time-scene {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    perspective: 1200px;
}

.time-scene__sky,
.time-scene__stars,
.time-scene__weather,
.time-scene__cinema,
.time-scene__mist,
.time-scene__glow {
    position: absolute;
    inset: 0;
}

.time-scene__sky {
    inset: -8%;
    background: var(--scene-backdrop);
    transition: background 700ms ease, opacity 700ms ease;
}

.time-scene__sky::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.72), transparent 22%),
        radial-gradient(circle at 84% 14%, rgba(255, 255, 255, 0.48), transparent 18%),
        radial-gradient(circle at 64% 76%, rgba(255, 255, 255, 0.2), transparent 20%),
        radial-gradient(circle at 42% 34%, rgba(8, 42, 146, 0.08), transparent 26%);
    opacity: 0.12;
    transition: opacity 700ms ease;
}

.time-scene__sky::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.14) 42%, transparent 100%),
        radial-gradient(circle at 50% 100%, var(--scene-haze), transparent 36%);
    mix-blend-mode: screen;
    opacity: 0.78;
}

.time-scene__stars {
    z-index: 1;
    opacity: var(--scene-stars-opacity);
    transition: opacity 700ms ease;
}

.time-scene__star {
    position: absolute;
    left: var(--star-x);
    top: var(--star-y);
    width: var(--star-size);
    height: var(--star-size);
    border-radius: 50%;
    background: rgba(255, 255, 255, var(--star-opacity));
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.55);
    opacity: 0.88;
    transform: translate(-50%, -50%) scale(1);
    animation: starTwinkle var(--star-duration) ease-in-out infinite;
    animation-delay: var(--star-delay);
}

.time-scene__weather {
    z-index: 2;
    overflow: hidden;
    mix-blend-mode: screen;
}

.time-scene__clouds,
.time-scene__rain,
.time-scene__snow,
.time-scene__wind,
.time-scene__fog,
.time-scene__flash {
    position: absolute;
    inset: 0;
}

.time-scene__clouds {
    opacity: var(--weather-cloud-opacity);
}

.time-scene__cloud {
    position: absolute;
    left: var(--cloud-x);
    top: var(--cloud-y);
    width: var(--cloud-width);
    height: var(--cloud-height);
    opacity: var(--cloud-alpha);
    border-radius: 999px;
    background:
        radial-gradient(circle at 24% 62%, rgba(255, 255, 255, 0.96) 0 20%, transparent 21%),
        radial-gradient(circle at 46% 36%, rgba(255, 255, 255, 0.9) 0 28%, transparent 29%),
        radial-gradient(circle at 70% 58%, rgba(255, 255, 255, 0.84) 0 23%, transparent 24%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(245, 248, 255, 0.74));
    filter: blur(var(--cloud-blur)) saturate(1.02);
    transform: translate3d(0, 0, 0) scale(var(--cloud-scale));
    animation: cloudDrift var(--cloud-duration) ease-in-out infinite alternate;
    animation-delay: var(--cloud-delay);
}

.time-scene__rain {
    opacity: var(--weather-rain-opacity);
}

.time-scene__drop {
    position: absolute;
    left: var(--drop-x);
    top: var(--drop-y);
    width: 1.4px;
    height: var(--drop-length);
    opacity: var(--drop-opacity);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9) 45%, rgba(255, 255, 255, 0.42));
    transform: translate3d(0, -30vh, 0) rotate(var(--drop-angle));
    animation: rainFall var(--drop-duration) linear infinite;
    animation-delay: var(--drop-delay);
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.18));
}

.time-scene__snow {
    opacity: var(--weather-snow-opacity);
}

.time-scene__flake {
    position: absolute;
    left: var(--flake-x);
    top: var(--flake-y);
    width: var(--flake-size);
    height: var(--flake-size);
    opacity: var(--flake-opacity);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.4);
    transform: translate3d(0, -22vh, 0);
    animation: snowFall var(--flake-duration) linear infinite;
    animation-delay: var(--flake-delay);
}

.time-scene__wind {
    opacity: var(--weather-wind-opacity);
}

.time-scene__gust {
    position: absolute;
    left: var(--gust-x);
    top: var(--gust-y);
    width: var(--gust-width);
    height: 2px;
    opacity: var(--gust-opacity);
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0));
    transform: translate3d(-30vw, 0, 0) rotate(var(--gust-tilt));
    animation: windSweep var(--gust-duration) linear infinite;
    animation-delay: var(--gust-delay);
}

.time-scene__fog {
    opacity: var(--weather-fog-opacity);
    background:
        radial-gradient(circle at 18% 70%, rgba(255, 255, 255, 0.22), transparent 28%),
        radial-gradient(circle at 50% 82%, rgba(255, 255, 255, 0.28), transparent 32%),
        radial-gradient(circle at 82% 74%, rgba(255, 255, 255, 0.2), transparent 24%);
    filter: blur(34px);
    mix-blend-mode: screen;
}

.time-scene__fog::before,
.time-scene__fog::after {
    content: "";
    position: absolute;
    inset: -10%;
    background:
        radial-gradient(circle at 20% 40%, rgba(255, 255, 255, 0.2), transparent 36%),
        radial-gradient(circle at 70% 58%, rgba(255, 255, 255, 0.12), transparent 30%);
    filter: blur(22px);
    animation: fogDrift 18s ease-in-out infinite alternate;
}

.time-scene__fog::after {
    animation-delay: -6s;
    opacity: 0.7;
}

.time-scene__flash {
    opacity: var(--weather-flash-opacity);
    background:
        radial-gradient(circle at 56% 14%, rgba(255, 255, 255, 0.88), transparent 18%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 36%);
    mix-blend-mode: screen;
}

.time-scene__flash::before,
.time-scene__flash::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 60% 18%, rgba(255, 255, 255, 0.75), transparent 20%);
    opacity: 0;
}

.time-scene__cinema {
    z-index: 3;
    background:
        radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.2), transparent 16%),
        radial-gradient(circle at 22% 24%, rgba(8, 42, 146, 0.14), transparent 28%),
        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.16), transparent 24%),
        linear-gradient(120deg, rgba(255, 255, 255, 0.04), transparent 24%, rgba(255, 255, 255, 0.05) 52%, transparent 78%);
    filter: blur(42px) saturate(1.08);
    opacity: calc(0.56 * var(--scene-glow-strength));
    mix-blend-mode: screen;
    transform: translate3d(calc((var(--time-scene-x) - 0.5) * 18px), calc((var(--time-scene-y) - 0.35) * 14px), 0);
}

.time-scene__mist {
    z-index: 4;
    inset: auto -12% -14%;
    height: 44%;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.6), transparent 54%),
        radial-gradient(circle at 50% 28%, rgba(8, 42, 146, 0.08), transparent 46%);
    filter: blur(28px);
    opacity: calc(0.4 * var(--scene-mist-strength));
    transform: translate3d(calc((var(--time-scene-x) - 0.5) * 14px), calc((var(--time-scene-y) - 0.35) * 12px), 0);
}

.time-scene__glow {
    z-index: 5;
    inset: -10%;
    background:
        radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.42), transparent 20%),
        radial-gradient(circle at 50% 52%, var(--scene-haze), transparent 34%);
    filter: blur(34px);
    opacity: calc(0.62 * var(--scene-glow-strength));
    transform: translate3d(calc((var(--time-scene-x) - 0.5) * 12px), calc((var(--time-scene-y) - 0.35) * 10px), 0);
    transition: opacity 700ms ease, transform 700ms ease;
    mix-blend-mode: screen;
}

.time-scene__orb {
    position: absolute;
    z-index: 6;
    width: clamp(180px, 18vw, 300px);
    max-width: none;
    opacity: 0;
    transform:
        translate3d(
            calc((var(--time-scene-x) - 0.5) * 34px),
            calc((var(--time-scene-y) - 0.35) * 24px),
            0
        )
        rotateZ(var(--orb-rotate, 0deg))
        scale(var(--orb-scale, 1));
    transform-origin: 50% 50%;
    transition: opacity 520ms ease, transform 520ms ease, filter 520ms ease;
    filter: drop-shadow(0 28px 40px rgba(15, 23, 42, 0.14));
}

.time-scene__orb--sun {
    left: var(--sun-left);
    top: var(--sun-top);
}

.time-scene__orb--moon {
    left: var(--moon-left);
    top: var(--moon-top);
    filter: drop-shadow(0 22px 36px rgba(255, 255, 255, 0.12));
}

body.login-page[data-time-slot="morning"] .time-scene__orb--sun,
body.login-page[data-time-slot="midday"] .time-scene__orb--sun,
body.login-page[data-time-slot="evening"] .time-scene__orb--sun {
    opacity: 1;
}

body.login-page[data-time-slot="night"] .time-scene__orb--moon {
    opacity: 1;
}

body.login-page[data-time-slot="night"] .time-scene__orb--sun {
    opacity: 0;
}

.login-stage {
    position: relative;
    z-index: 1;
}

.login-card {
    box-shadow: var(--scene-card-shadow);
}

.login-card.is-tilted {
    box-shadow: var(--scene-card-shadow);
}

body.login-page[data-weather-mode="storm"] .time-scene__flash {
    animation: stormFlash 8.5s ease-in-out infinite;
}

body.login-page[data-weather-mode="storm"] .time-scene__sky::before {
    opacity: 0.22;
}

body.login-page[data-weather-mode="fog"] .time-scene__fog {
    opacity: calc(var(--weather-fog-opacity) * 1.1);
}

body.login-page[data-weather-mode="rain"] .time-scene__rain,
body.login-page[data-weather-mode="storm"] .time-scene__rain,
body.login-page[data-weather-mode="snow"] .time-scene__snow,
body.login-page[data-weather-mode="wind"] .time-scene__wind,
body.login-page[data-weather-mode="fog"] .time-scene__fog {
    will-change: transform, opacity;
}

@media (min-width: 769px) {
    body.login-page {
        overflow: hidden;
    }
}

@media (max-width: 768px) {
    .login-stage {
        padding: 10px 8px 16px;
    }

    .login-card {
        width: min(460px, calc(100vw - 16px));
        grid-template-columns: 1fr;
        grid-template-areas:
            "content"
            "media";
        min-height: auto;
        border-radius: 18px;
        gap: 0;
    }

    .login-card__media {
        grid-area: media;
        display: block;
    }

    .login-card__content {
        grid-area: content;
        padding: clamp(24px, 8vw, 32px) clamp(18px, 6vw, 28px) 20px;
        transform: none;
    }

    .login-panel {
        width: min(100%, 420px);
        max-width: 100%;
    }

    .time-scene__orb {
        width: clamp(120px, 34vw, 180px);
        opacity: 0.56;
    }

    .time-scene__cinema,
    .time-scene__mist,
    .time-scene__glow {
        opacity: 0.64;
    }
}

@media (prefers-reduced-motion: reduce) {
    .time-scene__star,
    .time-scene__cloud,
    .time-scene__drop,
    .time-scene__flake,
    .time-scene__gust,
    .time-scene__fog::before,
    .time-scene__fog::after,
    .time-scene__flash,
    .time-scene__orb,
    .time-scene__mist,
    .time-scene__glow,
    .time-scene__sky,
    .time-scene__stars,
    .time-scene__cinema {
        animation: none !important;
        transition: none !important;
    }
}

@keyframes starTwinkle {
    0%,
    100% {
        opacity: 0.65;
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.25);
    }
}

@keyframes cloudDrift {
    0% {
        transform: translate3d(0, 0, 0) scale(var(--cloud-scale));
    }

    100% {
        transform: translate3d(var(--cloud-sway), -8px, 0) scale(var(--cloud-scale));
    }
}

@keyframes rainFall {
    0% {
        transform: translate3d(0, -30vh, 0) rotate(var(--drop-angle));
        opacity: 0;
    }

    10% {
        opacity: var(--drop-opacity);
    }

    100% {
        transform: translate3d(var(--drop-drift), 150vh, 0) rotate(var(--drop-angle));
        opacity: 0;
    }
}

@keyframes snowFall {
    0% {
        transform: translate3d(0, -22vh, 0) rotate(0deg);
        opacity: 0;
    }

    12% {
        opacity: var(--flake-opacity);
    }

    100% {
        transform: translate3d(var(--flake-drift), 145vh, 0) rotate(360deg);
        opacity: 0;
    }
}

@keyframes windSweep {
    0% {
        transform: translate3d(-30vw, 0, 0) rotate(var(--gust-tilt));
        opacity: 0;
    }

    12% {
        opacity: var(--gust-opacity);
    }

    88% {
        opacity: var(--gust-opacity);
    }

    100% {
        transform: translate3d(130vw, 0, 0) rotate(var(--gust-tilt));
        opacity: 0;
    }
}

@keyframes fogDrift {
    0% {
        transform: translate3d(-12px, 0, 0) scale(1);
    }

    100% {
        transform: translate3d(18px, -10px, 0) scale(1.04);
    }
}

@keyframes stormFlash {
    0%,
    72%,
    100% {
        opacity: 0;
    }

    74% {
        opacity: 0.08;
    }

    75% {
        opacity: 0.42;
    }

    76% {
        opacity: 0.12;
    }

    78% {
        opacity: 0.68;
    }

    79% {
        opacity: 0.04;
    }
}

/* Positionnement dynamique des astres pour un cycle jour/nuit naturel. */
.time-scene__orb {
    transform:
        rotateZ(var(--orb-rotate, 0deg))
        scale(var(--orb-scale, 1));
    transition:
        opacity 520ms ease,
        left 1200ms ease,
        top 1200ms ease,
        transform 520ms ease,
        filter 520ms ease;
}

.time-scene__orb--moon {
    right: auto;
}

@media (max-width: 768px) {
    .time-scene__orb {
        transition:
            opacity 420ms ease,
            left 900ms ease,
            top 900ms ease,
            transform 420ms ease,
            filter 420ms ease;
    }
}