/* PROJET */


/* ARTICLE */

.projet article {
  margin: calc(1 * var(--spacing)) calc(2 * var(--spacing))
}
.projet .project_intro {
  font-weight: normal !important;
  font-size: var(--fs-1) !important;
  line-height: var(--lh-1) !important;
  margin-bottom: calc(3 * var(--spacing));
}
.projet .project_intro span {
  display: block;
}

/* IMAGE GRID */

.projet figure {
  cursor: zoom-in;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
}

/* focus */
#expanded_image, #expanded_image_buttons {
  position: fixed;
  z-index: 10;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: var(--transparent);
}
#expanded_image_buttons {
  background-color: initial;
}
#expanded_image_buttons #left{
  height:100%;
  width:100%;
  cursor: pointer;
}
#expanded_image_buttons #right{
  height:100%;
  width:100%;
  cursor: pointer;
}
#expanded_image_buttons #quit{
  position:fixed;
  top:2rem;
  right:1rem;
  padding:1rem;
  margin:1rem;
  font-size:var(--fs-5);
  font-weight:bold;
  cursor: pointer;
}
#expanded_image * {
  display: block;
}
#expanded_image #left, #expanded_image #right {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
  flex:1;
  display :flex;
  align-items: center;
  justify-content: center;
}
#expanded_image #left > div, #expanded_image #right > div {
  text-align: center;
  font-size:var(--fs-5);
}
@media(max-width:1000px) {
  #expanded_image #left > div, #expanded_image #right > div, #expanded_image_buttons #quit {
    font-size:var(--fs-4);
  }
  #expanded_image_buttons #quit{
    top:1rem;
    background-color:white;
  }
}

#expanded_image img {
  flex:0;
  max-width:calc(100% - calc(var(--fs-5)*2));
  object-fit: scale-down;
  cursor: zoom-out;
  cursor: -webkit-zoom-out;
  cursor: -moz-zoom-out;
}

/* .no_scroll qaund expanded_image est display:initial */
body.no_scroll {
  overflow: hidden;
}