:root {
  --color-primary: #e50914;
  --color-background: #0d0d0d;
  --color-text: #f5f5f5;
  --color-card-bg: #1f1f1f;
  --color-hover: #ff1a2b;
  --font-stack: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-logo: 'Bebas Neue', cursive;
  
  /* Nouvelles variables */
  --transition-smooth: 0.3s ease;
  --shadow-soft: 0 5px 15px rgba(0,0,0,0.3);
  --border-radius: 8px;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family: var(--font-stack);
  background-color: var(--color-background);
  color: var(--color-text);
  line-height: 1.6;
}

/* Header amélioré */
.header {
  display:flex; justify-content:space-between; align-items:center;
  padding:15px 30px;
  background-color: rgba(0,0,0,0.95);
  position:fixed; top:0; width:100%; z-index:100;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
  backdrop-filter: blur(10px);
}
.logo {
  font-family: var(--font-logo);
  font-size:2.5em; color:var(--color-primary); font-weight:900; letter-spacing:3px;
  text-transform: uppercase;
  text-decoration: none;
}

.navigation a {
  color:var(--color-text); text-decoration:none; margin-left:25px; 
  transition:color var(--transition-smooth), transform 0.2s;
  font-size: 1.05em;
  padding: 5px 0;
  position: relative;
}
.navigation a:hover { color: var(--color-primary); transform: translateY(-2px); }
.navigation a.nav-active { color: var(--color-primary); }
.navigation a.nav-active::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-primary);
}
.navigation a i { margin-right: 5px; color: var(--color-primary); }

/* Responsive Header */
@media (max-width: 768px) {
  .header {
    flex-direction: column;
    padding: 10px 15px;
    align-items: center;
  }
  .logo { margin-bottom: 10px; font-size: 2em; }
  .navigation { width: 100%; display: flex; justify-content: space-around; }
  .navigation a { margin: 0 5px; font-size: 0.9em; text-align: center; }
  .navigation a i { display: block; margin: 0 auto 3px; }
}

.main-content { padding-top:60px; }

/* Hero Section améliorée */
.hero-section {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0;
  color: white;
  background: url('images/pucci.jpeg') center top/cover no-repeat;
  background-attachment: scroll;
  overflow: hidden;
}

.hero-section::before {
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(to top, var(--color-background) 5%, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0.2) 100%);
  z-index:1;
}

.hero-details {
  position: relative;
  z-index:2;
  max-width:800px;
  text-align:left;
  padding: 0 40px 80px 40px;
}

.hero-title {
  font-size: 4em;
  font-family: var(--font-logo);
  line-height: 1.1;
  margin-bottom: 10px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}
.hero-description {
  font-size: 1.2em;
  margin-bottom: 30px;
  max-width: 600px;
}

.hero-metadata {
  margin-top: 15px;
  color: #aaa;
  font-size: 0.9em;
}
.hero-metadata span { margin-right: 20px; }
.hero-metadata i { color: var(--color-primary); margin-right: 5px; }

.hero-play-button {
  padding: 12px 30px;
  border-radius: var(--border-radius);
  font-size: 1.2em;
  text-transform: uppercase;
  font-weight: 700;
  background-color: rgba(255,255,255,0.9);
  color: #0d0d0d;
  box-shadow: var(--shadow-soft);
  margin: 0;
  border: none;
  cursor: pointer;
  transition: transform 0.2s, background-color var(--transition-smooth);
}
.hero-play-button:hover { 
  background-color: #fff; 
  transform: scale(1.02); 
}
.hero-play-button:active { 
  transform: scale(0.98); 
}
.hero-play-button i.play-icon { 
  font-size: 1.5em; 
  color: var(--color-primary); 
  margin-right: 10px; 
}

/* Responsive Hero */
@media (max-width: 768px) {
  .hero-details { padding: 0 20px 30px 20px; }
  .hero-title { font-size: 3em; }
  .hero-description { font-size: 1em; }
  .hero-play-button { font-size: 1em; padding: 10px 20px; }
}

/* Film Grid amélioré */
.film-list-section { 
  padding:40px 40px;
  margin-top: -50px;
}
.film-list-section h3 {
  font-size:2.2em; 
  margin-bottom:20px; 
  border-left:4px solid var(--color-primary); 
  padding-left:15px;
  color: #f5f5f5;
  font-weight: 700;
}

.film-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); 
  gap:25px;
}
@media (max-width: 600px) {
  .film-list-section { padding: 30px; }
  .film-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 15px;
  }
}

.film-card {
  background-color: var(--color-card-bg);
  border-radius:var(--border-radius);
  overflow:hidden;
  cursor:pointer; 
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}
.film-card:hover { 
  transform: scale(1.03); 
  box-shadow: 0 15px 30px rgba(0,0,0,0.8); 
  z-index: 10;
}
.film-card:active {
  transform: scale(0.97);
}

