/* Couleurs */

/* Couleur de fond sombre pour renforcer l'ambiance de science-fiction */
body {
  background-color: #1e1e1e;
  color: #ffffff;
}

/* Couleur de fond pour les conteneurs */
.container {
  background-color: #2b2b2b;
}

/* Couleur de fond pour les boutons */
.button {
  background-color: #4aff7d;
  color: #ffffff;
}

/* Couleur de fond pour les menus déroulants */
.dropdown {
  background-color: #2b2b2b;
}


/* Polices de caractères */

/* Polices modernes et épurées pour les en-têtes */
h1,
h2,
h3 {
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
}

/* Police de caractères pour le corps de texte */
p {
  font-family: "Roboto", sans-serif;
  font-size: 1.2rem;
  line-height: 1.5;
}

/* Taille de police de caractères pour les titres de section */
.section h2 {
  font-size: 3rem;
}

/* Images */

/* Mise en forme des images */
img {
  max-width: 100%;
  height: auto;
}

/* Icônes et boutons */

/* Style des boutons */
.button {
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

/* Style des boutons survolés */
.button:hover {
  background-color: #059a27;
}

/* Navigation */

/* Style de la barre de navigation */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

/* Style des éléments de la barre de navigation */
.navbar ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar ul li {
  margin: 0 20px;
}

/* Style des liens de la barre de navigation */
.navbar ul li a {
  text-decoration: none;
  color: #ffffff;
  transition: all 0.2s ease-in-out;
}

/* Style des liens survolés de la barre de navigation */
.navbar ul li a:hover {
  color: #4aff71;
}

/* Style des menus déroulants */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown-content a {
  color: #ffffff;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  transition: all 0.2s ease-in-out;
}

.dropdown-content a:hover {
  background-color: #4aff59;
  color: #ffffff;
}

/* Mise en page */

/* Marge pour la page */
body {
  margin: 0;
}

/* Largeur maximale pour les conteneurs */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* Marge entre les sections */
.section {
  padding: 50px 0;
  text-align: center;
}

/* Style pour les sections avec image en fond */
.section-image {
  background-size: cover;
  background-position: center center;
  padding: 100px 0;
  position: relative;
}

/* Style pour le contenu des sections avec image en fond */
.section-image-content {
  position: relative;
  z-index: 1;
}

/* Style pour le fond dégradé des sections avec image en fond */
.section-image:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.5) 50%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* Style pour le texte sur les sections avec image en fond */
.section-image h2 {
  font-size: 3rem;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.section-image p {
  font-size: 1.2rem;
  line-height: 1.5;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Style pour le bouton sur les sections avec image en fond */
.section-image .button {
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  display: inline-block;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.section-image .button:hover {
  background-color: #1cff46;
}

/* Style pour les éléments centrés */
.centered {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* Style pour le texte centré */
.text-center {
  text-align: center;
}

/* Style pour les marges nulles */
.no-margin {
  margin: 0;
}

/* Style pour les marges supérieures nulles */
.no-margin-top {
  margin-top: 0;
}

/* Style pour les marges inférieures nulles */
.no-margin-bottom {
  margin-bottom: 0;
}