/* =========================================================================
   WNX AUTH THEME — WenSchool
   Feuille de style centralisée pour les pages "compte" :
   Login, Register, ForgotPassword, ValideCode.

   A référencer UNE SEULE FOIS, idéalement dans le layout partagé des pages
   de compte (ex: _Layout_account.cshtml), plutôt que dans chaque vue.
   Chaque vue inclut néanmoins le lien par sécurité si elle est rendue seule.

   Reprend les tokens de couleur déjà utilisés sur acces-non-autorise.html
   et emploi_auto_test.html, pour une cohérence visuelle sur tout le site.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap');

:root{
  --wnx-navy: #0d3c6b;
  --wnx-navy-deep: #082744;
  --wnx-blue: #2198F3;
  --wnx-orange: #FF9A13;
  --wnx-ink: #eaf2fb;
  --wnx-ink-dim: #9fb7d1;
  --wnx-line: rgba(255,255,255,0.12);
  --wnx-danger: #ff8087;
  --wnx-danger-bg: rgba(229,72,77,0.14);
  --wnx-success: #6be3a4;
  --wnx-success-bg: rgba(47,174,102,0.14);
  --wnx-warning-bg: rgba(255,154,19,0.14);
}

/* ---------- fond plein écran + coquille, portés par _Layout_login ----------
   Ce fond est posé UNE FOIS sur <body> par le layout. Les vues (Login,
   Register, ...) ne posent plus leur propre fond — elles ne fournissent que
   la carte, évitant le double-fond / superposition d'arrière-plans. */
html, body.wnx-auth-body{ height:100%; margin:0; }
.wnx-auth-body{
  font-family: 'Inter', sans-serif;
  color: var(--wnx-ink);
  background:
    radial-gradient(circle at 18% 15%, rgba(33,152,243,0.16), transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(255,154,19,0.10), transparent 45%),
    linear-gradient(180deg, var(--wnx-navy-deep), #061a2e 70%);
  position: relative;
  min-height: 100vh;
}
.wnx-auth-body::before{
  content:"";
  position:fixed; inset:0;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 26px);
  pointer-events:none;
  z-index:0;
}
.wnx-auth-shell{
  position:relative; z-index:1;
  min-height:100vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding: 40px 16px 28px;
}
.wnx-auth-shell-inner{ width:100%; max-width: 1100px; }
.wnx-auth-shell .row{ width:100%; margin:0; }

.wnx-auth-brand{ text-align:center; margin-bottom: 24px; }

.wnx-auth-copyright{
  text-align:center;
  margin-top: 30px;
  font-size: 12px;
  color: var(--wnx-ink-dim);
}
.wnx-auth-copyright a{ color: var(--wnx-ink-dim); }
.wnx-auth-copyright a:hover{ color: var(--wnx-orange); }

/* ---------- correctif important : asp-validation-summary vide ----------
   Le tag helper ajoute la classe "validation-summary-valid" quand il n'y a
   AUCUNE erreur, en plus de nos classes wnx-auth-alert/is-danger. Sans cette
   règle, une boîte vide colorée reste visible en permanence sur le formulaire. */
.validation-summary-valid,
.field-validation-valid{ display:none !important; }

