/* ══════════════════════════════════════════════════
   login.css — Page Se connecter
   Stains Espoir · Symfony 7 · Asset Mapper
   Préfixe .lg-* — isolation totale
══════════════════════════════════════════════════ */

/* ── Serif local ── */
.lg-page {
  --lg-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

/* ══ SPLIT LAYOUT ══ */
.lg-split {
  display: flex;
  min-height: calc(100dvh - var(--header-h, 72px));
}

/* ══ PANNEAU GAUCHE ══ */
.lg-left {
  width: 40%;
  flex-shrink: 0;
  background: linear-gradient(160deg, #1B0F2B 0%, #2d1155 60%, #4a1070 100%);
  position: sticky;
  top: var(--header-h, 72px);
  height: calc(100dvh - var(--header-h, 72px));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2.5rem;
  overflow: hidden;
}

/* Déco — étoile haut droite */
.lg-star {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  font-size: 1.5rem;
  color: rgba(255, 255, 255, .12);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/* Déco — watermark chiffre */
.lg-watermark {
  position: absolute;
  bottom: -0.1em;
  right: -0.05em;
  font-family: var(--lg-serif);
  font-size: clamp(7rem, 18vw, 13rem);
  font-weight: 900;
  font-style: italic;
  color: rgba(255, 255, 255, .04);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/* Pill badge */
.lg-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: rgba(255, 255, 255, .10);
  color: rgba(255, 255, 255, .75);
  font-size: .68rem;
  font-weight: 700;
  padding: .25rem .85rem;
  border-radius: 20px;
  margin-bottom: 1.25rem;
  width: fit-content;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Titre panneau */
.lg-panel-title {
  font-family: var(--lg-serif);
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  font-weight: 900;
  font-style: italic;
  color: #fff;
  line-height: 1.15;
  margin-bottom: .6rem;
}

/* Sous-texte panneau */
.lg-panel-lead {
  font-size: .85rem;
  color: rgba(255, 255, 255, .5);
  line-height: 1.7;
  margin-bottom: 2rem;
  max-width: 28ch;
}

/* Stats */
.lg-stats {
  display: flex;
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-top: 1.25rem;
}

.lg-stat {
  flex: 1;
}

.lg-stat + .lg-stat {
  padding-left: 1rem;
  border-left: 1px solid rgba(255, 255, 255, .12);
}

.lg-stat-num {
  font-family: var(--lg-serif);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 900;
  font-style: italic;
  color: #e9c8ff;
  display: block;
  line-height: 1;
}

.lg-stat-lbl {
  font-size: .58rem;
  color: rgba(255, 255, 255, .38);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: .25rem;
  display: block;
}

/* ══ PANNEAU DROIT ══ */
.lg-right {
  flex: 1;
  background: var(--cream, #FFFBF7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
}

.lg-form-wrap {
  width: 100%;
  max-width: 400px;
}

/* Titre formulaire */
.lg-form-title {
  font-family: var(--lg-serif);
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 800;
  font-style: italic;
  color: var(--text, #2B1A1A);
  line-height: 1.15;
  margin-bottom: .35rem;
}

/* Sous-titre formulaire */
.lg-form-sub {
  font-size: .92rem;
  color: var(--muted, #7B5B5B);
  margin-bottom: 1.75rem;
  line-height: 1.5;
}

/* Bandeau d'erreur */
.lg-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  border-radius: 8px;
  padding: .75rem 1rem;
  margin-bottom: 1rem;
  font-size: .88rem;
  line-height: 1.5;
}

/* ══ BOUTONS ══ */
.lg-btn-primary {
  display: block;
  width: 100%;
  padding: .75rem 1.5rem;
  background: linear-gradient(90deg, var(--brand, #6A1B9A), var(--brand-2, #B36AD1));
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: var(--font, sans-serif);
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: opacity .2s, transform .15s;
  text-decoration: none;
  margin-top: .35rem;
}

.lg-btn-primary:hover { opacity: .9; transform: translateY(-1px); }
.lg-btn-primary:active { transform: translateY(0); }
.lg-btn-primary:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.lg-btn-ghost {
  display: block;
  width: 100%;
  padding: .75rem 1.5rem;
  background: rgba(106, 27, 154, .08);
  color: var(--brand, #6A1B9A);
  border: none;
  border-radius: 10px;
  font-family: var(--font, sans-serif);
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background .2s;
  text-decoration: none;
  margin-top: .65rem;
}

.lg-btn-ghost:hover { background: rgba(106, 27, 154, .14); }

/* Lien mot de passe oublié */
.lg-forgot {
  display: block;
  text-align: center;
  margin-top: 1.1rem;
  font-size: .85rem;
  color: var(--brand, #6A1B9A);
  text-decoration: none;
}

.lg-forgot:hover { text-decoration: underline; }

/* ── Bouton submit : animation de soumission ── */
.lg-btn-primary.lg-btn-loading {
    opacity: .88;
    pointer-events: none;
    animation: lg-pulse 1.4s ease-in-out infinite;
}
@keyframes lg-pulse {
    0%,100% { box-shadow: 0 0 0 0    rgba(106,27,154,.45) }
    50%      { box-shadow: 0 0 0 10px rgba(106,27,154,0)  }
}
.lg-dots {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    margin-left: .5rem;
}
.lg-dots .dot {
    width: 5px; height: 5px;
    background: #fff;
    border-radius: 50%;
    animation: lg-dot-bounce .9s ease-in-out infinite;
}
.lg-dots .dot:nth-child(2) { animation-delay: .15s }
.lg-dots .dot:nth-child(3) { animation-delay: .30s }
@keyframes lg-dot-bounce {
    0%,80%,100% { transform: scale(.5); opacity: .4 }
    40%          { transform: scale(1);  opacity: 1  }
}

/* ══ RESPONSIVE ══ */
@media (max-width: 768px) {
  .lg-split {
    flex-direction: column;
    min-height: auto;
  }

  .lg-left {
    width: 100%;
    position: static;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: .75rem;
    justify-content: flex-start;
    padding: 1.25rem 1rem;
  }

  .lg-star,
  .lg-watermark { display: none; }

  .lg-pill { margin-bottom: 0; flex-shrink: 0; }

  .lg-panel-title {
    font-size: 1.2rem;
    margin-bottom: 0;
  }

  .lg-panel-lead,
  .lg-stats { display: none; }

  .lg-right {
    padding: 2rem 1.25rem 3rem;
    align-items: flex-start;
  }

  .lg-form-wrap { max-width: 100%; }
}

/* ── Skeleton (#lg-skeleton) ── */
@keyframes lg-shimmer{to{background-position:-200% 0}}
#lg-skeleton{position:fixed;inset:0;z-index:9999;background:var(--cream,#FFFBF7);overflow:hidden;transition:opacity .5s ease;pointer-events:all;display:flex;flex-direction:column}
.lg-sk-split{display:flex;flex:1}
.lg-sk-left{width:40%;flex-shrink:0;background:linear-gradient(160deg,#1B0F2B 0%,#2d1155 60%,#4a1070 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:2.5rem;gap:.5rem}
.lg-sk-b{border-radius:10px;background:linear-gradient(90deg,rgba(106,27,154,.12) 25%,rgba(106,27,154,.22) 50%,rgba(106,27,154,.12) 75%);background-size:200% 100%;animation:lg-shimmer 1.4s ease-in-out infinite}
.lg-sk-b--lt{background:linear-gradient(90deg,rgba(255,255,255,.1) 25%,rgba(255,255,255,.22) 50%,rgba(255,255,255,.1) 75%);background-size:200% 100%;animation:lg-shimmer 1.4s ease-in-out infinite}
.lg-sk-stats{display:flex;gap:1rem;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.1)}
.lg-sk-stats>.lg-sk-b--lt{flex:1;border-radius:6px}
.lg-sk-right{flex:1;display:flex;align-items:center;justify-content:center;padding:3rem 2rem;background:var(--cream,#FFFBF7)}
.lg-sk-wrap{width:100%;max-width:400px;display:flex;flex-direction:column;gap:.5rem}
@media(max-width:768px){
  .lg-sk-split{flex-direction:column}
  .lg-sk-left{width:100%;height:auto;justify-content:flex-start;flex-direction:row;align-items:center;padding:1.25rem 1rem;gap:.75rem}
  .lg-sk-left>*:not(:first-child){display:none}
  .lg-sk-stats{display:none}
  .lg-sk-right{align-items:flex-start;padding:2rem 1.25rem}
  .lg-sk-wrap{max-width:100%}
}