@import url("https://fonts.googleapis.com/css2?family=Alegreya+SC:ital,wght@0,400;0,500;0,700;0,800;0,900;1,400;1,500;1,700;1,800;1,900&family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap");

:root {
  --nomad: #bcb4a3;
  --tan: #cba979;
  --copper: #b86830;
  --fuzzy: #c46e58;
  --limed: #6d745c;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  font-family: "Libre Baskerville", serif;
  letter-spacing: 0.1em;
}

nav {
  position: sticky;
  top: 0;
  width: 100%;
  background-color: white;
  z-index: 200;
}

.menu {
  display: flex;
  justify-content: center;
}

.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.menuItem {
  text-align: center;
  font-size: 0.9em;
  padding: 1.2vw 3vw;
}

.menuItem a {
  color: var(--limed);
  text-decoration: none;

  display: block;
}

.menuItem a:hover {
  color: #999e8d;
}

#logo {
  position: absolute;
  left: 0;
  font-family: "Cormorant Garamond", serif;
  text-transform: uppercase;
  font-size: 1.1em;
  font-weight: 600;
  color: var(--copper);
  margin: 0;
}

#logo a {
  color: var(--copper);
}

.title {
  position: fixed;
  text-align: center;
  margin-top: 25vh;
  width: 100%;
}

.title.hidden {
  opacity: 0;
  pointer-events: none;
}

.title h1 {
  font-family: "Cormorant Garamond", serif;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 6em;
  color: var(--tan);
  margin: 0;
}

.title h2 {
  font-family: "Alegreya SC", serif;
  font-weight: 400;
  letter-spacing: 0.3em;
  color: var(--fuzzy);
}

.banner {
  position: absolute;
  bottom: 0px;
  left: 0px;
  display: block;
  width: 100%;
  max-height: 100%;
  max-width: 100%;
}

h3 {
  font-family: "Alegreya SC", serif;
  font-weight: 400;
  letter-spacing: 0.3em;
  font-size: 2em;
  text-align: center;
  width: 100%;
  padding-bottom: 7vh;
  margin: 0;
}

h4 {
  font-family: "Alegreya SC", serif;
  font-weight: 400;
  letter-spacing: 0.3em;
  font-size: 1.5em;
  text-align: center;
  width: 100%;
  padding-bottom: 7vh;
  padding-top: 11vh;
  margin: 0;
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 150;
}

h5 {
  font-family: "Alegreya SC", serif;
  font-weight: 400;
  letter-spacing: 0.3em;
  font-size: 1.2em;
  text-align: center;
  width: 100%;
  padding-bottom: 7vh;
  margin: 0;
  color: var(--fuzzy);
}

.wedding {
  background-color: white;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  position: relative;
}

.church {
  background-color: var(--limed);
  margin: 0;
  padding: 7vh;
  min-height: 100vh;
  color: white;
  position: relative;
}

.castle {
  margin: 0;
  height: auto;
  padding: 7vh;
  color: var(--limed);
  position: relative;
}

.castle-content-container {
  padding: 7vh;
}

.castleImg img {
  max-width: 100%;
  height: auto;
}

.churchContent,
.castleContent,
.baliContent {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  text-align: center;
  height: auto;
  padding: 5vh 2vw;
}

.churchText,
.castleText,
.baliText {
  display: flex;
  flex: 0 0 33vw;
  flex-direction: column;
  align-items: center;
  z-index: 100;
}

.churchImg,
.castleImg,
.baliImg {
  flex: 0 0 33vw;
}

.churchDetails,
.castleDetails,
.leetchi {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  text-align: center;
  padding: 5vh 0;
}

.churchAdress,
.churchHour,
.castleAdress,
.castleHour {
  font-family: "Alegreya SC", serif;
  font-size: 1.5em;
}

.castleAdress a {
  text-decoration: none;
  color: var(--limed);
}

.castleAdress a:hover {
  color: #999e8d;
}

.churchAdress::before {
  content: "";
  display: block;
  margin: 1em auto;
  width: 90px;
  height: 1px;
  background: white;
}

