/* ============================================================
   Hyperion — Écran de connexion (design Pragmatik, projet « Hyperion Design »).
   Panneau bordé à gauche (email → code), hub de distribution animé à droite.
   Porté du design React vers du HTML servi par Hyperion : mêmes tokens, mêmes
   valeurs, zéro dépendance JS pour l'affichage.
   SÉCURITÉ VISUELLE : l'état de base EST l'état final visible ; l'entrée
   cinématique ne joue que tant que `.cine` est présent.
   ============================================================ */

/* Nunito est chargée par un <link> dans la page (cf. src/auth/ui/pages.js) —
   PAS par un @import ici : un @import sérialise la requête après le CSS et
   bloque le rendu, la page pouvait rester blanche si Google Fonts répondait
   mal. Repli système immédiat via --font-body. */

/* Tokens du design system Pragmatik — repris tels quels (la page de connexion
   est « nue » : elle ne charge pas le CSS de l'app). */
.login-root {
  --color-lime: #7AE37C;
  --color-ink: #0D0D0D;
  --color-accent: var(--color-lime);
  --text-on-dark: #FFFFFF;
  --text-on-dark-soft: rgba(255, 255, 255, 0.72);
  --text-on-dark-faint: rgba(255, 255, 255, 0.50);
  --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --weight-regular: 400; --weight-medium: 600; --weight-semibold: 700;
  --weight-bold: 800; --weight-black: 900;
  --leading-relaxed: 1.7;
  --radius-sm: 8px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 200ms; --duration-base: 400ms;
}

html, body { margin: 0; background: #0A0B0A; }

.login-root {
  box-sizing: border-box;
  min-height: 100vh;
  background: #0A0B0A;
  color: var(--text-on-dark);
  font-family: var(--font-body);
  position: relative;
  overflow: hidden;
}
.login-root * { box-sizing: border-box; }
/* champ diffus : halo central doux + arcs filaires en bas à gauche */
.login-root::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 52% at 72% 46%, rgba(122,227,124,.045) 0%, transparent 70%);
}
.login-root::after {
  content: ""; position: absolute; left: -260px; bottom: -300px; width: 680px; height: 680px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.035);
  box-shadow: 0 0 0 70px rgba(255,255,255,.018), 0 0 0 150px rgba(255,255,255,.012);
  pointer-events: none;
}

/* ---------- gauche · le panneau ---------- */
.lg-panel {
  position: absolute; left: 52px; top: 44px; bottom: 44px;
  width: min(46%, 726px); z-index: 2;
  display: flex; flex-direction: column;
  padding: 46px 52px 30px;
  background: rgba(255,255,255,.014);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  overflow: auto;
}
.lg-panel::-webkit-scrollbar { width: 8px; }
.lg-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,.10); border-radius: 6px; }

/* ---------- le lockup Hyperion ---------- */
.lg-brand { display: flex; align-items: center; gap: 22px; flex: none; }
.hy-mark { width: 76px; height: 76px; display: block; flex: none; }
.hy-mark .ring, .hy-mark .spoke { stroke-dashoffset: 0; }
.lg-lockup { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; }
.hy-word {
  display: inline-flex; align-items: baseline;
  font-size: 34px; font-weight: var(--weight-regular); line-height: 1;
  letter-spacing: 0.22em; text-indent: 0.22em; color: #fff; white-space: nowrap;
}
/* le « E » du mot-symbole, dessiné en trois barres lime */
.hy-e {
  display: inline-block; width: 0.56em; height: 0.66em; margin-right: 0.22em;
  background:
    linear-gradient(var(--color-accent), var(--color-accent)) 0 0 / 100% 2.5px no-repeat,
    linear-gradient(var(--color-accent), var(--color-accent)) 0 50% / 100% 2.5px no-repeat,
    linear-gradient(var(--color-accent), var(--color-accent)) 0 100% / 100% 2.5px no-repeat;
}
.hy-sub { display: flex; align-items: center; gap: 10px; }
.hy-sub .dash { width: 26px; height: 1.5px; background: var(--color-accent); }
.hy-sub span { font-size: 11px; font-weight: var(--weight-medium); letter-spacing: 0.34em; text-indent: 0.34em; text-transform: uppercase; color: var(--color-accent); white-space: nowrap; }

