@font-face {
  font-family: "P-ACR-AGON-Regular";
  /* try to use an installed font by name first */
  src:
    local("P-ACR-AGON-Regular"),
    /* fallback to a font file placed in ./fonts/ */
      url("./fonts/paragon/P-ACR-AGON-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "paragon-italic";
  /* try to use an installed font by name first */
  src:
    local("paragon-italic"),
    /* fallback to a font file placed in ./fonts/ */
      url("./fonts/paragon/Paragonitalic-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "latinCGelongated";
  /* try to use an installed font by name first */
  src:
    local("latinCGelongated"),
    /* fallback to a font file placed in ./fonts/ */
      url("./fonts/latinCGelongated/latinCGelongated.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "isenheim-regular";
  /* try to use an installed font by name first */
  src:
    local("isenheim-regular"),
    /* fallback to a font file placed in ./fonts/ */
      url("./fonts/isenheim/Isenheim_Regulier.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "isenheim-thin";
  /* try to use an installed font by name first */
  src:
    local("isenheim-thin"),
    /* fallback to a font file placed in ./fonts/ */
      url("./fonts/isenheim/Isenheim_Fin.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* PAGE ACCUEIL */

@media (min-width: 1001px) {
  .version-mobile {
    display: none;
  }
}

@media (max-width: 1000px) {
  .version-standard {
    display: none;
  }

  .version-mobile {
    display: flex;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    max-width: 90vw;
  }
}

body {
  margin: 0;
  background-color: #777777;
}
p {
  font-family: "isenheim-thin", Arial, Helvetica, sans-serif;
  font-size: 1.1em;
}
a {
  color: #d3d3d3;
  text-decoration: none;
}
a:hover {
  text-decoration: overline;
}
a img:hover {
  mix-blend-mode: screen;
}
.a-noir {
  color: #000000;
}
.a-transparent {
  mix-blend-mode: normal;
}
.titre1 {
  font-family: "isenheim-thin", Arial, Helvetica, sans-serif;
  font-size: 1.8em;
  margin-bottom: 0px;
  margin-top: 0;
}
h3 {
  font-family: "isenheim-thin", Arial, Helvetica, sans-serif;
  font-size: 1.5em;
}

#crazy {
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  width: 100vw;
  height: 100vh;
}
#crazy-button {
  position: absolute;
  top: 40px;
  width: 100vw;
  height: 3vh;
}

.page-principale {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}

.image-mobile-accueil-container {
  width: 100vw;
  max-height: 40vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (min-width: 1001px) {
  .image-mobile-accueil-container {
    display: none;
  }
}

.deux-elements-mobile {
  width: 100vw;
  margin-top: 70px;
  margin-bottom: 30px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.projets {
  font-family: "isenheim-thin", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  margin: 0px;
  width: 100%;
  position: fixed;
  bottom: 30px;
  right: 0px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
@media (max-width: 1000px) {
  .projets {
    font-family: "isenheim-thin", Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    margin: 0px;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
  }
}
@media (max-width: 1000px) {
  .projet-unique-container {
    width: 100vw;
    display: flex;
    justify-content: center;
    margin-top: 0px;
    margin-bottom: 40px;
  }
}
@media (max-width: 1000px) {
  .projet-unique {
    max-width: 80vw;
    padding: 0px;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
    font-size: 1.6em;
  }
}
@media (min-width: 1001px) {
  .projet-unique {
    padding: 0px;
    text-align: end;
    font-size: 1.5em;
  }
  .projet-unique:hover {
    background-color: rgb(172, 172, 172);
    font-family: "isenheim-thin", Arial, Helvetica, sans-serif;
    color: rgb(255, 255, 255);
  }
  #memoire-projet:hover {
    background-color: #eeeeee;
    color: #000000;
  }
  #tempete-projet:hover {
    background-color: #7086ff;
    color: #000000;
  }
  #fanzine-projet:hover {
    background-color: #bcffc5;
    color: #000000;
  }
  #deambulations-projet:hover {
    background-color: #bfefe9;
    color: #000000;
  }
  #vision-projet:hover {
    background-color: #d2caba;
    color: #000000;
  }
  #stan-projet:hover {
    background-color: #ffffff;
    color: #000000;
  }
  #fabric-projet:hover {
    background-color: #d6ebe2;
    color: #000000;
  }
  #photographie-projet:hover {
    background-color: #ddecff;
    color: #000000;
  }
  #see-u-projet:hover {
    background-color: #ffefb5;
    color: #000000;
  }
  #vacarme-projet:hover {
    background-color: #cbe6fd;
    color: #000000;
  }
  #magnetic-projet:hover {
    background-color: #292929;
    color: #f5f5f5;
  }
  #ange-projet:hover {
    background-color: #e7c3c0;
    color: #000000;
  }
}
#about-projet {
  margin-top: 30px;
}

