:root { 
    --main-gold: #c5a059; 
    --main-red: #FF5252; 
   /*  --dark-bg: rgb(10, 10, 10);  */
    --dark-bg: #13181D;
}

/* --- PROTECTION GLOBALE ANTI-SCROLLBAR HORIZONTALE (CONSERVE AOS) --- */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
    position: relative;
    width: 100%;
}

/* Harmonisation du padding des textes de la Home pour s'aligner sur le nouveau footer */
@media (max-width: 991.98px) {
    .section-padding .col-lg-6.d-flex {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

body { 
    background: var(--dark-bg); 
    color: white; 
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-size-adjust: inherit;
    font-variant: inherit;
    font-weight: 400;
}



h2 {
    font-family: Dosis, "Helvetica Neue", Helvetica, Helvetica, Arial, sans-serif;
    font-weight: 200;
    letter-spacing: 5px;
}

h5 {
    font-family: Dosis, "Helvetica Neue", Helvetica, Helvetica, Arial, sans-serif;
}

lead {
  font-family: Dosis, "Helvetica Neue", Helvetica, Helvetica, Arial, sans-serif;  
}

.font-dark {
    color: #13181D;
}
.font-light {
    color: white;
}
.font-accent {
    /* color: #c5a059; */
    color: #FF5252;
}

.btn-accent {
    background-color: #FF5252;
}

/* Style de base des boutons de filtre */
.filter-btn {
    background-color: transparent;
    color: #ffffff !important; /* Force le texte en blanc */
    border: none;
    margin: 5px;
    transition: all 0.3s ease;
}

/* Style au survol (hover) */
.filter-btn:hover {
    background-color: rgb(255, 82, 82, 0.8); /* Ton rouge très léger au survol */
    color: #ffffff !important;
    border: none;
}

/* Style du bouton ACTIF (quand on a cliqué) */
.filter-btn.active {
    background-color: #ff6262 !important; /* Ton rouge exact */
    border-color: #ff6262 !important;
    color: #ffffff !important; /* Texte blanc sur fond rouge */
    box-shadow: 0 4px 15px rgba(255, 98, 98, 0.4); /* Optionnel : petite lueur rouge */
}

.text-justify { text-align: justify; }

.line-decor {
    width: 60px;
    height: 4px;
    /* background: #000; */
    background: #ff6262;
    margin: 20px 0;
}

.section-padding { 
    padding: 3rem 0;
}

@media (max-width: 991.98px) {

    .section-padding { 
        padding: 1.5rem 0;
    }

}




/* ========================================================================== */
/* FILTRE BLEU SUR LES IMAGES */
/* ========================================================================== */

/* --- LE FILTRE BLEU MARINE BIA --- */
.color-filter {
    position: relative;
    display: block; /* Changé de inline-block à block */
    width: 100%;
    height: auto;
}

/* Le calque coloré */
.color-filter::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #13181D; 
    
    /* On récupère l'arrondi de l'image parente pour que le filtre ne dépasse pas dans les coins */
    border-radius: inherit; 
    
    /* Teste 'multiply' si 'screen' ne se voit pas assez sur fond sombre */
    mix-blend-mode: screen; 
    opacity: 0.9; 
    
    z-index: 2; /* Passe au dessus de l'image */
    pointer-events: none;
    transition: all 0.3s ease;
}

/* On applique l'héritage de l'arrondi au filtre */
.image-sticky-left.color-filter, 
.image-sticky-right.color-filter {
    border-radius: 10rem; /* Doit matcher tes arrondis custom */
}

/* Correction spécifique pour tes deux types d'arrondis */
.image-sticky-left.color-filter::after {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.image-sticky-right.color-filter::after {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.color-filter img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
}

/* Effet au survol */
.color-filter:hover::after {
    opacity: 0.3;
}


/* ========================================================================== */
/* ========================================================================== */
/* === HERO HOME === */
/* ========================================================================== */

/* --- La Section Hero (existante) --- */
.hero {
    position: relative; /* Indispensable pour le calque */
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Évite les débordements de la vidéo */
}

/* --- LE CALQUE DE DÉGRADÉ DOUBLE (Nouveau) --- */
.hero::after {
    content: ""; /* Obligatoire pour un pseudo-élément */
    position: absolute;
    inset: 0; /* Équivalent à top:0; left:0; width:100%; height:100%; */
    z-index: 1; /* Par-dessus la vidéo (-1), sous le texte (2) */
    
    /* Le dégradé linéaire double */
    background: linear-gradient(
        to bottom,
        rgba(19, 24, 29, 1) 0%,         /* Noir complet tout en haut */
        rgba(19, 24, 29, 0) 15%,        /* Devient transparent à 15% du haut */
        rgba(19, 24, 29, 0) 85%,        /* Reste transparent jusqu'à 85% du bas */
        rgba(19, 24, 29, 1) 100%        /* Redevient noir complet tout en bas */
    );
    
    pointer-events: none; /* Permet de cliquer "à travers" le calque si besoin */
}

/* --- Le contenu du Hero (Texte/Logo) (existant) --- */
.hero .container, 
.hero .text-center {
    position: relative; 
    z-index: 2; /* Doit être supérieur au z-index du calque (1) */
}

/* ========================================================================== */
/* ===   NAVBAR    ===================================================== */
/* ========================================================================== */

/* --- Navbar --- */
#mainNav { 
    transition: all 0.4s ease-in-out; 
    padding: 1.875rem 0; /* 30px */
    background: transparent; 
    border: none !important; 
    z-index: 2000;
}

#mainNav.scrolled { 
    /* background: #1a1a1a !important; */
    background: #13181D !important; 
    padding: 0.9375rem 0; /* 15px */
    box-shadow: 0 4px 20px rgba(0,0,0,0.3); 
}

