/* Linkyu · page de connexion (Authelia). Reprend l'intro « A » du site Mithrandir : démarrage en terminal (journal,
 * logo brouillé, nom composé lettre à lettre), puis l'écran d'accès (rail vertical, panneau à rayures qui devient un
 * aplat bleu, nom géant, formulaire). Ici le formulaire est réel. Écran toujours sombre. */
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/chakra-petch-1.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/jetbrains-mono-0.woff2) format('woff2'); }

:root {
  --hot: #8db8ff;          /* bleu mithril */
  --hot-ink: #07090d;
  --bg: #07090d;
  --fg: #e6e9ef;
  --dim: #5a6273;
  --line: #1b2230;
  --bad: #ff8d8d;
  --d: 'Chakra Petch', 'Arial Narrow', Impact, sans-serif;
  --m: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); overflow: hidden; }
.lk {
  position: fixed; inset: 0; overflow: hidden;
  font: 500 12px/1.4 var(--m); letter-spacing: .04em; text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
}
/* lignes de balayage + vignette */
.lk::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 20;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, .55) 100%);
}
.lk section { position: absolute; inset: 0; }
.lk section[hidden] { display: none; }
.lk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------ 1. démarrage */
.lk-log {
  position: absolute; left: clamp(14px, 3vw, 36px); top: clamp(14px, 3vh, 30px); margin: 0;
  width: min(54ch, 86vw); height: 36vh; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  font: 400 clamp(8px, .72vw, 10px)/1.55 var(--m); color: var(--dim); white-space: pre; text-transform: none;
}
.lk-log span { display: block; }
.lk-log b { color: var(--hot); font-weight: 500; }
.lk-mid { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -58%); display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 2vh, 20px); }
.lk-mark { width: clamp(64px, 9vw, 120px); height: auto; color: var(--fg); }
.lk-mark .star { fill: var(--hot); }
.lk-mark.glitch { animation: lk-glitch .26s steps(2, jump-none) 1; }
@keyframes lk-glitch {
  0% { transform: translate(3px, 0); clip-path: inset(0 0 55% 0); }
  25% { transform: translate(-4px, 1px); clip-path: inset(40% 0 0 0); }
  50% { transform: translate(2px, -1px); clip-path: inset(20% 0 30% 0); }
  75% { transform: translate(-2px, 0); clip-path: inset(0 0 0 0); }
  100% { transform: none; clip-path: none; }
}
.lk-word { margin: 0; font: 700 clamp(30px, 5vw, 68px)/1 var(--d); letter-spacing: .06em; white-space: pre; }
.lk-word span { display: inline-block; min-width: .2em; }
.lk-word span:not(.on) { visibility: hidden; }
.lk-spin { margin: 0; height: 1.2em; font-size: clamp(14px, 1.6vw, 20px); }
.lk-boot.fold .lk-mid { animation: lk-fold .17s cubic-bezier(.55, 0, .85, .35) forwards; }
.lk-boot.fold .lk-log { visibility: hidden; }
@keyframes lk-fold { to { transform: translate(-50%, -50%) scale(1.03, 0); } }

/* ------------------------------------------------------------ 2. accès */
.lk-rail {
  position: absolute; left: 0; top: 0; bottom: 0; width: clamp(34px, 4vw, 52px); overflow: hidden;
  border-right: 1px solid var(--line); transform: translateX(-110%);
  transition: transform .3s cubic-bezier(.16, .84, .3, 1);
}
.lk-access.in .lk-rail { transform: none; }
.lk-rail-in {
  position: absolute; left: 50%; top: 0; transform-origin: 0 0; white-space: nowrap;
  font: 700 clamp(11px, 1.2vw, 15px)/1 var(--d); letter-spacing: .14em; color: var(--fg);
}
.lk-cross { position: absolute; left: 24%; top: 50%; font: 300 22px/1 var(--m); color: var(--dim); transform: translate(-50%, -50%); }
.lk-side { position: absolute; left: clamp(70px, 8vw, 110px); bottom: clamp(24px, 6vh, 56px); opacity: 0; transition: opacity .3s linear .25s; }
.lk-access.in .lk-side { opacity: 1; }
.lk-side-t { margin: 0; font: 700 clamp(22px, 2.4vw, 34px)/1 var(--d); letter-spacing: .06em; }
.lk-side-s { margin: 8px 0 0; font-size: clamp(9px, .8vw, 11px); color: var(--dim); letter-spacing: .14em; }

