/* L'Aparté - Auth (login + register) */
.auth-layout {
    width: 100%;
    max-width: 100%;
    min-height: calc(100vh - 8rem);
    align-items: center;
    justify-content: center;
}
.auth-layout .col-main {
    display: flex;
    justify-content: center;
    max-width: 100%;
}
.auth-layout #sidebarMount { display: none; }
.card {
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: 12px;
    padding: 2.5rem;
    width: 100%;
    max-width: 400px;
}
.card h1 { font-size: 1.5rem; margin-bottom: 0.5rem; color: var(--accent); }
.card p.sub { color: var(--muted); margin-bottom: 1.5rem; font-size: 0.9rem; }
.card label { display: block; margin-bottom: 0.4rem; font-size: 0.85rem; color: var(--muted); }
.card input {
    width: 100%;
    padding: 0.7rem;
    margin-bottom: 1rem;
    background: var(--fond);
    border: 1px solid var(--bord);
    border-radius: 6px;
    color: var(--texte);
    font-size: 1rem;
}
.card input:focus { outline: none; border-color: var(--accent2); }
/* --- Captcha : champ large + bouton recharger compact --- */
.captcha-row {
    display: flex;
    gap: 0.6rem;
    align-items: stretch;
    margin-bottom: 1rem;
}
.captcha-row .captcha-input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    margin-bottom: 0;
    padding: 0.9rem 1rem;
    font-size: 1.1rem;
    letter-spacing: 0.02em;
}
.captcha-row .captcha-reload {
    flex: 0 0 auto;
    width: auto;
    padding: 0 1rem;
    background: transparent;
    border: 1px solid var(--bord);
    border-radius: 6px;
    color: var(--texte);
    font-size: 1.1rem;
    cursor: pointer;
}
.captcha-row .captcha-reload:hover { border-color: var(--accent2); color: var(--accent2); }
.card button {
    width: 100%;
    padding: 0.8rem;
    background: var(--accent);
    color: var(--on-accent);
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}
.card button:hover { opacity: 0.9; }
.msg { margin-top: 1rem; font-size: 0.9rem; padding: 0.7rem; border-radius: 6px; display: none; }
.msg.err { background: rgba(248,113,113,0.1); color: var(--err); display: block; }
.msg.ok { background: rgba(56,189,248,0.1); color: var(--accent2); display: block; }
.link { text-align: center; margin-top: 1.2rem; font-size: 0.85rem; color: var(--muted); }
.link a { color: var(--accent2); text-decoration: none; }

/* --- Validation du formulaire d'inscription --- */
.field-err {
    color: var(--err, #dc2626);
    font-size: 0.8rem;
    margin-top: 0.2rem;
    margin-bottom: 0.4rem;
}
.field-hint {
    color: var(--muted, #64748b);
    font-size: 0.8rem;
    margin-top: 0.2rem;
    margin-bottom: 0.4rem;
}

/* --- Avertissement sécurité (mot de passe = clé E2EE) --- */
.pwd-warning {
    background: rgba(245,158,11,0.12);
    border: 1px solid rgba(245,158,11,0.45);
    border-radius: 8px;
    padding: 0.7rem 0.8rem;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--texte);
    margin: 0.6rem 0;
}
.pwd-warning strong { color: var(--accent, #f59e0b); }

/* --- Bouton œil (montrer/masquer mot de passe) --- */
.pwd-wrap {
    position: relative;
    display: block;
    margin-bottom: 1rem;
}
.pwd-wrap input {
    padding-right: 2.4rem;
    margin-bottom: 0 !important;
}
.pwd-toggle {
    position: absolute;
    right: 0.5rem;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none !important;
    border: none !important;
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
    padding: 0 !important;
    margin: 0 !important;
    color: var(--muted, #64748b);
    width: auto !important;
    height: auto !important;
    border-radius: 4px;
    box-shadow: none !important;
    opacity: 0.7;
}
.pwd-toggle:hover { opacity: 1; color: var(--accent2, #8b5cf6); }

/* --- Vérificateur temps réel du mot de passe --- */
.pwd-check {
    margin: 0.2rem 0 0.6rem 0;
    font-size: 0.8rem;
    color: var(--muted, #64748b);
    line-height: 1.6;
}
.pwd-check .crit {
    display: block;
    transition: color 0.2s;
}
.pwd-check .crit.ok { color: var(--good, #10b981); }
.pwd-check .crit.no { color: var(--muted, #64748b); }
.pwd-check .crit .ico { display: inline-block; width: 1.1em; }

/* Bandeau Bêta test (register.html) */
.beta-note {
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.35);
  color: var(--texte);
  padding: 0.8rem 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}
.beta-note strong { color: var(--accent); }

/* Bandeau inscriptions fermées (register.html) */
.closed-note {
  background: rgba(248,113,113,0.08);
  border: 1px solid rgba(248,113,113,0.3);
  color: var(--texte);
  padding: 0.8rem 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}
.closed-note a { color: var(--accent2); text-decoration: underline; }