/* Carrousel plein écran — 3 s par cadran */

.carousel-section--top {
  position: relative;
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(212, 35, 122, 0.22) 0%, transparent 70%),
    linear-gradient(
      165deg,
      var(--prune) 0%,
      #9b2d6e 12%,
      #ffc2de 38%,
      #ffb0d4 55%,
      #f5eef3 82%,
      rgba(74, 25, 66, 0.35) 100%
    );
  border-block: none;
  border-bottom: 4px solid transparent;
  border-image: linear-gradient(90deg, var(--prune), var(--fuchsia), var(--gold), var(--sage)) 1;
}

.carousel-section--top .hero-bg {
  z-index: 0;
  opacity: 0.38;
}

.carousel-section--top .hero-orb--fuchsia {
  background: radial-gradient(circle, rgba(212, 35, 122, 0.55) 0%, transparent 68%);
}

.carousel-section--top .hero-orb--sage {
  opacity: 0.35;
}

.carousel-section--top .hero-orb--gold {
  opacity: 0.4;
}

.carousel-section[data-carousel-fullpage] {
  --carousel-dots-space: 2.85rem;
  --carousel-header-offset: 5.25rem;
  --carousel-viewport-h: calc(100dvh - var(--carousel-header-offset));
  --carousel-viewport-h: calc(100svh - var(--carousel-header-offset));
}

.carousel-section[data-carousel-fullpage] .carousel-track-wrap {
  position: relative;
  z-index: 1;
  overflow: hidden;
  width: 100%;
  height: var(--carousel-viewport-h);
  min-height: 480px;
  padding-bottom: var(--carousel-dots-space);
  background: var(--prune);
  box-sizing: border-box;
  mask-image: none;
}

.carousel-section[data-carousel-fullpage] .carousel-track {
  display: flex;
  gap: 0;
  width: max-content;
  height: 100%;
  padding: 0;
  animation: none;
  will-change: transform;
}

.carousel-section[data-carousel-fullpage] .carousel-cadran {
  flex: 0 0 auto;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  border-radius: 0;
  box-shadow: none;
  border: none;
  display: flex;
  flex-direction: column;
  background: transparent;
  overflow: hidden;
  box-sizing: border-box;
}

/* Premier cadran : rose rayonnant + violet aux extrémités (titres aubergine) */
.carousel-cadran--hero {
  --hero-rose-core: #ff9ecd;
  --hero-rose-mid: #ff6bab;
  --hero-rose-hot: var(--fuchsia);
  --hero-logo-drop: clamp(2rem, 11vh, 4.75rem);
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-inline: auto;
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(
      ellipse 85% 72% at 50% 38%,
      rgba(255, 180, 215, 0.98) 0%,
      rgba(255, 107, 171, 0.72) 38%,
      rgba(212, 35, 122, 0.35) 62%,
      transparent 78%
    ),
    radial-gradient(
      ellipse 120% 90% at 50% 55%,
      var(--hero-rose-mid) 0%,
      var(--hero-rose-hot) 42%,
      rgba(155, 45, 110, 0.55) 100%
    ),
    radial-gradient(circle at 0% 0%, rgba(74, 25, 66, 0.72) 0%, transparent 52%),
    radial-gradient(circle at 100% 0%, rgba(74, 25, 66, 0.68) 0%, transparent 52%),
    radial-gradient(circle at 0% 100%, rgba(42, 21, 38, 0.78) 0%, transparent 58%),
    radial-gradient(circle at 100% 100%, rgba(42, 21, 38, 0.78) 0%, transparent 58%),
    radial-gradient(
      ellipse 45% 35% at 50% 100%,
      rgba(124, 58, 237, 0.22) 0%,
      transparent 100%
    ),
    linear-gradient(
      168deg,
      var(--prune) 0%,
      var(--fuchsia-soft) 14%,
      var(--hero-rose-core) 36%,
      var(--hero-rose-mid) 52%,
      var(--hero-rose-hot) 68%,
      var(--fuchsia-soft) 86%,
      var(--prune-dark) 100%
    );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    inset 0 0 80px rgba(255, 140, 190, 0.35);
}