/* ---------- milieu · titre + formulaire ---------- */
.lg-mid { margin-top: clamp(48px, 13vh, 132px); }
.lg-head h1 { font-size: clamp(40px, 4.4vw, 66px); font-weight: var(--weight-black); letter-spacing: -0.038em; line-height: 1.0; margin: 0; text-wrap: balance; }
.lg-head .sub { font-size: 16px; line-height: var(--leading-relaxed); color: var(--text-on-dark-soft); margin: 16px 0 0; max-width: 42ch; text-wrap: pretty; }
.lg-head .sub b { color: var(--text-on-dark); font-weight: var(--weight-semibold); }

.lg-form { margin-top: 34px; }
.lg-fieldwrap { position: relative; display: flex; align-items: center; }
.lg-fieldwrap > .lead { position: absolute; left: 20px; color: rgba(255,255,255,.5); display: grid; place-items: center; pointer-events: none; }
.lg-input {
  width: 100%; font-family: var(--font-body); font-size: 15.5px; color: var(--text-on-dark);
  background: rgba(255,255,255,.022); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-sm);
  padding: 19px 18px 19px 54px; outline: none; -webkit-appearance: none; appearance: none;
  transition: border-color var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.lg-input::placeholder { color: var(--text-on-dark-faint); }
.lg-input:hover { border-color: rgba(255,255,255,.2); }
.lg-input:focus { border-color: var(--color-accent); background: rgba(255,255,255,.04); box-shadow: 0 0 0 3px rgba(122,227,124,.13); }

/* code à 6 chiffres */
.lg-code { display: flex; gap: 11px; }
.lg-code input {
  flex: 1; min-width: 0; height: 66px; text-align: center; padding: 0;
  font-family: var(--font-body); font-size: 25px; font-weight: var(--weight-bold);
  color: var(--text-on-dark); font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.022); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-sm); outline: none;
  transition: border-color var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.lg-code input:focus { border-color: var(--color-accent); background: rgba(255,255,255,.04); box-shadow: 0 0 0 3px rgba(122,227,124,.13); }
.lg-code input.filled { border-color: rgba(255,255,255,.28); }

/* ---------- CTA ----------
   Traitement « outlined-on-dark » de l'écran de connexion : filet lime, fond
   profond, halo lime doux. Le lime plein reste la norme sur fond clair. */
.login-root .lg-cta {
  display: inline-flex; align-items: center; cursor: pointer;
  font-family: var(--font-body); border-radius: var(--radius-sm);
  width: 100%; margin-top: 20px; justify-content: center; gap: 14px;
  padding: 20px 24px;
  background: linear-gradient(180deg, rgba(122,227,124,.10) 0%, rgba(122,227,124,.045) 100%);
  color: #fff;
  border: 1px solid var(--color-accent);
  box-shadow: 0 0 26px -6px rgba(122,227,124,.30), inset 0 0 22px -12px rgba(122,227,124,.55);
  font-size: 13.5px; font-weight: var(--weight-bold); letter-spacing: 0.16em; text-transform: uppercase;
  transition: background var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.login-root .lg-cta:hover {
  background: linear-gradient(180deg, rgba(122,227,124,.18) 0%, rgba(122,227,124,.08) 100%);
  box-shadow: 0 0 34px -4px rgba(122,227,124,.42), inset 0 0 22px -10px rgba(122,227,124,.6);
}
.login-root .lg-cta:disabled, .login-root .lg-cta[aria-disabled="true"] {
  background: transparent; color: var(--text-on-dark-faint);
  border-color: rgba(255,255,255,.13); box-shadow: none; opacity: 1; cursor: not-allowed;
}
.lg-note { font-size: 13.5px; line-height: 1.65; color: var(--text-on-dark-faint); margin: 22px 0 0; max-width: 40ch; text-wrap: pretty; }
.lg-actions { display: flex; align-items: center; gap: 20px; margin-top: 18px; }
/* actions secondaires (renvoyer / changer d'email) */
.lg-ghost {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: transparent; border: 0; padding: 6px 2px;
  font-family: var(--font-body); font-size: 12.5px; font-weight: var(--weight-bold);
  letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  color: var(--text-on-dark-soft); position: relative;
  transition: color var(--duration-fast) var(--ease-out);
}
.lg-ghost::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--duration-base) var(--ease-out); }
.lg-ghost:hover { color: #fff; }
.lg-ghost:hover::after { transform: scaleX(1); }
.lg-ghost:disabled { color: var(--text-on-dark-faint); cursor: default; }
.lg-ghost:disabled::after { display: none; }
.lg-actions form { margin: 0; }

/* message d'erreur (code incorrect, expiré…) */
.lg-err {
  display: flex; align-items: flex-start; gap: 10px; margin: 22px 0 0;
  background: rgba(224,80,56,.10); border: 1px solid rgba(224,80,56,.42);
  color: #FFC7BC; padding: 13px 15px; border-radius: var(--radius-sm);
  font-size: 13.5px; line-height: 1.55;
}
.lg-err svg { flex: none; margin-top: 1px; }

/* ---------- pied ---------- */
.lg-foot {
  margin-top: auto; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.07);
  display: flex; align-items: center; gap: 16px; font-size: 12.5px; color: var(--text-on-dark-faint);
}
.lg-foot .grow { flex: 1; }
.lg-foot a { color: var(--text-on-dark-soft); text-decoration: none; position: relative; }
.lg-foot a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px; background: var(--color-accent); transition: width var(--duration-base) var(--ease-out); }
.lg-foot a:hover { color: var(--text-on-dark); }
.lg-foot a:hover::after { width: 100%; }
.lg-foot .sep { color: rgba(255,255,255,.18); }

