/* ════════════════════════════════
   LA CONNEXION PUIS L'INSCRIPTION
   Une carte au centre, Google d'abord, puis le courriel, à la manière de
   Canva. Sur la charte, voir design/CHARTE-UI.md. Les champs sont les v-*
   de vulta.css, cette feuille ne pose que la mise en page.

   Toutes les pages du compte la portent, connexion, inscription, mot de passe
   oublié puis renouvelé, confirmation du courriel, mot de passe imposé.
   login.css puis register.css, qui les habillaient chacune à sa façon, sont
   ôtées depuis le lot 9 de l'UI.
════════════════════════════════ */

.auth {
    min-height: calc(100vh - var(--nav-h));
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--space-12) var(--space-4) var(--space-16);
}

.auth__carte {
    width: 100%;
    max-width: 440px;
    padding: var(--space-10) var(--space-8);
    background: var(--surface);
    border: 1px solid var(--border-neutral);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}

/* Le contact, deux champs par rangée, prend une carte plus large. */
.auth__carte--large { max-width: 640px; }

.auth__titre { font-size: var(--fs-h2); margin-bottom: var(--space-2); }
.auth__sous { font-size: var(--fs-body); color: var(--muted); margin-bottom: var(--space-8); }

/* ── Google, d'abord ── */
.auth__google { gap: var(--space-3); }
.auth__google svg { width: 18px; height: 18px; }

.auth__ou {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-6) 0;
    font-size: var(--fs-sm);
    color: var(--muted);
}
.auth__ou::before, .auth__ou::after { content: ''; flex: 1; height: 1px; background: var(--border-neutral); }

/* ── Les champs ── */
.auth__rangee { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.auth__rangee .v-field { min-width: 0; }

/* L'oeil du mot de passe vit DANS le champ. */
.auth__mdp { position: relative; }
.auth__mdp .v-input { padding-right: var(--space-12); }
.auth__mdp .pwd-toggle {
    position: absolute;
    top: 50%;
    right: var(--space-1);
    transform: translateY(-50%);
    width: var(--control-h-sm);
    height: var(--control-h-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}
.auth__mdp .pwd-toggle:hover { background: var(--surface-2); color: var(--text); }
.auth__mdp .pwd-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.auth__mdp .pwd-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; }
.auth__mdp .pwd-toggle .eye-off, .auth__mdp .pwd-toggle.visible .eye-on { display: none; }
.auth__mdp .pwd-toggle.visible .eye-off { display: block; }

/* La force du mot de passe, quatre traits. Le script pose fill-weak,
   fill-medium puis fill-strong, voir form-ajax.js. */
.auth__force { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-1); }
.auth__force div { height: 4px; border-radius: var(--radius-pill); background: var(--surface-3); transition: background var(--t-fast); }
.auth__force .fill-weak { background: var(--red); }
.auth__force .fill-medium { background: var(--orange); }
.auth__force .fill-strong { background: var(--green); }
.auth__force-mot { font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.auth__force-mot:empty { display: none; }

.auth .pwd-rules { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); color: var(--muted); }
.auth .pwd-rule { display: flex; align-items: center; gap: var(--space-2); }
.auth .pwd-rule-icon { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--border-control); flex: none; }
.auth .pwd-rule.valid { color: var(--green-text); }
.auth .pwd-rule.valid .pwd-rule-icon { background: var(--green); border-color: var(--green); }

/* Les erreurs rendues par le serveur puis par form-ajax.js. */
.auth .form-errors { list-style: none; margin: 0; padding: 0; }
.auth .form-errors li { font-size: var(--fs-sm); color: var(--red-text); }
.auth .input--error { border-color: var(--red) !important; box-shadow: none !important; }
.auth__erreurs { margin-bottom: var(--space-5); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--red-soft); color: var(--red-text); font-size: var(--fs-sm); }

.auth__case { margin: var(--space-2) 0 var(--space-6); }
.auth__case a, .auth__pied a, .auth__oubli { color: var(--accent-dark); font-weight: var(--fw-semibold); text-decoration: none; }
.auth__case a:hover, .auth__pied a:hover, .auth__oubli:hover { text-decoration: underline; }

.auth__ligne { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: var(--space-1) 0 var(--space-6); font-size: var(--fs-sm); }

.auth__pied { margin-top: var(--space-6); text-align: center; font-size: var(--fs-sm); color: var(--muted); }

/* Une page sans en-tête, le renouvellement du mot de passe, garde son logo. */
.auth--seule { min-height: 100vh; padding-top: var(--space-16); }
.auth__logo { display: inline-flex; margin-bottom: var(--space-8); }
.auth__logo img { height: 28px; width: auto; display: block; }

.auth__action { margin-top: var(--space-4); }
.auth__adresse { color: var(--text); font-weight: var(--fw-semibold); word-break: break-all; }

/* Une note, confirmée ou à savoir. Le vert ne colore que l'icône, le texte vert
   sur vert pâle ne tenait pas le contraste. */
.auth__note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin: var(--space-6) 0;
    padding: var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--green-soft);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    color: var(--text);
}
.auth__note svg { width: 18px; height: 18px; flex: none; margin-top: 2px; fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.auth__note--neutre { background: var(--surface-2); }
.auth__note--neutre svg { stroke: var(--muted); }

.auth__etapes { margin: 0 0 var(--space-2); padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--fs-body); color: var(--text); }

/* Le piège à robots, hors de vue et hors du clavier. */
.auth__piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 480px) {
    .auth { padding: var(--space-6) var(--space-3) var(--space-12); }
    .auth__carte { padding: var(--space-8) var(--space-5); }
    .auth__rangee { grid-template-columns: 1fr; gap: 0; }
}