.mon-menu-sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: transparent;
    box-shadow: none;
    /* Rendu visible seulement après 90% */
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Transitions synchronisées à 0.6s sur le menu et l'overlay ainsi que leurs enfants */
.mon-menu-sticky,
.mon-menu-sticky *,
.header-overlay-content,
.header-overlay-content * {
    transition: opacity 0.6s ease-in-out, filter 0.6s ease-in-out, visibility 0.6s ease-in-out, background-color 0.6s ease-in-out, box-shadow 0.6s ease-in-out !important;
}

/* La classe ajoutée lorsque la vidéo se termine ou au scroll */
.mon-menu-sticky.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    background-color: hsla(206, 91%, 5%, 0) !important;
}

/* Fond opaque quand on scrolle à plus de 70% de la section */
.mon-menu-sticky.is-visible.has-solid-bg {
    background-color: hsla(206, 91%, 5%, 1) !important;
    /* Opacité à 100% */
}

/* Ombre (boxblur) quand on scrolle à plus de 90% de la section */
.mon-menu-sticky.is-visible.has-box-blur {
    box-shadow: 0 4px 5px #010d16;
}

/* Assure que la row du menu (logo, billetterie, icône) reste 100% visible */
.mon-menu-sticky.is-visible .et_pb_row_0_tb_header,
.mon-menu-sticky.is-visible .et_pb_row,
.mon-menu-sticky.is-visible .et_pb_column {
    filter: opacity(100%) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* La colonne 2 est le conteneur du texte : elle prend 100% de la hauteur sans toucher à la colonne 1 (image) */
.header-overlay-content .et_pb_column_1,
.header-overlay-content .et_pb_column:last-child {
    height: 100% !important;
    min-height: 100% !important;
    position: relative !important;
}

/* Positionnement du texte centré dans la colonne 2 à 20% du bas de la section */
.header-overlay-content .hero-texte {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 20% !important;
    width: 100% !important;
    max-width: 90% !important;
    text-align: center !important;
    margin: 0 !important;
    z-index: 20 !important;
}

/* ==========================================================================
   BOUTON BILLETS - DIVI MACHINE (dm-acf-item-planketon)
   Neutralisation des styles natifs Divi et animation de survol
   ========================================================================== */

/* ==========================================================================
   BLOC 1 : DIVI MACHINE - BOUTON BILLETS (.dm-acf-item-planketon)
   ========================================================================== */

/* 1. Structure, Padding & Animation au repos */
html body .dm-acf-item-planketon a.et_pb_button {
    display: inline-block !important;
    flex: 0 0 auto !important;
    max-width: fit-content !important;

    /* Verrouillage strict du padding normal */
    padding: 6px 20px !important;
    letter-spacing: inherit !important;
    border: none !important;

    /* Animation Scale */
    transform: scale(1) !important;
    transform-origin: center center !important;
    transition: transform 0.25s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out !important;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
}

/* 2. État au survol (:hover) */
html body .dm-acf-item-planketon a.et_pb_button:hover {
    /* Verrouille le même padding pour empêcher le saut de texte */
    padding: 6px 20px !important;
    transform: scale(1.04) !important;
}

/* 3. Masquer les icônes natives Divi */
html body .dm-acf-item-planketon a.et_pb_button::before,
html body .dm-acf-item-planketon a.et_pb_button::after,
html body .dm-acf-item-planketon a.et_pb_button:hover::before,
html body .dm-acf-item-planketon a.et_pb_button:hover::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    width: 0 !important;
    margin: 0 !important;
}


/* Cibler le dernier élément du menu sur desktop */
@media (min-width: 981px) {

    /* On utilise flex sur le LI pour pouvoir centrer verticalement le bouton sans qu'il ne s'étire */
    .menu-cta ul.nav>li:last-child {
        display: flex;
        align-items: center;
    }

    .menu-cta ul.nav>li:last-child>a {
        border: 2px solid #EBD897;
        /* Couleur dorée assortie à votre titre, ou #ffffff */
        border-radius: 25px;
        /* Ajustez le rayon (ex: 4px, 8px ou 25px pour un effet pilule) */
        padding: 8px 20px !important;
        /* Espace interne pour créer le bouton */
        transition: all 0.3s ease;
        display: inline-block;
        line-height: 1 !important;
        /* Force la hauteur du texte */
        height: auto !important;
        /* Empêche Divi d'étirer la balise <a> */
        min-height: 0 !important;
    }

    /* Effet au survol (Hover) */
    .menu-cta ul.nav>li:last-child>a:hover {
        background-color: #EBD897;
        /* Fond plein au survol */
        color: #0b1118 !important;
        /* Couleur du texte contrastée */
        opacity: 1;
    }
}

/* Supprime le décalage/padding supérieur par défaut si Divi en ajoute un */
#page-container,
#main-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}


.dnxte-next-video__header {
    display: none !important;
}


/* Assure le positionnement superposé parfait de la Row par-dessus la vidéo */
.header-overlay-content {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background-size: cover !important;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    box-sizing: border-box;
    pointer-events: none;
}

/* Force les sous-éléments et arrière-plans Divi (row bg, colonnes, modules) à occuper 100% en cover */
.header-overlay-content,
.header-overlay-content *,
.header-overlay-content .et_pb_row_bg,
.header-overlay-content .et_pb_section_bg,
.header-overlay-content .et_pb_column {
    background-size: cover !important;
    background-position: center center !important;
}