/* --- Style du Logo Flottant --- */
.floating-logo {
    position: fixed;
    top: 1.875rem;    /* 30px */
    left: 3.75rem;    /* 60px */
    z-index: 2100;
    display: block;
    transition: all 0.4s ease-in-out;
}

.floating-logo img {
    height: 5.3125rem; /* 85px */
    width: auto;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
    transition: all 0.4s ease-in-out;
}

/* --- ÉTAT AU SCROLL --- */
body.scrolled .floating-logo {
    top: 0.9375rem; /* 15px */
}

body.scrolled .floating-logo img {
    height: 2.5rem; /* 40px */
}

/* --- ADAPTATION MOBILE --- */
@media (max-width: 991px) {
    .floating-logo {
        top: 1.5625rem; /* 25px */
        left: 2.8125rem; /* 45px (selon ton dernier code) */
    }

    .floating-logo img {
        height: 2.8125rem; /* 45px */
    }

    #mainNav {
        padding: 1.25rem 0; /* 20px */
    }

    body.scrolled .floating-logo {
        top: 0.75rem; /* 12px */
    }

    body.scrolled .floating-logo img {
        height: 1.5625rem; /* 25px */
    }
    
    #mainNav.scrolled {
        padding: 0.625rem 0; /* 10px */
    }
    
    #mainNav.scrolled .menu-icon {
        margin-top: 0.3125rem; /* 5px */
    }
}

.nav-link {
    color: rgba(255,255,255,0.8) !important;
    font-size: 1rem; /* 14px */
    font-family: Dosis, "Helvetica Neue", Helvetica, Helvetica, Arial, sans-serif;
    letter-spacing: 2px;
    margin-left: 1.25rem; /* 20px */
    transition: 0.3s;
    font-weight:400;
}

.nav-link:hover { color: #ff6262!important; }

/* Couleur du lien actif dans la navbar */
.navbar-nav .nav-link.active {
    color: #FF5252 !important; /* Ta couleur rouge/corail */
    position: relative;
}

/* Optionnel : Un petit trait de soulignement pour marquer encore plus l'état actif */
.navbar-nav .nav-link.active::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 20%;
    width: 60%;
    height: 2px;
    background-color: #FF5252;
}

