/* neoria-v3. Typo brutale, rail lateral. Tokens du socle, pas de jumeaux. */

html,
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

html body main {
  padding: 0;
}

html:not(.socle-defilement):not([data-socle-composants]) [data-appear] {
  opacity: 1;
  transform: none;
}

.saut {
  position: absolute;
  left: var(--gutter);
  top: 0;
  z-index: 80;
  transform: translateY(-120%);
  padding: 0.6rem 0.9rem;
  background: var(--accent);
  color: var(--accent-fg);
  text-decoration: none;
}

.saut:focus {
  transform: none;
}

.tete {
  background: transparent;
  border-bottom-color: transparent;
}

.page-404 .tete {
  background: var(--veil);
  border-bottom-color: var(--line);
}

html[data-hero-etat="2"] .tete,
html[data-hero-etat="3"] .tete {
  background: var(--veil);
  border-bottom-color: var(--line);
}

.acte {
  position: relative;
  box-sizing: border-box;
}

.acte--hero {
  height: 240vh;
}

.acte--hero .chapitre-pin {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;
  padding-top: var(--header-offset);
  padding-right: max(var(--gutter), var(--safe-right));
  padding-bottom: max(2rem, var(--safe-bottom));
  padding-left: max(var(--gutter), var(--safe-left));
}

.hero__fond {
  position: absolute;
  right: max(-6vw, -2rem);
  bottom: 6vh;
  z-index: 0;
  margin: 0;
  font-size: min(42vw, 18rem);
  line-height: 0.72;
  letter-spacing: -0.06em;
  color: var(--fg-faint);
  opacity: 0.16;
  pointer-events: none;
  user-select: none;
}

.hero__index,
.hero__titre,
.hero__sous,
.hero__actes {
  position: relative;
  z-index: 1;
}

.hero__index {
  margin: 0 0 1.2rem;
  color: var(--fg-mute);
}

.hero__titre {
  margin: 0;
  display: grid;
  gap: 0.04em;
  transform: translate3d(0, calc(var(--p, 0) * -6vh), 0);
}

.hero__l {
  display: block;
  margin: 0;
  font-size: var(--fs-4xl);
  white-space: nowrap;
  transition:
    color var(--dur-appear) var(--ease-appear),
    opacity var(--dur-appear) var(--ease-appear),
    letter-spacing var(--dur-appear) var(--ease-appear),
    transform var(--dur-appear) var(--ease-appear);
}

.hero__l--verbe {
  font-weight: var(--fw-regular);
}

.hero__sous {
  margin: 1.25rem 0 0;
  max-width: 36ch;
  color: var(--fg);
}

.hero__actes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 1.5rem 0 0;
}

.hero[data-etat="1"] [data-ligne="1"],
.hero[data-etat="1"] [data-ligne="2"] {
  color: var(--fg-mute);
  letter-spacing: 0.03em;
}

.hero[data-etat="1"] [data-ligne="3"] {
  color: var(--accent);
}

.hero[data-etat="2"] [data-ligne="1"],
.hero[data-etat="2"] [data-ligne="2"],
.hero[data-etat="3"] [data-ligne="1"],
.hero[data-etat="3"] [data-ligne="2"] {
  color: var(--fg-mute);
  opacity: 0.28;
  transform: translate3d(0, -10%, 0);
}

.hero[data-etat="2"] [data-ligne="3"],
.hero[data-etat="3"] [data-ligne="3"] {
  color: var(--accent);
  transform: translate3d(0, -4%, 0);
}

.hero[data-etat="3"] .hero__sous,
.hero[data-etat="3"] .hero__actes {
  opacity: 0.72;
}

@media (min-width: 720px) {
  .hero__l {
    font-size: max(var(--fs-4xl), 7.4vw);
  }
}

.acte--preuves {
  display: grid;
  gap: 4.5rem var(--gutter);
  padding: 18vh max(var(--gutter), var(--safe-right)) 16vh max(var(--gutter), var(--safe-left));
  border-top: 1px solid var(--line);
}

.preuve-bloc {
  margin: 0;
  min-width: 0;
}

.preuve-bloc .t-meta {
  margin: 0 0 0.7rem;
  color: var(--fg-mute);
}

.preuve-bloc .t-display {
  margin: 0;
  font-size: max(var(--fs-4xl), 16vw);
}

