/* ============================================================================ LA COQUILLE DES PAGES D'AUTHENTIFICATION — SEULE DÉFINITION ============================================================================ `login.php` et `register.php` portaient chacune leur copie de la carte, de son en-tête et des boutons Google/Microsoft. Les deux avaient dérivé : fond `#f1f5f9` d'un côté contre `#ffffff` de l'autre, et une ombre `rgba(0,0,0,.3)` restée du thème sombre sur la connexion. ⚠️ ON NE FUSIONNE PAS LES DEUX PAGES, seulement leur présentation. Ce sont deux parcours différents : un formulaire à deux champs d'un côté, un assistant à plusieurs étapes de l'autre. Elles ont aussi deux identités de référencement distinctes (`register` indexée, `login` non) et deux entonnoirs à mesurer séparément. ⚠️ CHAQUE `var()` PORTE UN REPLI : ces pages ont leur propre `` et l'histoire a montré qu'elles peuvent se retrouver sans le thème. ============================================================================ */ /* --- La carte ------------------------------------------------------------ */ .login-card, .register-card { background: var(--stm-field, #ffffff); border: 1px solid var(--stm-line, rgba(15, 23, 42, 0.112)); border-radius: 1rem; box-shadow: 0 20px 60px rgba(15, 23, 42, 0.14); overflow: hidden; } /* --- Son en-tête --------------------------------------------------------- */ .login-header, .register-header { background: linear-gradient(135deg, var(--stm-surface-2, rgba(15, 23, 42, 0.038)) 0%, var(--stm-field, #ffffff) 100%); padding: 2rem; text-align: center; border-bottom: 1px solid var(--stm-line, rgba(15, 23, 42, 0.112)); } /* --- Les boutons Google / Microsoft / Apple ------------------------------ */ .social-auth { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.2rem; } .social-btn { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: .75rem 1rem; border-radius: .7rem; font-size: .93rem; font-weight: 600; text-decoration: none; border: 1px solid var(--stm-line, rgba(15, 23, 42, 0.112)); background: var(--stm-field, #ffffff); color: var(--stm-ink-2, #1e293b); transition: border-color .2s ease, background .2s ease, transform .15s ease; } .social-btn:hover { border-color: var(--stm-ink-5, #64748b); background: var(--stm-field-hover, #f1f5f9); color: var(--stm-ink, #0f172a); transform: translateY(-1px); } .social-btn svg { flex: 0 0 auto; } /* --- Le séparateur « ou » ------------------------------------------------ */ .social-sep { display: flex; align-items: center; gap: .8rem; margin: 0 0 1.2rem; color: var(--stm-ink-5, #64748b); font-size: .82rem; } .social-sep::before, .social-sep::after { content: ''; flex: 1; height: 1px; background: var(--stm-line, rgba(15, 23, 42, 0.112)); }