/* ====================================================================== */
/* THÈMES AVANCÉS - Dark mode, Print, High contrast                      */
/* ====================================================================== */

/* Mode sombre */
@media (prefers-color-scheme: dark) {
    :root {
        --text-primary: #F2F2F7;
        --text-secondary: #8E8E93;
        --text-tertiary: #636366;
        --text-white: #F2F2F7;
        --bg-primary: #000000;
        --bg-secondary: #1C1C1E;
        --surface: rgba(28, 28, 30, 0.8);
        --surface-elevated: rgba(44, 44, 46, 0.95);
        --surface-card: rgba(58, 58, 60, 0.6);
        --border-color: rgba(255, 255, 255, 0.12);
        --border-strong: rgba(255, 255, 255, 0.2);
    }
    
    .floating-shape {
        background: linear-gradient(45deg, rgba(0, 122, 255, 0.3), rgba(88, 86, 214, 0.3)) !important;
        opacity: 0.15;
    }
    
    .login-required-hero {
        background: var(--bg-dark-gradient);
    }
}

/* Mode impression */
@media print {
    .login-required-page {
        background: white !important;
    }
    
    .floating-shape,
    .hero-particles,
    .benefit-shimmer,
    .btn-shine,
    .help-card-glow {
        display: none !important;
    }
    
    .login-required-hero {
        background: var(--primary-charcoal) !important;
        color: white !important;
    }
    
    .login-required-card,
    .help-section {
        box-shadow: none !important;
        border: 2px solid var(--border-strong) !important;
    }
}

/* Mode contraste élevé */
@media (prefers-contrast: high) {
    :root {
        --border-color: rgba(0, 0, 0, 0.3);
        --text-secondary: #333333;
        --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
    }
    
    .benefit-card,
    .help-card,
    .login-required-card {
        border-width: 2px;
    }
}

/* Améliorations d'accessibilité */
.btn:focus-visible,
.help-card:focus-visible,
.benefit-card:focus-visible {
    outline: 3px solid var(--accent-red);
    outline-offset: 4px;
    box-shadow: 0 0 0 6px rgba(229, 62, 62, 0.2);
}