/* Connexion Sayeret OS : neutre (aucune information personnelle), charte Sayeret, détails inspirés d'Apple. */
@font-face{font-family:Geist;src:url('/tableau/fonts/geist.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url('/tableau/fonts/geist-mono.ttf') format('truetype');font-weight:100 900;font-display:swap}
:root{color-scheme:dark;--void:#050408;--text:#fff;--slate:#8e8e94;--ressort:cubic-bezier(.2,.8,.2,1);--x:50%;--y:40%}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--void);color:var(--text);font:400 16px/1.5 Geist,-apple-system,system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  display:grid;place-items:center;padding:24px;overflow:hidden;background-image:radial-gradient(60rem 36rem at 50% -10%,rgba(255,255,255,.05),transparent 60%)}
.porte{width:min(340px,100%);display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:-6vh;animation:arrivee .9s var(--ressort) both}
/* Esbee en petit, au-dessus de la marque : présente, pas envahissante */
.cerveau{width:112px;height:112px;margin-bottom:18px;transition:transform .7s var(--ressort),opacity .7s var(--ressort)}
.marque{display:flex;align-items:center;gap:10px;margin-bottom:36px}
.logo{height:22px;width:auto}
.os{font:500 11px/1 "Geist Mono",ui-monospace,monospace;letter-spacing:.14em;color:var(--slate);border:1px solid rgba(255,255,255,.12);border-radius:6px;padding:5px 7px}
form{width:100%;display:flex;flex-direction:column;gap:12px}
.champ{display:block}
input{width:100%;height:52px;padding:0 18px;text-align:center;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:rgba(10,10,14,.55);color:var(--text);font:inherit;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:border-color .25s,background .25s,box-shadow .25s}
input::placeholder{color:#6b6b72}
input:not(:placeholder-shown){letter-spacing:.12em}
input:focus,input:focus-visible{outline:none;border-color:rgba(255,255,255,.32);background:rgba(16,16,20,.7);box-shadow:0 0 0 4px rgba(255,255,255,.06)}
button{height:52px;border:0;border-radius:14px;background:var(--text);color:var(--void);font:500 15px Geist,system-ui,sans-serif;letter-spacing:-.01em;cursor:pointer;
  transition:transform .1s ease-out,opacity .25s,background .25s}
button:active{transform:scale(.98)}
button:disabled{opacity:.6;cursor:default}
button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.message{margin:16px 0 0;color:#c9c9ce;font-size:14px;animation:arrivee .35s var(--ressort) both}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* refus façon macOS : le champ tremble, amorti */
.refus form{animation:tremble .48s cubic-bezier(.36,.07,.19,.97) both}
@keyframes tremble{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(5px)}30%,50%,70%{transform:translateX(-10px)}40%,60%{transform:translateX(10px)}}
/* entrée en scène : le formulaire se dissout, le cerveau s'ouvre */
.entree .porte{animation:dissolution .55s var(--ressort) both}
.entree .cerveau{transform:scale(1.25)}
@keyframes dissolution{to{opacity:0;transform:scale(.98);filter:blur(6px)}}
@keyframes arrivee{from{opacity:0;transform:translateY(8px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@media (prefers-reduced-motion:reduce){
  .porte,.message,.refus form,.entree .porte{animation:none}
  .cerveau{display:none}
}
@media (prefers-reduced-transparency:reduce){input{background:#111;backdrop-filter:none;-webkit-backdrop-filter:none}}
@media (prefers-contrast:more){input{border-color:#fff;background:#000}}