/* TEXT & FONTS */
h2 {
  text-transform: uppercase;
  max-width: 850px;
  font-size: 3em;
  padding: 25vh 0 10vh 0;
}
.sous-titre {
  text-transform: uppercase;
  max-width: 850px;
  font-size: 1.6em;
  font-weight: 200;
  padding: 0 0 20vh 0;
}
@media (max-width: 700px) {
  h2 {
    padding: 15vh 0 5vh 0;
    font-size: 2.5em;
  }
  .sous-titre {
    padding: 0 0 10vh 0;
    font-size: 1.4em;
  }
}

h3 {
  font-size: 2.5em;
  font-weight: 200;
  letter-spacing: 8px;
 
}
h4 {
  font-size: 1.8em;
  font-weight: 600;
}
h5 {
  font-size: 1.2em;
  text-transform: uppercase;
}
article p {
  max-width: 850px;
  font-size: 1em;
  line-height: 1.6;

}

/* TOP - DATAS */
.top-data {
  display: flex;
  position: absolute;
  flex-direction: column;
  top:  1vw;
  right: 1vw;
  text-align: right;
  font-size: 1em;
  font-weight: bold;
}
@media (max-width: 700px) {
  .top-data {
    top: 15vh;
    right: 3vw;
  }
}


/* ARTICLES - Detailed */
article {
  position: relative;
  padding: 0 1vw 0 0;
  width: 70vw;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden ;
  scrollbar-color: hsla(0, 0%, 0%, 0.5) #0000;
  scrollbar-width: thin;
  }

@media (prefers-color-scheme: dark) {
  article {
    scrollbar-color: hsla(0, 0%, 100%, 0.5) #0000;
  }
@media (max-width: 700px) {
  article {
    width: 100vw;
  }
}

@media (max-width: 700px) {
  article {
    width: 100vw;
    padding: 17vh 3vw 0 3vw;
  }
}

  /* SCROLL SPECIFIC */
@media (max-width: 700px) {
  article {
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
  }

  article::-webkit-scrollbar {
      display: none; /* for Chrome, Safari, and Opera */
  }
}
.paragraph-spacer {
  height: 15vh;
}


/* IMAGES */
article img {
  max-width: 850px;
}
@media (max-aspect-ratio: 12/11) {
  article img {
    width: 70vw;
  }
}
@media (max-width: 700px) {
  article img {
    position: relative;
    left: -3vw;
    width: 100vw;
  }
}

/* MACARON */
.macaron-container {
  display: flex;
  justify-content: center;
  max-width: 850px;
  height: 100vh;
}

.macaron {
  position: sticky;
  top: calc(50vh - 75px);
  margin: 10vh;
  background-image: url(/img/logo/logo600/logo-bk-empty-600.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 150px;
  height: 150px;
  mix-blend-mode: overlay;
}
@media (prefers-color-scheme: dark) {
  .macaron {
    background-image: url(/img/logo/logo600/logo-wt-empty-600.png);
  }
}