/* ---------- eyebrow (petit tag en haut) ---------- */
.wnx-auth-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono', monospace;
  font-size:11px; letter-spacing:0.14em;
  color: var(--wnx-ink-dim);
  background: rgba(255,255,255,0.04);
  border:1px solid var(--wnx-line);
  border-radius: 999px;
  padding: 6px 14px 6px 10px;
  margin: 0 auto 22px;
}
.wnx-auth-eyebrow .dot{
  width:6px; height:6px; border-radius:50%;
  background: var(--wnx-orange);
  animation: wnxPing 2.2s ease-out infinite;
}
@keyframes wnxPing{
  0%   { box-shadow: 0 0 0 0 rgba(255,154,19,0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(255,154,19,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,154,19,0); }
}

/* ---------- icône ronde en tête de carte ---------- */
.wnx-auth-icon{
  width:64px; height:64px; margin: 0 auto 16px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--wnx-blue), var(--wnx-navy));
  box-shadow: 0 10px 26px -8px rgba(33,152,243,0.55);
  font-size:24px; color:#fff;
}
.wnx-auth-icon.is-orange{ background: linear-gradient(135deg, var(--wnx-orange), #c2690a); box-shadow: 0 10px 26px -8px rgba(255,154,19,0.5); }
.wnx-auth-icon.is-success{ background: linear-gradient(135deg, #2fae66, #155c34); box-shadow: 0 10px 26px -8px rgba(47,174,102,0.5); }

/* ---------- carte principale ---------- */
.wnx-auth-card{
  background: rgba(255,255,255,0.045);
  backdrop-filter: blur(6px);
  border:1px solid var(--wnx-line);
  border-radius: 18px;
  padding: 34px 30px;
  box-shadow: 0 24px 60px -20px rgba(2,12,24,0.6);
}
.wnx-auth-card-head{ text-align:center; margin-bottom: 22px; }
.wnx-auth-title{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size: 22px;
  color: var(--wnx-ink);
  margin: 0 0 6px;
}
.wnx-auth-subtitle{
  font-size: 13.5px;
  color: var(--wnx-ink-dim);
  line-height:1.55;
  margin:0;
}

/* ---------- champs de formulaire ---------- */
.wnx-auth-field{ margin-bottom: 16px; }
.wnx-auth-label{
  display:block;
  font-size: 12.5px; font-weight:600;
  color: var(--wnx-ink-dim);
  margin-bottom: 6px;
}
.wnx-auth-label .req{ color: var(--wnx-orange); }

.wnx-auth-input-group{ position: relative; display:flex; align-items:center; }
.wnx-auth-input-group > i{
  position:absolute; left:16px;
  color: var(--wnx-ink-dim);
  font-size: 15px;
  pointer-events:none;
}
.wnx-auth-input,
.wnx-auth-card select.form-control{
  width:100%;
  background: rgba(8,39,68,0.55);
  border:1px solid var(--wnx-line);
  color: var(--wnx-ink) !important;
  border-radius: 10px;
  padding: 12px 16px 12px 42px;
  font-size: 14.5px;
  font-family:'Inter', sans-serif;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.wnx-auth-card select.form-control{ padding-left:16px; }
.wnx-auth-input::placeholder{ color: rgba(159,183,209,0.55); }
.wnx-auth-input:focus,
.wnx-auth-card select.form-control:focus{
  outline:none;
  border-color: var(--wnx-blue);
  background: rgba(8,39,68,0.8);
  box-shadow: 0 0 0 3px rgba(33,152,243,0.18);
}
.wnx-auth-input-pwd{ padding-right: 42px; }

.wnx-auth-pwd-toggle{
  position:absolute; right:8px;
  background:none; border:none; cursor:pointer;
  color: var(--wnx-ink-dim);
  padding:8px; font-size:15px;
  display:flex; align-items:center; justify-content:center;
}
.wnx-auth-pwd-toggle:hover{ color: var(--wnx-ink); }

.wnx-auth-error{
  display:block;
  font-size:12px;
  color: var(--wnx-danger);
  margin-top:5px;
}

/* checkbox CGU */
.wnx-auth-check{ display:flex; align-items:flex-start; gap:9px; margin: 6px 0 18px; }
.wnx-auth-check input[type="checkbox"]{ margin-top:3px; accent-color: var(--wnx-blue); width:16px; height:16px; flex-shrink:0; }
.wnx-auth-check label{ font-size:13px; color: var(--wnx-ink-dim); margin:0; }
.wnx-auth-check a{ color: var(--wnx-blue); text-decoration:none; }
.wnx-auth-check a:hover{ text-decoration:underline; }

/* ---------- bouton principal ---------- */
.wnx-auth-btn{
  width:100%;
  border:none; border-radius: 10px;
  padding: 13px 20px;
  font-size: 14.5px; font-weight:700;
  font-family:'Inter', sans-serif;
  cursor:pointer;
  background: var(--wnx-blue);
  color:#04182b;
  box-shadow: 0 8px 22px -8px rgba(33,152,243,0.65);
  transition: transform .12s ease, box-shadow .15s ease, opacity .15s ease;
  display:flex; align-items:center; justify-content:center; gap:9px;
}
.wnx-auth-btn:hover{ opacity:0.92; }
.wnx-auth-btn:active{ transform: translateY(1px); }
.wnx-auth-btn:disabled{ opacity:0.65; cursor:default; }
.wnx-auth-btn.is-outline{
  background: transparent; color: var(--wnx-ink);
  border:1px solid var(--wnx-line); box-shadow:none;
}
.wnx-auth-btn.is-outline:hover{ background: rgba(255,255,255,0.06); }
.wnx-auth-btn .spinner{
  width:15px; height:15px; border-radius:50%;
  border:2px solid rgba(4,24,43,0.35); border-top-color:#04182b;
  animation: wnxSpin .7s linear infinite;
}
.wnx-auth-btn.is-outline .spinner{ border:2px solid rgba(234,242,251,0.35); border-top-color:#eaf2fb; }
@keyframes wnxSpin{ to{ transform: rotate(360deg); } }

/* ---------- alertes ---------- */
.wnx-auth-alert{
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  line-height:1.5;
  margin-bottom: 18px;
  text-align:center;
  border:1px solid transparent;
}
.wnx-auth-alert.is-danger{ background: var(--wnx-danger-bg); color: var(--wnx-danger); border-color: rgba(229,72,77,0.35); }
.wnx-auth-alert.is-warning{ background: var(--wnx-warning-bg); color: #ffcf94; border-color: rgba(255,154,19,0.35); }
.wnx-auth-alert.is-success{ background: var(--wnx-success-bg); color: var(--wnx-success); border-color: rgba(47,174,102,0.35); }
.wnx-auth-alert.is-info{ background: rgba(33,152,243,0.12); color:#a9d8fd; border-color: rgba(33,152,243,0.35); }
.wnx-auth-alert strong{ color: inherit; }

/* ---------- carte "utilisateur reconnu" (login déjà en session) ---------- */
.wnx-auth-recognized{ text-align:center; }
.wnx-auth-recognized img{
  width: 84px; height:84px; border-radius:50%;
  border: 3px solid rgba(255,255,255,0.15);
  object-fit:cover; margin-bottom:14px;
}
.wnx-auth-recognized h3{
  font-family:'Space Grotesk', sans-serif; font-size:19px; margin:0 0 3px; color: var(--wnx-ink);
}
.wnx-auth-recognized .pseudo{ font-size:12.5px; color: var(--wnx-ink-dim); font-family:'JetBrains Mono', monospace; }
.wnx-auth-recognized .not-me{ margin-top:14px; font-size:12.5px; }
.wnx-auth-recognized .not-me a{ color: var(--wnx-ink-dim); }
.wnx-auth-recognized .not-me a:hover{ color: var(--wnx-ink); }

/* ---------- code d'activation à 6 chiffres ---------- */
.wnx-auth-code-input{
  width:100%;
  text-align:center;
  font-family:'JetBrains Mono', monospace;
  font-size: 30px;
  font-weight:600;
  letter-spacing: 0.5em;
  padding: 16px 10px 16px 16px;
  border-radius: 12px;
  background: rgba(8,39,68,0.55);
  border:1px solid var(--wnx-line);
  color: var(--wnx-ink);
}
.wnx-auth-code-input:focus{
  outline:none; border-color: var(--wnx-orange);
  box-shadow: 0 0 0 3px rgba(255,154,19,0.18);
}
.wnx-auth-code-value{
  font-family:'Space Grotesk', sans-serif;
  font-size: 26px; font-weight:700;
  color: var(--wnx-orange);
  text-align:center;
  letter-spacing: 0.06em;
}

/* ---------- carte "relation" (register avec message d'invitation) ---------- */
.wnx-auth-relation-card{
  background: rgba(255,255,255,0.05);
  border:1px solid var(--wnx-line);
  border-radius: 12px;
  padding: 16px;
  text-align:center;
  margin-bottom: 18px;
}
.wnx-auth-relation-card .name{ font-family:'Space Grotesk', sans-serif; font-size:15.5px; color: var(--wnx-ink); margin: 6px 0 2px; }
.wnx-auth-relation-card .muted{ color: var(--wnx-ink-dim); font-size:12.5px; }
.wnx-auth-relation-check{ display:flex; align-items:center; justify-content:center; gap:8px; font-size:12.5px; color: var(--wnx-ink-dim); margin-bottom:10px; }
.wnx-auth-relation-check input{ accent-color: var(--wnx-blue); }

/* ---------- liens de pied de page ---------- */
.wnx-auth-footer{
  text-align:center;
  margin-top: 26px;
  font-size: 13px;
}
.wnx-auth-footer a{
  color: var(--wnx-ink-dim);
  text-decoration:none;
  font-weight:600;
}
.wnx-auth-footer a:hover{ color: var(--wnx-ink); }
.wnx-auth-footer .sep{ color: rgba(255,255,255,0.2); margin: 0 10px; }

.wnx-auth-home{
  text-align:center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--wnx-line);
  font-family:'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.06em;
}
.wnx-auth-home a{ color: var(--wnx-ink-dim); text-decoration:none; }
.wnx-auth-home a:hover{ color: var(--wnx-orange); }

/* ---------- select2 : harmonisation avec le thème sombre ---------- */
.wnx-auth-card .select2-container--default .select2-selection--single{
  background: rgba(8,39,68,0.55) !important;
  border:1px solid var(--wnx-line) !important;
  border-radius: 10px !important;
  height: 46px !important;
  display:flex; align-items:center;
}
.wnx-auth-card .select2-container--default .select2-selection--single .select2-selection__rendered{
  color: var(--wnx-ink) !important;
  padding-left: 16px !important;
}
.wnx-auth-card .select2-container--default .select2-selection--single .select2-selection__arrow{ height:44px !important; }

@media (max-width: 480px){
  .wnx-auth-card{ padding: 26px 20px; }
  .wnx-auth-code-input{ font-size:24px; letter-spacing:0.35em; }
}