/* AMI site 2025 */

body {
  margin: 0;
  padding: 0;
  height: 100%; /* Utiliser toute la hauteur */
  background-color: black;
  font-family: "typo", helvetica, arial;
  list-style-type: none;
  overflow-x: hidden;
  overflow-y: hidden;
  line-height: 1.2;	
}

body.allow-scroll {
  overflow-y: auto; /* Permet de défiler lorsque la classe 'allow-scroll' est active */
}

body a {
  color: black;
  text-decoration: none;
}

body a:hover {
  color: red;
}

.slider1 {
  padding-bottom: env(safe-area-insets-bottom);
}

::-moz-selection, ::selection {
  color: black;
  background-color: red;
}

#images {
  height: calc(100dvh);
  z-index: 50;

}

#images img {
  position: relative;
  width: 100%;
  height: 100dvh;
  object-fit: cover;
}

.ami {
  cursor: pointer;
  color: red;
  padding-left: 10px;
  position: fixed;
  top: 10px;
  left: 0;
  z-index: 200;
  font-size: 25px;
}

.cache {
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  color: black;
  background-color: lightgray;
  position: fixed;
  z-index: 10;
  mix-blend-mode: difference;
  display: none;
}

.dropmenu {
  top: 0;
  left: 0;
  width: 100vw;
  min-height: 50vh;
  color: black;
  display: none;
  position: fixed;
  z-index: 100;
  background-color: white;
  padding-top: 65px;
}

.infos {
  max-width: 30%;
  display: inline-block;
  padding: 10px;
  vertical-align: top;
  color: black;
  font-size: 25px;
}

#legende {
  position: fixed;
  bottom: 10px;
  left: 10px;
  width: 60vw;
  z-index: 200;
  color: red;
  font-size: 15px;
}

.small {
  font-size: 15px;
}

.arrow {
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  outline: 1;
  z-index: 50;
}

.next {
  right: 0;
  cursor: url('data:image/svg+xml,%3Csvg width="15" height="20" xmlns="http://www.w3.org/2000/svg"%3E%3Cpolygon points="0,0 15,10 0,20" fill="%23ff0000" /%3E%3C/svg%3E'), e-resize;
}

.prev {
  left: 0;
  cursor: url('data:image/svg+xml,%3Csvg width="15" height="20" xmlns="http://www.w3.org/2000/svg"%3E%3Cpolygon points="15,0 0,10 15,20" fill="%23ff0000" /%3E%3C/svg%3E'), w-resize;
}


/* :::::::::::::. Décalage des images sur mobile :::::::::::::.*/

#images .slider1 .gallery-image img {
  
    object-position: center; /* Par défaut, l'image est centrée (si aucune description n'est définie) */
    transition: object-position 0.3s ease; /* Animation douce pour le changement de position */
}

/* Pour les images avec un décalage dynamique */
#images .slider1 .gallery-image[data-object-position] img {
    object-position: var(--object-position, center); /* Utilisation de la variable CSS dynamique pour object-position */
}

/* Appliquer un positionnement spécifique avec décalage */
#images .slider1 .gallery-image[data-object-position="left-30"] img {
    object-position: 27% center; /* Décaler l'image un petit peu vers la gauche */
}

#images .slider1 .gallery-image[data-object-position="right-30"] img {
    object-position: 73% center; /* Décaler l'image beaucoup vers la gauche pour voir la partie droite */
}
#images .slider1 .gallery-image[data-object-position="right"] img {
    object-position: right center; /* Décaler l'image entièrement vers la gauche pour voir la partie droite */
}
#images .slider1 .gallery-image[data-object-position="left"] img {
    object-position: left center; /* Décaler l'image entièrement vers la gauche pour voir la partie droite */
}

#images .slider1 .gallery-image[data-object-position="center"] img {
    object-position: center; /* Centrer l'image à la fois horizontalement et verticalement */
}

/* :::::::::::::. Typo :::::::::::::.*/

@font-face {
    font-family: "typo";
    src: url("typo/regular.woff");
	font-feature-settings: "ss01" 1, "ss05" 1, "ss06" 1, "ss07" 1, "liga" 1, "calt" 1, "dlig" 1;
	font-weight:normal;
    font-style: normal;
}
   
@font-face {
    font-family: "typo";
    src: url("typo/italique.woff");
	font-feature-settings: "ss01" 1, "ss05" 1, "ss06" 1, "ss07" 1, "liga" 1, "calt" 1, "dlig" 1;
	font-weight:normal;
    font-style: italic, oblique;;
}
   





/* :::::::::::::. Responsive :::::::::::::.*/


@media only screen and (max-width: 767px) {
  .ami {
    font-size: 30px;
  }

  body {
    overflow-y: scroll;
  }

  .infos {
    max-width: 95vw;
    font-size: 20px;
    padding-bottom: 20px;
  }

  #images .slider1 img {
    object-fit: cover;
    object-position: right;
	height: calc(100dvh); 
  }

  #legende {
    width: 95vw;
    font-size: 15px;
    padding-right: 10px;
  }

  .small {
    font-size: 12px;
  }

  .dropmenu {
    padding-top: 55px;
    position: relative;
  min-height: 50dvh;
  color: black;
  background-color: white;
	    z-index: 100;

}

.cache {

  z-index: 10;
}	
	
   
}