.search .search-input input[type=text]::placeholder, .search .search-input input[type=text].focus {
    background: #0d071e !important;
}
.vibrating-button {
    padding: 10px 16px;
    background-color: #b81b0e;
    color: white;
    border: none;
    font-size: 16px;
    border-radius: 14px;
    transition: background-color 0.3s ease, transform 0.2s;
    cursor: pointer;
    margin-top: 0px;
    margin-bottom: 35px;
}
.vibrating-button:hover {
    background-color: #b81b0e !important;
    transform: scale(1.05);
}
#video-loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    display: none; /* Par défaut, l'animation est cachée */
}

@media (max-width: 767px) {
    .warning-icon {
        top: -15px !important;
    	left: -25px !important;
    }
}

span::after, span.warning-icon::after {
    content: none !important;
    display: none !important;
}

.swal2-html-container {
    font-size: 92% !important;
}
.rubrique-container {
    display: flex;
    gap: 20px;
    margin-top: 2rem;
    flex-wrap: wrap;
    width: 100%;
}

.rubrique-button {
    display: flex;
    align-items: center;
    padding: 1rem;
    background-color: #b81b0e;
    color: white;
    border-radius: 1rem;
    width: 100%;
    transition: background-color 0.3s;
    justify-content: space-between;
}

.rubrique-button:hover {
    background-color: #a0170d;
}

.icon {
    height: 4rem;
    width: 4rem;
    margin: -2rem 10px 0 -5px;
}

.content {
    flex-grow: 1;
}

.text {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

.arrow-icon {
    width: 1rem;
    height: 1rem;
}


.suggestion-film-footer{
    padding: 0 0 40px 0 !important;
}

@media (max-width: 767px) {
    .rubrique-container {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .rubrique-button {
        width: 100%;
    }
}

@media (min-width: 768px) {
    .rubrique-container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
    }

    .rubrique-button {
        width: 48%;
        margin-bottom: 20px;
    }
}

/* Styles pour l'écran de chargement */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0d071e; /* Couleur de fond de l'écran de chargement */
    display: flex;
    flex-direction: column; /* Organise le logo et la barre verticalement */
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Assure que l'écran de chargement reste au-dessus */
    opacity: 1;
    transition: opacity 1s ease-out; /* Transition fluide pour masquer l'écran */
}

/* Logo */
#logo {
    width: 240px; /* Aligné avec la largeur de la barre */
    height: auto;
    margin-bottom: 20px; /* Espacement entre le logo et la barre */
    display: block; /* Assure que le logo est centré */
    margin-left: auto; 
    margin-right: auto;
}

/* Conteneur pour la barre de chargement */
#progress-bar-container {
    width: 240px; /* Aligné avec la largeur du logo */
    height: 8px; /* Hauteur de la barre de chargement */
    background-color: #333; /* Couleur de fond du conteneur */
    border-radius: 4px; /* Coins arrondis */
    display: flex;
    align-items: center; /* Centrer le bouton Play et la barre */
    justify-content: flex-start; /* Aligne le bouton et la barre */
    position: relative;
    margin: 0 auto; /* Centre horizontalement */
}

/* Barre de progression */
#progress-bar {
    width: 0%; /* La barre commence vide */
    height: 100%; /* Prend toute la hauteur du conteneur */
    background-color: #b81b0e; /* Couleur de la barre de progression */
    transition: width 2.5s linear; /* Animation fluide sur 3 secondes */
    border-radius: 4px; /* Coins arrondis */
    position: relative; /* Important pour le positionnement de la boule */
}

/* Ajouter une boule blanche à l'extrémité de la barre de progression */
#progress-bar::after {
    content: '';
    position: absolute;
    right: 0; /* Positionne la boule à la fin de la barre */
    top: 50%;
    transform: translate(50%, -50%); /* Décalage pour centrer */
    width: 16px;
    height: 16px;
    background-color: white;
    border-radius: 50%; /* Faire une boule */
}

/* Bouton Play pour démarrer le chargement */
#play-button {
    background-color: transparent; /* Pas de fond */
    border: none;
    font-size: 25px; /* Taille de l'icône */
    color: white; /* Couleur de l'icône */
    cursor: pointer;
    position: absolute;
    left: -45px; /* Ajustement de la position du bouton à gauche */
    transform: translateY(-50%); /* Centrage vertical */
    top: 50%; /* Aligne le bouton verticalement */
}

#play-button i {
    font-size: 25px; /* Taille de l'icône */
}

/* Masquer le contenu de la page jusqu'à ce que l'écran de chargement disparaisse */
#content {
    display: none; /* Contenu caché au départ */
}

/* Transition fluide pour masquer l'écran de chargement */
#loading-screen.hidden {
    opacity: 0; /* Rendre l'écran invisible */
    pointer-events: none; /* Désactive l'interaction avec l'écran de chargement */
}

/* Media queries pour les appareils plus petits */
@media (max-width: 768px) {
    #logo, #progress-bar-container {
        width: 200px; /* Réduit la largeur sur mobile */
    }
    
}

@media (max-width: 480px) {
    #logo, #progress-bar-container {
        width: 180px; /* Réduit encore plus pour les petits écrans */
    }
    
}

#castButton {
    cursor: pointer;
    border: none;
    font-size: 23px; /* Taille du texte */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px; /* Réduit la zone d'effet autour de l'icône */
    
}

#castButton svg {
    width: 21.5px; /* Taille du SVG (icône) */
    height: 21.5px; /* Taille du SVG (icône) */
}



/*

body {
    overflow-x: hidden;
}

#ambilight {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; 
    height: 90%;
    z-index: 0;
    filter: blur(80px);
    transform: scale(1.1);
    opacity: 0.7;
    pointer-events: none;
    will-change: transform, opacity;
}

#ambilight::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.5), transparent);
    z-index: 1;
    pointer-events: none;
}

#player {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    max-width: 100%;
}

#player-container {
    position: relative;
    width: 100%;
}

#ambilight {
    height: 100%;
}

#player-logo {
    position: absolute;
    top: 17.5px;
    left: 17.5px;
    z-index: 9;
    width: 150px;
    max-width: 10%;
    opacity: 0.8;
}

.container-fluid {
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    #ambilight {
        filter: blur(50px);
        transform: scale(1.2);
        opacity: 0.7;
    }
}
*/
/* ===== Header de section uniforme (titre à gauche, "Voir tout" à droite, aligné) ===== */
.vfx-item-section {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 0 15px 0 !important;
    min-height: 34px;
}
.vfx-item-section > a { display: inline-flex; align-items: center; text-decoration: none; }
.vfx-item-section h3 {
    margin: 0 !important;
    position: static !important;
    top: 0 !important;
    line-height: 1.2;
}
.vfx-item-section span.view-more {
    margin-left: auto;
    flex: 0 0 auto;
    line-height: 1;
}
.vfx-item-section span.view-more a { float: none !important; white-space: nowrap; }
@media (max-width: 480px) {
    .vfx-item-section h3 { font-size: 18px; }
}