.castleAdress::before {
  content: "";
  display: block;
  margin: 1em auto;
  width: 90px;
  height: 1px;
  background: var(--limed);
}

.churchImg img {
  max-width: 80%;
  height: auto;
}

.bali {
  background-color: var(--copper);
  margin: 0;
  min-height: 100vh;
  padding: 7vh 0vw;
  color: white;
  position: relative;
}

.baliImg img {
  max-width: 100%;
  height: auto;
}

#plane {
  background-image: url("../assets/avion.png");
  background-size: contain;
  background-repeat: no-repeat;
  width: 100px;
  height: 150px;
  /* position: absolute; */
  /* animation: move 5s linear forwards; */
  opacity: 0;
}

#plane.animate {
  animation: move 8s linear forwards;
  opacity: 1; /* L'avion devient visible */
}

#buttonLeetchi {
  background-color: var(--tan);
  color: white;
  font-family: "Alegreya SC", serif;
  font-size: 1.5em;
  padding: 1vh 2vw;
  border-radius: 5px;
  text-decoration: none;
  text-align: center;
}

#end {
  margin: 0;
  padding: 7vh;
  color: white;
  position: absolute;
  bottom: 0;
}

@keyframes move {
  0% {
    transform: translate(0vw, 0vh);
  }
  25% {
    transform: translate(12vw, 1vh);
  }
  50% {
    transform: translate(26vw, -1vh);
  }
  75% {
    transform: translate(38vw, 1vh);
  }
  100% {
    transform: translate(50vw, -50px);
  }
}

/* Media query pour les écrans de largeur inférieure à 768px */
@media (max-width: 768px) {
  .menu {
    justify-content: end;
    flex-wrap: wrap; /* Permettre le passage à la ligne des éléments du menu */
  }

  #logo {
    position: relative;
  }

  .title h1 {
    font-size: 4em; /* Réduisez la taille de la police pour les petits écrans */
  }

  h3 {
    padding-bottom: 5vh;
    padding-top: 2vh;
  }

  h4 {
    padding-bottom: 5vh;
    padding-top: 10vh;
  }

  h5 {
    padding-bottom: 2vh;
    padding-top: 3vh;
  }

  .wedding {
    padding: 2vh 2vw;
  }

  .church,
  .castle {
    height: auto; /* Permettez aux sections de s'adapter à leur contenu */
    padding: 3vh 5vw;
  }

  .castle-content-container {
    padding: 2vw; /* Ajustez le padding interne */
  }

  .churchImg {
    display: none;
  }

  .churchContent,
  .castleContent,
  .baliContent {
    display: flex;
    flex-direction: column; /* Empilez les éléments de la section église */
    align-items: center;
    padding: 2vh 2vw; /* Ajoutez un espacement entre les éléments */
  }

  .castleImg {
    order: 1; /* Placez les images en premier */
    flex: 1 1 auto; /* Permettez aux éléments de s'adapter à l'espace disponible */
    width: 100%; /* Prenez toute la largeur */
    margin-bottom: 2vh; /* Ajoutez un espacement entre les éléments */
  }

  .castleText {
    order: 2; /* Placez les images en premier */
    flex: 1 1 auto; /* Permettez aux éléments de s'adapter à l'espace disponible */
    width: 100%; /* Prenez toute la largeur */
    margin-bottom: 4vh; /* Ajoutez un espacement entre les éléments */
  }

  .castleImg img {
    max-width: 90%; /* Réduisez la taille des images */
    height: auto;
  }

  .music {
    display: none;
  }

  .bali {
    padding: 3vh 5vw;
    min-height: auto; /* Permettez à la hauteur de s'adapter au contenu */
    height: auto; /* Supprimez toute hauteur fixe */
    box-sizing: border-box; /* Incluez le padding dans la hauteur */
    position: relative; /* Gardez cette position pour contenir les éléments relatifs */
  }

  #plane {
    position: relative;
  }

  .baliContent {
    display: flex;
    flex-direction: column; /* Empilez les éléments verticalement */
    align-items: center;
    justify-content: flex-start; /* Alignez les éléments en haut */
    width: 100%;
    height: auto; /* Permettez à la hauteur de s'adapter au contenu */
    overflow: hidden; /* Assurez-vous qu'il n'y a pas de débordement */
  }

  .baliImg {
    padding: 3vh 0;
  }

  #end {
    position: relative; /* Assurez-vous qu'il reste dans le flux normal */
    margin: 0;
    padding: 7vh;
    color: white;
    width: 100%; /* Prenez toute la largeur */
  }

  iframe {
    width: 100%; /* Adaptez les iframes à la largeur de l'écran */
    height: auto;
  }
}

