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 */
}

a {
  color: #C6AEBC;
}

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