.lien-image-mobile-accueil {
  display: flex;
  justify-content: center;
}
.image-mobile-accueil {
  width: auto;
  height: auto;
  max-width: 90%;
  max-height: 100%;
  object-fit: contain;
}

.image-projet {
  height: 50vh;
}
.image-projet img {
  height: 100%;
  width: auto;
}

.lien-projet {
  text-decoration: none;
  color: inherit;
}

.duplicate-result {
  display: flex;
  position: absolute;
  width: 100vw;
  height: 100vh;
}

.projet-duplicate {
  position: absolute;
}

#tempete-duplicate-img {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0px;
  margin-top: 0px;
  height: 20vh;
}
#fanzine-duplicate-img {
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: center;
  width: 100vw;
  gap: 0px;
  margin-top: 15vh;
  height: 12vh;
  width: 100vw;
}
#deambulations-duplicate-img {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  align-content: center;
  justify-content: center;
  width: 100vw;
  margin-top: 15vh;
  height: 30vh;
}
#vision-duplicate-img {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  gap: 0px;
  margin-top: 0px;
  height: 20vh;
}
#stan-duplicate-img {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  align-content: center;
  justify-content: center;
  width: 100vw;
  margin-top: 15vh;
  height: 30vh;
}
#photographie-duplicate-img {
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: center;
  width: 100vw;
  margin-top: 15vh;
  height: 20vh;
}
#serigraphie-duplicate-img {
  display: flex;
  flex-direction: row-reverse;
  align-items: start;
  align-content: start;
  justify-content: center;
  width: 100vw;
  margin-top: 15vh;
  height: 30vh;
}
#fabric-duplicate-img {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  gap: 0px;
  margin-top: 0px;
  height: 20vh;
}
#see-u-duplicate-img {
  position: absolute;
  bottom: 0px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0px;
  margin-top: 0px;
  height: 30vh;
}
#girl-duplicate-img {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  justify-content: start;
  gap: 0px;
  margin-top: 0px;
  height: 15vh;
}
#vacarme-duplicate-img {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  width: 100vw;
  margin-top: 15vh;
  height: 15vh;
}
#magnetic-duplicate-img {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  gap: 0px;
  margin-top: 0px;
  height: 20vh;
}
#ange-duplicate-img {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  align-content: center;
  justify-content: center;
  width: 100vw;
  margin-top: 15vh;
  height: 15vh;
}
#memoire-duplicate-img {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  align-content: center;
  justify-content: center;
  width: 100vw;
  margin-top: 15vh;
  height: 20vh;
}
#horizons-duplicate-img {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  gap: 0px;
  margin-top: 0px;
  height: 25vh;
}

#about-projet:hover {
  color: #000000;
}

/* PAGES PROJETS */