/* --- Hamburger Mobile --- */
.menu-icon { 
    width: 1.875rem; /* 30px */
    height: 1.25rem; /* 20px */
    position: relative; 
    cursor: pointer; 
    z-index: 9999;
}

@media (max-width: 991px) {
    .menu-icon { margin-left: auto; }
}

/* On garde les px pour les épaisseurs de traits (plus net) */
.menu-icon span { 
    display: block; 
    height: 2px; 
    width: 100%; 
    background: #fff; 
    position: absolute; 
    transition: 0.3s; 
}
.menu-icon span:nth-child(2) { top: 9px; }
.menu-icon span:nth-child(3) { top: 18px; }

.menu-icon.open span:nth-child(1) { transform: rotate(45deg); top: 9px; }
.menu-icon.open span:nth-child(2) { opacity: 0; }
.menu-icon.open span:nth-child(3) { transform: rotate(-45deg); top: 9px; }


/* ========================================================================== */
/* ===   FULLSCREEN MENU    ===================================================== */
/* ========================================================================== */

/* Fullscreen Menu */
.overlay-nav { 
    height: 100%; 
    width: 0; 
    position: fixed; 
    z-index: 1500; 
    top: 0; 
    left: 0; 
    background-color: #000; 
    overflow-x: hidden; 
    transition: 0.5s; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

.overlay-content { text-align: center; width: 100%; }

.overlay-content a { 
    padding: 0.8rem; /* 15px */
    text-decoration: none; 
    font-size: 1.8rem; 
    color: #818181; 
    display: block; 
    transition: 0.3s; 
    font-family: Dosis, "Helvetica Neue", Helvetica, Helvetica, Arial, sans-serif;
    font-weight: 200;
    letter-spacing: 5px;
    text-transform: uppercase;
}

.overlay-content a:hover { 
    color: var(--main-red); 
    transform: scale(1.2); 
}


/* ========================================================================== */
/* ===   ABOUT : IMAGES ARRONDIES  =========================================== */
/* ========================================================================== */

/* --- Gestion de l'image collée --- */
.image-sticky-left {
    width: 100%;
    display: flex;
    justify-content: flex-start; /* Aligne l'image bien à gauche */
}
.image-sticky-right {
    width: 100%;
    display: flex;
    justify-content: flex-end; /* Aligne l'image bien à gauche */
}

/* --- CONFIGURATION DES BLOCS IMAGES --- */

.custom-rounded-right {
    /* Desktop : Bord gauche droit, arrondi à droite vers le texte */
    border-radius: 0 10rem 10rem 0 !important;
    width: 100%;
    height: 600px; /* On remplace max-height par height */
    object-fit: cover;
}

.custom-rounded-left {
    /* Desktop : Bord droit droit, arrondi à gauche vers le texte */
    border-radius: 10rem 0 0 10rem !important;
    width: 100%;
    height: 600px; /* On remplace max-height par height */
    object-fit: cover;
}

/* --- ADAPTATION MOBILE (Tablettes et Smartphones) --- */
@media (max-width: 991px) {
    .image-sticky-left, .image-sticky-right {
        /* On retire les marges négatives si elles existent pour décoller du bord */
        padding: 0 1rem; 
        margin-bottom: 2rem;
    }

    .custom-rounded-right, .custom-rounded-left {
        /* Mobile : On arrondit tous les coins pour l'esthétique */
        border-radius: 2rem !important; 
        height: 350px !important; /* Hauteur fixe pour que l'image soit visible */
    }
    
    .content-wrapper {
        text-align: center;
    }
}

/* --- OPTION ÉCRANS LARGES --- */
@media (min-width: 992px) {
    .custom-rounded-right, .custom-rounded-left {
        height: 60vh; /* Garde une proportion élégante sur grand écran */
    }
}

/* --- IMPORTANT : Assurez-vous que les slides prennent toute la place --- */
.bg-slideshow, .slide {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center;
}

.section-double-border {
    border-top: 0.2rem solid #ffffff !important;
    box-shadow: 
        0 -1.2rem 0 0 #FF5252,
        0 0.2rem 0 0 #ffffff,
        0 1.2rem 0 0 #FF5252 !important;
}

/* ========================================================================== */
/* ===   ABOUT : FEATURE IMAGE  ============================================== */
/* ========================================================================== */

/* Container de la photo en rond */
.feature-image-wrapper {
    width: 150px;           /* Taille du rond */
    height: 150px;
    margin: 0 auto;
    border-radius: 50%;     /* Rend le tout parfaitement rond */
    overflow: hidden;       /* Coupe ce qui dépasse */
    border: 3px solid white; /* Bordure pour faire ressortir sur le fond gris */
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    transition: transform 0.4s ease;
}

.feature-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* L'image remplit le rond sans se déformer */
    transition: transform 0.6s ease;
}

