body{
    font-family: 'Roboto-Regular';
}

::-webkit-scrollbar {
    width: 12px; /* Largeur de la barre verticale */
    height: 12px; /* Hauteur de la barre horizontale */
  }

  /* Couleur de fond de la piste de défilement */
  ::-webkit-scrollbar-track {
    background-color: #f1f1f1;
    border-radius: 10px;
  }

  /* Couleur et style de la poignée (le thumb) */
  ::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 10px;
    border: 3px solid #f1f1f1; /* pour un effet d'espace autour du thumb */
  }

  /* Style au survol de la poignée */
  ::-webkit-scrollbar-thumb:hover {
    background-color: #555;
  }

#flecheretour{
    margin-left:64px;
    margin-top:3%;
  }
  
  
    /* Animation pour flecheretour */
    #flecheretour {
      transition: transform 0.3s ease-in-out; /* Animation fluide */
    }
    
    #flecheretour:hover {
      transform: translateX(-5px); /* Déplacement vers la gauche */
    
    }

.container{
    display: flex;
    margin-top:3%;
    margin-left:8%;
}

.image img{
    width: 450px;
    transition: transform 0.3s ease;
}

.image img:hover {
    transform: scale(1.02);
  }


  #titre{
    width:600px;
    font-family: gigalypse, sans-serif;
    font-size: 36px;
    color: #C6AEBC;
  }
  
  
  .soustitres{
    font-family: 'Roboto-Bold';  
    margin-top:3%;
    font-size:19px;
  }
  
  .texte2{
    margin-top:2%;
    display: flex;
    line-height: 20px;
}

#clic{
    text-align: center;
    margin-top:2%;
    margin-bottom:10%;
}


.presentation{
    margin-left:8%;
    margin-right:10%;
}



@media (max-width: 1024px) {
  #flecheretour {
      margin-left: 16px;
      margin-top: 5%;
      width: 24px;
      height: auto;
  }
}

/* Image responsive */
@media (max-width: 1024px) {
  .image {
      position: relative;
  }

  .image img {
      display: block;
      margin: 0 auto;
      width: 100%; /* Image prend toute la largeur disponible */
      max-width: 300px;
      height: auto;
  }

  #clic {
      font-size: 16px;
  }
}

/* Texte responsive */
@media (max-width: 1024px) {
  #titre {
      font-size: 28px;
      width: auto;
      text-align: center;
  }

  .presentation {
      margin: 5% 5%;
  }

  .texte h2.soustitres {
      font-size: 18px;
  }

  .texte h3.texte2 {
      font-size: 14px;
      line-height: 18px;

  }

  #texte2 {
      font-size: 14px;
      margin-bottom: 8%;
  }
}

/* Disposition verticale pour les téléphones et tablettes */
@media (max-width: 1024px) {

  #flecheretour{
    margin-left: 10%;
  }
  .container {
      display: flex;
      flex-direction: column;
  }

  .image {
      order: 1;
  }

  .presentation {
      order: 2;
      margin: 3% 3%;
  }

  #titre {
      font-size: 28px;
  }
  .texte h2{
    margin-top:8%;
  }
  .texte h2.soustitres{
      font-size: 18px;
  }

  .texte h3.texte2 , #texte2{
      font-size: 14px;
  }
  .texte2, #texte2{
    margin-right:8%;
  }

  #clic {
      font-size: 14px;
  }

  
}

.texte2{
      margin-bottom:80px;

}