/* ============================================
   AUTH CHOICE - ÉTAPE CONNEXION / INSCRIPTION
   ============================================ */
.auth-choice-page {
    min-height: 100vh;
    margin: 0;
    background: #050a20;
    color: #fff;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    overflow-x: hidden;
}
.auth-background { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.auth-background::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 15%, rgba(30,64,255,.22), transparent 42%), linear-gradient(180deg,#08133a 0%,#06102d 45%,#05091d 100%);
}
.auth-orb { position: absolute; border-radius: 50%; filter: blur(10px); opacity: .6; }
.auth-orb-1 { width: 330px; height: 330px; left: -150px; top: 20%; background: radial-gradient(circle,rgba(30,64,255,.28),transparent 70%); }
.auth-orb-2 { width: 300px; height: 300px; right: -130px; top: 35%; background: radial-gradient(circle,rgba(0,212,255,.18),transparent 70%); }
.auth-orb-3 { width: 240px; height: 240px; left: 45%; bottom: -130px; background: radial-gradient(circle,rgba(30,64,255,.16),transparent 70%); }
.auth-topbar { position: fixed; top: 18px; left: 18px; right: 18px; z-index: 20; display: flex; align-items: center; justify-content: space-between; }
.auth-topbar .language-switcher-top { position: static; }
.auth-back { display: inline-flex; align-items: center; gap: 7px; color: #dce5ff; text-decoration: none; padding: 9px 13px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: rgba(7,16,46,.65); backdrop-filter: blur(12px); font-size: .84rem; transition: .25s ease; }
.auth-back:hover { transform: translateX(-2px); background: rgba(30,64,255,.22); border-color: rgba(77,108,255,.5); }
.auth-main { position: relative; z-index: 2; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 78px 18px 35px; }
.auth-card { width: min(100%, 520px); text-align: center; padding: 24px 18px 20px; }
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 16px; }
.auth-logo-wrap { position: relative; width: 68px; height: 68px; }
.auth-app-logo { width: 68px; height: 68px; object-fit: contain; position: relative; z-index: 2; border-radius: 18px; filter: drop-shadow(0 8px 22px rgba(30,64,255,.42)); }
.auth-logo-glow { position: absolute; inset: -18px; border-radius: 50%; background: radial-gradient(circle,rgba(30,64,255,.28),transparent 68%); z-index: 1; }
.bookmaker-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); color: #e9efff; font-size: .82rem; font-weight: 600; }
.bookmaker-chip img { width: 25px; height: 25px; object-fit: contain; border-radius: 7px; }
.auth-user-icon { width: 58px; height: 58px; margin: 4px auto 14px; display: flex; align-items: center; justify-content: center; border-radius: 17px; background: linear-gradient(145deg,#1261ff,#1950db); box-shadow: 0 10px 28px rgba(20,83,255,.34); }
.auth-card h1 { margin: 0 0 8px; font-size: clamp(1.65rem,6vw,2.2rem); font-weight: 800; letter-spacing: -.5px; }
.auth-subtitle { margin: 0 auto 22px; max-width: 500px; color: #9caad0; font-size: .86rem; line-height: 1.55; }
.auth-actions { display: grid; gap: 10px; }
.auth-option { display: grid; grid-template-columns: 46px 1fr 24px; align-items: center; gap: 12px; min-height: 70px; padding: 11px 15px; border-radius: 15px; text-decoration: none; color: #fff; text-align: left; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 8px 26px rgba(0,0,0,.18); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.auth-option:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.28); }
.auth-login { background: linear-gradient(135deg,#0b55f5,#1749d6); border-color: rgba(69,128,255,.72); }
.auth-register { background: linear-gradient(135deg,#09dfe2,#08a9dc); border-color: rgba(64,255,255,.55); }
.auth-option-icon { width: 43px; height: 43px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.13); }
.auth-option-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.auth-option-copy strong { font-size: 1rem; font-weight: 800; }
.auth-option-copy small { color: rgba(255,255,255,.78); font-size: .72rem; line-height: 1.3; }
.auth-option-arrow { font-size: 1.2rem; font-weight: 700; text-align: right; }
.auth-info { margin-top: 18px; display: grid; grid-template-columns: 42px 1fr; gap: 12px; text-align: left; padding: 15px; border-radius: 16px; background: rgba(10,23,59,.72); border: 1px solid rgba(82,118,205,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
.auth-info-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(30,64,255,.16); color: #6c91ff; }
.auth-info h2 { margin: 0 0 6px; font-size: .85rem; font-weight: 800; color: #f0f4ff; }
.auth-info p { margin: 0; color: #9caad0; font-size: .72rem; line-height: 1.55; }
.auth-tutorial { margin-top: 10px; display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: 9px; background: #0d76ff; color: #fff; text-decoration: none; font-size: .68rem; font-weight: 700; box-shadow: 0 6px 18px rgba(13,118,255,.25); }
.auth-security { margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 7px; color: #7181a7; font-size: .68rem; }
.auth-security svg { color: #5e709c; }
[dir="rtl"] .auth-option { text-align: right; }
[dir="rtl"] .auth-option-arrow { transform: rotate(180deg); text-align: left; }
@media (max-width: 480px) {
    .auth-topbar { top: 12px; left: 12px; right: 12px; }
    .auth-main { padding: 72px 11px 25px; }
    .auth-card { padding-left: 7px; padding-right: 7px; }
    .auth-option { grid-template-columns: 42px 1fr 20px; padding: 10px 11px; min-height: 67px; }
    .auth-option-icon { width: 39px; height: 39px; }
    .auth-option-copy strong { font-size: .92rem; }
    .auth-option-copy small { font-size: .66rem; }
    .auth-info { padding: 13px; }
}