/* KLE — page de connexion (hors-shell, plein écran, ambiance charbon).
   Toutes les couleurs viennent des variables de colors_and_type.css. */
.lg-scope *{ box-sizing:border-box; }
html.lg-html, body.lg-body{ margin:0; height:100%; }
body.lg-body{ background:var(--bg); color:var(--ink); font-family:var(--sans); min-height:100dvh; display:flex; flex-direction:column; overflow-x:hidden; }

/* Fond : halo + grain subtil */
.lg-bg{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.lg-halo{ position:absolute; width:80vmax; height:80vmax; border-radius:50%; left:50%; top:-32vmax; transform:translateX(-50%); background:radial-gradient(circle, color-mix(in oklab, var(--accent) 18%, transparent) 0%, transparent 60%); opacity:0.7; }
.lg-halo2{ position:absolute; width:60vmax; height:60vmax; border-radius:50%; right:-20vmax; bottom:-26vmax; background:radial-gradient(circle, color-mix(in oklab, var(--signature) 16%, transparent) 0%, transparent 62%); opacity:0.5; }
.lg-grid{ position:absolute; inset:0; background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size:64px 64px; opacity:0.25; mask-image:radial-gradient(circle at 50% 35%, #000 0%, transparent 70%); -webkit-mask-image:radial-gradient(circle at 50% 35%, #000 0%, transparent 70%); }
.lg-embers{ position:absolute; inset:0; }
.lg-ember{ position:absolute; bottom:-12px; width:5px; height:5px; border-radius:50%; background:color-mix(in oklab, var(--accent) 80%, var(--ink)); opacity:0; will-change:transform,opacity; }
@media (prefers-reduced-motion: no-preference){
  .lg-halo{ animation:lgHalo 16s ease-in-out infinite alternate; }
  .lg-halo2{ animation:lgHalo2 20s ease-in-out infinite alternate; }
  @keyframes lgHalo{ from{ transform:translateX(-54%) scale(1); } to{ transform:translateX(-46%) scale(1.12); } }
  @keyframes lgHalo2{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(-6vmax,-3vmax) scale(1.1); } }
}

.lg-wrap{ position:relative; z-index:1; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 22px; }
.lg-card{ width:100%; max-width:392px; }

/* Marque */
.lg-brand{ text-align:center; margin-bottom:30px; }
.lg-mark{ font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:84px; line-height:0.82; letter-spacing:0.01em; cursor:pointer; user-select:none; display:inline-block; position:relative; color:var(--ink); }
.lg-mark:hover{ color:var(--accent); }
.lg-mark__shine{ position:absolute; left:0; top:0; pointer-events:none; background-repeat:no-repeat; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
@media (prefers-reduced-motion: no-preference){
  .lg-mark{ animation:lgPop .7s cubic-bezier(.34,1.56,.64,1) both; }
}
.lg-tagline{ font-family:var(--mono); font-weight:500; font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-3); margin-top:12px; min-height:13px; }

/* Formulaire */
.lg-field{ margin-bottom:13px; }
.lg-field label{ display:block; font-family:var(--mono); font-size:9px; letter-spacing:0.09em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px; }
.lg-input{ width:100%; height:46px; background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-md); color:var(--ink); font-family:var(--sans); font-size:15px; padding:0 14px; transition:border-color .14s, box-shadow .14s; }
.lg-input::placeholder{ color:var(--ink-4); }
.lg-input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent); }
.lg-pwwrap{ position:relative; }
.lg-eye{ position:absolute; right:6px; top:50%; transform:translateY(-50%); width:34px; height:34px; display:flex; align-items:center; justify-content:center; background:none; border:none; color:var(--ink-4); cursor:pointer; }
.lg-eye:hover{ color:var(--ink-2); }
.lg-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:2px 0 18px; }
.lg-check{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-2); cursor:pointer; user-select:none; }
.lg-check input{ accent-color:var(--accent); width:15px; height:15px; }
.lg-link{ font-size:12.5px; color:var(--ink-3); text-decoration:none; transition:color .12s; }
.lg-link:hover{ color:var(--accent); }

.lg-btn{ width:100%; height:48px; border-radius:var(--r-md); font-family:var(--sans); font-size:14.5px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; border:1px solid transparent; transition:transform .08s, filter .14s, background .14s; }
.lg-btn:active{ transform:translateY(1px); }
.lg-btn--primary{ background:var(--accent); color:var(--accent-ink); }
.lg-btn--primary:hover{ filter:brightness(1.06); }
.lg-sep{ display:flex; align-items:center; gap:12px; margin:16px 0; color:var(--ink-4); font-family:var(--mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; }
.lg-sep::before, .lg-sep::after{ content:''; height:1px; flex:1; background:var(--line); }
.lg-btn--google{ background:var(--surface); color:var(--ink); border-color:var(--line-strong); }
.lg-btn--google:hover{ background:var(--surface-2); border-color:var(--ink-3); }
.lg-g{ width:18px; height:18px; flex-shrink:0; }

.lg-foot{ text-align:center; margin-top:22px; font-size:12.5px; color:var(--ink-3); }
.lg-foot a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line-strong); }
.lg-foot a:hover{ color:var(--accent); border-color:var(--accent); }

/* Citation (touche fun) */
.lg-cite{ position:relative; z-index:1; text-align:center; padding:20px 22px 30px; max-width:520px; margin:0 auto; }
.lg-cite__q{ font-size:13.5px; font-style:italic; color:var(--ink-2); line-height:1.55; }
.lg-cite__a{ font-family:var(--mono); font-size:9.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-4); margin-top:7px; }

/* Message d'erreur d'identifiants (discret, charte login) */
.lg-error{ margin:0 0 16px; padding:10px 13px; border:1px solid var(--accent);
  border-radius:var(--r-md); background:color-mix(in oklab, var(--accent) 12%, transparent);
  color:var(--ink); font-size:12.5px; text-align:center; }

/* Sélecteur de thème (pastilles, comme la sidebar) */
.lg-themes{ position:fixed; top:18px; right:20px; z-index:2; display:flex; gap:9px; }
.lg-dot{ width:18px; height:18px; border-radius:50%; border:1.5px solid var(--line-strong); cursor:pointer; padding:0; transition:transform .12s, border-color .12s; }
.lg-dot:hover{ transform:scale(1.15); }
.lg-dot.on{ border-color:var(--ink); box-shadow:0 0 0 2px var(--bg), 0 0 0 3px var(--ink-3); }
.lg-dot--charbon{ background:#0A0B0A; } .lg-dot--night{ background:#062a28; } .lg-dot--encre{ background:#F2EEE0; }

/* Entrée animée */
@media (prefers-reduced-motion: no-preference){
  .lg-anim{ opacity:0; transform:translateY(14px); animation:lgIn .6s cubic-bezier(.2,.7,.3,1) forwards; }
  .lg-d1{ animation-delay:.05s; } .lg-d2{ animation-delay:.13s; } .lg-d3{ animation-delay:.21s; }
  .lg-d4{ animation-delay:.29s; } .lg-d5{ animation-delay:.37s; } .lg-d6{ animation-delay:.46s; }
  @keyframes lgIn{ to{ opacity:1; transform:none; } }
  @keyframes lgPop{ 0%{ opacity:0; transform:scale(.86); } 100%{ opacity:1; transform:scale(1); } }
  .lg-tagline{ transition:opacity .4s, transform .4s; }
}