/* Media query pour les écrans de largeur inférieure à 480px */
@media (max-width: 480px) {
  .title h1 {
    font-size: 3em; /* Réduisez la taille de la police pour les petits écrans */
  }

  .title h2 {
    font-size: 1.3em; /* Réduisez la taille de la police pour les petits écrans */
  }
  .castleDetails {
    font-size: 0.8em;
    padding-bottom: 0;
  }
}

/* Media query pour les écrans de largeur inférieure à 1200px */
@media (max-width: 1199px) {
  .menu {
    justify-content: end;
    flex-wrap: wrap; /* Permettre le passage à la ligne des éléments du menu */
  }

  h3 {
    padding-bottom: 5vh;
    padding-top: 2vh;
  }

  h4 {
    padding-bottom: 5vh;
    padding-top: 10vh;
  }

  h5 {
    padding-bottom: 2vh;
    padding-top: 3vh;
  }

  .wedding {
    padding: 2vh 2vw;
  }

  .church,
  .castle {
    height: auto; /* Permettez aux sections de s'adapter à leur contenu */
    padding: 3vh 5vw;
  }

  .castle-content-container {
    padding: 2vw; /* Ajustez le padding interne */
  }

  .churchImg {
    display: none;
  }

  .churchContent,
  .castleContent,
  .baliContent {
    display: flex;
    flex-direction: column; /* Empilez les éléments de la section église */
    align-items: center;
    padding: 2vh 2vw; /* Ajoutez un espacement entre les éléments */
  }

  .castleImg {
    order: 1; /* Placez les images en premier */
    flex: 1 1 auto; /* Permettez aux éléments de s'adapter à l'espace disponible */
    width: 100%; /* Prenez toute la largeur */
    margin-bottom: 2vh; /* Ajoutez un espacement entre les éléments */
  }

  .castleText {
    order: 2; /* Placez les images en premier */
    flex: 1 1 auto; /* Permettez aux éléments de s'adapter à l'espace disponible */
    width: 100%; /* Prenez toute la largeur */
    margin-bottom: 4vh;
  }

  .castleDetails {
    padding-bottom: 0;
  }

  .castleImg img {
    max-width: 90%; /* Réduisez la taille des images */
    height: auto;
  }

  .music {
    display: none;
  }

  .bali {
    padding: 3vh 5vw;
    min-height: auto; /* Permettez à la hauteur de s'adapter au contenu */
    height: auto; /* Supprimez toute hauteur fixe */
    box-sizing: border-box; /* Incluez le padding dans la hauteur */
    position: relative; /* Gardez cette position pour contenir les éléments relatifs */
  }

  #plane {
    position: relative;
  }

  .baliContent {
    display: flex;
    flex-direction: column; /* Empilez les éléments verticalement */
    align-items: center;
    justify-content: flex-start; /* Alignez les éléments en haut */
    width: 100%;
    height: auto; /* Permettez à la hauteur de s'adapter au contenu */
    overflow: hidden; /* Assurez-vous qu'il n'y a pas de débordement */
  }

  .baliImg {
    padding: 3vh 0;
  }

  #end {
    position: relative; /* Assurez-vous qu'il reste dans le flux normal */
    margin: 0;
    padding: 7vh;
    color: white;
    width: 100%; /* Prenez toute la largeur */
  }

  iframe {
    width: 80%; /* Adaptez les iframes à la largeur de l'écran */
  }
}