.tout-page-projet {
  display: flex;
  flex-direction: row;
  padding: 30px;
  justify-content: space-between;
  margin: 0px;
}
@media (max-width: 1000px) {
  .tout-page-projet {
    display: flex;
    flex-direction: row;
    padding: 0px;
    justify-content: center;
    align-items: center;
    margin: 0px;
  }
}
@media (max-width: 1000px) {
  .tout-page-projet {
    flex-direction: column;
    margin: 0px;
    padding: 0px;
  }
}
.medias-page-projet {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 60vw;
  margin-right: 30px;
  gap: 10px;
}
@media (max-width: 1000px) {
  .medias-page-projet {
    display: flex;
    justify-content: center;
    text-align: center;
    margin: 0px;
    width: 90vw;
    order: 2;
  }
}
.images-page-projet {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 90vh;
  margin-bottom: 20px;
  object-fit: contain;
}
.deux-images {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
}
.deux-images img {
  width: auto;
  height: auto;
  max-width: calc(50% - 10px); /* Limite la largeur maximale */
  max-height: 80vh;
  object-fit: contain; /* Préserve les proportions */
}
.series {
  display: flex;
  width: 100%;
  max-height: 100vh;
  object-fit: contain;
  gap: 20px;
}
@media (max-width: 1000px) {
  .series {
    display: flex;
    flex-direction: column;
  }
}
.series-link img {
  width: 100vw;
}
@media (max-width: 1000px) {
  .series-link img {
    width: 100%;
  }
}

.quatre-images {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
}
.quatre-images img {
  width: auto;
  height: auto;
  max-width: calc(25% - 10px); /* Limite la largeur maximale */
  max-height: 80vh;
  object-fit: contain; /* Préserve les proportions */
}
.video-projet {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
}
.video-margin {
  margin-bottom: 30px;
}
.infos-projet {
  max-width: 30vw;
  position: fixed;
  right: 30px;
}
.infos-projets-mobile {
  max-width: 90vw;
  margin-bottom: 40px;
}
@media (max-width: 1000px) {
  .infos-projet {
    max-width: 90vw;
    position: relative;
    right: 0px;
    order: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 20px;
  }
}
.infos-about {
  left: 30px;
  max-width: 50vw;
}
.infos-bottom {
  position: fixed;
  bottom: 30px;
}
@media (max-width: 1000px) {
  .infos-about {
    left: 0px;
    max-width: 90vw;
  }
  .infos-bottom {
    max-width: 90vw;
  }
}
.retour-projets {
  position: fixed;
  bottom: 30px;
  right: 30px;
  line-height: 0px;
  font-family: "isenheim-thin", Arial, Helvetica, sans-serif;
  font-size: 1.5em;
}
@media (max-width: 1000px) {
  .retour-projets {
    display: flex;
    font-size: 1.2em;
    justify-content: center;
    margin-bottom: 30px;
  }
}
.retour-projets-mobile {
  display: flex;
  font-size: 1.2em;
  justify-content: center;
  color: #bcffc5;
}
@media (max-width: 1000px) {
  .retour-projets {
    position: relative;
    bottom: 0px;
    right: 0px;
  }
}
#a-propos-mobile {
  margin-top: 70px;
  margin-left: 0px;
  margin-right: 0px;
  color: #ffffff;
}
#memoire-button:hover {
  color: #eeeeee;
}
#fanzine-button:hover {
  color: #bcffc5;
}
#tempete-button:hover {
  color: #7086ff;
}
#deambulations-button:hover {
  color: #bfefe9;
}
#vision-button:hover {
  color: #d2caba;
}
#see-u-button:hover {
  color: #ffefb5;
}
#see-u-3-button:hover {
  color: #ff615e;
}
#stan-button:hover {
  color: #ffffff;
}
#photographie-button:hover {
  color: #ffffff;
}
#photos-button:hover {
  color: #ffffff;
}
#fabric-button:hover {
  color: #d6ebe2;
}
#vacarme-button:hover {
  color: #cbe6fd;
}
#ange-button:hover {
  color: #e7c3c0;
}

/* BUTTONS */
.buttonContainer {
  position: fixed;
  margin: 0px;
  height: 100vh;
  width: 100vw;
  display: flex;
  background-color: #7086ff;
  align-items: center;
  justify-content: space-between;
}
.arrowButton {
  width: 30px;
  height: 30px;
  font-size: 1.5em;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}
#memoireImageContainer {
  width: 80vw;
  height: 80vh;
  background-color: #bcffc5;
}