.carousel-cadran--hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 55% 40% at 50% 42%,
    rgba(255, 255, 255, 0.28) 0%,
    transparent 70%
  );
  mix-blend-mode: soft-light;
}

/* Premier cadran : mosaïque entière + voile rosé léger */
.carousel-cadran--hero.carousel-cadran--mosaic {
  background: #fff5fa !important;
  box-shadow: none !important;
  overflow: hidden;
  padding: 0;
  justify-content: flex-start;
  flex-direction: column;
  gap: 0;
}

.carousel-cadran--hero.carousel-cadran--mosaic::after {
  display: none;
}

.carousel-section--top:has(.carousel-cadran--mosaic) {
  background: linear-gradient(165deg, #fff5fa 0%, #ffd8eb 100%);
}

.carousel-section--top:has(.carousel-cadran--mosaic) .hero-bg {
  opacity: 0.12;
}

.carousel-hero-mosaic {
  position: relative;
  z-index: 0;
  flex: 1 1 auto;
  width: 100%;
  min-height: min(52vh, 420px);
  max-height: calc(100% - 11.5rem);
  overflow: hidden;
  background: linear-gradient(168deg, #fff0f8 0%, #ffcce3 55%, #f5b8d4 100%);
}

.carousel-hero-mosaic__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center center;
  display: block;
}

.carousel-hero-mosaic__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 220, 238, 0.12) 0%,
    rgba(255, 200, 225, 0.08) 45%,
    rgba(255, 245, 250, 0.35) 100%
  );
}

/* Titre h1 conservé pour l'accessibilité, invisible à l'écran */
.mosaic-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.carousel-cadran--hero.carousel-cadran--mosaic[data-mosaic-bg] {
  background-image: none;
}

.carousel-cadran--hero.carousel-cadran--mosaic .home-hub {
  position: relative;
  z-index: 2;
  width: 100%;
}

.carousel-cadran--hero.carousel-cadran--mosaic .home-hub--on-mosaic {
  --hero-logo-drop: 0;
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding:
    clamp(0.75rem, 2.2vh, 1.05rem)
    clamp(1rem, 4vw, 1.5rem)
    calc(var(--carousel-dots-space) + 0.35rem);
  box-sizing: border-box;
  background: linear-gradient(180deg, #fff 0%, #fff8fc 100%);
  border-top: 1px solid rgba(212, 35, 122, 0.12);
  box-shadow: 0 -10px 28px rgba(74, 25, 66, 0.06);
}

.carousel-cadran--hero.carousel-cadran--mosaic .hero-headline--mosaic {
  margin-bottom: 0.4rem;
  gap: 0.05rem;
}

.carousel-cadran--hero.carousel-cadran--mosaic .hero-headline--mosaic .hero-headline__line {
  font-size: clamp(1.15rem, 3.2vw, 1.75rem);
  line-height: 1.2;
  color: var(--prune-dark);
}

.carousel-cadran--hero.carousel-cadran--mosaic .hero-headline--mosaic .hero-headline__line--accent {
  font-size: clamp(1.05rem, 2.9vw, 1.55rem);
}

.hero-mosaic-hook {
  margin: 0 auto 0.65rem;
  max-width: 34rem;
  font-size: clamp(0.84rem, 1.85vw, 0.98rem);
  line-height: 1.45;
  color: rgba(42, 21, 38, 0.82);
  font-weight: 500;
}

.carousel-cadran--hero.carousel-cadran--mosaic .hero-cta-row,
.carousel-cadran--hero.carousel-cadran--mosaic .hero-cta-row--mosaic {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
}

.carousel-cadran--hero.carousel-cadran--mosaic .hero-cta-row .btn {
  flex: 1 1 12.5rem;
  max-width: 17rem;
  text-align: center;
  white-space: normal;
}

.carousel-cadran--hero.carousel-cadran--mosaic .hero-cta-row .btn-secondary {
  background: #fff;
  border-color: rgba(74, 25, 66, 0.22);
}

.carousel-cadran--hero .home-hub {
  position: relative;
  z-index: 1;
  padding:
    calc(var(--hero-logo-drop) + 0.35rem)
    clamp(1rem, 4vw, 1.75rem)
    calc(var(--carousel-dots-space) + 0.35rem);
  max-width: min(720px, 100%);
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  min-height: min(100%, auto);
  text-align: center;
  box-sizing: border-box;
  margin-inline: auto;
}

.carousel-cadran--hero .hero-logo-frame {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(200px, 46vw);
  height: min(200px, 46vw);
  margin: 0 auto 0.65rem;
  padding: 0.85rem;
  border-radius: 50%;
  text-decoration: none;
  color: inherit;
  background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.55) 100%);
  border: 3px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    0 10px 32px rgba(74, 25, 66, 0.14),
    inset 0 0 0 1px rgba(212, 35, 122, 0.12);
  box-sizing: border-box;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.carousel-cadran--hero .hero-logo-frame:hover {
  transform: translateY(2px) scale(1.02);
  box-shadow:
    0 14px 36px rgba(74, 25, 66, 0.18),
    inset 0 0 0 1px rgba(212, 35, 122, 0.18);
}

