/* ==========================================================================
   Page /connexion_pro — reproduction fidèle du live studycare.fr/connexion_pro.
   Split plein écran : formulaire à gauche (blanc), panneau marketing à droite
   (photo + carte). Pas de header. Erreur = modale centrée.
   ========================================================================== */

.cnxp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

/* ============================ GAUCHE : formulaire ======================== */
.cnxp__form-col {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-7) clamp(1.5rem, 5vw, 5rem);
  background: #fff;
}
.cnxp__form-wrap { width: 100%; max-width: 430px; }

.cnxp__brand {
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
  color: var(--c-heading);
  margin-bottom: clamp(2rem, 8vh, 5rem);
}

.cnxp__welcome {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  color: var(--c-heading);
  margin-bottom: var(--sp-6);
}

.cnxp__form { margin: 0; }
.cnxp__form .field { margin-bottom: var(--sp-4); }
.cnxp__form .input { padding: 14px 16px; border-radius: 10px; }

/* Bouton de connexion : bleu profond (couleur PRO du live). Grisé tant que vide. */
.cnxp__submit {
  width: 100%;
  margin-top: var(--sp-2);
  padding: 15px 20px;
  border: 0;
  border-radius: 12px;
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: #fff;
  background: var(--c-blue-deep);
  cursor: pointer;
  transition: background .15s ease;
}
.cnxp__submit:hover:not(:disabled) { background: #021f6b; }
.cnxp__submit:disabled { background: #f1f2f4; color: #9aa0a6; cursor: not-allowed; }

.cnxp__forgot {
  display: block;
  text-align: center;
  margin-top: clamp(2rem, 6vh, 3.5rem);
  color: var(--c-blue);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}
.cnxp__switch {
  text-align: center;
  margin-top: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--c-heading);
}
.cnxp__switch a { color: var(--c-primary); font-weight: var(--fw-bold); }

/* ---- Vue « mot de passe oublié » (bascule in-place) ---- */
.cnxp__welcome--center { text-align: center; margin-bottom: var(--sp-2); }
.cnxp__forgot-sub { text-align: center; color: var(--c-muted); font-size: var(--fs-sm); margin-bottom: var(--sp-6); }
.cnxp__forgot--center { margin-top: var(--sp-4); }
.cnxp__forgot-msg { text-align: center; color: var(--c-blue); font-size: var(--fs-xs); font-weight: var(--fw-medium); margin-top: var(--sp-3); }

/* ============================ DROITE : marketing ======================== */
.cnxp__promo {
  position: relative;
  display: flex;
  padding: clamp(1rem, 2vw, 2rem);
  /* Photo réelle (auto-hébergée) + léger voile sombre pour la lisibilité du texte. */
  background-color: #3a4657;
  background-image:
    linear-gradient(180deg, rgba(25, 32, 48, .35), rgba(25, 32, 48, .55)),
    url("/assets/img/pro-hero.jpg");
  background-size: cover;
  background-position: center;
}
.cnxp__promo-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(20, 28, 45, .05), rgba(20, 28, 45, .35));
}
.cnxp__promo-title {
  color: #fff;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  margin-bottom: var(--sp-7);
  max-width: 92%;
}
.cnxp__promo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.cnxp__promo-list li {
  position: relative;
  padding-left: 2rem;
  color: #fff;
  font-size: var(--fs-body);
  line-height: 1.5;
}
.cnxp__promo-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .1em;
  width: 1.2rem;
  height: 1.2rem;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DD1F8B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.cnxp__promo-cta {
  align-self: flex-start;
  margin-top: auto;          /* pousse le bouton en bas de la carte */
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 12px 22px;
  border-radius: 12px;
  background: var(--c-primary);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  transition: background .15s ease;
}
.cnxp__promo-cta:hover { background: var(--c-primary-hover); }
.cnxp__promo-cta span { font-size: 1.2em; line-height: 1; }

/* ============================== MODALE ERREUR =========================== */
.modal[hidden] { display: none; }
.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
}
.modal__backdrop { position: absolute; inset: 0; background: rgba(20, 20, 25, .55); }
.modal__dialog {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: #fff;
  border-radius: 16px;
  padding: var(--sp-7) var(--sp-6);
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
}
.modal__icon { color: var(--c-danger); margin-bottom: var(--sp-3); }
.modal__title {
  color: var(--c-danger);
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-2);
}
.modal__msg { color: var(--c-danger); font-size: var(--fs-xs); line-height: 1.5; }

/* ============================== RESPONSIVE ============================== */
@media (max-width: 900px) {
  .cnxp { grid-template-columns: 1fr; }
  .cnxp__promo { display: none; }   /* login épuré sur mobile (à confirmer vs live mobile) */
  .cnxp__form-col { min-height: 100vh; }
}