/* Déclaration de la police personnalisée */
@font-face {
  font-family: "WNpolice";
  src: url("../fonts/protest/ProtestDemo.otf") format("opentype");
}

/* Styles globaux */
body {
  background-image: url("../img/Background_WN.png"); /* Image d'arrière-plan */
  background-size: 140%; /* Agrandit l'image d'arrière-plan */
  background-position: center; /* Centre l'image d'arrière-plan */
  background-attachment: fixed; /* L'image reste fixe lors du défilement */
  color: #f3f3d1; /* Couleur principale du texte */
  margin: 0; /* Supprime les marges */
  padding: 0; /* Supprime les espacements internes */
}

/* Header */
header {
  background-color: rgba(0, 0, 0, 0.5); /* Fond semi-transparent noir */
  width: 100%; /* Prend toute la largeur */
  height: 10vh; /* Hauteur fixe pour le header */
  display: flex; /* Utilise Flexbox */
  align-items: center; /* Centre verticalement les éléments */
  justify-content: space-between; /* Espace entre le logo, le titre et la navigation */
  position: fixed; /* Fixe le header en haut */
  top: 0;
  left: 0;
  padding: 10px 20px; /* Ajoute de l'espace autour des éléments */
  z-index: 1000;
}

.logo-title {
  display: flex; /* Aligne le logo et le titre horizontalement */
  align-items: center; /* Centre verticalement */
  gap: 15px; /* Ajoute un espace entre le logo et le titre */
}

.logo {
  margin-top: 55px;
  max-height: 16vh; /* Taille maximale du logo */
  height: auto; /* Maintient le ratio d'aspect */
  width: auto; /* Ajuste automatiquement la largeur */
}

header h1 {
  font-family: "WNpolice", "Courier New", Courier, monospace; /* Police personnalisée */
  margin: 0; /* Supprime les marges */
  font-size: 2vw; /* Taille de police relative à la largeur de la fenêtre */
  color: #f3f3d1; /* Couleur du texte */
  text-align: left; /* Aligne le texte à gauche */
}

header nav {
  display: flex; /* Utilise Flexbox pour la navigation */
  gap: 1.5vw; /* Ajoute un espace entre les liens */
  margin-right: 35px; /* Ajoute un espace à droite */
}

nav ul {
  list-style: none; /* Supprime les puces des listes */
  display: flex; /* Aligne les éléments horizontalement */
  gap: 1.5vw; /* Ajoute un espace entre les éléments */
  margin: 0;
  padding: 0;
}

nav ul li a {
  text-decoration: none; /* Supprime le soulignement des liens */
  font-size: 1.1vw; /* Taille de police relative */
  color: #f3f3d1; /* Couleur des liens */
  transition: color 0.3s ease; /* Transition fluide pour les changements de couleur */
}

nav ul li a.active {
  font-weight: bold;
  color: #f3f3d1;
  text-decoration: underline;
}
main {
  height: 80vh;
}

/* Section principale pour la vidéo */
.video-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: 10vh; /* correspond au header */
  margin-bottom: 10vh; /* correspond au footer */
  height: 80vh;
  padding: 0 2vw;
}

.video-container h2 {
  margin-bottom: 20px; /* Espace entre le titre et la vidéo */
  font-size: 1.5vw; /* Taille du texte */
  color: #f3f3d1; /* Couleur blanche */
}

.video-container iframe {
  width: 56%;
  aspect-ratio: 16 / 9;
  height: 77%;
  max-height: 100%;
  border-radius: 15px;
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.3);
}

/* Footer */
footer {
  background-color: rgba(0, 0, 0, 0.8); /* Fond légèrement plus sombre */
  color: #f3f3d1; /* Couleur du texte */
  text-align: center; /* Centre le texte */
  padding: 0; /* Ajoute de l'espace en haut et en bas */
  width: 100%; /* Prend toute la largeur */
  height: 10vh; /* Hauteur fixe pour le footer */
  display: flex; /* Utilise Flexbox */
  align-items: center; /* Centre verticalement */
  justify-content: space-between; /* Espace entre les éléments */
  position: fixed; /* Fixe le footer en bas */
  bottom: 0;
  left: 0;
  z-index: 1000;
}

footer p {
  margin: 0 15px 10px; /* Espace entre le texte et les icônes */
  font-size: 1vw; /* Taille du texte */
}

footer ul.social-links {
  margin-right: 15px;
}

footer .social-links {
  list-style: none; /* Supprime les puces */
  display: flex; /* Aligne les icônes horizontalement */
  justify-content: center; /* Centre les icônes */
  gap: 25px; /* Espace entre les icônes */
  padding: 0;
  margin: 0;
}

footer .social-links li {
  display: inline-block; /* Affiche les icônes en ligne */
}

footer .social-links li a img {
  width: 40px; /* Taille des icônes */
  height: 40px; /* Taille des icônes */
  transition: transform 0.3s ease; /* Animation au survol */
}

footer .social-links li a img:hover {
  transform: scale(1.2); /* Agrandit légèrement l'icône au survol */
}

/* Media Queries pour rendre le design responsive */
@media (max-width: 768px) {
  .logo {
    max-height: 6vh; /* Réduit la taille du logo sur les écrans plus petits */
  }

  .video-container iframe {
    height: 300px; /* Réduit la hauteur de la vidéo sur les petits écrans */
  }
}

@media (max-width: 480px) {
  .logo {
    max-height: 5vh; /* Réduit encore plus la taille du logo */
  }

  footer p {
    font-size: 0.8vw; /* Réduit la taille du texte dans le footer */
  }
}