/* =====================================================================
   Page de connexion : formulaire en verre à gauche, image à droite
   ===================================================================== */

/* ---------- Mise en page ---------- */
.page-login {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100vh;
  overflow: hidden;
  font-family: 'Inter', var(--font);
  background: radial-gradient(ellipse 130% 90% at 30% 0%, #0c1b3d, var(--bg) 55%);
}

.login-cote-form {
  display: grid; place-items: center;
  padding: 40px 24px;
}

/* Partie droite : image */
.login-visuel {
  position: relative;
  min-height: 100vh;
  background: url('../img/background.webp') center / cover no-repeat, #0d2350;
  border-left: 1px solid rgba(227, 189, 111, .25);
}
/* Fondu bleu nuit sur le bord gauche + légère teinte pour rester dans le thème */
.login-visuel::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 19, 48, .45), rgba(8, 19, 48, 0) 18%),
    linear-gradient(135deg, rgba(31, 79, 153, .08), rgba(227, 189, 111, .05));
}
/* Fin trait doré lumineux sur la séparation */
.login-visuel::after {
  content: '';
  position: absolute; top: 10%; bottom: 10%; left: -1px; width: 2px;
  background: linear-gradient(180deg, transparent, var(--or), transparent);
  box-shadow: 0 0 14px rgba(227, 189, 111, .6);
}

/* ---------- Carte en verre ---------- */
.login-carte {
  position: relative;
  width: min(410px, 100%);
  padding: 32px 32px 28px;
  border-radius: 16px;
  text-align: center;
  background: linear-gradient(160deg, rgba(150, 185, 245, .2), rgba(70, 110, 190, .1) 60%);
  border: 1px solid rgba(227, 189, 111, .18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    inset 0 -1px 0 rgba(255, 255, 255, .05),
    0 20px 50px -25px rgba(0, 8, 30, .45),
    0 0 50px -12px rgba(76, 142, 230, .3);
  overflow: hidden;
  isolation: isolate;
}
/* Liseré doré qui tourne autour de la carte */
.login-carte::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--angle), transparent 0 55%, var(--or-fonce), var(--or-clair), var(--or), transparent 95%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: tour-bordure 6s linear infinite;
}
@property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes tour-bordure { to { --angle: 360deg; } }

/* ---------- Logo et titre ---------- */
.logo-zone { width: 128px; height: 128px; margin: 0 auto; display: grid; place-items: center; }
.login-logo-img { width: 128px; height: 128px; object-fit: contain; }

.login-carte h1 {
  margin: 0 0 6px;
  font-size: 24px; font-weight: 800; letter-spacing: .03em;
  background: linear-gradient(90deg, #fff, var(--or-clair), var(--or), #fff, #cfe0ff, #fff);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: brille 8s linear infinite;
}
@keyframes brille { to { background-position: 300% 0; } }
.login-sous-titre { margin: 0 0 26px; color: rgba(235, 240, 255, .82); font-size: 14px; line-height: 1.5; }

/* ---------- Formulaire ---------- */
.login-carte form { display: flex; flex-direction: column; gap: 8px; }

.champ-icone { position: relative; display: block; }
.champ-icone > svg {
  position: absolute; left: 15px; top: 50%; translate: 0 -50%;
  width: 16px; height: 16px;
  fill: rgba(220, 228, 255, .55);
  transition: fill .2s; pointer-events: none;
}
.champ-icone:focus-within > svg { fill: var(--or); }

.login-carte input {
  padding: 14px 46px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .18);
  color: #fff;
}
.login-carte input::placeholder { color: rgba(220, 228, 255, .5); }
.login-carte input:hover { background: rgba(255, 255, 255, .09); }
.login-carte input:focus { background: rgba(255, 255, 255, .11); }

/* Bouton œil : afficher / masquer le mot de passe */
.oeil {
  position: absolute; right: 8px; top: 50%; translate: 0 -50%;
  display: grid; place-items: center;
  width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: var(--r-sm); background: none; cursor: pointer;
  color: rgba(220, 228, 255, .55);
  transition: background .2s, color .2s;
}
.oeil:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.oeil:focus-visible { outline: 2px solid var(--or); outline-offset: 1px; }
.oeil svg { width: 17px; height: 17px; }
.oeil .ferme, .oeil[aria-pressed='true'] .ouvert { display: none; }
.oeil[aria-pressed='true'] .ferme { display: block; }

