.moto-presentation {

  display: flex;

  flex-direction: column; /* Les éléments seront empilés verticalement */

  justify-content: flex-start; /* Commence en haut de la page */

  align-items: center; /* Centre le titre */

  background-color: #000000;

  margin: 20px;

  text-align: left;

  margin-bottom:auto;

  line-height: 1.5;

}



.moto-presentation h2 {

  text-align: center;

  margin-bottom: 15px;

  color:rgb(255, 255, 255);

  font-size: 50px;

  margin: top 10px;;

}



/* Section moto-details */

.moto-details {

  display: flex;

  justify-content: space-between; /* Espace entre la description et l'image */

  align-items: flex-start;

  width: 100%;

  margin-top: 15px;

  color:rgb(255, 255, 255)

  

}



.specifications {

  flex: 1;

  text-align: center; /* Aligne la description à gauche */

  box-sizing: border-box;

 

}

.specifications h1 {

  font-size: 40px;



}

.specifications h2 {

  font-size: 30px;

  margin-bottom: 0px;

}



.moto-image {

  flex: 1;

  text-align: right; /* Aligne l'image à droite */

}



.moto-image img {

  max-width: 90%;

  height: auto;

  border-radius: 20px;

  margin-top: 40px;

}

.ktmdescription {

  display: flex;

  justify-content: center; /* Centre verticalement et horizontalement */

  align-items: center; /* Centre le contenu verticalement */

  margin-left: 20px; /* Espace à gauche */

  height: 100vh; /* Prend toute la hauteur de la fenêtre */

  line-height: 1.5; /* Ajuste l'interligne */

  flex-wrap: wrap; /* Permet aux éléments de se placer sur plusieurs lignes si nécessaire */

  box-sizing: border-box;

  flex: 1;

  text-align: center; /* Aligne la description à gauche */

}



.moto-description-text {

flex: 1;

text-align: center; /* Aligne la description à gauche */

margin-right:auto; /* Espace entre le texte et l'image */

margin-top: 0px;

}

.moto-description-text h2 {

font-size: 30px;

margin-top: 20px;

}

.moto-description-text h1 {

  font-size: 40px;

  margin-top: 20px;

  margin-bottom: -20px;

}



.moto-image2 {

  flex: 1;

  text-align: right; /* Aligne l'image à droite */

  position: relative; /* Permet de déplacer l'image */

  left: 90; /* Début de la position (ajuste cette valeur) */

  margin-right: 20px; /* Ajoute de l'espace à droite de l'image */

}



.moto-image2 img {

  max-width: 90%; /* Limite la taille de l'image */

  height: auto;

  border-radius: 20px;

}

.ligne-demarcation {

  width: 100%; /* Largeur de la ligne */

  height: 2px; /* Hauteur de la ligne */

  background-color: #ff0000; /* Couleur de la ligne (ici noir) */

  margin-top: 70px; /* Marges en haut et en bas de la ligne */

  margin-bottom: 

}



.hamburger {

  display: none;

}



/* Responsive pour mobile */

@media (max-width: 768px) {

  header {

    position: relative;

    z-index: 1000;

  }



  /* Afficher le hamburger */

  .hamburger {

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    width: 30px;

    height: 25px;

    position: absolute;

    top: 20px;

    right: 20px;

    cursor: pointer;

    z-index: 1001;

  }



  .hamburger span {

    height: 4px;

    width: 100%;

    background-color: white;

    border-radius: 2px;

  }



  /* Menu caché par défaut */

  nav ul {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    height: 100vh;

    width: 100vw;

    background-color: rgba(0, 0, 0, 0.95);

    flex-direction: column;

    justify-content: center;

    align-items: center;

    padding: 0;

    margin: 0;

    z-index: 999;

  }



  /* Menu affiché quand .show est actif */

  nav ul.show {

    display: flex;

  }



  nav ul li {

    margin: 20px 0;

  }



  nav ul li a {

    color: white;

    font-size: 24px;

    font-weight: bold;

    text-decoration: none;

  }

}



/* Animation qui occupe tout l'écran */

.landscape-message {

  display: none; /* Cacher par défaut */

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.8);

  color: white;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  text-align: center;

  z-index: 1000;

  animation: fadeIn 1s ease-in-out; /* Animation de fade-in */

}



/* Animation de l'apparition du message */

@keyframes fadeIn {

  0% {

      opacity: 0;

  }

  100% {

      opacity: 1;

  }

}



/* Style du contenu du message */

.message-content p {

  font-size: 24px;

  margin-bottom: 20px;

  font-weight: bold;

}



/* Style de l'icône du téléphone */

.phone-icon {

  font-size: 60px;

  margin-bottom: 20px;

}