/* web/connexion/style.css — page unique de connexion (avenant 01/10 16:51Z).
   Reprise de la maquette validée images_connexion/maquette/connexion.html :
   wrap flex, visuel 50 % avec dégradé + accroche HTML, panneau 50 %, bascule pilule.
   Images changeables SANS toucher au code (img/entreprise.jpg, img/agent.jpg) ; absentes,
   le fond marine #0b1a33 + dégradé garde la page utilisable. Mobile < 768 px : image masquée. */
* { box-sizing: border-box; }
/* L'attribut hidden prime TOUTES les classes d'affichage (sinon .grid/.cols le rouvrent —
   défaut mesuré à la capture agent mobile : le formulaire OTP restait visible). */
[hidden] { display: none !important; }
body { margin: 0; font-family: system-ui, "Segoe UI", Roboto, sans-serif; background: #f4f6fb; color: #0f172a; }

.wrap { display: flex; min-height: 100vh; }
.wrap.agent { flex-direction: row-reverse; }

.visuel {
  flex: 1 1 50%; position: relative;
  background: #0b1a33 center / cover no-repeat;
}
.visuel.entreprise { background-image: url("img/entreprise.jpg"); }
.visuel.agent { background-image: url("img/agent.jpg"); }
.visuel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,26,51,.85) 0%, rgba(11,26,51,.25) 45%, rgba(11,26,51,0) 70%);
}
.accroche { position: absolute; z-index: 1; top: 7%; left: 8%; right: 8%; color: #fff; }
.accroche .marque { font-weight: 700; font-size: 26px; margin-bottom: 28px; }
.accroche .marque b { color: #60a5fa; }
.accroche h1 { font-size: 40px; line-height: 1.1; margin: 0 0 14px; }
.accroche h1 em { font-style: normal; color: #60a5fa; }
.accroche p { margin: 0; font-size: 17px; opacity: .9; max-width: 28em; }
.accroche hr { width: 72px; border: 0; border-top: 4px solid #3b82f6; margin: 18px 0 0; border-radius: 2px; }

.panneau { flex: 1 1 50%; display: flex; align-items: center; justify-content: center; padding: 40px; }
.carte { width: 100%; max-width: 400px; }

.bascule { display: flex; background: #e2e8f0; border-radius: 10px; padding: 4px; margin-bottom: 28px; }
.bascule a {
  flex: 1; text-align: center; padding: 10px; border-radius: 8px;
  text-decoration: none; color: #334155; font-weight: 600;
}
.bascule a.on { background: #fff; color: #1d4ed8; box-shadow: 0 1px 3px rgba(0,0,0,.12); }

h2 { margin: 0 0 6px; font-size: 24px; }
.sous { color: #64748b; margin: 0 0 22px; }
.grid { display: grid; gap: 6px; }
label { display: block; font-size: 14px; font-weight: 600; margin: 14px 0 6px; }
input {
  width: 100%; padding: 12px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 15px;
  font-family: inherit; background: #fff; color: #0f172a;
}
input:focus { outline: 2px solid rgba(29,78,216,.35); border-color: #1d4ed8; }
.mono { font-family: Consolas, Monaco, monospace; text-transform: uppercase; }
.otp { letter-spacing: 6px; font-size: 20px; text-align: center; }

.btn-principal {
  width: 100%; margin-top: 22px; padding: 13px; border: 0; border-radius: 8px;
  background: #1d4ed8; color: #fff; font-weight: 700; font-size: 15px; cursor: pointer;
  font-family: inherit;
}
.btn-principal:disabled { opacity: .5; cursor: not-allowed; }
.lien { display: block; text-align: center; margin-top: 16px; color: #1d4ed8; font-size: 14px; }
.lien-btn {
  display: block; text-align: center; margin-top: 12px; color: #1d4ed8; font-size: 14px;
  background: none; border: 0; cursor: pointer; font-family: inherit; text-decoration: underline;
}

.cf-slot { min-height: 65px; margin-top: 10px; }
.cf-note { font-size: 12px; color: #9a3412; }

#toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
  padding: 12px 20px; border-radius: 10px; background: #0f172a; color: #fff;
  font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
  z-index: 100; max-width: 90vw;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.ok { background: #047857; }
#toast.err { background: #be123c; }

@media (max-width: 767px) {
  .visuel { display: none; }
  .panneau { padding: 24px; }
}