/* ════════════════════════════════════════════════════════════════════════════
   KANSO-OPS — Pages d'authentification
   Charte en vigueur depuis août 2026 : navy #140E59, corail #EF7D53,
   Lato (titres) + Open Sans (texte).
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  --navy: #140E59;
  --navy-2: #1b1470;
  --navy-3: #0e0a3f;
  --coral: #EF7D53;
  --coral-2: #e2673c;
  --cream: #FBF7F3;
  --ink: #3a3550;
  --muted: #6b6780;
  --pale: #b9b3d8;
  --border: #ECE4DA;
  --white: #fff;
  --erreur: #ff8c9f;
  --succes: #55d3a8;
  --rayon: 10px;
  --ombre: 0 18px 50px rgba(14, 10, 63, .28);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--navy-3);
  background-image: radial-gradient(circle at 22% 18%, var(--navy-2) 0%, transparent 55%),
                    radial-gradient(circle at 82% 82%, rgba(239, 125, 83, .16) 0%, transparent 50%);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  -webkit-font-smoothing: antialiased;
}

.carte {
  width: 100%;
  max-width: 420px;
  background: rgba(20, 14, 89, .72);
  border: 1px solid rgba(185, 179, 216, .18);
  border-radius: 16px;
  padding: 40px 36px 32px;
  box-shadow: var(--ombre);
  backdrop-filter: blur(12px);
}

.marque {
  text-align: center;
  font-family: Lato, sans-serif;
  font-weight: 900;
  font-size: 26px;
  letter-spacing: .5px;
  margin-bottom: 28px;
}
.marque .k { color: var(--coral); }
.marque .point { color: var(--coral); }

h1 {
  font-family: Lato, sans-serif;
  font-weight: 700;
  font-size: 25px;
  text-align: center;
  margin: 0 0 6px;
}

.sous-titre {
  text-align: center;
  color: var(--pale);
  font-size: 14px;
  margin: 0 0 26px;
}

label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--white);
}

.champ { margin-bottom: 16px; }

.enveloppe { position: relative; }

input {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--white);
  background: rgba(14, 10, 63, .6);
  border: 1px solid rgba(185, 179, 216, .28);
  border-radius: var(--rayon);
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder { color: rgba(185, 179, 216, .55); }
input:focus {
  outline: none;
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(239, 125, 83, .18);
}
input:disabled { opacity: .55; cursor: not-allowed; }
input[type="password"] { padding-right: 46px; }

.oeil {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  background: none; border: 0;
  color: var(--pale);
  cursor: pointer;
  padding: 8px 10px;
  font-size: 15px;
  line-height: 1;
  border-radius: 8px;
}
.oeil:hover { color: var(--white); }
.oeil:focus-visible { outline: 2px solid var(--coral); outline-offset: 1px; }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

button.principal {
  width: 100%;
  padding: 13px;
  margin-top: 8px;
  font-family: Lato, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  background: var(--coral);
  border: 0;
  border-radius: var(--rayon);
  cursor: pointer;
  transition: background .15s, transform .06s;
}
button.principal:hover:not(:disabled) { background: var(--coral-2); }
button.principal:active:not(:disabled) { transform: translateY(1px); }
button.principal:disabled { opacity: .6; cursor: progress; }
button.principal:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }

/* Message : la hauteur est reservee des le depart pour qu'aucun contenu
   ne saute quand une erreur apparait. */
.message {
  min-height: 40px;
  margin: 14px 0 0;
  padding: 10px 12px;
  font-size: 13.5px;
  line-height: 1.45;
  border-radius: 8px;
  opacity: 0;
  transition: opacity .18s;
}
.message.visible { opacity: 1; }
.message.erreur { background: rgba(255, 140, 159, .12); border: 1px solid rgba(255, 140, 159, .35); color: var(--erreur); }
.message.succes { background: rgba(85, 211, 168, .12); border: 1px solid rgba(85, 211, 168, .32); color: var(--succes); }
.message.info   { background: rgba(185, 179, 216, .1);  border: 1px solid rgba(185, 179, 216, .25); color: var(--pale); }

.astuce {
  margin: 12px 0 0;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--pale);
  background: rgba(185, 179, 216, .08);
  border: 1px solid rgba(185, 179, 216, .18);
  border-radius: 8px;
}
.astuce strong { color: var(--white); font-weight: 600; }

.aide {
  font-size: 12.5px;
  color: var(--pale);
  margin: 6px 0 0;
  line-height: 1.45;
}
.aide.ko { color: var(--erreur); }
.aide.ok { color: var(--succes); }

.liens {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(185, 179, 216, .16);
  text-align: center;
  font-size: 13.5px;
}
.liens a { color: var(--pale); text-decoration: none; }
.liens a:hover { color: var(--coral); text-decoration: underline; }
.liens .espace { display: block; margin-top: 10px; }

.pied {
  margin-top: 22px;
  text-align: center;
  font-size: 12px;
  color: rgba(185, 179, 216, .6);
}

@media (max-width: 460px) {
  .carte { padding: 30px 22px 24px; }
  .duo { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ── Double authentification ────────────────────────────────────────────────
   L'étape n'apparaît qu'après le mot de passe accepté : montrer un champ de
   code plus tôt ferait croire qu'il manque quelque chose pour se connecter. */
#etape-mfa h2 { font-family: Lato, sans-serif; font-weight: 900; font-size: 20px;
  margin: 0 0 8px; letter-spacing: -.3px; }
.mfa-dire { font-size: 14px; line-height: 1.55; margin: 0 0 16px; opacity: .82; }
.mfa-qr { display: flex; justify-content: center; margin: 0 0 14px; }
.mfa-qr img { width: 190px; height: 190px; background: #fff; padding: 10px;
  border-radius: 6px; }
.mfa-secours { font-size: 13px; margin-bottom: 16px; opacity: .8; }
.mfa-secours summary { cursor: pointer; }
.mfa-secours code { display: block; margin-top: 6px; padding: 8px 10px;
  font-family: "SF Mono", Menlo, monospace; font-size: 13px; letter-spacing: 1px;
  word-break: break-all; background: rgba(255,255,255,.07); border-radius: 4px; }
/* Six chiffres, espacés : on les lit sur un téléphone et on les recopie. */
#mfa-code { width: 100%; font-size: 26px; letter-spacing: 10px; text-align: center;
  font-variant-numeric: tabular-nums; }
.mfa-note { font-size: 12.5px; line-height: 1.5; margin-top: 12px; opacity: .7; }
/* Le QR arrive en SVG complet : on le pose dans le document, il doit donc
   tenir dans la boîte comme le ferait une image. */
.mfa-qr svg { width: 190px; height: 190px; background: #fff; padding: 10px;
  border-radius: 6px; }
.mfa-ouvrir { text-align: center; margin: 0 0 14px; font-size: 13.5px; }
/* Le verrou, au-dessus du mot-symbole. Discret : c'est une page de connexion,
   pas une vitrine — et l'écran doit dire d'abord où l'on est, ensuite qui. */
.verrou { display: block; margin: 0 auto 12px; opacity: .92; }
/* Sans viewBox, une contrainte de taille ROGNE un SVG au lieu de le réduire.
   Le script en pose un ; ici on laisse simplement le dessin remplir sa boîte. */
.mfa-qr svg { width: 210px; height: auto; }