/* ============================================
   A PROPOS PAGE STYLES - Dark Mode Support
   ============================================ */

/* About Section - Complément au style inline existant */
.about-container {
    padding-top: calc(100px + 80px);
}

/* Navigation spécifique pour la page à propos - Uses CSS variables */
.header {
    background: rgba(var(--bg-rgb, 250, 250, 250), 0.95);
    backdrop-filter: blur(10px);
}

/* Dark mode header support */
[data-theme="dark"] .header {
    background: rgba(9, 9, 11, 0.95);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .header {
        background: rgba(9, 9, 11, 0.95);
    }
}

/* Améliorations du carrousel */
.carousel-container {
    box-shadow: 0 25px 80px var(--shadow-color);
}

/* Contact strip border - Uses CSS variable for dark mode */
.contact-strip {
    border-top: 1px solid var(--border-color);
}

/* Carousel navigation buttons - Dark mode support */
.carousel-nav {
    background: var(--card-bg);
}

.carousel-nav:hover {
    background: var(--bg-color);
}

/* Carousel indicators - Dark mode adjustments */
[data-theme="dark"] .carousel-indicator.active {
    background: var(--text-main);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .carousel-indicator.active {
        background: var(--text-main);
    }
}

/* Responsive pour la page à propos */
@media (max-width: 968px) {
    .about-container {
        padding-top: calc(60px + 70px);
    }
}

@media (max-width: 640px) {
    .about-container {
        padding-top: calc(40px + 60px);
    }
}