body {
   font-family: "Segoe UI", "Helvetica Neue", Arial, "Open Sans", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   background-color: #fff3d66e;
   margin: 0;
}

/* Blocage du scroll au clic d'une image */
.body-no-scroll {
   overflow: hidden;
   position: absolute;
   top: 0;
   left: 0;
}

h1 {
   font-size: 2rem;
   font-weight: normal;
   color: #4f4c6f;
   text-align: center;
}

/* Gallerie des images */
#img-zone {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   width: 80%;
   background-color: #4f4f4f0d;
   border-radius: 1rem;
   padding: 1.5rem 0 1.5rem 0;
   margin: 3rem auto 3rem auto;
}

/* Boite avec miniature = image contenue */
.thumbnail {
   background: no-repeat center;
   width: 16rem;
   height: 12rem;
   background-size: cover;
   /* border: 1px solid darkgrey; */
   border-radius: 0.2rem;
   margin: 1.4rem;
   cursor: pointer;
   box-shadow: 0.2rem 0.2rem 0.3rem #00000085;
}

/* Effet de zoom au survol des images */
.hover-zoom:hover {
   transform: scale(1.5);
   transition: transform cubic-bezier(0.4, 0, 0.2, 1) 100ms;
   /* border: 1px solid darkgrey; */
}

/* Image contenue dans boite => fond blanc transparent quand affichées en plein écran */
#img-background-white {
   height: 100%;
   width: 100%;
   min-width: 280px;
   background-color: rgba(255, 255, 255, 0.75);
   position: fixed;
   left: 0;
   top: 0;
   margin: auto;
}

#img-zoom {
   max-height: 100%;
   max-width: 100%;
   position: fixed;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

#divImgPosition {
   width: 100%;
   position: fixed;
   bottom: 0;
   display: flex;
   justify-content: center;
   margin-bottom: 0.3rem;
}

#imgPosition {
   font-size: 1rem;
   font-weight: 500;
   font-style: italic;
   color: white;
   background-color: #94e7c0;
   padding: 0rem 0.7rem 0rem 0.7rem;
   border-radius: 2rem;
}

/* svg previous next */
.change-img {
   height: 2.5rem;
   width: 2.5rem;
   position: fixed;
   top: 50%;
}

#change-img-left {
   left: 0;
   transform: translate(20%, -20px);
   z-index: 1
}

#change-img-right {
   right: 0;
   transform: translate(-20%, -20px);
   z-index: 1
}

/* svg croix de fermeture image */
#button-close {
   position: fixed;
   right: 0;
   top: 0;
   height: 2.3rem;
   width: 2.3rem;
   padding: 0.5rem;
   z-index: 1
}

/* svg couleur icônes */
svg {
   cursor: pointer;
}

svg path {
   color: #94e7c0;
   fill: currentColor;
}

svg:hover,
svg>path:hover {
   color: #94e7c0e0;
   fill: currentColor;
}


/* ################################################################################## */
/* TOUCH DEVICES
/* ################################################################################## */
@media (pointer:coarse) {

   /* Gallerie des images */
   #img-zone {
      border-radius: 0 !important;
      margin: auto !important;
      padding: 1rem 0 1rem 0;
      width: 100%
   }

   /* Boite avec miniature = image contenue */
   .thumbnail {
      margin: 0.5rem;
      width: 10rem;
      height: 7.50rem;
   }

}