/* 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(--auth-input-border); border-radius:10px; outline:none;
  background:var(--auth-input-bg);
  color:var(--auth-input-text);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.form-group input::placeholder{ color:var(--auth-input-placeholder); }
.form-group input:focus{
  border-color: var(--auth-primary);
  box-shadow: 0 0 0 4px var(--auth-focus-ring);
}

/* 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:var(--auth-input-text); 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); }
.btn-login--inline{
  display:inline-flex; align-items:center; justify-content:center;
  width:auto; margin-top:0; padding:8px 14px; font-size:.95rem;
  border-radius:10px; box-shadow:0 8px 18px rgba(0,0,0,.25);
  white-space:nowrap;
}

/* 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(--auth-primary-strong); font-weight:700; text-decoration:none; }
.register-link a:hover{ text-decoration:underline; }

/* Ghost button for auth switch (signup) */
.auth-switch-btn{
  display:block;
  width:100%;
  text-align:center;
  margin-top:16px;
  padding:12px;
  border:1px solid rgba(34, 211, 238, 0.3);
  border-radius:12px;
  color:#22d3ee;
  text-decoration:none;
  font-weight:600;
  background:rgba(34, 211, 238, 0.05);
  transition:all 0.2s ease;
}
.auth-switch-btn:hover{
  background:rgba(34, 211, 238, 0.15);
  border-color:rgba(34, 211, 238, 0.6);
  transform:translateY(-1px);
  text-decoration:none;
}

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

/* Encadré d’erreur premium (centré) */
.error-alert{
  --err-bg1:color-mix(in oklab, var(--auth-danger) 20%, transparent);
  --err-bg2:color-mix(in oklab, var(--auth-danger) 12%, transparent);
  --err-border:color-mix(in oklab, var(--auth-danger) 45%, transparent);
  --err-text:color-mix(in oklab, var(--auth-danger) 75%, var(--auth-text));
  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:var(--auth-primary-strong); 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);
}
.error-alert__form{
  margin-top:12px;
  display:flex; flex-wrap:wrap; gap:8px;
  align-items:center; justify-content:center;
}
.error-alert__input{
  flex:1 1 200px; min-width:180px;
  padding:8px 10px; font-size:.95rem;
  border-radius:8px; border:1px solid var(--auth-input-border);
  background:var(--auth-input-bg); color:var(--auth-input-text);
  outline:none; transition: box-shadow .2s ease, border-color .2s ease;
}
.error-alert__input:focus{
  border-color: var(--auth-primary);
  box-shadow: 0 0 0 4px var(--auth-focus-ring);
}

/* 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 var(--err-border); }
.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); }

@media (width <= 520px){
  .error-alert__form{ flex-direction:column; align-items:stretch; }
  .error-alert__input{ width:100%; min-width:0; }
  .btn-login--inline{ width:100%; }
}

@media (width <= 768px){
  /* Masquer l’écusson sur Register en mobile pour éviter les chevauchements */
  .form-header--register .ml-mascot-img{ display:none; }
}