/* Styles de base pour le corps de la page */
body {
  font-family: "Inter", sans-serif; /* Police moderne */
  background-color: white; /* Fond blanc comme demandé */
  overflow: hidden; /* Empêche le défilement indésirable */
  display: flex; /* Utilise flexbox pour le centrage */
  justify-content: center; /* Centre horizontalement */
  align-items: center; /* Centre verticalement */
  min-height: 100vh; /* Prend toute la hauteur de la fenêtre */
}

/* Conteneur de la vidéo pour gérer la taille et le ratio */
.video-container {
  position: relative;
  width: 90vw; /* Largeur fluide par rapport à la vue */
  max-width: 800px; /* Largeur maximale pour les grands écrans */
  aspect-ratio: 16 / 9; /* Maintient un ratio 16:9 pour la vidéo */
  background-color: #000; /* Fond noir derrière la vidéo */
  border-radius: 1rem; /* Bords arrondis pour l'esthétique */
  overflow: hidden; /* Cache tout débordement de la vidéo */
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); /* Ombre douce pour un effet de profondeur */
}

/* Style de l'élément vidéo lui-même */
video {
  width: 100%; /* Remplir la largeur du conteneur */
  height: 100%;
  object-fit: cover; /* Assure que la vidéo couvre le conteneur sans déformation */
  display: block; /* Supprime l'espace supplémentaire sous la vidéo */
}

/* Barre latérale pour les icônes temporaires (son, rotation) */
.icon-sidebar {
  position: fixed; /* Position fixe par rapport à la fenêtre */
  right: 30px; /* Marge fixe de 30px depuis le bord droit */
  top: 50%; /* Positionne le haut au milieu de la fenêtre */
  transform: translateY(
    -50%
  ); /* Ajuste pour centrer parfaitement verticalement */
  display: flex; /* Utilise flexbox pour aligner les icônes verticalement */
  flex-direction: column; /* Disposition verticale */
  gap: 1rem; /* Espacement entre les icônes */
  z-index: 9998; /* Z-index élevé, mais inférieur au bouton Entrez si superposé */
}

/* Style générique pour chaque élément d'icône (son, rotation) */
.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.9); /* Fond semi-transparent */
  padding: 0.5rem; /* Espacement interne */
  border-radius: 0.5rem; /* Bords arrondis */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* Ombre légère */
  transition: opacity 0.5s ease-in-out, transform 0.2s ease-in-out; /* Transitions pour l'apparition/disparition et le survol */
  text-align: center;
  color: #333;
  font-size: 0.75rem;
  width: 80px; /* Largeur fixe pour les icônes */
  height: 80px; /* Hauteur fixe pour les icônes */
  cursor: pointer; /* Indique que l'élément est cliquable */
}

.icon-item:hover {
  transform: scale(1.1); /* Agrandit légèrement au survol */
  background-color: rgba(
    255,
    255,
    255,
    0.95
  ); /* Légèrement plus opaque au survol */
}

/* Style pour les images à l'intérieur des éléments d'icône */
.icon-item img {
  width: 100%; /* L'image remplit l'élément parent */
  height: 100%;
  object-fit: contain; /* L'image s'adapte sans être coupée */
  filter: contrast(1.2); /* Améliore le contraste de l'image */
}

/* Classe pour masquer les éléments */
.icon-item.hidden {
  opacity: 0; /* Rend l'élément complètement transparent */
  pointer-events: none; /* Désactive les interactions de la souris */
}

/* Classe pour l'animation de fondu */
.fade-out {
  opacity: 0;
  transition: opacity 1s ease-out; /* Transition de fondu douce */
}

/* Style du bouton "Entrez" - Maintenant positionné indépendamment */
.enter-button {
  position: absolute; /* Positionnement absolu pour un contrôle précis */
  right: 30px; /* Marge fixe de 30px depuis le bord droit */
  /* Calcul pour positionner le bouton à la place de l'icône de rotation */
  top: calc(
    50% + 40px + 1rem
  ); /* Ajusté pour être sous l'icône de son, mais toujours visible */
  transform: translateY(-50%); /* Ajuste le centrage vertical */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(
    255,
    255,
    255,
    0.9
  ); /* Fond semi-transparent comme les autres icônes */
  padding: 0.5rem; /* Espacement interne comme les autres icônes */
  border-radius: 0.5rem; /* Bords arrondis comme les autres icônes */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* Ombre légère comme les autres icônes */
  transition: opacity 0.5s ease-in-out, transform 0.2s ease-in-out; /* Transitions pour l'apparition/disparition et le survol */
  text-align: center;
  color: #333;
  font-size: 0.75rem;
  width: 80px; /* Largeur du bouton */
  height: 80px; /* Hauteur du bouton */
  cursor: pointer; /* Indique que l'élément est cliquable */
  opacity: 0; /* Initialement invisible */
  pointer-events: none; /* Désactive les interactions de la souris quand invisible */
  z-index: 10000; /* Z-index très élevé pour être toujours au-dessus de la vidéo */
}

.enter-button img {
  width: 100%; /* L'image remplit le bouton */
  height: 100%;
  object-fit: contain; /* L'image s'adapte sans être coupée */
  filter: contrast(
    1.2
  ); /* Améliore le contraste de l'image comme les autres icônes */
  transition: transform 0.2s ease-in-out; /* Transition pour l'effet de survol */
}

.enter-button:hover {
  transform: scale(
    1.1
  ); /* Agrandit légèrement au survol comme les autres icônes */
  background-color: rgba(
    255,
    255,
    255,
    0.95
  ); /* Légèrement plus opaque au survol comme les autres icônes */
}

.enter-button:hover img {
  transform: scale(
    1.05
  ); /* L'image à l'intérieur s'agrandit aussi comme les autres icônes */
}

/* Classe pour rendre le bouton visible */
.enter-button.visible {
  opacity: 1; /* Rend l'élément complètement opaque */
  pointer-events: auto; /* Active les interactions de la souris */
}

/* Media queries pour la responsivité sur les petits écrans (mobiles) */
@media (max-width: 768px) {
  .video-container {
    width: 95vw; /* Plus large sur mobile */
    max-width: none; /* Pas de largeur maximale sur mobile */
  }
  .icon-sidebar {
    right: 15px; /* Marge fixe de 15px sur mobile (ajustée) */
    gap: 0.75rem; /* Espacement réduit */
  }
  .icon-item {
    padding: 0.4rem;
    width: 60px; /* Taille des icônes réduite sur mobile */
    height: 60px;
  }
  .icon-item img {
    width: 100%; /* L'image remplit l'élément parent sur mobile */
    height: 100%;
  }
  .enter-button {
    right: 15px; /* Marge fixe de 15px sur mobile */
    top: calc(50% + 30px + 0.75rem); /* Ajusté pour mobile */
    width: 60px; /* Taille du bouton "Entrez" réduite sur mobile */
    height: 60px;
  }
}