/* ---------- droite · le hub de distribution ---------- */
.lg-hub-area { position: absolute; left: 46%; right: 0; top: 0; bottom: 0; z-index: 1; }
.hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(88%, 780px); height: auto; display: block; }
.hub text { font-family: var(--font-body); font-size: 11px; font-weight: var(--weight-bold); letter-spacing: 0.18em; text-transform: uppercase; fill: rgba(255,255,255,.62); }
/* la galaxie — champ pleine page derrière tout, plus le cœur dense dans le hub */
.lg-stars { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.login-root .star { fill: #fff; opacity: var(--o, .3); }
.login-root .star.lime { fill: var(--color-accent); }
.hub .glow { transform-origin: 310px 310px; }
.hub .ring { fill: none; stroke: rgba(255,255,255,.09); }
.hub .ring-soft { fill: none; stroke: rgba(255,255,255,.055); }
.hub .spoke { stroke: rgba(255,255,255,.11); stroke-width: 1; }
.hub .flow { stroke: var(--color-accent); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 16 168; opacity: .9; }
.hub .node { fill: #0A0B0A; stroke: rgba(255,255,255,.34); stroke-width: 1.5; }
.hub .node-core { fill: rgba(255,255,255,.6); }
.hub .orbit { fill: none; stroke: rgba(255,255,255,.07); stroke-dasharray: 2 12; }
.hub .orbit-dot { fill: rgba(255,255,255,.28); }
.hub .core-halo { fill: none; stroke: var(--color-accent); opacity: .28; }
.hub .core-disc { fill: rgba(255,255,255,.02); stroke: rgba(255,255,255,.24); }
.hub .core { fill: var(--color-accent); }
.hub .core-label { fill: #fff; font-size: 11px; letter-spacing: 0.24em; }

/* mouvement continu */
@keyframes hub-spin { to { transform: rotate(360deg); } }
@keyframes hub-spin-rev { to { transform: rotate(-360deg); } }
@keyframes hub-flow { from { stroke-dashoffset: 184; } to { stroke-dashoffset: 0; } }
@keyframes hub-breathe { 0%, 100% { opacity: .22; transform: scale(1); } 50% { opacity: .05; transform: scale(1.5); } }
@keyframes hub-node { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes star-tw { 0%, 100% { opacity: calc(var(--o) * .3); } 50% { opacity: var(--o); } }
@keyframes glow-breathe { 0%, 100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes star-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.login-root .star { animation: star-tw var(--d, 5s) var(--ease-out) infinite; animation-delay: var(--dl, 0s); }
.lg-stars .pl1 { animation: star-drift 150s var(--ease-out) infinite; }
.lg-stars .pl2 { animation: star-drift 210s var(--ease-out) infinite reverse; }
.hub .stars { transform-origin: 310px 310px; }
.hub .sl1 { animation: hub-spin 540s linear infinite; }
.hub .sl2 { animation: hub-spin-rev 380s linear infinite; }
.hub .sl3 { animation: hub-spin 260s linear infinite; }
.hub .glow { animation: glow-breathe 9s var(--ease-out) infinite; }

.hub .g-orbit { transform-origin: 310px 310px; animation: hub-spin 120s linear infinite; }
.hub .g-orbit-inner { transform-origin: 310px 310px; animation: hub-spin-rev 84s linear infinite; }
.hub .core-halo { transform-origin: 310px 310px; animation: hub-breathe 4.6s var(--ease-out) infinite; }
.hub .flow { animation: hub-flow 3.6s linear infinite; }
.hub .f2 { animation-delay: -.6s; } .hub .f3 { animation-delay: -1.2s; }
.hub .f4 { animation-delay: -1.8s; } .hub .f5 { animation-delay: -2.4s; } .hub .f6 { animation-delay: -3s; }
.hub .node-core { animation: hub-node 3.6s var(--ease-out) infinite; }
.hub .n2 { animation-delay: -.6s; } .hub .n3 { animation-delay: -1.2s; }
.hub .n4 { animation-delay: -1.8s; } .hub .n5 { animation-delay: -2.4s; } .hub .n6 { animation-delay: -3s; }

/* ---------- bascule de langue ---------- */
.lg-switch { position: absolute; top: 48px; right: 60px; z-index: 4; display: inline-flex; align-items: center; gap: 10px; }
.lg-btn {
  border: 0; background: transparent; font-family: var(--font-body); font-size: 12.5px;
  font-weight: var(--weight-bold); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-on-dark-soft); padding: 3px 1px; cursor: pointer; position: relative;
  transition: color var(--duration-fast) var(--ease-out);
}
.lg-btn::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--duration-base) var(--ease-out); }
.lg-btn:hover { color: #fff; }
.lg-btn.on { color: #fff; }
.lg-btn.on::after { transform: scaleX(1); }
.lg-sep { color: rgba(255,255,255,.26); font-size: 12px; }

/* ---------- entrée cinématique (joue une fois ; base = visible) ----------
   Seuls la marque et le hub jouent — jamais une surface interactive. */
@keyframes hy-draw { from { stroke-dashoffset: var(--len, 400); } to { stroke-dashoffset: 0; } }
@keyframes hy-pop { from { opacity: 0; } to { opacity: 1; } }
@keyframes hub-arrive { from { opacity: 0; transform: translate(-50%, -50%) scale(.94); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

.cine .hy-mark .ring, .cine .hy-mark .spoke { animation: hy-draw 1400ms var(--ease-out) both; }
.cine .hy-mark .dotted { animation: hy-pop 900ms var(--ease-out) 700ms both; }
.cine .hy-mark .dot { animation: hy-pop 700ms var(--ease-out) 950ms both; }
.cine .hub { animation: hub-arrive 1800ms var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  .cine .hy-mark .ring, .cine .hy-mark .spoke,
  .cine .hy-mark .dotted, .cine .hy-mark .dot, .cine .hub,
  .hub .g-orbit, .hub .g-orbit-inner, .hub .core-halo, .hub .flow, .hub .node-core,
  .login-root .star, .hub .stars, .hub .glow, .lg-stars .pstars { animation: none; }
}

/* ---------- écrans étroits : le panneau seul ---------- */
@media (max-width: 1080px) {
  /* Plus de carte sur mobile : le panneau devient la page (fond transparent,
     sinon son léger voile dessine une arête au-dessus du bas de l'écran). */
  .lg-panel { position: static; width: auto; margin: 0; min-height: auto; border: 0; border-radius: 0; padding: 14px 30px 26px; background: transparent; }
  .lg-hub-area { display: none; }
  /* La bascule repasse DANS le flux (au-dessus du panneau) : en absolu elle
     chevauchait le mot-symbole sur mobile. */
  .lg-switch { position: static; display: flex; justify-content: flex-end; padding: 20px 30px 0; }
  .hy-word { font-size: 27px; }
  .hy-mark { width: 62px; height: 62px; }
  .lg-brand { gap: 16px; }
  .lg-mid { margin-top: clamp(36px, 8vh, 72px); }
  .lg-code { gap: 7px; }
  .lg-code input { height: 58px; font-size: 21px; }
}

/* très petits écrans : le lockup passe sous la marque, tout reste lisible */
@media (max-width: 420px) {
  .lg-panel { padding-left: 20px; padding-right: 20px; }
  .lg-switch { padding-left: 20px; padding-right: 20px; }
  .hy-word { font-size: 21px; }
  .hy-mark { width: 50px; height: 50px; }
  .lg-brand { gap: 12px; }
  .lg-code { gap: 5px; }
  .lg-code input { height: 52px; font-size: 19px; }
  .lg-head h1 { font-size: 34px; }
}