* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* background-color: #bbb67c;  */
}

html,
body {
  height: 100%;
  /* overflow-y: hidden; */
}

main {
  display: flex;
  flex-direction: row;
  height: 100vh;
  overflow-x: auto;
  color: rgb(124, 124, 124);
  /* background: linear-gradient(135deg, #bab691 0%, #75818c 100%, #808483 100%); */
}

/* .preface-text p:nth-child(2) {
  margin-left: 100vw;
}

.preface-text p:nth-child(3) {
  margin-left: 200vw;
} */

*:has(.scroller) {
  position: relative;
}

.scroller-target {
  position: absolute;
  top: 0;
  transform: translateY(200vh);
}

img#appart {
  width: 50%;
  /* margin-left: 25%; */
}

.textes {
  flex: 0 0 auto;
  height: 100vh;
  display: flex;
  color: #4f5d3a;
  display: inline-block;
  /* text-shadow: 1px 0 10px #817954; */
}

.textes .zone {
  display: flex;
  flex-direction: row;
  width: max-content;
}

.textes p {
  transform: translateX(calc(var(--i) * 50vw));
  max-width: 85ch;
  font-size: 1.8rem;
  font-family: "gensco";
  text-align: justify;
  text-justify: inter-character;
  animation: spacing 40s linear;
  /* animation-delay: 2s; */
  /* height  40s linear; */


/* vers la fin */
  /* animation: spacing 2.4s linear; */
}


@keyframes spacing {

  0% {
    letter-spacing: -.3rem;
  }
}


/* vers la fin */
/* @keyframes spacing {
  0% {
    letter-spacing: 10px;
    text-indent: 10px;
  }

  40% {
    letter-spacing: 50px;
    text-indent: 50px;
  }

  80% {
    letter-spacing: 10px;
    text-indent: 10px;
  }


  100% {
    letter-spacing: 10px;
    text-indent: 10px;
  }

} */


/* @keyframes height {

        0% { line-height: 50%; }
        50% { line-height: 100%; }
} */


.textes p:nth-child(even) {
  transform: translateX(calc(var(--i) * 50vw)) translateY(35vh);
  /* border: 2px solid orange; */
}

.textes p:nth-child(odd):not(:first-child) {
  transform: translateX(calc(var(--i) * 50vw)) translateY(10vh);
}

.textes p:nth-child(1) {
  margin-top: 50px;
  margin-left: 30vw;
  /* transform: translateX(0); */
}

/* p:nth-last-child(-n + 1){
  border: 2px solid orange;
  margin-left: 30vw;
} */

/* .textes p:nth-child(4n) {
  color: red;
} */

.titres {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  /* justify-content: center;  */
  /* font-size: 10rem; */
  text-transform: uppercase;
}


.titrea {
  font-family: "HNT";
  /* font-family: "germen"; */
  font-size: 10rem;
  width: 100vw;
  /* letter-spacing: -8rem; */
  /* line-height: 1; */
  /* margin: 10% 0 0 10%; */
  /* color: #bbb67c; */
  letter-spacing: -2.5rem;
  filter: url(#filtre-un);
  color: white;
  text-shadow: 6px 6px 8px #817954;
}

/* .titrea span {
  align-items: center;
  display: flex;
} */

.titreb {
  font-family: "HNT";
  filter: url(#filtre-deux);
  font-size: 12rem;
  width: 100vw;
  letter-spacing: -2.2rem;
  /* margin: 10% 0 0 10%; */
  color: #bbb67c3b;
  /* font-family: "semilla"; */
  /* letter-spacing: -8rem; */
  /* line-height: 1; */
  /* color: white;  */
  text-shadow: 4px 1px 4px #817954b6;
}

a,
span {
  font-family: "hershey";
}


@font-face {
  font-family: "germen";
  src: url(FlorDeRuina-Germen.woff2);
}

@font-face {
  font-family: "semilla";
  src: url(FlorDeRuina-Semilla.woff2);
}

@font-face {
  font-family: "gensco";
  src: url(GENSCO.woff2);
}

@font-face {
  font-family: "HNT";
  src: url(Hershey-Noailles-Times-Triplex-Regular.woff2);
}


@font-face {
  font-family: "hershey";
  src: url(Hershey-Noailles-help-me.woff2);
}

/* @font-face {
  font-family: "HNT";
  src: url(/css/Hershey-Noailles-Times-Duplex-Light.woff2);
} */