* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

body{
  margin:0;
  padding:0;
/*  overflow: hidden; */
}


/* Début scroll1 */

.conteneur-scroll1{
  display: flex;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden; /* Désactive spécifiquement le scroll vertical */
}

.placement-horizontal1{
  height: 100%;
  display: block;
  flex: 0 0 auto;
}

.placement-horizontal1 img{
  height:100%;
 }

.bouton-suivant-scroll1{
   position: absolute;
   right: 3vw;
   top: 50%;
   transform: translateY(-50%);
   z-index: 10;
   opacity: 0; /* Bouton invisible par défaut */
   pointer-events: none; /* Bouton non cliquable par défaut */
   transition: opacity 0.3s ease;
 }

 .bouton-suivant-scroll1.visible {
     opacity: 1;
     pointer-events: auto; /* Bouton cliquable */
     cursor: pointer;
}

 .bouton-suivant-scroll1 img {
   height: auto;
   width: 2rem;
   transition: width 0.3s ease;
 }

 .bouton-suivant-scroll1:hover img {
    width: 2.3rem;
 }

 /* début du CSS pour l'affichage vertical */

 .conteneur-vertical{
   width:350vw;
   background-color: red;
   margin:0;
   padding:0;
   display: block;
 }

 .placement-vertical{
   margin:0;
   padding:0;
   width:100vw;
   vertical-align: top;
   overflow: hidden;
   line-height: 0;
 }

 .placement-vertical img{
   width:100%;
  }

  /* début du CSS pour les strips */

.conteneur-strip {
  margin: 0;
  padding: 0;
  display: block;
  position: relative; /* Parent positionné pour le bouton */
}

.bouton-quitter-strip {
  width: 5vh;
  height: 7vh;
  position: fixed; /* Position fixe par rapport à la fenêtre */
  top: 50%; /* Distance depuis le haut */
  right: 3vw; /* Distance depuis la droite */
  transform: translateY(-50%); /* Décale l'élément de la moitié de sa hauteur vers le haut */
  z-index: 100; /* Pour s'assurer qu'il reste au-dessus des autres éléments */
  opacity: 0; /* Initialement invisible */
  transition: opacity 0.3s ease; /* Transition douce pour l'apparition */
  pointer-events: none; /* Initialement non cliquable */
}

.bouton-quitter-strip.visible {
  opacity: 1; /* Visible quand la classe est ajoutée */
  pointer-events: auto; /* Devient cliquable */
  cursor: pointer;
}

.bouton-quitter-strip img {
  height: auto;
  width: 2rem;
  transition: width 0.3s ease;
}

.bouton-quitter-strip:hover img {
  width: 2.3rem;
}

/* début du CSS pour l'affichage slideshow */

  .conteneur-slideshow{
    width:100vw;
    height:100vh;
    position: relative;
    overflow: hidden; /* Empêche le débordement du contenu */
  }

  .placement-fond{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

.placement-fond img {
      width: 100%;
      height: 100%;
      object-fit: cover; /* Maintient les proportions et couvre tout l'espace */
  }

.placement-slideshow{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrage parfait */
    height: 90%; /* Hauteur fixée à 90% de la hauteur de la fenêtre */
    width: 90%; /* Largeur fixée à 90% de la largeur de la fenêtre */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .placement-scn13{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); /* Centrage parfait */
      height: 100vh; /* Hauteur fixée à 90% de la hauteur de la fenêtre */
      width: 100vw; /* Largeur fixée à 90% de la largeur de la fenêtre */
      display: flex;
      justify-content: center;
      align-items: center;
    }

.placement-slideshow img, .placement-scn13 img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain; /* Maintient les proportions */
  }

.bouton-suivant {
    position: absolute;
    right: 3vw;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
}

.bouton-precedent {
  position: absolute;
  left: 3vw;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
}

.bouton-suivant img, .bouton-precedent img {
    height: auto;
    width: 2rem;
    transition: width 0.3s ease;
}

.bouton-suivant:hover img, .bouton-precedent:hover img {
    width: 2.3rem;
}

  .placement-horizontal1 img{
    height:100%;
}

.placement-pagecarnet{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centrage parfait */
  height: auto; /* Hauteur fixée à 80% de la hauteur de la fenêtre */
  width: auto; /* Largeur fixée à 80% de la largeur de la fenêtre */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* Empêche le débordement du contenu */
  }

.placement-pagecarnet img {
  max-height: 100%; /* Change min-height à max-height */
  max-width: 100%;  /* Change min-width à max-width */
  width: auto;      /* Permet à l'image d'avoir une largeur auto */
  height: auto;     /* Permet à l'image d'avoir une hauteur auto */
  object-fit: contain; /* Maintient les proportions */
}


.placement-fond img, .placement-pagecarnet img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* ou "contain" selon vos besoins */
}

  /* début du CSS pour l'affichage loupe */

.conteneur-loupe{
    position: relative;
    width:100vw;
    height:100vh;
    overflow: hidden;
  }

  .placement-fond-loupe{
    width:100%;
    height:100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  .placement-fond-loupe img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

  .placement-loupe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #loupeSvg {
        width: auto;
        height: auto;
        min-width: 70vw; /* Utilise au moins 90% de la largeur de la fenêtre */
        min-height: 70vh; /* Utilise au moins 90% de la hauteur de la fenêtre */
        max-width: none; /* Supprime la limitation de taille maximale */
        max-height: none;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

@media screen and (max-width: 768px) {
        #loupeSvg {
          min-width: 100vw;
          min-height: 100vh;
        }