/* =====================================================================
   login.css — écran de connexion, design ACP « Indus.NET Dark Red ».

   REPRIS À L'IDENTIQUE du gabarit de référence (_starter_design_acp/templates/login.php et
   EchafNET Indus/secure2/login.php). Les noms de classes sont conservés tels quels — y compris
   `form-control-lg`, qui SURCHARGE volontairement la classe Bootstrap du même nom : c'est ce que
   fait le gabarit d'origine, et le renommer ferait diverger les deux applications.

   Chargé APRÈS bootstrap.min.css, sinon la surcharge ne prend pas.

   Ce fichier n'est utilisé que par les écrans hors session (connexion, mot de passe oublié) :
   le reste de l'application est habillé par acp.css.
   ===================================================================== */

* { box-sizing: border-box; }

body.s3-ecran-login {
  font-family: 'Segoe UI', Roboto, system-ui, sans-serif;
  margin: 0; min-height: 100vh; display: flex; background: #fff;
}

/* ---------------------------------------------------------- Panneau gauche */

.login-left {
  flex: 1;
  background: linear-gradient(135deg, #dc2626 0%, #7f1d1d 40%, #111827 100%);
  color: #fff; padding: 60px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.login-carousel { position: absolute; inset: 0; z-index: 0; }
.login-carousel .carousel,
.login-carousel .carousel-inner,
.login-carousel .carousel-item { height: 100%; }
.login-carousel .carousel-item img { width: 100%; height: 100%; object-fit: cover; }

/* Voile coloré au-dessus des photos : sans lui, le texte blanc devient illisible sur une image
   claire. Il n'est posé QUE s'il y a un carousel, sinon il assombrirait le dégradé pour rien. */
.login-left.has-carousel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(220,38,38,.65) 0%, rgba(127,29,29,.75) 40%, rgba(17,24,39,.85) 100%);
  z-index: 1; pointer-events: none;
}
/* Trame diagonale très discrète — signature visuelle ACP. */
.login-left::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, transparent, transparent 80px,
              rgba(255,255,255,.02) 80px, rgba(255,255,255,.02) 82px);
  pointer-events: none; z-index: 1;
}
.login-left .logo,
.login-left .content,
.login-left .footer { position: relative; z-index: 2; }
.login-left .logo { font-size: 1.5rem; font-weight: 700; letter-spacing: -.5px; }
.login-left .logo .bi { color: #fca5a5; margin-right: 6px; }
.login-left h1 {
  font-size: 2.6rem; font-weight: 700; line-height: 1.1;
  letter-spacing: -1px; margin-bottom: 14px;
}
.login-left p {
  font-size: 1.02rem; line-height: 1.6;
  color: rgba(255,255,255,.85); max-width: 460px;
}
.login-left .footer { font-size: .85rem; color: rgba(255,255,255,.7); }

/* ---------------------------------------------------------- Panneau droit */

.login-right {
  width: 480px; padding: 50px;
  display: flex; flex-direction: column; justify-content: center;
}
.logo-acp { text-align: center; margin-bottom: 30px; }
.logo-acp img { max-width: 260px; height: auto; }
.login-right h2 { font-weight: 700; font-size: 1.8rem; letter-spacing: -.5px; margin-bottom: 6px; }
.login-right .subtitle { color: #6b7280; margin-bottom: 30px; }

/* ---------------------------------------------------------- Formulaire */

.form-group { margin-bottom: 18px; }
.form-label { font-size: .85rem; font-weight: 500; color: #374151; margin-bottom: 6px; display: block; }
.input-wrap { position: relative; }
.input-wrap .bi {
  position: absolute; left: 14px; top: 50%;
  transform: translateY(-50%); color: #9ca3af;
}
.form-control-lg {
  padding: 12px 14px 12px 42px; border-radius: 10px; border: 1px solid #e5e7eb;
  font-size: .95rem; background: #f9fafb; width: 100%;
  transition: border-color .2s, box-shadow .2s;
}
.form-control-lg:focus {
  background: #fff; border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220,38,38,.1); outline: none;
}

.btn-login {
  background: #dc2626; color: #fff; border: 0; padding: 13px; border-radius: 10px;
  font-weight: 600; font-size: 1rem; width: 100%; cursor: pointer; transition: all .2s;
}
.btn-login:hover {
  background: #b91c1c; transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(220,38,38,.3);
}

.err-msg {
  background: #fef2f2; color: #991b1b; border: 1px solid #fecaca;
  padding: 10px 14px; border-radius: 10px; font-size: .88rem; margin-bottom: 18px;
  display: flex; align-items: center; gap: 8px;
}
.ok-msg {
  background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0;
  padding: 10px 14px; border-radius: 10px; font-size: .88rem; margin-bottom: 18px;
  display: flex; align-items: center; gap: 8px;
}

/* Case « Se souvenir de moi » — dessinée à la main, la case native ne se colore pas. */
.remember-row {
  display: flex; align-items: center; justify-content: space-between; margin: 14px 0 18px;
}
.remember-label {
  display: flex; align-items: center; gap: 8px;
  font-size: .85rem; color: #4b5563; cursor: pointer; user-select: none;
}
.remember-check {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; border: 2px solid #d1d5db; border-radius: 4px;
  cursor: pointer; position: relative; flex-shrink: 0;
  transition: border-color .15s, background .15s;
}
.remember-check:checked { background: #dc2626; border-color: #dc2626; }
.remember-check:checked::after {
  content: ""; position: absolute; left: 3px; top: 0;
  width: 5px; height: 9px; border: 2px solid #fff;
  border-top: none; border-left: none; transform: rotate(45deg);
}
.remember-check:focus { outline: 2px solid rgba(220,38,38,.4); outline-offset: 1px; }

.link-forgot { font-size: .82rem; color: #6b7280; text-decoration: none; transition: color .15s; }
.link-forgot:hover { color: #dc2626; text-decoration: underline; }

@media (max-width: 900px) {
  body.s3-ecran-login { flex-direction: column; }
  .login-left { padding: 40px; min-height: 240px; }
  .login-right { width: 100%; padding: 30px; }
}