/* Effet au survol de la colonne */
.feature-card:hover .feature-image-wrapper {
    transform: translateY(-10px);
    border-color: var(--main-red);
}

.feature-card:hover .feature-image-wrapper img {
    transform: scale(1.1); /* Zoom léger de l'image à l'intérieur */
}

/* Ajustement de l'icône sous l'image */
.feature-icon {
    font-size: 1.5rem !important; /* On réduit un peu l'icône car il y a déjà la photo */
    margin-right: 1rem;
}

/* ========================================================================== */
/* ===   ABOUT : BG SLIDESHOW  ============================================== */
/* ========================================================================== */

/* Container du diaporama */
.bg-slideshow {
    position: absolute;
    inset: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.8; /* Très léger pour ne pas gêner la lecture */
    pointer-events: none;
}

/* Atténuation spécifique pour le grand diaporama de fond dans la section services de la page About */
.slideshow-attenuated {
    opacity: 0.2 !important;
}

/* Style commun aux slides */
.bg-slideshow .slide {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0; /* CHANGEMENT : Invisibles par défaut pour éviter les superpositions sauvages */
    animation: fadeSlideshow 12s infinite; 
    animation-fill-mode: both; /* INDISPENSABLE : Force les slides à respecter leurs états initiaux/finaux */
}

/* Le tout premier slide est configuré pour être visible tout de suite */
.bg-slideshow .slide:nth-child(1) { 
    animation-delay: 0s; 
    opacity: 1; /* S'affiche instantanément au chargement de la page */
}
.bg-slideshow .slide:nth-child(2) { animation-delay: 2s; }
.bg-slideshow .slide:nth-child(3) { animation-delay: 4s; }
.bg-slideshow .slide:nth-child(4) { animation-delay: 6s; }
.bg-slideshow .slide:nth-child(5) { animation-delay: 8s; }
.bg-slideshow .slide:nth-child(6) { animation-delay: 10s; }

/* L'animation de fondu enchaîné optimisée */
@keyframes fadeSlideshow {
    0% { opacity: 0; transform: scale(1); }
    /* Si c'est le slide 1, l'opacité passe très vite à 1, pour les autres le fondu s'amorce proprement */
    5% { opacity: 1; } 
    25% { opacity: 1; }
    35% { opacity: 0; transform: scale(1.05); } /* Légère réduction du zoom max pour stabiliser les performances mobiles */
    100% { opacity: 0; }
}

/* ========================================================================== */
/* ===   HOME : SWIPER CATALOGUE ARTISTES ( MOBILE & DESKTOP)   ====== */
/* ========================================================================== */

/* --- RÈGLES GLOBALES ET DESKTOP (Écrans larges) --- */
@media (min-width: 992px) {
    /* Empêche le slider de déborder sur le texte à gauche uniquement sur grand écran */
    .col-xl-8.col-lg-7 {
        position: relative;
        overflow: hidden; 
    }
    
    /* Permet au carrousel de déborder joliment sur la droite */
    .swiper-artistes-teaser {
        width: 100%;
        overflow: visible !important; 
    }
}

