@charset "UTF-8";

@font-face {
  font-family: 'times_italic';
  src: url('../fonts/timesltstd-italic-webfont.woff2') format('woff2'),
    url('../fonts/timesltstd-italic-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'times_roman';
  src: url('../fonts/timesltstd-roman-webfont.woff2') format('woff2'),
    url('../fonts/timesltstd-roman-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

html,
body {
  height: 100vh;
  /* background-color: red; */
  scroll-behavior: smooth;
}

.grille-flexible {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.bloc-1 {
  flex: 1;
  height: 50vh;
}

.bloc-2 {
  flex: 1;
  height: 50vh;
  background-color: greenyellow;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  white-space: nowrap;
  position: relative;
}

.link1,
.link2,
.link3,
.link4 {
  scroll-snap-align: start;
  flex: 0 0 100%;
  /* Utiliser 100% de la largeur du conteneur */
  padding: 0 10px;
  /* Ajouter un espacement autour des divs si nécessaire */
}



.image-container {
  position: relative;
  width: 100%;
  height: calc(100%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-container img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.image-container img.show {
  opacity: 1;
}

.texte-image {
  font-family: 'times_roman';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  color: greenyellow;
  font-size: 9em;
  text-align: center;
  line-height: 0.8;
}

.texte-image-2 {
  font-family: 'times_roman';
  color: black;
  font-size: 9em;
  text-align: center;
  line-height: 0.8;
  white-space: normal;
  /* Permettre le retour à la ligne du texte */
}

.texte-image-3 {
  font-family: Arial, Helvetica, sans-serif;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  color: black;
  font-size: 9em;
  text-align: center;
  line-height: 0.8;
}


.fanpage {
  color: blue;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  padding: 0.2em;
}

a {
  color: white;
  text-decoration: none;
}

/* .link1::before,
.link2::before,
.link3::before,
.link4::before,
.link1::after,
.link2::after,
.link3::after,
.link4::after {
  content: '';
  position: absolute;
  top: 75%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px;
}

.link1::before,
.link2::before,
.link3::before,
.link4::before {
  left: 0;
  border-color: transparent black transparent transparent;
}

.link1::after,
.link2::after,
.link3::after,
.link4::after {
  right: 0;
  border-color: transparent transparent transparent black;
} */


@media only screen and (max-width: 600px) {

  /* Appliquer les styles lorsque la largeur de l'écran est inférieure ou égale à 600px */
  body {
    font-size: 12px;
    /* Modifier la taille de la typographie selon vos besoins */
  }
}