.hero {
    padding-block: var(--l);
    position: relative;
    --gap: var(--xl);
}
.hero__titre p:not(.adv__h2__tag) {
    max-width: 50ch;
}
.adv__h2__tag {
    background-color: var(--color-r1);
    color: var(--color-black);
    text-transform: unset;
    margin: unset;
}
h1 {
    color: var(--color-r3);
}
.hero__titre h1,
.hero__titre p {
    text-align: left;
}
.infos__container {
    padding: 2rem 3rem;
    column-count: 2;
    column-gap: 2rem;
}
.infos__circo {
    break-inside: avoid;
    color: var(--color-white);
}
.infos__circo .h5 {
    color: var(--color-y2);
}
@media (max-width: 992px) {
  .hero {
    flex-direction: column;
  }
  .hero > * {
    width: unset;
  }
}