.lk-panel {
  position: absolute; top: 0; bottom: 0; right: 0; width: 58%; overflow: hidden;
  transform: translateX(101%); transition: transform .36s cubic-bezier(.16, .84, .3, 1);
}
.lk-access.in .lk-panel { transform: none; }
.lk-access.gone .lk-panel { transform: translateX(101%); transition: transform .22s cubic-bezier(.6, 0, .95, .5); }
.lk-access.gone .lk-rail { transform: translateX(-110%); transition: transform .2s cubic-bezier(.6, 0, .9, .5); }
.lk-stripes { position: absolute; inset: 0; background: repeating-linear-gradient(-55deg, var(--hot) 0 14px, transparent 14px 34px); }
.lk-solid { position: absolute; inset: 0; background: var(--hot); clip-path: inset(0 0 0 100%); transition: clip-path .28s cubic-bezier(.3, .7, .2, 1) .4s; }
.lk-access.in .lk-solid { clip-path: inset(0 0 0 0); }
.lk-solid::before { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(7, 9, 13, .14) 1px, transparent 1.4px) 0 0 / 6px 6px; }
.lk-giant {
  position: absolute; left: 0; top: 50%; margin: 0; transform-origin: 0 0; transform: rotate(-90deg) translate(-50%, 0);
  font: 700 clamp(70px, 13vh, 150px)/.82 var(--d); letter-spacing: .02em; color: var(--bg); white-space: nowrap;
  opacity: 0; transition: opacity .01s linear .55s;
}
.lk-access.in .lk-giant { opacity: 1; }