/* --- RÈGLES ADAPTÉES POUR MOBILE (Écrans inférieurs à 992px) --- */
@media (max-width: 991.98px) {
    /* On réinitialise la colonne pour qu'elle respecte les paddings de Bootstrap */
    .col-xl-8.col-lg-7 {
        overflow: visible; 
    }

    /* Sur mobile, on force Swiper à SE COUPER proprement aux bords de sa colonne
       Cela supprime la scrollbar horizontale et redonne les marges (padding) à ta section */
    .swiper-artistes-teaser {
        width: 100%;
        overflow: hidden !important; 
    }
}

/* --- RÈGLES COMMUNES (Structure & Design) --- */
.swiper-artistes-teaser .swiper-wrapper {
    display: flex !important;
    align-items: stretch !important;
}

/* Taille fixe et ratio vertical pour le conteneur d'image */
.teaser-img-container {
    width: 100%;
    height: 340px; 
    background-color: #1a2229; 
}

/* Force l'image à remplir l'espace défini sans se déformer */
.teaser-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}

/* Animation de zoom au survol d'une vignette artiste */
.transition-zoom {
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.card-teaser-link:hover .transition-zoom {
    transform: scale(1.06);
}

/* Raccords de couleurs avec ton thème rouge #FF5252 */
.swiper-artistes-teaser .font-accent {
    color: #FF5252 !important;
}


/* ========================================================================== */
/* ===   AGENCY : PHOTOS GRID  ============================================== */
/* ========================================================================== */
/* Permet à Isotope de calculer l'espace par rapport au système de colonnes Bootstrap */
/* 1. On donne de l'air à la grille en haut et en bas */
.grid {
    margin-top: 20px;
    margin-bottom: 20px;
}

/* 2. C'est ici qu'on crée l'espace ! 
   On applique un padding sur le container Isotope pour simuler le gutter */
.grid-item {
    padding: 12px; /* Ajuste cette valeur pour augmenter/diminuer l'espace (ex: 8px, 15px) */
    box-sizing: border-box;
}

/* 3. On s'assure que les cartes d'artistes s'adaptent parfaitement */
.artist-card-modern {
    width: 100%;
    height: 100%;
    margin-bottom: 0 !important; /* On supprime le mb-4 du HTML qui peut fausser Masonry */
}

/* Le conteneur principal de l'artiste */
.artist-card-modern {
    position: relative;
    overflow: hidden; /* Important pour que le zoom de l'image ne dépasse pas */
    border-radius: 20px; /* On garde les bords arrondis de ta capture */
    transition: all 0.3s ease-in-out;
}

/* On applique ton effet Grayscale et Zoom ici */
.artist-card-modern img {
    width: 100%;
    height: auto; /* Indispensable pour le Masonry */
    display: block;
    transition: 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    filter: grayscale(1); /* Ton effet N&B */
}

/* Survol de la carte */
.artist-card-modern:hover img {
    transform: scale(1.1) rotate(1deg); /* Ton effet de mouvement */
    filter: grayscale(0); /* Retour à la couleur */
}

/* Le label (Nom + Tags) */
.artist-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8)); /* Dégradé pour la lisibilité */
    opacity: 0.8;
    transform: translateY(10px); /* Petit mouvement de bas en haut */
    transition: 0.4s ease;
    pointer-events: none; /* Le clic traverse le texte vers la carte */
    z-index: 2;
}

/* Affichage du label au survol */

.artist-card-modern:hover .artist-label {
    opacity: 1;
    transform: translateY(0) translateX(10px); /* On mixe avec ton décalage X */
}


