@font-face {
  font-family: Bourgeois;
  src: url('../fonts/Bourgeois-Medium.woff2') format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Bourgeois;
  src: url('../fonts/Bourgeois-Bold.woff2') format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --black: #0d0d0d;
  --yellow: #d8b473;
  --yellow-rgb: 216, 180, 115;
  --light-050: #ffffff80;
  --blanc: #fff;
}

.w-form-formradioinput--inputType-custom {
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 12px;
  height: 12px;
}

.w-form-formradioinput--inputType-custom.w--redirected-focus {
  box-shadow: 0 0 3px 1px #3898ec;
}

.w-form-formradioinput--inputType-custom.w--redirected-checked {
  border-width: 4px;
  border-color: #3898ec;
}

body {
  background-color: var(--black);
  color: #fff;
  text-transform: uppercase;
  font-family: Bourgeois, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 20px;
}

h1 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 38px;
  font-weight: 500;
  line-height: 44px;
}

h2 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 32px;
  font-weight: 500;
  line-height: 36px;
}

h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: 500;
  line-height: 30px;
}

p {
  letter-spacing: 0;
  text-transform: uppercase;
  margin-bottom: 0;
  font-size: .9375rem;
  line-height: 1.25;
}

a {
  color: #fff;
  text-decoration: none;
}

.link {
  color: #fff;
}

.sg-hero__title {
  text-align: left;
  letter-spacing: -.4rem;
  font-size: 7.5rem;
  line-height: .9;
}

.sg-hero__title.text--large {
  text-align: center;
}

.sg__placeholder {
  text-transform: uppercase;
  background-color: #ffffff1a;
  justify-content: center;
  align-items: center;
  height: 8rem;
  padding: 1.8rem 1rem;
  font-size: .875rem;
  font-weight: 400;
  display: flex;
}

.cookie__text {
  color: #0d0d0d;
  text-transform: none;
  margin-right: 2rem;
  font-weight: 500;
}

.sg__title-wrapper {
  border-bottom: 1px solid #ffffff80;
  justify-content: space-between;
  padding-bottom: 2rem;
  display: flex;
}

.main {
  overflow: visible;
}

.form {
  grid-column-gap: .625rem;
  grid-row-gap: .625rem;
  justify-content: flex-start;
  align-items: stretch;
  display: flex;
}

.form__error-message {
  color: red;
  font-size: .75rem;
  line-height: 1;
}

.title--5 {
  font-size: .75rem;
  line-height: 1.2;
}

.sg-item__color-title {
  font-weight: 700;
}

.form__col {
  border: 1px solid #0000001a;
  flex-flow: column;
  flex: none;
  justify-content: center;
  align-items: flex-start;
  width: 20.375rem;
  padding: 1.125rem 1.5rem;
  display: flex;
}

.link__divider {
  perspective-origin: 100%;
  transform-origin: 100%;
  background-color: #000;
  width: 100%;
  height: 1px;
}

.button {
  background-color: #fff;
  border-radius: .125rem;
  justify-content: center;
  align-items: center;
  padding-left: 1.5rem;
  display: flex;
}

.button.button--tertiary {
  grid-column-gap: .625rem;
  grid-row-gap: .625rem;
  justify-content: flex-start;
  align-items: center;
  padding: .3125rem .625rem .3125rem .3125rem;
  display: flex;
}

.button.button--secondary {
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  color: #fff;
  cursor: pointer;
  background-color: #fff0;
  padding-left: 0;
}

.button.is--secondary {
  background-color: #fff0;
  padding-right: 1.5rem;
}

.button.is--secondary.is--yes {
  padding-left: 0;
  padding-right: 0;
  position: relative;
}

.button.is--secondary.is--no {
  padding-left: 0;
  padding-right: 0;
}

.button.is--main {
  display: none;
}

