/* ==========================================================================
   BIYN SOLUTIONS : ÉCRAN DE CONNEXION (Refonte 2027)
   Source : _design-reference/REFONTE 2027/pages/connexion-biyn.html
   Dépend de v2/tokens.css. Chargé uniquement sur /connexion.

   Écarts assumés par rapport à la maquette, et pourquoi :
   1. Les décors (aurores, particules, vignette) sont regroupés dans .login-bg
      en position fixed : ils couvrent tout le viewport sans subir le padding
      du body. Dans la maquette ils étaient positionnés sur le body, donc
      rentrés de 24px sur chaque bord.
   2. Le body scrolle verticalement si la carte dépasse (mobile en paysage) :
      le clipping des décors est assuré par .login-bg, plus par le body.
   3. La vague de pied d'écran a été retirée sur demande.
   4. Le logo SVG dessiné de la maquette est remplacé par le logo officiel
      Biyn Solutions, en deux fichiers (blanc / noir) selon le thème.
   ========================================================================== */

/* ---------- TOKENS PROPRES À L'ÉCRAN ---------- */

/* La maquette resserre deux rayons par rapport à la charte : on garde son
   intention, scopée à cet écran. */
.b-login {
  --radius-xl: 28px;
  --radius-sm: 12px;
}

/* Thème sombre : la nuit océan. Défaut de l'écran de connexion, conformément
   à la charte (« mode sombre : hero, écrans de connexion »). */
[data-theme="dark"] {
  --page-bg:
    radial-gradient(90% 70% at 50% 38%, rgba(27,69,81,.55), transparent 70%),
    linear-gradient(160deg, #0C1B21 0%, #12262E 34%, #16333D 62%, #14424B 100%);
  --card-bg: rgba(17, 34, 41, .72);
  --card-border: rgba(255,255,255,.09);
  --card-shadow: 0 30px 80px rgba(8, 18, 22, .55);
  --field-bg: rgba(255,255,255,.055);
  --field-border: rgba(255,255,255,.14);
  --field-text: #EDF2F0;
  --link: var(--biyn-mint);
  --divider: rgba(255,255,255,.09);
  --toggle-bg: rgba(255,255,255,.08);
}

/* Thème clair : la brume */
[data-theme="light"] {
  --page-bg:
    radial-gradient(80% 60% at 50% 34%, rgba(255,255,255,.85), transparent 70%),
    linear-gradient(165deg, #F2F6F1 0%, #E9EFE8 30%, #DFE9E2 58%, #D2E4DA 82%, #C9E2D3 100%);
  --card-bg: var(--biyn-paper);
  --card-border: rgba(30,58,70,.08);
  --card-shadow: 0 24px 70px rgba(29,49,57,.14), 0 2px 8px rgba(29,49,57,.06);
  --field-bg: #FFFFFF;
  --field-border: rgba(30,58,70,.16);
  --field-text: var(--biyn-ink);
  --link: #237E6F;
  --divider: rgba(30,58,70,.10);
  --toggle-bg: rgba(30,58,70,.07);
}

/* ---------- BASE ---------- */

* { box-sizing: border-box; }
html { height: 100%; }

body.b-login {
  margin: 0;
  min-height: 100%;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--page-bg);
  background-attachment: fixed;
  display: grid;
  place-items: center;
  padding: 24px;
  position: relative;
  overflow-x: hidden;
  transition: background .4s var(--ease-wave), color .4s;
}

/* ---------- FOND VIVANT ----------
   Calque plein viewport : c'est lui qui garantit que la vague et les aurores
   couvrent toute la largeur de l'écran, indépendamment du padding du body. */

.login-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Aurores : nappes de lumière qui dérivent lentement (mode sombre) */
.aurora { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.aurora i {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0;
  transition: opacity .6s;
}
[data-theme="dark"] .aurora i { opacity: 1; }
.aurora .a1 {
  width: 55vw; height: 55vw;
  left: -18vw; top: -22vw;
  background: radial-gradient(circle, rgba(24,77,85,.85), transparent 65%);
  animation: drift1 26s ease-in-out infinite alternate;
}
.aurora .a2 {
  width: 46vw; height: 46vw;
  right: -14vw; top: 6vh;
  background: radial-gradient(circle, rgba(97,218,180,.16), transparent 65%);
  animation: drift2 32s ease-in-out infinite alternate;
}
.aurora .a3 {
  width: 50vw; height: 40vw;
  left: 18vw; bottom: -24vw;
  background: radial-gradient(circle, rgba(205,243,85,.10), transparent 62%);
  animation: drift3 38s ease-in-out infinite alternate;
}
.aurora .a4 {
  width: 30vw; height: 30vw;
  right: 8vw; bottom: -10vw;
  background: radial-gradient(circle, rgba(30,156,138,.22), transparent 65%);
  animation: drift1 30s ease-in-out infinite alternate-reverse;
}
@keyframes drift1 { from { transform: translate(0,0) scale(1); } to { transform: translate(6vw, 4vh) scale(1.12); } }
@keyframes drift2 { from { transform: translate(0,0) scale(1); } to { transform: translate(-5vw, 6vh) scale(1.08); } }
@keyframes drift3 { from { transform: translate(0,0) scale(1); } to { transform: translate(4vw, -5vh) scale(1.15); } }

/* Aurores en mode clair : lumière d'aube mint, lime et teal */
[data-theme="light"] .aurora i { opacity: 1; }
[data-theme="light"] .aurora .a1 { background: radial-gradient(circle, rgba(97,218,180,.30), transparent 65%); }
[data-theme="light"] .aurora .a2 { background: radial-gradient(circle, rgba(30,156,138,.20), transparent 65%); }
[data-theme="light"] .aurora .a3 { background: radial-gradient(circle, rgba(205,243,85,.35), transparent 62%); }
[data-theme="light"] .aurora .a4 { background: radial-gradient(circle, rgba(137,197,50,.26), transparent 65%); }

/* Vignette : concentre la lumière au centre (mode sombre) */
.vignette {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transition: opacity .6s;
  background: radial-gradient(120% 90% at 50% 42%, transparent 40%, rgba(9,20,25,.55) 100%);
}
[data-theme="dark"] .vignette { opacity: 1; }

/* Vignette claire : un voile blanc lumineux qui monte des bords */
[data-theme="light"] .vignette {
  opacity: 1;
  background: radial-gradient(120% 90% at 50% 42%, transparent 46%, rgba(255,255,255,.5) 100%);
}

/* Particules : réseau constellation animé (canvas) */
#particles {
  position: absolute; inset: 0;
  pointer-events: none;
  width: 100%; height: 100%;
}

/* La vague décorative de pied d'écran a été retirée sur demande : elle
   n'apportait rien face aux aurores et au réseau de particules. */

/* ---------- CARTE DE CONNEXION ---------- */

.login-card {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--card-shadow);
  padding: 44px 40px 32px;
  backdrop-filter: blur(14px);
  transition: background .4s, border-color .4s;
}
/* Liseré gradient en tête de carte : la signature vague */
.login-card::before {
  content: "";
  position: absolute;
  top: 0; left: 32px; right: 32px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: var(--grad-wave);
}