.carousel-cadran--hero .hero-logo-frame:focus-visible {
  outline: 3px solid var(--prune);
  outline-offset: 4px;
}

.carousel-cadran--hero .hero-logo-frame .logo-animated-lg {
  width: min(132px, 28vw);
  height: min(132px, 28vw);
  margin: 0;
}

.carousel-cadran--hero .hero-logo-frame .logo-animated {
  width: 100%;
  height: 100%;
}

.carousel-cadran--hero .hero-logo-frame .orbit {
  inset: 6px;
  border-color: rgba(212, 35, 122, 0.55);
}

.carousel-cadran--hero .hero-logo-frame .orbit-2 {
  inset: 2px;
  border-color: rgba(201, 169, 98, 0.5);
}

.carousel-cadran--hero .slogan:not(.hero-slogan) {
  font-size: clamp(0.88rem, 2.2vw, 1.05rem) !important;
  line-height: 1.4;
  margin: 0 0 0.35rem;
}

.carousel-cadran--hero .hero-slogan {
  margin: 0.7rem auto 0;
  padding: 0 0.5rem;
  max-width: min(580px, 100%);
  font-size: clamp(1rem, 2.6vw, 1.22rem) !important;
  line-height: 1.45;
  font-weight: 600;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.carousel-cadran--hero .home-hub--immersive {
  max-width: min(720px, 100%);
  width: 100%;
  margin-inline: auto;
}

.carousel-cadran--hero .hero-headline {
  margin: 0 0 0.65rem;
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.carousel-cadran--hero .hero-headline__line {
  display: block;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 3.8vw, 2.15rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--prune-dark);
  letter-spacing: 0.01em;
}

.carousel-cadran--hero .hero-headline__line--accent {
  font-family: "Pacifico", cursive;
  font-weight: 400;
  font-size: clamp(1.25rem, 3.4vw, 1.95rem);
  color: var(--prune-dark);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.carousel-cadran--hero .hero-lead {
  margin: 0;
  max-width: 620px;
  font-size: clamp(0.88rem, 2vw, 1.02rem);
  line-height: 1.58;
  color: var(--prune-dark);
  padding: 0.65rem 0.85rem;
  background: rgba(255, 255, 255, 0.42);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 8px 28px rgba(74, 25, 66, 0.08);
}

.carousel-cadran--hero .hero-cta-row {
  margin-top: 0.85rem;
  margin-bottom: 0.35rem;
  gap: 0.55rem;
  flex-wrap: wrap;
  justify-content: center;
}

.carousel-cadran--hero .hero-cta-row .btn {
  font-size: clamp(0.82rem, 1.8vw, 0.92rem);
  padding: 0.58rem 1.05rem;
  min-width: min(100%, 12.5rem);
}

.carousel-cadran--hero .hero-cta-row .btn-secondary {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(74, 25, 66, 0.2);
  color: var(--prune-dark);
}

/* Textes du premier cadran : blanc / rose clair sur le fond rose-violet, encart blanc pour le paragraphe */
.carousel-cadran--hero .hero-headline__line {
  color: #fff;
  text-shadow: 0 2px 10px rgba(74, 25, 66, 0.55), 0 1px 2px rgba(42, 21, 38, 0.5);
}

.carousel-cadran--hero .hero-headline__line--accent {
  color: #ffe0f0;
  text-shadow: 0 2px 10px rgba(74, 25, 66, 0.55), 0 1px 2px rgba(42, 21, 38, 0.5);
}

.carousel-cadran--hero .hero-lead {
  color: #4a1942;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.95);
  font-weight: 500;
}

.carousel-cadran--hero .hero-slogan {
  color: #fff;
  text-shadow: 0 2px 8px rgba(74, 25, 66, 0.6);
}

.carousel-cadran:not(.carousel-cadran--hero) {
  background: linear-gradient(180deg, #fff 0%, #faf6f9 100%);
}

.carousel-cadran:not(.carousel-cadran--hero):not(.is-cta) .carousel-cadran__media {
  position: relative;
  flex: 1 1 0;
  min-height: min(52vh, 420px);
  max-height: none;
  aspect-ratio: unset;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ebe6ea;
}

.carousel-cadran__media img {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  background: transparent;
  filter: none;
  transform: none;
  display: block;
}

.carousel-cadran__media::after {
  display: none;
}

/* Bandeau légende : violet (prune) du logo */
.carousel-cadran:not(.carousel-cadran--hero):not(.is-cta) {
  background: var(--prune);
}

.carousel-cadran:not(.carousel-cadran--hero):not(.is-cta) .carousel-cadran__body {
  flex: 0 0 auto;
  max-height: none;
  max-width: none;
  padding: 0.6rem 1rem 0.5rem;
  background: var(--prune);
}

.carousel-cadran:not(.carousel-cadran--hero):not(.is-cta) .carousel-cadran__body h3 {
  color: #ffd1e8;
}

.carousel-cadran:not(.carousel-cadran--hero):not(.is-cta) .carousel-cadran__body p {
  color: #fff;
  max-width: 42rem;
}

.carousel-cadran__body {
  flex: 0 0 auto;
  padding: 0.85rem 1.25rem 0.35rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 42rem;
  margin: 0 auto;
  width: 100%;
}

.carousel-cadran:not(.carousel-cadran--hero):not(.is-cta) .carousel-cadran__body h3 {
  font-size: clamp(1.05rem, 2.6vw, 1.45rem);
  margin: 0 0 0.25rem;
}

.carousel-cadran:not(.carousel-cadran--hero):not(.is-cta) .carousel-cadran__body p {
  font-size: clamp(0.78rem, 1.85vw, 0.92rem);
  line-height: 1.45;
}

.carousel-cadran__body h3 {
  margin: 0 0 0.45rem;
  font-size: clamp(1.25rem, 3.2vw, 1.85rem);
  color: var(--fuchsia-soft);
  font-family: "Pacifico", cursive;
  font-weight: 400;
}

@media (max-height: 720px) {
  .carousel-hero-mosaic {
    min-height: min(46vh, 340px);
    max-height: calc(100% - 10rem);
  }

  .carousel-cadran--hero.carousel-cadran--mosaic .home-hub--on-mosaic {
    padding-top: 0.55rem;
    padding-bottom: calc(var(--carousel-dots-space) + 0.2rem);
  }

  .carousel-cadran--hero {
    --hero-logo-drop: clamp(1.35rem, 8vh, 2.75rem);
  }

  .carousel-cadran--hero .home-hub {
    transform: none;
  }

  .carousel-cadran--hero .hero-logo-frame {
    width: min(176px, 40vw);
    height: min(176px, 40vw);
    padding: 0.65rem;
  }

  .carousel-cadran--hero .hero-logo-frame .logo-animated-lg {
    width: min(118px, 25vw);
    height: min(118px, 25vw);
  }
}

.carousel-cadran__body p {
  margin: 0;
  font-size: clamp(0.88rem, 2vw, 1.02rem);
  color: var(--text-muted);
  line-height: 1.55;
}

.carousel-cadran.is-cta {
  --pill-stagger: 2s;
  --pill-flight: 2s;
  justify-content: center;
  align-items: center;
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(
      ellipse 92% 78% at 50% 40%,
      rgba(255, 190, 220, 0.98) 0%,
      rgba(255, 120, 180, 0.65) 40%,
      transparent 74%
    ),
    radial-gradient(circle at 0% 0%, rgba(74, 25, 66, 0.62) 0%, transparent 50%),
    radial-gradient(circle at 100% 0%, rgba(74, 25, 66, 0.58) 0%, transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(42, 21, 38, 0.52) 0%, transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(42, 21, 38, 0.52) 0%, transparent 55%),
    linear-gradient(
      168deg,
      #ffe0f0 0%,
      #ffb8d9 22%,
      #ff7eb8 48%,
      #e8438f 70%,
      #9b2d6e 88%,
      var(--prune) 100%
    );
  box-shadow:
    inset 0 0 100px rgba(255, 160, 200, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.carousel-cadran.is-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 50% 38% at 50% 40%,
    rgba(255, 255, 255, 0.32) 0%,
    transparent 68%
  );
  mix-blend-mode: soft-light;
}

.carousel-cadran.is-cta .carousel-cadran__body--final {
  position: relative;
  z-index: 1;
}

.carousel-cadran.is-cta .carousel-cadran__body {
  flex: 1;
  justify-content: center;
  min-height: 0;
  padding: 1.5rem 1.25rem 0.35rem;
}

.carousel-cadran.is-cta .carousel-cadran__body h3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.85rem, 5vw, 2.65rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0.01em;
  color: #fff;
  text-shadow: 0 2px 10px rgba(42, 21, 38, 0.5);
  max-width: min(36rem, 100%);
  margin: 0 auto 0.55rem;
}

.carousel-cadran.is-cta .carousel-cadran__body p {
  color: #fff;
  font-weight: 500;
  max-width: 34rem;
  background: rgba(74, 25, 66, 0.82);
  padding: 0.7rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 8px 24px rgba(42, 21, 38, 0.25);
}

.carousel-cadran__body--final {
  max-width: 40rem;
}

/* Bloc d'accueil repris dans le dernier cadran : logo, accroche, texte de présentation */
.cta-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin: 0 auto 0.6rem;
}

.cta-intro__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(64px, 11vh, 92px);
  height: clamp(64px, 11vh, 92px);
  padding: 0.35rem;
  border-radius: 50%;
  background: #fff;
  border: 3px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 20px rgba(42, 21, 38, 0.3);
  box-sizing: border-box;
}

