@charset "UTF-8";
/* 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 */
/*--------------------------------------------------------------
HERO
--------------------------------------------------------------*/
.hero {
  text-align: left;
}
.hero .image {
  max-width: 16rem;
  border-radius: 50%;
  aspect-ratio: 1;
  -o-object-fit: cover;
     object-fit: cover;
}
.hero .image img {
  border-radius: 50%;
}
@media (min-width: 1170px) {
  .hero .image {
    max-width: 22rem;
  }
}

/*--------------------------------------------------------------
LE DESSIN D'OBSERVATION
--------------------------------------------------------------*/
.dessin {
  background-color: #C8542F;
  color: #F7F0EA;
  position: relative;
  z-index: 0;
  margin-top: 2rem;
  padding-top: 0;
}
.dessin__vague {
  position: absolute;
  top: -3.5rem;
  left: 0;
  width: 100%;
  height: 4rem;
  fill: #C8542F;
  z-index: -1;
}
@media (min-width: 1170px) {
  .dessin__vague {
    height: 6rem;
    top: -5.5rem;
  }
}
.dessin::after {
  content: "";
  position: absolute;
  top: -3rem;
  right: 5%;
  width: 6rem;
  height: 6rem;
  background: url("../img/fleur1-jaune.svg") no-repeat center/contain;
}
@media (min-width: 1170px) {
  .dessin::after {
    top: -4rem;
    right: 5%;
    width: 9rem;
    height: 9rem;
  }
}
.dessin .image {
  position: relative;
}
@media (min-width: 1170px) {
  .dessin .image {
    width: 40%;
  }
}
.dessin .image::before {
  content: "";
  position: absolute;
  bottom: -3.5rem;
  left: -3rem;
  width: 8rem;
  height: 8rem;
  background: url("../img/fleur2-bleue.svg") no-repeat center/contain;
}
@media (min-width: 1170px) {
  .dessin .image::before {
    bottom: -4.5rem;
    left: -5rem;
    width: 10rem;
    height: 10rem;
  }
}
.dessin .image::after {
  content: "";
  position: absolute;
  top: -3rem;
  right: -2rem;
  width: 6rem;
  height: 6rem;
  background: url("../img/petale-jaune.svg") no-repeat center/contain;
}
@media (min-width: 1170px) {
  .dessin .image::after {
    top: -3rem;
    right: -4rem;
    width: 7rem;
    height: 7rem;
  }
}
.dessin__titre::after {
  background: url("../img/vague-jaune.svg") no-repeat left center/contain;
}

/*--------------------------------------------------------------
ILLUSTRER POUR TRANSMETTRE
--------------------------------------------------------------*/
@media (min-width: 1170px) {
  .transmettre .image {
    width: 40%;
  }
}

/*--------------------------------------------------------------
DU TOUT PETIT AU TRÈS GRAND FORMAT
--------------------------------------------------------------*/
.format {
  background-color: #C4DFE0;
  position: relative;
  overflow: hidden;
}
@media (min-width: 1170px) {
  .format {
    overflow: visible;
  }
}
.format::before {
  content: "";
  position: absolute;
  bottom: -1rem;
  left: -0.5rem;
  width: 6rem;
  height: 6rem;
  background: url("../img/fleur2-orange.svg") no-repeat center/contain;
  z-index: 2;
}
@media (min-width: 1170px) {
  .format::before {
    bottom: initial;
    top: -2rem;
    left: 4%;
    width: 9rem;
    height: 9rem;
    z-index: 0;
  }
}
@media (min-width: 1500px) {
  .format::before {
    top: -3rem;
    left: 12%;
    width: 12rem;
    height: 12rem;
  }
}
.format::after {
  content: "";
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 4rem;
  height: 4rem;
  background: url("../img/fleur-blanche.svg") no-repeat center/contain;
}
@media (min-width: 1170px) {
  .format::after {
    top: 4rem;
    right: 5%;
    width: 9rem;
    height: 9rem;
  }
}
.format__visuel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  max-width: 26rem;
  z-index: 1;
}
@media (min-width: 1170px) {
  .format__visuel {
    width: 45%;
    max-width: none;
  }
}
.format__galerie {
  display: flex;
  gap: 0.75rem;
}
.format__galerie-item {
  width: calc(25% - 0.5625rem);
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0 !important;
}

/*--------------------------------------------------------------
UNE AVENTURE COLLECTIVE
--------------------------------------------------------------*/
.collectif {
  text-align: center;
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
@media (min-width: 1170px) {
  .collectif {
    gap: 1rem;
  }
}
.collectif__logo {
  width: 9rem;
  -o-object-fit: contain;
     object-fit: contain;
  margin: 0 auto;
}
.collectif__titre::after {
  left: 50%;
  transform: translateX(-50%);
  background-position: center;
}
.collectif__texte {
  max-width: 40rem;
  margin: 0 auto;
}
.collectif .btn {
  margin: 1rem auto 0;
}