/* Logo officiel : deux fichiers, un par thème */
.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
}
.brand img {
  width: 178px;
  height: auto;
  display: block;
}
/* Sélecteurs à deux classes : ils doivent l'emporter sur .brand img ci-dessus,
   sinon les deux versions du logo s'affichent l'une sur l'autre. */
.brand .brand__light { display: none; }
[data-theme="light"] .brand .brand__dark  { display: none; }
[data-theme="light"] .brand .brand__light { display: block; }

/* Titre */
.headline { text-align: center; margin-bottom: 30px; }
.headline .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--biyn-teal);
  margin-bottom: 12px;
}
[data-theme="dark"] .headline .eyebrow { color: var(--biyn-mint); }
.headline .eyebrow::before, .headline .eyebrow::after {
  content: ""; width: 20px; height: 2px; border-radius: 2px;
  background: var(--grad-wave);
}
.headline h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.7rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 10px;
}
.headline h1 .wave {
  background: var(--grad-wave);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.headline p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ---------- MESSAGE D'ERREUR ----------
   Absent de la maquette : l'écran doit pourtant annoncer un échec de
   connexion. Construit avec les couleurs sémantiques de la charte. */

.login-error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 20px;
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  font-size: .85rem;
  line-height: 1.45;
  background: rgba(229,72,77,.10);
  border: 1px solid rgba(229,72,77,.28);
  color: #B02A2E;
}
[data-theme="dark"] .login-error {
  background: rgba(229,72,77,.14);
  border-color: rgba(229,72,77,.34);
  color: #F2969A;
}
.login-error svg { flex: none; margin-top: 1px; }

/* ---------- CHAMPS ---------- */