/* Si l'image est insérée via un module Image Divi (balise <img>) */
.header-overlay-content img,
.header-overlay-content .et_pb_image_wrap,
.header-overlay-content .et_pb_image_wrap img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/* Classe ajoutée par JS lorsque la vidéo se termine */
.header-overlay-content.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    filter: opacity(100%) !important;
}

@media (max-width: 980px) {
    .header-overlay-content .hero-texte {
        bottom: 10% !important;
    }


    /* Décolle le menu déroulant du logo / barre d'en-tête et le force à 100% de la largeur de l'écran */
    .et_pb_menu .et_mobile_menu {
        top: calc(100% + 20px) !important;
        /* Ajustez 20px selon l'espace voulu */
        width: 100vw !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        max-width: 100vw !important;
    }

    /* Centre le texte du menu en mobile */
    .et_pb_menu .et_mobile_menu li a {
        text-align: center !important;
    }
}

/* ==========================================================================
   Preloader Élégant (Solution Thème Enfant)
   ========================================================================== */

/* Écran plein écran du preloader */
.site-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: radial-gradient(circle at center, #051929 0%, #010d16 100%);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    overflow: hidden;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* État chargé : disparition en fondu doux */
.site-preloader.is-loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.preloader-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-preloader.is-loaded .preloader-inner {
    transform: scale(0.92);
}

/* Conteneur du Spinner */
.preloader-spinner {
    position: relative;
    width: 64px;
    height: 64px;
}

/* Anneau extérieur doré - rotation fluide */
.spinner-ring-outer {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: #EBD897;
    border-right-color: rgba(235, 216, 151, 0.45);
    animation: preloader-spin 1.4s cubic-bezier(0.6, 0.05, 0.25, 1) infinite;
    filter: drop-shadow(0 0 8px rgba(235, 216, 151, 0.35));
}

/* Anneau intérieur - contre-rotation fine */
.spinner-ring-inner {
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-bottom-color: #EBD897;
    border-left-color: rgba(235, 216, 151, 0.35);
    animation: preloader-spin-reverse 1.1s cubic-bezier(0.6, 0.05, 0.25, 1) infinite;
}

/* Cœur lumineux pulsant */
.spinner-core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background-color: #EBD897;
    box-shadow: 0 0 14px 2px rgba(235, 216, 151, 0.85);
    animation: preloader-pulse 1.8s ease-in-out infinite;
}

@keyframes preloader-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes preloader-spin-reverse {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}

@keyframes preloader-pulse {

    0%,
    100% {
        transform: scale(0.8);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.25);
        opacity: 1;
        box-shadow: 0 0 20px 4px rgba(235, 216, 151, 0.95);
    }
}

/* Accessibilité : réduction de mouvement */
@media (prefers-reduced-motion: reduce) {

    .spinner-ring-outer,
    .spinner-ring-inner {
        animation: none !important;
        border-color: #EBD897 !important;
    }

    .spinner-core {
        animation: none !important;
    }
}

/* Sécurité : désactivation totale dans le Visual Builder Divi */
.et-fb .site-preloader,
.et_fb_preview_active .site-preloader,
.et-fb-root-ancestor .site-preloader {
    display: none !important;
}

/* ==========================================================================
   CORRECTION DE L'ESPACEMENT (EQUAL HEIGHT) DANS LES COLONNES
   ========================================================================== */
/* Forcer les colonnes à centrer leur contenu sans ajouter d'espaces géants entre les modules */
.loop-spectacle-dm .et_pb_column {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* Enlever les marges automatiques que Divi Machine pourrait ajouter */
.loop-spectacle-dm .et_pb_column .et_pb_module {
    margin-top: 0 !important;
    margin-bottom: 0px !important;
}

/* Le bouton a peut-être besoin d'être recentré ou de ne pas avoir de marge du tout */
.loop-spectacle-dm .et_pb_column .et_pb_module:last-child {
    margin-bottom: 0 !important;
}


.btn-planketon-dm-icon .dmach-icon-image-content {
    display: none !important;
}



/* ==========================================================================
   DIVI 5 - BOUTON RETOUR EN HAUT (BACK TO TOP)
   ========================================================================== */

/* Bouton au repos */
.et_pb_scroll_top.et-pb-icon {
    background-color: #010d16 !important;
    /* Couleur de fond du carré (bleu nuit du site) */
    color: #EBD897 !important;
    /* Couleur de la flèche (doré du site) */
    border: 1px solid #EBD897 !important;
    /* Optionnel : fine bordure dorée */
    border-radius: 6px 0 0 6px !important;
    /* Optionnel : coins légèrement arrondis (ou 50% pour un cercle) */
    transition: all 0.3s ease-in-out !important;
}

/* Bouton au survol (Hover) */
.et_pb_scroll_top.et-pb-icon:hover {
    background-color: #EBD897 !important;
    /* Fond doré au survol */
    color: #010d16 !important;
    /* Flèche bleu nuit au survol */
    border-color: #EBD897 !important;
    transform: translateY(-3px);
    /* Léger effet d'élévation */
}

/* ==========================================================================
   DIVI MACHINE - Correctif icône de préchargement (Load More & Filtre)
   Compense le bug de clé dupliquée dans Divi Machine 5 (Styles.php)
   ========================================================================== */
.de_ajax_filter_archive_loop .line,
.loadmore-ajax-loading .line,
.filtered-posts-loading .line {
    background-color: var(--gcid-primary-color, #ffffff) !important;
}