/* removed: tokens.css handled by page aggregator */
/* Champs + groupes */
.form-group{ margin-bottom:14px; }
.form-group label{ font-weight:700; display:block; margin-bottom:6px; }
.form-group input{
  width:100%; padding:11px 12px;
  font-size:1rem; border:1px solid var(--color-border); border-radius:10px; outline:none;
  background:#fff;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.form-group input:focus{
  border-color: var(--ml-primary);
  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
}

/* Base du paragraphe */
.ml-hook{ margin:8px 0 0; line-height:1.6; color:var(--ml-text-muted); }
.ml-hook strong{ color:var(--ml-text); }

/* Typewriter */
.typewriter .tw-chunk{ visibility:hidden; }
@media (prefers-reduced-motion: no-preference){
  .typewriter .tw-chunk{
    display:inline;
    visibility:hidden;
  }
  .typewriter .tw-chunk.is-visible{
    visibility:visible;
    /* curseur supprimé */
  }
}
/* Fallback sans JS: garder visible */
html.no-js .typewriter .tw-chunk{ visibility:visible !important; }

/* Révélation progressive moderne (CSS-first) */
.tw-stream {
  white-space: pre-wrap; /* préserve espaces/retours */
}

.tw-stream .tw-word{
  display:inline-block;      /* groupe atomique par mot */
  white-space:nowrap;        /* empêche la coupure intra-mot */
}

.tw-stream .tw-char {
  display: inline-block; /* rend les petites translations fiables */
  opacity: 0;
}

.tw-stream.is-active .tw-char {
  animation: tw-reveal 180ms ease-out both;
  /* intervalle par caractère, personnalisable via --tw-interval */
  animation-delay: calc(var(--i) * var(--tw-interval, 30ms));
}