/* Supprimer le soulignement de tous les liens dans les cartes de films */
.film-card,
.film-card * {
    text-decoration: none !important;
}

.film-card:hover,
.film-card:hover * {
    text-decoration: none !important;
}

.film-poster {
  position: relative;
  width:100%;
  padding-top:140%;
  overflow:hidden;
}

.film-poster img {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--transition-smooth);
}
.film-card:hover .film-poster img {
  transform: scale(1.05);
}

.film-info { padding:15px; }
.film-info h4 { font-size:1.2em; margin-bottom:5px; color:var(--color-text); font-weight: 700; }
.film-info p { font-size:0.9em; color:#aaa; }

/* === Overlay Play Icon - CORRECTION === */
.film-poster {
    position: relative;
    width: 100%;
    padding-top: 140%; /* Cette ligne est importante */
    overflow: hidden;
}

.film-poster .play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
}

.film-card:hover .play-overlay {
    opacity: 1;
}

.play-icon-lg {
    font-size: 3em;
    color: #e50914;
    text-shadow: 0 0 20px rgba(229, 9, 20, 0.8);
    transition: transform 0.3s ease;
}

.film-card:hover .play-icon-lg {
    transform: scale(1.2);
}

/* Sur mobile, toujours afficher l'overlay */
@media (max-width: 768px) {
    .film-poster .play-overlay {
        opacity: 1;
    }
}

/* === Statistiques Visiteurs === */
.visitor-stats-container {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.stat-item {
  text-align: center;
  padding: 15px;
  background: var(--color-card-bg);
  border-radius: 10px;
  min-width: 120px;
  border: 1px solid #333;
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.stat-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(229, 9, 20, 0.2);
}

.stat-number {
  font-size: 2em;
  font-weight: 900;
  color: var(--color-primary);
  font-family: var(--font-logo);
  text-shadow: 0 0 10px rgba(229, 9, 20, 0.3);
}

.stat-label {
  font-size: 0.8em;
  color: #aaa;
  margin-top: 5px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Responsive Stats */
@media (max-width: 768px) {
  .visitor-stats-container {
    gap: 15px;
  }
  .stat-item {
    min-width: 100px;
    padding: 10px;
  }
  .stat-number {
    font-size: 1.5em;
  }
}

/* Footer */
.footer {
  background-color:#000; padding:25px 40px; text-align:center; color:#777; font-size:0.9em; margin-top:50px;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.5);
}
.footer-content p { margin-bottom: 5px; }
.footer a { color: var(--color-primary); text-decoration:none; transition: color var(--transition-smooth); }
.footer a:hover { color: var(--color-hover); }

/* Modales améliorées */
.modal {
  display: none; 
  position: fixed; 
  z-index: 200; 
  left: 0; top: 0;
  width: 100%; height: 100%;
  overflow: auto; 
  background-color: rgba(0,0,0,0.95); 
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-smooth);
}
.modal.is-open {
  display: flex;
  opacity: 1;
}

.modal-content {
  background-color: var(--color-card-bg);
  padding: 20px;
  border-radius: var(--border-radius);
  position: relative;
  transform: scale(0.95);
  transition: transform var(--transition-smooth);
  width: 90%;
  max-width: 600px;
  box-shadow: 0 0 30px rgba(0,0,0,0.9);
}
.modal.is-open .modal-content {
  transform: scale(1);
}

.close-button {
  color: #fff;
  font-size:35px; font-weight:bold; cursor:pointer;
  position:absolute; top:15px; right:15px; transition:color var(--transition-smooth);
  z-index: 201;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.close-button:hover { color:var(--color-primary); }

/* Bouton CTA */
.cta-button {
  padding: 12px 30px;
  background-color: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--border-radius);
  font-size: 1.1em;
  font-weight: bold;
  cursor: pointer;
  margin-top: 15px;
  transition: background-color var(--transition-smooth), transform 0.2s;
}
.cta-button:hover {
  background-color: var(--color-hover);
  transform: translateY(-2px);
}

/* Style du mur AdBlock */
.modal-access-denied-content {
  max-width: 600px;
  padding: 30px;
  text-align: center;
  border: 3px solid var(--color-primary);
  box-shadow: 0 0 40px rgba(229, 9, 20, 0.7);
}

.adblock-title {
  color: var(--color-primary);
  font-size: 2.2em;
  margin-bottom: 15px;
  text-shadow: 0 0 5px rgba(229, 9, 20, 0.5);
}
.adblock-title i { margin-right: 10px; }

.adblock-text {
  font-size: 1.1em;
  margin-bottom: 25px;
}
.adblock-instruction {
  margin-top: 15px;
  color: #999;
}

/* Styles du Lecteur Vidéo amélioré */
.modal-video-content {
  padding: 0;
  max-width: 1000px;
  background: none;
}

.video-responsive-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--border-radius);
  box-shadow: 0 0 30px rgba(0,0,0,0.8);
}
.video-responsive-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none; /* J'ajoute ça pour enlever les bordures moches */
}


