/* doc-project | public/assets/css/auth.css | harmonise connexion, inscription et récupération dans une expérience premium et rassurante */
.auth-page { display: grid; min-height: 72vh; gap: 0; padding-block: 2rem 5rem; }
.auth-card, .auth-visual { border: 1px solid var(--line); background: white; padding: clamp(1.3rem, 5vw, 3rem); }
.auth-card { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.auth-card h1 { margin: .4rem 0 .9rem; font-size: clamp(2rem, 7vw, 3.7rem); }
.auth-card > p { color: var(--ink-soft); }
.auth-card form { display: grid; gap: 1rem; margin-top: 1.4rem; }
.auth-card form > .text-link { justify-self: end; font-size: .8rem; }
.auth-card__icon { display: grid; width: 4rem; height: 4rem; place-items: center; margin-bottom: 1rem; border-radius: 1.25rem; background: var(--blush); color: var(--wine); }
.auth-card__icon .icon { width: 2rem; height: 2rem; }
.auth-separator { display: grid; grid-template-columns: 1fr auto 1fr; gap: .7rem; align-items: center; margin-block: 1.2rem; color: var(--ink-soft); font-size: .72rem; }
.auth-separator::before, .auth-separator::after { height: 1px; background: var(--line); content: ""; }
.auth-switch { margin-top: 1.2rem; color: var(--ink-soft); text-align: center; }
.auth-visual { display: none; position: relative; overflow: hidden; color: white; }
.auth-visual::before, .auth-visual::after { position: absolute; border: 1px solid rgb(255 255 255 / 28%); border-radius: 50%; content: ""; }
.auth-visual::before { inset: 10% 20% 35% 5%; }
.auth-visual::after { inset: 35% 5% 8% 25%; }
.auth-visual h2 { position: relative; z-index: 1; max-width: 12ch; color: white; }
.auth-visual p { position: relative; z-index: 1; max-width: 28rem; color: #eadde1; }
.auth-page--compact { place-items: center; }
.auth-page--compact .auth-card { width: min(100%, 31rem); }
@media (min-width: 820px) { .auth-page:not(.auth-page--compact) { grid-template-columns: minmax(0, 1fr) minmax(18rem, .72fr); align-items: stretch; } .auth-page:not(.auth-page--compact) .auth-card { border-radius: var(--radius-lg) 0 0 var(--radius-lg); } .auth-visual { display: grid; align-content: center; border-left: 0; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; background: linear-gradient(145deg, var(--wine-dark), var(--rose)); } }