@import url("/fonts.css");

/* ─── Pré-aube alpine ─────────────────────────────────────────── */
:root{
  --ground:#0B1017; --surface:#141C27; --surface-2:#1C2634; --line:#26313F; --line-2:#3B4859;
  --ink:#E8EEF5; --ink-2:#A2AFBF; --ink-3:#6E7C8D;
  --blaze:#FFD43B; --blaze-soft:#33290A; --on-blaze:#0B1017;
  --good:#5FC08A; --warn:#E7A055; --crit:#EC7266;
  --fd:"Saira Condensed","Arial Narrow",system-ui,sans-serif;
  --fb:"Public Sans",-apple-system,system-ui,sans-serif;
  --fm:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{height:100%; margin:0}
html{
  background:var(--ground);
  -webkit-text-size-adjust:100%;      /* pas de reflow au changement d'orientation */
  touch-action:manipulation;          /* supprime le zoom par double-tap */
}
body{
  background:var(--ground); color:var(--ink);
  font-family:var(--fb); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;           /* plus de rebond élastique facon page web */
  padding:var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
}
/* Le texte de l'interface n'est ni sélectionnable ni copiable : on veut une app,
   pas une page. Les zones de contenu réactivent la sélection au cas par cas. */
body{ user-select:none; -webkit-user-select:none; -webkit-touch-callout:none }
.selectable{ user-select:text; -webkit-user-select:text }
button{ font:inherit; color:inherit; background:none; border:none; padding:0; cursor:pointer }
:focus-visible{ outline:2px solid var(--blaze); outline-offset:3px; border-radius:6px }
@media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important; transition-duration:.001ms!important} }

/* ─── Portail d'entrée ────────────────────────────────────────── */
.gate{ min-height:100dvh; display:grid; place-items:center; padding:28px 22px }
.gate-in{ width:100%; max-width:380px; display:flex; flex-direction:column; gap:22px; text-align:center }
.gate-mark{ width:88px; height:88px; margin:0 auto; border-radius:22px; overflow:hidden;
  box-shadow:0 18px 44px -18px rgba(0,0,0,.85) }
.gate-mark img{ width:100%; height:100%; display:block }
.gate h1{ font-family:var(--fd); font-weight:800; font-size:40px; letter-spacing:.05em;
  text-transform:uppercase; margin:0; line-height:1 }
.gate .sub{ color:var(--ink-2); font-size:14.5px; margin:0; text-wrap:balance }
.gate .eyebrow{ font-family:var(--fm); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3) }
.btn{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  padding:17px; border-radius:14px; background:var(--blaze); color:var(--on-blaze);
  font-family:var(--fd); font-weight:800; font-size:19px; letter-spacing:.06em;
  text-transform:uppercase; transition:transform .1s, filter .12s }
.btn:active{ transform:scale(.975) }
.btn.ghost{ background:none; border:1px solid var(--line-2); color:var(--ink-2);
  font-family:var(--fb); font-size:14px; font-weight:600; letter-spacing:0;
  text-transform:none; padding:13px }
.btn[disabled]{ opacity:.45 }
.btn svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round }
.msg{ border-radius:12px; padding:13px 15px; font-size:14px; text-align:left; line-height:1.45 }
.msg.err{ background:#2E1815; color:#F3B5AE; border:1px solid #55271f }
.msg.ok{ background:#12291D; color:#9FDCBB; border:1px solid #1f4a33 }
.msg.info{ background:var(--surface); color:var(--ink-2); border:1px solid var(--line) }
.codebox{ font-family:var(--fm); font-size:13.5px; letter-spacing:.06em; background:var(--ground);
  border:1px dashed var(--line-2); border-radius:10px; padding:14px; text-align:left;
  line-height:2; user-select:text; -webkit-user-select:text }
.field{ width:100%; padding:15px; border-radius:12px; border:1px solid var(--line-2);
  background:var(--surface); color:var(--ink); font-family:var(--fm); font-size:16px;
  text-align:center; letter-spacing:.04em }
.field:focus{ border-color:var(--blaze); outline:none }
.spin{ width:18px; height:18px; border:2px solid rgba(11,16,23,.3); border-top-color:var(--on-blaze);
  border-radius:50%; animation:sp .7s linear infinite }
@keyframes sp{ to{ transform:rotate(360deg) } }
.hidden{ display:none!important }