/* État de chargement vidéo */
.video-loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #333;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  z-index: 10;
  border-radius: var(--border-radius);
}

.video-loading i {
  font-size: 3em;
  margin-bottom: 15px;
  color: var(--color-primary);
}

.video-loading p {
  font-size: 1.1em;
}

/* Éléments Leurre AdBlock */
#data-check-box {
  width: 1px;
  height: 1px;
  position: absolute;
  left: -9999px;
  visibility: hidden;
  background: url('/ad-images/ad-banner.jpg');
  z-index: 9999;
}

/* Focus pour accessibilité */
button:focus,
a:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Animation de pulsation pour chargement */
@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

.loading-pulse {
  animation: pulse 1.5s ease-in-out infinite;
}

/* ======== Transition fluide entre le hero et le lecteur vidéo ======== */

.film-page-hero {
  position: relative;
  min-height: 70vh;
  background: 
    linear-gradient(to bottom, rgba(13,13,13,0) 60%, var(--color-background) 100%),
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.8)),
    url('../images/li mucucu 1.jpg') center center/cover no-repeat;
  background-blend-mode: overlay; /* BONUS activé : effet cinéma plus contrasté */
  display: flex;
  align-items: center;
  padding: 120px 40px 40px;
  overflow: hidden;
}

.film-page-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px;
  background: linear-gradient(to bottom, rgba(13,13,13,0) 0%, var(--color-background) 100%);
  z-index: 2;
}

.film-details-container {
  position: relative;
  z-index: 3; /* Pour passer au-dessus des couches de dégradé */
}

.video-section {
  background-color: var(--color-background);
  color: var(--color-text);
  position: relative;
  z-index: 3;
}
/* === Styles pour le logo dans le header === */
.header .logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.logo-image {
    height: 40px;
    width: auto;
    border-radius: 6px;
}

/* Responsive pour le logo */
@media (max-width: 768px) {
    .header .logo {
        gap: 8px;
    }
    .logo-image {
        height: 32px;
    }
}

@media (max-width: 480px) {
    .logo-image {
        height: 28px;
    }
}

/* === CORRECTIONS MOBILE - ESPACE === */
@media (max-width: 768px) {
  .main-content {
    padding-top: 60px;
  }
  
  .hero-section {
    min-height: 70vh;
  }
  
  .film-list-section {
    margin-top: 0px;
    padding: 40px;
  }
  
  .hero-details {
    padding-bottom: 30px;
  }
}

/* Correction encore plus forte pour très petits écrans */
@media (max-width: 480px) {
  .main-content {
    padding-top: 50px;
  }
  
  .hero-section {
    min-height: 60vh;
  }
  
  .film-list-section {
    margin-top: -40px;
    padding: 15px 15px 25px 15px;
  }
}
/* === CORRECTION TITRE FILMS EN VEDETTE === */
@media (max-width: 768px) {
  .film-list-section {
    margin-top: 0px !important; /* Remettre à 0 au lieu de négatif */
    padding-top: 40px !important; /* Ajouter du padding en haut */
  }
  
  .film-list-section h3 {
    margin-top: 20px !important; /* Espace au-dessus du titre */
    margin-bottom: 25px !important; /* Espace en-dessous du titre */
  }
}

/* Pour les très petits écrans */
@media (max-width: 480px) {
  .film-list-section {
    padding-top: 30px !important;
  }
  
  .film-list-section h3 {
    margin-top: 15px !important;
    margin-bottom: 20px !important;
  }
}
/* === CORRECTION PLUS FORTE POUR FILMS.HTML === */
@media (max-width: 768px) {
  /* Encore plus d'espace pour films.html */
  body .film-list-section {
    padding-top: 70px !important; /* Augmenté de 50 à 70px */
  }
  
  body .film-list-section h3 {
    margin-top: 30px !important; /* Augmenté de 25 à 30px */
    margin-bottom: 35px !important; /* Augmenté de 30 à 35px */
  }
}

/* Pour les très petits écrans */
@media (max-width: 480px) {
  body .film-list-section {
    padding-top: 60px !important; /* Augmenté sur mobile aussi */
  }
  
  body .film-list-section h3 {
    margin-top: 25px !important;
    margin-bottom: 30px !important;
  }
}
/* === CORRECTION GRILLE FILMS SUGGÉRÉS === */
@media (max-width: 768px) {
  /* Forcer 2 colonnes sur mobile pour les films suggérés */
  .suggested-films .film-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px !important;
  }
  
  .suggested-films .film-poster {
    padding-top: 140% !important; /* Même ratio que l'accueil */
  }
}

