/* LEXIK — scène d'accueil animée (page de connexion) */
.intro-stage { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #0B1520; opacity: 0; transition: opacity .6s ease; }
.intro-stage.is-on { opacity: 1; }
.intro-canvas { position: absolute; left: 0; top: 0; image-rendering: pixelated; image-rendering: crisp-edges; }

body.has-intro { background: #0B1520; }
body.has-intro .portal-top { position: relative; z-index: 2; background: linear-gradient(180deg, rgba(11,21,32,.85), rgba(11,21,32,0)); border-bottom: 0; }
body.has-intro #portal-main { position: relative; z-index: 1; max-width: none; min-height: calc(100vh - 92px); box-sizing: border-box;
  display: flex; align-items: center; justify-content: flex-end; padding: 16px 6vw 56px; }

/* Slogan bilingue de l'en-tête : anglais en blanc, français en jaune */
.top-context { align-items: center; gap: 10px; text-transform: uppercase; font-weight: 700; }
@media (min-width: 801px) { .top-context { display: flex; } }
.top-context .tc-en { color: #F4F1EA; }
.top-context .tc-sep { color: #5d6a75; }
.top-context .tc-fr { color: #FECF0D; }
body.has-intro .top-context { font-size: 12px; text-shadow: 0 1px 6px rgba(0,0,0,.6); }

/* Carte de connexion : apparaît quand les portes sont ouvertes */
.intro-card { position: relative; width: min(430px, 100%); box-sizing: border-box;
  background: rgba(20, 31, 41, .94); border: 1px solid #3c4955; border-top: 3px solid #FECF0D; border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transform: translateX(26px) scale(.97);
  transition: opacity .55s ease, transform .6s cubic-bezier(.2,.9,.25,1.15), visibility 0s linear .6s; }
.intro-card.is-in { opacity: 1; visibility: visible; transform: none; transition: opacity .55s ease, transform .6s cubic-bezier(.2,.9,.25,1.15), visibility 0s; }
.intro-card.no-anim { transition: none; }
.intro-card.is-out { opacity: 0; transform: translateY(12px) scale(.98); transition: opacity .3s ease, transform .3s ease; }
/* petite pointe tournée vers le personnage */
.intro-card::before { content: ''; position: absolute; left: -11px; top: 50%; margin-top: -10px; width: 0; height: 0;
  border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 11px solid #3c4955; }
.intro-card::after { content: ''; position: absolute; left: -9px; top: 50%; margin-top: -9px; width: 0; height: 0;
  border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-right: 10px solid rgba(20,31,41,.94); }
.intro-card .eyebrow { display: block; }
.intro-card h1 { font-size: clamp(26px, 2.4vw, 34px); margin: 6px 0 6px; letter-spacing: -.02em; }
.intro-card .intro-lead { margin: 0 0 18px; color: #bcc6cc; line-height: 1.5; font-size: 14px; }
.intro-card .form-tabs { margin-bottom: 8px; }

.intro-skip { position: fixed; left: 18px; bottom: 18px; z-index: 3; border: 1px solid rgba(255,255,255,.22); background: rgba(11,21,32,.6);
  color: #d9e1e6; font: inherit; font-size: 13px; padding: 8px 14px; border-radius: 999px; cursor: pointer; }
.intro-skip:hover, .intro-skip:focus-visible { border-color: #FECF0D; color: #FECF0D; outline: none; }

@media (max-width: 800px) {
  body.has-intro .top-context { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-size: 10px; letter-spacing: .12em; }
  body.has-intro .top-context .tc-sep { display: none; }
}
@media (max-width: 899px) {
  body.has-intro #portal-main { justify-content: center; align-items: flex-start; min-height: 0;
    padding: calc(var(--intro-ground, 50vh) - 65px + 34px) 16px 40px; }
  .intro-card { transform: translateY(24px) scale(.97); }
  .intro-card::before, .intro-card::after { display: none; }
}
@media (min-width: 900px) and (max-height: 800px) {
  .intro-card { padding-top: 20px; padding-bottom: 20px; }
  .intro-card .intro-lead { display: none; }
  .intro-card h1 { font-size: 26px; margin-bottom: 10px; }
  .intro-card form label { margin-top: 10px; }
}