.s08-scene {
  background: var(--sable);
}

.s08-contenu {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(.6rem, 2vh, 1.5rem);
  padding: clamp(72px, 9vh, 96px) var(--gouttiere) clamp(16px, 3vh, 32px);
}

.s08-titre {
  max-width: var(--conteneur);
  margin: 0;
  font-family: var(--police-titre);
  font-stretch: var(--large-titre);
  font-size: var(--t-section);
  line-height: 1.12;
  color: var(--encre);
  text-transform: uppercase;
}

.s08-ligne {
  display: block;
  font-weight: 400;
}

.s08-ligne--pleine {
  font-weight: 900;
}

.s08-etiquettes {
  position: relative;
  height: 2.4em;
}

.s08-etiquette {
  position: absolute;
  left: 0;
  top: 0;
  padding: .5em .85em;
  font-family: var(--police-mono);
  font-size: var(--t-petit);
  letter-spacing: .02em;
  color: var(--clair);
  background: var(--encre);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}

.s08-etiquette--phase2 {
  background: var(--ok);
  color: var(--encre);
}

.s08-etiquette--visible {
  opacity: 1;
  transform: translateY(0);
}

.s08-rangees {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(.5rem, 1.6vh, 1.5rem);
  flex: 1 1 auto;
  min-height: 0;
}

.s08-rangee {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: clamp(3px, .5vw, 7px);
  height: clamp(56px, min(14vw, 13vh), 150px);
}

.s08-barre {
  position: relative;
  flex: 0 0 auto;
  width: clamp(3px, .5vw, 6px);
  height: var(--s08-h, 60%);
  background: color-mix(in srgb, var(--encre) 25%, transparent);
  border-radius: var(--rayon);
  opacity: var(--s08-estompage, 1);
  transition: opacity .5s var(--ease);
}

.s08-bloc {
  position: relative;
  flex: 0 0 auto;
  width: calc(clamp(3px, .5vw, 6px) * 9 + clamp(3px, .5vw, 7px) * 8);
  height: 72%;
  display: flex;
  align-items: flex-start;
  padding: .4em .5em;
  font-family: var(--police-mono);
  font-size: var(--t-micro);
  letter-spacing: .02em;
  line-height: 1.2;
  color: var(--clair);
  border-radius: var(--rayon);
  opacity: 0;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}

.s08-bloc--alerte {
  background: var(--alerte);
  color: var(--encre);
}

.s08-bloc--turquoise {
  background: var(--turquoise);
  color: var(--encre);
}

.s08-bloc--ok {
  background: var(--ok);
  color: var(--encre);
}

.s08-bloc--visible {
  opacity: 1;
  transform: scaleY(1);
}

@media (prefers-reduced-motion: reduce) {
  .s08-etiquette,
  .s08-barre,
  .s08-bloc {
    transition: none;
  }
}

@media (max-width: 760px) {
  .s08-contenu {
    padding: clamp(72px, 18vw, 88px) var(--gouttiere) clamp(16px, 5vw, 28px);
    gap: .6rem;
    justify-content: flex-start;
  }

  .s08-titre {
    font-size: var(--t-section);
  }

  .s08-etiquettes {
    height: 2em;
  }

  .s08-etiquette {
    font-size: var(--t-micro);
  }

  .s08-rangees {
    gap: .75rem;
  }

  .s08-rangee {
    height: 56px;
    gap: 2px;
  }

  .s08-barre {
    width: 2px;
  }

  .s08-bloc {
    font-size: 10px;
  }
}