body {
    /* Background */
    background-image: url("./assets/images/space.jpg");
    background-position: center;
    background-position: top;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    /* couleurs */
    color: #ffc107;
    background-color: black;
  }
table{
  text-align: center;
  margin: 0 auto;
  /* couleurs */
  background-color: #000000c7;
  color: rgb(240, 173, 78);
  border-color: rgb(240, 173, 78);
}
#tableau { /* @TODO : pourquoi on a ça pour un tableau ? + Mauvais nom */
  vertical-align: center;
}

.titre{
  /* font */
  text-align: center;
  font-size: 70px;
  font-family: Roboto,Helvetica,Arial,sans-serif;
  font-weight: 900;
  /* couleurs */
  color: #ffc107;
}
a:visited{
  color: rgb(240, 173, 78);
}


#titre{ /* @TODO : pourquoi on a ça ? + Mauvais nom */
    text-align: center;
}

h2, p, ul{
  margin-left: 30%;
  position: relative; /* Pour pouvoir positionner l'arrière-plan */
  display: inline-block; /* Pour que le fond ne s'étende que sur le texte */
  padding: 5px 10px; /* Espacement interne pour rendre le texte lisible */
  border-radius: 5px; /* Optionnel : arrondir les coins du fond */
  /* Couleurs */
  background-color: #000000c7; /* Couleur de fond semi-opaque */
}

.historique-explication-choix-film {
  display: block;
  width: 40%;
  box-sizing: border-box;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.footer_div {
  text-align: center;
}

.footer_text{
  background-color: #000000c7;
}

ul {
  padding-left: 20px;
}

.explication {
  width: 40%;
}

.main-zone{
  margin-left: 30%;
}


.texte-historique {
  display: inline-block;
  margin-left: 30%;
  /* couleurs */
  background-color: #000000c7;
}

.texte-film-victorieux {
  background-color: #000000c7;
}

.film-victorieux {
  background-color: #906a039c;
}

button {
  display: inline-block;
  margin-right: 10px; /* Ajoute de l'espace entre les boutons si nécessaire */
}

.form-noter-tous-films {
  text-align: center;
}

/****************************************************************************************
 * Styles pour la barre de navigation et le formulaire de connexion
 ****************************************************************************************/

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%; /* Pour s'étendre sur toute la largeur de la page */
  padding: 10px; /* Espacement interne pour un peu d'air autour des boutons */
  z-index: 1000; /* Pour que la zone reste au-dessus des autres éléments */
  display: flex; /* Pour aligner les boutons horizontalement */
  justify-content: center; /* Centre les boutons de navigation */
  align-items: center; /* Aligne verticalement les éléments */
  /* Couleurs */
  background-color: #000; /* Couleur de fond pour rendre la zone visible */
}

.centered-buttons {
  margin: 0 auto; /* Centre les boutons horizontalement */
  display: flex;
  gap: 10px; /* Espace entre les boutons */
}

/* Formulaire de connexion */

.login-form {
  position: absolute;
  right: 10px; /* Positionne le formulaire sur la droite */
  top: 10px; /* Centre verticalement le formulaire */
}

.form-group {
  display: flex;
  align-items: center; /* Aligne les éléments verticalement au centre */
  gap: 20px; /* Espace entre les champs et le bouton */
}

.fields {
  display: flex;
  flex-direction: column; /* Empile les champs de formulaire verticalement */
  gap: 5px; /* Espace entre chaque champ */
}

.field-group {
  display: flex;
  align-items: center; /* Aligne le label et le champ horizontalement */
  gap: 10px; /* Espace entre le label et le champ */
}

.login-btn {
  align-self: flex-start; /* Place le bouton sur la droite de la colonne */
}

.main-content {
  margin-top: 80px; /* Ajuste cette valeur selon la hauteur du bandeau */
}

/* Pour les écrans inférieurs à une largeur standard de 1280px */
@media (max-width: 1280px) { /* Ajuste la largeur selon le besoin */
  .fixed-header {
      flex-direction: column; /* Change la direction pour empiler les éléments verticalement */
      align-items: flex-start; /* Aligne les éléments à gauche */
  }

  .centered-buttons {
      justify-content: flex-start; /* Aligne les boutons à gauche */
      margin-bottom: 10px; /* Ajoute un espace en dessous des boutons */
  }

  .login-form {
      position: static; /* Annule le positionnement absolu */
      margin-left: 0; /* Supprime la marge de droite */
  }

  /* hack to move down the title below 1280px */
  /* use flex instead for global positioning */
  .titre {
    margin-top: 7rem;
  }
}






/**********************************************
  *                 Boutons                   *
  *********************************************/

.btn, .menu-button {
  /* Couleurs */
  background-color: #d0880d00;
  border-color: rgb(240, 173, 78);
  color: rgb(240, 173, 78);

  /* Font */
  font-family: inherit;
  font-size: large;

  /* Padding et marges */
  padding-top: 7px;
  padding-bottom: 7px;
  padding-left: 20px;
  padding-right: 20px;
  /* margin-left: 30%;
  margin-top: 8%; */

  /* Positionnement */
  display: inline-block;
}

/* Effet hover pour les boutons */
.btn:hover, .menu-button:hover, .submenu a:hover {
  background-color: rgb(240, 173, 78);
  color: white;
}



/* Style de la barre de navigation */
.menu {
  display: flex;
}

.menu, .submenu {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Style du bouton principal */
.menu-button {
  text-decoration: none;
  cursor: pointer;
  text-align: center;

  white-space: nowrap; /* Empêche le texte de passer à la ligne */
  width: auto; /* Ajuste automatiquement la largeur en fonction du texte */

  margin-right: 20px;
}




/* Conteneur du menu déroulant */
.has-submenu {
  position: relative;
}

/* Correction pour coller le menu juste sous le bouton */
.submenu {
  display: none;
  position: absolute;
  top: 100%; /* Colle le sous-menu juste sous le bouton */
  right: 20px; /* Aligne le bord droit du menu avec le bouton qui a une margin de 10px à droite */

  /* couleurs */
  background-color: black;
  border: 1px solid rgb(240, 173, 78);

  white-space: nowrap;
  width: auto;
  border-radius: 0; /* Supprime tout arrondi */
}

/* Style des liens du sous-menu */
.submenu li {
  border-bottom: 1px solid rgb(240, 173, 78);
}
.submenu li:last-child {
  border-bottom: none;
}

.submenu a {
  display: block;
  padding: 10px;
  color: rgb(240, 173, 78);;
  text-decoration: none;
}

/* Affichage du menu au survol */
.has-submenu:hover .submenu {
  display: block;
}

/**********************************************
*                 page about                  *
**********************************************/

/* hack to reset inline block on ul and h2, but keep the background only on text */
.github-repositories ul, .github-repositories h2 {
  display: table;
}

.release-videos {
  display: flex;
  flex-direction: column;
  align-items: center; /* horizontal center */
}

.release-videos iframe {
  margin-bottom: 4rem;
  width: 40rem;
  height: 22rem;
  border-radius: 8px;
}