/* FONT FACE */
@font-face {
  font-family: "Goldplay Alt";
  src: url("../fonts/Goldplay/Goldplay Alt Regular.otf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Goldplay Alt";
  src: url("../fonts/Goldplay/Goldplay Alt Bold.otf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Goldplay Alt";
  src: url("../fonts/Goldplay/Goldplay Alt Black.otf") format("truetype");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Goldplay Alt";
  src: url("../fonts/Goldplay/Goldplay Alt Medium.otf") format("truetype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Goldplay Alt";
  src: url("../fonts/Goldplay/Goldplay Alt Light.otf") format("truetype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Goldplay Alt";
  src: url("../fonts/Goldplay/Goldplay Alt Italic.otf") format("truetype");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Gilroy";
  src: url("../fonts/gilroy/Gilroy-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Gilroy";
  src: url("../fonts/gilroy/Gilroy-RegularItalic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Gilroy";
  src: url("../fonts/gilroy/Gilroy-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Gilroy";
  src: url("../fonts/gilroy/Gilroy-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
}
/* VARIABLES */
/*--------------------------------------------------------------
PROJET
--------------------------------------------------------------*/
.projet {
  text-align: left;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
@media (min-width: 1170px) {
  .projet {
    padding-top: 10rem;
  }
}
.projet::before {
  content: "";
  position: absolute;
  top: -4rem;
  right: -4rem;
  width: 14rem;
  height: 14rem;
  border-radius: 50%;
  background-color: #C4DFE0;
  z-index: -1;
}
@media (min-width: 1170px) {
  .projet::before {
    width: 20rem;
    height: 20rem;
    top: -6rem;
    right: -6rem;
  }
}
.projet::after {
  content: "";
  position: absolute;
  bottom: 2rem;
  right: 2%;
  width: 5rem;
  height: 5rem;
  background: url("../img/fleur1-jaune.svg") no-repeat center/contain;
  z-index: 1;
}
@media (min-width: 1170px) {
  .projet::after {
    bottom: 2rem;
    right: 5%;
    width: 8rem;
    height: 8rem;
  }
}
@media (min-width: 1500px) {
  .projet::after {
    right: 14%;
  }
}
.projet__titre {
  position: relative;
  padding-bottom: 1.5rem;
  margin-bottom: 1rem;
}
.projet__titre::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 3rem;
  height: 0.6rem;
  background: url("../img/vague-jaune.svg") no-repeat center/contain;
}
.projet__accroche {
  font-size: 1.125rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
}
@media (min-width: 1170px) {
  .projet__accroche {
    font-size: 1.25rem;
  }
}
.projet__texte {
  font-size: 0.875rem;
}
.projet__texte p {
  margin-bottom: 1rem;
}
.projet__texte p:last-child {
  margin-bottom: 0;
}
.projet .image {
  max-width: 100%;
  max-height: 20rem;
}
@media (min-width: 1170px) {
  .projet .image {
    max-width: 25rem;
    max-height: 25rem;
  }
}

/*--------------------------------------------------------------
GALERIE
--------------------------------------------------------------*/
.galerie {
  position: relative;
  z-index: 0;
  -moz-columns: 1;
       columns: 1;
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}
.galerie::before {
  content: "";
  position: absolute;
  top: 0;
  left: -2%;
  width: 5rem;
  height: 5rem;
  transform: scaleX(-1);
  background: url(../img/fleur2-jaune.svg) no-repeat center/contain;
  z-index: -1;
}
@media (min-width: 768px) {
  .galerie::before {
    left: 5%;
    width: 6rem;
    height: 6rem;
  }
}
@media (min-width: 1170px) {
  .galerie::before {
    left: 4%;
    width: 8rem;
    height: 8rem;
  }
}
@media (min-width: 1500px) {
  .galerie::before {
    left: 13%;
    width: 9rem;
    height: 9rem;
  }
}
.galerie__lien {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
  margin-bottom: 1.5rem;
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}
.galerie__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1.5rem;
  transition: transform 0.3s ease;
}
.galerie__lien:hover .galerie__image, .galerie__lien:focus-visible .galerie__image {
  transform: scale(1.03);
}
@media (min-width: 530px) {
  .galerie {
    -moz-columns: 2;
         columns: 2;
  }
}
@media (min-width: 1024px) {
  .galerie {
    -moz-columns: 3;
         columns: 3;
    -moz-column-gap: 2rem;
         column-gap: 2rem;
  }
  .galerie__lien {
    margin-bottom: 2rem;
  }
}

/*--------------------------------------------------------------
LIGHTBOX
--------------------------------------------------------------*/
.lightbox {
  position: fixed;
  inset: 0;
  margin: auto;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  max-width: 90vw;
  max-height: 90vh;
  padding: 0;
  border: none;
  background: none;
  overflow: visible;
}
.lightbox::backdrop {
  background-color: rgba(82, 73, 63, 0.85);
}
.lightbox__image {
  display: block;
  width: auto;
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 1.5rem;
}
.lightbox__fermer, .lightbox__precedent, .lightbox__suivant {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: #F7F0EA;
  color: #52493F;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.lightbox__fermer:hover, .lightbox__fermer:focus-visible, .lightbox__precedent:hover, .lightbox__precedent:focus-visible, .lightbox__suivant:hover, .lightbox__suivant:focus-visible {
  background-color: #C8542F;
  color: #F7F0EA;
}
.lightbox__fermer {
  top: 0.5rem;
  right: 0.5rem;
}
.lightbox__precedent, .lightbox__suivant {
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
}
.lightbox__precedent {
  left: 0.5rem;
}
.lightbox__suivant {
  right: 0.5rem;
}