@keyframes tw-reveal {
  from { opacity: 0; transform: translateY(0.15em); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Accessibilité : si l’utilisateur préfère moins d’animation */
@media (prefers-reduced-motion: reduce) {
  .tw-stream .tw-char {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }
}



/* Email avec faux slot */
.email-wrapper{ position:relative; display:flex; align-items:center; }
.email-wrapper input{ padding-right:2.5rem; }
.fake-slot{ position:absolute; right:.5rem; width:28px; height:28px; }

/* Mot de passe */
.password-wrapper{ position:relative; display:flex; align-items:center; }
.password-wrapper input{ padding-right:2.5rem; }

/* --- NOUVEAU : bouton œil en SVG (plus d'image) --- */
.toggle-pw-visibility{
  position:absolute; right:.5rem; width:30px; height:30px;
  border:none; background:none; cursor:pointer; display:grid; place-items:center;
  color:#0f172a; opacity:.85; border-radius:6px;
}
.toggle-pw-visibility:hover{ opacity:1; }
.toggle-pw-visibility:focus-visible{
  outline:2px solid var(--ml-primary); outline-offset:2px;
}
.toggle-pw-visibility .icon-eye{ width:20px; height:20px; display:block; }
.toggle-pw-visibility .icon-eye .stroke{
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
/* Trait (slash) quand le mot de passe est VISIBLE */
.toggle-pw-visibility[aria-pressed="true"]::after{
  content:""; position:absolute; width:22px; height:2px; background:currentColor;
  border-radius:2px; transform:rotate(-45deg);
}

/* Boutons principaux */
.btn-login{
  display:block; width:100%;
  margin-top:10px;
  background: linear-gradient(135deg, var(--ml-primary), var(--ml-primary-700));
  color:#fff; font-weight:700; font-size:1rem;
  border:none; border-radius:12px; padding:12px 14px; cursor:pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
  transition: filter .2s ease, transform .05s ease, box-shadow .2s ease;
}
.btn-login:hover{ filter:brightness(1.05); box-shadow:0 14px 30px rgba(0,0,0,.35); }
.btn-login:active{ transform:translateY(1px); }

/* Même rendu pour Register & Reset */
.btn-register,
.btn-reset{
  display:block; width:100%;
  margin-top:10px;
  background: linear-gradient(135deg, var(--ml-primary), var(--ml-primary-700));
  color:#fff; font-weight:700; font-size:1rem;
  border:none; border-radius:12px; padding:12px 14px; cursor:pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
  transition: filter .2s ease, transform .05s ease, box-shadow .2s ease;
}
.btn-register:hover,
.btn-reset:hover{ filter:brightness(1.05); box-shadow:0 14px 30px rgba(0,0,0,.35); }
.btn-register:active,
.btn-reset:active{ transform:translateY(1px); }

/* Liens “inscription / connexion” */
.register-link{ text-align:center; font-size:.95rem; margin-top:12px; }
.register-link a{ color:var(--ml-primary-700); font-weight:700; text-decoration:none; }
.register-link a:hover{ text-decoration:underline; }

.login-link{ text-align:center; font-size:.95rem; margin-top:12px; }
.login-link a{ color:var(--ml-primary-700); font-weight:700; text-decoration:none; }
.login-link a:hover{ text-decoration:underline; }

/* Encadré d’erreur premium (centré) */
.error-alert{
  --err-bg1:#FFE6E9; --err-bg2:#FFF1F3; --err-border:#FFB3C0; --err-text:#7F1D1D;
  background: linear-gradient(180deg, var(--err-bg1), var(--err-bg2));
  border:1px solid var(--err-border);
  color:var(--err-text);
  padding:14px 16px 16px; border-radius:14px; font-weight:600; margin-bottom:16px;
  text-align:center; box-shadow:0 6px 18px rgba(0,0,0,.12);
}
.error-alert .error-title{ font-weight:800; margin:0 0 6px 0; }
.error-alert a{ color:#1B6FA3; text-decoration:underline; }
.error-alert .forgot-link{ margin-top:8px; }
.error-alert::before{
  content:"!"; display:inline-grid; place-items:center; margin:0 auto 8px;
  width:28px; height:28px; border-radius:999px;
  background: radial-gradient(45% 45% at 50% 40%, #FFD7DF, #FFB3C0);
  color:#7F1D1D; font-weight:900; line-height:1;
  box-shadow:0 4px 10px rgba(0,0,0,.18);
}

/* Mascotte (doublon utile si core.css chargé ailleurs) */
.ml-mascot-img{ width:56px; height:56px; border-radius:999px; }

/* Shake si erreur */
.form-container.has-error{ border:1px solid #FFB3C0; }
.shake-once{ animation:shake .45s ease; }
@keyframes shake{
  0%{ transform:translateX(0); }
  25%{ transform:translateX(-6px); }
  50%{ transform:translateX(6px); }
  75%{ transform:translateX(-4px); }
  100%{ transform:translateX(0); }
}

.btn-modal-ok:hover{ filter:brightness(1.05); }

/* ---------- BUY TOKENS (déjà présent) ---------- */
.purchase-container { width:100%; }
.purchase-container .feedback-msg{
  margin-bottom:12px; font-weight:600; text-align:center; min-height:1.25rem;
}

/* Social: Discord variant (optional) */
.social-btn.social-discord{
  background:#5865F2;
  color:#fff;
  border-color:#5865F2;
}
.social-btn.social-discord .social-icon{ filter:brightness(0) invert(1); }
.social-btn.social-discord:hover{ filter:brightness(0.95); }
.form-referral{ margin-bottom:16px; }
.form-referral label{ display:block; font-weight:700; margin-bottom:6px; }
.referral-row{ display:flex; gap:8px; }
.referral-row input{
  flex:1 1 auto; padding:11px 12px; font-size:1rem;
  border:1px solid var(--color-border); border-radius:10px; outline:none; background:#fff;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.referral-row input:focus{ border-color: var(--ml-primary); box-shadow: 0 0 0 4px rgba(0,0,0,.15); }
.btn-secondary{
  flex:0 0 auto; padding:10px 14px; border-radius:10px; border:1px solid var(--ml-primary-700);
  background:#fff; color:var(--ml-primary-700); font-weight:700; cursor:pointer;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .05s ease;
}
.btn-secondary:hover{ background:rgba(27,111,163,.06); box-shadow:0 6px 14px rgba(0,0,0,.18); }
.btn-secondary:active{ transform:translateY(1px); }
.feedback-referral{ margin-top:8px; font-size:.95rem; min-height:1.1rem; }
.plans-list{
  display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin:10px 0 16px;
}
.plan-card{
  background:#fff; border:1px solid var(--ml-border); border-radius:12px; padding:14px; text-align:center; cursor:pointer;
  transition: box-shadow .2s ease, transform .05s ease, border-color .2s ease;
}
.plan-card:hover{ box-shadow: var(--shadow-card-hover); }
.plan-card:active{ transform: scale(.99); }
.plan-card h3{ margin:0 0 6px 0; font-size:1.05rem; }
.plan-card p{ margin:0; }
.plan-card .price{ margin-top:6px; font-weight:700; color:var(--ml-primary-700); }
.plan-card[aria-pressed="true"], .plan-card.selected{
  border-color: var(--ml-primary); box-shadow: 0 0 0 4px rgba(0,0,0,.12);
}
.back-link{ text-align:center; margin-top:6px; }
.back-link a{ color:var(--ml-primary-700); font-weight:700; text-decoration:none; }
.back-link a:hover{ text-decoration:underline; }
@media (width <= 768px){
  .plans-list{ grid-template-columns:1fr; }
  .referral-row{ flex-direction:column; }
  .btn-secondary{ width:100%; }
  /* Masquer l’écusson sur Register en mobile pour éviter les chevauchements */
  .form-header--register .ml-mascot-img{ display:none; }
}