.sg-item__color-content {
  grid-column-gap: .25rem;
  grid-row-gap: .25rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.form__error-wrapper {
  background-color: #0000;
  border: 1px solid red;
  border-radius: .3125rem;
  margin-top: .625rem;
  padding: .625rem;
}

.sg-item__color-text {
  font-size: .75rem;
}

.cookie__text-wrapper {
  display: flex;
}

.link__text {
  letter-spacing: 0;
  -webkit-text-stroke-color: #0c0c0c;
  text-transform: none;
  font-size: 1rem;
  line-height: 1.4;
}

.text--grey {
  color: #ffffff4d;
}

.col {
  flex: 1;
  padding-left: .5rem;
  padding-right: .5rem;
}

.col.mr-2-col {
  margin-right: 16.666%;
}

.col.col-lg-10 {
  flex: 83.3333%;
  max-width: 83.3333%;
}

.col.col-lg-1 {
  flex: 8.333%;
  max-width: 8.333%;
}

.col.col-lg-7 {
  flex: 58.3333%;
  max-width: 58.3333%;
}

.col.col-lg-11 {
  flex: 91.6667%;
  max-width: 91.6667%;
}

.col.col-lg-5 {
  flex: 41.6667%;
  max-width: 41.6667%;
}

.col.mr-1-col {
  margin-right: 8.333%;
}

.col.col-lg-8 {
  flex: 66.6667%;
  max-width: 66.6667%;
}

.col.ml-1-col {
  margin-left: 8.333%;
}

.col.col-lg-2 {
  flex: 16.6667%;
  max-width: 16.6667%;
}

.col.col-lg-6 {
  flex: 50%;
  max-width: 50%;
}

.col.col-lg-4 {
  flex: 33.3333%;
  max-width: 33.3333%;
}

.col.ml-2-col {
  margin-left: 16.666%;
}

.col.col-lg-9 {
  flex: 75%;
  max-width: 75%;
}

.col.col-lg-12 {
  flex: 100%;
  max-width: 100%;
}

.col.col-lg-3 {
  flex: 25%;
  max-width: 25%;
}

.sg-item__text-wrapper {
  width: 50%;
}

.title--2 {
  letter-spacing: -.1rem;
  text-transform: uppercase;
  font-size: 3.3125rem;
  line-height: .8;
}

.button__text {
  color: #131313;
  font-size: .9375rem;
  font-weight: 700;
}

.button__text.is--secondary {
  color: #878787;
  font-weight: 500;
  position: absolute;
}

.form__label {
  margin-bottom: 0;
  font-size: .75rem;
  font-weight: 400;
}

.section.is--intro {
  height: 100vh;
  margin-top: -40vh;
}

.section.is--tracker {
  width: 100%;
}

.section.is--section {
  width: 100%;
  height: 100vh;
  display: none;
}

.section.is--groupe, .section.is--personnes, .section.is--compare {
  width: 100%;
  height: 100vh;
}

.section.is--timeline {
  width: 100%;
}

.section.is--map {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.section.is--achat {
  padding-bottom: 10rem;
}

.section.is--form {
  min-height: 100dvh;
  position: relative;
}

.section.is--fields {
  height: 100dvh;
  min-height: 100dvh;
  position: relative;
}

.cookie__wrapper {
  background-color: #fff;
  padding: .8125rem 1.25rem;
  display: inline-block;
}

.sg-hero__wrapper {
  padding-top: 18.75rem;
  padding-bottom: 11.25rem;
}

.title--1 {
  text-align: center;
  letter-spacing: 0;
  text-transform: uppercase;
  max-width: 18ch;
  font-size: 3.75rem;
  line-height: .93;
}

.sg__title--large {
  font-size: 1.5rem;
}

.sg-item__wrapper.sg-item__wrapper--no-padding {
  padding-top: 1.25rem;
}

.form__button {
  color: #0d0d0d;
  -webkit-text-stroke-color: black;
  background-color: #fff;
  flex: none;
}

.form__sucess-wrapper {
  background-color: #000;
  border-radius: .3125rem;
  padding: .625rem;
}

.cookie__link {
  color: #0d0d0d;
  text-transform: none;
  font-weight: 500;
}

.cookie__link.cookie__link--accept {
  margin-right: 1rem;
}

.row {
  flex-wrap: wrap;
  align-content: stretch;
  margin-left: -.5rem;
  margin-right: -.5rem;
  display: flex;
}

.row.align-start {
  align-items: flex-start;
  line-height: 1;
}

.row.align-center {
  align-items: center;
}

.row.justify-center {
  justify-content: center;
}

.row.justify-around {
  justify-content: space-around;
}

.row.justify-between {
  justify-content: space-between;
}

.row.justify-between.is--sections, .row.justify-between.is--groupe {
  justify-content: space-between;
  align-items: flex-start;
}

.row.align-stretch {
  align-items: stretch;
}

.row.justify-end {
  justify-content: flex-end;
}

.row.align-end {
  align-items: flex-end;
}

.row.flex-end {
  flex-flow: row;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  margin-top: 7%;
}

.row.flex-start {
  flex-flow: row;
  justify-content: center;
  align-items: flex-start;
}

.row.is--center {
  justify-content: center;
  align-items: center;
  width: 100%;
}

.sg-item__title {
  margin-right: 5rem;
  font-size: 1rem;
}

.sg-hero__text {
  text-transform: none;
  font-size: 2rem;
}

.sg-title__wrapper {
  padding-top: 10rem;
  padding-bottom: 3.75rem;
}

.container {
  width: 100%;
  max-width: 85.75rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 3rem;
  padding-right: 3rem;
}

.container.is--hero {
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  height: 100dvh;
  margin-top: 0;
  padding-top: 0;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  display: flex;
  position: relative;
  overflow: hidden;
}

.container.is--header {
  justify-content: flex-end;
  align-items: center;
  padding-left: 2rem;
  padding-right: 2rem;
  display: flex;
}

.container.is--intro {
  justify-content: center;
  align-items: flex-end;
  padding-top: 24rem;
  padding-bottom: 15rem;
  position: relative;
  overflow: hidden;
}

.container.is--tracker {
  border-top: 1px solid #ffffff1c;
  padding-top: 3rem;
  position: relative;
  overflow: hidden;
}

.container.is--section {
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.container.is--section.is--timeline {
  justify-content: center;
  align-items: center;
  height: auto;
  overflow: visible;
}

.container.is--second {
  justify-content: center;
  align-items: flex-end;
  height: 100%;
  padding-bottom: 10%;
  display: flex;
}

.container.is--fourth {
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  padding-bottom: 7%;
  display: flex;
}

.container.is--third {
  flex-flow: column;
  justify-content: space-between;
  height: 100%;
  padding-top: 7%;
  padding-bottom: 7%;
  display: flex;
}

.container.is--fifth {
  justify-content: center;
  align-items: flex-start;
  height: 100%;
  padding-top: 7%;
  padding-bottom: 7%;
  display: flex;
}

.container.is--map {
  justify-content: flex-start;
  align-items: flex-start;
  height: 100vh;
  display: flex;
  position: relative;
  overflow: hidden;
}

.container.is--achat {
  justify-content: center;
  align-items: flex-start;
  height: 100%;
  padding-top: 5rem;
  display: flex;
  position: relative;
}

.container.is--faq {
  border-top: 1px solid #ffffff26;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 7rem;
  padding-bottom: 10rem;
  display: flex;
}

.container.is--form, .container.is--fields {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-width: none;
  height: 100dvh;
  display: flex;
  position: relative;
}

.form__field {
  color: #fff;
  background-color: #0000;
  border: 1px #000;
  height: 1rem;
  margin-bottom: 0;
  padding: 0;
  font-size: .875rem;
  line-height: 1rem;
}

.form__field:focus {
  border-color: #fff;
}

.form__field::placeholder {
  color: #00000080;
}

.sg-item__color {
  width: 100%;
  height: 15.625rem;
}

.sg-item__color.sg-item__color--dark {
  background-color: #000;
  border: 1px solid #000;
}

.sg-item__color.sg-item__color--support {
  background-color: #f5f3f3;
  border: 1px solid #000;
}

.sg-item__color.sg-item__color--light {
  background-color: #fff;
  border: 1px solid #000;
}

.text--small {
  letter-spacing: 0;
  font-size: 1rem;
  line-height: 1.4rem;
}

.cookie__content {
  align-items: center;
  display: flex;
}

.sg__wrapper {
  padding-top: 6.25rem;
}

.sg-card__wrapper {
  grid-column-gap: 5rem;
  grid-row-gap: 5rem;
  flex-flow: column;
  padding: .625rem .625rem 1rem;
  display: flex;
}

.sg-card__wrapper.sg-card__wrapper--grid {
  grid-column-gap: .625rem;
  grid-row-gap: .625rem;
  justify-content: center;
  align-items: stretch;
}

.sg-card__wrapper.sg-card__wrapper--color {
  grid-column-gap: 3.125rem;
  grid-row-gap: 3.125rem;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: .625rem;
  padding-bottom: 3.125rem;
}

.sg-card__wrapper.sg-card__wrapper--button {
  grid-column-gap: 3.125rem;
  grid-row-gap: 3.125rem;
  justify-content: center;
  align-items: center;
  height: 14.0625rem;
}

.button__image {
  border-radius: .125rem;
  width: 1.625rem;
  height: 1.625rem;
}

.link__text-wrapper {
  position: relative;
  overflow: clip;
}

.title--3 {
  letter-spacing: -.05rem;
  text-transform: none;
  font-size: 1.3125rem;
  line-height: .9;
}

.text--large {
  letter-spacing: -.25rem;
  text-transform: uppercase;
  font-size: 8rem;
  font-weight: 900;
  line-height: .8;
}

.form__wrapper {
  margin-bottom: 0;
}

.sg-item__title-wrapper {
  border-bottom: 1px solid #0000001a;
  align-items: center;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  display: flex;
}

.title--6 {
  letter-spacing: -.02rem;
  font-size: .75rem;
  line-height: .9;
}

.title--4 {
  letter-spacing: -.02rem;
  text-transform: uppercase;
  font-size: .875rem;
  line-height: .9;
}

.css-embed {
  display: none;
}

.page-wrapper {
  position: relative;
  overflow: hidden;
}

.p-hero {
  text-align: center;
  max-width: 41ch;
  font-size: 1rem;
}

.hero-copy-desktop {
  display: none;
}

.hero-mobile-direct-access,
.hero-mobile-discover {
  display: none;
}

.desktop-hero-sequence {
  display: none;
}

.mobile-hero-line-break {
  display: none;
}

.hero-vsl-inline__fullscreen {
  display: none;
}

.desktop-tracker-levels {
  display: none;
}

@media screen and (min-width: 992px) {
  .section.is--tracker .wrapper-p {
    width: min(36rem, 43vw);
  }

  .section.is--tracker .wrapper-p > .text-section {
    max-width: none;
    width: 100%;
  }

  .section.is--tracker .tracker-wrapper,
  .section.is--tracker .wait-message > span {
    translate: 2.5rem -2.5rem;
  }

  .section.is--tracker .svg-wrapper {
    flex-direction: row;
    align-items: center;
    gap: .75rem;
    color: #8c8c8c;
  }

  .desktop-tracker-levels {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-top: 3rem;
  }

  .desktop-tracker-levels__row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 1.5rem;
  }

  .desktop-tracker-levels__level {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    min-width: 0;
    padding: 1rem 0 .5rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--blanc, #fff);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: color .18s ease;
  }

  .desktop-tracker-levels__level + .desktop-tracker-levels__level::before {
    content: '';
    position: absolute;
    top: 1rem;
    bottom: .5rem;
    left: -.75rem;
    width: 1px;
    background: #ffffff26;
    pointer-events: none;
  }

  .desktop-tracker-levels__level:hover,
  .desktop-tracker-levels__level[aria-expanded="true"] {
    color: var(--yellow);
  }

  .desktop-tracker-levels__level:focus-visible {
    outline: 1px solid var(--yellow);
    outline-offset: 3px;
  }

  .desktop-tracker-levels .mobile-engagement__rank-icon {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;
  }

  .desktop-tracker-levels .mobile-engagement__name {
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    line-height: 1.1;
  }

  .desktop-tracker-levels__habit-count {
    color: var(--light-050);
    font-size: .9375rem;
    line-height: 1.25;
  }

  .desktop-tracker-levels__details {
    min-height: 6rem;
    padding-top: .5rem;
    font-size: 1.125rem;
    line-height: 1.4;
  }

  .desktop-tracker-levels p {
    margin: 0;
  }

  .desktop-tracker-levels .mobile-engagement__habit-summary {
    color: var(--yellow);
  }

  .desktop-tracker-levels .mobile-engagement__detail {
    margin-top: .5rem;
    color: var(--light-050);
  }
}

@media screen and (min-width: 768px) {
  .container.is--tracker {
    border-top: 0;
    overflow: visible;
  }

  .text-wrapper-map .t-title-network,
  .text-wrapper-spotify .t-title,
  .text-wrapper-barca .t-title {
    letter-spacing: -.02em;
    font-size: 3.5rem;
    line-height: .9;
  }

  .text-wrapper-map .desktop-network-comma {
    display: inline;
  }

  .text-wrapper-spotify .testimonials-followup {
    width: 27rem;
    margin: 1.5rem 0 0;
  }

  .text-wrapper-spotify .lower-wrapper {
    margin-top: 1.25rem;
  }

  .text-wrapper-spotify .spotify-count > div {
    position: relative;
    top: -.35rem;
  }

  .timeline-panel.is--1.is--desktop-merged-preparation {
    padding-top: 5.25rem;
  }

  .section.is--fields.is--terminal-offers .link-container {
    width: min(100%, 28rem);
    max-width: 28rem;
    gap: .75rem;
    display: flex;
  }

  .section.is--fields.is--terminal-offers
  .link-container .link-pay {
    color: #fff;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 0;
    flex: 1 1 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    width: auto;
    height: auto;
    min-height: min-content;
    padding: 1.75rem 1rem;
    display: flex;
    overflow: hidden;
  }

  .section.is--fields.is--terminal-offers
  .link-container .link-pay::before {
    left: -100%;
    transition: none;
    animation: none;
  }

  .section.is--fields.is--terminal-offers
  .link-container .link-pay:hover::before {
    left: -100%;
    animation: desktop-offer-card-sweep .55s ease-out forwards;
  }

  @keyframes desktop-offer-card-sweep {
    from {
      left: -100%;
    }

    to {
      left: 100%;
    }
  }

  .section.is--fields.is--terminal-offers
  .link-container .link-pay__icon {
    color: rgba(var(--yellow-rgb, 216, 180, 115), .9);
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
  }

  .section.is--fields.is--terminal-offers
  .link-container .link-pay__icon svg {
    width: 100%;
    height: 100%;
  }

  .section.is--fields.is--terminal-offers
  .link-container .link-pay__icon.is--group {
    width: 3.65rem;
  }

  .section.is--fields.is--terminal-offers
  .link-container .link-pay__label {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 1rem;
    font-weight: 600;
    display: block;
  }

  .section.is--fields.is--terminal-offers
  .link-container .link-pay__divider {
    background-color: rgba(255, 255, 255, .25);
    width: 2.5rem;
    height: 1px;
    margin: .35rem 0;
    display: block;
  }

  .section.is--fields.is--terminal-offers
  .link-container .link-pay__meta {
    color: var(--light-050);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .75rem;
    display: block;
  }

  .section.is--tracker .big-title-section,
  .section.is--tracker .wrapper-p {
    position: relative;
    top: -5rem;
  }

  .barcelona-mobile-details {
    z-index: 100;
    pointer-events: none;
    flex-direction: column;
    align-items: flex-start;
    width: 27rem;
    max-height: none;
    padding: 0;
    display: flex;
    position: absolute;
    overflow: visible;
  }

  .barcelona-mobile-immersions-intro {
    width: 100%;
    margin: 0;
    font-size: .875rem;
    line-height: 1.45;
  }

  .barcelona-mobile-immersions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    width: 100%;
    margin-top: .85rem;
    display: grid;
  }

  .barcelona-mobile-immersion {
    color: rgba(255, 255, 255, .78);
    border: 1px solid rgba(255, 255, 255, .12);
    border-left-color: rgba(var(--yellow-rgb, 216, 180, 115), .78);
    background: rgba(18, 18, 18, .72);
    min-height: 2.8rem;
    padding: .62rem .7rem;
    font-size: .75rem;
    line-height: 1.15;
    display: flex;
    align-items: center;
    gap: .6rem;
  }

  .barcelona-mobile-immersion__pictogram {
    color: #d8b473;
    width: 1.3rem;
    height: 1.3rem;
    flex: none;
    display: block;
  }

  .barcelona-mobile-immersion__pictogram svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
    overflow: visible;
  }

  .barcelona-mobile-immersion__label {
    min-width: 0;
  }

  body .text-wrapper-date.is--date-card .paragraph:first-of-type {
    width: auto;
    font-size: 1.1rem;
    text-align: center;
    white-space: nowrap;
  }

  body .text-wrapper-date.is--date-card .paragraph:last-of-type {
    width: auto;
    font-size: 1rem;
    text-align: center;
    white-space: nowrap;
  }

  body .text-wrapper-date.is--date-card {
    justify-content: center;
    text-align: center;
    /* Temporary desktop-only hide; keep the card intact for later reuse. */
    display: none !important;
  }

  body .text-wrapper-date.is--date-card .lineInner {
    width: 100%;
    text-align: center !important;
  }

  .container.is--hero .hero-content {
    width: 100%;
    text-align: center;
  }

  .container.is--hero .hero-content .title--1,
  .container.is--hero .hero-content .p-hero {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .container.is--hero .hero-copy-desktop {
    display: block;
  }

  .container.is--hero .hero-copy-mobile {
    display: none;
  }

  .container.is--hero .hero-copy-desktop .lineInner-mask,
  .container.is--hero .hero-copy-desktop .lineInner {
    display: block;
    text-align: center;
  }

  .container.is--hero .hero-copy-desktop .lineInner-mask {
    overflow: clip;
  }

  .container.is--hero .hero-copy-desktop .lineInner {
    position: relative;
  }

  .hero-mobile-direct-access {
    z-index: 12;
    color: rgba(255, 255, 255, .82);
    visibility: hidden;
    opacity: 0;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: .3rem;
    background: rgba(13, 13, 13, .22);
    text-transform: none;
    letter-spacing: .01em;
    white-space: nowrap;
    align-items: center;
    gap: .5rem;
    padding: .65rem .8rem;
    font-family: Arial, sans-serif;
    font-size: .75rem;
    font-weight: 300;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    display: flex;
    position: absolute;
    top: 2rem;
    right: 2rem;
    transition:
      color .25s ease,
      border-color .25s ease,
      background-color .25s ease;
    backdrop-filter: blur(.35rem);
    -webkit-backdrop-filter: blur(.35rem);
  }

  .hero-mobile-direct-access:hover {
    color: #fff;
    border-color: rgba(var(--yellow-rgb, 216, 180, 115), .72);
    background: rgba(var(--yellow-rgb, 216, 180, 115), .08);
  }

  .hero-mobile-direct-access svg {
    width: 1rem;
    height: 1rem;
    flex: none;
  }

  .hero-mobile-discover {
    z-index: 2;
    color: rgba(255, 255, 255, .9);
    visibility: hidden;
    opacity: 0;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .055em;
    white-space: nowrap;
    font-size: 1rem;
    line-height: 1;
    display: block;
    position: absolute;
    bottom: 6rem;
    left: 50%;
    transform: translateX(-50%);
  }

  .container.is--hero .svg-16 {
    box-sizing: border-box;
    visibility: hidden;
    opacity: 0;
    width: 2.5rem;
    height: 2.5rem;
    bottom: 2.8rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    overflow: visible;
  }

  .container.is--hero .svg-16 .scroll-arrow {
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(1.4);
  }
}

@media screen and (min-width: 992px) {
  .desktop-compare-white-tip {
    position: absolute;
    z-index: 23;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
  }

  .hero-vsl-experience {
    display: contents;
  }

  .hero-vsl-trigger__content {
    align-items: center;
    gap: inherit;
    display: flex;
  }

  .hero-vsl-inline {
    z-index: 11;
    box-sizing: border-box;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    aspect-ratio: 16 / 9;
    background: transparent;
    border: 0;
    border-radius: .22rem;
    box-shadow: none;
    width: min(72vw, 68rem, calc((100dvh - 20rem) * 1.7778));
    overflow: visible;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    transform-origin: top center;
  }

  .hero-vsl-inline iframe,
  .hero-vsl-inline video {
    opacity: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: #050505;
    border-radius: inherit;
  }

  .hero-vsl-inline__frame {
    z-index: 3;
    pointer-events: none;
    position: absolute;
    inset: 0;
  }

  .hero-vsl-inline__frame > span {
    background: rgba(255, 255, 255, .42);
    display: block;
    position: absolute;
    will-change: transform;
  }

  .hero-vsl-inline__frame-top {
    width: 100%;
    height: 1px;
    top: 0;
    left: 0;
    transform-origin: center;
  }

  .hero-vsl-inline__frame-side {
    width: 1px;
    height: 100%;
    top: 0;
    transform-origin: top;
  }

  .hero-vsl-inline__frame-side.is--left {
    left: 0;
  }

  .hero-vsl-inline__frame-side.is--right {
    right: 0;
  }

  .hero-vsl-inline__frame-bottom {
    width: 50%;
    height: 1px;
    bottom: 0;
  }

  .hero-vsl-inline__frame-bottom.is--left {
    left: 0;
    transform-origin: left;
  }

  .hero-vsl-inline__frame-bottom.is--right {
    right: 0;
    transform-origin: right;
  }

  .hero-vsl-inline__close {
    z-index: 2;
    color: rgba(255, 255, 255, .82);
    opacity: 0;
    align-items: center;
    gap: .55rem;
    padding: .5rem .55rem;
    border: 0;
    border-radius: .18rem;
    background: rgba(5, 5, 5, .72);
    font-family: Arial, sans-serif;
    font-size: .58rem;
    font-weight: 300;
    letter-spacing: .075em;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    position: absolute;
    top: .65rem;
    right: .65rem;
    transition: color .2s ease, background-color .2s ease;
    backdrop-filter: blur(.35rem);
    -webkit-backdrop-filter: blur(.35rem);
  }

  .hero-vsl-inline__close:hover {
    color: #fff;
    background: rgba(5, 5, 5, .92);
  }

  .hero-vsl-inline__close:focus-visible {
    outline: 1px solid #fff;
    outline-offset: .35rem;
  }

  .hero-vsl-inline__close-icon {
    width: .9rem;
    height: .9rem;
    position: relative;
    display: block;
  }

  .hero-vsl-inline__close-icon::before,
  .hero-vsl-inline__close-icon::after {
    content: "";
    background: currentColor;
    width: 1px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
  }

  .hero-vsl-inline__close-icon::before {
    transform: rotate(45deg);
  }

  .hero-vsl-inline__close-icon::after {
    transform: rotate(-45deg);
  }

  .section.is--hero-sequence {
    height: 100dvh;
    background: var(--black);
  }

  .section.is--hero-sequence .container.is--hero {
    max-width: none;
    background: var(--black);
  }

  .section.is--hero-sequence .hero-content,
  .section.is--hero-sequence .hero-mobile-direct-access {
    display: none !important;
  }

  .section.is--intro {
    display: none;
  }

  .desktop-hero-sequence {
    visibility: hidden;
    opacity: 0;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    inset: 0;
  }

  .desktop-hero-sequence__titles {
    --desktop-hero-reply-size: 7.0656rem;
    position: absolute;
    /* Keep both messages 20% farther above the short bars. */
    top: auto;
    bottom: calc(12.5rem + .75rem + 3.6rem);
    left: clamp(3rem, 17.88vw, 16.9rem);
    height: calc(var(--desktop-hero-reply-size) * .88 * 3);
  }

  .desktop-hero-sequence__title {
    color: #fff;
    letter-spacing: 0;
    text-align: left;
    text-transform: uppercase;
    width: 14ch;
    max-width: 14ch;
    margin: 0;
    font-size: 4rem;
    font-weight: inherit;
    line-height: .88;
    position: absolute;
    top: 0;
    left: 0;
    will-change: transform, opacity, filter, clip-path;
  }

  .desktop-hero-sequence__title.is--initial {
    width: max-content;
    max-width: none;
    position: absolute;
    top: auto;
    bottom: 0;
    font-size: 100px;
  }

  .desktop-hero-sequence__title-line {
    white-space: nowrap;
    display: block;
  }

  .desktop-hero-sequence__title.is--initial span {
    color: var(--yellow);
    font-size: inherit;
  }

  .desktop-hero-sequence__title.is--final {
    /* Share the question's bottom anchor. */
    top: auto;
    bottom: 0;
    font-size: var(--desktop-hero-reply-size);
    opacity: 0;
    white-space: nowrap;
    width: max-content;
    max-width: none;
  }

  .desktop-hero-sequence__title.is--final span {
    color: inherit;
    font-size: inherit;
    display: inline-block;
  }

  .desktop-hero-sequence__title.is--final .desktop-hero-final-highlight {
    color: var(--yellow);
  }

  .desktop-hero-sequence__chart {
    width: min(64vw, 60.75rem);
    height: min(21rem, 42dvh);
    position: absolute;
    bottom: 12.5rem;
    left: 50%;
    transform: translateX(-50%);
    will-change: transform;
  }

  .desktop-hero-sequence__chart.is--title-aligned {
    transform: none;
  }

  .desktop-hero-sequence__bars {
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    display: flex;
  }

  .desktop-hero-sequence__bars .bar {
    opacity: 0;
    flex: none;
    width: 2px;
    transform: scaleY(0);
    transform-origin: bottom;
  }

  .desktop-hero-sequence__bars .bar:nth-last-child(10) {
    height: 15px;
  }

  .desktop-hero-sequence__bars .bar:nth-last-child(9) {
    height: 25px;
  }

  .desktop-hero-sequence__bars .bar:nth-last-child(8) {
    height: 41px;
  }

  .desktop-hero-sequence__bars .bar:nth-last-child(7) {
    height: 63px;
  }

  .desktop-hero-sequence__bars .bar:nth-last-child(6) {
    height: 92px;
  }

  .desktop-hero-sequence__bars .bar:nth-last-child(5) {
    height: 126px;
  }

  .desktop-hero-sequence__bars .bar:nth-last-child(4) {
    height: 168px;
  }

  .desktop-hero-sequence__bars .bar:nth-last-child(3) {
    height: 216px;
  }

  .desktop-hero-sequence__bars .bar:nth-last-child(2) {
    height: 270px;
  }

  .desktop-hero-sequence__bars .bar:last-child {
    height: 330px;
  }

  .desktop-hero-sequence__final-actions {
    /* These shared controls remain available to the mobile choreography. */
    display: none;
    --desktop-hero-action-text-left: 20.3rem;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
  }

  .desktop-hero-sequence.is--complete .desktop-hero-sequence__title.is--initial {
    visibility: hidden !important;
    opacity: 0 !important;
  }

  .desktop-hero-sequence.is--complete .desktop-hero-sequence__title.is--final,
  .desktop-hero-sequence.is--complete .desktop-hero-sequence__final-actions,
  .desktop-hero-sequence.is--complete .desktop-hero-sequence__bars .bar {
    visibility: visible !important;
    opacity: 1 !important;
  }

  .desktop-hero-sequence.is--complete .desktop-hero-sequence__final-actions {
    transform: translateY(0) !important;
  }

  .desktop-hero-sequence.is--complete .desktop-hero-sequence__bars .bar {
    transform: scaleY(1) !important;
  }

  .desktop-hero-sequence.is--complete .desktop-hero-sequence__scroll {
    visibility: hidden !important;
    opacity: 0 !important;
  }

  .hero-vsl-experience.is--desktop-sequence .hero-vsl-trigger {
    color: rgba(255, 255, 255, .92);
    gap: 0;
    padding: .35rem 0 .4rem;
    font-size: .9375rem;
    font-weight: 400;
    letter-spacing: .035em;
    text-transform: none;
    pointer-events: none;
    top: calc(min(23.5rem, 42dvh) + .45rem);
    left: var(--desktop-hero-action-text-left);
    transform: none;
  }

  .desktop-hero-sequence__final-actions[aria-hidden="false"] .hero-vsl-experience.is--desktop-sequence .hero-vsl-trigger {
    pointer-events: auto;
  }

  .hero-vsl-experience.is--desktop-sequence .hero-vsl-trigger__play {
    color: #fff;
    align-self: center;
    justify-content: center;
    align-items: center;
    width: .82rem;
    height: .82rem;
    margin-left: .75rem;
    border: 0;
    background: transparent;
    display: inline-flex;
    position: static;
  }

  .hero-vsl-trigger__copy {
    gap: .55rem;
    text-transform: none;
    text-align: left;
    display: flex;
    flex-direction: column;
  }

  .hero-vsl-trigger__heading {
    align-items: center;
    display: inline-flex;
    width: max-content;
  }

  .hero-vsl-trigger__label {
    text-transform: uppercase;
    font-size: .9375rem;
    font-weight: 400;
    letter-spacing: .01em;
    line-height: 1;
  }

  .hero-vsl-trigger__subtitle {
    color: rgba(255, 255, 255, .58);
    font-size: .78rem;
    font-weight: 300;
    letter-spacing: 0;
    line-height: 1;
  }

  .hero-vsl-experience.is--desktop-sequence .hero-vsl-trigger__play:before {
    display: none;
  }

  .hero-vsl-experience.is--desktop-sequence .hero-vsl-trigger__play svg {
    z-index: 1;
    width: .82rem;
    height: .82rem;
    margin: 0;
    position: static;
  }

  .hero-vsl-experience.is--desktop-sequence .hero-vsl-trigger:hover .hero-vsl-trigger__play {
    color: #fff;
    border-color: transparent;
    background-color: transparent;
  }

  @keyframes desktop-hero-play-ring {
    to {
      transform: rotate(360deg);
    }
  }

  .desktop-hero-sequence__separator {
    pointer-events: none;
    background: rgba(255, 255, 255, .38);
    opacity: 1;
    width: 10rem;
    height: 1px;
    display: block;
    position: absolute;
    top: 50%;
    left: var(--desktop-hero-action-text-left);
    transform: none;
    transform-origin: center;
    transition: none;
    will-change: transform, opacity;
  }

  .hero-vsl-experience.is--desktop-sequence .hero-vsl-inline__close {
    padding: .38rem;
    top: .38rem;
    right: .38rem;
  }

  .hero-vsl-experience.is--desktop-sequence .hero-vsl-inline__close > span:first-child {
    display: none;
  }

  .hero-vsl-experience.is--desktop-sequence .hero-vsl-inline {
    width: min(64vw, 56rem, calc((100dvh - min(23.5rem, 42dvh) - 4rem) * 1.7778));
    transform: none;
    transform-origin: top left;
  }

  .desktop-hero-action__arrow {
    color: rgba(255, 255, 255, .86);
    align-self: center;
    justify-content: center;
    align-items: center;
    flex: none;
    width: .82rem;
    height: .82rem;
    margin-left: .75rem;
    display: inline-flex;
  }

  .desktop-hero-action__arrow svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .desktop-hero-action__arrow.is--down {
    transform: rotate(90deg);
  }

  .desktop-hero-sequence__explore {
    color: rgba(255, 255, 255, .94);
    align-items: center;
    gap: 0;
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    text-transform: none;
    text-align: left;
    cursor: pointer;
    display: flex;
    position: absolute;
    top: calc(min(31.5rem, 59dvh) - 2.85rem);
    right: auto;
    bottom: auto;
    left: var(--desktop-hero-action-text-left);
    transform: none;
    will-change: transform, opacity;
  }

  .desktop-hero-sequence__explore:focus-visible {
    outline: 1px solid rgba(var(--yellow-rgb, 216, 180, 115), .7);
    outline-offset: .55rem;
  }

  .desktop-hero-sequence__final-actions[aria-hidden="false"] .desktop-hero-sequence__explore {
    pointer-events: auto;
  }

  .desktop-hero-sequence__explore-copy {
    gap: .55rem;
    text-transform: none;
    display: flex;
    flex-direction: column;
  }

  .desktop-hero-sequence__explore-heading {
    align-items: center;
    display: inline-flex;
    width: max-content;
  }

  .desktop-hero-sequence__explore-copy strong {
    text-transform: uppercase;
    font-size: .9375rem;
    font-weight: 400;
    letter-spacing: .01em;
    line-height: 1;
  }

  .desktop-hero-sequence__explore-subtitle {
    color: rgba(255, 255, 255, .58);
    font-size: .78rem;
    font-weight: 300;
    line-height: 1;
  }

  /* Both mobile-only additions - the explore button's icon box and the
     chevron/line divider above it (see the phones-only block further
     down) - have no desktop design, so hidden here rather than left to
     render unstyled. */
  .desktop-hero-sequence__explore-icon,
  .desktop-hero-sequence__unlock-divider {
    display: none;
  }

  .desktop-hero-sequence__scroll {
    color: rgba(255, 255, 255, .68);
    align-items: center;
    gap: .9rem;
    font-family: Arial, sans-serif;
    font-size: .64rem;
    font-weight: 400;
    letter-spacing: .19em;
    line-height: 1;
    display: none;
    position: absolute;
    top: calc(min(31.5rem, 59dvh) - .94rem);
    right: auto;
    bottom: auto;
    left: calc(50% - min(32vw, 30.375rem));
    transform: none;
  }

  .desktop-hero-sequence__scroll-line {
    background: rgba(var(--yellow-rgb, 216, 180, 115), .2);
    width: 1px;
    height: 5.25rem;
    overflow: hidden;
    display: block;
    position: relative;
  }

  .desktop-hero-sequence__scroll-line span {
    background: linear-gradient(to bottom, transparent 0%, rgba(var(--yellow-rgb, 216, 180, 115), .18) 22%, #d8b473 59%, #d8b473 78%, rgba(var(--yellow-rgb, 216, 180, 115), .78) 94%, transparent 100%);
    box-shadow: 0 0 .55rem rgba(var(--yellow-rgb, 216, 180, 115), .78);
    width: 100%;
    height: 1rem;
    display: block;
    position: absolute;
    top: -1rem;
    left: 0;
    animation: desktop-hero-scroll-line 2.06s linear infinite;
  }

  @keyframes desktop-hero-scroll-line {
    0% {
      transform: translateY(0);
    }

    100% {
      transform: translateY(6.25rem);
    }
  }

  .container.is--hero .hero-content {
    margin-top: 17.5rem;
  }

  .hero-vsl-trigger {
    z-index: 12;
    color: rgba(255, 255, 255, .88);
    align-items: center;
    gap: .72rem;
    padding: .42rem .1rem;
    border: 0;
    background: transparent;
    font-family: Arial, sans-serif;
    font-size: .68rem;
    font-weight: 300;
    letter-spacing: .075em;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: color .25s ease;
  }

  .hero-vsl-trigger:hover {
    color: #fff;
  }

  .hero-vsl-trigger:focus-visible {
    outline: 1px solid #fff;
    outline-offset: .45rem;
  }

  .hero-vsl-trigger__play {
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    width: 1.85rem;
    height: 1.85rem;
    border: 1px solid rgba(255, 255, 255, .48);
    border-radius: 50%;
    display: flex;
    flex: none;
    transition:
      color .25s ease,
      border-color .25s ease,
      background-color .25s ease;
  }

  .hero-vsl-trigger:hover .hero-vsl-trigger__play {
    color: #0d0d0d;
    border-color: #fff;
    background-color: #fff;
  }

  .hero-vsl-trigger__play svg {
    width: .62rem;
    height: .62rem;
    margin-left: .12rem;
  }

  .hero-vsl-inline {
    width: min(72vw, 68rem, calc((100dvh - 20rem) * 1.7778));
  }
}

@media screen and (min-width: 992px) and (prefers-reduced-motion: reduce) {
  .hero-vsl-inline,
  .hero-vsl-inline iframe,
  .hero-vsl-inline video,
  .hero-vsl-trigger,
  .hero-vsl-trigger__content {
    transition: none;
  }

  .hero-vsl-experience.is--desktop-sequence .hero-vsl-trigger__play:before {
    animation: none;
  }
}

.button-arrow__container {
  border-left: 1px solid #0003;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-left: 1.25rem;
  display: flex;
}

.svg {
  width: .4rem;
  position: relative;
}

.image {
  z-index: -1;
  width: 100vw;
  height: 100dvh;
  position: absolute;
}

.header {
  z-index: 10;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 5rem;
  padding-top: 0;
  display: flex;
  position: absolute;
}

.logo {
  width: 14rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.button-left-container {
  width: 20px;
  height: 12px;
  position: relative;
}

.button-bullet {
  background-color: #fff;
  border-radius: 999px;
  width: 4px;
  height: 4px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.button-brackets {
  line-height: 0;
}

.hero-arrow-container {
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-top: 2rem;
  display: flex;
  position: relative;
  overflow: hidden;
}

.svg-3 {
  width: .75rem;
}

.hero-content {
  grid-column-gap: 2.5rem;
  grid-row-gap: 2.5rem;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  margin-top: 15rem;
  display: flex;
}

.chart-wrapper {
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
}

.baseline {
  justify-content: space-between;
  align-items: flex-end;
  width: 60.75rem;
  display: flex;
  position: relative;
}

.bar {
  background-color: #fff;
  width: 2px;
  height: 12px;
}

.bar.is--2 {
  height: 21px;
}

.bar.is--3 {
  height: 37px;
}

.bar.is--4 {
  height: 70px;
}

.bar.is--5 {
  height: 110px;
}

.bar.is--6 {
  height: 170px;
}

.bar.is--7 {
  height: 230px;
}

.bar.is--8 {
  height: 290px;
}

.bars {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  justify-content: flex-start;
  align-items: flex-end;
  width: 100%;
  display: flex;
}

.ici-wrapper {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 14rem;
  display: flex;
  position: absolute;
  bottom: -5.5rem;
  left: 40.8rem;
}

.ici-wrapper-text {
  text-transform: uppercase;
  font-size: 1rem;
}

.svg-4 {
  width: .8125rem;
}

.header-section {
  justify-content: space-between;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  display: flex;
}

.header-section.is--sections {
  margin-bottom: 1rem;
}

.header-section.is--sections.spe {
  border-top-style: none;
}

.header-section.is--groupe {
  margin-bottom: 1rem;
}

.header-section.is--groupe.spe {
  opacity: 0;
}

.header-section.is--tracker {
  border-top: 1px solid #ffffff26;
  position: relative;
}

.header-section.is--personnes {
  opacity: 0;
  margin-bottom: 1rem;
}

.header-section.is--compare {
  margin-bottom: 1rem;
}

.header-section.is--timeline {
  width: 100%;
  position: absolute;
}

.header-number.hidden {
  opacity: 0;
}

.header-title {
  color: #ffffff80;
}

.header-title.hidden {
  opacity: 0;
}

.header-subtitle {
  color: #ffffff80;
}

.header-wrapper-left {
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  display: flex;
}

.big-title-section {
  letter-spacing: -.02em;
  max-width: 35ch;
  margin-top: 2rem;
  font-size: 3.5rem;
  line-height: .9;
}

.big-title-section.is--sections, .big-title-section.is--groupe {
  max-width: 17ch;
  margin-top: -.8rem;
}

.big-title-section.is--personnes {
  margin-top: -.8rem;
  padding-top: 0;
}

.big-title-section.is--compare {
  margin-top: -.8rem;
}

.big-title-section.is--faq {
  text-align: center;
  max-width: 16ch;
}

.big-title-section.is--timeline {
  margin-top: 0;
  font-size: 2.8rem;
}

.big-title-section.is--timeline.materiel {
  margin-top: -1rem;
}

.big-title-section.is--timeline.materiel.is--mobile, .big-title-section.is--timeline.is--mobile {
  display: none;
}

.text-section {
  color: #fff;
  max-width: 46ch;
  margin-top: 0;
  padding-bottom: 0;
}

.text-section.is--sections, .text-section.is--personnes, .text-section.is--groupe {
  max-width: 44ch;
  margin-top: 0;
}

.text-section.is--groupe.is--second {
  border: 1px solid #fff;
  padding: .6rem;
}

.text-section.is--groupe.is--first {
  padding: .6rem;
}

.text-section.is--compare {
  max-width: 44ch;
  margin-top: 0;
}

.color {
  color: var(--yellow);
  padding-left: .2em;
  padding-right: .2em;
}

.tracker-container {
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
  padding-left: 29rem;
  display: flex;
}

.tracker-wrapper {
  grid-column-gap: 1.4rem;
  grid-row-gap: 1.4rem;
  flex-flow: column;
  display: flex;
  position: relative;
}

.tracker-header {
  grid-column-gap: 2.6rem;
  grid-row-gap: 2.6rem;
  grid-template-rows: auto auto;
  grid-template-columns: 15.625rem repeat(7, 1fr);
  grid-auto-columns: 1fr;
  margin-bottom: .5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  display: flex;
}

.day {
  color: #ffffff4d;
  justify-content: center;
  align-items: center;
  width: 1.25rem;
  height: 1.25rem;
  font-size: 1.4rem;
  display: flex;
}

.day.is--first {
  color: #fff;
  justify-content: flex-start;
  align-items: center;
  width: 11rem;
  font-size: 1rem;
}

.day.is-purge {
  color: var(--light-050);
}

.day.the-day {
  color: #fff;
}

.day.is--mobile {
  display: none;
}

.tracker-row {
  grid-column-gap: 2.6rem;
  grid-row-gap: 2.6rem;
  border-bottom: 1px solid #ffffff26;
  padding-bottom: 1.4rem;
  padding-left: 1rem;
  padding-right: 1rem;
  display: flex;
  position: relative;
}

.tracker-checkbox {
  border: 1px solid #ffffff4d;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  place-items: center stretch;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
}

.tracker-checkbox.is--last {
  display: none;
}

.tracker-checkbox.is--button {
  background-color: #2f2f2f;
  border-color: #fff0;
}

.tracker-checkbox.is--mobile {
  display: none;
}

.tracker-checkbox-inside {
  background-color: #ffffff4d;
  width: .6875rem;
  height: .6875rem;
}

.tracker-checkbox-inside.is--button {
  opacity: 0;
  background-color: #fff;
}

.tracker-pompes {
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  position: absolute;
  top: -5rem;
  right: 1rem;
}

.wait-message {
  color: #adadad80;
  justify-content: center;
  align-items: center;
  margin-top: 2.5rem;
  margin-left: 29rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
  display: flex;
}

.tracker-highlight {
  pointer-events: none;
  border: 1px solid #fff;
  position: absolute;
  inset: -2rem 3.45rem -2rem 21rem;
}

.purgatoire-message {
  position: absolute;
  top: -5rem;
  right: 1rem;
}

.tree-wrapper {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  margin-top: 3rem;
  display: flex;
}

.tree-wrapper.is--compare {
  flex-flow: row;
  width: 51.6rem;
}

.line {
  background-color: #5f5f5f;
  width: 2px;
  height: 2.5rem;
}

.line.is--vertical {
  min-width: 2px;
  height: 10rem;
  position: relative;
}

.line.is--compare {
  z-index: 1;
  width: 2.5rem;
  height: 2px;
  position: relative;
  right: -2px;
}

.line.is--uwant {
  width: 3rem;
  height: 2px;
}

.line.is--reallywant {
  width: 35rem;
  height: 2px;
}

.tree-header-wrapper {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.tree-horizontal-line {
  background-color: #5f5f5f;
  width: 50rem;
  height: 2px;
}

.tree-wrapper-lower {
  justify-content: space-between;
  width: 50rem;
  display: flex;
}

.tree-child-wrapper {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: relative;
}

.label {
  white-space: nowrap;
  position: absolute;
  bottom: -2rem;
}

.label.is--header {
  margin-bottom: .5rem;
  position: static;
}

.label.color {
  color: var(--yellow);
}

.label.color.is--compare {
  position: static;
}

.label.is--compare {
  top: 50%;
  bottom: 0;
}

.label.is--compare2 {
  top: 50%;
  bottom: auto;
  left: 4rem;
  transform: translate(0, -50%);
}

.label.is--compare3 {
  top: 50%;
  bottom: auto;
  left: 36rem;
  transform: translate(0, -50%);
}

.label.is--compare2::before {
  content: 'ce que tu veux immédiatement';
}

.label.is--compare3::before {
  content: 'ce que tu veux vraiment';
}

.compare-label-copy {
  display: none;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .section.is--compare .label.is--compare2::before,
  .section.is--compare .label.is--compare3::before {
    content: "";
  }

  .section.is--compare .compare-label-copy {
    flex-direction: column;
    display: flex;
  }
}

.label.is--last {
  border: 1px solid #0000;
  border-radius: 1px;
  padding: .3rem .5rem .4rem;
  bottom: -2.5rem;
}

.tree-container {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  display: flex;
  position: static;
  top: 0;
  left: 0;
}

.tree-container.is--first, .tree-container.is--second, .tree-container.is--three {
  height: 8.625rem;
  position: absolute;
  top: 21rem;
}

@media screen and (min-width: 992px) {
  .section.is--map.is--desktop-community {
    position: relative;
    isolation: isolate;
    background: var(--black);
  }

  .section.is--personnes {
    display: none !important;
  }

  .section.is--compare .label.is--compare2 .compare-label-copy,
  .section.is--compare .label.is--compare3 .compare-label-copy {
    display: none !important;
  }

  .section.is--groupe.is--network-redesign
  .text-section.is--groupe.is--first {
    max-width: 48ch;
  }

  .tree-container.is--second.is--network-redesign {
    height: 11rem;
    /* Shared desktop anchor for both the two-section and formula diagrams. */
    top: 22.75rem;
  }

  .tree-container.is--three {
    top: 19.3rem;
  }

  .tree-container.is--second.is--network-redesign .tree-wrapper {
    margin-top: 0;
  }

  .tree-container.is--second.is--network-redesign .tree-header-wrapper .line,
  .tree-container.is--second.is--network-redesign
  .tree-child-wrapper .line {
    width: 1px;
    background-color: rgba(255, 255, 255, .72);
  }

  .tree-container.is--second.is--network-redesign
  .tree-header-wrapper .line {
    height: 3.15rem;
    /* No "REBOOT CAMP" label above the trunk anymore (fused structure +
       formulas scene) — fade its very top like the mobile unified tree's
       first trunk, so the diagram still reads as starting from nothing. */
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, .72) 100%
    );
  }

  .tree-container.is--second.is--network-redesign .tree-horizontal-line,
  .tree-container.is--second.is--network-redesign .tree-wrapper-lower {
    width: min(70vw, 46rem);
  }

  .tree-container.is--second.is--network-redesign .tree-horizontal-line {
    height: 1px;
    background-color: rgba(255, 255, 255, .72);
  }

  .tree-container.is--second.is--network-redesign
  .tree-child-wrapper.is--two,
  .tree-container.is--second.is--network-redesign
  .tree-child-wrapper.is--four {
    display: none;
  }

  .tree-container.is--second.is--network-redesign
  .tree-child-wrapper .line {
    height: 2.5rem;
  }

  .tree-container.is--second.is--network-redesign
  .tree-child-wrapper.is--three .line {
    height: 3.7rem;
  }

  .tree-container.is--second.is--network-redesign
  .tree-child-wrapper .label {
    top: 3rem;
    bottom: auto;
    line-height: 1.2;
    letter-spacing: .025em;
    text-align: center;
  }

  .tree-container.is--second.is--network-redesign
  .tree-child-wrapper.is--three .label {
    top: 4.2rem;
  }

  .tree-container.is--second.is--network-redesign
  .network-section-prefix,
  .tree-container.is--second.is--network-redesign
  .network-section-name {
    display: block;
  }

  .tree-container.is--second.is--network-redesign
  .network-section-prefix {
    color: rgba(255, 255, 255, .9);
  }

  .tree-container.is--second.is--network-redesign
  .network-section-name {
    color: #fff;
  }

  .desktop-formula-copy__texts {
    display: flex;
    width: min(44ch, 100%);
    flex-direction: column;
    gap: .75rem;
  }

  .desktop-formula-copy__text {
    width: 100%;
    margin: 0;
    padding: .6rem;
    text-transform: uppercase;
  }

  .desktop-formula-copy__label {
    color: var(--yellow);
  }

  .desktop-formula-branches {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 5.7rem;
    left: 50%;
    width: min(46vw, 36rem);
    height: 14rem;
    transform: translateX(-50%);
    pointer-events: none;
  }

  .desktop-formula-branches__line {
    position: absolute;
    display: block;
    background-color: rgba(255, 255, 255, .72);
  }

  .desktop-formula-branches__line.is--trunk {
    top: 0;
    left: 50%;
    width: 1px;
    height: 2.75rem;
  }

  .desktop-formula-branches__line.is--horizontal {
    top: 2.75rem;
    left: 0;
    width: 100%;
    height: 1px;
  }

  .desktop-formula-branches__line.is--leg {
    top: 2.75rem;
    width: 1px;
    height: 2.5rem;
  }

  .desktop-formula-branches__line.is--leg.is--left {
    left: 0;
  }

  .desktop-formula-branches__line.is--leg.is--right {
    right: 0;
  }

  .desktop-formula-branches__label {
    position: absolute;
    top: 5.65rem;
    line-height: 1.2;
    letter-spacing: .025em;
    white-space: nowrap;
  }

  .desktop-formula-branches__label.is--left {
    left: 0;
    transform: translateX(-50%);
  }

  .desktop-formula-branches__label.is--right {
    right: 0;
    transform: translateX(50%);
  }

  .desktop-group-members {
    position: absolute;
    top: 7.25rem;
    left: 0;
    width: min(25vw, 20rem);
    height: 6rem;
    transform: translateX(-50%);
    pointer-events: none;
  }

  .desktop-group-members__line {
    position: absolute;
    display: block;
    background-color: rgba(255, 255, 255, .62);
  }

  .desktop-group-members__line.is--trunk {
    top: 0;
    left: 50%;
    width: 1px;
    height: 1.5rem;
  }

  .desktop-group-members__line.is--horizontal {
    top: 1.5rem;
    left: 0;
    width: 100%;
    height: 1px;
  }

  .desktop-group-members__line.is--leg {
    top: 1.5rem;
    width: 1px;
    height: 1.45rem;
  }

  .desktop-group-members__line.is--leg.is--one,
  .desktop-group-members__label.is--one {
    left: 0;
  }

  .desktop-group-members__line.is--leg.is--two,
  .desktop-group-members__label.is--two {
    left: 33.333%;
  }

  .desktop-group-members__line.is--leg.is--three,
  .desktop-group-members__label.is--three {
    left: 66.667%;
  }

  .desktop-group-members__line.is--leg.is--four,
  .desktop-group-members__label.is--four {
    left: 100%;
  }

  .desktop-group-members__label {
    position: absolute;
    top: 3.25rem;
    line-height: 1.2;
    letter-spacing: .025em;
    white-space: nowrap;
    transform: translateX(-50%);
  }
}

.tree-container.is--compare {
  height: 8.625rem;
  position: absolute;
  top: 25.8rem;
}

.tree-container.is--timeline {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  height: auto;
  position: relative;
}

.parent-section {
  position: relative;
  overflow: hidden;
}

.header-pres {
  flex-wrap: wrap;
  place-content: stretch space-between;
  margin-top: 4rem;
  display: flex;
}

.header-pres.align-start {
  align-items: flex-start;
  line-height: 1;
}

.header-pres.align-center {
  align-items: center;
}

.header-pres.justify-center {
  justify-content: center;
}

.header-pres.justify-around {
  justify-content: space-around;
}

.header-pres.justify-between {
  justify-content: space-between;
}

.header-pres.justify-between.is--sections, .header-pres.justify-between.is--groupe {
  justify-content: space-between;
  align-items: flex-start;
}

.header-pres.align-stretch {
  align-items: stretch;
}

.header-pres.justify-end {
  justify-content: flex-end;
}

.header-pres.align-end {
  align-items: flex-end;
}

.header-pres.is--groupe {
  position: relative;
}

.header-pres.is--compare {
  flex-flow: row;
  justify-content: space-between;
  align-items: stretch;
}

.tree-left-side {
  z-index: 22;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: relative;
}

.tree-right-wrapper {
  flex-flow: column;
  justify-content: space-between;
  height: 20rem;
  display: flex;
}

.line-wrapper-top {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  justify-content: flex-start;
  align-items: center;
  width: fit-content;
  display: flex;
  position: relative;
}

.line-wrapper-bottom {
  z-index: 1;
  position: relative;
}

.line-clr {
  z-index: 22;
  background-color: #fff;
  position: absolute;
  inset: 0;
}

.line-vertical-clr {
  z-index: 22;
  background-color: #fff;
  width: 2px;
  height: 10rem;
  position: absolute;
  right: 0;
}

.dot-wrapper {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
}

.dot-wrapper.is--timeline {
  display: none;
}

.dot {
  background-color: #fff;
  border-radius: 9999px;
  justify-content: center;
  align-items: center;
  width: .7rem;
  height: .7rem;
  display: flex;
  position: relative;
}

.dot-bg {
  background-color: #ffffff7a;
  border-radius: 9999px;
  width: 3rem;
  min-width: 3rem;
  height: 3rem;
  min-height: 3rem;
}

.inscription-rc {
  text-wrap: nowrap;
  position: absolute;
  top: 2.5rem;
  left: -5.5rem;
}

.timeline-wrapper {
  opacity: 0;
  background-color: #575757;
  width: 100%;
  height: 2px;
  position: absolute;
  top: 50%;
}

.white-line {
  background-color: #fff;
  position: absolute;
  inset: 0;
}

.achievement.is--top {
  position: absolute;
  top: 20%;
  left: 20%;
}

.achievement.is--bottom {
  position: absolute;
  bottom: 20%;
  left: 40%;
}

.inner-wrapper {
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.panel {
  background-color: #0000;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100vw;
  min-width: 100vw;
  height: 100vh;
  min-height: 100vh;
  display: flex;
}

.panel.is--first {
  position: relative;
}

.div-block {
  margin-top: 10rem;
}

.text-block {
  text-align: right;
}

.text-block.fade-in {
  text-align: left;
  margin-top: 10rem;
}

.text-block.fade-in.is--second {
  text-align: right;
}

.text-wrapper {
  grid-column-gap: .25rem;
  grid-row-gap: .25rem;
  text-align: left;
  flex-flow: column;
  max-width: 45ch;
  display: flex;
}

.text-wrapper.is--first, .text-wrapper.is--second, .text-wrapper.is--third, .text-wrapper.is--sixth {
  max-width: none;
}

.t-eyebrow {
  color: #ffffff80;
  font-size: .9375rem;
}

.t-title {
  font-size: 1.75rem;
  line-height: 100%;
}

.t-p {
  color: #ffffff80;
  text-wrap: pretty;
  pointer-events: all;
}

.t-inner-wrapper {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: column;
  width: 27rem;
  display: flex;
}

.t-inner-wrapper.is--spec {
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  width: 40rem;
}

.t-lower-wrapper {
  border-bottom: 1px solid #ffffff26;
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
}

.t-line-wrapper {
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  display: flex;
}

.t-left-wrapper {
  justify-content: flex-start;
  align-items: center;
  width: 16rem;
  height: fit-content;
  display: flex;
}

.t-right-wrapper {
  color: #ffffff80;
  font-size: .875rem;
  line-height: 110%;
}

.t-left-wrapper-text {
  text-wrap: nowrap;
  border: 1px solid #ffffff26;
  border-radius: 9999px;
  padding: .5rem 1rem;
  font-size: .875rem;
}

.map-wrapper {
  pointer-events: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.mask {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  vertical-align: baseline;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: none;
}

.text-wrapper-map {
  grid-column-gap: .25rem;
  grid-row-gap: .25rem;
  text-align: left;
  flex-flow: column;
  max-width: 45ch;
  margin-top: 5rem;
  display: flex;
}

.svg-5 {
  width: auto;
  height: 100vh;
  position: absolute;
  left: 280px;
}

.map-svg {
  pointer-events: none;
  width: 100vw;
  height: 100%;
  position: relative;
}

.dot-video {
  z-index: 1;
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 30%;
  transform: translate(-50%, -50%);
}

.dot-video.is--timeline {
  display: none;
}

.dot-video.is--1 {
  top: 55%;
  left: 28%;
}

.dot-video.is--2 {
  top: 50%;
  left: 42%;
}

.dot-video.is--3 {
  top: 58%;
  left: 54%;
}

.dot-video.is--101 {
  top: 41%;
  left: 41%;
}

.map-container {
  pointer-events: none;
  position: relative;
}

.dot-normal {
  position: absolute;
  top: 62%;
  left: 32%;
  transform: translate(-50%, -50%);
}

.dot-normal.is--timeline {
  display: none;
}

.dot-normal.is--2 {
  top: 56%;
  left: 35%;
}

.dot-normal.is--1 {
  top: 51%;
  left: 42%;
}

.dot-normal.is--3 {
  top: 59%;
  left: 26%;
}

.dot-normal.is--4 {
  top: 68%;
  left: 40%;
}

.dot-normal.is--5 {
  top: 59%;
  left: 50%;
}

.dot-normal.is--6 {
  top: 38%;
  left: 41%;
}

.dot-normal.is--7 {
  top: 70%;
  left: 36%;
}

.dot-normal.is--8 {
  top: 67%;
  left: 29%;
}

.dot-normal.is--9 {
  top: 43%;
  left: 37%;
}

.dot-normal.is--10 {
  top: 57%;
  left: 51%;
}

.dot-normal.is--11 {
  top: 40%;
  left: 44%;
}

.dot-normal.is--12 {
  top: 61%;
  left: 40%;
}

.dot-normal.is--13 {
  top: 48%;
  left: 33%;
}

.dot-normal.mobile-map-fixed-point {
  display: none;
}

.mask-2 {
  display: none;
}

.dot-barcelona {
  opacity: 1;
  background-color: #fff0;
  border-radius: 999px;
  justify-content: center;
  align-items: flex-start;
  width: .7rem;
  height: .7rem;
  display: flex;
  position: absolute;
  top: 80%;
  left: 29%;
}

.text-wrapper-barca {
  grid-column-gap: .25rem;
  grid-row-gap: .25rem;
  pointer-events: none;
  text-align: left;
  flex-flow: column;
  max-width: 45ch;
  margin-top: 5rem;
  display: flex;
}

.scroll-arrow {
  position: absolute;
  top: -100%;
}

.overlay-load {
  z-index: 100;
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  background-color: #000;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  display: flex;
  position: relative;
  inset: 0;
}

.overlay-text-wrapper {
  grid-column-gap: 1.7rem;
  grid-row-gap: 1.7rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: relative;
}

.overlay-text {
  letter-spacing: -.02em;
  font-size: 1.6rem;
  line-height: 100%;
}

.overlay-logo {
  width: 24rem;
  clip-path: inset(0 100% 0 0);
}

.overlay-button-wrapper {
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  display: flex;
}

.overlay-logo-wrapper {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: static;
}

.logo-number {
  color: #ffffff80;
  text-align: center;
}

.wrapper-logo {
  position: relative;
}

.overlay-logo-div {
  background-color: #0d0d0d80;
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  top: 0;
  right: 0;
}

.tracker-wrapper-mobile {
  grid-column-gap: 2.6rem;
  grid-row-gap: 2.6rem;
  display: flex;
}

.overlay-line {
  background-color: #ffffff26;
  width: 100%;
  max-width: 20rem;
  height: 1px;
}

.mobile-loader-line {
  display: none;
}

.arrow-wrapper {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.svg-2 {
  width: .4rem;
  position: absolute;
  left: -3em;
}

.div-block-2 {
  display: none;
}

.tracker-row-line {
  background-color: var(--black);
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: -1px;
  left: 0;
}

.header-line {
  background-color: var(--black);
  width: 100%;
  height: 1px;
  position: absolute;
  top: -1px;
  left: 0;
}

.video-modal {
  z-index: 100;
  justify-content: flex-start;
  align-items: flex-end;
  width: 100%;
  height: 100vh;
  padding-top: 2rem;
  padding-bottom: 3rem;
  padding-left: 3rem;
  display: flex;
  position: relative;
  top: 0;
  left: 0;
}

.video-wrapper {
  z-index: 1;
  background-color: #1b1b1b;
  border-radius: 4px;
  width: fit-content;
  padding: 1rem;
  position: relative;
}

.video-2 {
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 17rem;
  height: 26rem;
  display: flex;
  overflow: hidden;
}

.video-lower-wrapper {
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  display: flex;
}

.svg-play {
  width: .75rem;
  height: .75rem;
}

.the-video {
  z-index: 1;
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: relative;
}

.video-modal-bg {
  cursor: pointer;
  background-color: #00000030;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.button-2 {
  background-color: #efefef00;
}

.play-button {
  background-color: #efefef00;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.svg-pause {
  width: .75rem;
  height: .75rem;
  position: absolute;
}

.text-block-2 {
  position: absolute;
}

.video-container {
  justify-content: center;
  align-items: flex-start;
  display: flex;
  position: relative;
}

.close-button {
  text-transform: uppercase;
  background-color: #1b1b1b;
  border-radius: 2px;
  justify-content: center;
  align-items: center;
  width: 5.3rem;
  padding-top: .3rem;
  padding-bottom: .5rem;
  font-size: .9rem;
  display: flex;
  position: absolute;
  top: -10%;
}

.text-block-3 {
  line-height: 100%;
}

.barca-video-wrapper {
  background-color: #202020;
  width: 15rem;
  height: 9rem;
  padding: .5rem;
  position: absolute;
  transform: translate(0, 41px);
}

.video-barca {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.click-me {
  text-wrap: nowrap;
  position: absolute;
  transform: translate(0, -150%);
}

.hero-arrow-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

.wait-message-span.is--glow {
  color: #adadad80;
}

.hero-arrow-svg-2 {
  position: absolute;
  top: -100%;
  left: 0;
}

.timeline-marker {
  background-color: red;
  width: 2px;
  height: 12px;
  margin-top: -6px;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

.achat-left-wrapper {
  flex-flow: column;
  justify-content: space-between;
  width: 50%;
  height: 100vh;
  padding-top: 4rem;
  padding-bottom: 4rem;
  display: flex;
  position: sticky;
  top: 0;
}

.achat-right-wrapper {
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  flex-flow: column;
  width: 50%;
  padding-top: 10rem;
  padding-bottom: 10rem;
  display: flex;
}

.h2-achat {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 3.875rem;
  line-height: 90%;
}

.achat-video-wrapper {
  background-color: #181818;
  width: 23rem;
  height: 15rem;
}

.achat-intro-wraper {
  border-left: 1px solid #fff;
  padding-left: 2rem;
}

.achat-intro-title {
  display: block;
}

.achat-intro-description {
  color: var(--light-050);
  line-height: 108%;
  display: block;
}

.achat-block {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: column;
  display: flex;
}

.achat-block-label {
  border-left: 1px solid var(--yellow);
  margin-bottom: 1rem;
  padding-left: 2rem;
}

.achat-line {
  background-color: #ffffff26;
  width: 100%;
  height: 1px;
}

.form-achat {
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  flex-flow: column;
  width: 100%;
  display: flex;
}

.span {
  color: var(--light-050);
  font-weight: 500;
}

.input-span {
  margin-right: 1rem;
  font-weight: 500;
}

.label-checkbox {
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  display: flex;
}

.checkbox {
  background-color: #fff0;
  margin-right: 2rem;
}

.radio {
  margin-right: 2rem;
}

.achat-outro-wrapper {
  margin-top: 3rem;
}

.p-achat {
  color: var(--light-050);
  font-size: 1rem;
}

.achat-engagement {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  display: flex;
}

.achat-total-wrapper {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.total-value {
  font-size: 2.9375rem;
  line-height: 100%;
}

.button-3 {
  color: var(--black);
  background-color: #fff;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  padding-top: 1.3rem;
  padding-bottom: 1.5rem;
  font-size: 1.75rem;
  line-height: 100%;
  display: flex;
}

.faq-chat-container {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-flow: column;
  width: 39rem;
  margin-top: 5rem;
  display: flex;
}

.chat-bubble {
  background-color: #2e2e2e;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  width: fit-content;
  margin-right: 0;
  padding: .9375rem 1.3125rem;
  line-height: 120%;
}

.chat-bubble.is--secondary {
  width: 70%;
  color: var(--black);
  background-color: #fff;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 5px;
}

.chat-bubble-wrapper {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  flex-flow: column;
  justify-content: center;
  align-items: flex-end;
  margin-left: auto;
  display: flex;
}

.chat-bubble-inner {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  justify-content: flex-end;
  align-items: flex-end;
  display: flex;
}

.svg-6 {
  width: .7rem;
}

.chat-pp {
  color: #686868;
  border: 1px solid #5a5a5a;
  border-radius: 99999px;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  display: flex;
}

.label-radio {
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  display: flex;
}

.iphone-svg {
  width: 100%;
  min-width: 100%;
  height: auto;
}

.iphone-wrapper {
  position: absolute;
  top: -16rem;
  left: -3rem;
  right: -3rem;
}

.iphone {
  opacity: .05;
  border: 5px solid #fff;
  border-radius: 110px;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: 62.5rem;
  padding-top: 1.3rem;
  display: none;
}

.iphone-island {
  background-color: #fff;
  border-radius: 999px;
  width: 8rem;
  height: 2rem;
}

.image-2 {
  object-fit: cover;
  width: 100%;
  max-width: none;
  height: auto;
}

.image-3 {
  width: 100%;
}

.svg-7, .svg-8 {
  width: 10rem;
}

.svg-wrapper {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  flex-flow: column;
  display: flex;
  position: absolute;
  bottom: 4rem;
}

.text-span {
  color: var(--yellow);
}

.timeline-container {
  position: relative;
  overflow: hidden;
}

.timeline-panels-wrapper {
  flex-flow: column;
  display: flex;
}

.timeline-panel {
  min-width: 100vw;
  min-height: 100vh;
}

.timeline-panel.is--1 {
  justify-content: center;
  align-items: flex-start;
  width: 100vw;
  padding-top: 7rem;
  padding-left: 7rem;
  padding-right: 7rem;
  display: flex;
}

.timeline-panel.is--2 {
  justify-content: center;
  align-items: flex-end;
  width: 100vw;
  padding-bottom: 11rem;
  display: flex;
}

.timeline-panel.is--2.is--fixed {
  grid-column-gap: 5rem;
  grid-row-gap: 5rem;
  justify-content: center;
  padding-bottom: 4rem;
  padding-left: 3rem;
  padding-right: 3rem;
}

.timeline-panel.is--3 {
  justify-content: center;
  align-items: flex-start;
  width: 100vw;
  padding-top: 7rem;
  padding-left: 7rem;
  padding-right: 7rem;
  display: flex;
}

.timeline-panel.is--4.is--fixed {
  flex-flow: row;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 3rem;
  padding-left: 3rem;
  padding-right: 3rem;
  display: flex;
}

.timeline-panel.is--5 {
  justify-content: center;
  align-items: flex-start;
  padding-top: 4rem;
  padding-left: 7rem;
  padding-right: 7rem;
  display: flex;
  position: relative;
}

.timeline-panel.is--6, .timeline-panel.is--7, .timeline-panel.is--8 {
  justify-content: center;
  align-items: flex-start;
  padding-top: 4rem;
  padding-left: 7rem;
  padding-right: 7rem;
  display: flex;
}

.timeline-panel.is--9 {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 4rem;
  padding-left: 7rem;
  padding-right: 7rem;
  display: flex;
}

.div-block-3 {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: column;
  margin-bottom: 1rem;
  display: flex;
}

.text-block-4 {
  width: 40ch;
  color: var(--light-050);
  font-size: .8rem;
}

.text-block-4.is--label {
  margin-bottom: -1rem;
}

@media screen and (min-width: 992px) {
  .text-wrapper-map .t-inner-wrapper,
  .text-wrapper-spotify .t-inner-wrapper,
  .text-wrapper-barca .t-inner-wrapper {
    row-gap: 1.75rem;
  }

  .section.is--timeline
  .timeline-panel.is--4.is--fixed
  .structure-title {
    color: var(--light-050);
  }

  .section.is--timeline
  .timeline-panel.is--4.is--fixed
  .structure-title .structure-day {
    color: var(--blanc);
  }

  .section.is--timeline
  .timeline-panel.is--1.is--desktop-merged-preparation {
    padding-top: 4rem;
  }

  .section.is--timeline
  .timeline-panel.is--1.is--desktop-merged-preparation
  .text-block-4.is--short {
    width: 80ch;
  }

  .section.is--timeline
  :is(
    .timeline-panel.is--5,
    .timeline-panel.is--6,
    .timeline-panel.is--7,
    .timeline-panel.is--8
  )
  .module-container {
    margin-top: 0;
  }

  .section.is--timeline
  :is(
    .timeline-panel.is--5,
    .timeline-panel.is--6,
    .timeline-panel.is--7,
    .timeline-panel.is--8
  )
  .module-line {
    margin-bottom: .8rem;
  }

  .section.is--timeline
  .timeline-panel.is--7
  .text-block-4.is--short {
    width: 80ch;
  }

  .section.is--timeline
  .timeline-panel.is--5
  .text-block-4.is--label {
    display: none;
  }
}

.text-block-4.is--short {
  width: 55ch;
}

.text-block-4.is--long {
  width: 80ch;
}

.structure-container {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  flex-flow: column;
  display: flex;
}

.structure-title {
  font-size: 1.1rem;
}

.structure-text {
  font-size: .8rem;
  line-height: 140%;
}

.structure-wrapper {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  border-bottom: 1px solid #ffffff1f;
  flex-flow: column;
  width: 47ch;
  padding-bottom: .7rem;
  display: flex;
}

.text-span-2 {
  color: var(--blanc);
}

.bold-text, .bold-text-2 {
  font-weight: 500;
}

.bold-text-3, .bold-text-4, .bold-text-5 {
  margin-right: auto;
  font-weight: 500;
}

.bold-text-6 {
  font-weight: 500;
}

.stat {
  grid-column-gap: 2.8rem;
  grid-row-gap: 2.8rem;
  border: 1px #000;
  border-bottom-color: #ffffff29;
  justify-content: flex-start;
  width: 22rem;
  padding-top: .3rem;
  padding-bottom: .7rem;
  font-size: .9rem;
  display: flex;
}

.structure-day {
  color: var(--light-050);
}

.gif-container {
  border: 2px solid #313131;
  width: 29rem;
}

.gif-container.is--mobile {
  display: none;
}

.image-4 {
  filter: grayscale();
  display: none;
}

.separator-line {
  color: #fff;
  background-color: #ffffff1a;
  width: 100%;
  height: 1px;
  min-height: 1px;
}

.lower-block {
  grid-column-gap: .6rem;
  grid-row-gap: .6rem;
  flex-flow: column;
  width: 18rem;
  margin-top: 1.9rem;
  display: flex;
}

.stat-text {
  width: 13.6rem;
}

.stat-right {
  grid-column-gap: .4rem;
  grid-row-gap: .4rem;
  font-size: .9rem;
  display: flex;
}

.stat-valuetext {
  padding-bottom: 0;
  padding-right: 0;
}

.start-element {
  z-index: 100;
  background-color: #fff;
  width: 2px;
  height: 1rem;
  position: absolute;
  top: 49%;
  left: 0;
  transform: translate(0, -50%);
}

.title-intro {
  max-width: 14ch;
  font-size: 4rem;
  line-height: 88%;
  position: absolute;
  top: 9rem;
  left: 16.9rem;
}

.text-span-4 {
  color: var(--yellow);
}

.module-line {
  background-color: #6d6d6d;
  width: 9rem;
  height: 1px;
  margin-bottom: 1rem;
}

.module-container {
  grid-column-gap: .2rem;
  grid-row-gap: .2rem;
  flex-flow: column;
  margin-top: 1rem;
  display: flex;
}

.line-vertical-wrapper {
  width: 2px;
  min-width: 2px;
  height: 20rem;
  position: relative;
}

.svg-9 {
  color: #636363;
  width: 1.9rem;
  display: none;
}

.stat-title {
  border-bottom: 1px solid #ffffff1f;
  margin-bottom: 1.4rem;
  padding-bottom: .4rem;
  font-size: 1.1rem;
}

.stats-inner {
  border: 1px solid #313131;
  padding: 1rem;
}

.text-span-5 {
  color: var(--yellow);
}

.text-wrapper-spotify {
  z-index: 100;
  grid-column-gap: .25rem;
  grid-row-gap: .25rem;
  text-align: left;
  flex-flow: column;
  max-width: 45ch;
  margin-top: 5rem;
  display: flex;
  position: relative;
}

.image-wrapper {
  border: 1px solid #313131;
  flex-flow: column;
  display: flex;
  position: relative;
  overflow: hidden;
}

.img-spotify {
  width: 13.6rem;
  position: absolute;
}

.img-spotify.is--first {
  position: relative;
}

.lower-wrapper {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  justify-content: flex-start;
  align-items: flex-end;
  margin-top: 2rem;
  display: flex;
}

.spotify-svg {
  width: 8rem;
}

.h2-form {
  margin-top: 0;
  margin-bottom: 3.1rem;
  font-size: 3.875rem;
  line-height: 90%;
}

.text-block-5 {
  text-align: center;
  max-width: 67ch;
  font-size: .9375rem;
  line-height: 190%;
}

.form-field {
  width: 100%;
  position: relative;
}

.form-submit {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  inset: 0;
}

.form-notification-p {
  color: inherit;
  font-size: .9rem;
  font-weight: 500;
}

.form-group {
  grid-column-gap: 1.5em;
  grid-row-gap: 1.5em;
  flex-flow: column;
  width: 35rem;
  margin-top: 2rem;
  margin-bottom: 0;
  display: none;
}

.form-input {
  outline-offset: 0px;
  appearance: none;
  box-sizing: border-box;
  vertical-align: middle;
  background-color: #252525;
  border: 1px solid #ffffff0d;
  border-radius: 0;
  outline: 0 #0000;
  height: auto;
  margin-bottom: 0;
  padding: 1.2rem 3.5em 1.2rem 1em;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  box-shadow: 0 0 #0000;
}

.form-input:focus {
  border-color: #cbc8c5;
}

.form-input::placeholder {
  color: #1313134d;
  background-color: #efeeec;
}

.form-input.is--textarea {
  resize: vertical;
  min-height: 9em;
}

.form-2 {
  grid-column-gap: 1.5em;
  grid-row-gap: 1.5em;
  flex-flow: column;
  width: 100%;
  display: flex;
}

.form-label {
  margin-bottom: 0;
  font-size: .8rem;
  font-weight: 500;
  line-height: 1;
}

.form-field-icon {
  opacity: 0;
  pointer-events: none;
  color: #cbc8c5;
  border-radius: .375em;
  justify-content: center;
  align-items: center;
  width: 3.5em;
  max-height: 3.5em;
  padding-left: 1em;
  padding-right: 1em;
  display: flex;
  position: absolute;
  top: 1px;
  bottom: 1px;
  right: 1px;
}

.form-field-icon.is--error {
  color: #ff4c24;
}

.form-notification-bg {
  opacity: .1;
  pointer-events: none;
  color: inherit;
  background-color: currentColor;
  border-radius: calc(.375rem - 2px);
  display: flex;
  position: absolute;
  inset: 0;
}

.form-field-group {
  grid-column-gap: .75em;
  grid-row-gap: .75em;
  flex-flow: column;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.form-notifcation {
  outline-offset: 0px;
  width: 100%;
  min-height: 17rem;
  color: var(--yellow);
  text-align: left;
  border-color: inherit;
  background-color: #fff0;
  outline: 0 #0000;
  padding: 0;
  font-size: 1em;
  position: relative;
}

.form-notifcation.is--error {
  color: #ff4c24;
  border-radius: 0;
  margin-top: 0;
  padding-right: 3.5em;
}

.form-notification-icon {
  pointer-events: none;
  width: 3.5em;
  color: inherit;
  justify-content: center;
  align-items: center;
  padding-left: 1em;
  padding-right: 1em;
  display: flex;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.form-submit-btn-p {
  margin-bottom: 0;
  font-size: 1.125em;
  font-weight: 500;
  line-height: 1.2;
}

.form-required {
  color: #ff4c24;
}

.form-divider {
  opacity: .15;
  background-color: #131313;
  width: 100%;
  height: 1px;
}

.form-submit-btn {
  outline-offset: 0px;
  color: #efeeec;
  cursor: pointer;
  background-color: #131313;
  border: 1px solid #ffffff0d;
  border-radius: 0;
  outline: 0 #0000;
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  padding: 1.005em 1.125em;
  font-size: .9rem;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 #0000;
}

.form-submit-btn:focus {
  outline-offset: 0px;
  border-width: 1px;
  border-color: #cbc8c5;
  outline-color: #131313;
}

.accept-wrapper {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  margin-top: 2rem;
  display: flex;
}

.text-checkbox {
  border: 1px solid #ffffff4d;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  place-items: center stretch;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
}

.text-checkbox.is--last {
  display: none;
}

.text-checkbox.is--button {
  background-color: #2f2f2f;
  border-color: #fff0;
}

.text-checkbox.is--mobile {
  display: none;
}

.row-form {
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  justify-content: center;
  display: flex;
}

.form-field-group-2 {
  grid-column-gap: .75em;
  grid-row-gap: .75em;
  flex-flow: column;
  align-items: flex-start;
  display: flex;
}

.form-label-2 {
  margin-bottom: 0;
  font-size: .875em;
  font-weight: 500;
  line-height: 1;
}

.form-input-2 {
  outline-offset: 0px;
  appearance: none;
  box-sizing: border-box;
  vertical-align: middle;
  background-color: #242424;
  border-radius: .328125em;
  outline: 0 #0000;
  height: auto;
  margin-bottom: 0;
  padding: .9em 3.5em .9em 1em;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.2;
  box-shadow: 0 0 #0000;
}

.form-input-2:focus {
  border-color: #cbc8c5;
}

.form-input-2::placeholder {
  color: #1313134d;
  background-color: #efeeec;
}

.form-field-group-3 {
  grid-column-gap: .75em;
  grid-row-gap: .75em;
  flex-flow: column;
  align-items: flex-start;
  display: flex;
}

.p-fields {
  width: 50ch;
  color: var(--light-050);
  text-align: center;
  margin-bottom: 2rem;
}

.form-step {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.text-span-6 {
  color: var(--yellow);
}

.div {
  color: var(--light-050);
  text-align: center;
  margin-bottom: 1rem;
}

.div-2 {
  text-align: center;
  margin-bottom: 2rem;
}

.radio-button-field {
  padding-left: 0;
}

.barca-gif {
  display: none;
}

.barcelona-mobile-details,
.barcelona-mobile-photo {
  display: none;
}

.footer-section {
  border-bottom: 1px solid #e4ebf3;
  padding-bottom: 2rem;
}

.container-2 {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-left: auto;
  padding-bottom: 1rem;
  padding-left: 2rem;
  padding-right: 2rem;
  display: flex;
}

.footer-wrapper {
  justify-content: space-between;
  align-items: flex-start;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.footer-content {
  grid-column-gap: 70px;
  grid-row-gap: 40px;
  grid-template-rows: auto;
  grid-template-columns: auto auto 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.footer-block {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.title-small {
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
}

.footer-link {
  color: #1a1b1f;
  margin-top: 12px;
  margin-bottom: 6px;
  font-size: 14px;
  line-height: 16px;
  text-decoration: none;
}

.footer-link:hover {
  color: #1a1b1fbf;
}

.footer-social-block {
  justify-content: flex-start;
  align-items: center;
  margin-top: 12px;
  margin-left: -12px;
  display: flex;
}

.footer-social-link {
  margin-left: 12px;
}

.footer-divider {
  background-color: #333;
  width: 100%;
  height: 1px;
  margin-top: 70px;
  margin-bottom: 15px;
}

.footer-copyright-center {
  text-align: center;
  font-size: 14px;
  line-height: 16px;
}

.svg-10 {
  color: #fff;
}

.svg-11 {
  color: #fff;
  width: 2rem;
}

.svg-12 {
  width: 2rem;
  height: 2rem;
}

.svg-13 {
  width: 1rem;
}

.links-wrapper {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.svg-14 {
  width: 1.5rem;
}

.svg-15 {
  width: 1rem;
}

.spotify-count {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.spotify-number {
  align-self: auto;
  font-size: 3rem;
  display: block;
}

.inner-wrap {
  border: 1px solid var(--yellow);
  padding: 1.1rem;
  position: relative;
}

.accordion-css__item-bottom {
  grid-template-rows: 0fr;
  display: grid;
  position: relative;
  overflow: hidden;
}

.accordion-css__item-bottom-content {
  padding-bottom: 1.5em;
  padding-left: 1.5em;
  padding-right: 1.5em;
}

.accordion-css__list {
  grid-column-gap: .5em;
  grid-row-gap: .5em;
  flex-flow: column;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  display: flex;
  position: static;
}

.accordion-css__item-bottom-wrap {
  flex-flow: column;
  height: 100000%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.accordion-css__item-icon-svg {
  width: 1em;
}

.accordion-css__item-icon {
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 2em;
  height: 2em;
  display: flex;
  transform: rotate(180deg);
}

.accordion-css__item-top {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  cursor: pointer;
  background-color: #fff0;
  justify-content: space-between;
  align-items: center;
  padding: 1em 1em 1em 1.5em;
  display: flex;
}

.accordion-css {
  max-width: 45rem;
  margin-top: 5rem;
  position: relative;
}

.accordion-css__item {
  border-bottom: 1px solid #ffffff1a;
  list-style: none;
  position: relative;
}

.accordion-css__item-h3 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
}

.accordion-css__item-p {
  color: var(--light-050);
  margin-bottom: 0;
  font-size: .9rem;
  line-height: 1.5;
}

.footer-copyright-center-copy {
  opacity: .49;
  text-align: center;
  font-size: 14px;
  line-height: 16px;
}

.bottom-line {
  background-color: var(--black);
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: -1px;
}

.italic-text {
  font-style: normal;
}

.text-span-7, .text-span-8, .text-span-9, .text-span-10, .text-span-11, .text-span-12, .text-span-13, .text-span-14, .text-span-15, .text-span-16 {
  color: var(--yellow);
}

.color-2 {
  color: #fc0;
  padding-left: .2em;
  padding-right: .2em;
}

.wrapper-p {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: column;
  margin-top: 3rem;
  display: flex;
}

.indicatif {
  color: var(--light-050);
}

.niveaux {
  justify-content: flex-start;
  align-items: flex-start;
  font-size: 1.5rem;
  display: flex;
  position: absolute;
  top: -9rem;
  left: 1rem;
}

.text-span-17, .text-span-18, .text-span-19, .text-span-20, .text-span-21 {
  color: var(--yellow);
}

.text-wrapper-voie {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: column;
  display: none;
}

.mobile-compare-placeholder-copy {
  display: none;
}

.desktop-compare-video {
  display: none;
}

@media screen and (min-width: 992px) {
  /* Skip the outgoing diagram's intermediate frames during section travel. */
  body[data-desktop-section-moving="true"] .section.is--compare {
    opacity: 0 !important;
  }

  .section.is--compare {
    /* Later pinned scenes overlap this one even before they become visible. */
    z-index: 2;
    pointer-events: none;
  }

  .section.is--compare .header-pres.is--compare {
    flex-direction: column;
    align-items: flex-start;
    /* Keep the title-to-content spacing used in the preceding section. */
    gap: 3rem;
  }

  .section.is--compare .big-title-section.is--compare {
    max-width: 25ch;
    margin-bottom: 0;
  }

  .section.is--compare .tree-container.is--compare {
    left: var(--desktop-compare-diagram-shift, 0px);
  }

  .section.is--compare .line.is--reallywant {
    width: 35rem;
  }

  .section.is--compare .label.is--compare3 {
    left: 36rem;
  }

  .desktop-compare-video {
    pointer-events: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: max-content;
    padding: .95rem 1.25rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
  }

  .desktop-compare-video::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    background: rgba(255, 255, 255, .6);
  }

  .desktop-compare-video:hover::before {
    background: #fff;
  }

  .desktop-compare-video.is--active {
    pointer-events: none;
    outline: 0;
  }

  .desktop-compare-video.is--active::before {
    opacity: 0;
  }

  .desktop-compare-video:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 5px;
  }

  .desktop-compare-video__copy {
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: .025em;
  }
}

.desktop-compare-player {
  position: fixed;
  z-index: 2147483200;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  background: transparent;
  color: #fff;
}

.desktop-compare-player__edge {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  background: rgba(255, 255, 255, .6);
}

.desktop-compare-player__edge.is--left,
.desktop-compare-player__edge.is--right {
  top: 0;
  bottom: 0;
  width: 1px;
}

.desktop-compare-player__edge.is--left { left: 0; }
.desktop-compare-player__edge.is--right { right: 0; }

.desktop-compare-player__edge.is--top,
.desktop-compare-player__edge.is--bottom {
  right: 0;
  left: 0;
  height: 1px;
}

.desktop-compare-player__edge.is--top { top: 0; }
.desktop-compare-player__edge.is--bottom { bottom: 0; }

.desktop-compare-player__close {
  position: absolute;
  right: 0;
  bottom: calc(100% + .5rem);
  padding: .25rem 0 .25rem .75rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: .8rem;
  text-transform: uppercase;
  cursor: pointer;
}

.desktop-compare-player__close:focus-visible {
  outline: 1px solid #fff;
  outline-offset: 4px;
}

.desktop-compare-player video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.text-span-22 {
  color: var(--yellow);
}

.t-title-network__line {
  display: block;
  white-space: nowrap;
}

.desktop-network-comma {
  display: none;
}

.text-span-23, .text-span-24, .text-span-25, .text-span-26, .text-span-27, .text-span-28, .text-span-29, .text-span-30, .text-span-31, .text-span-32, .text-span-33, .text-span-34 {
  color: var(--blanc);
}

.text-span-35, .text-span-36, .text-span-37, .text-span-38 {
  color: var(--yellow);
}

.svg-16 {
  width: 2rem;
  position: absolute;
  bottom: 32px;
}

.text-wrapper-date {
  z-index: 100;
  color: inherit;
  text-decoration: none;
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  text-align: left;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 45ch;
  max-width: 45ch;
  margin-top: 17rem;
  margin-left: 2rem;
  display: flex;
}

.paragraph {
  text-align: center;
  width: 17ch;
  margin-bottom: 0;
  font-size: 1.5rem;
}

.text-span-39 {
  color: var(--yellow);
}

.radio-button-label, .radio-label {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  display: flex;
}

.text-span-40, .text-span-41, .text-span-42, .text-span-43, .text-span-44, .text-span-45 {
  color: var(--yellow);
}

.text-span-46 {
  color: var(--blanc);
}

.text-span-47, .text-span-48, .text-span-49, .text-span-50, .text-span-51, .text-span-52 {
  color: var(--yellow);
}

.video-timeline {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.text-span-53, .text-span-54, .text-span-55, .text-span-56 {
  color: var(--yellow);
}

.text-span-57, .text-span-58 {
  color: var(--blanc);
}

.link-container {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  width: 350px;
  display: flex;
}

.link-pay {
  color: #000;
  background-color: #fff;
  width: 100%;
  padding: 10px 20px;
}

/* Card-only markup (icon/divider/price, plus the "not final" note)
   added for the mobile card redesign below - hidden here so desktop's
   existing plain button look is completely unaffected. */
.link-pay__icon,
.link-pay__divider,
.link-pay__meta,
.offers-note {
  display: none;
}

.div-block-4 {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  padding-right: 2rem;
  display: flex;
}

.text-span-59, .text-span-60, .text-span-61, .text-span-62, .text-span-63, .text-span-64, .text-span-65, .text-span-66, .text-span-67 {
  color: var(--yellow);
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .text-wrapper-map .t-title-network,
  .text-wrapper-spotify .t-title,
  .text-wrapper-barca .t-title {
    font-size: 3.1rem;
  }
}

@media screen and (max-width: 991px) {
  .sg-hero__title {
    font-size: 5rem;
  }

  .col.col-md-11 {
    flex: 91.6667%;
    max-width: 91.6667%;
  }

  .col.col-md-4 {
    flex: 33.3333%;
    max-width: 33.3333%;
  }

  .col.col-md-6 {
    flex: 50%;
    max-width: 50%;
  }

  .col.col-md-3 {
    flex: 25%;
    max-width: 25%;
  }

  .col.col-md-8 {
    flex: 66.6667%;
    max-width: 66.6667%;
  }

  .col.col-md-12 {
    flex: 100%;
    max-width: 100%;
  }

  .col.col-md-5 {
    flex: 41.6667%;
    max-width: 41.6667%;
  }

  .col.col-md-7 {
    flex: 58.3333%;
    max-width: 58.3333%;
  }

  .col.col-md-10 {
    flex: 83.3333%;
    max-width: 83.3333%;
  }

  .col.col-md-1 {
    flex: 8.33333%;
    max-width: 8.33333%;
  }

  .col.md--no-margin {
    margin-left: 0;
    margin-right: 0;
  }

  .col.col-md-9 {
    flex: 75%;
    max-width: 75%;
  }

  .col.col-md-2 {
    flex: 16.6667%;
    max-width: 16.6667%;
  }

  .sg-item__text-wrapper {
    width: 100%;
  }

  .title--1 {
    letter-spacing: -.15rem;
    font-size: 3.2rem;
  }

  .container.is--tracker {
    max-width: 85rem;
  }

  .md--hide {
    display: none;
  }

  .baseline {
    width: 43rem;
  }

  .ici-wrapper {
    left: 27rem;
  }

  .big-title-section {
    font-size: 3.1rem;
  }

  .tracker-container {
    margin-top: 10rem;
    padding-left: 14rem;
  }

  .wait-message {
    margin-left: 14rem;
  }

  .tree-horizontal-line, .tree-wrapper-lower {
    width: 40rem;
  }

  .header-pres.is--sections {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    flex-flow: column;
  }

  .header-pres.is--groupe {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
  }

  .map-container {
    left: 4.2rem;
  }

  .image-3 {
    opacity: .71;
  }

  .svg-wrapper {
    margin-top: 2rem;
    position: static;
  }

  .structure-text {
    width: 43ch;
  }

  .structure-wrapper {
    width: 39ch;
  }

  .stat {
    width: 15rem;
  }

  .title-intro {
    left: 4.5rem;
  }

  .container-2 {
    max-width: 728px;
  }

  .footer-content {
    grid-column-gap: 60px;
  }

  .text-wrapper-date {
    margin-top: 6rem;
    margin-left: 0;
  }

  .paragraph {
    font-size: .9375rem;
  }
}

@media screen and (max-width: 767px) {
  .sm--hide {
    display: none;
  }

  .hero-mobile-direct-access {
    z-index: 12;
    color: rgba(255, 255, 255, .78);
    visibility: hidden;
    opacity: 0;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: .3rem;
    text-transform: none;
    letter-spacing: -.015em;
    white-space: nowrap;
    align-items: center;
    gap: .3rem;
    padding: .42rem .55rem;
    font-family: Arial, sans-serif;
    font-size: .56rem;
    font-weight: 300;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    display: flex;
    position: absolute;
    top: 2.05rem;
    right: 1.25rem;
    transition: color .25s ease, border-color .25s ease;
  }

  .hero-mobile-direct-access:active {
    color: #fff;
    border-color: rgba(255, 255, 255, .42);
  }

  .hero-mobile-direct-access svg {
    width: .75rem;
    height: .75rem;
    flex: none;
  }

  .hero-mobile-discover {
    z-index: 2;
    color: rgba(255, 255, 255, .88);
    visibility: hidden;
    opacity: 0;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .035em;
    white-space: nowrap;
    font-size: .875rem;
    line-height: 1;
    display: block;
    position: absolute;
    bottom: 6.5rem;
    left: 50%;
    transform: translateX(-50%);
  }

  .container.is--hero .svg-16 {
    box-sizing: border-box;
    visibility: hidden;
    opacity: 0;
    width: 1.74rem;
    height: 1.74rem;
    bottom: 3.75rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    overflow: visible;
  }

  .container.is--hero .svg-16 .scroll-arrow {
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(1.5);
  }

  /* "Quelle formule te parle le plus" as two big cards instead of plain
     buttons - mobile only, desktop keeps its existing button look
     untouched (see the unscoped display:none rule above). Every
     selector here is the ".link-container .link-pay..." descendant
     form (not bare ".link-pay...") specifically to out-rank the
     pre-existing unscoped ".link-pay" button rule (a fixed height:4rem/
     3.5rem, overflow:hidden button with a hover "shine" sweep, defined
     in index.html's own inline <style> tag, which loads after this
     stylesheet - so on equal specificity it would otherwise win). */
  .link-container {
    width: 100%;
    max-width: 22rem;
    grid-column-gap: .75rem;
    grid-row-gap: .75rem;
  }

  .link-container .link-pay {
    background-color: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .18);
    /* Matches the un-rounded corners the plain button had before this
       card redesign (see the pre-existing ".link-pay" rule above). */
    border-radius: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    height: auto;
    padding: 1.75rem 1rem;
    display: flex;
    /* Per the flexbox spec, a flex item's automatic minimum size is its
       content size UNLESS overflow isn't visible, in which case it's 0 -
       so with the inherited overflow:hidden (see above) this card was
       collapsing to just its own padding and every child (icon/label/
       divider/price) rendered outside it instead of sizing it.
       min-height explicitly forces the same content-based sizing without
       needing overflow:visible to do it - which otherwise let the
       inherited hover-shine sweep (".link-pay:before", also from the
       pre-existing rule above) escape this card's bounds and cross into
       its sibling and the gap between them, instead of staying clipped
       to the one card it belongs to. */
    min-height: min-content;
    overflow: hidden;
  }

  .link-container .link-pay::before {
    left: -100%;
    transition: none;
    animation: none;
  }

  .link-container .link-pay:hover::before {
    left: -100%;
    animation: offer-card-sweep .55s ease-out forwards;
  }

  @keyframes offer-card-sweep {
    from {
      left: -100%;
    }

    to {
      left: 100%;
    }
  }

  .link-container .link-pay__icon {
    width: 2.75rem;
    height: 2.75rem;
    color: rgba(var(--yellow-rgb, 216, 180, 115), .9);
    display: flex;
  }

  .link-container .link-pay__icon svg {
    width: 100%;
    height: 100%;
  }

  .link-container .link-pay__icon.is--group {
    width: 3.65rem;
  }

  .link-container .link-pay__label {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 1rem;
    font-weight: 600;
    display: block;
  }

  .link-container .link-pay__divider {
    width: 2.5rem;
    height: 1px;
    background-color: rgba(255, 255, 255, .25);
    margin: .35rem 0;
    display: block;
  }

  .link-container .link-pay__meta {
    color: var(--light-050);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .75rem;
    display: block;
  }

  .offers-note {
    color: var(--light-050);
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: 100%;
    max-width: 22rem;
    margin-top: 1.25rem;
    font-size: .8125rem;
    display: flex;
  }

  .offers-note svg {
    width: 1rem;
    height: 1rem;
    flex: none;
  }

  .section.is--compare {
    overflow: hidden;
  }

  .section.is--timeline {
    height: auto;
  }

  .section.is--placeholder {
    height: var(--mobile-stable-viewport-height, 100svh);
  }

  .title--1 {
    letter-spacing: -.1rem;
    font-size: 2.2rem;
  }

  .row.flex-end {
    margin-top: auto;
    margin-left: 0;
    margin-right: 0;
    display: block;
  }

  .row.flex-start {
    margin-left: auto;
    margin-right: auto;
  }

  .container.is--hero {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .container.is--intro {
    padding-top: 19rem;
  }

  .container.is--tracker {
    padding-top: 2rem;
  }

  .container.is--section.is--timeline {
    height: auto;
    padding-top: calc(var(--mobile-stable-viewport-height, 100svh) * .4);
    padding-left: 0;
    padding-right: 0;
  }

  .container.is--second {
    padding-bottom: 0%;
  }

  .container.is--fourth {
    justify-content: flex-start;
    align-items: flex-start;
    padding-bottom: 0%;
  }

  .container.is--third {
    grid-column-gap: 5rem;
    grid-row-gap: 5rem;
    padding-top: 0%;
    padding-bottom: 0%;
  }

  .container.is--fifth {
    padding-bottom: 0%;
  }

  .container.is--map {
    flex-flow: column;
    height: var(--mobile-stable-viewport-height, 100svh);
  }

  .section.is--map,
  .container.is--map .map-wrapper {
    height: var(--mobile-stable-viewport-height, 100svh);
  }

  /* Real layout distance reserved for the sequential Timeline -> Map intro.
     It stays black underneath the fixed visual layers and gives each fade a
     stable scroll range without stretching the Timeline or the Map pin. */
  .mobile-map-intro-spacer {
    width: 100%;
    height: calc(var(--mobile-stable-viewport-height, 100svh) * .32);
    background: #0d0d0d;
    pointer-events: none;
  }

  /* Keep the complete map screen hidden until the timeline dot reaches its
     lowest endpoint and JS explicitly arms the fixed hand-off. */
  .section.is--map:not([data-mobile-handoff-state]) .container.is--map {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  /* At the timeline hand-off, the map is already in its final screen
     position and only its opacity changes. The section itself stays in the
     document flow so its own ScrollTrigger geometry remains intact. */
  .section.is--map.is--mobile-handoff-overlay {
    z-index: 35;
    position: relative;
    overflow: visible;
  }

  .section.is--map.is--mobile-handoff-overlay .container.is--map {
    z-index: 35;
    width: 100vw;
    height: var(--mobile-stable-viewport-height, 100svh);
    position: fixed;
    inset: 0;
  }

  /* During the timeline-to-map crossfade JS temporarily places the real
     container directly under <body>. This avoids the transformed/pinned
     ancestors that make position: fixed behave like an element in the
     scrolling section on mobile Safari. */
  .container.is--map.is--mobile-fixed-map-container {
    z-index: 2147482000;
    width: 100vw;
    height: var(--mobile-stable-viewport-height, 100svh);
    margin: 0 !important;
    position: fixed !important;
    inset: 0 !important;
  }

  .logo {
    width: 8rem;
  }

  .hero-content {
    margin-top: 12rem;
  }

  .chart-wrapper {
    margin-top: -5rem;
  }

  .baseline {
    width: 20rem;
  }

  .bar.is--1 {
    height: 14px;
  }

  .bar.mobile {
    display: none;
  }

  .ici-wrapper {
    left: 50%;
    transform: translate(-50%);
  }

  .header-section.is--sections.spe.is--special, .header-subtitle {
    display: none;
  }

  .header-wrapper-left {
    justify-content: space-between;
    width: 100%;
  }

  .big-title-section {
    font-size: 2.5rem;
  }

  .section.is--compare .mobile-compare-title-line {
    white-space: nowrap;
  }

  .big-title-section.is--timeline {
    font-size: 2rem;
  }

  .big-title-section.is--timeline.materiel.is--mobile {
    display: block;
  }

  .big-title-section.is--timeline.materiel.is--desktop, .big-title-section.is--timeline.is--desktop {
    display: none;
  }

  .big-title-section.is--timeline.is--mobile {
    display: block;
  }

  .tracker-container {
    margin-top: 13rem;
    padding-left: 0;
  }

  .day.is--first {
    z-index: 1;
    text-wrap: nowrap;
    width: 5.2rem;
    position: relative;
  }

  .day.is--mobile, .tracker-checkbox.is--mobile {
    display: none;
  }

  /* Sunday has no habit to check - show it as a dim, inert placeholder
     instead of hiding the column outright. Pulling it (and Saturday,
     which sits right before it) slightly left keeps the V/S/D gaps even
     and lines Sunday's checkbox up with the XP bar's own right margin. */
  .tracker-checkbox.is--last {
    display: flex;
    pointer-events: none;
    opacity: .55;
  }

  .tracker-checkbox.is--last .tracker-checkbox-inside {
    display: none;
  }

  /* translate rather than margin-left: .tracker-wrapper has no fixed
     width, so it sizes to fit its widest child - a negative margin here
     would shrink that intrinsic width and drag the XP bar and everything
     else in with it. translate shifts the paint position only. */
  .day.is-purge,
  .tracker-checkbox.is--last {
    translate: -.625rem 0;
  }

  .tracker-wrapper-mobile > .day.the-day {
    translate: -.3125rem 0;
  }

  /* left/position rather than translate: the check animation (GSAP scale)
     manages the translate/rotate/scale properties as a group and resets
     translate to "none" whenever it runs, which would yank this checkbox
     sideways. left is never touched by that animation, so the offset
     survives being checked. */
  .tracker-wrapper-mobile > .tracker-checkbox.is--button {
    position: relative;
    left: -.3125rem;
  }

  .tracker-pompes {
    text-align: center;
  }

  .wait-message {
    margin-left: 0;
  }

  .tracker-highlight {
    inset: -2rem 3.45rem -2rem 15.3rem;
  }

  .tree-wrapper.is--compare {
    flex-flow: column;
    margin-top: 6rem;
  }

  .line {
    width: 2px;
  }

  .line.is--vertical {
    width: 90%;
    height: 2px;
  }

  .line.is--vertical.is--top {
    width: 70%;
  }

  .line.is--vertical.is--bottom {
    width: calc(30% - 7px);
  }

  .line.is--compare {
    width: 2px;
    height: 2.5rem;
  }

  .line.is--uwant {
    width: 2px;
    /* Mirror the lower branch: the vertical stroke ends at the bottom of
       its two-line label while the label itself keeps its current anchor. */
    height: 6.5rem;
  }

  .line.is--reallywant {
    width: 2px;
    height: 18rem;
  }

  .tree-horizontal-line {
    width: 23rem;
    height: 2px;
  }

  .tree-wrapper-lower {
    width: 23rem;
  }

  .tree-child-wrapper.is--one {
    order: 1;
  }

  .tree-child-wrapper.is--one.is--toi {
    order: 2;
  }

  .tree-child-wrapper.is--two, .tree-child-wrapper.is--four {
    display: none;
  }

  .tree-child-wrapper.is--five {
    order: 3;
  }

  .tree-child-wrapper.is--three {
    order: 1;
  }

  .label.is--compare2 {
    text-align: left;
    width: max-content;
    min-width: 0;
    max-width: none;
    top: 4rem;
    right: 2.1875rem;
    left: auto;
    transform: none;
  }

  .label.is--compare3 {
    text-align: left;
    width: max-content;
    min-width: 0;
    max-width: none;
    top: 15.5rem;
    left: 2.1875rem;
    transform: none;
  }

  .label.is--compare2,
  .label.is--compare3 {
    white-space: nowrap;
  }

  /* Detached visual cues symmetrically connect both labels to their vertical
     branches. Because they belong to the labels, they inherit the exact same
     reveal opacity and timing as their respective copy. */
  .label.is--compare2::before,
  .label.is--compare3::before {
    content: "";
    background: currentColor;
    width: 1.125rem;
    height: 1px;
    position: absolute;
    top: .28em;
    opacity: .62;
  }

  .label.is--compare2::before {
    left: calc(100% + .45rem);
  }

  .label.is--compare3::before {
    right: calc(100% + .45rem);
  }

  .compare-label-copy {
    flex-direction: column;
    align-items: stretch;
    display: flex;
    transform: translateY(-.3125rem);
  }

  .compare-label-line {
    display: block;
  }

  /* Keep “CE QUI TE” exactly where it is and align the D in “DISTRAIT”
     below the C. Only the second line's internal alignment changes; the
     label box remains anchored beside the vertical branch. */
  .label.is--compare2 .compare-label-copy.is--distract {
    align-items: flex-start;
    text-align: left !important;
  }

  .label.is--compare2 .compare-label-copy.is--distract .compare-label-line {
    width: 100%;
    text-align: left !important;
  }

  .tree-container.is--second, .tree-container.is--three {
    top: 19rem;
  }

  .tree-container.is--compare {
    top: 17rem;
  }

  .tree-container.is--timeline {
    grid-column-gap: 5rem;
    grid-row-gap: 5rem;
    height: auto;
    padding-top: 5rem;
    padding-bottom: 5rem;
    position: relative;
  }

  .header-pres.is--groupe, .header-pres.is--personnes {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    margin-top: 2rem;
  }

  .header-pres.is--compare {
    justify-content: flex-start;
    align-items: center;
    margin-top: 2rem;
  }

  .tree-left-side {
    flex-flow: column;
  }

  .tree-right-wrapper {
    flex-flow: row-reverse;
    justify-content: space-between;
    align-items: flex-start;
    width: 90%;
    height: auto;
  }

  .line-wrapper-top {
    right: 7px;
  }

  .line-vertical-clr {
    width: 15.7rem;
    height: 2px;
    bottom: -2px;
    left: auto;
    right: 0;
  }

  .dot-wrapper.is--timeline {
    display: block;
    position: absolute;
    left: 1px;
  }

  .inscription-rc {
    text-wrap: wrap;
    min-width: 12ch;
    max-width: 12ch;
    line-height: 100%;
    top: -5rem;
    bottom: 0;
    left: 0;
  }

  .timeline-wrapper {
    z-index: 1;
    opacity: 100;
    width: 2px;
    height: 100%;
    top: 0%;
    left: 1rem;
  }

  .white-line {
    width: 2px;
    height: calc(var(--mobile-stable-viewport-height, 100svh) * .4);
    transform: translate(0, -100%);
  }

  .panel {
    height: auto;
    min-height: auto;
    overflow: hidden;
  }

  .panel.is--fourth {
    justify-content: flex-start;
    align-items: flex-start;
  }

  .text-wrapper.is--first, .text-wrapper.is--second, .text-wrapper.is--third, .text-wrapper.is--fifth {
    max-width: none;
  }

  .t-eyebrow {
    font-size: .875rem;
  }

  .t-title {
    font-size: 1.25rem;
  }

  .t-p {
    font-size: .875rem;
  }

  .t-inner-wrapper {
    z-index: 10;
    width: auto;
    position: relative;
  }

  .t-inner-wrapper.is--spec {
    width: auto;
  }

  .t-lower-wrapper {
    flex-flow: column;
  }

  .t-line-wrapper {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    flex-flow: column;
  }

  .placeholder {
    width: 100%;
    height: calc(var(--mobile-stable-viewport-height, 100svh) * .4);
    display: none;
  }

  .map-wrapper {
    overflow: hidden;
  }

  .text-wrapper-map {
    width: 100%;
    max-width: none;
  }

  .text-wrapper-map.is--first, .text-wrapper-map.is--second, .text-wrapper-map.is--third, .text-wrapper-map.is--fifth {
    max-width: none;
  }

  .dot-video.is--timeline {
    display: block;
    position: absolute;
    left: 1px;
  }

  .map-container {
    margin-top: calc(var(--mobile-stable-viewport-height, 100svh) * .17);
    left: 2.3rem;
  }

  .dot-normal.is--timeline {
    display: block;
    position: absolute;
    left: 1px;
  }

  .dot-normal.is--2, .dot-normal.is--1, .dot-normal.is--3, .dot-normal.is--4, .dot-normal.is--5, .dot-normal.is--10, .dot-normal.is--11, .dot-normal.is--13 {
    display: none;
  }

  /* Five additional network lights appear with the autonomous Map intro,
     but never join the three-point convergence toward Barcelona. */
  .dot-normal.mobile-map-fixed-point {
    display: block;
  }

  .mobile-map-fixed-point.is--fixed-1 {
    top: 47%;
    left: 31%;
  }

  .mobile-map-fixed-point.is--fixed-2 {
    top: 48%;
    left: 45%;
  }

  .mobile-map-fixed-point.is--fixed-3 {
    top: 58%;
    left: 35%;
  }

  .mobile-map-fixed-point.is--fixed-4 {
    top: 63%;
    left: 47%;
  }

  .mobile-map-fixed-point.is--fixed-5 {
    top: 72%;
    left: 42%;
  }

  /* Mobile map points use the same white-hot signature as the animated line
     tip, with a slightly larger 4.5px core. Video points contain a legacy
     .dot-bg pulse layer; removing it prevents a second, oversized halo from
     briefly returning while scrolling. */
  .map-container .dot-bg {
    opacity: 0 !important;
    visibility: hidden !important;
    display: none !important;
  }

  .map-container .dot {
    background: rgba(255, 255, 255, .98) !important;
    width: 4.5px;
    height: 4.5px;
    filter: none !important;
    box-shadow: 0 0 3px 1px rgba(255, 255, 255, .58), 0 0 6px 1.5px rgba(var(--yellow-rgb, 216, 180, 115), .24) !important;
  }

  .dot-barcelona {
    top: 79%;
    left: 28%;
  }

  .text-wrapper-barca {
    left: 0%;
  }

  .text-wrapper-barca.is--first, .text-wrapper-barca.is--second, .text-wrapper-barca.is--third, .text-wrapper-barca.is--fifth {
    max-width: none;
  }

  .master-section {
    position: relative;
  }

  /* Safari can expose a few pixels below a fixed 100vh box while its browser
     chrome settles. Anchor the loader to all four viewport edges instead and
     overscan by 2px so no Tracker copy can leak through during startup. */
  .overlay-load {
    z-index: 2147483600;
    box-sizing: border-box;
    width: auto;
    height: auto;
    min-height: 0;
    position: fixed;
    inset: -2px;
    overflow: hidden;
  }

  .overlay-logo {
    width: 17rem;
  }

  /* Prevent the raw HTML "0 %" from flashing while fonts and the loader
     timeline are still being prepared. JS reveals it on the first real
     progress value, never while it is stalled at zero. */
  .logo-number {
    visibility: hidden;
    opacity: 0;
  }

  .tracker-wrapper-mobile {
    grid-column-gap: 2.6rem;
    grid-row-gap: 2.6rem;
    display: flex;
  }

  .overlay-line {
    width: 80%;
  }

  .mobile-loader-line {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scaleX(0);
    display: block;
  }

  /* The logo SVG contains transparent space below its visible lettering.
     Raise the divider and percentage as one visual group so the perceived
     gap on both sides of the divider is balanced, without changing their
     own spacing or the loader animation. */
  .mobile-loader-line,
  .overlay-logo-wrapper > .logo-number {
    position: relative;
    top: -1.25rem;
  }

  .barca-video-wrapper {
    width: 6.5rem;
    height: 2.85rem;
    padding: .2rem;
    /* This sits inside .dot-barcelona, itself a child of the heavily
       scaled (~2.6x) .map-container - a local px offset here renders
       roughly 2.6x larger on screen, so 165px lands the photo much
       closer to the middle of the empty space below it instead of near
       the top of it. */
    transform: translate(0, 165px);
  }

  .video-barca {
    display: none;
  }

  .click-me {
    font-size: .8125rem;
    transform: translate(0, -110%);
  }

  .faq-chat-container {
    width: 100%;
  }

  .chat-bubble, .chat-bubble.is--secondary {
    font-size: .9rem;
  }

  .iphone-wrapper {
    display: none;
  }

  .svg-7, .svg-8 {
    width: 8rem;
  }

  .timeline-container {
    overflow: visible;
  }

  .timeline-panels-wrapper {
    justify-content: flex-start;
    align-items: center;
    padding-top: calc(var(--mobile-stable-viewport-height, 100svh) * .7);
    position: relative;
  }

  .timeline-panel.is--1 {
    justify-content: flex-start;
    align-items: flex-start;
    min-height: auto;
    padding-top: 3rem;
    padding-bottom: 1rem;
    padding-left: 5rem;
  }

  .timeline-panel.is--2.is--fixed {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    min-height: auto;
    padding-top: 3rem;
    padding-bottom: 1rem;
    padding-left: 5rem;
  }

  .timeline-panel.is--3 {
    justify-content: flex-start;
    align-items: flex-start;
    min-height: auto;
    margin-bottom: 8rem;
    padding-top: 3rem;
    padding-left: 5rem;
  }

  .timeline-panel.is--4.is--fixed {
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
    flex-flow: column;
    flex: 0 auto;
    order: 9999;
    justify-content: flex-start;
    align-items: flex-start;
    min-height: auto;
    margin-top: 20rem;
    padding-top: 3rem;
    padding-left: 5rem;
  }

  .timeline-panel.is--5, .timeline-panel.is--6, .timeline-panel.is--7, .timeline-panel.is--8, .timeline-panel.is--9 {
    justify-content: flex-start;
    align-items: flex-start;
    min-height: auto;
    padding-top: 3rem;
    padding-bottom: 1rem;
    padding-left: 5rem;
  }

  .div-block-3 {
    max-width: 100%;
  }

  .text-block-4, .text-block-4.is--short {
    width: auto;
    max-width: 100%;
  }

  .text-block-4.is--long {
    width: auto;
  }

  .stats-container {
    width: 88%;
    margin-left: 2.1rem;
    position: absolute;
    top: 0;
    left: 0;
  }

  .stats-wrapper {
    padding: 1.5rem 1rem 4rem 1.5rem;
  }

  .stat {
    width: 100%;
    padding-top: 0;
    padding-bottom: 0;
    font-size: .7rem;
  }

  .gif-container {
    max-width: 100%;
    display: none;
  }

  .gif-container.is--mobile {
    order: 0;
    margin-top: 1rem;
    display: block;
  }

  .image-4 {
    display: inline-block;
  }

  .image-4.is--mobile {
    padding-top: 0;
  }

  .stat-right {
    font-size: .7rem;
  }

  .stackspacer {
    position: relative;
  }

  .title-intro {
    font-size: 2.4rem;
    top: 8rem;
  }

  /* Legacy timeline guides are retained in the shared HTML for the desktop
     composition only. Mobile uses the real compare dot plus the generated
     access/timeline guides, so these old nodes must not create boxes, pins or
     viewport-dependent measurements. */
  .line-container,
  .grey-line-new {
    display: none;
  }

  .line-new {
    background-color: #fff;
    width: 2px;
    height: 100%;
  }

  .dot-wrapper-new {
    background-color: #fff;
    border-radius: 20px;
    width: 12px;
    height: 12px;
    position: relative;
    bottom: 0;
    left: -5px;
    display: none;
  }

  .line-vertical-wrapper {
    justify-content: flex-start;
    align-items: center;
    width: 90%;
    height: 2px;
    min-height: 2px;
    display: flex;
  }

  .svg-9 {
    width: 1.6rem;
  }

  .stat-title {
    margin-bottom: .6rem;
    font-size: .8rem;
  }

  .stats-inner {
    border: 1px solid #313131;
    padding: .5rem 1rem 2rem;
  }

  .text-wrapper-spotify {
    width: 100%;
    max-width: none;
  }

  .text-wrapper-spotify.is--first, .text-wrapper-spotify.is--second, .text-wrapper-spotify.is--third, .text-wrapper-spotify.is--fifth {
    max-width: none;
  }

  .img-spotify {
    width: 9rem;
  }

  .lower-wrapper {
    margin-top: 3rem;
  }

  .spotify-svg {
    width: 6rem;
  }

  .h2-form {
    margin-bottom: 1.5rem;
    font-size: 3rem;
  }

  .text-block-5 {
    font-size: .8rem;
  }

  .form-group {
    width: 100%;
  }

  .form-notifcation {
    min-height: 13rem;
  }

  .text-checkbox.is--mobile {
    display: none;
  }

  .p-fields {
    width: 100%;
  }

  .barca-gif {
    display: block;
  }

  .footer-section {
    padding-left: 15px;
    padding-right: 15px;
  }

  .footer-wrapper {
    flex-direction: column;
    align-items: center;
  }

  .footer-content {
    grid-template-columns: 1fr;
    margin-top: 40px;
  }

  .footer-block {
    align-items: center;
  }

  .footer-link:hover {
    color: #1a1b1fbf;
  }

  .footer-social-block {
    margin-top: 20px;
    margin-left: -20px;
  }

  .footer-social-link {
    margin-left: 20px;
  }

  .footer-divider {
    margin-top: 60px;
  }

  .links-wrapper {
    justify-content: center;
    align-items: center;
  }

  .link-footer.is--spotify {
    margin-bottom: -2px;
  }

  .niveaux {
    text-align: center;
    font-size: 1.3rem;
    top: -8rem;
  }

  .text-wrapper-date {
    margin-top: 2rem;
    left: 0%;
  }

  .text-wrapper-date.is--first, .text-wrapper-date.is--second, .text-wrapper-date.is--third, .text-wrapper-date.is--fifth {
    max-width: none;
  }

  .video-timeline {
    display: none;
  }
}

@media screen and (max-width: 479px) {
  .sg-hero__title {
    letter-spacing: 0;
    font-size: 2rem;
  }

  .sg__placeholder {
    height: 5rem;
  }

  .cookie__text {
    font-size: .75rem;
  }

  .form {
    width: 100%;
  }

  .form__col {
    flex: 1;
    width: auto;
  }

  .xs--hide {
    display: none;
  }

  .cookie__text-wrapper {
    width: 100%;
    margin-top: 1rem;
  }

  .col.mr-2-col {
    margin-right: 0%;
  }

  .col.col-xs-7 {
    flex: 58.3333%;
    max-width: 58.3333%;
  }

  .col.col-xs-1 {
    flex: 8.33333%;
    max-width: 8.33333%;
  }

  .col.col-xs-2 {
    flex: 16.6667%;
    max-width: 16.6667%;
  }

  .col.col-xs-8 {
    flex: 66.6667%;
    max-width: 66.6667%;
  }

  .col.xs--no-margin {
    margin-left: 0;
    margin-right: 0;
  }

  .col.col-xs-10 {
    flex: 83.3333%;
    max-width: 83.3333%;
  }

  .col.col-xs-9 {
    flex: 75%;
    max-width: 75%;
  }

  .col.col-xs-3 {
    flex: 25%;
    max-width: 25%;
  }

  .col.mr-1-col {
    margin-right: 0%;
  }

  .col.ml-1-col {
    margin-left: 0%;
  }

  .col.col-xs-5 {
    flex: 41.6667%;
    max-width: 41.6667%;
  }

  .col.col-xs-11 {
    flex: 91.6667%;
    max-width: 91.6667%;
  }

  .col.col-xs-12 {
    flex: 100%;
    max-width: 100%;
  }

  .col.col-xs-6 {
    flex: 50%;
    max-width: 50%;
  }

  .col.col-xs-4 {
    flex: 33.3333%;
    max-width: 33.3333%;
  }

  .col.ml-2-col {
    margin-left: 0%;
  }

  .sg-item__text-wrapper {
    width: 100%;
  }

  .section.is--intro {
    height: 100svh;
  }

  .sg-hero__wrapper {
    padding-top: 6.25rem;
    padding-bottom: 3.125rem;
  }

  .title--1 {
    letter-spacing: -.1rem;
    font-size: 2.3125rem;
    line-height: .94;
  }

  .form__button {
    font-size: .875rem;
  }

  .cookie__link {
    font-size: .75rem;
  }

  .sg-item__title {
    margin-right: 0;
  }

  .sg-hero__text {
    text-align: center;
    margin-top: 3.125rem;
    font-size: 1.4rem;
  }

  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .container.is--hero {
    height: 100svh;
  }

  .container.is--header {
    padding-right: 1rem;
  }

  .container.is--intro {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .container.is--tracker {
    flex-flow: column;
    display: flex;
  }

  .container.is--choice {
    height: var(--mobile-stable-viewport-height, 100svh);
  }

  .container.is--second, .container.is--fourth, .container.is--third, .container.is--fifth, .container.is--first {
    padding-left: 2.5rem;
  }

  .container.is--form {
    justify-content: center;
    align-items: center;
    padding-top: 0;
  }

  .sg-item__color {
    height: 13rem;
  }

  .cookie__content {
    flex-flow: column;
  }

  .sg__wrapper {
    padding-top: 3.125rem;
  }

  .sg-card__wrapper.sg-card__wrapper--color {
    margin-top: .625rem;
  }

  .text--large {
    font-size: 6rem;
  }

  .form__wrapper {
    width: 100%;
  }

  .sg-item__title-wrapper {
    justify-content: space-between;
  }

  .sg-hero__title--small.title--4 {
    text-align: center;
    margin-bottom: 6.25rem;
  }

  .p-hero {
    max-width: 30ch;
  }

  .logo {
    width: 8.4rem;
    top: 7.3rem;
  }

  .hero-content {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    margin-top: 15rem;
  }

  .baseline {
    width: 100%;
  }

  .text-section.is--groupe.is--second {
    color: #fff;
  }

  .tracker-container {
    order: 3;
    margin-top: 8.1rem;
  }

  .tracker-pompes {
    font-size: 1.4rem;
  }

  .wait-message {
    order: 5;
    margin-top: 0;
  }

  .tree-wrapper.is--compare {
    margin-top: 8rem;
  }

  .line.is--reallywant {
    height: 15rem;
  }

  .tree-horizontal-line, .tree-wrapper-lower {
    width: 16rem;
  }

  .label.is--compare3 {
    top: 12.5rem;
  }

  .label.is--last {
    bottom: -2.5rem;
  }

  .tree-container.is--first {
    margin-top: 0;
  }

  .tree-container.is--second, .tree-container.is--three {
    margin-top: 0;
    top: 17rem;
  }

  .tree-container.is--compare {
    top: 17rem;
  }

  .line-vertical-clr {
    width: 11.2rem;
  }

  .dot-wrapper.is--timeline {
    left: 2px;
  }

  .t-title {
    font-size: 2rem;
  }

  .t-p.is--barca {
    pointer-events: none;
  }

  .t-inner-wrapper {
    pointer-events: all;
  }

  .t-inner-wrapper.is--barca {
    pointer-events: none;
  }

  .white-line-wrapper {
    width: 2px;
    height: 100%;
    position: relative;
    overflow: visible;
  }

  .overlay-timeline {
    z-index: 100;
    pointer-events: auto;
    background-color: red;
    width: 100%;
    height: calc(var(--mobile-stable-viewport-height, 100svh) * .4);
    position: sticky;
  }

  .text-wrapper-map {
    z-index: 40;
    position: relative;
  }

  .dot-video.is--timeline {
    left: 2px;
  }

  .dot-video.is--2 {
    z-index: 1000;
  }

  .dot-normal.is--timeline {
    left: 2px;
  }

  .dot-normal.is--9 {
    top: 54%;
    left: 42%;
  }

  .text-wrapper-barca {
    z-index: 40;
    pointer-events: none;
  }

  .overlay-text {
    font-size: 1.5rem;
  }

  .overlay-logo {
    width: 15rem;
  }

  .barca-video-wrapper {
    width: 6.5rem;
  }

  .chat-bubble.is--secondary {
    line-height: 109%;
  }

  .svg-7, .svg-8 {
    width: 6rem;
  }

  .svg-wrapper {
    flex-flow: row;
    order: 4;
    margin-top: 3rem;
  }

  .timeline-panels-wrapper {
    justify-content: flex-start;
    align-items: center;
    position: relative;
  }

  .timeline-panel.is--1 {
    padding-bottom: 1rem;
    padding-left: 3rem;
    padding-right: 0;
  }

  .timeline-panel.is--2.is--fixed {
    padding-left: 3rem;
  }

  .timeline-panel.is--3 {
    padding-left: 3rem;
    padding-right: 2rem;
  }

  .timeline-panel.is--4.is--fixed {
    width: 100%;
    min-width: auto;
    padding-left: 3rem;
    padding-right: 2rem;
  }

  .timeline-panel.is--5, .timeline-panel.is--6, .timeline-panel.is--7, .timeline-panel.is--8, .timeline-panel.is--9 {
    padding-bottom: 1rem;
    padding-left: 3rem;
    padding-right: 2rem;
  }

  .div-block-3 {
    width: 100%;
    padding-right: 2rem;
  }

  .text-block-4 {
    width: 100%;
  }

  .structure-container {
    max-width: 100%;
  }

  .structure-text {
    width: auto;
    font-size: .8rem;
  }

  .structure-wrapper {
    width: 100%;
  }

  .stats-wrapper {
    padding-bottom: 5rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .stat {
    grid-column-gap: 0rem;
    grid-row-gap: 0rem;
    justify-content: flex-start;
    align-items: center;
    font-size: .6rem;
  }

  .stat.is--fierte {
    display: none;
  }

  .gif-container {
    order: 9999;
  }

  .stat-text {
    width: 12.7rem;
  }

  .stat-right {
    font-size: .67rem;
  }

  .title-intro {
    left: 1.5rem;
  }

  .line-container {
    z-index: 100;
    height: 39dvh;
  }

  .dot-wrapper-new {
    left: -6px;
  }

  .grey-line-new {
    height: 77.6%;
    top: 40dvh;
  }

  .stat-title {
    margin-bottom: .4rem;
    padding-bottom: .2rem;
    font-size: .6rem;
  }

  .stats-inner {
    border-style: none;
    width: 100%;
    padding-bottom: 1rem;
    padding-left: 0;
    padding-right: 2rem;
  }

  .text-wrapper-spotify {
    z-index: 40;
    position: relative;
  }

  .lower-wrapper {
    margin-top: 2rem;
  }

  .h2-form {
    font-size: 2rem;
  }

  .text-block-5 {
    margin-top: .2rem;
    margin-bottom: -1rem;
    font-size: .875rem;
    line-height: 160%;
  }

  .form-input {
    height: 3.5rem;
  }

  .form-2 {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
  }

  .form-notifcation {
    min-height: auto;
  }

  .accept-wrapper {
    justify-content: center;
    align-items: center;
  }

  .row-form {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
    flex-flow: column;
    width: 100%;
  }

  .row-form.is--radio {
    grid-column-gap: .75rem;
    grid-row-gap: .75rem;
  }

  .p-fields {
    margin-bottom: 0;
    font-size: .9rem;
  }

  .div {
    margin-bottom: 2rem;
    font-size: .8rem;
  }

  .div-2 {
    color: #fff;
    margin-bottom: 2rem;
    font-size: .9rem;
  }

  .span-2 {
    font-size: .9rem;
  }

  .container-2 {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    flex-flow: column;
    max-width: none;
  }

  .link-footer.is--spotify {
    margin-bottom: 0;
  }

  .inner-wrap, .wrapper-p {
    margin-top: 2rem;
  }

  .niveaux {
    font-size: 1.4rem;
    top: -2.3rem;
  }

  .text-wrapper-date {
    z-index: 40;
    pointer-events: none;
    cursor: default;
    width: auto;
    margin-top: 5.04rem;
  }

  body .text-wrapper-date.is--date-card .paragraph:first-of-type {
    font-size: .63rem;
  }

  body .text-wrapper-date.is--date-card .paragraph:last-of-type {
    color: rgba(255, 255, 255, .96);
    font-size: .54rem;
  }

  body .text-wrapper-date.is--date-card .paragraph:last-of-type .text-span-39 {
    color: rgba(255, 255, 255, .96);
  }

  .barca-video-wrapper {
    display: none !important;
  }

  .barcelona-mobile-details {
    z-index: 45;
    pointer-events: none;
    flex-direction: column;
    align-items: flex-start;
    width: calc(100% - 2rem);
    max-height: none;
    display: flex;
    position: absolute;
    top: 21.5rem;
    left: 1rem;
    padding-bottom: .5rem;
    overflow: visible;
    scrollbar-width: none;
  }

  .barcelona-mobile-photo {
    display: none !important;
  }

  .barcelona-mobile-immersions-intro {
    width: 100%;
    /* Shift the complete immersion sequence down together: the grid remains
       in normal flow, so its established gap below the paragraph is kept. */
    margin: calc(5.25rem + 20px) 0 0;
  }

  .barcelona-mobile-immersions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .4rem;
    width: 100%;
    margin-top: 1.4rem;
    display: grid;
  }

  .barcelona-mobile-immersion {
    color: rgba(255, 255, 255, .76);
    border: 1px solid rgba(255, 255, 255, .12);
    border-left-color: rgba(var(--yellow-rgb, 216, 180, 115), .78);
    background: rgba(18, 18, 18, .66);
    min-height: 2.25rem;
    padding: .48rem .55rem;
    font-size: .65rem;
    line-height: 1.15;
    display: flex;
    align-items: center;
    gap: .48rem;
  }

  .barcelona-mobile-immersion__pictogram {
    color: #d8b473;
    width: 1.12rem;
    height: 1.12rem;
    flex: none;
    display: block;
  }

  .barcelona-mobile-immersion__pictogram svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }

  .barcelona-mobile-immersion__label {
    min-width: 0;
  }

  .paragraph {
    width: auto;
    margin-bottom: 0;
    font-size: .875rem;
  }
}

@media screen and (min-width: 768px) {
  /* Keep the legacy pulse layer disabled; desktop uses a smaller glow below. */
  .tree-container.is--compare
  .line-wrapper-bottom > .dot-wrapper .dot {
    background: #fff !important;
    box-shadow: none !important;
    filter: none !important;
    animation: none !important;
  }

  .tree-container.is--compare
  .line-wrapper-bottom > .dot-wrapper .dot .dot-bg {
    opacity: 0 !important;
    visibility: hidden !important;
    display: none !important;
  }

  .desktop-timeline-handoff-dot {
    background: #fff !important;
    box-shadow: none !important;
    filter: none !important;
    animation: none !important;
  }
}

@media screen and (min-width: 992px) {
  .tree-container.is--compare
  .line-wrapper-bottom > .dot-wrapper .dot {
    width: 4px;
    height: 4px;
  }

  .tree-container.is--compare
  .line-wrapper-bottom > .dot-wrapper .dot,
  .desktop-compare-white-tip,
  .desktop-timeline-handoff-dot,
  .desktop-tree-progress-tip {
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 0 3px 1px rgba(255, 255, 255, .58),
      0 0 6px 1.5px rgba(var(--yellow-rgb, 216, 180, 115), .24) !important;
  }
}


@font-face {
  font-family: 'Bourgeois';
  src: url('../fonts/Bourgeois-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bourgeois';
  src: url('../fonts/Bourgeois-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Unified hero sequence — phones only. Tablet keeps the original layout. */
@media screen and (max-width: 767px) {
  /* Keep the global horizontal crop without turning the page wrapper into a
     scroll container or changing the mobile Hero's viewport reference. */
  .page-wrapper {
    overflow-x: clip;
    overflow-y: visible;
    /* Share the Hero's composition geometry with the following mobile
       sections so their breathing room follows the same Safari viewport. */
    --mobile-hero-layout-height: var(--mobile-stable-viewport-height, 100svh);
    --mobile-hero-content-shift: calc(
      var(--mobile-hero-layout-height) * .04 - 1rem
      - env(safe-area-inset-bottom, 0px) * .5
    );
    --mobile-hero-button-height: max(44px, 3.61125rem);
    --mobile-hero-button-gap: 12px;
    --mobile-hero-diagram-action-gap: clamp(36px, calc(var(--mobile-hero-layout-height) * .075), 64px);
    --mobile-experience-button-offset: 50px;
    --mobile-hero-actions-top: calc(
      var(--mobile-hero-layout-height) * .5
      + var(--mobile-hero-content-shift)
      + var(--mobile-hero-diagram-action-gap)
      + var(--mobile-experience-button-offset)
    );
  }

  /* The scroll range advances the Hero beats in one viewport composition.
     The first title only fades; the following gesture starts navigation. */
  .section.is--hero-sequence.is--mobile-native-hero {
    --mobile-hero-artwork-offset: clamp(56px, calc(var(--mobile-hero-layout-height) * .11), 96px);
    height: calc(
      var(--mobile-hero-layout-height)
      + var(--mobile-hero-native-title-exit-distance, 16rem)
    );
    margin-bottom: 0;
    min-height: 0;
    position: relative;
  }

  /* Mobile navigation now uses scrolling. Preserve the former action's
     coordinate as the introduction's Origins alignment reference. */
  .section.is--hero-sequence .desktop-hero-sequence__unlock-divider {
    display: none;
  }

  .section.is--hero-sequence .desktop-hero-sequence__explore {
    box-sizing: border-box;
    isolation: isolate;
    overflow: hidden;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 14rem;
    max-width: calc(100% - 3.5rem);
    height: var(--mobile-hero-button-height, 3.61125rem);
    padding: .7rem .55rem;
    border: 1px solid #2a2a2a;
    border-radius: 0;
    background: transparent;
    color: #a0a0a0;
    font-family: Bourgeois, Arial, sans-serif;
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.44;
    letter-spacing: .045em;
    text-transform: uppercase;
    text-align: center;
    top: var(--mobile-hero-actions-top);
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    transition: color .2s ease, border-color .2s ease, background-color .2s ease;
  }

  /* Each masked layer lights both the background and its matching text.
     Two 6s loops offset by 3s allow a 5.76s traversal without speeding up
     the next pass or resetting one mid-button. */
  .mobile-button-veil {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .11);
    color: #fff;
    --mobile-hero-veil-mask: linear-gradient(
      108deg,
      transparent 0%,
      rgba(255, 255, 255, .227) 24%,
      #fff 50%,
      rgba(255, 255, 255, .227) 76%,
      transparent 100%
    );
    -webkit-mask-image: var(--mobile-hero-veil-mask);
    mask-image: var(--mobile-hero-veil-mask);
    -webkit-mask-size: 65% 200%;
    mask-size: 65% 200%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    /* Mask positions use the remaining 35% of the box as their reference;
       these endpoints preserve the former translated veil's exact path. */
    -webkit-mask-position: -287.857% 50%;
    mask-position: -287.857% 50%;
    opacity: 0;
    pointer-events: none;
  }

  .mobile-button-veil__label {
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-align: center;
  }

  .section.is--hero-sequence[data-mobile-hero-locked="true"]
  .desktop-hero-sequence.is--complete
  .desktop-hero-sequence__explore:not(:disabled) .mobile-button-veil,
  .mobile-compare-vsl-host .hero-vsl-experience:not(.is--vsl-active)
  .hero-video-cta.is--veil-visible > .mobile-button-veil {
    animation: mobile-button-veil 6s .8s infinite;
  }

  .section.is--hero-sequence[data-mobile-hero-locked="true"]
  .desktop-hero-sequence.is--complete
  .desktop-hero-sequence__explore:not(:disabled) .mobile-button-veil + .mobile-button-veil,
  .mobile-compare-vsl-host .hero-vsl-experience:not(.is--vsl-active)
  .hero-video-cta.is--veil-visible > .mobile-button-veil + .mobile-button-veil {
    animation-delay: 3.8s;
  }

  .section.is--hero-sequence .desktop-hero-sequence__explore-copy {
    position: relative;
    z-index: 1;
  }

  @keyframes mobile-button-veil {
    0% {
      opacity: 0;
      -webkit-mask-position: -287.857% 50%;
      mask-position: -287.857% 50%;
      animation-timing-function: cubic-bezier(.22, .61, .36, 1);
    }
    21.3333% {
      opacity: 1;
    }
    74.6667% {
      opacity: 1;
    }
    96%, 100% {
      opacity: 0;
      -webkit-mask-position: 473.571% 50%;
      mask-position: 473.571% 50%;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .section.is--hero-sequence[data-mobile-hero-locked="true"]
    .desktop-hero-sequence.is--complete
    .desktop-hero-sequence__explore:not(:disabled) .mobile-button-veil,
    .mobile-compare-vsl-host .hero-vsl-experience:not(.is--vsl-active)
    .hero-video-cta.is--veil-visible > .mobile-button-veil {
      animation: none;
    }
  }

  .section.is--hero-sequence .desktop-hero-sequence__explore:active {
    color: #fff;
    border-color: #555;
  }

  .section.is--hero-sequence .desktop-hero-sequence__explore:disabled {
    pointer-events: none;
  }

  .section.is--hero-sequence .desktop-hero-sequence__explore-copy,
  .section.is--hero-sequence .desktop-hero-sequence__explore-heading,
  .section.is--hero-sequence .desktop-hero-sequence__explore-heading strong {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-align: center;
    align-items: center;
    gap: 0;
  }

  .section.is--hero-sequence .desktop-hero-sequence__explore-icon,
  .section.is--hero-sequence .desktop-hero-sequence__explore-chevron,
  .section.is--hero-sequence .desktop-hero-sequence__explore-subtitle {
    display: none;
  }

  .section.is--hero-sequence .mobile-hero-line-break {
    display: block;
  }

  .section.is--hero-sequence.is--mobile-native-hero
  > .container.is--hero {
    /* A fast gesture may overshoot the title threshold before its scroll
       lock runs. Keep both titles and the chart independent of that scroll,
       rather than letting a sticky ancestor reach the end of its range. */
    position: fixed;
    top: 0;
    left: 0;
  }

  .section.is--hero-sequence.is--mobile-native-hero[data-mobile-section-travelling]
  > .container.is--hero,
  .section.is--hero-sequence.is--mobile-native-hero[data-mobile-section-screen]:not(.is--mobile-screen-current)
  > .container.is--hero {
    /* Navigation departs/returns at this exact scroll coordinate. Fixed top:0
       and this in-flow anchor therefore meet without moving the composition.
       The whole Hero then travels with the page, including on reverse scroll. */
    position: absolute;
    top: var(--mobile-hero-native-title-exit-distance, 16rem);
  }

  .section.is--hero-sequence.is--mobile-native-hero
  .desktop-hero-sequence__titles
  > .desktop-hero-sequence__title.is--initial {
    /* Keep the original two-line layout reference when the separate native
       title needs more lines, without shifting the final title or diagram. */
    height: 2.16em;
    visibility: hidden !important;
    opacity: 0 !important;
    will-change: auto;
  }

  .section.is--hero-sequence > .mobile-hero-native-title {
    z-index: 42;
    color: #fff;
    font-family: inherit;
    font-size: 2.3rem;
    font-weight: inherit;
    line-height: 1.08;
    letter-spacing: 0;
    text-align: left;
    text-transform: uppercase;
    opacity: 0;
    width: max-content;
    max-width: none;
    margin: 0;
    position: fixed;
    top: var(--mobile-hero-title-top, calc(
      var(--mobile-hero-layout-height) * .15
      + var(--mobile-hero-content-shift)
      + var(--mobile-hero-artwork-offset, 0px)
    ));
    left: 1.75rem;
    transform: none;
    transition: none;
    pointer-events: none;
    /* The viewport anchor stays separate from the Hero's composition.
       Its coordinates never animate; only opacity changes between beats. */
    will-change: opacity;
  }

  .mobile-hero-native-title > span {
    color: var(--yellow);
    font-size: 1em;
  }

  .section.is--hero-sequence,
  .section.is--hero-sequence .container.is--hero {
    --mobile-hero-chart-height: min(
      14rem,
      calc(var(--mobile-hero-layout-height) * .27)
    );
    width: 100%;
    /* Keep the viewport composition stable while the outer Hero section adds
       only the real flow distance used by the departing first title. Safari's
       live browser-bar height must not move the following Tracker section. */
    height: var(--mobile-hero-layout-height);
    background: var(--black);
  }

  .section.is--hero-sequence .container.is--hero {
    max-width: none;
    padding: 0;
    /* The bottom action layer may extend into the extra space revealed when
       Safari retracts its bars. Hero artwork itself remains positioned from
       the stable top reference. */
    overflow: visible;
    /* Keep the whole hero block - its own opaque background included -
       in one stacking context above the tracker panel's rising curtain
       (z-index 40, position: fixed). Without this, the tracker's curtain
       can paint over the *bottom* of the hero box wherever the hero's
       own background shows through (e.g. once its content has already
       scrolled past that point but the box itself hasn't fully cleared
       the viewport), which reads as a rectangle sliding up over the
       hero. Elevating this one ancestor covers every element inside it
       at once, so nothing inside needs its own z-index bump. */
    position: relative;
    z-index: 41;
  }

  .section.is--hero-sequence .hero-content,
  .section.is--hero-sequence .hero-mobile-direct-access,
  .section.is--hero-sequence .hero-mobile-discover,
  .section.is--intro {
    display: none !important;
  }

  .desktop-hero-sequence {
    visibility: hidden;
    opacity: 0;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    inset: 0;
  }

  .desktop-hero-sequence__titles {
    position: absolute;
    /* Both titles share this frame. Its bottom is their only resting anchor. */
    top: var(--mobile-hero-title-top, calc(
      var(--mobile-hero-layout-height) * .15
      + var(--mobile-hero-content-shift)
      + var(--mobile-hero-artwork-offset, 0px)
    ));
    height: var(--mobile-hero-title-height, calc(2.3rem * 3 * 1.08));
    left: 1.75rem;
  }

  .desktop-hero-sequence__title {
    color: #fff;
    letter-spacing: 0;
    text-align: left;
    text-transform: uppercase;
    width: max-content;
    max-width: none;
    margin: 0;
    font-size: 2.3rem;
    font-weight: inherit;
    line-height: .9;
    position: absolute;
    top: 0;
    left: 0;
    will-change: transform, opacity;
  }

  .desktop-hero-sequence__title.is--initial {
    position: relative;
    line-height: 1.08;
  }

  .desktop-hero-sequence__title-line {
    white-space: nowrap;
    display: block;
  }

  .desktop-hero-sequence__title.is--initial span,
  .desktop-hero-sequence__title.is--final span {
    color: var(--yellow);
    font-size: 1em;
  }

  .desktop-hero-sequence__title.is--final {
    position: absolute;
    inset: auto auto 0 0;
    margin: 0;
    font-size: 3.22rem;
    opacity: 0;
    white-space: nowrap;
  }

  .desktop-hero-sequence__title.is--initial span,
  .desktop-hero-sequence__title.is--final span {
    display: inline-block;
  }

  .desktop-hero-sequence__chart {
    width: calc(100% - 4rem);
    /* Was min(11.5rem, 25svh) - both bumped so the tallest visible bar
       (now 210px, doubled along with the rest of the curve - see the bar
       height rules below) fits with some margin, without poking out
       above this box, the same way 105px comfortably fit inside the old
       11.5rem (184px). The svh side needed raising too since at typical
       phone heights it - not the rem side - was the binding constraint. */
    height: var(--mobile-hero-chart-height);
    position: absolute;
    /* Anchor from the stable top reference. A bottom offset, even one based
       on a stable value, would still move whenever the outer Hero adopts a
       newly settled Safari height. */
    top: calc(
      var(--mobile-hero-layout-height) * .5
      + var(--mobile-hero-content-shift)
      + var(--mobile-hero-artwork-offset, 0px)
      - var(--mobile-hero-chart-height)
    );
    bottom: auto;
    left: 1.25rem;
    transform: none;
  }

  .desktop-hero-sequence__chart.is--title-aligned {
    transform: none;
  }

  .desktop-hero-sequence__bars {
    z-index: 1;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
  }

  /* The flat part of the chart is fully painted once, then uncovered by this
     single moving cover. Its slanted, softly feathered edge makes each short
     stroke appear to rise without animating every stroke on every frame. */
  .mobile-hero-bars-reveal-cover {
    --mobile-hero-reveal-edge-angle: 8deg;
    --mobile-hero-reveal-feather: 14px;
    z-index: 2;
    position: absolute;
    inset: 0;
    pointer-events: none;
    will-change: transform;
  }

  .mobile-hero-bars-reveal-cover__surface {
    width: calc(100% + 4rem);
    /* Four pixels of opaque overscan below the common baseline prevent
       Safari from rasterizing the first row of every hidden stroke before
       the slanted reveal edge actually reaches it. */
    height: calc(100% + 4px);
    position: absolute;
    bottom: -4px;
    left: 0;
    background: linear-gradient(
      90deg,
      rgba(13, 13, 13, 0) 0,
      rgba(13, 13, 13, .22) 4px,
      rgba(13, 13, 13, .78) 9px,
      var(--black) var(--mobile-hero-reveal-feather),
      var(--black) 100%
    );
    transform: skewX(var(--mobile-hero-reveal-edge-angle));
    transform-origin: left bottom;
  }

  .desktop-hero-sequence__bars .bar {
    opacity: 0;
    flex: none;
    width: 1px;
    /* Was 8px, then 20px (raised to match the old nth-last-child(9), the
       second bar that used to start growing) - now 20% smaller than
       that: 16px. The whole climbing sequence below is scaled down by
       the same 20% to match, so the curve's proportions and growth rate
       stay the same, just from a shorter baseline. */
    height: 16px;
    transform: scaleY(0);
    transform-origin: bottom;
  }

  .desktop-hero-sequence__bars .bar:nth-child(22),
  .desktop-hero-sequence__bars .bar:nth-child(30) {
    display: none;
  }

  /* JS selects these evenly across the short, flat part of the chart so the
     visible intervals grow by roughly 25% without changing the curve. Keeping
     the nodes in the DOM preserves every nth-last-child curve height below. */
  .desktop-hero-sequence__bars .bar.is--mobile-spacing-hidden {
    display: none;
  }

  /* Drop the three tallest bars from the mobile curve. Hiding them rather
     than removing the nodes keeps every nth-last-child height rule below
     pointing at the same bar, and space-between then spreads the
     remaining bars over the unchanged chart width - so the gaps widen
     slightly on their own and the left/right margins stay put. */
  .desktop-hero-sequence__bars .bar:nth-last-child(3),
  .desktop-hero-sequence__bars .bar:nth-last-child(2),
  .desktop-hero-sequence__bars .bar:last-child {
    display: none;
  }

  /* These 7 values (nth-last-child(10) through (4)) are exactly double
     the original pre-redesign curve (12/20/31/45/62/82/105px), matching
     the 16px baseline now being exactly double the original 8px one -
     so the whole chart's proportions (baseline-to-peak ratio at every
     step) are back to matching the original curve, just uniformly
     scaled up to the new baseline instead of the smoothed-out 7-step
     progression used in between. */
  .desktop-hero-sequence__bars .bar:nth-last-child(10) {
    height: 24px;
  }

  .desktop-hero-sequence__bars .bar:nth-last-child(9) {
    height: 40px;
  }

  .desktop-hero-sequence__bars .bar:nth-last-child(8) {
    height: 62px;
  }

  .desktop-hero-sequence__bars .bar:nth-last-child(7) {
    height: 90px;
  }

  .desktop-hero-sequence__bars .bar:nth-last-child(6) {
    height: 124px;
  }

  .desktop-hero-sequence__bars .bar:nth-last-child(5) {
    height: 164px;
  }

  .desktop-hero-sequence__bars .bar:nth-last-child(4) {
    height: 210px;
  }

  .desktop-hero-sequence__bars .bar:nth-last-child(3) {
    height: 130px;
  }

  .desktop-hero-sequence__bars .bar:nth-last-child(2) {
    height: 155px;
  }

  .desktop-hero-sequence__bars .bar:last-child {
    height: min(11.5rem, calc(var(--mobile-hero-layout-height) * .25));
  }

  .desktop-hero-sequence__final-actions {
    z-index: 9;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    width: 100%;
    height: var(--mobile-hero-layout-height);
    position: absolute;
    inset: 0;
  }

  /* The first mobile title is a one-shot beat. JS latches this class as soon
     as its exit finishes; the complete-state selector is a second guard for
     refresh/rebuild frames so reverse scroll can never flash it back in. */
  .desktop-hero-sequence.has--initial-title-exited .desktop-hero-sequence__title.is--initial,
  .desktop-hero-sequence.is--complete .desktop-hero-sequence__title.is--initial {
    visibility: hidden !important;
    opacity: 0 !important;
  }

  .desktop-hero-sequence.is--complete .desktop-hero-sequence__title.is--final,
  .desktop-hero-sequence.is--complete .desktop-hero-sequence__final-actions,
  .desktop-hero-sequence.is--complete .desktop-hero-sequence__bars .bar {
    visibility: visible !important;
    opacity: 1 !important;
  }

  .desktop-hero-sequence.is--complete .desktop-hero-sequence__final-actions {
    transform: none !important;
  }

  .desktop-hero-sequence.is--complete .desktop-hero-sequence__bars .bar {
    transform: scaleY(1) !important;
  }

  .desktop-hero-sequence.is--complete .desktop-hero-sequence__scroll {
    visibility: hidden !important;
    opacity: 0 !important;
  }

  .hero-vsl-experience {
    display: contents;
  }

  /* Video trigger ("Origines du Reboot Camp") - isolated component below
     (.hero-video-cta*), not the old .hero-vsl-trigger visual rules that
     used to live here. .hero-vsl-trigger/__content/__copy/__label/
     __subtitle stay on the element itself purely as structural/JS hooks
     now (data-vsl-trigger selection, initHeroVslInline's triggerContent
     lookup, the Chromium-paint-bug clone workaround, the required-element
     guard in initDesktopHeroSequence) - none of them are styling targets
     on mobile any more, so there is nothing left here to conflict with
     .hero-video-cta's own rules. Desktop keeps its own separate
     .hero-vsl-trigger rules (see the (min-width: 992px) block) untouched. */
  .hero-video-cta {
    z-index: 12;
    color: rgba(255, 255, 255, .92);
    appearance: none;
    display: flex;
    align-items: center;
    cursor: pointer;
    position: absolute;
    top: calc(var(--mobile-viewport-height, 100svh) * .6898 - 2.563rem);
    left: 50%;
    /* Not a fixed width any more - .hero-video-cta__content below no
       longer stretches to fill it (width:100% removed there), so a fixed
       width here left unused space trailing after the text before the
       right padding, making the right inner margin read wider than the
       left. Sized to the content instead, so both paddings read as the
       same margin. left:50%/translateX(-50%) still center it either way -
       shrinking the width doesn't require shifting it separately. */
    width: max-content;
    max-width: calc((100% - 2.5rem) * .78);
    height: 4.75rem;
    /* Right side a bit larger than left - a middle ground between the
       fully-symmetric 1.125rem/1.125rem (too tight) and the old fixed-width
       version's leftover trailing space (too wide). Both then reduced 15%
       (2rem/1.125rem -> 1.7rem/.95625rem) for a slightly smaller button,
       same ratio between the two preserved. */
    padding: 0 1.7rem 0 .95625rem;
    transform: translateX(-50%);
    /* Same opacity as the horizontal divider line below (60%), not the
       opaque var(--yellow) used elsewhere on this button (play circle). */
    border: 1px solid rgba(var(--yellow-rgb, 216, 180, 115), .6);
    border-radius: .75rem;
    background-color: #161616;
    /* Slightly toned down from .12 - a touch too lit before. */
    box-shadow: 0 0 1.5rem rgba(var(--yellow-rgb, 216, 180, 115), .09);
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .15s ease;
  }

  .hero-video-cta:hover {
    border-color: #d8b473;
    background-color: #1a1a1a;
    box-shadow: 0 0 1.75rem rgba(var(--yellow-rgb, 216, 180, 115), .16);
  }

  .hero-video-cta:active {
    transform: translateX(-50%) scale(.985);
  }

  .hero-video-cta__content {
    display: flex;
    align-items: center;
    gap: .875rem;
  }

  .hero-video-cta__play {
    flex: none;
    /* 30% smaller than the original 2.875rem (46px) circle. */
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--yellow);
    border-radius: 50%;
    color: var(--yellow);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hero-video-cta__play svg {
    /* Twice the original .6875rem (11px). No offset - the parent's
       align-items/justify-content:center (above) centers this perfectly
       on its own, unlike the old smaller icon which carried a manual
       margin-left nudge. */
    width: 1.375rem;
    height: 1.375rem;
  }

  .hero-video-cta__copy {
    display: flex;
    flex-direction: column;
    /* 40% less than the original .35rem. */
    gap: .21rem;
    min-width: 0;
    text-align: left;
  }

  .hero-video-cta__title {
    text-transform: uppercase;
    font-family: Bourgeois, Arial, sans-serif;
    font-size: .9375rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.25;
  }

  /* Same type parameters as .hero-video-cta__title above - only the case
     (no text-transform here, so it stays as written: lowercase but for
     the first letter) and the dimmer color tell them apart now, for that
     grayed-out secondary-line look. */
  .hero-video-cta__subtitle {
    color: rgba(255, 255, 255, .32);
    font-family: Bourgeois, Arial, sans-serif;
    /* Halfway between the old .65rem and the title's .9375rem. */
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.25;
  }

  .desktop-hero-sequence__explore-heading {
    align-items: center;
    width: max-content;
    display: inline-flex;
  }

  /* Used to be shared with the video trigger's own label
     (.hero-vsl-trigger__label) - decoupled now that the video button has
     its own isolated .hero-video-cta__title rule above with the same
     values, so this only has to serve
     .desktop-hero-sequence__explore-copy strong. */
  .desktop-hero-sequence__explore-copy strong {
    text-transform: uppercase;
    /* Same typographic parameters as the explanatory .text-section
       paragraphs under each section title (base `p` rule: Bourgeois,
       .9375rem / 1.25 line-height / 500 weight / no letter-spacing). */
    font-family: Bourgeois, Arial, sans-serif;
    font-size: .9375rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.25;
  }

  /* Same decoupling as the label rule above - .hero-video-cta__subtitle
     now carries the video button's own copy of this. Same type
     parameters as .desktop-hero-sequence__explore-copy strong above now
     too - only the case (no text-transform here) and the dimmer color
     tell them apart, for that grayed-out secondary-line look. */
  .desktop-hero-sequence__explore-subtitle {
    color: rgba(255, 255, 255, .58);
    font-family: Bourgeois, Arial, sans-serif;
    /* Halfway between the old .65rem and the title's .9375rem. */
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.25;
  }

  .desktop-hero-sequence__final-actions[aria-hidden="false"] .hero-vsl-trigger,
  .desktop-hero-sequence__final-actions[aria-hidden="false"] .desktop-hero-sequence__explore {
    pointer-events: auto;
  }

  .desktop-hero-sequence__separator {
    pointer-events: none;
    /* The trigger is a real bordered button now, so this internal
       underline is redundant with the button's own border - hidden
       rather than removed from the DOM/animation logic, which still
       harmlessly references it. */
    display: none;
    background: rgba(255, 255, 255, .42);
    opacity: 1;
    width: 9rem;
    height: 1px;
    position: absolute;
    top: calc(var(--mobile-viewport-height, 100svh) * .36);
    left: 1.25rem;
    transform: none;
    transform-origin: center;
  }

  /* Sits between the video trigger above and the unlock CTA below - a
     single continuous hairline (::after) spanning nearly the full width,
     dark gold except for a small bright hot spot exactly at its center. */
  .desktop-hero-sequence__unlock-divider {
    z-index: 45;
    color: rgba(var(--yellow-rgb, 216, 180, 115), .8);
    position: absolute;
    /* 6.47rem put an even ~32px on both sides of the CTA row (matching its
       own bottom:2rem margin); this drops the line .6rem lower so that gap
       closes to ~22px - 30% nearer the text - while the margin under the
       row stays untouched. The unlock hit area needs no matching change:
       it is derived from this element's live bottom edge at click time
       (see the document click listener in initDesktopHeroSequence), so it
       follows the line down on its own and still starts exactly at it. */
    bottom: 5.87rem;
    left: 3%;
    width: 94%;
    height: 2.3rem;
    pointer-events: none;
  }

  .desktop-hero-sequence__unlock-divider::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(var(--yellow-rgb, 216, 180, 115), .6) 6%,
      rgba(var(--yellow-rgb, 216, 180, 115), .6) 42%,
      #d8b473 50%,
      rgba(var(--yellow-rgb, 216, 180, 115), .6) 58%,
      rgba(var(--yellow-rgb, 216, 180, 115), .6) 94%,
      transparent 100%
    );
  }

  /* The button the user must click to unlock and continue scrolling past
     the hero - see initHeroCompletionLock. Its icon box (below) carries
     the border; the button itself stays borderless like it always was,
     just laid out as an icon-led row now instead of centered text with
     a "↓" below it. */
  /* No button chrome here at all (no border/background/radius - see
     .desktop-hero-sequence__explore-icon too) - this reads as the next
     part of the page, currently locked, rather than a second button
     matching .hero-vsl-trigger above. Insets are wider than that
     button's own (9% vs its 1.25rem) so its content sits further in
     from the edges than the divider line above, which still spans
     almost the full width. */
  .desktop-hero-sequence__explore {
    z-index: 45;
    color: rgba(255, 255, 255, .94);
    appearance: none;
    align-items: center;
    gap: 1.5rem;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: Arial, sans-serif;
    text-align: left;
    cursor: pointer;
    display: flex;
    position: absolute;
    right: auto;
    bottom: 2rem;
    justify-content: flex-start;
    width: 82%;
    left: 9%;
    transform: none;
    will-change: opacity;
  }

  .desktop-hero-sequence__explore-icon {
    flex: none;
    width: 1.7rem;
    height: 2rem;
    color: rgba(var(--yellow-rgb, 216, 180, 115), .9);
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: color, filter;
    animation: mobile-hero-lock-gold-pulse 2.4s linear infinite;
  }

  .desktop-hero-sequence__final-actions[aria-hidden="true"]
  .desktop-hero-sequence__explore-icon {
    animation-play-state: paused;
  }

  /* Same gold breathing rhythm as the active Tracker boxes. The glow is
     carried by the icon rather than by a transform so the shackle's GSAP
     unlock movement remains the sole owner of its geometry. */
  @keyframes mobile-hero-lock-gold-pulse {
    0%,
    100% {
      color: rgba(var(--yellow-rgb, 216, 180, 115), .72);
      filter:
        drop-shadow(0 0 .12rem rgba(var(--yellow-rgb, 216, 180, 115), .28))
        drop-shadow(0 0 .24rem rgba(var(--yellow-rgb, 216, 180, 115), .18));
    }

    50% {
      color: #d8b473;
      filter:
        drop-shadow(0 0 .22rem rgba(var(--yellow-rgb, 216, 180, 115), .72))
        drop-shadow(0 0 .7rem rgba(var(--yellow-rgb, 216, 180, 115), .62));
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .desktop-hero-sequence__explore-icon {
      color: rgba(var(--yellow-rgb, 216, 180, 115), .9);
      filter: drop-shadow(0 0 .22rem rgba(var(--yellow-rgb, 216, 180, 115), .34));
      animation: none;
    }
  }

  .desktop-hero-sequence__explore-icon svg {
    width: 100%;
    height: 100%;
    /* The shackle swings outside the viewBox when the padlock opens (see
       the unlock animation in initDesktopHeroSequence) - without this the
       outer <svg>'s default overflow:hidden would clip it mid-swing. */
    overflow: visible;
  }

  .desktop-hero-sequence__explore-chevron {
    flex: none;
    margin-left: auto;
    color: rgba(var(--yellow-rgb, 216, 180, 115), .9);
    display: flex;
    align-items: center;
  }

  .desktop-hero-sequence__explore-chevron svg {
    width: 1.05rem;
    height: .55rem;
  }

  .desktop-hero-sequence__explore-copy {
    gap: .3rem;
    text-transform: none;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    display: flex;
  }

  /* No longer force-broken onto two lines here - the icon-led row has
     less width to work with than the old centered layout, so this now
     wraps naturally instead. */
  .mobile-hero-line-break {
    display: none;
  }

  .desktop-hero-sequence__explore:focus-visible,
  .hero-vsl-trigger:focus-visible {
    outline: 1px solid rgba(var(--yellow-rgb, 216, 180, 115), .7);
    outline-offset: .45rem;
  }

  .desktop-hero-sequence__scroll {
    display: none !important;
  }

  .mobile-hero-scroll-cue {
    position: absolute;
    top: min(
      calc(var(--mobile-hero-layout-height) * .78),
      calc(var(--mobile-hero-layout-height) - env(safe-area-inset-bottom, 0px) - 64px)
    );
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: max-content;
    margin: 0;
    /* Retain the arrow's position after removing the label and its gap. */
    padding-top: calc(11px * 1.2 + 10px);
    color: rgba(255, 255, 255, .45);
    font-family: Bourgeois, Arial, sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-align: center;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .mobile-hero-scroll-cue svg {
    width: 12px;
    height: 24px;
    animation: mobile-hero-arrow-float 2.6s ease-in-out infinite;
    animation-play-state: paused;
  }

  .mobile-hero-scroll-cue[data-revealed] svg { animation-play-state: running; }
  body[data-mobile-section-index]:not([data-mobile-section-index="0"]) .mobile-hero-scroll-cue svg { animation-play-state: paused; }

  @keyframes mobile-hero-arrow-float {
    0%, 100% { transform: translateY(-3px); }
    50% { transform: translateY(3px); }
  }

  @media (prefers-reduced-motion: reduce) {
    .mobile-hero-scroll-cue svg { animation: none; }
  }

  .hero-vsl-inline {
    z-index: 14;
    box-sizing: border-box;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    aspect-ratio: 16 / 9;
    background: transparent;
    border: 0;
    border-radius: .18rem;
    box-shadow: none;
    width: calc(100% - 2.5rem);
    overflow: visible;
    position: absolute;
    top: 0;
    left: 1.25rem;
    transform: none;
    transform-origin: top left;
  }

  .hero-vsl-inline video,
  .hero-vsl-inline iframe {
    opacity: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #050505;
    border-radius: inherit;
    display: block;
  }

  .hero-vsl-inline__frame {
    z-index: 3;
    pointer-events: none;
    position: absolute;
    inset: 0;
  }

  .hero-vsl-inline__frame > span {
    background: rgba(255, 255, 255, .42);
    display: block;
    position: absolute;
    will-change: transform;
  }

  .hero-vsl-inline__frame-top {
    width: 100%;
    height: 1px;
    top: 0;
    left: 0;
    transform-origin: center;
  }

  .hero-vsl-inline__frame-side {
    width: 1px;
    height: 100%;
    top: 0;
    transform-origin: top;
  }

  .hero-vsl-inline__frame-side.is--left {
    left: 0;
  }

  .hero-vsl-inline__frame-side.is--right {
    right: 0;
  }

  .hero-vsl-inline__frame-bottom {
    width: 50%;
    height: 1px;
    bottom: 0;
  }

  .hero-vsl-inline__frame-bottom.is--left {
    left: 0;
    transform-origin: left;
  }

  .hero-vsl-inline__frame-bottom.is--right {
    right: 0;
    transform-origin: right;
  }

  .hero-vsl-inline__close {
    z-index: 4;
    color: rgba(255, 255, 255, .86);
    opacity: 0;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: .5rem;
    border: 0;
    border-radius: .18rem;
    background: rgba(5, 5, 5, .76);
    cursor: pointer;
    display: flex;
    position: absolute;
    top: .35rem;
    right: .35rem;
    backdrop-filter: blur(.35rem);
    -webkit-backdrop-filter: blur(.35rem);
  }

  .hero-vsl-inline__close > span:first-child {
    display: none;
  }

  .hero-vsl-inline__close-icon {
    width: .85rem;
    height: .85rem;
    position: relative;
    display: block;
  }

  .hero-vsl-inline__close-icon::before,
  .hero-vsl-inline__close-icon::after {
    content: "";
    background: currentColor;
    width: 1px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
  }

  .hero-vsl-inline__close-icon::before {
    transform: rotate(45deg);
  }

  .hero-vsl-inline__close-icon::after {
    transform: rotate(-45deg);
  }

  .hero-vsl-inline__fullscreen {
    z-index: 4;
    color: rgba(255, 255, 255, .5);
    opacity: 0;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.7rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: flex;
    position: absolute;
    top: 50%;
    right: -2.7rem;
    transform: translateY(-50%);
    transition: color .2s ease;
  }

  .hero-vsl-inline__fullscreen:hover,
  .hero-vsl-inline__fullscreen:focus-visible {
    color: rgba(var(--yellow-rgb, 216, 180, 115), .9);
  }

  .hero-vsl-inline__fullscreen:focus-visible {
    outline: 1px solid rgba(var(--yellow-rgb, 216, 180, 115), .58);
    outline-offset: .15rem;
  }

  /* ---- Left margin of every section's copy, from the tracker down ----
     ONE knob: --mobile-copy-inset is how far the text starts from the
     screen's left edge. Change that single value and every heading and
     explanatory paragraph below the hero moves together.

     Why two variables rather than one: these blocks sit inside containers
     that already pad their children by --mobile-copy-gutter, so what each
     element adds is the remainder. Keeping the gutter named (instead of
     hardcoding 1rem in the calc) means the sections that position their copy
     themselves rather than inheriting that padding - see
     .header-pres.is--compare in main.js - can line up on the same value
     instead of inventing their own, which is exactly what had drifted:
     compare used a hardcoded 1.25rem and landed 4px right of everything
     else.

     The chosen inset matches the tracker's XP bar, which is the visual
     reference: the bar sits 16px inside .tracker-wrapper, itself ~1.8px left
     of the container padding, so its visible edge lands at ~30.2px.

     The `~ *` half covers everything after the tracker - .parent-section
     (sections, groupe, personnes, compare, timeline) and the later top-level
     sections are all siblings of .section.is--tracker under <main>. Written
     as a sibling combinator rather than a fixed list so sections added later
     inherit the alignment for free.

     Padding rather than margin: the right-hand wrap boundary ends up in the
     same place either way, but padding leaves each element's own box - and
     anything positioned against it - untouched.

     padding-inline, not padding-left: the same inset applies on the right so
     text wraps at the mirror of where it starts. Without it the right-hand
     margin was whatever each block's width happened to leave over, which is
     why copy ran closer to the right edge than to the left. */
  :root {
    --mobile-copy-gutter: 1rem;
    --mobile-copy-inset: 1.89rem;
  }

  .section.is--tracker .big-title-section,
  .section.is--tracker .text-section,
  .section.is--tracker ~ * .big-title-section,
  .section.is--tracker ~ * .text-section {
    padding-inline: calc(
      var(--mobile-copy-inset, 1.89rem) - var(--mobile-copy-gutter, 1rem)
    );
  }

  /* The separator between habit rows is .tracker-row's own border-bottom, and
     .tracker-row-line is a black curtain sitting on top of it that slides away
     to reveal it (see the xPercent tween in main.js). The two therefore have
     to stay exactly the same width - insetting the curtain alone leaves the
     border showing, unmasked, past each end of it.

     So the inset goes on the row instead. Swapping its horizontal padding for
     an equal margin shrinks the border - and the curtain, which is positioned
     against the row - by the same amount, while leaving the labels and
     checkboxes exactly where they were: they sat one gutter inside the row's
     edge before via padding, and now sit at its edge, which the margin has
     moved to the same place. The row's margin box is unchanged too, so
     .tracker-wrapper (width-less, sized by its widest child) doesn't move. */
  .section.is--tracker .tracker-row {
    margin-inline: var(--mobile-copy-gutter, 1rem);
    padding-inline: 0;
  }

  .section.is--tracker .tracker-checkbox.is--button {
    position: relative;
    overflow: visible;
    touch-action: manipulation;
  }

  /* Extend the touch target without changing the square or its flow box. */
  .section.is--tracker .tracker-checkbox.is--button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    touch-action: inherit;
  }

  /* Kills the elastic overscroll at the very top and bottom of the document.
     On iOS Safari that bounce is what tells the browser "this gesture isn't
     scrolling content any more", which springs the collapsed bottom bar back
     to full size - and that height change is what throws the tracker's
     layout off (its scroll limit was measured against the other bar state).

     The tracker is where it bites, because while it's locked every section
     after it is display:none, so its bottom edge IS the end of the document
     and any further pull bounces. The hero never triggers it: its lock stops
     Lenis, which sets overflow:clip on <html>, leaving no scroller to bounce.
     This gets the same result without having to freeze scrolling.

     Support note: iOS Safari has been uneven on root-scroller
     overscroll-behavior across versions, so this needs confirming on a real
     handset - it degrades to today's behaviour if ignored. */
  html {
    overscroll-behavior-y: none;
  }

}

/* The same discreet cue closes startup on desktop. Mobile retains its
   established composition and only reveals it once the final title is full. */
@media screen and (min-width: 992px) {
  .hero-ready-scroll-cue {
    position: absolute;
    bottom: 48px;
    left: 50%;
    margin: 0;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, .45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .hero-ready-scroll-cue svg { width: 12px; height: 24px; }
}