/* ============================================
   MODALES D'AUTHENTIFICATION (connexion / inscription)

   Chargé uniquement pour les visiteurs non connectés :
   la modale n'est jamais rendue pour un utilisateur authentifié.
   ============================================ */

.auth12-overlay {
    /* Scoped tokens — match menu.html mockup exactly */
    --text-muted: #8a8070;

    position: fixed; inset: 0; z-index: var(--z-auth-modal);
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(ellipse at 50% 30%, rgba(212,175,55,.06) 0%, transparent 60%),
        rgba(0,0,0,.88);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    opacity: 0; visibility: hidden;
    transition: opacity .35s, visibility .35s;
}
.auth12-overlay.active { opacity: 1; visibility: visible; }

/* `hidden` doit l'emporter sur le display:flex/`.auth12-modal` ci-dessus :
   sans cela, un formulaire masqué resterait atteignable au clavier. */
.auth12-overlay[hidden],
.auth12-modal[hidden] { display: none; }

.auth12-modal {
    position: relative;
    width: 92%; max-width: 400px;
    background: linear-gradient(160deg, #1e1b14 0%, #141210 100%);
    border: 1px solid rgba(212,175,55,.18);
    border-radius: 16px;
    padding: 2.2rem 2rem 1.8rem;
    box-shadow:
        0 30px 80px rgba(0,0,0,.6),
        0 0 0 1px rgba(0,0,0,.3),
        inset 0 1px 0 rgba(255,255,255,.04);
    transform: translateY(20px) scale(.96);
    transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.auth12-overlay.active .auth12-modal {
    transform: translateY(0) scale(1);
}

.auth12-modal::before {
    content: ''; position: absolute;
    top: 0; left: 50%; transform: translateX(-50%);
    width: 50%; height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    border-radius: 2px;
}

.auth12-close {
    position: absolute; top: .8rem; right: .8rem;
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
    color: var(--text-muted); font-size: .85rem;
    cursor: pointer; transition: all .2s;
}
.auth12-close:hover {
    background: rgba(212,175,55,.12); border-color: rgba(212,175,55,.25);
    color: var(--gold);
}

.auth12-header { text-align: center; margin-bottom: 1.6rem; }
.auth12-icon {
    width: 56px; height: 56px; margin: 0 auto .8rem;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle, rgba(212,175,55,.1) 0%, transparent 70%);
    border-radius: 50%; border: 1px solid rgba(212,175,55,.08);
}
.auth12-icon i {
    font-size: 1.5rem; color: var(--gold);
    text-shadow: 0 0 18px rgba(212,175,55,.3);
}
.auth12-header h2 {
    font-family: var(--font-title); font-size: 1.4rem; font-weight: 700;
    color: var(--text); margin: 0 0 .2rem; letter-spacing: .02em;
}
.auth12-header p {
    font-size: .78rem; color: var(--text-muted); margin: 0;
    letter-spacing: .04em; font-style: italic;
}

.auth12-form { display: flex; flex-direction: column; gap: .85rem; }

.auth12-field {
    position: relative; display: flex; align-items: center;
}
.auth12-field i.field-icon {
    position: absolute; left: .85rem;
    color: rgba(255,255,255,.2); font-size: .8rem;
    transition: color .2s; pointer-events: none;
}
.auth12-field input {
    width: 100%; padding: .7rem .85rem .7rem 2.5rem;
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px; color: var(--text);
    font-size: .85rem; font-family: inherit;
    transition: all .2s;
}
.auth12-field input::placeholder { color: rgba(255,255,255,.25); }
.auth12-field input:focus {
    outline: none; border-color: var(--gold);
    background: rgba(0,0,0,.45);
    box-shadow: 0 0 0 3px rgba(212,175,55,.08);
}
.auth12-field:focus-within i.field-icon { color: var(--gold); }

/* Le label reste lisible par les lecteurs d'écran sans casser la maquette
   (le champ n'affiche visuellement que son placeholder et son icône). */
.auth12-field .visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.auth12-field .toggle-pw {
    position: absolute; right: .7rem;
    background: none; border: none;
    color: rgba(255,255,255,.2); font-size: .75rem;
    cursor: pointer; transition: color .2s;
}
.auth12-field .toggle-pw:hover { color: var(--gold-light); }
.auth12-field .toggle-pw:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: 4px;
}

