avocate/styles.css

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

html,
body {
  width: 100%;
  height: 100%;
  color: black;
  background-color: #FFEDE5;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  overflow-x: hidden;
  /* Empêche le scroll horizontal */
}

/*.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #d4af37; 
  height: 4rem;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Ombre portée pour donner de la profondeur 
}

nav a {
  display: inline-block;
  color: white; /* Couleur du texte 
  padding: 18px 12px;
  text-decoration: none;
  transition: ease-in .3s;
}

nav a:hover {
  color: #d4af37; /* Couleur dorée au survol 
  background-color: white; /* Fond blanc au survol 
}*/

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: white;
  height: 4rem;
  z-index: 1000;
  overflow: hidden; /* Pour s'assurer que le pseudo-élément reste à l'intérieur */
}

nav {
  float: right;
  background-color: transparent;
  height: 100%;
}

nav a {
  display: inline-block;
  color: rgb(227, 195, 14);
  padding: 18px 12px;
  text-decoration: none;
  transition: ease-in .3s;
  font-size: 2rem; /* Augmente la taille de la police */
  /*font-family: Arial, Helvetica, sans-serif;  Utilise Arial comme police principale */
  font-family: 'Times New Roman', Times, serif; /* Utilise Times New Roman comme police principale */

}

nav a:hover {
  color: black;
  cursor: pointer;
}

.wrapper {
  padding-top: 12rem;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 300px;
  width: 100vw;
  /* Force la largeur du viewport */
  overflow-x: hidden;
}

.parallax__group {
  position: relative;
  height: 100vh;
  width: 100vw;
  transform-style: preserve-3d;
}

.parallax__layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.sky {
  background-color: white;
  background: url('fond.png') no-repeat;
  background-size: contain;
  transform: translateZ(-600px) scale(3);
  z-index: 1;
}

.bushes {
  background: url('etoiles.png') no-repeat;
  background-size: contain;
  transform: translateZ(-525px) scale(2.75);
  z-index: 2;
}

.water {
  background: url('texte.png') no-repeat;
  background-size: contain;
  transform: translateZ(-400px) scale(2.33333333);
  z-index: 3;
}

.people1 {
  background: url("personnages.png") no-repeat;
  background-size: contain;
  transform: translateZ(-250px) scale(1.833333333);
  z-index: 4;
}

.info-container {
  background-color: #FFEDE5;
}

/* Style du menu hamburger */
.menu-icon {
  display: none;
  /* Caché par défaut */
  flex-direction: column;
  cursor: pointer;
  position: absolute;
  right: 1rem;
  top: 1rem;
  z-index: 1001;
}

.menu-icon span {
  background: rgb(227, 195, 14);
  display: block;
  height: 3px;
  width: 25px;
  margin: 5px 0;
  transition: 0.3s;
}

/* Masquer la case à cocher */
#menu-toggle {
  display: none;
}

.info-container {
  display: flex; /* Utilise flexbox pour aligner le contenu */
  align-items: center; /* Centre verticalement le contenu */
  padding: 2rem; /* Espace autour du contenu */
  background-color: rgba(255, 237, 229, 0.8); /* Fond légèrement coloré */
}

.about-content {
  display: flex; /* Utilise flexbox pour le contenu de l'à propos */
  width: 100%; /* Prend toute la largeur */
  max-width: 1200px; /* Limite la largeur maximale */
  margin: 0 auto; /* Centre le contenu */
}

.about-image {
  flex: 1; /* Prend un espace flexible */
  text-align: center; /* Centre l'image horizontalement */
  padding-right: 1rem; /* Espace entre l'image et le texte */
}

.about-image img {
  width: 80%; /* Ajuste la taille de l'image */
  max-width: 300px; /* Largeur maximale pour l'image */
  border-radius: 15px; /* Bords arrondis */
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.7); /* Halo lumineux */
}

.about-text {
  flex: 2; /* Prend un espace flexible */
  color: black; /* Couleur du texte */
}

.about-text h2 {
  font-size: 2rem; /* Taille de la police pour le titre */
  margin-bottom: 1rem; /* Espace sous le titre */
}

.about-text p {
  font-size: 1rem; /* Taille de la police pour le texte */
}

@media screen and (min-width:761px) {
  .sky,
  .bushes,
  .water,
  .people1 {
    background-size: contain;
    /* Remplit toute la largeur */
    /*background-position: center; Centre les images */
  }
}

@media screen and (max-width: 760px) {
  .menu-icon {
    display: flex;
  }

  nav {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 4rem;
    left: 0;
    width: 100%;
    background: white;
    text-align: center;
  }

  /* Quand la case est cochée, afficher le menu */
  #menu-toggle:checked+.menu-icon+nav {
    display: flex;
  }

  nav a {
    padding: 15px;
    display: block;
  }
}