/* 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);
}

.input-help{
  margin: 8px 2px 0;
  color: var(--auth-input-placeholder);
  font-size: .92rem;
  line-height: 1.45;
}

/* 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; }

.page-back-link--auth{
  display:inline-flex;
  align-items:center;
  gap:0.45rem;
  width:fit-content;
  min-width:0;
  min-height:auto;
  margin:0 0 14px;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  color:var(--auth-primary-strong);
  text-decoration:none;
  font-size:.92rem;
  font-weight:800;
}
.page-back-link--auth:hover{
  background:transparent;
  box-shadow:none;
  transform:none;
  text-decoration:underline;
}
.page-back-link--auth:focus-visible{
  outline:2px solid var(--auth-focus-ring);
  outline-offset:3px;
  border-radius:8px;
}
.auth-context-note{
  margin:-2px 0 16px;
  color:var(--auth-muted);
  text-align:center;
  font-size:.96rem;
  line-height:1.45;
}

.auth-tabs{
  display:flex;
  width:100%;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.04);
  border-radius:12px;
  padding:4px;
  margin:4px 0 24px;
}

.auth-tab{
  flex:1;
  min-width:0;
  text-align:center;
  padding:12px 0;
  font-size:1rem;
  line-height:1.15;
  font-weight:700;
  color:#6c758f;
  text-decoration:none;
  border-radius:8px;
  transition:background .2s ease, color .2s ease, box-shadow .2s ease;
}

.auth-tab.active{
  background:#4d66ff;
  color:#fff;
  box-shadow:0 4px 15px rgba(77,102,255,.3);
}

.auth-tab:focus-visible{
  outline:2px solid rgba(255,255,255,.72);
  outline-offset:2px;
}

/* Trust badge mobile, hidden on desktop. */
.mobile-trust-badge{
  display:none;
}

body[data-product="mathoslocos"] .intro-image--trust{
  max-width:360px;
  width:min(100%, 360px);
  filter:drop-shadow(0 0 30px rgba(77,102,255,.4));
  box-shadow:none;
}

/* 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--success{
  --err-bg1:color-mix(in oklab, #22c55e 24%, transparent);
  --err-bg2:color-mix(in oklab, #14b8a6 14%, transparent);
  --err-border:color-mix(in oklab, #22c55e 62%, transparent);
  --err-text:#dcfce7;
  box-shadow:0 10px 24px rgba(34,197,94,.14);
}
.error-alert--success::before{
  content:"✓";
  background:radial-gradient(45% 45% at 50% 40%, #dcfce7, #86efac);
  color:#14532d;
}

.error-alert.error-alert--success{
  background:rgba(16,185,129,.15) !important;
  border:1px solid rgba(16,185,129,.4) !important;
  color:#34d399;
}

.error-alert.error-alert--success .success-title{
  margin:0 0 8px;
  color:#10b981;
  font-size:1.1rem;
  font-weight:800;
}

.error-alert.error-alert--success p:not(.success-title){
  margin:0;
  color:#d1fae5;
  font-size:.95rem;
  line-height:1.4;
}

.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);
}

.auth-inline-status{
  --auth-status-accent:#ef4444;
  --auth-status-bg:rgba(239,68,68,.12);
  --auth-status-border:rgba(239,68,68,.34);
  --auth-status-text:#fecaca;
  margin-bottom:16px;
  padding:14px;
  border:1px solid var(--auth-status-border);
  border-radius:14px;
  background:var(--auth-status-bg);
  color:var(--auth-status-text);
  box-shadow:0 12px 28px rgba(0,0,0,.16);
}

.auth-inline-status--opportunity{
  --auth-status-accent:#6ee7ff;
  --auth-status-bg:linear-gradient(180deg, rgba(34,211,238,.12), rgba(16,185,129,.09));
  --auth-status-border:rgba(110,231,255,.28);
  --auth-status-text:#dffbff;
}

.auth-inline-status--success{
  --auth-status-accent:#34d399;
  --auth-status-bg:rgba(16,185,129,.13);
  --auth-status-border:rgba(52,211,153,.35);
  --auth-status-text:#d1fae5;
}

.auth-inline-status__text{
  margin:0;
  color:var(--auth-status-text);
  font-size:.96rem;
  line-height:1.45;
  font-weight:700;
  text-align:left;
}

.auth-inline-status__actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

.auth-inline-status__button,
.auth-inline-status a.auth-inline-status__button{
  margin:0;
  text-decoration:none;
}

.auth-inline-status__button--secondary,
.auth-inline-status a.auth-inline-status__button--secondary{
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:#e7f0ff;
  box-shadow:none;
}

.auth-inline-status__button--secondary:hover,
.auth-inline-status a.auth-inline-status__button--secondary:hover{
  background:rgba(255,255,255,.1);
  text-decoration:none;
}

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

body[data-product="mathoslocos"] .ml-mascot-img{
  width:42px;
  height:42px;
  border-radius:14px;
  background:transparent;
  object-fit:contain;
}

/* 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%; }
  .auth-inline-status__actions{ flex-direction:column; }
  .auth-inline-status__button{ width:100%; }
}

@media (width <= 768px){
  body[data-product="mathoslocos"] .auth-login-shell .left-panel{
    display:none !important;
  }

  body[data-product="mathoslocos"] .mobile-trust-badge{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding:16px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    margin-bottom:24px;
  }

  body[data-product="mathoslocos"] .trust-profile{
    display:flex;
    align-items:center;
    gap:14px;
    flex:1;
    min-width:0;
  }

  body[data-product="mathoslocos"] .prof-avatar{
    width:52px;
    height:52px;
    border-radius:50%;
    object-fit:cover;
    flex-shrink:0;
    border:2px solid #8b5cf6;
  }

  body[data-product="mathoslocos"] .trust-text{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    flex:1;
    min-width:0;
  }

  body[data-product="mathoslocos"] .brand-name{
    font-size:1.15rem;
    font-weight:800;
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    background:linear-gradient(90deg, #4fd1c5, #8b5cf6);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
  }

  body[data-product="mathoslocos"] .prof-title{
    font-size:.85rem;
    color:#94a3b8;
    line-height:1.2;
    margin-top:2px;
    white-space:nowrap;
  }

  body[data-product="mathoslocos"] .prof-title strong{
    color:#e2e8f0;
  }

  body[data-product="mathoslocos"] .prof-badge{
    font-size:.65rem;
    text-transform:uppercase;
    letter-spacing:.5px;
    color:#4fd1c5;
    font-weight:600;
    margin-top:4px;
    line-height:1.3;
    display:inline-block;
  }

  body[data-product="mathoslocos"] .trust-socials{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;
    flex-shrink:0;
  }

  body[data-product="mathoslocos"] .trust-socials a{
    display:flex;
    color:#64748b;
    transition:color .2s ease, transform .2s ease;
  }

  body[data-product="mathoslocos"] .trust-socials a:hover,
  body[data-product="mathoslocos"] .trust-socials a:focus-visible{
    color:#fff;
    transform:scale(1.1);
  }

  body[data-product="mathoslocos"] .form-header{
    margin-top:0;
  }

  /* Masquer l’écusson sur Register en mobile pour éviter les chevauchements */
  .form-header--register .ml-mascot-img{ display:none; }
}