/* ==========================================
   RÉINITIALISATION DE BASE
   ========================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #0b0b0b;
    color: #ffffff;
    padding-top: 90px;
}

/* --- L'EN-TÊTE GLOBAL (SMART HEADER) --- */
.en-tete {
    position: fixed; /* On remet en mode Ninja */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    background-color: #141414;
    border-bottom: 2px solid #333;
    box-sizing: border-box; /* Empêche le débordement horizontal */
    transition: transform 0.3s ease-in-out; /* Animation fluide quand il se cache/revient */
}

.en-tete.cache { 
    transform: translateY(-100%); /* Le tire vers le haut hors de l'écran */
}

.logo-container h1 { color: #e50914; font-size: 28px; text-transform: uppercase; letter-spacing: 2px; }
.logo-container p { font-size: 12px; color: #aaaaaa; margin-top: 5px; }

.menu-principal { display: flex; list-style: none; gap: 30px; align-items: center; }
.onglet-deroulant { position: relative; }
.bouton-menu, .bouton-simple { background: none; border: none; color: white; font-size: 16px; font-weight: bold; cursor: pointer; text-decoration: none; }
.bouton-menu:hover, .bouton-simple:hover { color: #e50914; }

.sous-menu { display: none; position: absolute; top: 40px; right: 0; background-color: #141414; list-style: none; min-width: 220px; border: 1px solid #333; border-radius: 4px; z-index: 1000; }
.sous-menu li a { display: block; padding: 15px 20px; color: white; text-decoration: none; border-bottom: 1px solid #222; }
.sous-menu li a:hover { background-color: #222; color: #e50914; }
.sous-menu.actif { display: block; }

/* ==========================================
   PAGE D'ACCUEIL : VIDÉO, ACCÈS ET CARROUSELS
   ========================================== */
.zone-vedette { width: 100%; height: 70vh; background-color: #000; overflow: hidden; display: flex; justify-content: center; align-items: center; border-bottom: 2px solid #333; }
.video-vedette { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

.section-acces, .section-carrousel { padding: 0 40px 40px 40px; }
.titre-section { font-size: 24px; margin-bottom: 20px; border-left: 4px solid #e50914; padding-left: 10px; margin-top: 40px; }

.grille-acces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.carte-acces { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 16 / 9; display: block; background-color: #1a1a1a; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.carte-acces img { width: 100%; height: 100%; object-fit: cover; }
.voile-noir { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.1) 100%); display: flex; align-items: flex-end; padding: 20px; }
.carte-acces h3 { color: white; font-size: 18px; margin: 0; text-transform: uppercase; }
.carte-acces:hover { transform: translateY(-8px); box-shadow: 0 10px 20px rgba(229, 9, 20, 0.4); }

.grille-catalogue, .conteneur-carrousel { 
    display: flex; gap: 20px; overflow-x: auto; padding-bottom: 20px; scrollbar-width: thin; scrollbar-color: #e50914 #141414; 
}
.grille-catalogue::-webkit-scrollbar, .conteneur-carrousel::-webkit-scrollbar { height: 8px; }
.grille-catalogue::-webkit-scrollbar-track, .conteneur-carrousel::-webkit-scrollbar-track { background: #141414; border-radius: 4px; }
.grille-catalogue::-webkit-scrollbar-thumb, .conteneur-carrousel::-webkit-scrollbar-thumb { background: #e50914; border-radius: 4px; }

.carte-film {
    position: relative; flex-shrink: 0; 
    /* LA RÈGLE D'OR : Exactement 3 affiches (gap de 20px * 2 = 40px à soustraire) */
    min-width: calc((100% - 40px) / 3); 
    aspect-ratio: 16 / 9; background-color: #1a1a1a; border-radius: 6px; overflow: hidden; transition: transform 0.3s ease; cursor: pointer;
}
.carte-film img { width: 100%; height: 100%; object-fit: cover; }

/* ========================================= */
/* LE BANGER (HERO VEDETTE)                  */
/* ========================================= */

.hero-vedette {
    position: relative;
    width: 100%;
    /* On supprime height: 80vh; */
    aspect-ratio: 16 / 9; /* Force le format cinéma 1920x1080 partout */
    background-color: #000;
    overflow: hidden;
}

/* L'image et la vidéo se superposent */
.hero-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Remplissage parfait sans déformation */
    transition: opacity 1s ease-in-out; /* Le fameux fondu enchaîné d'1 seconde */
}

/* La classe magique qui rendra l'affiche invisible */
.hero-media.masque {
    opacity: 0;
    pointer-events: none;
}

/* Le fondu noir vers le bas pour lier avec le reste du site */
.hero-vignette {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(to top, #141414, transparent);
    z-index: 5;
}

/* Le bloc de texte par dessus */
.hero-contenu {
    position: absolute;
    bottom: 15%;
    left: 40px;
    z-index: 10;
    max-width: 600px;
}

.titre-hero {
    font-size: 60px;
    color: white;
    margin-bottom: 10px;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

.synopsis-hero {
    font-size: 18px;
    color: #ddd;
    margin-bottom: 25px;
    line-height: 1.5;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}

/* ==========================================
   PAGE FILMS : FILTRES ET BOUTONS DE VUE
   ========================================== */
.page-catalogue { padding: 40px; }
.barre-outils { display: flex; justify-content: space-between; align-items: center; background-color: #141414; padding: 15px 25px; border-radius: 8px; margin-bottom: 30px; border: 1px solid #333; }
.titre-page { font-size: 28px; color: #ffffff; letter-spacing: 2px; border-left: 4px solid #e50914; padding-left: 15px; }
.outils-droite { display: flex; gap: 30px; align-items: center; }
.groupe-filtres { display: flex; gap: 10px; }

#boite-filtres { max-width: 0; opacity: 0; overflow: hidden; transition: all 0.4s ease-in-out; pointer-events: none; }
#boite-filtres.ouvert { max-width: 800px; opacity: 1; pointer-events: auto; margin-left: 10px; }
#btn-toggle-filtres.actif { background-color: #e50914; color: white; font-weight: bold; }
.menu-filtre { background-color: #222; color: white; border: 1px solid #444; padding: 8px 12px; border-radius: 4px; font-size: 14px; cursor: pointer; }
.menu-filtre:hover { border-color: #e50914; }

.groupe-affichage { display: flex; gap: 5px; background-color: #222; padding: 5px; border-radius: 6px; }
.btn-vue { background: none; border: none; color: #aaa; padding: 8px 15px; border-radius: 4px; cursor: pointer; font-size: 14px; transition: all 0.3s; }
.btn-vue:hover { color: white; }
.btn-vue.actif { background-color: #e50914; color: white; font-weight: bold; }

/* ==========================================
   PAGE FILMS : LES 3 MODES D'AFFICHAGE
   ========================================== */
#conteneur-catalogue { display: flex; gap: 25px; padding: 20px 0; transition: all 0.4s ease; scrollbar-width: thin; scrollbar-color: #e50914 #141414; }
#conteneur-catalogue::-webkit-scrollbar { height: 8px; }
#conteneur-catalogue::-webkit-scrollbar-track { background: #141414; border-radius: 4px; }
#conteneur-catalogue::-webkit-scrollbar-thumb { background: #e50914; border-radius: 4px; }

.carte-catalogue { position: relative; background-color: #1a1a1a; border-radius: 6px; overflow: hidden; box-shadow: 0 4px 8px rgba(0,0,0,0.5); transition: transform 0.3s ease; }
.carte-catalogue .image-fond { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.carte-catalogue:hover .image-fond { transform: scale(1.08); }

/* --- 1. MODE CARROUSEL (3 affiches exactes) --- */
#conteneur-catalogue.vue-carrousel { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 20px; }
#conteneur-catalogue.vue-carrousel .carte-catalogue { 
    flex: 0 0 auto; 
    /* Exactement 3 affiches (gap de 25px * 2 = 50px à soustraire) */
    width: calc((100% - 50px) / 3); 
    aspect-ratio: 16 / 9; 
    height: auto;
}

/* --- 2. MODE GRILLE (Le vrai damier à 3 colonnes) --- */
#conteneur-catalogue.vue-grille { flex-wrap: wrap; justify-content: flex-start; }
#conteneur-catalogue.vue-grille .carte-catalogue { 
    flex: 0 0 auto; 
    /* Même largeur que le carrousel pour aligner parfaitement 3 par ligne */
    width: calc((100% - 50px) / 3); 
    aspect-ratio: 16 / 9; 
    height: auto;
}

/* --- 3. MODE LISTE --- */
#conteneur-catalogue.vue-liste { flex-direction: column; align-items: center; }
#conteneur-catalogue.vue-liste .carte-catalogue {
    flex: 0 0 auto; display: flex; flex-direction: row; width: 90%; max-width: 1000px;
    height: auto; background-color: transparent; padding: 25px 0; border-bottom: 1px solid #333;
    gap: 40px; border-radius: 0; box-shadow: none; aspect-ratio: auto;
}
#conteneur-catalogue.vue-liste .image-fond { width: 350px; flex: 0 0 350px; aspect-ratio: 16 / 9; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.5); }

/* --- GESTION DES TEXTES ET BOUTONS --- */
.superposition-infos { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0,0,0,0.9) 20%, rgba(0,0,0,0.4) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; opacity: 0; transition: all 0.3s ease; }
.carte-catalogue:hover .superposition-infos { opacity: 1; }
.titre-film-carte { color: #ffffff; font-size: 18px; margin-bottom: 5px; text-transform: uppercase; font-weight: bold; }
.mini-synopsis { color: #dddddd; font-size: 12px; margin-bottom: 15px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.boutons-actions { display: flex; gap: 8px; width: 100%; }
.btn-action { background-color: rgba(0, 0, 0, 0.6); border: none; color: rgba(255, 255, 255, 0.9); padding: 6px 12px; border-radius: 20px; cursor: pointer; font-size: 11px; font-weight: 600; transition: all 0.2s ease; backdrop-filter: blur(5px); }
.btn-action:hover { background-color: #e50914; color: white; transform: translateY(-2px); }

/* ==========================================
   CORRECTIF : BOUTON FICHE TECHNIQUE FLOTTANT
   ========================================== */

/* On s'assure que le conteneur principal est la référence de position */
.contenu-modale {
    position: relative; /* Important pour que le bouton se positionne par rapport à cette boîte */
}

/* Le conteneur du bouton flottant */
#zone-bouton-flottant {
    position: absolute;
    bottom: 30px; 
    left: 30px;  
    z-index: 50;  
}

/* Le style du nouveau bouton "overlay" */
.btn-fiche-overlay {
    background-color: rgba(0, 0, 0, 0.6); 
    color: #ccc;
    border: 1px solid #444;
    padding: 10px 15px;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
    border-radius: 4px;
    backdrop-filter: blur(5px); 
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-fiche-overlay:hover {
    background-color: rgba(229, 9, 20, 0.8); 
    color: white;
    border-color: #e50914;
    transform: translateY(-2px);
}

/* ==========================================
   MODALE : BOUTONS DE MÊME DIMENSION AVEC RETOUR À LA LIGNE
   ========================================== */
.modale-actions {
    display: flex;
    gap: 10px; /* L'espace entre les boutons */
    width: 100%;
    align-items: stretch; /* 🚦 MAGIQUE : Force TOUS les boutons à prendre la hauteur du plus grand */
}

.modale-actions button {
    flex: 1 1 0%; /* Partage la largeur en parts strictement égales (ex: 33% chacun) */
    white-space: normal; /* 🚦 MAGIQUE : Autorise le texte à passer à la ligne dans le bouton */
    padding: 10px 8px; /* Aisance interne */
    font-size: 13px; /* Taille de police lisible et élégante */
    line-height: 1.3; /* Espace entre les lignes de texte si ça déborde */
    height: auto; /* La hauteur s'adapte naturellement */
    min-height: 55px; /* On garantit une belle hauteur de base pour le clic */
    display: flex;
    flex-direction: column; /* Superpose l'icône au-dessus du texte pour gagner un max de place en largeur */
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 6px; /* Espace entre l'icône et le texte */
}

/* Mode Liste (Textes à droite) */
.infos-mode-liste { display: none; } 
#conteneur-catalogue.vue-liste .superposition-infos { display: none !important; }
#conteneur-catalogue.vue-liste .infos-mode-liste { display: flex; flex-direction: column; justify-content: center; flex: 1; }
.infos-mode-liste h3 { margin: 0 0 10px 0; color: #e50914; font-size: 28px; }
.infos-mode-liste .synopsis-liste { margin-bottom: 20px; color: #ddd; line-height: 1.5; }

/* ==========================================
   FENÊTRES MODALES & EXTRAS
   ========================================== */
.modale { display: none; position: fixed; z-index: 3000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); backdrop-filter: blur(5px); align-items: center; justify-content: center; }
.modale.active { display: flex; animation: apparitionModale 0.3s ease-out; }
@keyframes apparitionModale { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.contenu-modale { background-color: #141414; border: 1px solid #333; border-radius: 10px; width: 90%; max-width: 800px; position: relative; padding: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.8); }
.fermer-modale { position: absolute; top: 15px; right: 20px; color: #aaa; font-size: 28px; font-weight: bold; cursor: pointer; transition: color 0.2s; z-index: 10; }
.fermer-modale:hover { color: #e50914; }

.modale-layout { display: flex; gap: 30px; }
.modale-image { flex: 0 0 45%; }
.modale-image img { width: 100%; border-radius: 6px; }
.modale-infos { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.modale-infos h2 { font-size: 32px; margin-bottom: 10px; }
.meta-donnees { display: flex; gap: 15px; color: #aaa; font-size: 14px; margin-bottom: 20px; }
.meta-donnees span { padding-right: 15px; border-right: 1px solid #444; }
.meta-donnees span:last-child { border-right: none; }
.synopsis-complet { color: #ccc; line-height: 1.6; margin-bottom: 30px; }
.modale-actions { display: flex; gap: 15px; }
.btn-lecture { background-color: white; color: black; border: none; padding: 10px 24px; font-size: 16px; font-weight: bold; border-radius: 4px; cursor: pointer; transition: background 0.2s; }
.btn-lecture:hover { background-color: #ddd; }
.btn-secondaire { background-color: rgba(109, 109, 110, 0.7); color: white; border: none; padding: 10px 24px; font-size: 16px; font-weight: bold; border-radius: 4px; cursor: pointer; transition: background 0.2s; }
.btn-secondaire:hover { background-color: rgba(109, 109, 110, 0.9); }

.contenu-modale-video { background-color: #000; width: 90%; max-width: 1000px; position: relative; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,0.9); overflow: hidden; }
.conteneur-iframe { position: relative; padding-bottom: 56.25%; height: 0; }
.conteneur-iframe iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

#btn-remonter { display: none; position: fixed; bottom: 30px; right: 30px; z-index: 4000; background-color: rgba(229, 9, 20, 0.8); color: white; border: none; border-radius: 50%; width: 45px; height: 45px; font-size: 20px; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.5); transition: background-color 0.3s, transform 0.3s; }
#btn-remonter:hover { background-color: rgba(229, 9, 20, 1); transform: translateY(-5px); }

.toast { visibility: hidden; min-width: 250px; background-color: #222; color: #fff; text-align: center; border-radius: 30px; padding: 15px 25px; position: fixed; z-index: 5000; left: 50%; bottom: 30px; transform: translateX(-50%); border: 1px solid #444; font-size: 14px; }
.toast.afficher { visibility: visible; animation: fonduToast 0.5s, disparaitreToast 0.5s 2.5s; }
@keyframes fonduToast { from {bottom: 0; opacity: 0;} to {bottom: 30px; opacity: 1;} }
@keyframes disparaitreToast { from {bottom: 30px; opacity: 1;} to {bottom: 0; opacity: 0;} }

.pied-de-page { background-color: #050505; padding: 40px; border-top: 1px solid #222; margin-top: 50px; }
.conteneur-footer { display: flex; flex-direction: column; align-items: center; gap: 15px; }
.copyright { color: #666666; font-size: 14px; }
.liens-legaux { list-style: none; display: flex; gap: 30px; }
.liens-legaux li a { color: #aaaaaa; text-decoration: none; font-size: 14px; transition: color 0.3s ease; }
.liens-legaux li a:hover { color: #ffffff; text-shadow: 0 0 8px rgba(255, 255, 255, 0.3); }

/* ==========================================
   MODALE HYPNOTIQUE (COMPTE À REBOURS)
   ========================================== */
.modale-hypnose {
    display: none;
    position: fixed;
    z-index: 9999; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.96); 
    backdrop-filter: blur(15px); 
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.8s ease; 
}

.modale-hypnose.active {
    display: flex;
    opacity: 1;
}

.contenu-decompte {
    position: relative;
    text-align: center;
}

/* La croix pour fermer */
.fermer-decompte {
    position: absolute;
    top: -40px;
    right: 20px;
    color: #444;
    font-size: 50px;
    font-weight: lighter;
    cursor: pointer;
    transition: all 0.4s ease;
    z-index: 10;
}
.fermer-decompte:hover {
    color: #e50914;
    transform: rotate(90deg);
}

/* L'EFFET HYPNOTIQUE (Respiration rouge sang) */
.cercle-hypnotique {
    padding: 70px;
    border-radius: 50%;
    box-shadow: 0 0 40px rgba(229, 9, 20, 0.1), inset 0 0 40px rgba(229, 9, 20, 0.1);
    animation: respirationHypnose 4s infinite alternate ease-in-out;
}

@keyframes respirationHypnose {
    0% { box-shadow: 0 0 20px rgba(229, 9, 20, 0.05), inset 0 0 20px rgba(229, 9, 20, 0.05); transform: scale(0.98); }
    100% { box-shadow: 0 0 100px rgba(229, 9, 20, 0.4), inset 0 0 60px rgba(229, 9, 20, 0.2); transform: scale(1.02); }
}

.titre-decompte {
    color: #e50914;
    font-size: 32px;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 5px;
    text-shadow: 0 0 15px rgba(229, 9, 20, 0.6);
}

.sous-titre-decompte { color: #888; font-size: 18px; font-style: italic; margin-bottom: 50px; }

/* Le Minuteur */
.minuteur-magique { display: flex; justify-content: center; gap: 30px; margin-bottom: 50px; }
.bloc-temps { display: flex; flex-direction: column; color: #aaa; font-size: 14px; text-transform: uppercase; letter-spacing: 2px; }
.bloc-temps span {
    font-size: 60px;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
    margin-bottom: 5px;
}

/* Le bouton de Réservation façon "Battement de cœur" */
.pulse-btn {
    background-color: transparent; border: 2px solid #e50914; color: #e50914; padding: 15px 40px; font-size: 18px; text-transform: uppercase; letter-spacing: 2px;
    animation: battementCoeur 1.5s infinite; border-radius: 30px;
}
.pulse-btn:hover { background-color: #e50914; color: #fff; box-shadow: 0 0 30px rgba(229, 9, 20, 0.8); animation: none; transform: scale(1.05); }

@keyframes battementCoeur {
    0% { transform: scale(1); } 15% { transform: scale(1.06); } 30% { transform: scale(1); } 45% { transform: scale(1.06); } 60% { transform: scale(1); } 100% { transform: scale(1); }
}

/* ==========================================
   MODALE DE PAIEMENT & UPSELL
   ========================================== */
.contenu-paiement {
    background-color: #141414; border: 1px solid #333; border-radius: 10px;
    width: 90%; max-width: 450px; position: relative; padding: 30px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.9); color: white;
}

.titre-paiement { font-size: 24px; margin-bottom: 20px; border-bottom: 2px solid #333; padding-bottom: 10px; }

/* Récapitulatif */
.recap-commande { display: flex; gap: 15px; margin-bottom: 20px; background: #1a1a1a; padding: 10px; border-radius: 8px; border-left: 3px solid #e50914; }
.recap-commande img { width: 50px; height: 75px; object-fit: cover; border-radius: 4px; }
.infos-commande { display: flex; flex-direction: column; justify-content: center; }
.infos-commande h3 { margin: 0 0 5px 0; font-size: 16px; color: #fff; text-transform: uppercase; }
.prix-unitaire { font-size: 14px; color: #aaa; }
.prix-unitaire span { color: #ffc107; font-weight: bold; font-size: 16px; }

/* La boîte Magique de l'Upsell */
.upsell-playlist {
    background: linear-gradient(135deg, rgba(229,9,20,0.05), rgba(255,193,7,0.1));
    border: 1px dashed #ffc107; padding: 15px; border-radius: 8px; margin-bottom: 25px;
    display: flex; align-items: flex-start; gap: 12px; cursor: pointer; transition: all 0.3s;
}
.upsell-playlist:hover { background: rgba(255,193,7,0.15); transform: scale(1.02); }
.upsell-playlist input { margin-top: 4px; cursor: pointer; transform: scale(1.3); accent-color: #ffc107; }
.upsell-playlist label { cursor: pointer; font-size: 13px; line-height: 1.5; color: #ccc; }
.prix-barre { text-decoration: line-through; color: #666; margin: 0 5px; }
.prix-promo { color: #ffc107; font-weight: bold; font-size: 16px; }

/* Boutons OrangeMoney, MTN, Visa */
.titre-moyens-paiement { margin-bottom: 10px; font-size: 13px; color: #888; text-transform: uppercase; letter-spacing: 1px; }
.moyens-paiement { display: flex; gap: 10px; margin-bottom: 20px; }
.btn-moyen {
    flex: 1; padding: 12px 5px; background: #222; border: 1px solid #444; color: #aaa;
    border-radius: 6px; cursor: pointer; font-size: 11px; font-weight: bold; transition: all 0.2s; text-transform: uppercase;
}
.btn-moyen.om.actif { border-color: #ff6600; color: #ff6600; background: rgba(255,102,0,0.1); }
.btn-moyen.momo.actif { border-color: #ffcc00; color: #ffcc00; background: rgba(255,204,0,0.1); }
.btn-moyen.carte.actif { border-color: #0066cc; color: #0066cc; background: rgba(0,102,204,0.1); }

/* Formulaires de saisie */
.zone-saisie-paiement { margin-bottom: 25px; }
.zone-saisie-paiement label { display: block; font-size: 12px; color: #888; margin-bottom: 8px; }
.input-paiement { width: 100%; padding: 12px; background: #0b0b0b; border: 1px solid #333; color: white; border-radius: 6px; font-size: 14px; transition: border 0.3s; }
.input-paiement:focus { outline: none; border-color: #e50914; box-shadow: 0 0 10px rgba(229,9,20,0.3); }
.details-carte { display: flex; gap: 10px; margin-top: 10px; }
.moitie { flex: 1; }

/* Bouton Payer énorme */
.btn-valider-paiement { width: 100%; padding: 15px; font-size: 18px; background-color: #e50914; border-radius: 8px; letter-spacing: 1px; }
.btn-valider-paiement:hover { background-color: #b20710; box-shadow: 0 5px 15px rgba(229,9,20,0.5); transform: translateY(-2px); }

/* ==========================================
   LES BADGES D'ACCÈS (PREMIUM ET BIENTÔT UNIQUEMENT)
   ========================================== */

/* On applique la forme de base UNIQUEMENT aux films Premium et Bientôt */
.carte-catalogue[data-f-acces="payant"]::before,
.carte-catalogue[data-f-acces="bientot"]::before {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-radius: 4px;
    z-index: 20;
    box-shadow: 0 4px 10px rgba(0,0,0,0.6);
    pointer-events: none; /* Empêche de gêner le clic */
}

/* 1. Le look du film PREMIUM (Doré / Or) */
.carte-catalogue[data-f-acces="payant"]::before {
    content: "Premium";
    background-color: #ffc107;
    color: #000;
}

/* 2. Le look du film À VENIR (Bordeaux / Rouge foncé) */
.carte-catalogue[data-f-acces="bientot"]::before {
    content: "Bientôt";
    background-color: #8b0000;
    color: white;
}

/* 3. Le look du film BIENTÔT RÉSERVÉ (Passe au Vert !) */
.carte-catalogue.est-reserve[data-f-acces="bientot"]::before {
    background-color: #28a745; /* Le vert succès Zede */
}

/* 4. Le look de la playlist PREMIUM ACHETÉE (Passe au Vert !) */
.carte-catalogue.est-acquis[data-f-acces="payant"]::before {
    background-color: #28a745; /* Le vert succès Zede */
    color: white;
    content: "Acquis"; /* Remplace le texte "Premium" */
}

/* ==========================================
   📱 RESPONSIVE DESIGN (TÉLÉPHONES)
   ========================================== */
@media (max-width: 768px) {
    /* ÉCRASONS LA RÈGLE DES 3 AFFICHES SUR TÉLÉPHONE ! */
    .carte-film, 
    #conteneur-catalogue.vue-carrousel .carte-catalogue { 
        width: 85%; /* Laisse voir un bout de l'affiche suivante */
        min-width: 85%; 
    }
    
    #conteneur-catalogue.vue-grille .carte-catalogue { 
        width: 100%; /* 1 seule affiche par ligne en grille sur mobile */
    }

    #conteneur-catalogue.vue-liste .carte-catalogue { flex-direction: column; padding: 20px; gap: 15px; width: 100%; }
    #conteneur-catalogue.vue-liste .image-fond { width: 100%; height: auto; flex: none; }
    
    body { padding-top: 140px; }
    .page-catalogue, .pied-de-page, .section-acces, .section-carrousel { padding: 20px 15px; }
    .en-tete { flex-direction: column; padding: 15px; gap: 15px; }
    .logo-container h1 { font-size: 22px; text-align: center; }
    .menu-principal { gap: 10px; flex-wrap: wrap; justify-content: center; }
    .bouton-menu, .bouton-simple { font-size: 14px; }
    .sous-menu { right: auto; left: 200%; transform: translateX(-50%); text-align: center; width: 250px; }
    .zone-vedette { height: 45vh; }
    .grille-acces { grid-template-columns: 1fr; gap: 15px; }
    .barre-outils { flex-direction: column; align-items: flex-start; gap: 15px; padding: 15px; }
    .outils-droite { flex-wrap: wrap; justify-content: flex-start; gap: 15px; }
    .groupe-filtres { flex-wrap: wrap; gap: 8px; }
    .liens-legaux { flex-direction: column; align-items: center; gap: 10px; }
    .modale-layout { flex-direction: column; }
    .modale-image { width: 70%; margin: 0 auto; margin-bottom: 20px; }
    .modale-infos h2 { font-size: 24px; margin-top: 15px; text-align: center; }
    .meta-donnees, .modale-actions { justify-content: center; }
    #btn-remonter { bottom: 20px; right: 20px; width: 40px; height: 40px; }
}

/* ==========================================
   📱 OPÉRATION SAUVETAGE MOBILE & TABLETTE
   ========================================== */

/* 1. RÈGLE D'OR : Empêcher le site de déborder sur les côtés (le fameux scroll horizontal chaotique) */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* ==========================================
   📺 TABLETTES (Écrans moyens : iPad, etc. - max 992px)
   ========================================== */
@media screen and (max-width: 992px) {
    /* On réduit les marges globales pour gagner de la place */
    .conteneur-catalogue { padding: 15px; }
    
    /* La Grille : On passe à 3 ou 2 colonnes au lieu de 4 ou 5 */
    .vue-grille {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 15px;
    }
    
    /* Les Modales (Pop-ups d'infos et de paiement) : On prend plus de place */
    .contenu-modale, .contenu-paiement {
        width: 90%;
        max-width: none;
        padding: 20px;
    }
    
    /* On réorganise la modale Infos (l'image au-dessus, le texte en dessous) */
    .modale-layout {
        flex-direction: column;
    }
    .modale-image { width: 100%; max-height: 300px; margin-bottom: 20px; }
    .modale-image img { object-fit: cover; }
}

/* ==========================================
   📱 TÉLÉPHONES (Petits écrans : Samsung, iPhone - max 768px)
   ========================================== */
@media screen and (max-width: 768px) {
    
    /* --- CORRECTION DES MENUS ET HEADER --- */
    /* On force les menus déroulants à flotter AU-DESSUS du texte, au lieu de le pousser */
    .sous-menu {
        position: absolute !important;
        top: 100%;
        left: 0;
        width: 250px;
        z-index: 2000;
        background: #141414;
        box-shadow: 0 5px 15px rgba(0,0,0,0.9);
    }

    /* Si tu as un menu tiroir latéral qui sort de l'écran, on le contraint */
    #boite-filtres, .menu-tiroir {
        width: 85vw !important; /* Prend 85% de l'écran max */
        max-width: 320px !important;
    }

    /* --- CORRECTION DES AFFICHES (GRILLE ET LISTE) --- */
    /* Grille : 2 affiches par ligne sur téléphone, c'est le standard */
    .vue-grille {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    /* Vue Liste : On met l'image au-dessus, et les infos en dessous pour que ce soit lisible */
    .vue-liste .carte-catalogue {
        flex-direction: column;
        height: auto;
    }
    .vue-liste .image-fond { position: relative; width: 100%; height: 200px; }
    .vue-liste .infos-mode-liste { width: 100%; padding: 15px; }
    
    /* --- CORRECTION DES MODALES SUR TÉLÉPHONE --- */
    /* La modale prend presque tout l'écran */
    .contenu-modale, .contenu-paiement {
        width: 95%;
        padding: 15px;
        max-height: 90vh; /* Empêche de sortir de l'écran en hauteur */
        overflow-y: auto; /* Permet de scroller DANS la modale si c'est trop long */
    }

    /* On réduit la taille des titres et des boutons pour que ça rentre */
    h2#titre-modale { font-size: 20px; }
    .modale-actions { flex-direction: column; gap: 10px; } /* Boutons les uns sur les autres */
    .btn-lecture, .btn-secondaire, .action-btn-pilule { 
        width: 100%; /* Les boutons prennent toute la largeur sur mobile */
        text-align: center;
        justify-content: center;
    }
    
    /* Le bouton flottant "Fiche technique" : on le remonte un peu */
    #zone-bouton-flottant { bottom: 15px; left: 15px; }
    
    /* --- CORRECTION DE LA CAISSE (PAIEMENT) --- */
    .moyens-paiement { flex-direction: column; } /* Boutons OM, MoMo l'un sur l'autre */
    .zone-promo { flex-direction: column; }
    
    /* --- CORRECTION DU DÉCOMPTE HYPNOTIQUE --- */
    .cercle-hypnotique { padding: 30px; }
    .titre-decompte { font-size: 20px; }
    .minuteur-magique { gap: 10px; }
    .bloc-temps span { font-size: 30px; }
}

/* Badge Humanitaire ODAS (Pour la caisse VOD) */
.badge-humanitaire {
    background: rgba(229, 9, 20, 0.1); border-left: 3px solid #e50914;
    padding: 10px 15px; border-radius: 0 4px 4px 0; margin-bottom: 20px;
    font-size: 12px; color: #ccc; display: flex; align-items: center; gap: 10px;
}
.badge-humanitaire i { color: #e50914; font-size: 16px; }
.badge-humanitaire strong { color: #fff; }

/* ==========================================
   📱 TÉLÉPHONES EN MODE PAYSAGE (Le manque de hauteur)
   ========================================== */
@media screen and (max-height: 500px) and (orientation: landscape) {
    
    /* 1. Le problème n°1 : Les fenêtres sortent de l'écran par le bas */
    .contenu-modale, .contenu-paiement {
        max-height: 85vh; /* La fenêtre ne dépassera jamais 85% de la hauteur de l'écran */
        overflow-y: auto; /* Permet de faire défiler le contenu à l'intérieur de la fenêtre avec le doigt */
        padding: 10px 20px;
    }

    /* 2. On réduit la taille de l'image de la modale pour laisser de la place au texte */
    .modale-image {
        max-height: 120px;
        margin-bottom: 10px;
    }
    
    h2#titre-modale { font-size: 18px; margin-bottom: 5px; }
    .meta-donnees { margin-bottom: 10px; }
    
    /* 3. Le Menu / Header prend trop de place en hauteur */
    .header-principal { padding: 5px 20px; }
    
    /* 4. Le Décompte Hypnotique : on réduit les énormes chiffres */
    .cercle-hypnotique { padding: 15px; }
    .titre-decompte { font-size: 18px; margin-bottom: 5px; }
    .sous-titre-decompte { margin-bottom: 10px; font-size: 14px; }
    .minuteur-magique { gap: 10px; margin-bottom: 15px; }
    .bloc-temps span { font-size: 24px; margin-bottom: 0; }
    .pulse-btn { padding: 8px 20px; font-size: 14px; }
}

/* ========================================= */
/* CARROUSEL ACCUEIL (Domptage des affiches 2K) */
/* ========================================= */

.conteneur-carrousel {
    display: flex;
    gap: 20px; /* L'espace entre les affiches */
    overflow-x: auto; /* Permet le défilement horizontal */
    padding: 20px 10px; 
  
    /* Barre de défilement personnalisée directement intégrée ici */
    -ms-overflow-style: auto; 
    scrollbar-width: thin; 
    scrollbar-color: #e50914 #141414; /* Rouge Zede sur fond noir */
    transition: all 0.4s ease; /* Pour la fluidité globale */
}

.conteneur-carrousel::-webkit-scrollbar { 
    height: 8px; /* Hauteur de la barre horizontale */
    display: block; /* On réaffiche la barre */
}

.conteneur-carrousel::-webkit-scrollbar-track { 
    background: #141414; 
    border-radius: 10px; 
    margin: 0 10px; /* Évite que la barre touche les bords de l'écran */
}

.conteneur-carrousel::-webkit-scrollbar-thumb { 
    background: #e50914; 
    border-radius: 10px; 
    transition: background 0.3s;
}

.conteneur-carrousel::-webkit-scrollbar-thumb:hover { 
    background: #b20710; /* Un rouge plus sombre au survol */
}

/* La boîte en béton qui retient ton affiche */
.carte-film {
    flex: 0 0 auto; 
    width: 220px; 
    height: 330px; 
    position: relative; 
    border-radius: 8px; 
    overflow: hidden; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.6); 
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); 
    cursor: pointer;
    z-index: 1; /* Préparation pour le focus hover */
}

/* 1. L'ASTUCE : Quand on survole le carrousel, TOUTES les affiches s'assombrissent */
.conteneur-carrousel:hover .carte-film {
    filter: brightness(0.5) blur(1px);
    transform: scale(0.95);
    opacity: 0.8;
}

/* 2. LE HÉROS : L'affiche survolée redevient nette, s'éclaire et grossit ! */
.conteneur-carrousel .carte-film:hover {
    filter: brightness(1.2) contrast(1.1) blur(0px);
    transform: scale(1.15) translateY(-10px);
    opacity: 1;
    z-index: 10;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.7);
}

/* L'image 2K est forcée d'obéir à la boîte */
.carte-film img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
    transition: transform 0.4s ease;
}

.conteneur-carrousel .carte-film:hover img {
    transform: scale(1.05); /* Petit zoom interne sur l'image */
}

/* Le petit badge Nouveauté bien placé */
.badge-nouveaute {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #e50914;
    color: white;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 4px;
    z-index: 10; /* Assure qu'il est au-dessus de l'image */
}

/* ========================================= */
/* DESIGN DES ÉPISODES DE SÉRIES & CADENAS   */
/* ========================================= */

/* Conteneur de l'image de l'épisode en mode liste */
.image-episode-container {
    position: relative;
    width: 250px; /* Taille de l'image en mode liste */
    flex-shrink: 0;
}

/* Le grand Cadenas centré */
.cadenas-verrou {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 40px;
    background: rgba(0, 0, 0, 0.7);
    width: 70px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    z-index: 10;
    pointer-events: none; /* Le clic passe au travers */
    box-shadow: 0 0 15px rgba(0,0,0,0.8);
}

/* Les couleurs selon le statut de l'épisode */
.cadenas-premium { color: #ffc107; border: 2px solid #ffc107; }
.cadenas-bientot { color: #e50914; border: 2px solid #e50914; }

/* On grise l'image de l'épisode pour montrer qu'elle est bloquée */
.episode-bloque img {
    filter: brightness(0.4) grayscale(0.5);
}

/* ========================================= */
/* DESIGN DU STATUT "RÉSERVÉ" (Bientôt acheté)*/
/* ========================================= */
.badge-nouveaute.reserve {
    background-color: #28a745 !important;
}
.cadenas-reserve {
    color: #28a745;
    border: 2px solid #28a745;
}

/* ========================================= */
/* LE CADENAS VERT DES RÉSERVATIONS          */
/* ========================================= */
.badge-cadenas-vert {
    position: absolute;
    top: 10px;
    right: 10px; /* Positionné à l'extrême droite ! */
    background-color: #28a745;
    color: white;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    z-index: 30;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.8);
    transition: transform 0.2s ease;
}

.badge-cadenas-vert:hover {
    transform: scale(1.15);
}

/* ========================================= */
/* DESIGN DES PLAYLISTS                      */
/* ========================================= */

/* La carte spéciale de création de Playlist */
.carte-composer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 3px dashed #555;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    height: 100%; /* Elle prendra exactement la hauteur de ses voisines */
    min-height: 280px; /* Sécurité pour garder une forme d'affiche */
    transition: all 0.3s ease;
}
.carte-composer:hover {
    border-color: #28a745;
    background: rgba(40,167,69,0.1);
}

/* Les Cadenas de Playlist */
.cadenas-playlist {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    z-index: 20;
    box-shadow: 0 4px 10px rgba(0,0,0,0.8);
}
.cadenas-jaune-playlist {
    top: 10px;
    left: 10px;
    background-color: #ffc107;
    color: black;
}
.cadenas-vert-playlist {
    top: 10px;
    right: 10px;
    background-color: #28a745;
    color: white;
}

/* ========================================= */
/* LE COMPOSITEUR DE PLAYLISTS               */
/* ========================================= */
.item-compo { display: flex; gap: 10px; align-items: center; background: #141414; padding: 10px; border-radius: 6px; margin-bottom: 10px; border: 1px solid #222; transition: all 0.2s;}
.item-compo:hover { border-color: #555; }
.item-compo img { width: 50px; height: 75px; object-fit: cover; border-radius: 4px; }
.item-compo-infos { flex: 1; }
.item-compo-infos h4 { font-size: 14px; margin: 0 0 5px 0; color: white;}
.item-compo-infos p { font-size: 12px; color: #888; margin: 0; }
.btn-add-compo { background: #28a745; color: white; border: none; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; transition: all 0.3s; box-shadow: 0 2px 5px rgba(0,0,0,0.5);}
.btn-add-compo:hover { transform: scale(1.1); }
.btn-add-compo.selected { background: #e50914; transform: rotate(45deg); } /* Devient une croix ! */
.btn-add-compo.selected:hover { transform: rotate(45deg) scale(1.1); }

/* Badge spécifique pour les playlists persos */
.badge-compose {
    position: absolute; top: 10px; right: 10px; background-color: #28a745; color: white;
    padding: 3px 8px; font-size: 12px; font-weight: bold; border-radius: 4px; z-index: 10; box-shadow: 0 2px 5px rgba(0,0,0,0.8);
}

/* ==========================================
   STYLE DE LA MODALE DE DONATION (THÈME ODAS)
   ========================================== */

/* Variables Couleurs ODAS */
:root {
    --odas-bleu: #87CEEB; /* Bleu Ciel */
    --odas-orange: #FFB347; /* Orange Clair */
    --odas-blanc: #FFFFFF;
    --odas-texte: #333333;
}

.modale-universelle.theme-odas {
    display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 9999; justify-content: center; align-items: center;
    /* Couleurs pleines et opaques (plus de transparence) */
    background: linear-gradient(135deg, #87CEEB, #FFB347); 
}

.modale-universelle.theme-odas.active { display: flex; animation: fadeInOdas 0.5s ease; }

@keyframes fadeInOdas { from { opacity: 0; backdrop-filter: blur(0px); } to { opacity: 1; backdrop-filter: blur(5px); } }

/* Le Panorama Animé */
.panorama-fond-odas {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
    /* Image d'exemple de cinéma/enfants (l'admin mettra la vraie image ODAS) */
    background-image: url('https://images.unsplash.com/photo-1604134967494-8a9ed3adea0d?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80');
    background-size: cover; background-position: center;
    opacity: 0.15; mix-blend-mode: multiply; /* Se fond parfaitement avec le dégradé */
    animation: defilementDoux 60s linear infinite alternate;
}

@keyframes defilementDoux {
    0% { transform: scale(1.05) translateX(-2%); }
    100% { transform: scale(1.05) translateX(2%); }
}

/* Le formulaire : Blanc, pur, rassurant */
.theme-odas .contenu-donation {
    background: var(--odas-blanc); border-radius: 16px;
    width: 90%; max-width: 480px; padding: 35px; position: relative;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2); text-align: center;
}

.icone-odas-coeur { font-size: 45px; color: var(--odas-orange); margin-bottom: 10px; }
.theme-odas .en-tete-donation h2 { color: var(--odas-bleu); font-size: 26px; margin-bottom: 0; text-transform: uppercase; font-weight: 900; }
.slogan-odas { color: var(--odas-orange); font-size: 13px; font-weight: bold; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 15px; }
.texte-intro-odas { color: #666; font-size: 14px; line-height: 1.5; margin-bottom: 25px; }

/* Boutons de montants */
.theme-odas .choix-montant { display: flex; gap: 12px; margin-bottom: 20px; }
.theme-odas .btn-montant {
    flex: 1; padding: 12px 5px; background: #f4f9fc; border: 2px solid #e0f0f8;
    color: var(--odas-texte); border-radius: 8px; cursor: pointer; font-weight: bold; font-size: 16px;
    transition: all 0.3s;
}
.theme-odas .btn-montant:hover { background: #e0f0f8; border-color: var(--odas-bleu); transform: translateY(-2px); }
.theme-odas .btn-montant.selectionne { background: var(--odas-orange); color: white; border-color: var(--odas-orange); box-shadow: 0 5px 15px rgba(255,179,71,0.4); }

/* Montant libre & Inputs */
.theme-odas .montant-libre label { display: block; color: #888; font-size: 13px; margin-bottom: 8px; text-align: left; }
.theme-odas .input-avec-devise { display: flex; background: #fff; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; }
.theme-odas .input-avec-devise input { flex: 1; border: none; color: var(--odas-texte); padding: 12px 15px; font-size: 16px; outline: none; }
.theme-odas .input-avec-devise span { padding: 0 15px; color: #fff; font-weight: bold; background: var(--odas-bleu); display: flex; align-items: center; }

/* Zone de paiement */
.titre-paiement-odas { text-align: left; color: #555; margin-bottom: 12px; font-size: 15px; }
.theme-odas .btn-moyen { flex: 1; background: #f8f8f8; border: 1px solid #ddd; color: #777; padding: 10px 5px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: bold; transition: 0.2s; }
.theme-odas .btn-moyen.actif.om { background: #ff6600; color: white; border-color: #ff6600; }
.theme-odas .btn-moyen.actif.momo { background: #ffcc00; color: black; border-color: #ffcc00; }
.theme-odas .btn-moyen.actif.carte { background: var(--odas-bleu); color: white; border-color: var(--odas-bleu); }

.theme-odas .input-paiement-don { width: 100%; background: #fafafa; border: 1px solid #ddd; color: #333; padding: 12px 15px; border-radius: 8px; font-size: 15px; outline: none; }
.theme-odas .input-paiement-don:focus { border-color: var(--odas-bleu); background: #fff; }

.zone-securite-odas { text-align: left; margin-top: 15px; border-top: 1px dashed #ddd; padding-top: 15px; margin-bottom: 20px; }
.zone-securite-odas label { color: var(--odas-orange); font-size: 13px; font-weight: bold; }

.theme-odas .btn-valider-don { width: 100%; background: var(--odas-bleu); color: white; border: none; font-size: 16px; font-weight: bold; padding: 15px; border-radius: 8px; cursor: pointer; transition: 0.3s; }
.theme-odas .btn-valider-don:hover { background: #6cbbe0; box-shadow: 0 5px 15px rgba(135,206,235,0.4); }

.mention-securite-odas { color: #888; font-size: 12px; margin-top: 15px; }
.fermer-odas { position: absolute; top: 15px; right: 20px; font-size: 28px; color: #ccc; cursor: pointer; transition: 0.2s; }
.fermer-odas:hover { color: #ff0000; }

.verrouille {
    pointer-events: none; /* Empêche tout clic */
    opacity: 0.5; /* Grise légèrement le bouton */
}
.cacher-croix {
    display: none !important; /* Fait disparaître la croix de fermeture */
}

/* ==========================================
   BADGE PROMOTION FLASH
   ========================================== */
.badge-promo {
    position: absolute;
    top: 10px;
    right: 10px; /* À l'opposé du badge nouveauté */
    background-color: #ff007f; /* Rose/Rouge flash ultra visible */
    color: white;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    border-radius: 4px;
    z-index: 25;
    box-shadow: 0 4px 10px rgba(0,0,0,0.6);
    animation: pulsePromo 1.5s infinite;
}

@keyframes pulsePromo {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 0, 127, 0.7); }
    50% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(255, 0, 127, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 0, 127, 0); }
}

/* ==========================================
   REDESIGN DE LA CAISSE ODAS (Aéré & Stylé)
   ========================================== */
/* On agrandit la modale spécifique au don pour qu'elle respire */
#modale-donation .contenu-modale {
    max-width: 600px !important; 
    padding: 40px !important;
    border-top: 4px solid #00a8e8; /* Ligne bleu ciel stylée en haut */
}

/* Le nouveau design du sélecteur de devises */
.conteneur-devise-odas {
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 15px; 
    margin-bottom: 30px; 
    background: rgba(0, 168, 232, 0.05);
    padding: 15px; 
    border-radius: 12px; 
    border: 1px solid rgba(0, 168, 232, 0.2);
}

.select-odas-style {
    appearance: none; 
    background-color: #00a8e8; /* Bleu Ciel ODAS */
    color: white; 
    border: 2px solid #00a8e8; 
    padding: 10px 45px 10px 20px; 
    border-radius: 30px; 
    font-size: 16px; 
    font-weight: bold; 
    cursor: pointer; 
    outline: none; 
    box-shadow: 0 4px 15px rgba(0, 168, 232, 0.3); 
    transition: all 0.3s ease;
}

.select-odas-style:hover {
    background-color: #008fcc;
    transform: translateY(-2px);
}

.select-odas-style option {
    background: white; 
    color: #333;
}

/* Refonte des boutons de montants pour coller à la charte */
#modale-donation .choix-montant {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}

/* La boîte de la devise avec un fond gris très clair pour lire le texte noir */
.conteneur-devise-odas {
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 15px; 
    margin-bottom: 30px; 
    background: #f0f2f5; /* Fond clair chic */
    padding: 15px; 
    border-radius: 12px; 
    border: 1px solid #ddd;
}

/* Les boutons de montant (texte passé en noir, sans modifier la graisse) */
#modale-donation .btn-montant {
    padding: 15px;
    border-radius: 8px;
    border: 1px solid rgba(255, 183, 3, 0.5); 
    background: transparent;
    color: black; /* <-- MODIFICATION DEMANDÉE ICI */
    font-size: 16px;
    transition: 0.3s;
}

#modale-donation .btn-montant:hover {
    border-color: #ffb703; 
    background: rgba(255, 183, 3, 0.05);
}

#modale-donation .btn-montant.selectionne {
    border: none;
    background: linear-gradient(135deg, #ffb703, #ff9f1c); 
    color: black;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(255, 183, 3, 0.3);
    transform: scale(1.05);
}

/* ❌ Animation de la croix de fermeture des modales */
.fermer-modale {
    transition: color 0.3s ease, transform 0.3s ease !important; /* Pour que le changement soit doux */
}

.fermer-modale:hover {
    color: #e50914 !important; /* Votre fameux rouge Zede */
    transform: scale(1.2) !important; /* Petit bonus : la croix grossit très légèrement au survol ! */
}

/* ==========================================
   🛠️ CORRECTIF : VERROUILLAGE STRICT DES AFFICHES (ANTI-DÉBORDEMENT)
   ========================================== */

/* 1. Force toutes les images des catalogues à se recadrer sans déformer la grille */
.carte-catalogue img, 
.carte-film img,
.image-fond {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important; /* Coupe ce qui dépasse au lieu d'aplatir */
    display: block;
}

/* 2. Verrouille la hauteur de la vue Liste sur Ordinateur */
@media screen and (min-width: 769px) {
    #conteneur-catalogue.vue-liste .carte-catalogue {
        max-height: 280px; /* Verrouille la hauteur de la ligne */
        overflow: hidden; /* Cache tout ce qui essaie de déborder */
        align-items: stretch; /* Force le texte et l'image à avoir la même hauteur */
    }
    
    #conteneur-catalogue.vue-liste .image-fond {
        width: 250px !important; /* Largeur fixe de l'affiche en mode liste */
        flex: 0 0 250px !important;
        height: 100% !important;
    }
}

/* 3. Verrouille la vue Liste sur Mobile */
@media screen and (max-width: 768px) {
    #conteneur-catalogue.vue-liste .image-fond {
        width: 100% !important;
        height: 250px !important; /* Limite la hauteur sur téléphone */
        flex: none !important;
    }
}

/* ==========================================
   ✨ BADGE NOUVEAUTÉ (Superpose le Premium)
   ========================================== */
.badge-nouveau-anime {
    position: absolute;
    top: 10px;
    left: 10px; /* Même position que Premium pour le recouvrir */
    background: linear-gradient(45deg, #ffc107, #ff7b00); /* Dégradé Or/Orange */
    color: black;
    padding: 6px 14px; /* Légèrement plus grand */
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-radius: 4px;
    z-index: 25; /* S'assure d'être au-dessus */
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.6);
    animation: pulseNouveau 2s infinite;
    pointer-events: none;
}

@keyframes pulseNouveau {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7); }
    50% { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(255, 193, 7, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); }
}