/* Page de connexion Prep Anglais — même design « liquid glass » que le site de révision */
:root {
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --bg: #06070f; --bg2: #10132b; --text: #f4f6ff;
  --muted: rgba(226, 232, 255, .64); --faint: rgba(226, 232, 255, .38);
  --glass: rgba(255, 255, 255, .055); --glass-strong: rgba(255, 255, 255, .11);
  --stroke: rgba(255, 255, 255, .13); --hl: rgba(255, 255, 255, .22); --rim: rgba(255, 255, 255, .5);
  --accent: #8ea6ff; --accent-2: #c79dff; --good: #4fe3a8; --bad: #ff7d93;
  --blob1: #3552ff; --blob2: #9a3dff; --blob3: #ff3f9a; --blob4: #00b9c4; --blob-op: .5;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { font-family: var(--font); color: var(--text); background: var(--bg); min-height: 100vh; min-height: 100dvh; -webkit-font-smoothing: antialiased; letter-spacing: -.011em; overflow-x: clip; }
button, input { font: inherit; color: inherit; }

.scene { position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background: radial-gradient(1200px 800px at 15% -10%, var(--bg2), transparent 60%), radial-gradient(900px 700px at 100% 100%, var(--bg2), transparent 60%), var(--bg); }
.blob { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; filter: blur(80px); opacity: var(--blob-op); will-change: transform; }
.b1 { background: var(--blob1); top: -18vmax; left: -10vmax; animation: drift1 26s ease-in-out infinite alternate; }
.b2 { background: var(--blob2); top: 10vmax; right: -16vmax; animation: drift2 31s ease-in-out infinite alternate; }
.b3 { background: var(--blob3); bottom: -22vmax; left: 18vmax; width: 38vmax; height: 38vmax; opacity: calc(var(--blob-op) * .7); animation: drift3 23s ease-in-out infinite alternate; }
.b4 { background: var(--blob4); bottom: -8vmax; right: 10vmax; width: 30vmax; height: 30vmax; opacity: calc(var(--blob-op) * .8); animation: drift1 35s ease-in-out infinite alternate-reverse; }
@keyframes drift1 { to { transform: translate(14vmax, 10vmax) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-16vmax, 12vmax) scale(.9); } }
@keyframes drift3 { to { transform: translate(-10vmax, -14vmax) scale(1.2); } }

.glass { position: relative; isolation: isolate; background: linear-gradient(140deg, var(--glass-strong), var(--glass) 55%);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--stroke); border-radius: 30px;
  box-shadow: 0 18px 50px -18px rgba(0, 0, 0, .7), inset 0 1px 0 var(--hl), inset 0 -10px 30px -20px rgba(255, 255, 255, .15); }
.glass::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(150deg, var(--rim), transparent 28%, transparent 70%, color-mix(in srgb, var(--rim) 45%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .55; }

.shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 21px; animation: enter .6s var(--ease) both; }
.brand b { font-weight: 800; background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; font-weight: 800; font-size: 20px; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 6px 20px -6px var(--accent), inset 0 1px 0 rgba(255, 255, 255, .5); }

.card { width: min(420px, 100%); padding: 32px 28px 28px; animation: enter .7s var(--ease) .08s both; }
@keyframes enter { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } }
.eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0 0 8px; }
h1 { font-size: 34px; line-height: 1.05; letter-spacing: -.035em; margin: 0; font-weight: 750; }
h2 { font-size: 24px; margin: 6px 0 0; letter-spacing: -.02em; }
.lead { color: var(--muted); font-size: 14.5px; line-height: 1.5; margin: 10px 0 0; }
form { display: flex; flex-direction: column; }
.field { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.field > span:first-child { font-size: 13px; font-weight: 600; color: var(--muted); }
.field input { width: 100%; height: 52px; padding: 0 18px; border-radius: 16px; font-size: 16px; font-weight: 550;
  background: color-mix(in srgb, var(--text) 5%, transparent); border: 1px solid var(--stroke); outline: none;
  transition: border-color .25s, box-shadow .25s; -webkit-appearance: none; appearance: none; }
.field input::placeholder { color: var(--faint); }
.field input:focus { border-color: color-mix(in srgb, var(--accent) 70%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.field input[name=code] { letter-spacing: .3em; font-variant-numeric: tabular-nums; text-align: center; }
.pw { position: relative; display: block; }
.pw input { padding-right: 96px; }
.pw-toggle { position: absolute; right: 8px; top: 8px; height: 36px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--glass-strong); color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; }
.pw-toggle:hover { color: var(--text); }
.err { margin: 16px 0 0; padding: 12px 14px; border-radius: 14px; font-size: 14px; color: var(--bad);
  background: color-mix(in srgb, var(--bad) 10%, transparent); border: 1px solid color-mix(in srgb, var(--bad) 25%, transparent); }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; margin-top: 24px; border: 1px solid transparent; border-radius: 999px;
  font-weight: 650; font-size: 16px; cursor: pointer; transition: transform .35s var(--spring), box-shadow .25s, opacity .2s; }
.btn.primary { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 10px 30px -10px var(--accent), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn:hover { transform: translateY(-1px); box-shadow: 0 14px 34px -10px var(--accent), inset 0 1px 0 rgba(255, 255, 255, .5); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .6; cursor: progress; transform: none; }
.done { text-align: center; padding: 18px 0 6px; animation: enter .5s var(--ease) both; }
.check { width: 64px; height: 64px; margin: 0 auto 8px; display: grid; place-items: center; border-radius: 50%; font-size: 30px; font-weight: 800;
  color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }
.foot { margin: 0; font-size: 12.5px; color: var(--faint); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }