@font-face {
  font-family: "kindergarten";
  src: url("../fonts/kindergarten.ttf");
}

@font-face {
  font-family: "caca";
  src: url("../fonts/EingrantchMono-Medium.ttf");
}

@font-face {
  font-family: "sous titre";
  src: url("../fonts/JetBrainsMono-VariableFont_wght.ttf");
}

body {
  background-color: #F3E6E1;
}

h1 {
  color: black;
  text-align: left;
  font-family: kindergarten;
  font-size: 35px;
  margin-top: 10%;
}
h2{
  color: black;
  text-align: center;
  font-family: sous titre;
  font-size: 100%;

}

h3{
  color: whitesmoke;
  text-align: center;
  font-family: sous titre;
  font-size: 100%;

}

h4{
  color: black;
  text-align: center;
  font-family: caca;
  font-size: 100%;
  text-align: left;
  margin-top: 30%;
  text-align: justify;
  margin-left:10%;
}

p {
  font-family: sous titre;
  font-size: 70%;
  text-align: justify-all;
    margin-left:10%;

}


/* Mise en forme barre de navigation */
.topnav {
  background-color: #F3E6E1;
  overflow: hidden;
  font-family: "sous titre";
  font: black;
}

/* Style liens dans la barre navigation */
.topnav a {
  float: left;
  color: black;
  text-align: center;
  padding-left: 0%;
  padding-right: 40%;
  padding-bottom: 1%;
  padding-top: 4%;
  text-decoration: none;
  font-size: 100%;
}

/* couleurs des liens */
.topnav a:hover {
  background-color: whitesmoke;
  color: black;
}

/* couleur du lien actif */
.topnav a.active{
  background-color:#F3E6E1;
  color: darkorange;
}




/* slideshow */
/* Slideshow container */
.slideshow-container {
  max-width: 100%;
  position: absolute;
}

/* Images cachées par défault */
.mySlides {
  display: none;
  margin-top: 0px;
}

/* boutons next ou retour */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: 10%;
  margin-top: -5%;
  padding: 5%;
  color: white;
  font-weight: bold;
  font-size: 150%;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
  left: 87%;
  border-radius: 2px 0 0 3px;
}

/* Position "prev button" to the left */
.prev {
  left: -20%; /* Ajustement de la position depuis la gauche */
  border-radius: 2px 0 0 3px;
}

/* couleur en survol du bouton */
.prev:hover, .next:hover {
  background-color: whitesmoke;
  opacity: 40%;
}

/* texte - j'ai enlevé l'opacité */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  opacity: 0%;
  text-align: center;
}

/* nombre en haut droite - enlevé opacité */
.numbertext {
  color: #f2f2f2;
  font-size: 10px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
  opacity: 0%;
  font-family: "sous titre";
}



/* les points */

.dots-container {
  position: relative;
  transform: translateX(-50%); /* Pour centrer horizontalement les points */
 margin-left: -5%;
top: -10%;
margin-bottom: -5%;
}


.dot {
  cursor: pointer;
  height: 7px;
  width: 7px;
  background-color: whitesmoke;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.3s ease;
}


.active, .dot:hover {
  background-color: darkorange;
}

/* animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}




/* Mise en place de la grille */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr; /* Trois colonnes égales */
  gap: 2%; /* Marge entre les colonnes */
 margin: 2%;
 margin-top: 3%;
 margin-bottom: 0%;
}

/* Styles de la colonne de texte */
.text-column {
  grid-column: 1/2; /* Première colonne */
  color: black;
  text-align: left;
  font-family: "sous titre";
  margin-top: 20%;
}

.image-column {
  display: flex;
  flex-wrap: wrap;
  gap: 2%; /* Espacement entre les lignes */
}

/* Styles pour chaque ligne d'images */
.image-row {
  display: flex;
  width: 100%; /* Chaque ligne occupe 100% de la largeur */
  flex-wrap: wrap;
}

/* Styles pour chaque image */
.image {
  flex: 1 0 calc(50% - 10px); /* Chaque image occupe 50% de la largeur avec un espacement */
}

/* Styles pour les images */
.image img {
  width: 100%;
  height: auto;
  display: block;
  margin: 2%;
}

/* Media Query pour modifier la disposition lorsque la page se rétrécit */
@media (max-width: 890px) {
  .image {
    flex: 1 0 calc(100% - 10px); /* Une seule image par ligne */
  }
}

/* slideshow */
/* Slideshow container */
.slideshow-container {
  max-width: 100%;
  position: absolute;
  margin: 0%;
  margin-bottom: 20%;
}

.slideshow-container {
  flex: 1 0 calc(50% - 10px); /* Chaque image occupe 50% de la largeur avec un espacement */
}

.slideshow-container img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 20%;
}



/* Images cachées par défault */
.mySlides {
  display: none;
  margin-top: 0px;
  margin-bottom: 20%;
}

/* boutons next ou retour */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: 10%;
  margin-top: -17%;
  padding: 5%;
  color: white;
  font-weight: bold;
  font-size: 150%;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
  left: 87%;
  border-radius: 2px 0 0 3px;
}

/* Position "prev button" to the left */
.prev {
  left: 2%; /* Ajustement de la position depuis la gauche */
  border-radius: 2px 0 0 3px;
}

/* couleur en survol du bouton */
.prev:hover, .next:hover {
  background-color: whitesmoke;
  opacity: 40%;
}




/* boutons next ou retour fanzine */
.flechefanzine {
  color:darkorange;
}

.prev2, .next2 {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: 10%;
  margin-top: -17%;
  padding: 5%;
  font-weight: bold;
  font-size: 150%;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next2 {
  right: 0;
  border-radius: 3px 0 0 3px;
  left: 87%;
  border-radius: 2px 0 0 3px;
}

/* Position "prev button" to the left */
.prev2 {
  left: -3%; /* Ajustement de la position depuis la gauche */
  border-radius: 1px 0 0 1px;
}


/* couleur en survol du bouton */
.prev2:hover, .next2:hover {
  background-color: whitesmoke;
  opacity: 40%;
}






/* les points */

.dots-container {
  position: relative;
  bottom: 3.5%; /* Ajustez la position verticale selon vos besoins */
  left: 57%; /* Pour centrer horizontalement les points */
  transform: translateX(-50%); /* Pour centrer horizontalement les points */
  margin-top: -20%;
  object-position: center;
}

.dot {
  cursor: pointer;
  height: 7px;
  width: 7px;
  margin-bottom: 0%;
  margin-top: 0%;
  background-color: whitesmoke;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.3s ease;
  max-block-size: 50%;
}


.active, .dot:hover {
  background-color: darkorange;
}

/* animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* Positionnement du diaporama */
.slideshow-container {
  position: relative;
  max-width: 100%; /* Diaporama avec une largeur maximale de 100% */
  display: inline-block;
  overflow: hidden;
  width: 100%;
  right: 0;
  grid-column: span 1;
  margin: 5%;
  margin-left: 0%;
  margin-bottom: 0%;
}

/* slideshow marge haut*/
.popo{
  margin-top: -15%;
}

/* Styles pour la vidéo */
.video {
  flex: 1 0 calc(50% - 10px); /* Ajustez la taille de la vidéo comme les images */
}

.video video {
  width: 100%;
  height: 95%;
  display: block;
  margin: 2%;
}

.titre {
  text-decoration: none;
}