.lk-form {
  position: absolute; left: clamp(110px, 16vh, 170px); right: clamp(18px, 4vw, 60px); top: 50%; transform: translateY(-50%);
  display: grid; gap: 6px; max-width: 420px; margin: 0;
  opacity: 0; transition: opacity .12s linear .6s;
}
.lk-form[hidden] { display: none; }
.lk-access.in .lk-form { opacity: 1; }
.lk-chip { justify-self: start; background: var(--bg); color: var(--hot); padding: 3px 8px; font-size: clamp(10px, .8vw, 11px); letter-spacing: .06em; }
.lk-field {
  margin: 0 0 12px; height: clamp(38px, 4.4vh, 44px); width: 100%; padding: 0 10px; border: 0; border-radius: 0;
  background: rgba(7, 9, 13, .16); color: var(--bg); caret-color: var(--bg);
  font: 600 16px/1 var(--m); letter-spacing: .08em; text-transform: none;
  outline: none; box-shadow: inset 0 -2px 0 rgba(7, 9, 13, .35);
  transition: background .12s linear, box-shadow .12s linear;
}
.lk-field:focus { background: rgba(7, 9, 13, .26); box-shadow: inset 0 -2px 0 var(--bg); }
.lk-field::selection { background: var(--bg); color: var(--hot); }
.lk-otp { font-size: 22px; letter-spacing: .5em; text-align: center; }
.lk-keep { display: flex; align-items: center; gap: 8px; margin: -2px 0 4px; color: var(--bg); font-size: 11px; font-weight: 600; letter-spacing: .08em; cursor: pointer; justify-self: start; }
.lk-keep input { appearance: none; width: 14px; height: 14px; margin: 0; border: 2px solid var(--bg); background: transparent; cursor: pointer; }
.lk-keep input:checked { background: var(--bg); box-shadow: inset 0 0 0 2px var(--hot); }
.lk-keep input:focus-visible { outline: 2px solid var(--bg); outline-offset: 2px; }
.lk-btn {
  appearance: none; border: 0; border-radius: 0; cursor: pointer; margin: 6px 0 0; height: clamp(38px, 4.4vh, 44px);
  display: flex; align-items: center; justify-content: center; width: 100%;
  background: var(--bg); color: var(--fg); font: 600 13px/1 var(--m); letter-spacing: .16em;
  transition: background .12s linear, color .12s linear;
}
.lk-btn:hover, .lk-btn:focus-visible { background: #10141c; outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--fg); }
.lk-btn.press, .lk-btn:active { background: var(--fg); color: var(--bg); }
.lk-btn[disabled] { cursor: progress; }
.lk-wa { margin-bottom: 10px; }
.lk-totp { display: grid; gap: 6px; }
.lk-totp[hidden], .lk-wa[hidden], .lk-none[hidden] { display: none; }
.lk-who { margin: 0 0 8px; color: var(--bg); font-weight: 600; letter-spacing: .1em; }
.lk-none { margin: 0 0 6px; color: var(--bg); font-weight: 600; }
.lk-links { margin: 12px 0 0; font-size: 10px; letter-spacing: .1em; color: var(--bg); }
.lk-links a { color: var(--bg); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.lk-links a:focus-visible { outline: 2px solid var(--bg); outline-offset: 2px; }
.lk-msg { margin: 8px 0 0; min-height: 1.4em; font-weight: 600; letter-spacing: .1em; }
.lk-msg:not(:empty) { justify-self: start; background: var(--bg); color: var(--bad); padding: 4px 8px; }
.lk-msg.ok:not(:empty) { color: var(--hot); }
.lk-form.shake { animation: lk-shake .32s cubic-bezier(.36, .07, .19, .97) 1; }
@keyframes lk-shake { 20%, 60% { transform: translate(-6px, -50%); } 40%, 80% { transform: translate(6px, -50%); } }

/* ------------------------------------------------------------ sortie et bouton « passer » */
.lk-wipe {
  position: absolute; inset: -10% -30%; z-index: 30; pointer-events: none;
  background: repeating-linear-gradient(-55deg, var(--hot) 0 22px, var(--bg) 22px 44px);
  transform: translateX(105%); visibility: hidden;
}
.lk-wipe.go { visibility: visible; transform: translateX(-105%); transition: transform .5s cubic-bezier(.55, 0, .35, 1); }
.lk-skip {
  position: absolute; right: clamp(12px, 2vw, 24px); bottom: clamp(12px, 2vh, 22px); z-index: 40;
  appearance: none; border: 1px solid #2a3242; background: rgba(7, 9, 13, .7); color: var(--fg); cursor: pointer;
  font: 500 11px/1 var(--m); letter-spacing: .12em; text-transform: uppercase; padding: 9px 12px;
}
.lk-skip:hover { border-color: var(--hot); color: var(--hot); }
.lk-skip[hidden] { display: none; }
.lk-noscript { position: absolute; left: 50%; bottom: 20%; transform: translateX(-50%); z-index: 50; color: var(--bad); }

/* ------------------------------------------------------------ téléphone */
@media (max-width: 760px) {
  .lk-panel { left: clamp(34px, 4vw, 52px); width: auto; top: 30%; }
  .lk-giant { font-size: 58px; }
  .lk-form { left: 74px; right: 18px; }
  .lk-cross { left: 78%; top: 15%; }
  .lk-side { left: 64px; top: clamp(40px, 9vh, 80px); bottom: auto; }
  .lk-form.shake { animation: none; }
}
@media (max-height: 520px) and (max-width: 960px) { .lk-panel { top: 0; width: 64%; } .lk-giant { font-size: 54px; } }
@media (prefers-reduced-motion: reduce) {
  .lk *, .lk *::after { transition-duration: .01s !important; transition-delay: 0s !important; animation: none !important; }
}
.lk-fast .lk *, .lk-fast .lk *::after { transition-duration: .01s !important; transition-delay: 0s !important; animation: none !important; }