.cta-intro__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
  display: block;
}

.carousel-cadran.is-cta .carousel-cadran__body p.cta-intro__title {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.05rem, 2.8vw, 1.5rem);
  line-height: 1.2;
  text-shadow: 0 2px 8px rgba(42, 21, 38, 0.55);
}

.cta-intro__title strong {
  font-family: "Pacifico", cursive;
  font-weight: 400;
  color: #ffe0f0;
}

.carousel-cadran.is-cta .carousel-cadran__body p.cta-intro__lead {
  margin: 0;
  font-size: clamp(0.76rem, 1.7vw, 0.9rem);
  line-height: 1.4;
}

.carousel-universe-pills {
  display: grid;
  grid-template-columns: repeat(4, 7.35rem);
  justify-content: center;
  gap: 0.45rem 0.5rem;
  margin: 0.85rem auto 0;
  padding: 0;
  list-style: none;
  max-width: min(32rem, 100%);
  min-height: 4.85rem;
}

.carousel-universe-pills li {
  box-sizing: border-box;
  width: 7.35rem;
  height: 2.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  line-height: 1.15;
  padding: 0.2rem 0.35rem;
  border-radius: 999px;
  color: var(--prune);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(124, 58, 237, 0.22);
  box-shadow: 0 4px 14px rgba(74, 25, 66, 0.12);
  opacity: 0;
  transform: translate3d(var(--pill-from-x, 0), -180px, 0) scale(0.45) rotate(var(--pill-from-r, -12deg));
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

.carousel-universe-pills li:nth-child(3n + 1) {
  border-color: rgba(255, 107, 74, 0.45);
  --pill-from-x: -55px;
  --pill-from-r: -14deg;
}

.carousel-universe-pills li:nth-child(3n + 2) {
  border-color: rgba(212, 35, 122, 0.4);
  --pill-from-x: 20px;
  --pill-from-r: 10deg;
}

.carousel-universe-pills li:nth-child(3n) {
  border-color: rgba(34, 211, 238, 0.42);
  --pill-from-x: 48px;
  --pill-from-r: -8deg;
}

.carousel-universe-pills li:nth-child(2) {
  --pill-from-x: -30px;
}

.carousel-universe-pills li:nth-child(4) {
  --pill-from-x: 62px;
}

.carousel-universe-pills li:nth-child(5) {
  --pill-from-x: -42px;
}

.carousel-universe-pills li:nth-child(6) {
  --pill-from-x: 8px;
}

.carousel-universe-pills li:nth-child(7) {
  --pill-from-x: -36px;
  --pill-from-r: 12deg;
}

.carousel-universe-pills li:nth-child(8) {
  --pill-from-x: 44px;
  --pill-from-r: -10deg;
}

.carousel-cadran.is-cta.is-slide-active .carousel-universe-pills li {
  animation: carousel-pill-orbit-land var(--pill-flight) cubic-bezier(0.22, 0.85, 0.32, 1) both;
}

.carousel-cadran.is-cta.is-slide-active .carousel-universe-pills li:nth-child(1) {
  animation-delay: calc(var(--pill-stagger) * 0);
}

.carousel-cadran.is-cta.is-slide-active .carousel-universe-pills li:nth-child(2) {
  animation-delay: calc(var(--pill-stagger) * 1);
}

.carousel-cadran.is-cta.is-slide-active .carousel-universe-pills li:nth-child(3) {
  animation-delay: calc(var(--pill-stagger) * 2);
}

.carousel-cadran.is-cta.is-slide-active .carousel-universe-pills li:nth-child(4) {
  animation-delay: calc(var(--pill-stagger) * 3);
}

.carousel-cadran.is-cta.is-slide-active .carousel-universe-pills li:nth-child(5) {
  animation-delay: calc(var(--pill-stagger) * 4);
}

.carousel-cadran.is-cta.is-slide-active .carousel-universe-pills li:nth-child(6) {
  animation-delay: calc(var(--pill-stagger) * 5);
}

.carousel-cadran.is-cta.is-slide-active .carousel-universe-pills li:nth-child(7) {
  animation-delay: calc(var(--pill-stagger) * 6);
}

.carousel-cadran.is-cta.is-slide-active .carousel-universe-pills li:nth-child(8) {
  animation-delay: calc(var(--pill-stagger) * 7);
}

@keyframes carousel-pill-orbit-land {
  0% {
    opacity: 0;
    transform: translate3d(var(--pill-from-x, 0), -185px, 0) scale(0.48)
      rotate(var(--pill-from-r, -8deg));
  }

  12% {
    opacity: 0.85;
    transform: translate3d(calc(var(--pill-from-x, 0) * 0.82), -158px, 0) scale(0.56)
      rotate(calc(var(--pill-from-r, -8deg) * 0.72));
  }

  28% {
    opacity: 1;
    transform: translate3d(calc(var(--pill-from-x, 0) * 0.62), -128px, 0) scale(0.64)
      rotate(calc(var(--pill-from-r, -8deg) * 0.48));
  }

  44% {
    transform: translate3d(calc(var(--pill-from-x, 0) * 0.44), -98px, 0) scale(0.74)
      rotate(calc(var(--pill-from-r, -8deg) * 0.28));
  }

  58% {
    transform: translate3d(calc(var(--pill-from-x, 0) * 0.3), -72px, 0) scale(0.82)
      rotate(calc(var(--pill-from-r, -8deg) * 0.12));
  }

  72% {
    transform: translate3d(calc(var(--pill-from-x, 0) * 0.16), -48px, 0) scale(0.9) rotate(2deg);
  }

  84% {
    transform: translate3d(calc(var(--pill-from-x, 0) * 0.05), -22px, 0) scale(0.96) rotate(0.5deg);
  }

  92% {
    transform: translate3d(0, 3px, 0) scale(1.015) rotate(0deg);
  }

  96% {
    transform: translate3d(0, -1px, 0) scale(0.995) rotate(0deg);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
}

.carousel-cadran.is-cta.is-slide-active .carousel-cadran__cta-row--all {
  animation: carousel-cta-rise 0.85s cubic-bezier(0.22, 0.85, 0.32, 1) calc(var(--pill-stagger) * 8 + 0.35s) both;
}

@keyframes carousel-cta-rise {
  0% {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(0.985);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.carousel-cadran.is-cta:not(.is-slide-active) .carousel-cadran__cta-row--all {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-universe-pills li {
    opacity: 1;
    transform: none;
    animation: none !important;
  }

  .carousel-cadran.is-cta .carousel-cadran__cta-row {
    opacity: 1;
    animation: none !important;
  }
}

.carousel-cadran__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: center;
  margin-top: 1rem;
}

.carousel-cadran__cta-row--all {
  margin-top: 0.85rem;
  gap: 0.45rem;
  max-width: min(32rem, 100%);
  margin-inline: auto;
}

.btn-carousel-mini {
  flex: 0 1 calc(50% - 0.25rem);
  min-width: 9.25rem;
  max-width: 10.5rem;
  min-height: 2.15rem;
  padding: 0.42rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  box-sizing: border-box;
}

.carousel-cadran__cta-row--all .btn-secondary.btn-carousel-mini {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(124, 58, 237, 0.28);
  color: var(--prune);
}

.carousel-cadran__cta-row--all .btn-secondary.btn-carousel-mini:hover {
  border-color: var(--fuchsia);
  color: var(--fuchsia);
}

@media (max-width: 420px) {
  .carousel-universe-pills {
    grid-template-columns: repeat(2, 7.35rem);
  }

  .btn-carousel-mini {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

.carousel-dots {
  position: absolute;
  bottom: 0.55rem;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.45rem 0.9rem;
  background: rgba(255, 255, 255, 0.88);
  border-radius: 999px;
  box-shadow: 0 4px 18px rgba(74, 25, 66, 0.12);
}

.carousel-dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: rgba(74, 25, 66, 0.28);
  transition: transform 0.2s ease, background 0.2s ease;
}

.carousel-dots button.is-active {
  background: var(--fuchsia);
  transform: scale(1.2);
}

.carousel-timer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 4;
  background: rgba(74, 25, 66, 0.12);
  pointer-events: none;
}

.carousel-timer span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--fuchsia), var(--gold));
  animation: carousel-timer-fill 3s linear forwards;
}

.carousel-section[data-carousel-fullpage][data-interval="3000"] .carousel-timer span {
  animation-duration: 3s;
}

@keyframes carousel-timer-fill {
  from { width: 0; }
  to { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .carousel-section[data-carousel-fullpage] .carousel-track-wrap {
    height: auto;
    min-height: 0;
    padding-bottom: 0;
  }
  .carousel-section[data-carousel-fullpage] .carousel-track {
    flex-direction: column;
    transform: none !important;
    width: 100% !important;
  }
  .carousel-section[data-carousel-fullpage] .carousel-cadran {
    min-height: auto;
    margin-bottom: 1rem;
    border-radius: 16px;
    box-shadow: var(--shadow);
    border: 1px solid rgba(212, 35, 122, 0.12);
  }
  .carousel-dots,
  .carousel-progress {
    display: none;
  }
}