/**
 * Styles communs pour les pages auth (register, forgot_password) - même structure que login, sans pre-loader
 */
.app-login-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; background: #F3F3F3; font-family: var(--font-body, 'Inter', system-ui, sans-serif); position: relative; overflow: hidden; }
.app-login-page::before { content: ''; position: fixed; inset: 0; z-index: 0; background: linear-gradient(135deg, #F3F3F3 0%, rgba(0, 85, 164, 0.03) 50%, rgba(239, 65, 53, 0.03) 100%); background-size: 200% 200%; animation: bg-soft 15s ease infinite; pointer-events: none; }
@keyframes bg-soft { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.app-magic-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.app-magic-float { position: absolute; font-size: 1.5rem; opacity: 0.5; animation: magic-float 8s ease-in-out infinite; filter: drop-shadow(0 0 8px rgba(0, 85, 164, 0.2)); }
.app-magic-float:nth-child(1) { top: 10%; left: 8%; animation-delay: 0s; animation-duration: 7s; }
.app-magic-float:nth-child(2) { top: 18%; right: 10%; animation-delay: 1s; animation-duration: 9s; }
.app-magic-float:nth-child(3) { bottom: 35%; left: 5%; animation-delay: 2s; animation-duration: 8s; }
.app-magic-float:nth-child(4) { bottom: 25%; right: 8%; animation-delay: 0.5s; animation-duration: 10s; }
.app-magic-float:nth-child(5) { top: 45%; left: 3%; animation-delay: 1.5s; animation-duration: 7.5s; }
.app-magic-float:nth-child(6) { top: 55%; right: 12%; animation-delay: 2.5s; animation-duration: 8.5s; }
.app-magic-float:nth-child(7) { bottom: 15%; left: 15%; animation-delay: 0.8s; animation-duration: 9.5s; }
.app-magic-float:nth-child(8) { top: 75%; right: 5%; animation-delay: 1.2s; animation-duration: 6.5s; }
.app-magic-float:nth-child(9) { top: 30%; left: 12%; animation-delay: 2s; animation-duration: 7s; }
.app-magic-float:nth-child(10) { bottom: 50%; right: 18%; animation-delay: 0.3s; animation-duration: 8s; }
.app-magic-float:nth-child(11) { top: 5%; right: 22%; animation-delay: 1.8s; animation-duration: 7.2s; }
.app-magic-float:nth-child(12) { bottom: 60%; left: 8%; animation-delay: 0.6s; animation-duration: 9.2s; }
.app-magic-float:nth-child(13) { top: 65%; left: 18%; animation-delay: 2.2s; animation-duration: 6.8s; }
.app-magic-float:nth-child(14) { bottom: 10%; right: 15%; animation-delay: 1.4s; animation-duration: 8.8s; }
.app-magic-float:nth-child(15) { top: 38%; right: 6%; animation-delay: 0.9s; animation-duration: 7.6s; }
@keyframes magic-float { 0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.5; } 25% { transform: translate(10px, -15px) rotate(5deg) scale(1.1); opacity: 0.7; } 50% { transform: translate(-5px, -8px) rotate(-3deg) scale(0.95); opacity: 0.6; } 75% { transform: translate(8px, 10px) rotate(4deg) scale(1.05); opacity: 0.65; } }
.app-sparkle { position: absolute; width: 6px; height: 6px; background: radial-gradient(circle, #fff 30%, rgba(255,215,0,0.8) 70%, transparent); border-radius: 50%; animation: sparkle 2s ease-in-out infinite; pointer-events: none; }
.app-sparkle.s1 { top: 20%; left: 20%; animation-delay: 0s; } .app-sparkle.s2 { top: 30%; right: 25%; animation-delay: 0.5s; } .app-sparkle.s3 { bottom: 40%; left: 30%; animation-delay: 1s; } .app-sparkle.s4 { bottom: 25%; right: 20%; animation-delay: 0.3s; } .app-sparkle.s5 { top: 60%; left: 15%; animation-delay: 0.7s; } .app-sparkle.s6 { top: 50%; right: 10%; animation-delay: 1.2s; }
.app-sparkle.s7 { top: 12%; left: 45%; animation-delay: 0.2s; } .app-sparkle.s8 { bottom: 55%; right: 35%; animation-delay: 1.5s; } .app-sparkle.s9 { bottom: 18%; left: 25%; animation-delay: 0.9s; } .app-sparkle.s10 { top: 72%; right: 28%; animation-delay: 1.8s; }
@keyframes sparkle { 0%, 100% { opacity: 0; transform: scale(0); } 50% { opacity: 1; transform: scale(1.2); } }
.app-login-card { width: 100%; max-width: 400px; background: #FFFFFF; border-radius: 16px; padding: 2.5rem; box-shadow: 0 8px 20px -4px rgba(0, 85, 164, 0.15), 0 4px 12px -2px rgba(0, 85, 164, 0.12); border: 1px solid #dce1e6; position: relative; z-index: 1; opacity: 0; animation: magic-card-in 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s forwards; }
.app-login-card.app-auth-card--wide { max-width: 520px; }
@keyframes magic-card-in { from { opacity: 0; transform: scale(0.85) translateY(30px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.app-login-logo { text-align: center; margin-bottom: 1.5rem; display: flex; justify-content: center; align-items: center; opacity: 0; animation: magic-fade-up 0.6s ease 0.35s forwards; }
.app-login-logo img { height: 52px; width: auto; display: block; margin: 0 auto; transition: transform 0.4s ease; }
.app-login-logo:hover img { transform: scale(1.08) rotate(-2deg); }
.app-login-title { color: #0055A4; font-size: 1.5rem; font-weight: 700; font-family: var(--font-heading, 'Poppins', system-ui, sans-serif); text-align: center; margin-bottom: 0.25rem; opacity: 0; animation: magic-title-in 0.6s ease 0.5s forwards, magic-title-glow 3s ease-in-out 1.2s infinite; }
@keyframes magic-title-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes magic-title-glow { 0%, 100% { text-shadow: 0 0 20px rgba(0, 85, 164, 0.2); } 50% { text-shadow: 0 0 28px rgba(0, 85, 164, 0.35), 0 0 12px rgba(239, 65, 53, 0.15); } }
.app-login-subtitle { color: #5a6c7d; font-size: 0.875rem; text-align: center; margin-bottom: 1.75rem; opacity: 0; animation: magic-fade-up 0.5s ease 0.65s forwards; }
.app-login .form-group { margin-bottom: 1.25rem; opacity: 0; animation: magic-fade-up 0.5s ease forwards; }
.app-login .form-group:nth-of-type(1) { animation-delay: 0.8s; } .app-login .form-group:nth-of-type(2) { animation-delay: 0.95s; }
.app-login-actions { opacity: 0; animation: magic-fade-up 0.5s ease 1.1s forwards; }
.app-login-btn { opacity: 0; animation: magic-fade-up 0.5s ease 1.25s forwards; }
.app-login-divider { margin: 1.5rem 0; border: none; border-top: 1px solid #dce1e6; opacity: 0; animation: magic-fade-up 0.4s ease 1.35s forwards; }
.app-login-footer { opacity: 0; animation: magic-fade-up 0.5s ease 1.45s forwards; }
@keyframes magic-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.app-login label { display: block; color: #0055A4; font-size: 0.8125rem; font-weight: 600; margin-bottom: 0.5rem; }
.app-login input, .app-login select { width: 100%; padding: 0.75rem 1rem; background: #FFFFFF; border: 1px solid #dce1e6; border-radius: 8px; color: #1e293b; font-size: 0.9375rem; transition: border-color 0.25s, box-shadow 0.25s; }
.app-login input::placeholder { color: #8794a1; }
.app-login input:focus, .app-login select:focus { outline: none; border-color: #0055A4; box-shadow: 0 0 0 3px rgba(0, 85, 164, 0.25); }
.app-login-actions { display: flex; justify-content: flex-end; margin-top: -0.5rem; margin-bottom: 1rem; }
.app-login-actions a { color: #0055A4; font-size: 0.8125rem; text-decoration: none; font-weight: 600; position: relative; }
.app-login-actions a:hover { color: #EF4135; }
.app-login-actions a::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: #EF4135; transition: width 0.3s ease; }
.app-login-actions a:hover::after { width: 100%; }
.app-login-btn { width: 100%; padding: 0.75rem 1rem; background: linear-gradient(135deg, #0055A4 0%, #1a6bc4 100%); color: #fff; border: none; border-radius: 8px; font-size: 0.9375rem; font-weight: 600; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 85, 164, 0.3); transition: box-shadow 0.3s, transform 0.3s; }
.app-login-btn:hover { box-shadow: 0 8px 28px rgba(0, 85, 164, 0.45), 0 0 20px rgba(239, 65, 53, 0.2); transform: translateY(-2px) scale(1.01); }
.app-login-footer { text-align: center; }
.app-login-footer p { color: #5a6c7d; font-size: 0.875rem; margin: 0; }
.app-login-footer a { color: #0055A4; font-weight: 600; text-decoration: none; position: relative; }
.app-login-footer a::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 0; height: 2px; background: #EF4135; transition: width 0.3s ease; }
.app-login-footer a:hover { color: #EF4135; }
.app-login-footer a:hover::after { width: 100%; }
.app-login-alert { padding: 0.75rem 1rem; border-radius: 8px; font-size: 0.875rem; margin-bottom: 1rem; opacity: 0; animation: magic-fade-up 0.4s ease 0.4s forwards; }
.app-login-alert.alert-error { background: rgba(239, 65, 53, 0.1); border: 1px solid rgba(239, 65, 53, 0.35); color: #d32f2f; }
.app-login-alert.alert-success { background: rgba(40, 167, 69, 0.1); border: 1px solid rgba(40, 167, 69, 0.35); color: #1e7e34; }
.app-copyright { margin-top: 2rem; color: #5a6c7d; font-size: 0.75rem; text-align: center; opacity: 0; animation: magic-fade-up 0.5s ease 1.6s forwards; }
.app-auth-content { opacity: 0; animation: magic-fade-up 0.5s ease 0.8s forwards; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.text-danger { color: #EF4135; }

/* Page inscription : plus claire et structurée */
.app-login-card:has(.app-register-form) .app-login-subtitle {
    margin-bottom: 1rem;
    line-height: 1.45;
}
.app-register-form > .app-register-section-label:first-of-type {
    margin-top: 0;
}
.app-register-section-label {
    margin: 1.1rem 0 0.45rem;
    font-family: var(--font-heading, 'Poppins', system-ui, sans-serif);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #0055A4;
}
.app-register-lead + .app-register-section-label {
    margin-top: 0.35rem;
}
.app-register-form .app-login-btn.app-register-submit {
    margin-top: 0.35rem;
    letter-spacing: 0.02em;
}

@media (max-width: 1024px) {
    .app-magic-float { font-size: 1.35rem; opacity: 0.5; }
    .app-magic-float:nth-child(n+11) { display: none; }
    .app-sparkle.s7, .app-sparkle.s8, .app-sparkle.s9, .app-sparkle.s10 { display: none; }
    .app-login-page::before { animation-duration: 20s; }
}
@media (max-width: 768px) {
    .app-login-page { padding: 2rem 1.25rem; }
    .app-magic-float { font-size: 1.3rem; opacity: 0.55; animation-duration: 8s; }
    .app-magic-float:nth-child(n+9) { display: none; }
    .app-sparkle { width: 7px; height: 7px; animation-duration: 2s; }
    .app-sparkle.s5, .app-sparkle.s6 { display: none; }
    .app-login-card { padding: 2rem 1.5rem; }
    .app-login-title { font-size: 1.35rem; }
}
@keyframes magic-card-in-mobile { from { opacity: 0; transform: scale(0.88) translateY(35px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@media (max-width: 480px) {
    .app-login-page { padding: 1.75rem 1rem; }
    .app-login-page::before { animation-duration: 12s; }
    .app-magic-float { font-size: 1.15rem; opacity: 0.65; animation-duration: 6s; bottom: auto; right: auto; left: auto; }
    .app-magic-float:nth-child(n+9) { display: block; }
    .app-magic-float:nth-child(1) { top: 4%; left: 8%; }
    .app-magic-float:nth-child(2) { top: 8%; right: 10%; left: auto; }
    .app-magic-float:nth-child(3) { top: 12%; left: 15%; }
    .app-magic-float:nth-child(4) { top: 16%; right: 8%; left: auto; }
    .app-magic-float:nth-child(5) { top: 20%; left: 5%; }
    .app-magic-float:nth-child(6) { top: 24%; right: 15%; left: auto; }
    .app-magic-float:nth-child(7) { top: 28%; left: 25%; }
    .app-magic-float:nth-child(8) { top: 32%; right: 5%; left: auto; }
    .app-magic-float:nth-child(9) { top: auto; bottom: 30%; left: 6%; }
    .app-magic-float:nth-child(10) { top: auto; bottom: 25%; right: 10%; left: auto; }
    .app-magic-float:nth-child(11) { top: auto; bottom: 20%; left: 12%; }
    .app-magic-float:nth-child(12) { top: auto; bottom: 15%; right: 6%; left: auto; }
    .app-magic-float:nth-child(13) { top: auto; bottom: 10%; left: 20%; }
    .app-magic-float:nth-child(14) { top: auto; bottom: 5%; right: 18%; left: auto; }
    .app-magic-float:nth-child(15) { top: auto; bottom: 2%; left: 42%; right: auto; }
    .app-sparkle { width: 8px; height: 8px; animation-duration: 1.6s; }
    .app-sparkle.s1 { top: 5%; left: 20%; right: auto; bottom: auto; }
    .app-sparkle.s2 { top: 10%; right: 25%; left: auto; bottom: auto; }
    .app-sparkle.s5 { top: 18%; left: 10%; right: auto; bottom: auto; }
    .app-sparkle.s6 { top: 26%; right: 12%; left: auto; bottom: auto; }
    .app-sparkle.s7 { top: 14%; left: 45%; right: auto; bottom: auto; }
    .app-sparkle.s3 { top: auto; bottom: 28%; left: 25%; right: auto; }
    .app-sparkle.s4 { top: auto; bottom: 22%; right: 22%; left: auto; }
    .app-sparkle.s8 { top: auto; bottom: 16%; right: 35%; left: auto; }
    .app-sparkle.s9 { top: auto; bottom: 10%; left: 18%; right: auto; }
    .app-sparkle.s10 { top: auto; bottom: 4%; right: 28%; left: auto; }
    .app-login-card { padding: 1.75rem 1.25rem; border-radius: 14px; animation: magic-card-in-mobile 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s forwards; }
    .app-login-card.app-auth-card--wide { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .app-login-page::before, .app-magic-float, .app-sparkle { animation: none; }
    .app-login-card, .app-login-logo, .app-login-title, .app-login-subtitle, .app-login .form-group, .app-login-actions, .app-login-btn, .app-login-divider, .app-login-footer, .app-login-alert, .app-copyright, .app-auth-content { animation: none; opacity: 1; }
    .app-login-title { text-shadow: none; }
    .app-magic-float { opacity: 0.4; }
}