/* login-constellation.css — Écran de connexion « Constellation » (espace dentiste + labo).
   Design PARTAGÉ par dentiste.html et index.html. Toutes les classes sont préfixées .lgc-*
   pour n'entrer en collision avec aucune classe/variable de l'app (cf. CONVENTIONS).
   Thème : clair par défaut ; sombre si html[data-theme="dark"] (dark-mode.js, index.html)
   OU si la scène porte .lgc-scene--dark (init selon l'OS, dentiste.html — sombre limité au
   login, sans repeindre la vue post-login).
   Multi-tenant : le bouton reprend var(--grad) de l'app (thémable par labo). */

.lgc-scene{
  /* ── Tokens thème CLAIR (défaut) ── */
  --lgc-scene-bg:linear-gradient(165deg,#eaf3f8 0%,#d6e7f0 52%,#c1d9ea 100%);
  --lgc-card-bg:rgba(255,255,255,.92); --lgc-card-border:rgba(255,255,255,.95);
  --lgc-card-shadow:0 30px 70px rgba(20,80,120,.30),0 3px 10px rgba(20,80,120,.12),inset 0 1.5px 0 rgba(255,255,255,.95);
  --lgc-orb:transparent; --lgc-ring:rgba(26,92,138,.5); --lgc-ring2:rgba(43,143,179,.6); --lgc-sheen:rgba(26,92,138,.95);
  --lgc-logo-shadow:rgba(20,60,90,.20);
  --lgc-title:linear-gradient(100deg,#12507e,#3fb1ab 55%,#12507e);
  --lgc-sub:#4a7286; --lgc-foot:#7c99a8;
  --lgc-input-bg:#f1f7fa; --lgc-input-border:#c6dbe6; --lgc-input-text:#1c2a35; --lgc-input-ph:#8ea7b5; --lgc-input-focus-bg:#fff;
  --lgc-ecg-base:rgba(26,92,138,.28); --lgc-ecg-hot:#1798b5;

  position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center;
  padding:20px; background:var(--lgc-scene-bg); font-family:'DM Sans',system-ui,sans-serif;
}
html[data-theme="dark"] .lgc-scene, .lgc-scene.lgc-scene--dark{
  /* ── Tokens thème SOMBRE ── */
  --lgc-scene-bg:radial-gradient(130% 130% at 50% 0%,#0c2b3e,#071825 55%,#040c14);
  --lgc-card-bg:rgba(9,24,36,.42); --lgc-card-border:rgba(120,200,220,.2);
  --lgc-card-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.1);
  --lgc-orb:transparent; --lgc-ring:rgba(120,220,215,.4); --lgc-ring2:rgba(120,220,215,.2); --lgc-sheen:rgba(143,227,223,.95);
  --lgc-logo-shadow:rgba(0,0,0,.45);
  --lgc-title:linear-gradient(100deg,#8fe3df,#dff4f4 55%,#8fe3df);
  --lgc-sub:#7fb6c9; --lgc-foot:#6f97a9;
  --lgc-input-bg:rgba(255,255,255,.06); --lgc-input-border:rgba(140,200,220,.28); --lgc-input-text:#eaf6fb; --lgc-input-ph:#7fa6b8; --lgc-input-focus-bg:rgba(255,255,255,.1);
  --lgc-ecg-base:rgba(120,200,220,.26); --lgc-ecg-hot:#9ff0eb;
}

/* ── Fond : halos doux (sombre uniquement) + réseau (canvas) ── */
.lgc-fx{position:absolute;inset:0;overflow:hidden;z-index:1;display:none}
html[data-theme="dark"] .lgc-fx, .lgc-scene--dark .lgc-fx{display:block}
.lgc-blob{position:absolute;border-radius:50%;filter:blur(66px);mix-blend-mode:screen;opacity:.5}
.lgc-blob1{width:48vw;height:48vw;background:#1a6fa8;top:-14vw;left:-10vw;animation:lgc-drift1 17s ease-in-out infinite}
.lgc-blob2{width:42vw;height:42vw;background:#5bc4c0;bottom:-16vw;right:-8vw;animation:lgc-drift2 21s ease-in-out infinite}
.lgc-blob3{width:32vw;height:32vw;background:#2b8fb3;top:34%;left:56%;animation:lgc-drift3 25s ease-in-out infinite}
@keyframes lgc-drift1{50%{transform:translate(9vw,7vw) scale(1.18)}}
@keyframes lgc-drift2{50%{transform:translate(-8vw,-6vw) scale(1.14)}}
@keyframes lgc-drift3{50%{transform:translate(-7vw,5vw) scale(1.22)}}
.lgc-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2}

/* ── Fond « constellation » optionnel DERRIÈRE l'app (Paramètres > Apparence, par labo) ──
   Conteneur plein écran fixe, sous le contenu (z-index:-1) et non cliquable. Masqué par
   défaut → le moteur (login-constellation.js) le voit invisible = zéro CPU. La classe
   html.app-constellation-on (posée par applyTenantConstellation) l'affiche. Le canvas
   dessine par-dessus la couleur de fond d'app du labo (var --bg), thème clair/sombre géré. */
#app-constellation{position:fixed;inset:0;z-index:-1;pointer-events:none;display:none}
html.app-constellation-on #app-constellation{display:block}

/* ── Carte ── */
.lgc-card{position:relative;z-index:3;width:400px;max-width:100%;padding:44px 38px 34px;text-align:center;border-radius:26px;
  background:var(--lgc-card-bg);backdrop-filter:blur(22px) saturate(1.15);-webkit-backdrop-filter:blur(22px) saturate(1.15);
  border:1px solid var(--lgc-card-border);box-shadow:var(--lgc-card-shadow)}

/* ── Bouton lune/soleil, en haut à droite de la scène (labo ET dentiste — même
   composant .lgc-scene). data-theme piloté par js/dark-mode.js → cohérent avec
   le reste de l'app avant même la connexion. ── */
.lgc-theme-toggle{
  position:absolute;top:18px;right:18px;z-index:5;
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;
  background:rgba(255,255,255,.5);
  border:1px solid rgba(255,255,255,.7);
  border-radius:50%;
  cursor:pointer;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .15s,transform .15s;
}
.lgc-theme-toggle:hover{background:rgba(255,255,255,.75);transform:scale(1.05)}
html[data-theme="dark"] .lgc-theme-toggle, .lgc-scene--dark .lgc-theme-toggle{
  background:rgba(20,40,55,.55);border-color:rgba(120,200,220,.3);
}
html[data-theme="dark"] .lgc-theme-toggle:hover, .lgc-scene--dark .lgc-theme-toggle:hover{background:rgba(20,40,55,.8)}
.lgc-theme-toggle .lgc-ic-moon, .lgc-theme-toggle .lgc-ic-sun{font-size:17px;line-height:1}
.lgc-theme-toggle .lgc-ic-sun{display:none}
html[data-theme="dark"] .lgc-theme-toggle .lgc-ic-moon, .lgc-scene--dark .lgc-theme-toggle .lgc-ic-moon{display:none}
html[data-theme="dark"] .lgc-theme-toggle .lgc-ic-sun, .lgc-scene--dark .lgc-theme-toggle .lgc-ic-sun{display:inline}

/* ── Logo + halo/anneaux + arc lumineux ── */
.lgc-logo-wrap{position:relative;width:138px;height:138px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center}
.lgc-orb{position:absolute;inset:6px;border-radius:50%;background:radial-gradient(circle,var(--lgc-orb),transparent 66%);animation:lgc-pulse 3.8s ease-in-out infinite}
.lgc-ring{position:absolute;inset:12px;border-radius:50%;border:1.5px solid var(--lgc-ring);animation:lgc-pulse 3.8s ease-in-out infinite}
.lgc-ring2{inset:-2px;border-color:var(--lgc-ring2);border-width:2px;animation-delay:.7s}
@keyframes lgc-pulse{0%,100%{transform:scale(1);opacity:.95}50%{transform:scale(1.09);opacity:.5}}
.lgc-sheen{position:absolute;inset:-4px;border-radius:50%;padding:2.5px;
  background:conic-gradient(from 0deg,transparent 0deg,var(--lgc-sheen) 55deg,transparent 130deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:lgc-rotate 4.5s linear infinite}
@keyframes lgc-rotate{to{transform:rotate(360deg)}}
.lgc-logo{position:relative;z-index:4;height:82px;width:auto;
  filter:drop-shadow(0 4px 9px var(--lgc-logo-shadow));animation:lgc-bob 5s ease-in-out infinite}
@keyframes lgc-bob{50%{transform:translateY(-6px)}}

/* ── Titre / sous-titre ── */
.lgc-title{font-family:var(--font-signature,'Dancing Script',cursive);font-size:2.7rem;font-weight:700;line-height:1;margin:0 0 6px;
  background:var(--lgc-title);background-size:220% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:lgc-sheen-t 6s linear infinite}
@keyframes lgc-sheen-t{to{background-position:220% center}}
.lgc-sub{color:var(--lgc-sub);font-size:.6rem;letter-spacing:2.6px;text-transform:uppercase;font-weight:600;margin:0 0 12px;white-space:nowrap}
/* petits écrans : on autorise le retour à la ligne pour éviter tout débordement horizontal */
@media (max-width:440px){ .lgc-sub{white-space:normal;letter-spacing:2px} }

/* ── Tracé ECG (battement cardiaque) ── */
.lgc-ecg{display:block;width:196px;height:34px;margin:0 auto 24px;overflow:visible}
.lgc-ecg path{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.lgc-ecg-base{stroke:var(--lgc-ecg-base)}
.lgc-ecg-pulse{stroke:var(--lgc-ecg-hot);stroke-dasharray:15 100;stroke-dashoffset:100;
  filter:drop-shadow(0 0 4px var(--lgc-ecg-hot));animation:lgc-ecg 2.4s cubic-bezier(.6,0,.2,1) infinite}
@keyframes lgc-ecg{0%{stroke-dashoffset:100}34%{stroke-dashoffset:-15}100%{stroke-dashoffset:-15}}

/* ── Champs / bouton / pied ── */
.lgc-field{margin-bottom:12px}
.lgc-input{display:block;width:100%;padding:13px 16px;margin-bottom:12px;border-radius:13px;font:500 .92rem 'DM Sans',sans-serif;outline:none;box-sizing:border-box;
  background:var(--lgc-input-bg);border:1.5px solid var(--lgc-input-border);color:var(--lgc-input-text);transition:border-color .2s,box-shadow .2s,background .2s}
.lgc-input::placeholder{color:var(--lgc-input-ph)}
.lgc-input:focus{border-color:#5bc4c0;box-shadow:0 0 0 3px rgba(91,196,192,.25);background:var(--lgc-input-focus-bg)}
.lgc-btn{display:block;width:100%;padding:14px;margin-top:8px;border:0;border-radius:13px;cursor:pointer;font:700 .95rem 'DM Sans',sans-serif;color:#fff;
  background:var(--grad,linear-gradient(120deg,#1a5c8a,#5bc4c0));position:relative;overflow:hidden;
  box-shadow:0 6px 22px rgba(26,92,138,.45);transition:transform .15s,box-shadow .15s}
.lgc-btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(26,92,138,.55)}
.lgc-btn:active{transform:translateY(0)}
.lgc-btn:disabled{opacity:.6;cursor:wait;transform:none}
.lgc-btn::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:lgc-shine 4.5s ease-in-out infinite}
@keyframes lgc-shine{0%,58%{left:-120%}78%,100%{left:160%}}
.lgc-foot{margin-top:20px;font-size:.74rem;line-height:1.5;color:var(--lgc-foot)}
.lgc-foot a{color:inherit;font-weight:600}

/* ── Bandeau d'erreur login (partagé index.html + dentiste.html) ──
   dentiste.html : toggle via la classe .show ; index.html : toggle via style.display
   inline (js/auth.js) — l'inline gagne sur le display:none ci-dessous. */
.lgc-error {
  display: none;
  margin-top: 12px;
  padding: 10px 14px;
  background: #ffebee;
  color: #c62828;
  border: 1px solid #ef9a9a;
  border-radius: 10px;
  font-size: 0.82rem;
  text-align: left;
}
.lgc-error.show { display: block; }
html[data-theme="dark"] .lgc-scene .lgc-error,
.lgc-scene--dark .lgc-error { background:#3a1414; color:#ffb4ab; border-color:#7a2a24; }

/* ── Messages du formulaire « mot de passe oublié » (js/password-reset.js, #pr-message) ──
   Tokens de style.css (clair + sombre gérés par les tokens eux-mêmes). */
.lgc-msg-err { color: var(--danger); }
.lgc-msg-muted { color: var(--muted); }
.lgc-msg-ok { color: var(--success); }

/* Accessibilité : mouvement réduit → on fige, sans toucher au reste de l'app */
@media (prefers-reduced-motion:reduce){
  .lgc-scene *{animation:none!important}
}