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%;
}

.motion{
  display: grid;
  grid-template-columns: repeat(12,1fr);
  gap: 32px;
  padding:50px 64px;
  margin-left:3%;
}

.video{
  grid-column: 1/span 6;
  aspect-ratio: 640/360;
  video {
    height: 100%;
    width: 100%;
  }
}

.texte{
  grid-column: 7/span 5;
  margin-left:8%;
}

h1{
  font-family: gigalypse, sans-serif;
  font-size: 36px;
  color: #C6AEBC;
}

.soustitres{
  font-family: 'Roboto-Bold';  
  margin-top:3%;
  margin-bottom:3%;
  font-size:19px;
}

/* Animation pour flecheretour */
#flecheretour {
  transition: transform 0.3s ease-in-out; /* Animation fluide */
}

#flecheretour:hover {
  transform: translateX(-5px); /* Déplacement vers la gauche */

}



span{
  font-weight: 600;
}

.lien{
  margin-top:2%;
  text-align: center;
}

.lien a{
  text-decoration: none;
}

.soustitres, .corps{
  line-height: 20px;
}

@media (max-width: 1024px) {

  #titre{
    font-size:28px;
  }
  #flecheretour {
      margin-left: 16px;
      margin-top: 5%;
      width: 24px;
      height: auto;
  }

  /* Modification de la disposition pour les petits écrans */
  .motion {
      display: flex;
      flex-direction: column;
      padding: 32px 16px;
      margin-left: 0;
  }

  .video {
      grid-column: auto;
      width: 100%;
      aspect-ratio: 16/9;
      margin-bottom: 24px;
  }

  .texte {
      grid-column: auto;
      width: 100%;
      margin-left: 0;
      font-size: 14px;
  }
  h2{
    font-size: 18px;
  }
  h1 {
      font-size: 28px;
  }

  .lien h2{
    font-size:14px;
  }
}