/* Complément à l'habillage V2 : écran de connexion et quelques ajustements web */

.connexion-fond {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--bg) 0%, var(--primary-light) 100%);
  padding: 24px;
}
.connexion-carte {
  width: 100%; max-width: 380px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: 36px 32px;
}
.connexion-titre { font-size: 22px; font-weight: 800; text-align: center; letter-spacing: -0.02em; }
.connexion-sous  { font-size: 13px; color: var(--text-muted); text-align: center; margin-bottom: 26px; }
.connexion-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-2); margin: 14px 0 6px; }
.connexion-champ {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font-family: var(--font); font-size: 14px; color: var(--text);
  background: var(--bg-card); transition: border-color var(--t), box-shadow var(--t);
}
.connexion-champ:focus {
  outline: none; border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--primary-glow);
}
.connexion-erreur {
  display: none; margin: 14px 0 0;
  padding: 9px 12px; border-radius: var(--radius-sm);
  background: var(--danger-light); color: var(--danger);
  font-size: 12.5px; line-height: 1.45;
}
.connexion-erreur.visible { display: block; }

.ligne-cliquable { cursor: pointer; }
.pastille-rupture { color: var(--danger); font-weight: 600; }
.pastille-seuil   { color: var(--warning); font-weight: 600; }
.pastille-ok      { color: var(--success-strong); }
.chargement { padding: 40px; text-align: center; color: var(--text-muted); font-size: 13px; }