/* CyberAtlantic BASTION — écran de connexion.

   Une seule page, deux mises en page :
     - navigateur  : panneau latéral ardoise + formulaire sur fond clair ;
     - app native  : carte centrée sur fond sombre (marqueur .is-native posé
                     par login.html quand le host object WebView2 est présent).
   Les composants (champs, boutons, erreurs, MFA) sont communs et se colorent
   à partir des variables redéfinies plus bas pour le mode natif. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Palette : navigateur (clair) ── */
:root {
  --ink:        #1b2030;
  --ink-soft:   #5b6579;
  --ink-faint:  #98a1b0;
  --line:       #e3e6ec;
  --slate:      #272f44;

  --field-bg:     #ffffff;
  --field-border: #d6dbe3;
  --focus-border: #272f44;
  --focus-ring:   rgba(39, 47, 68, 0.10);

  --btn-bg:       #272f44;
  --btn-bg-hover: #343e59;
  --btn-fg:       #ffffff;

  --err-bg:     #fef3f2;
  --err-border: #fdd6d2;
  --err-fg:     #b42318;

  --avatar-bg: #272f44;
  --avatar-fg: #ffffff;
}

/* ── Palette : application native (sombre) ── */
html.is-native {
  --ink:        #e7eaf0;
  --ink-soft:   rgba(255, 255, 255, 0.45);
  --ink-faint:  rgba(255, 255, 255, 0.28);
  --line:       rgba(255, 255, 255, 0.08);

  --field-bg:     rgba(255, 255, 255, 0.05);
  --field-border: rgba(255, 255, 255, 0.10);
  --focus-border: rgba(160, 178, 214, 0.55);
  --focus-ring:   rgba(120, 140, 180, 0.18);

  --btn-bg:       #4a5878;
  --btn-bg-hover: #5b6c93;
  --btn-fg:       #ffffff;

  --err-bg:     rgba(242, 131, 122, 0.10);
  --err-border: rgba(242, 131, 122, 0.28);
  --err-fg:     #f2837a;

  --avatar-bg: #4a5878;
  --avatar-fg: #ffffff;
}

html, body { height: 100%; }

body {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  color: var(--ink);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;

  /* Navigateur : deux colonnes. */
  display: grid;
  grid-template-columns: minmax(300px, 36%) 1fr;
  min-height: 100%;
}

/* Application native : carte centrée, fond dégradé sobre (aucun halo, aucun flou). */
html.is-native body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
  overflow: hidden;
  background: linear-gradient(180deg, #252d40 0%, #151a26 100%);
}

/* ══ Panneau latéral (navigateur) ══════════════════════════════════════════ */

.side {
  background: var(--slate);
  color: #ffffff;
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
html.is-native .side { display: none; }

.side__logo { width: 168px; height: auto; }

.side__pitch h2 {
  font-size: 25px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}

.side__pitch p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.66);
  max-width: 36ch;
}

.side__list {
  margin-top: 26px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.side__list li {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.72);
  display: flex;
  align-items: center;
  gap: 9px;
}

.side__list svg { width: 14px; height: 14px; flex: none; color: rgba(255, 255, 255, 0.5); }

.side__foot { font-size: 12px; color: rgba(255, 255, 255, 0.42); }

/* ══ Colonne du formulaire ═════════════════════════════════════════════════ */

.main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

html.is-native .main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 0;
}

.panel { width: 100%; max-width: 340px; }

/* La carte n'existe que dans l'application native. */
html.is-native .panel {
  max-width: 440px;
  padding: 42px 40px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset,
              0 32px 64px rgba(0, 0, 0, 0.45);
}

.panel__logo { display: none; }
html.is-native .panel__logo {
  display: block;
  width: 380px;
  height: auto;
  margin: 0 auto 8px;
}

.panel__brand { display: none; }
html.is-native .panel__brand {
  display: block;
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--ink);
  padding-bottom: 18px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

/* ── Étapes (login / dernière connexion / MFA) ──
   login.js force display:flex sur ces blocs : la direction est donc portée ici. */
#loginForm, #lastAccountStep, #mfaStep, #loadingSpinner { transition: opacity 0.15s ease; }
.form { flex-direction: column; gap: 16px; }

.form__title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: -8px;
}
html.is-native .form__title { font-size: 20px; }

.form__sub {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-bottom: 6px;
}

/* ── Champs ── */
.field { display: flex; flex-direction: column; gap: 7px; }

.field label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-soft);
}