/* Pour les très petits écrans, garder 2 colonnes mais réduire l'écart */
@media (max-width: 480px) {
  .suggested-films .film-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  
  .suggested-films .film-info h4 {
    font-size: 1em !important;
  }
  
  .suggested-films .film-info p {
    font-size: 0.8em !important;
  }
}
/* === SÉLECTEUR DE LECTEUR === */
.player-selector {
    display: flex;
    gap: 15px;
    margin-bottom: 25px; /* Espace avant le lecteur */
    justify-content: center; /* Centrer les boutons sous la vidéo */
}

.player-button {
    background-color: var(--color-card-bg); /* Utilise la couleur de fond des cartes #1f1f1f */
    color: var(--color-text);
    border: 2px solid #333;
    padding: 12px 25px;
    border-radius: var(--border-radius); /* Bords arrondis de 8px */
    cursor: pointer;
    font-size: 1em;
    font-weight: 600;
    transition: all var(--transition-smooth);
    display: flex;
    align-items: center;
    gap: 8px;
}

.player-button:hover {
    background-color: #333;
    border-color: var(--color-primary); /* Bordure rouge au survol */
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft); /* Ombre douce au survol */
}

.player-button.active {
    background-color: var(--color-primary); /* Couleur principale rouge */
    color: var(--color-background); /* Texte sombre sur fond rouge */
    border-color: var(--color-primary);
    transform: none;
}

.player-button.active i {
    color: var(--color-background);
}

/* Responsive pour les petits écrans */
@media (max-width: 600px) {
    .player-selector {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 20px;
    }
    .player-button {
        width: 100%; /* Pleine largeur sur mobile */
        justify-content: center;
    }
}/* === SÉLECTEUR DE LECTEUR === */
.player-selector {
    display: flex;
    gap: 15px;
    margin-bottom: 25px; 
    justify-content: center;
    padding: 0 10px; /* Ajout d'un petit padding pour les bords sur mobile */
}

.player-button {
    background-color: var(--color-card-bg);
    color: var(--color-text);
    border: 2px solid #333;
    padding: 12px 25px;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 1em;
    font-weight: 600;
    transition: all var(--transition-smooth);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-grow: 1; /* Pour que les boutons prennent plus de place */
    max-width: 250px; /* Limite la taille des boutons sur grand écran */
    text-align: center;
    justify-content: center;
}

.player-button:hover {
    background-color: #333;
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
}

.player-button.active {
    background-color: var(--color-primary);
    color: var(--color-background);
    border-color: var(--color-primary);
    transform: none;
}

.player-button.active i {
    color: var(--color-background);
}

/* Responsive pour les petits écrans */
@media (max-width: 600px) {
    .player-selector {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 20px;
    }
    .player-button {
        width: 100%;
        max-width: none;
    }
}

/* === CORRECTION FINALE DE L'ANIMATION DE CHARGEMENT (SPÉCIFICITÉ FORCÉE) === */

/* Clé d'animation pour la rotation */
@keyframes fa-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(359deg);
    }
}

/* 1. Applique l'animation à la classe fa-spin avec un sélecteur plus spécifique */
/* On cible l'icône de chargement à l'intérieur de son conteneur */
#video-loading-player .fa-spin {
    /* Utilisation de !important pour garantir que l'animation n'est pas écrasée */
    -webkit-animation: fa-spin 2s infinite linear !important; 
    animation: fa-spin 2s infinite linear !important;
}

/* 2. Style de l'indicateur de chargement pour s'assurer qu'il est bien au-dessus */
#video-loading-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.9); /* Fond légèrement plus sombre */
    color: var(--color-primary);
    font-size: 2.5em; 
    z-index: 999; /* Assurez-vous qu'il est au-dessus de tout */
}

#video-loading-player p {
    font-size: 0.7em;
    color: var(--color-text);
    margin-top: 15px;
}
/* Correction overlay mobile */
@media (max-width: 768px) {
  .film-poster .play-overlay {
    opacity: 0.8 !important; /* Toujours visible sur mobile */
  }
  
  /* Meilleure taille de bouton */
  .player-button {
    padding: 15px 20px !important;
    font-size: 0.9em !important;
  }
}
/* Mode économie de données pour mobile */
@media (max-width: 768px) {
  .video-responsive-container {
    background: #000;
  }
  
  /* Réduire légèrement la qualité visuelle sur mobile */
  .film-poster-large img {
    filter: brightness(0.95);
  }
}

/* Indicateur de qualité */
.quality-selector {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    justify-content: center;
}

.quality-btn {
    padding: 8px 15px;
    background: #333;
    border: none;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}

.quality-btn.active {
    background: var(--color-primary);
}