.auth12-check {
    display: flex; align-items: center; gap: .5rem;
    padding: .15rem 0;
}
.auth12-check input[type="checkbox"] {
    width: 16px; height: 16px; accent-color: var(--gold);
    cursor: pointer; flex-shrink: 0;
}
.auth12-check label {
    font-size: .78rem; color: var(--text-muted); cursor: pointer;
}

.auth12-check.important {
    background: rgba(212,175,55,.04);
    border: 1px solid rgba(212,175,55,.1);
    border-radius: 8px; padding: .6rem .7rem;
    margin-top: .2rem;
}
.auth12-check.important label { color: var(--text-sec); line-height: 1.35; }
.auth12-check.important label i { color: var(--gold-muted); margin-right: .2rem; }

/* Rappel des règles de mot de passe, affiché avant la soumission. */
.auth12-hint {
    font-size: .7rem;
    color: var(--text-muted);
    line-height: 1.35;
    margin: -.4rem 0 0;
    padding-left: .2rem;
}

.auth12-submit {
    display: flex; align-items: center; justify-content: center;
    gap: .5rem; width: 100%; padding: .75rem;
    margin-top: .3rem;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
    border: none; border-radius: 8px;
    color: #1a1612; font-family: var(--font-title);
    font-size: .88rem; font-weight: 700; letter-spacing: .03em;
    cursor: pointer; transition: all .25s;
    box-shadow: 0 4px 16px rgba(212,175,55,.18);
}
.auth12-submit:hover {
    background: linear-gradient(135deg, #e0bc4a 0%, #b8993a 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(212,175,55,.28);
}
.auth12-submit:active { transform: translateY(0); }
.auth12-submit i { font-size: .85rem; }

.auth12-forgot {
    text-align: center; margin-top: .5rem;
}
.auth12-forgot a {
    font-size: .75rem; color: var(--gold-muted);
    text-decoration: none; transition: color .2s;
}
.auth12-forgot a:hover { color: var(--gold-light); text-decoration: underline; }

.auth12-switch {
    text-align: center; margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,.05);
    font-size: .8rem; color: var(--text-muted);
}
.auth12-switch a {
    color: var(--gold); text-decoration: none;
    font-weight: 600; margin-left: .2rem;
    transition: color .2s;
}
.auth12-switch a:hover { color: var(--gold-light); text-decoration: underline; }

.auth12-divider {
    display: flex; align-items: center; gap: .7rem;
    margin: .3rem 0;
    font-size: .7rem; color: rgba(255,255,255,.18);
    text-transform: uppercase; letter-spacing: .1em;
}
.auth12-divider::before, .auth12-divider::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212,175,55,.1), transparent);
}

/* Auth alert errors/success */
.auth12-modal .alert {
    padding: .8rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    border: 1px solid transparent;
}
.auth12-modal .alert p {
    margin: 0.3rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: .8rem;
}
.auth12-modal .alert-error {
    background: rgba(231, 76, 60, 0.1);
    border-color: rgba(231, 76, 60, 0.3);
    color: #e74c3c;
}
.auth12-modal .alert-success {
    background: rgba(46, 204, 113, 0.1);
    border-color: rgba(46, 204, 113, 0.3);
    color: #2ecc71;
}

/* ═════════════════════════════════════════════
   RESPONSIVE — Small mobile (≤ 480px)
   ═════════════════════════════════════════════ */
@media (max-width: 480px) {
    .auth12-modal { padding: 1.5rem 1.1rem 1.3rem; border-radius: 12px; }
    .auth12-header { margin-bottom: 1.2rem; }
    .auth12-header h2 { font-size: 1.15rem; }
    .auth12-header p { font-size: .7rem; }
    .auth12-icon { width: 44px; height: 44px; margin-bottom: .6rem; }
    .auth12-icon i { font-size: 1.1rem; }
    .auth12-field input { font-size: .78rem; padding: .55rem .7rem .55rem 2.1rem; }
    .auth12-field i.field-icon { font-size: .7rem; left: .7rem; }
    .auth12-submit { font-size: .8rem; padding: .6rem; }
    .auth12-check label { font-size: .72rem; }
    .auth12-switch { font-size: .72rem; margin-top: 1rem; padding-top: .8rem; }
    .auth12-forgot a { font-size: .68rem; }
}