/* Login screen, themed per subdomain.
 *
 * The body carries `.login-scene` plus a `.login-scene--<module>` modifier:
 *   home / sport       → trail (mountains + sunset)
 *   compte             → finance (deep green + abstract chart curves)
 *   cuisine            → kitchen (terracotta + warm bokeh + scattered leaves)
 *   information        → vault (deep purple + brass keys + safe dial)
 *
 * Each modifier swaps the gradient, the decorative SVG, the accent colour and the
 * focus ring of the form. The card glassmorphism stays consistent across modules.
 */

:root {
    --login-night: #0b1220;
    --login-deep: #1e3a5f;
    --login-accent: #fb923c;
    --login-accent-strong: #ef4444;
    --login-text: #fff;
}

.login-scene {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    color: var(--login-text);
    background: linear-gradient(180deg, #0b1220 0%, #1e293b 35%, #7c2d12 75%, #ef6c00 100%);
}

/* ── Decorative back layer (per-module SVG) ─────────────────── */
.login-scene::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
}

.login-scene > * {
    position: relative;
    z-index: 1;
}

/* ── Glass card (shared) ───────────────────────────────────── */
.login-card {
    width: 100%;
    max-width: 28rem;
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 1rem;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.login-brand {
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
}

.login-tagline {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.95rem;
}

.login-card .form-label {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.login-card .form-control {
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}

.login-card .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.login-card .form-control:focus {
    background-color: rgba(255, 255, 255, 0.14);
    border-color: var(--login-accent);
    color: #fff;
    box-shadow: 0 0 0 0.2rem rgba(251, 146, 60, 0.25);
}

.login-card .form-check-input {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.4);
}

.login-card .form-check-input:checked {
    background-color: var(--login-accent);
    border-color: var(--login-accent);
}

.login-card .form-check-label {
    color: rgba(255, 255, 255, 0.78);
}

.btn-trail {
    background: linear-gradient(135deg, var(--login-accent) 0%, var(--login-accent-strong) 100%);
    border: none;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding-block: 0.65rem;
    transition: transform .15s, box-shadow .15s;
}

.btn-trail:hover,
.btn-trail:focus {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.login-card .alert {
    background: rgba(127, 29, 29, 0.55);
    border: 1px solid rgba(248, 113, 113, 0.45);
    color: #fee2e2;
}

.trail-stats {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    justify-content: center;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.trail-stats__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.trail-stats__item svg {
    width: 1rem;
    height: 1rem;
    opacity: 0.85;
}

.login-quote {
    color: rgba(255, 255, 255, 0.65);
    font-style: italic;
    font-size: 0.85rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ────────────────────────────────────────────────────────────────
 * Module variants
 * ──────────────────────────────────────────────────────────── */

/* ── home / sport : trail (mountains + sunset) ───────────────── */
.login-scene--home,
.login-scene--sport {
    background:
        radial-gradient(120% 80% at 70% 20%, #f59e0b 0%, transparent 55%),
        radial-gradient(80% 60% at 30% 30%, #f97316 0%, transparent 60%),
        linear-gradient(180deg, #0b1220 0%, #1e293b 35%, #7c2d12 75%, #ef6c00 100%);
    --login-accent: #fb923c;
    --login-accent-strong: #ef4444;
}

.login-scene--home::before,
.login-scene--sport::before {
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 700' preserveAspectRatio='xMidYMax slice'>\
<defs>\
<linearGradient id='r1' x1='0' x2='0' y1='0' y2='1'>\
<stop offset='0%25' stop-color='%23312e81' stop-opacity='0.9'/>\
<stop offset='100%25' stop-color='%230b1220' stop-opacity='0.9'/>\
</linearGradient>\
<linearGradient id='r2' x1='0' x2='0' y1='0' y2='1'>\
<stop offset='0%25' stop-color='%231e3a5f' stop-opacity='0.95'/>\
<stop offset='100%25' stop-color='%23070b14' stop-opacity='0.95'/>\
</linearGradient>\
<linearGradient id='r3' x1='0' x2='0' y1='0' y2='1'>\
<stop offset='0%25' stop-color='%23020617' stop-opacity='1'/>\
<stop offset='100%25' stop-color='%23000000' stop-opacity='1'/>\
</linearGradient>\
</defs>\
<circle cx='1080' cy='180' r='90' fill='%23fde68a' opacity='0.85'/>\
<circle cx='1080' cy='180' r='130' fill='%23fbbf24' opacity='0.18'/>\
<path fill='url(%23r1)' d='M0,420 L120,360 L240,400 L360,310 L480,360 L600,280 L720,330 L840,260 L960,310 L1080,250 L1200,320 L1320,280 L1440,340 L1440,700 L0,700 Z'/>\
<path fill='url(%23r2)' d='M0,500 L100,460 L200,490 L320,420 L440,470 L560,400 L680,460 L800,400 L920,460 L1040,410 L1160,470 L1280,420 L1400,490 L1440,470 L1440,700 L0,700 Z'/>\
<path fill='url(%23r3)' d='M0,580 L120,560 L260,580 L380,540 L520,580 L640,550 L780,590 L900,560 L1040,590 L1180,560 L1320,590 L1440,570 L1440,700 L0,700 Z'/>\
<path fill='none' stroke='%23fde68a' stroke-width='2' stroke-dasharray='6 6' stroke-opacity='0.55' d='M0,650 C200,610 320,670 480,620 C620,580 760,650 900,610 C1060,560 1180,640 1320,610 C1380,600 1420,615 1440,605'/>\
</svg>");
}

/* ── compte : finance (deep green + chart curves) ─────────────── */
.login-scene--compte {
    background:
        radial-gradient(120% 80% at 80% 15%, #34d399 0%, transparent 55%),
        radial-gradient(80% 60% at 20% 30%, #10b981 0%, transparent 60%),
        linear-gradient(180deg, #022c22 0%, #064e3b 35%, #065f46 75%, #047857 100%);
    --login-accent: #34d399;
    --login-accent-strong: #10b981;
}

.login-scene--compte::before {
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 700' preserveAspectRatio='xMidYMax slice'>\
<defs>\
<linearGradient id='c1' x1='0' x2='0' y1='0' y2='1'>\
<stop offset='0%25' stop-color='%23064e3b' stop-opacity='0.55'/>\
<stop offset='100%25' stop-color='%23022c22' stop-opacity='0.9'/>\
</linearGradient>\
</defs>\
<g stroke='%2334d399' stroke-opacity='0.18' stroke-width='1' fill='none'>\
<path d='M0,250 H1440'/><path d='M0,350 H1440'/><path d='M0,450 H1440'/><path d='M0,550 H1440'/>\
</g>\
<g stroke='%23a7f3d0' stroke-opacity='0.28' stroke-width='2.5' fill='none'>\
<path d='M0,520 C200,500 360,460 520,430 C700,395 880,355 1040,330 C1240,300 1340,275 1440,250'/>\
<path d='M0,600 C180,580 340,540 500,510 C700,480 880,460 1060,440 C1240,420 1340,400 1440,370' stroke-opacity='0.18'/>\
</g>\
<g fill='%23a7f3d0' fill-opacity='0.45'>\
<circle cx='200' cy='497' r='4'/><circle cx='520' cy='430' r='4'/><circle cx='880' cy='355' r='4'/><circle cx='1240' cy='298' r='4'/>\
</g>\
<path fill='url(%23c1)' d='M0,580 L160,560 L320,575 L480,545 L640,570 L800,540 L960,570 L1120,545 L1280,575 L1440,545 L1440,700 L0,700 Z'/>\
<g fill='%23ecfdf5' fill-opacity='0.06' font-family='monospace' font-size='14' letter-spacing='4'>\
<text x='80' y='90'>+ 1 240,50 €</text>\
<text x='1100' y='130'>- 86,20 €</text>\
<text x='240' y='180'>SOLDE</text>\
</g>\
</svg>");
}

/* ── cuisine : warm kitchen (terracotta + scattered leaves) ──── */
.login-scene--cuisine {
    background:
        radial-gradient(120% 80% at 70% 20%, #fbbf24 0%, transparent 55%),
        radial-gradient(70% 60% at 25% 40%, #f97316 0%, transparent 60%),
        linear-gradient(180deg, #431407 0%, #7c2d12 35%, #b45309 75%, #d97706 100%);
    --login-accent: #fb923c;
    --login-accent-strong: #b45309;
}

.login-scene--cuisine::before {
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 700' preserveAspectRatio='xMidYMax slice'>\
<defs>\
<radialGradient id='warm' cx='50%25' cy='80%25' r='60%25'>\
<stop offset='0%25' stop-color='%23fef3c7' stop-opacity='0.18'/>\
<stop offset='100%25' stop-color='%23431407' stop-opacity='0'/>\
</radialGradient>\
</defs>\
<rect width='1440' height='700' fill='url(%23warm)'/>\
<g fill='%23fef3c7' fill-opacity='0.06'>\
<circle cx='180' cy='620' r='80'/>\
<circle cx='1280' cy='600' r='100'/>\
<circle cx='760' cy='660' r='70'/>\
<circle cx='420' cy='560' r='40'/>\
<circle cx='1040' cy='540' r='55'/>\
</g>\
<g stroke='%23fef3c7' stroke-opacity='0.45' stroke-width='2' fill='none' stroke-linecap='round'>\
<path d='M120,420 q20,-30 50,-30 q30,0 30,30 q0,30 -30,30 q-30,0 -50,-30z'/>\
<path d='M150,420 q20,-25 0,-50' />\
<path d='M1240,180 q25,-35 60,-35 q35,0 35,35 q0,35 -35,35 q-35,0 -60,-35z'/>\
<path d='M1270,180 q15,-20 0,-40'/>\
<path d='M340,180 q10,-15 25,-15 q15,0 15,15 q0,15 -15,15 q-15,0 -25,-15z'/>\
<path d='M820,360 q15,-25 40,-25 q25,0 25,25 q0,25 -25,25 q-25,0 -40,-25z'/>\
</g>\
<g fill='%23fb923c' fill-opacity='0.5'>\
<circle cx='1100' cy='460' r='3'/><circle cx='1130' cy='440' r='2'/><circle cx='1080' cy='440' r='2'/>\
<circle cx='280' cy='340' r='3'/><circle cx='310' cy='320' r='2'/><circle cx='260' cy='320' r='2'/>\
<circle cx='620' cy='220' r='3'/><circle cx='650' cy='200' r='2'/><circle cx='600' cy='200' r='2'/>\
</g>\
<path fill='%23431407' fill-opacity='0.6' d='M0,640 C180,620 340,650 520,625 C700,600 880,640 1060,615 C1240,590 1340,625 1440,605 L1440,700 L0,700 Z'/>\
</svg>");
}

/* ── information : vault (deep purple + brass keys + safe dial) ── */
.login-scene--information {
    background:
        radial-gradient(120% 80% at 80% 20%, #7c3aed 0%, transparent 55%),
        radial-gradient(70% 60% at 20% 40%, #a855f7 0%, transparent 60%),
        linear-gradient(180deg, #1a0b2e 0%, #2e1065 35%, #4c1d95 75%, #5b21b6 100%);
    --login-accent: #f59e0b;
    --login-accent-strong: #d97706;
}

.login-scene--information::before {
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 700' preserveAspectRatio='xMidYMax slice'>\
<g fill='%23f59e0b' fill-opacity='0.06'>\
<circle cx='1180' cy='180' r='140'/>\
<circle cx='1180' cy='180' r='95'/>\
<circle cx='1180' cy='180' r='55'/>\
</g>\
<g stroke='%23fbbf24' stroke-opacity='0.18' stroke-width='1.5' fill='none' stroke-linecap='round'>\
<circle cx='1180' cy='180' r='140'/>\
<path d='M1180,40 L1180,60'/><path d='M1180,300 L1180,320'/>\
<path d='M1040,180 L1060,180'/><path d='M1300,180 L1320,180'/>\
<path d='M1080,80 L1095,95'/><path d='M1265,265 L1280,280'/>\
<path d='M1280,80 L1265,95'/><path d='M1095,265 L1080,280'/>\
<path d='M1180,180 L1180,90'/><path d='M1180,180 L1240,220'/>\
</g>\
<g fill='%23fbbf24' fill-opacity='0.9'>\
<circle cx='1180' cy='180' r='5'/>\
</g>\
<g fill='%23fde68a' fill-opacity='0.7' font-family='Georgia, serif' font-style='italic'>\
<text x='80' y='150' font-size='30'>« Ce qu'on note, on n'a plus à se rappeler. »</text>\
<text x='80' y='185' font-size='14' font-style='normal' letter-spacing='4'>— ESPACE MÉMOIRE</text>\
</g>\
<g stroke='%23fbbf24' stroke-opacity='0.35' stroke-width='1.5' fill='none' stroke-linecap='round'>\
<circle cx='180' cy='420' r='22'/>\
<path d='M180,442 L180,500'/>\
<path d='M180,475 L195,475'/>\
<path d='M180,490 L192,490'/>\
<circle cx='180' cy='420' r='8' fill='%23fbbf24' fill-opacity='0.4' stroke='none'/>\
</g>\
<g stroke='%23fde68a' stroke-opacity='0.28' stroke-width='1.2' fill='none'>\
<rect x='340' y='480' width='34' height='44' rx='3'/>\
<rect x='348' y='470' width='18' height='14' rx='8'/>\
<circle cx='357' cy='500' r='3' fill='%23fde68a' fill-opacity='0.4' stroke='none'/>\
<path d='M357,503 L357,512'/>\
</g>\
<g fill='%23fde68a' fill-opacity='0.18'>\
<circle cx='460' cy='340' r='2'/><circle cx='580' cy='320' r='1.5'/><circle cx='700' cy='350' r='2'/>\
<circle cx='820' cy='310' r='1.5'/><circle cx='940' cy='340' r='2'/>\
<circle cx='260' cy='280' r='1.5'/><circle cx='380' cy='260' r='2'/>\
<circle cx='1000' cy='430' r='1.5'/><circle cx='1080' cy='450' r='2'/>\
</g>\
<path fill='%231a0b2e' fill-opacity='0.55' d='M0,620 C180,605 340,635 520,610 C700,585 880,625 1060,600 C1240,575 1340,615 1440,590 L1440,700 L0,700 Z'/>\
</svg>");
}