/* Style de la police Syncopate sur le titre */
.artist-label h3 {
    font-family: Dosis, "Helvetica Neue", Helvetica, Helvetica, Arial, sans-serif;
    font-weight: 400;
    letter-spacing: 5px;
    font-size: 2rem;
    margin-bottom: 5px;
}

/* Animation de transition Isotope */
.grid {
    transition-property: height, width;
}

.grid .grid-item {
    transition-property: transform, opacity;
}

/* Optionnel : Style pour le bouton actif */
.filter-btn.active {
    background-color: #ff0000; /* Ton rouge Bia Production */
    color: white;
    border-color: #ff0000;
}

/* ===   FICHE ARTISTE   === =========================================== */

/* Conteneur principal de la fiche */
.artist-detail-page {
    position: relative;
    min-height: 100vh;
    width: 100%;
    background-color: #000;
}

/* Le bloc de fond séparé */
.artist-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Il reste tout en bas */
    pointer-events: none;
}

/* L'image en N&B */
.artist-background::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;
    filter: grayscale(100%);
    opacity: 0.2;
    z-index: 1;
}

/* Le dégradé bleu */
.artist-background::after {
    content: "";
    position: absolute;
    inset: 0;
    /* On utilise un dégradé un peu plus sombre en haut pour le contraste */
    background: linear-gradient(to bottom, rgba(0, 31, 63, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
    z-index: 2;
}

/* LE CONTENU : On le force à passer devant */
.artist-content {
    position: relative;
    z-index: 10 !important; /* On s'assure qu'il est au-dessus du fond */
}

/* On s'assure que le texte reste bien lisible */
.artist-detail-page h2 {
    font-family: 'Dosis', sans-serif;
    font-size: 2.5rem;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}

.artisteSocialIcon {
    width: 2rem;
    margin-right: 1rem;
}
.artisteSocialIcon:hover {
    filter: grayscale(100%);
    transition: 0.4s ease;
}

/* ===   GALERIE / FANCYBOX   === =========================================== */
/* On force Fancybox à passer par-dessus la Navbar Bootstrap (généralement 1030-1050) */
.fancybox__container {
    z-index: 2000 !important;
}

.fancybox__toolbar {
    padding: 10px !important;
}

/* On peut aussi assombrir un peu plus l'arrière-plan de la lightbox 
   pour que le site "disparaisse" vraiment derrière l'image */
.fancybox__backdrop {
    background: rgba(0, 0, 0, 0.9) !important;
}

/* Donne de l'espace interne à chaque bloc de la galerie sans modifier sa largeur externe calculée par Isotope */
.gallery-item-wrapper {
    padding: 12px; /* Ajustez cette valeur pour augmenter ou réduire l'espace */
    box-sizing: border-box;
}

.gallery-item {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 15px;
    cursor: zoom-in;
}

.gallery-item img {
    transition: transform 0.5s ease;
    width: 100%;
    height: 200px; /* Taille uniforme pour les miniatures */
    object-fit: cover;
        border: 1px solid rgba(255, 255, 255, 0.1); /* Petit filet pour détacher l'image du fond sombre */
    background-color: #000;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

.grid-gallery {
    margin-top: 2rem; /* Espace équilibré entre bio et photos */
}

/* Style spécifique pour les miniatures vidéo */
.video-item::after {
    content: "▶";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 98, 98, 0.9); /* Ton rouge #ff6262 */
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: 0.3s;
}

.video-item:hover::after {
    transform: translate(-50%, -50%) scale(1.2);
    background: #ff6262;
}


/* ========================================================================== */
/* ===   STUDIO   === =========================================== */
/* ========================================================================== */
/* --- Studio Specific Styles --- */
.studio-card {
    transition: transform 0.4s ease;
}

.studio-card:hover {
    transform: translateY(-10px);
}

.studio-card h4 {
    color: var(--main-gold);
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

/* S'assure que les images dans la grille respectent le filtre bleu marine défini précédemment */
.studio-card .color-filter {
    position: relative;
    overflow: hidden;
    display: block;
}

/* Réutilisation de ton filtre existant mais adapté à cette section */
.studio-card .color-filter::after {
    mix-blend-mode: multiply;
    opacity: 0.5; /* Plus léger ici pour bien voir le matériel du studio */
}

/* Style pour la vidéo Facebook intégrée */
.video-container {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #000;
}

/* Custom button primary (Rouge/Corail comme ta navbar active) */
.btn-primary {
    background-color: #FF5252 !important;
    border: none;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #e04444 !important;
    transform: scale(1.05);
}

/* ========================================================================== */
/* ===   CONTACT : HERO + FORM  = =========================================== */
/* ========================================================================== */
/* --- Background plein écran --- */
.contact-hero {
    position: relative;
    background-image: url('../img/technique/technique-light-2.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Effet parallaxe sympa */
    min-height: 100vh;
    width: 100%;
}

/* --- Le Filtre Bleu Marine BIA --- */
.contact-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #13181D; 
    opacity: 0.85; /* Ajuste ici : plus c'est haut, plus c'est sombre/bleu */
    z-index: 1;
}

.contact-hero::after {
    content: ""; /* Obligatoire pour un pseudo-élément */
    position: absolute;
    inset: 0; /* Équivalent à top:0; left:0; width:100%; height:100%; */
    z-index: 1; /* Par-dessus la vidéo (-1), sous le texte (2) */
    
    /* Le dégradé linéaire double */
    background: linear-gradient(
        to bottom,
        rgba(19, 24, 29, 1) 0%,         /* Noir complet tout en haut */
        rgba(19, 24, 29, 0) 15%,        /* Devient transparent à 15% du haut */
        rgba(19, 24, 29, 0) 85%,        /* Reste transparent jusqu'à 85% du bas */
        rgba(19, 24, 29, 1) 100%        /* Redevient noir complet tout en bas */
    );
    
    pointer-events: none; /* Permet de cliquer "à travers" le calque si besoin */
}

/* On remet le contenu au-dessus du filtre */
.contact-hero .container {
    position: relative;
    z-index: 2;
}

/* --- Style de la carte formulaire --- */
.contact-card {
    background: rgba(255, 255, 255, 0.03); /* Très léger voile blanc */
    backdrop-filter: blur(10px); /* Effet de flou de verre moderne */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
}

/* --- Style des inputs custom --- */
.custom-input {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    padding: 12px 15px;
}

.custom-input:focus {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: #FF5252 !important; /* Rappel de ta couleur active */
    box-shadow: none;
}

.custom-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* Bouton Gold/Rouge selon ton choix */
.btn-gold {
    background-color: #FF5252; 
    color: white;
    border: none;
    border-radius: 1rem;
    transition: 0.3s;
}

.btn-gold:hover {
    background-color: #e04444;
    transform: translateY(-2px);
}


/* ========================================================================== */
/* ===   FOOTER STYLES   ==================================================== */
/* ========================================================================== */
footer {
    position: relative !important;
    z-index: 10 !important; /* Supérieur au fond de la fiche artiste */
    background-color: var(--dark-bg) !important; /* Assure que le fond du footer est opaque */
}


/* Liens de navigation du footer */
.footer-links a {
    transition: all 0.3s ease-in-out;
    display: inline-block;
    position: relative;
}

.footer-links a:hover {
    color: #FF5252 !important; /* Devient rouge au survol */
    transform: translateX(5px); /* Décale légèrement vers la droite */
    opacity: 1 !important;
}

/* Liens de contact direct (Téléphone) */
.footer-contact-link {
    transition: color 0.3s ease;
}

.footer-contact-link:hover {
    color: #FF5252 !important;
    opacity: 1 !important;
}

/* Icône de réseaux sociaux */
.facebook-hover {
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block;
}

.facebook-hover:hover {
    color: #FF5252 !important;
    transform: scale(1.15);
}

/* Espacement global des listes de contact */
footer i.font-accent {
    color: #FF5252 !important;
}