/* ================================================================
   Sourdosphère — auth-refonte.css
   Connexion, inscription en 5 étapes, mot de passe, onboarding.
   Écran large : panneau forêt à gauche (logo, étapes, message),
   formulaire large à droite. Mobile : une colonne.
   ================================================================ */
:root { --font: 'Schibsted Grotesk', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; }

.auth-body { font-family: var(--font); background: #F7F6F2; color: #1e2a24; }
.auth-body button, .auth-body input, .auth-body select, .auth-body textarea { font-family: var(--font); }
.auth-body :focus-visible { outline: 3px solid #1D9E75; outline-offset: 3px; }

.auth-shell { min-height: 100vh; min-height: 100svh; }

/* ── Panneau de gauche ───────────────────────────────────────── */
.auth-shell__visual-side {
    order: -1; flex: 0 0 clamp(340px, 34vw, 460px); position: sticky; top: 0;
    height: 100vh; height: 100svh; box-sizing: border-box;
    margin: 0; border-radius: 0 28px 28px 0;
    align-items: flex-start; justify-content: flex-start; text-align: left;
    padding: 2.25rem 2.5rem 2.75rem; gap: 0;
    background:
        radial-gradient(circle at 15% 8%, rgba(29,158,117,.38), transparent 42%),
        radial-gradient(circle at 90% 95%, rgba(159,225,203,.16), transparent 50%),
        #1a3a2e;
}
.auth-rail__logo { color: #fff; font-weight: 600; font-size: 1.4rem; letter-spacing: -0.02em; text-decoration: none; }
.auth-rail__logo span { color: #5fd0a8; }
.auth-rail__logo:hover { text-decoration: none; }

.auth-shell__visual-badge { position: static; margin-top: 1.5rem; text-transform: none; letter-spacing: 0; font-size: .85rem; font-weight: 600; color: #9FE1CB; background: rgba(159,225,203,.14); }
.auth-shell__visual-badge { display: none; }

/* Étapes verticales */
.auth-rail__steps { list-style: none; margin: 2.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.auth-rail__step { display: flex; align-items: center; gap: .9rem; position: relative; padding: .55rem 0; color: rgba(255,255,255,.55); font-weight: 500; }
.auth-rail__step:not(:last-child)::after { content: ''; position: absolute; left: 15px; top: calc(50% + 17px); width: 2px; height: calc(1.1rem - 2px); background: rgba(255,255,255,.18); }
.auth-rail__step--done:not(:last-child)::after { background: #1D9E75; }
.auth-rail__dot { width: 32px; height: 32px; border-radius: 50%; flex: 0 0 32px; display: flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 600; border: 2px solid rgba(255,255,255,.28); box-sizing: border-box; background: transparent; }
.auth-rail__dot svg { width: 15px; height: 15px; }
.auth-rail__step--done { color: #fff; }
.auth-rail__step--done .auth-rail__dot { background: #1D9E75; border-color: #1D9E75; color: #072016; }
.auth-rail__step--active { color: #fff; font-weight: 600; }
.auth-rail__step--active .auth-rail__dot { background: #fff; border-color: #fff; color: #1a3a2e; }

/* Message de bas de panneau */
.auth-shell__visual-avatars { margin-top: auto; margin-bottom: 1.5rem; }
.auth-shell__avatar { width: 56px; height: 56px; border-color: #1a3a2e; font-weight: 600; font-size: 1rem; }
.auth-shell__avatar--1 { background: #1D9E75; color: #072016; }
.auth-shell__avatar--2 { background: #9FE1CB; color: #072016; }
.auth-shell__avatar--3 { background: #0F6E56; }
.auth-shell__visual-text { text-align: left; font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; max-width: 340px; margin-bottom: .9rem; }
.auth-shell__visual-sub { text-align: left; font-size: .98rem; color: rgba(255,255,255,.75); max-width: 340px; line-height: 1.55; }

/* ── Formulaire (droite) ─────────────────────────────────────── */
.auth-shell__form-side { background: #F7F6F2; padding: 2.5rem 3rem; }
.auth-shell__inner { background: transparent; border: 0; padding: 0; max-width: 560px; }
.auth-shell__inner--wide { max-width: 620px; }
.auth-shell__logo { display: none; font-weight: 600; letter-spacing: -0.02em; font-size: 1.35rem; margin-bottom: 1.25rem; }
.auth-steps, .auth-steps__label { display: none; }
.auth-shell__title { font-size: 2rem; font-weight: 600; letter-spacing: -0.03em; color: #1a3a2e; line-height: 1.1; }
.auth-shell__subtitle { color: #4a5a52; font-size: 1.02rem; margin-bottom: 2rem; }
.auth-shell__switch { color: #4a5a52; margin-top: 1.5rem; text-align: left; }
.auth-shell__switch a { color: #0a6b4e; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.auth-shell__back { color: #4a5a52; font-weight: 500; }
.auth-shell__back:hover { color: #1a3a2e; }
.auth-shell__skip { color: #4a5a52; text-decoration: underline; text-underline-offset: 3px; }

.auth-body .form { gap: 1.25rem; }
.auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.auth-body .form__label { font-weight: 600; color: #1e2a24; font-size: .92rem; }
.auth-body .form__hint { color: #5b6b63; }
.auth-body .form__input, .auth-body .form__select, .auth-body .form__textarea {
    background: #fff; border: 1.5px solid #cfcdc4; border-radius: 12px; padding: .8rem 1rem; font-size: 1rem; min-height: 50px; box-sizing: border-box;
}
.auth-body .form__input:focus, .auth-body .form__select:focus, .auth-body .form__textarea:focus { border-color: #1D9E75; box-shadow: 0 0 0 3px rgba(29,158,117,.18); }
.auth-body .form__checkbox-label a { color: #0a6b4e; text-decoration: underline; text-underline-offset: 3px; }
.auth-body .btn { border-radius: 12px; font-weight: 600; }
.auth-body .btn--primary { background: #1D9E75; border-color: #1D9E75; color: #072016; padding: .9rem 1.5rem; font-size: 1.02rem; }
.auth-body .btn--primary:hover { background: #1a3a2e; border-color: #1a3a2e; color: #fff; }
.auth-body .btn--outline { border-color: #1a3a2e; color: #1a3a2e; }
.auth-body .alert { border-radius: 12px; }
.auth-body a[href*="mot-de-passe-oublie"] { color: #0a6b4e !important; }
.auth-shell__actions { margin-top: .5rem; }

/* Onboarding */
.auth-suggest-section { background: #fff; border: 1px solid #E6E4DC; border-radius: 14px; padding: 1.1rem 1.25rem .6rem; }
.auth-suggest-section__title { text-transform: none; letter-spacing: 0; font-size: .95rem; color: #1a3a2e; }
.auth-suggest-row__icon { border-radius: 10px; background: #1a3a2e; }
.auth-photo-upload { padding: 2rem 1rem; background: #fff; border: 1px solid #E6E4DC; border-radius: 14px; }
.auth-photo-upload__preview { width: 140px; height: 140px; }
.auth-photo-upload__label { color: #0a6b4e; text-decoration: underline; text-underline-offset: 3px; }

/* ── Mobile / tablette ───────────────────────────────────────── */
@media (max-width: 900px) {
    .auth-shell { display: block; }
    .auth-shell__visual-side { display: none; }
    .auth-shell { display: flex; }
    .auth-shell__form-side { padding: 1.5rem 1.25rem 2.5rem; align-items: center; justify-content: center; min-height: 100vh; min-height: 100svh; box-sizing: border-box; }
    .auth-shell__inner { margin: 0 auto; }
    .auth-shell__logo { display: block; }
    .auth-steps, .auth-steps__label { display: flex; }
    .auth-steps__label { display: block; }
    .auth-steps__dot--done { background: #1D9E75; color: #072016; }
    .auth-steps__dot--active { background: #1a3a2e; }
    .auth-steps__label { color: #0a6b4e; }
    .auth-shell__title { font-size: 1.6rem; }
    .auth-shell__subtitle { margin-bottom: 1.5rem; }
}
@media (max-width: 560px) {
    .auth-grid { grid-template-columns: 1fr; gap: 1.25rem; }
}