/* Kivalt : mode « Cockpit » (sombre, cyan, hérité de maziar.net). Le mode « Calme » arrive au jalon 3.
   Règles : un écran sans ascenseur, cibles de 44 px, contrastes RGAA AA, tout au clavier, jamais de rouge. */
@font-face { font-family: "Exo 2"; src: url("/fonts/Exo2-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --fond: #02040a; --carte: #07101c; --ligne: rgba(46, 197, 255, .28); --texte: #e4f4ff; --doux: #9db4c6;
  --neon: #2ec5ff; --halo: rgba(46, 197, 255, .35); --attention: #ffd27a;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--fond); color: var(--texte); font: 17px/1.5 "Exo 2", system-ui, "Segoe UI", sans-serif; }
body { overflow: hidden; }
main { height: 100dvh; display: flex; flex-direction: column; padding: 20px 16px; max-width: 980px; margin: 0 auto; }
a { color: var(--neon); }
:focus-visible { outline: 3px solid var(--neon); outline-offset: 2px; }
.cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.marque { font-weight: 800; letter-spacing: .28em; text-transform: uppercase; color: #fff; text-shadow: 0 0 18px var(--halo); }

/* ---------- porte : connexion et inscription ---------- */
.porte { justify-content: center; align-items: center; gap: 22px; text-align: center; }
.porte .marque { font-size: clamp(30px, 7vw, 46px); margin: 0; padding-left: .28em; }
.porte .promesse { margin: -10px 0 0; color: var(--doux); }
.carte { width: min(100%, 400px); background: var(--carte); border: 1px solid var(--ligne); border-radius: 10px;
  padding: 22px 20px 18px; box-shadow: 0 0 40px rgba(46, 197, 255, .12); text-align: left; }
.onglets { display: flex; gap: 6px; margin-bottom: 14px; }
.onglets button { flex: 1; min-height: 44px; background: none; border: 1px solid transparent; border-radius: 6px; color: var(--doux);
  font: inherit; font-weight: 600; cursor: pointer; }
.onglets button[aria-selected="true"] { color: #fff; border-color: var(--ligne); background: rgba(46, 197, 255, .08); }
form[hidden], .vue[hidden] { display: none; }
label { display: block; font-size: 15px; color: var(--doux); margin: 10px 0 4px; }
input { width: 100%; min-height: 44px; background: #02060c; color: #fff; border: 1px solid var(--ligne); border-radius: 6px;
  padding: 9px 12px; font: inherit; }
input:focus { border-color: var(--neon); box-shadow: 0 0 0 3px rgba(46, 197, 255, .2); outline: none; }
input.code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .3em; font-size: 24px; text-align: center; }
.principal { width: 100%; min-height: 48px; margin-top: 16px; border: 1px solid rgba(70, 211, 230, .5); border-radius: 6px; cursor: pointer;
  font: inherit; font-weight: 700; letter-spacing: .04em; color: #fff; background: linear-gradient(180deg, #1aa3c9, #035586); }
.principal:disabled { opacity: .6; cursor: progress; }
.secondaire { width: 100%; min-height: 44px; margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid var(--ligne); border-radius: 6px; background: #02060c; color: var(--texte); font: inherit; text-decoration: none; cursor: pointer; }
.lien { background: none; border: 0; min-height: 44px; padding: 0 4px; color: var(--doux); font: inherit; font-size: 15px;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ou { display: flex; align-items: center; gap: 10px; color: var(--doux); font-size: 14px; margin: 14px 0 4px; }
.ou::before, .ou::after { content: ""; flex: 1; border-top: 1px solid var(--ligne); }
.message { min-height: 1.5em; margin: 10px 0 0; font-size: 15px; color: var(--attention); text-align: center; }
.aide { color: var(--doux); font-size: 15px; margin: 0 0 6px; }

/* ---------- accueil ---------- */
.accueil { gap: 16px; }
.accueil header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.accueil header .marque { font-size: 18px; }
.accueil h1 { margin: 0; font-size: clamp(26px, 5vw, 38px); font-weight: 700; }
.accueil .date { margin: 0; color: var(--doux); }
.accueil .date::first-letter { text-transform: uppercase; }
.vide { flex: 1; display: grid; place-items: center; text-align: center; border: 1px dashed var(--ligne); border-radius: 12px; padding: 16px; min-height: 0; }
.vide p { margin: 4px 0; }
.vide .doux { color: var(--doux); }
.bas { display: flex; gap: 10px; flex-wrap: wrap; }
.bas .secondaire { width: auto; padding: 0 16px; margin: 0; }
dialog { background: var(--carte); color: var(--texte); border: 1px solid var(--ligne); border-radius: 10px; width: min(92vw, 520px); padding: 20px; }
dialog::backdrop { background: rgba(0, 3, 8, .75); }
dialog h2 { margin: 0 0 10px; font-size: 20px; }
dialog ul { list-style: none; margin: 0; padding: 0; }
dialog li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(46, 197, 255, .12); font-size: 15px; }
dialog li span:last-child { color: var(--doux); white-space: nowrap; }

@media (max-height: 620px) { .porte .promesse { display: none; } .carte { padding: 16px; } label { margin-top: 6px; } }