/* Page de connexion — « Verre et profondeur » */
:root{
  --accent:#117b77;--ink:#16303a;--muted:#5d727b;
  --sky1:#bfe9e4;--sky2:#eef7f8;
  --glass:rgba(255,255,255,.58);--edge:rgba(255,255,255,.75);--field:rgba(255,255,255,.55);--edge-dim:rgba(17,123,119,.18);
  --serif:ui-serif,"New York","Iowan Old Style",Georgia,serif;
}
@media (prefers-color-scheme:dark){:root{
  --accent:#3fc1b8;--ink:#eaf3f5;--muted:#9db3bb;--sky1:#0f4a52;--sky2:#0b1118;
  --glass:rgba(30,40,54,.55);--edge:rgba(255,255,255,.14);--field:rgba(255,255,255,.06);--edge-dim:rgba(255,255,255,.12)}}
*{box-sizing:border-box}
html{min-height:100%;background:var(--sky2)}
body{margin:0;min-height:100vh;color:var(--ink);font:16px/1.5 ui-rounded,"SF Pro Rounded","SF Pro Text","Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  background:linear-gradient(165deg,var(--sky1),var(--sky2) 62%) fixed;overflow-x:hidden}
.scene{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.75}
.o1{width:46vmax;height:46vmax;left:-12vmax;top:-14vmax;background:color-mix(in srgb,var(--accent) 55%,transparent)}
.o2{width:38vmax;height:38vmax;right:-10vmax;top:18vh;background:color-mix(in srgb,var(--accent) 30%,#7aa8ff)}
.o3{width:44vmax;height:44vmax;left:30vw;bottom:-26vmax;background:color-mix(in srgb,var(--accent) 38%,transparent)}
.stage{min-height:100vh;display:grid;grid-template-columns:1.1fr minmax(340px,440px);align-items:center;gap:clamp(24px,7vw,110px);max-width:1180px;margin:0 auto;padding:40px clamp(20px,5vw,56px)}
.intro .mark{border-radius:22px;box-shadow:0 18px 40px -14px color-mix(in srgb,var(--accent) 70%,#000),inset 0 1px 0 rgba(255,255,255,.5)}
.intro h1{font:500 clamp(54px,8.4vw,112px)/.95 var(--serif);letter-spacing:-.035em;margin:28px 0 22px}
.intro p{max-width:26ch;font-size:19px;color:var(--muted);margin:0}
.card{position:relative;padding:34px 32px 26px;border-radius:36px;background:var(--glass);border:1px solid var(--edge);
  -webkit-backdrop-filter:blur(28px) saturate(170%);backdrop-filter:blur(28px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 40px 80px -28px color-mix(in srgb,var(--accent) 45%,rgba(10,20,40,.5))}
h2{font:500 30px/1.1 var(--serif);letter-spacing:-.02em;margin:0 0 6px}
.sub{color:var(--muted);margin:0 0 20px;font-size:15px}
label{display:block;margin:14px 0;font-size:13.5px;font-weight:650;color:var(--muted)}
input{display:block;width:100%;margin-top:6px;padding:13px 15px;font:inherit;font-size:16px;color:var(--ink);background:var(--field);
  border:1px solid var(--edge-dim);border-radius:16px;box-shadow:inset 0 2px 6px rgba(20,30,50,.06);transition:border-color .15s,box-shadow .15s}
input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 24%,transparent)}
.code{font-size:24px;letter-spacing:.35em;text-align:center;font-variant-numeric:tabular-nums}
button{width:100%;margin-top:10px;padding:14px 18px;font:inherit;font-size:16px;font-weight:700;color:#fff;cursor:pointer;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 88%,#fff),color-mix(in srgb,var(--accent) 92%,#000));
  border:1px solid rgba(255,255,255,.3);border-radius:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 14px 26px -12px color-mix(in srgb,var(--accent) 80%,transparent);transition:transform .15s}
button:hover{transform:translateY(-1px)}button:active{transform:none}
:is(button,input):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#msg{min-height:0;margin:0 0 10px;color:#b4232f;font-weight:650;font-size:14.5px}#msg:empty{display:none}
@media (prefers-color-scheme:dark){#msg{color:#ff9aa4}}
.steps{margin:0 0 6px;padding:0;list-style:none;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding-left:38px;margin:0 0 6px}
.steps li::before{content:counter(s);position:absolute;left:0;top:2px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;color:#fff;background:var(--accent)}
.steps li>span{display:block;font-size:14.5px;color:var(--muted)}
.steps img{display:block;margin:12px 0 6px;border-radius:18px;background:#fff;padding:8px}
.steps small{color:var(--muted);word-break:break-all}code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px}
pre{margin:0 0 12px;padding:16px;border-radius:18px;background:var(--field);border:1px solid var(--edge-dim);font:600 17px/1.7 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.06em;text-align:center}
.foot{margin:22px 0 0;text-align:center;font-size:12.5px;color:var(--muted)}
@media (max-width:820px){
  .stage{grid-template-columns:1fr;gap:26px;align-content:center;padding:28px 18px}
  .intro{text-align:left}.intro h1{font-size:clamp(46px,15vw,72px);margin:18px 0 12px}.intro p{font-size:16px}.intro .mark{width:56px;height:56px}
  .card{padding:26px 22px 20px;border-radius:30px}
}
@media (prefers-reduced-motion:no-preference){.card{animation:rise .7s cubic-bezier(.2,.8,.2,1) both}@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}}