.field { margin-bottom: 18px; }
.field-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 7px;
}
.b-login label {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.field-head a {
  font-size: .78rem;
  font-weight: 600;
  color: var(--link);
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
}
.field-head a:hover { text-decoration: underline; }

.control { position: relative; }
.b-login input[type="email"],
.b-login input[type="password"],
.b-login input[type="text"] {
  width: 100%;
  font: inherit;
  font-size: .95rem;
  color: var(--field-text);
  background: var(--field-bg);
  border: 1.5px solid var(--field-border);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  transition: border-color .16s, box-shadow .16s, background .4s;
}
.b-login input[type="password"] { padding-right: 46px; }
.b-login input::placeholder { color: var(--text-muted); opacity: .8; }
.b-login input:focus {
  outline: none;
  border-color: var(--biyn-teal);
  box-shadow: 0 0 0 4px rgba(30,156,138,.16);
}
[data-theme="dark"] .b-login input:focus {
  border-color: var(--biyn-mint);
  box-shadow: 0 0 0 4px rgba(97,218,180,.14);
}

/* Œil du mot de passe */
.eye {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  display: grid;
  place-items: center;
}
.eye:hover { color: var(--text); }
.eye:focus-visible { outline: 2px solid var(--biyn-teal); }

/* Se souvenir de moi */
.remember {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .85rem;
  color: var(--text-soft);
  margin: 4px 0 22px;
  cursor: pointer;
  user-select: none;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
.remember input { position: absolute; opacity: 0; }
.check {
  width: 19px; height: 19px;
  border-radius: 6px;
  border: 1.5px solid var(--field-border);
  background: var(--field-bg);
  display: grid;
  place-items: center;
  transition: all .16s var(--ease-wave);
  flex: none;
}
.check svg { width: 11px; height: 11px; opacity: 0; transform: scale(.5); transition: all .16s var(--ease-wave); }
.remember input:checked + .check { background: var(--biyn-lime); border-color: var(--biyn-lime); }
.remember input:checked + .check svg { opacity: 1; transform: scale(1); }
.remember input:focus-visible + .check { outline: 3px solid var(--biyn-teal); outline-offset: 2px; }

/* Bouton principal */
.btn-connect {
  width: 100%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  color: var(--biyn-ink);
  background: var(--biyn-lime);
  border: none;
  border-radius: var(--radius-pill);
  padding: 15px 24px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 8px 24px rgba(205,243,85,.28);
  transition: transform .16s var(--ease-wave), background .16s, box-shadow .26s;
}
.btn-connect:hover { background: var(--biyn-lime-deep); transform: translateY(-1px); box-shadow: 0 12px 30px rgba(205,243,85,.36); }
.btn-connect:active { transform: translateY(0); }
.btn-connect:focus-visible { outline: 3px solid var(--biyn-teal); outline-offset: 3px; }
.btn-connect .arrow { transition: transform .16s var(--ease-wave); }
.btn-connect:hover .arrow { transform: translateX(3px); }

/* Attente pendant la vérification des identifiants : la flèche laisse place
   au disque tournant, et le libellé change — l'état reste donc lisible même
   quand les animations sont désactivées. */
.btn-connect .spinner {
  display: none;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(30, 58, 70, .25);
  border-top-color: var(--biyn-ink);
  border-radius: 50%;
  animation: btn-spin .6s linear infinite;
}
.btn-connect.is-loading { cursor: progress; }
.btn-connect.is-loading .arrow { display: none; }
.btn-connect.is-loading .spinner { display: block; }
.btn-connect.is-loading:hover { transform: none; }

@keyframes btn-spin { to { transform: rotate(360deg); } }

/* Pied de carte */
.card-footer {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--divider);
  text-align: center;
}
.secure {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .75rem;
  color: var(--text-muted);
}
.secure .ip { font-family: var(--font-mono); }
.secure svg { color: var(--biyn-teal); flex: none; }
[data-theme="dark"] .secure svg { color: var(--biyn-mint); }
.help-line {
  margin: 10px 0 0;
  font-size: .78rem;
  color: var(--text-muted);
}
.help-line a { color: var(--link); font-weight: 600; text-decoration: none; }
.help-line a:hover { text-decoration: underline; }

/* Bandeau d'impersonation quittée / message applicatif */
.login-flash {
  width: min(420px, 100%);
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}

/* Sélecteur de thème */
.theme-toggle {
  position: fixed;
  top: 20px; right: 20px;
  z-index: 2;
  display: flex;
  gap: 4px;
  background: var(--toggle-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-pill);
  padding: 4px;
  backdrop-filter: blur(10px);
}
.theme-toggle button {
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-pill);
  padding: 7px 15px;
  cursor: pointer;
  transition: all .16s;
}
.theme-toggle button.is-active { background: var(--biyn-lime); color: var(--biyn-ink); }

@media (max-width: 480px) {
  .login-card { padding: 36px 24px 26px; }
  .theme-toggle { top: 12px; right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  /* Un disque immobile ne dirait rien : seul le libellé « Connexion… » reste. */
  .btn-connect.is-loading .spinner { display: none; }
}