/* ==========================================================================
   Vocalisons avec Stéphanie — Styles personnalisés
   (extraits du <style> inline du index.html)
   ========================================================================== */

   body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #FCFAF8;
    color: #5E524F;
}

.serif-title {
    font-family: 'Playfair Display', serif;
}

/* Style de la barre de défilement */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #FCFAF8;
}

::-webkit-scrollbar-thumb {
    background: #DECFC9;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #C8693A;
}

/* Lien de navigation actif (scroll-spy) */
.nav-link {
    position: relative;
}

.nav-link.nav-active {
    color: #C8693A;
}

/* Petit soulignement animé sous le lien actif, uniquement sur le menu desktop */
.hidden.md\:flex .nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 2px;
    background: #C8693A;
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}

.hidden.md\:flex .nav-link.nav-active::after {
    transform: scaleX(1);
}

/* ==========================================================================
   Mode sombre — inversion de palette globale
   Le site utilise énormément de couleurs custom (bg-brand-*, text-brand-*...),
   donc plutôt que de dupliquer une variante dark: sur des centaines de classes,
   on inverse les couleurs de toute la page. La photo est réinversée pour
   garder ses couleurs naturelles.
   ========================================================================== */
html {
    transition: filter 0.25s ease;
}

html.dark {
    filter: invert(1) hue-rotate(180deg);
    background-color: #2D2321;
}

html.dark img,
html.dark video {
    filter: invert(1) hue-rotate(180deg);
}