@charset "utf-8";

/*

    ## #####  ##     ##
    ## ##  ## #### ####
    ## #####  ## ### ## --- CSS Document
##  ## ##  ## ##  #  ##
  ##   #####  ##     ##     JB MARTINEZ © 2024 - jb.martinez.free.fr
 

							--> conception Mobile First : du Mobile vert les grands écrans
*/

#magnifying {
  position: fixed;
  display: none;
  z-index: 2000;
  top: 0;
  left: 0;
  width: calc(100% - 1px);
  height: calc(100% - 1px);
  background-color: rgba(0,0,0,0.5);
}

.win-close {
  position: absolute;
  display: block;
  z-index: 2;
  top: 1rem;
  right: 1rem;
  width: 32px;
  height: 32px;
}

#glass-image {
  position:absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1;
  bottom: 5rem;
  width: 100%;
  height: calc(100% - 5rem - 32px);
  filter: drop-shadow(0px 0px 15px #4444dd);
}

#glass-image img {
  max-width: calc(90%);
  max-height: calc(90%);
  min-width: 80%;
  width: 80%;
  height: auto;
}

#glass-image p {
  position: relative;
  padding: 1rem;
  font-size: 1.2rem;
  color: #fff;
  text-transform: uppercase;
}

#glass-image p::after {
	position: absolute;
	top: 3.5rem;
	left: calc(50% - 25px);
	width: 50px;
	height: 2px;
	border-bottom: 1px solid #fff;
	content: "";
}

.mouse {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 4rem;
  text-align: center;
  filter: drop-shadow(0px 0px 15px #fff) !important;
  color: rgba(255,255,255,0.5) !important;
  font-size: 12px;
}

#mouse {
  fill:rgba(255,255,255,0.5);
  stroke-width: 0.0625;
}


/* ***************************************************************************************************
		5 - MEDIA QUERIES : GESTION TAILLE ECRAN
****************************************************************************************************** */

/* SMALL SCREEN : smartphone à partir de 576px */
@media (min-width: 576px) {
  #glass-image img {
    max-width: calc(200px);
    max-height: calc(150px);
    min-width: 100px;
    width: 200px;
    height: auto;
  }

  .mouse {
    height: 3rem;
  } 

}


/* WIDE SCREEN : Tablette et Ordinateur (desktop) à partir de 992px */
@media (min-width: 992px) {

  #glass-image img {
    max-width: calc(90%);
    max-height: calc(90%);
    min-width: auto;
    min-height: 80%;
    width: auto;
    height: 80%;
  }

  .mouse {
    height: 5rem;
    font-size: 18px;
  }  

}