/* ---------- Boutons ---------- */
.login-carte .btn { width: 100%; overflow: hidden; }
.login-carte form .btn { margin-top: 4px; }

/* Bouton principal : reflet qui traverse au survol */
.login-carte .btn-primaire { padding: 15px 22px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55); }
.login-carte .btn-primaire::after {
  content: '';
  position: absolute; top: 0; left: -60%; width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-20deg);
  transition: left .7s var(--ease);
}
.login-carte .btn-primaire:hover:not(:disabled) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 10px 26px -10px rgba(227, 189, 111, .7), 0 0 0 1px rgba(255, 230, 170, .5);
}
.login-carte .btn-primaire:hover:not(:disabled)::after { left: 120%; }
.btn-primaire .fleche { transition: transform .25s var(--ease); }
.btn-primaire:hover .fleche { transform: translateX(4px); }
.btn-primaire.charge .fleche { display: none; }

/* Séparateur « ou » */
.separateur {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0;
  color: rgba(227, 189, 111, .6); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
}
.separateur::before, .separateur::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(227, 189, 111, .3), transparent); }

/* Bouton Discord en verre bleu */
.btn-discord {
  padding: 14px 22px;
  color: #fff;
  background: linear-gradient(180deg, rgba(60, 110, 190, .5), rgba(35, 70, 140, .45));
  box-shadow: inset 0 0 0 1px rgba(110, 160, 230, .35), inset 0 1px 0 rgba(255, 255, 255, .2), 0 8px 18px -12px rgba(0, 10, 40, .5);
}
.btn-discord:hover:not(:disabled) {
  filter: none;
  box-shadow: inset 0 0 0 1px rgba(227, 189, 111, .5), inset 0 1px 0 rgba(255, 255, 255, .22), 0 10px 24px -10px rgba(31, 79, 153, .6);
}
.btn-discord svg.plein {
  width: 22px; height: 22px;
  filter: drop-shadow(0 0 6px rgba(120, 170, 255, .7));
  transition: transform .3s var(--ease);
}
.btn-discord:hover svg.plein { transform: rotate(-8deg) scale(1.1); }
.btn-discord.charge { pointer-events: none; }
.btn-discord.charge svg.plein { display: none; }
.btn-discord .spinner { border-color: rgba(255, 255, 255, .3); border-top-color: #fff; }

/* ---------- Erreur ---------- */
.login-carte .erreur {
  display: flex; align-items: center; gap: 10px;
  text-align: left;
  background: rgba(255, 69, 90, .14);
  border-color: rgba(255, 99, 120, .4);
  color: #ffd0d6;
}
.login-carte .erreur::before {
  content: '!'; flex-shrink: 0;
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: #ff4d6a; color: #fff; font-weight: 800; font-size: 13px;
  box-shadow: 0 0 12px rgba(255, 77, 106, .7);
}

/* ---------- Pied ---------- */
.login-pied {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 22px 0 0; color: rgba(220, 228, 255, .5); font-size: 12px;
}
.login-pied svg { width: 13px; height: 13px; fill: var(--or); filter: drop-shadow(0 0 4px rgba(227, 189, 111, .6)); }

/* ---------- Redirection automatique vers Discord ---------- */
.redirection-ecran {
  position: fixed; inset: 0; z-index: 10;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: var(--fond-degrade);
  color: rgba(247, 221, 160, .85); font-size: 15px; font-weight: 500; letter-spacing: .02em;
}
.redirection-ecran p { margin: 0; }
html.redirection .redirection-ecran { display: flex; }
html.redirection .login-carte { visibility: hidden; }
.spinner-or {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(227, 189, 111, .2); border-top-color: var(--or);
  animation: rotation .8s linear infinite;
}

/* ---------- Écrans plus petits ---------- */
@media (max-width: 900px) {
  .page-login { grid-template-columns: 1fr; }
  .login-visuel { display: none; }
}
@media (max-width: 480px) {
  .login-carte { padding: 28px 20px 22px; }
}