.preuve-bloc .t-headline,
.preuve-bloc .t-title {
  margin: 0.15em 0 0;
}

.preuve-bloc .t-title {
  color: var(--fg-mute);
}

.filet {
  margin: 0;
  max-width: 28ch;
  color: var(--fg);
}

@media (min-width: 900px) {
  .acte--preuves {
    grid-template-columns: 1fr 1fr;
    gap: 6rem 4vw;
  }

  .preuve-bloc .t-display {
    font-size: max(var(--fs-4xl), 9vw);
  }

  .filet {
    grid-column: 1 / -1;
  }
}

.acte--rail {
  padding: 8vh 0 6vh;
  border-top: 1px solid var(--line);
}

.rail__tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-inline: max(var(--gutter), var(--safe-left)) max(var(--gutter), var(--safe-right));
  margin-bottom: 1.25rem;
}

.rail__tete .t-kicker,
.rail__tete .t-meta {
  margin: 0;
}

.rail__tete .t-meta {
  color: var(--fg-mute);
}

html .rail {
  gap: var(--gutter);
  padding-inline: max(var(--gutter), var(--safe-left)) max(var(--gutter), var(--safe-right));
  scrollbar-width: none;
}

html .rail::-webkit-scrollbar {
  display: none;
}

html .rail > .carte,
html .rail > .rail__item {
  flex: 0 0 80vw;
  max-width: none;
  scroll-snap-align: start;
}

.acte--rail .carte {
  gap: 1rem;
}

.acte--rail .carte__media {
  background: var(--bg-mute);
}

.acte--rail .carte__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.acte--rail .carte__corps {
  gap: 0.35rem;
}

.acte--rail .t-display {
  margin: 0;
  font-size: max(var(--fs-3xl), 8vw);
}

.acte--rail .t-body,
.acte--rail .t-caption {
  margin: 0;
}

.acte--rail .t-caption {
  color: var(--fg-mute);
}

.acte--rail .carte.is-courant .t-display {
  color: var(--accent);
}

.rail__piste {
  position: relative;
  height: 2px;
  margin: 1.5rem max(var(--gutter), var(--safe-right)) 0 max(var(--gutter), var(--safe-left));
  background: var(--line);
}

.rail__curseur {
  display: block;
  width: 33.333%;
  height: 100%;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(var(--rail, 0));
}

.acte--ecrire {
  padding: 18vh max(var(--gutter), var(--safe-right)) 12vh max(var(--gutter), var(--safe-left));
  border-top: 1px solid var(--line);
}

.acte--ecrire .t-display {
  margin: 0 0 2.5rem;
  max-width: 12ch;
}

.acte--ecrire .formulaire {
  max-width: 28rem;
}

.acte--ecrire [data-form-ok] {
  margin: 0.4rem 0 0;
  color: var(--fg);
}

.acte--ecrire [data-form-ok][hidden] {
  display: none;
}

.pied {
  background: var(--bg);
}

.page-404 {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.page-404 main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--header-offset) max(var(--gutter), var(--safe-right)) 12vh
    max(var(--gutter), var(--safe-left));
}

.page-404 .t-display {
  margin: 0;
  font-size: max(var(--fs-4xl), 22vw);
}

.page-404 .t-headline {
  margin: 0.2em 0 1.5rem;
}

.page-404 .t-body {
  margin: 0 0 1.5rem;
}

.page-404 .hero__actes {
  margin: 0;
}

@media (max-width: 600px) {
  html .tete__nav {
    display: flex;
  }

  html .tete__nav a {
    padding-inline: 0.45rem;
  }

  .hero__l {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .acte--hero {
    height: auto;
  }

  .acte--hero .chapitre-pin {
    position: relative;
    height: auto;
    min-height: 100svh;
    overflow: visible;
  }

  .hero__titre,
  .hero__l,
  .hero[data-etat="2"] [data-ligne],
  .hero[data-etat="3"] [data-ligne],
  .rail__curseur,
  [data-progress-shift] {
    transform: none;
    transition: none;
  }

  .hero[data-etat="2"] [data-ligne="1"],
  .hero[data-etat="2"] [data-ligne="2"],
  .hero[data-etat="3"] [data-ligne="1"],
  .hero[data-etat="3"] [data-ligne="2"] {
    opacity: 1;
    color: var(--fg);
  }

  .hero__l--verbe {
    color: var(--accent);
  }
}