/* Présentation — titre haut-gauche + roulette centrée (maquette) */
.presentation-section {
  position: relative;
  z-index: 10;
  width: 100%;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 3.5rem max(1.35rem, env(safe-area-inset-left, 0px)) 3.5rem
    max(1.35rem, env(safe-area-inset-right, 0px));
}

@media (min-width: 768px) {
  .presentation-section {
    min-height: calc(100vh - 5rem);
    padding: 4.5rem 2.5rem 4.5rem;
  }
}

@media (min-width: 1280px) {
  .presentation-section {
    padding: 5rem 4rem 5rem;
  }
}

/* Titre : juste au-dessus du carrousel, aligné à gauche du container */
.presentation-section__title {
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  margin: 0 0 1.25rem;
  padding: 0 1.25rem;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: clamp(1.2rem, 4vw, 1.65rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: #1a1a1a;
  text-align: left;
}

@media (min-width: 768px) {
  .presentation-section__title {
    margin-bottom: 1.5rem;
    font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  }
}

.presentation-section__title :is(h1, h2, h3, p) {
  margin: 0;
  font: inherit;
  line-height: inherit;
  color: inherit;
}

.presentation-section__title :is(h1, h2, h3) + :is(h1, h2, h3, p),
.presentation-section__title p + p {
  margin-top: 0.2em;
}

/* Couleurs Hero (mêmes classes) */
.presentation-section__title :is(
  .hero-color-primaire,
  .hero-accent-amber
) {
  color: #f0c200;
}

.presentation-section__title :is(
  .hero-color-secondaire,
  .hero-accent-blue
) {
  color: #123049;
}

.presentation-section__title :is(
  .hero-color-charbon,
  .hero-accent-charcoal
) {
  color: #363636;
}

.presentation-section__title .hero-color-ciel {
  color: #5bc6f0;
}

.presentation-section__title .hero-color-pastel {
  color: #ffe483;
}

.presentation-section__title a {
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.presentation-section__inner {
  position: relative;
  z-index: 20;
  display: flex;
  width: 100%;
  max-width: 46rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .presentation-section__inner {
    max-width: 50rem;
  }
}

@media (min-width: 1024px) {
  .presentation-section__inner {
    max-width: 54rem;
  }
}

@media (min-width: 1400px) {
  .presentation-section__inner {
    max-width: 58rem;
  }
}

.presentation-roulette {
  position: relative;
  width: 100%;
  /* Plus compact pour rapprocher les phrases */
  height: clamp(12rem, 30vh, 18rem);
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    #000 14%,
    #000 86%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    #000 14%,
    #000 86%,
    transparent 100%
  );
}

@media (min-width: 768px) {
  .presentation-roulette {
    height: clamp(14rem, 32vh, 20rem);
  }
}

@media (min-width: 1024px) {
  .presentation-roulette {
    height: clamp(16rem, 34vh, 22rem);
  }
}

@media (min-width: 1400px) {
  .presentation-roulette {
    height: clamp(18rem, 36vh, 24rem);
  }
}

.presentation-roulette .phrase-card {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0 1.25rem;
  text-align: center;
  pointer-events: none;
  transform-origin: center center;
  will-change: transform, opacity;
  letter-spacing: 0.01em;
}

.presentation-roulette .phrase-card__line {
  display: block;
}

.presentation-roulette .phrase-card__line--support {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 0.58em;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

.presentation-roulette .phrase-card__line--display {
  font-family: inherit;
  font-size: 1em;
  font-weight: inherit;
  line-height: 1.22;
  margin: 0.1em 0;
}

.presentation-section__timeline {
  margin-top: 1.1rem;
  display: flex;
  width: min(100%, 16rem);
  flex-direction: column;
  align-items: center;
}

@media (min-width: 1024px) {
  .presentation-section__timeline {
    margin-top: 1.35rem;
    width: min(100%, 18rem);
  }
}

/* Piste fine noire + pastille ciel (maquette) */
.presentation-section__timeline input[type="range"] {
  --track: #1a1a1a;
  --thumb: #5bc6f0;
  width: 100%;
  height: 0.14rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 999px;
  background: var(--track);
  outline: none;
}

.presentation-section__timeline input[type="range"]::-webkit-slider-runnable-track {
  height: 0.14rem;
  border-radius: 999px;
  background: var(--track);
}

.presentation-section__timeline input[type="range"]::-moz-range-track {
  height: 0.14rem;
  border-radius: 999px;
  background: var(--track);
  border: none;
}

.presentation-section__timeline input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 0.9rem;
  height: 0.9rem;
  margin-top: calc((0.14rem - 0.9rem) / 2);
  border: none;
  border-radius: 999px;
  background: var(--thumb);
  cursor: pointer;
  box-shadow: none;
}

.presentation-section__timeline input[type="range"]::-moz-range-thumb {
  width: 0.9rem;
  height: 0.9rem;
  border: none;
  border-radius: 999px;
  background: var(--thumb);
  cursor: pointer;
}

.presentation-section__timeline input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 2px solid #123049;
  outline-offset: 2px;
}

.presentation-section__timeline input[type="range"]:focus-visible::-moz-range-thumb {
  outline: 2px solid #123049;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .presentation-roulette .phrase-card {
    transition: none !important;
  }
}