.field input,
.field select,
.pw-wrap input {
  width: 100%;
  height: 42px;
  padding: 0 13px;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: 7px;
  color: var(--ink);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.field input::placeholder,
.pw-wrap input::placeholder { color: var(--ink-faint); }

/* Liste déroulante native : fond de champ parfois translucide, on force une liste lisible. */
.field select option { background: #fff; color: #1a1f2e; }

.field input:focus,
.field select:focus,
.pw-wrap input:focus {
  border-color: var(--focus-border);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 40px; }

.pw-eye {
  position: absolute;
  right: 7px; top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  padding: 0;
  background: none; border: none; border-radius: 5px;
  color: var(--ink-faint);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.15s, background 0.15s;
}
.pw-eye:hover { color: var(--ink); }
.pw-eye svg { width: 17px; height: 17px; }

/* Code à 6 chiffres (MFA, code PIN) */
input.otp {
  height: 50px;
  text-align: center;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.5em;
  padding-right: 0;
}

/* ── Erreurs ── */
.err {
  padding: 9px 12px;
  background: var(--err-bg);
  border: 1px solid var(--err-border);
  border-radius: 6px;
  color: var(--err-fg);
  font-size: 13px;
  line-height: 1.45;
}

/* ── Boutons ── */
.btn {
  width: 100%;
  height: 42px;
  margin-top: 4px;
  padding: 0;
  background: var(--btn-bg);
  border: none;
  border-radius: 7px;
  color: var(--btn-fg);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.btn:hover { background: var(--btn-bg-hover); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-link {
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  padding: 4px;
  text-align: center;
  transition: color 0.15s;
}
.btn-link:hover { color: var(--ink); text-decoration: underline; }

/* ── Attente ── */
.spin-wrap {
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 26px 0;
  color: var(--ink-soft);
  font-size: 13px;
}

.spin-ring {
  width: 34px; height: 34px;
  border: 2.5px solid var(--line);
  border-top-color: var(--btn-bg);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── MFA ── */
.mfa-wrap { gap: 16px; }

/* ── Dernière connexion (app native uniquement) ── */
.la-wrap { gap: 16px; }

.la-card {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
}

.la-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 600;
  color: var(--avatar-fg);
  background: var(--avatar-bg);
  flex-shrink: 0;
}

.la-info { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.la-name {
  font-size: 15px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.la-role {
  font-size: 10px; font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase;
  align-self: flex-start;
  padding: 2px 9px; border-radius: 999px;
}
.la-role.admin {
  color: #cdd8ef;
  background: rgba(74, 88, 120, 0.32);
  border: 1px solid rgba(120, 140, 180, 0.35);
}
.la-role.user {
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
}

/* ── Pied de page de l'app native ── */
.foot { display: none; margin: 0; }
html.is-native .foot {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.28);
}
html.is-native .foot svg { vertical-align: -2px; margin-right: 5px; }

/* ══ Sélecteur de comptes (app native) ═════════════════════════════════════
   Le compte courant occupe la carte centrale ; les autres comptes déjà
   connectés sur ce poste s'empilent en bas à gauche, comme sur l'écran de
   verrouillage Windows. Purement local : alimenté par le coffre scellé de
   l'app native, jamais par le serveur — dans un navigateur, le bloc reste
   vide et masqué. */
.switcher {
  position: fixed;
  left: 26px;
  bottom: 22px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: min(300px, 40vw);
  animation: swFade 0.5s 0.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.switcher[hidden] { display: none; }
html:not(.is-native) .switcher { display: none; }

.switcher__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.22);
  padding: 0 0 6px 10px;
}

.switcher__list { display: flex; flex-direction: column; gap: 2px; }

.sw-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 14px 7px 7px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.62);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease,
              color 0.16s ease, transform 0.16s ease;
  animation: swIn 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.sw-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.09);
  color: #f0f2f7;
  transform: translateX(2px);
}
.sw-item:focus-visible {
  outline: none;
  border-color: rgba(160, 178, 214, 0.45);
  background: rgba(74, 88, 120, 0.20);
  color: #f0f2f7;
}
.sw-item:active { transform: translateX(2px) scale(0.985); }

.sw-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
  color: #ffffff;
  background: #4a5878;
}
/* Entrée "Autre utilisateur" : silhouette neutre, pas d'initiales */
.sw-avatar.ghost {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.sw-avatar.ghost svg { width: 17px; height: 17px; stroke: rgba(255, 255, 255, 0.5); }

.sw-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sw-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 500;
}
.sw-sub {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.28);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@keyframes swIn   { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes swFade { from { opacity: 0; } to { opacity: 1; } }

/* Bascule d'un compte à l'autre : le bloc central se re-présente brièvement,
   comme le fait Windows quand on choisit un autre utilisateur. */
@keyframes cardSwap {
  from { opacity: 0; transform: translateY(9px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
#lastAccountStep.swap,
#loginForm.swap { animation: cardSwap 0.34s cubic-bezier(0.16, 1, 0.3, 1); }

/* ══ Écrans étroits ════════════════════════════════════════════════════════ */

@media (max-width: 860px) {
  body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .side {
    padding: 18px 22px;
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }
  .side__logo { width: 140px; }
  .side__pitch, .side__foot { display: none; }
}

/* Sous ce seuil, la liste des comptes chevaucherait la carte : elle repasse
   dans le flux, sous le contenu. */
@media (max-height: 640px), (max-width: 760px) {
  html.is-native .switcher {
    position: static;
    max-width: 440px;
    width: 100%;
    margin-top: 4px;
  }
  html.is-native .switcher__list { flex-direction: row; flex-wrap: wrap; }
  html.is-native .sw-item {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.07);
  }
}