/* Setwise · page de connexion et de création de compte. Jetons de styles.css ; mode sombre si le profil le demande. */
:root { --a-bg: var(--white); --a-card: var(--white); --a-field: var(--paper); --a-ink: var(--ink); --a-soft: var(--muted); --a-line: var(--line-2); }
html[data-look="sombre"] { color-scheme: dark; --a-bg: #0c1210; --a-card: #141c18; --a-field: #1b2520; --a-ink: #eef3ef; --a-soft: #8d9b93; --a-line: rgba(255, 255, 255, 0.14); }
html, body { margin: 0; min-height: 100%; }
body { background: var(--a-bg); color: var(--a-ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
.num { font-variant-numeric: tabular-nums; }
.auth [hidden] { display: none !important; }

.auth { display: grid; min-height: 100vh; min-height: 100dvh; }
@media (min-width: 960px) { .auth { grid-template-columns: minmax(0, 1fr) minmax(480px, 0.9fr); } }

/* Panneau vert (ordinateur) */
.auth__side { position: relative; display: none; flex-direction: column; padding: 40px 56px; overflow: hidden; isolation: isolate; background: var(--court); color: #fff; }
@media (min-width: 960px) { .auth__side { display: flex; } }
.auth__court { position: absolute; left: 50%; bottom: -14%; z-index: -1; width: 150%; transform: translateX(-50%); fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 5; }
.auth__pitch { margin: auto 0; max-width: 520px; }
.auth__pitch h2 { margin: 0; font-family: var(--font-display); font-size: clamp(2.6rem, 3.6vw, 3.6rem); font-weight: 800; line-height: 1; letter-spacing: -0.05em; }
.auth__pitch h2 em { font-style: normal; color: var(--ball); }
.auth__pitch ul { display: grid; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; font-size: 16px; color: rgba(255, 255, 255, 0.85); }
.auth__pitch li { display: flex; align-items: center; gap: 10px; }
.auth__pitch li svg { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: rgba(217, 242, 74, 0.16); color: var(--ball); }
.auth__peek { display: flex; align-items: center; gap: 14px; width: max-content; margin-top: 40px; padding: 12px 20px 12px 12px; border-radius: 22px; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.auth__peek img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; background: #fff; box-shadow: 0 0 0 3px var(--ball); }
.auth__peek small { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ball); }
.auth__peek b { display: block; margin-top: 2px; font-family: var(--font-display); font-size: 19px; letter-spacing: -0.03em; }
.auth__peek strong { margin-left: 18px; font-family: var(--font-display); font-size: 46px; font-weight: 850; line-height: 1; letter-spacing: -0.06em; color: var(--ball); }
.auth__peek strong span { font-size: 0.45em; vertical-align: 0.9em; }

/* Colonne du formulaire */
.auth__main { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: calc(20px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom)); }
.auth__brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 21px; font-weight: 750; letter-spacing: -0.03em; color: var(--a-ink); }
.auth__brand svg { width: 30px; height: 30px; color: var(--logo); }
html[data-look="sombre"] .auth__main .auth__brand svg { color: #fff; }
.auth__brand--light { color: #fff; }
.auth__brand--light svg { color: #fff; }
@media (min-width: 960px) { .auth__main > .auth__brand { display: none; } }

.auth__card { width: min(420px, 100%); padding: 26px 24px 24px; border-radius: 28px; background: var(--a-card); box-shadow: 0 0 0 1px var(--line), 0 30px 70px -36px rgba(11, 31, 21, 0.4); animation: a-in 0.5s var(--ease-out) both; }
@keyframes a-in { from { opacity: 0; transform: translateY(14px); } }
@media (max-width: 480px) { .auth__card { padding: 22px 18px 20px; box-shadow: none; } .auth__main { justify-content: flex-start; padding-top: calc(28px + env(safe-area-inset-top)); } }
.auth__notice { margin: 0 0 18px; padding: 11px 14px; border-radius: 14px; background: #fff7e6; color: #7a5410; font-size: 13.5px; line-height: 1.45; }
.auth__notice a { color: inherit; font-weight: 650; text-decoration: underline; }
html[data-look="sombre"] .auth__notice { background: rgba(230, 170, 60, 0.14); color: #f1cc85; }

.auth__tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: var(--a-field); box-shadow: inset 0 0 0 1px var(--line); isolation: isolate; }
.auth__tabs button { height: 40px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 650; color: var(--a-soft); cursor: pointer; transition: color 0.25s ease; }
.auth__tabs button[aria-selected="true"] { color: var(--a-ink); }
.auth__tabs-ink { position: absolute; top: 4px; bottom: 4px; left: 4px; z-index: -1; width: calc(50% - 4px); border-radius: 999px; background: var(--a-card); box-shadow: 0 1px 2px rgba(11, 31, 21, 0.08), 0 4px 12px -4px rgba(11, 31, 21, 0.18); transition: transform 0.35s var(--ease-out); }
.auth[data-mode="signup"] .auth__tabs-ink { transform: translateX(100%); }

.auth__title { margin: 22px 0 0; font-family: var(--font-display); font-size: 28px; font-weight: 800; line-height: 1.05; letter-spacing: -0.045em; }
.auth__sub { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--a-soft); }

.auth__google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 50px; margin-top: 20px; border: 0; border-radius: 14px; background: var(--a-card); box-shadow: inset 0 0 0 1px var(--a-line); font: inherit; font-size: 15px; font-weight: 600; color: var(--a-ink); cursor: pointer; transition: background-color 0.2s ease, transform 0.15s ease; }
.auth__google svg { width: 20px; height: 20px; }
.auth__google:hover { background: var(--a-field); }
.auth__google:active { transform: scale(0.99); }
.auth__or { display: flex; align-items: center; gap: 12px; margin: 18px 0 4px; font-size: 12.5px; color: var(--a-soft); }
.auth__or::before, .auth__or::after { content: ""; flex: 1; height: 1px; background: var(--a-line); }

.auth__form { display: grid; gap: 14px; margin-top: 12px; }
.auth__field { display: grid; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--a-ink); }
.auth__label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.auth__field input { width: 100%; height: 48px; padding: 0 14px; border: 0; border-radius: 14px; background: var(--a-field); box-shadow: inset 0 0 0 1px var(--line); font: inherit; font-size: 15.5px; font-weight: 450; color: var(--a-ink); outline: none; transition: box-shadow 0.2s ease, background-color 0.2s ease; }
.auth__field input::placeholder { color: var(--faint); }
.auth__field input:focus { background: var(--a-card); box-shadow: inset 0 0 0 1.5px var(--green-500), 0 0 0 4px var(--green-50); }
.auth__field input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--bad, #b4462f); }
.auth__pw { position: relative; display: block; }
.auth__pw input { padding-right: 50px; }
.auth__eye { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 10px; background: none; color: var(--a-soft); cursor: pointer; }
.auth__eye svg { width: 20px; height: 20px; }
.auth__eye:hover { color: var(--a-ink); }
.auth__link { padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--green-600); cursor: pointer; }
.auth__link:hover { text-decoration: underline; }
html[data-look="sombre"] .auth__link { color: #7fdcab; }
.auth__err { min-height: 0; font-size: 12.5px; font-weight: 550; color: var(--bad, #b4462f); }
.auth__err:empty { display: none; }
.auth__err--form { margin: 0; padding: 10px 12px; border-radius: 12px; background: #fbece7; line-height: 1.4; }
html[data-look="sombre"] .auth__err--form { background: rgba(239, 138, 112, 0.14); color: #ef8a70; }
html[data-look="sombre"] .auth__err { color: #ef8a70; }

.auth__submit { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; margin-top: 4px; border: 0; border-radius: 14px; background: var(--green-500); color: #fff; font: inherit; font-size: 15.5px; font-weight: 700; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 22px -12px rgba(18, 128, 74, 0.8); transition: background-color 0.2s ease, transform 0.15s ease; }
.auth__submit:hover { background: var(--green-600); }
.auth__submit:active { transform: scale(0.99); }
.auth__submit[aria-busy="true"] span { opacity: 0; }
.auth__submit[aria-busy="true"]::after { content: ""; position: absolute; width: 20px; height: 20px; border: 2.5px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.auth__submit--ghost { background: var(--a-field); color: var(--a-ink); box-shadow: inset 0 0 0 1px var(--line); }
.auth__submit--ghost:hover { background: var(--line); }
.auth__legal { margin: 0; font-size: 12px; line-height: 1.5; color: var(--a-soft); text-align: center; }
.auth__legal a { color: inherit; text-decoration: underline; }
.auth__check { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; line-height: 1.45; color: var(--a-soft); cursor: pointer; }
.auth__terms { display: grid; gap: 4px; }
.auth__terms[hidden] { display: none; }
.auth__check a { color: inherit; text-decoration: underline; }
.auth__check input { flex: none; width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--green-500); }

.auth__back { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--a-soft); cursor: pointer; }
.auth__back svg { width: 18px; height: 18px; }
.auth__back:hover { color: var(--a-ink); }
.auth__sent { text-align: center; }
.auth__sent-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 6px auto 0; border-radius: 50%; background: var(--green-50); color: var(--green-600); }
.auth__sent-icon svg { width: 28px; height: 28px; }
.auth__sent .auth__submit { margin-top: 22px; }
.auth__sent .auth__sub b { color: var(--a-ink); }
html[data-look="sombre"] .auth__sent-icon { background: rgba(40, 180, 106, 0.14); color: #7fdcab; }

.auth__foot { margin: 0; font-size: 13.5px; }
.auth__foot a { color: var(--a-soft); }
.auth__foot a:hover { color: var(--a-ink); }
[data-view] { animation: a-fade 0.35s var(--ease-out); }
@keyframes a-fade { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .auth__card, [data-view] { animation: none; } .auth__tabs-ink { transition: none; } }