/* Univers : contenu et responsive. */

.univers-page {
  width: 100%;
}

.univers-container {
  width: min(100% - 36px, 1200px);
  margin: 0 auto;
  padding-top: clamp(35px, 5vw, 75px);
}

.univers-container > h1 {
  text-align: center;
  margin-bottom: clamp(42px, 7vw, 90px);
}

.univers-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin-bottom: clamp(56px, 9vw, 130px);
}

.univers-text {
  min-width: 0;
}

.univers-text h2 {
  margin: 0 0 24px;
}

.univers-text p {
  font-size: 26px;
  line-height: 1.05;
}

.univers-text p:last-child {
  margin-bottom: 0;
}

.univers-visual {
  position: relative;
  min-width: 0;
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
}

.univers-visual .univers-layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center;
}

.univers-layer-back {
  animation: univers-float-back 5.7s ease-in-out infinite;
}

.univers-layer-front {
  animation: univers-float-front 6.4s ease-in-out infinite;
}

.univers-section:nth-of-type(2) .univers-layer-back {
  animation-delay: -1.4s;
}

.univers-section:nth-of-type(2) .univers-layer-front {
  animation-delay: -3.1s;
}

.univers-section:nth-of-type(3) .univers-layer-back {
  animation-delay: -2.7s;
}

.univers-section:nth-of-type(3) .univers-layer-front {
  animation-delay: -0.8s;
}

.univers-section:nth-of-type(4) .univers-layer-back {
  animation-delay: -3.8s;
}

.univers-section:nth-of-type(4) .univers-layer-front {
  animation-delay: -2.2s;
}

@keyframes univers-float-back {
  0%, 100% { transform: translateY(1px) rotate(-0.35deg); } 50% { transform: translateY(-4px) rotate(0.35deg); }
}

@keyframes univers-float-front {
  0%, 100% { transform: translate(0, -1px) rotate(0.35deg); } 50% { transform: translate(1px, -7px) rotate(-0.5deg); }
}

@media (min-width: 800px) {
  .univers-container {
    width: min(100% - 80px, 1050px);
  }

  .univers-section {
    grid-template-columns: minmax(0, 1fr) 440px;
    gap: 48px;
  }

  .univers-section:nth-of-type(even) {
    grid-template-columns: 440px minmax(0, 1fr);
  }

  .univers-section:nth-of-type(even) .univers-visual {
    grid-column: 1;
    grid-row: 1;
  }

  .univers-section:nth-of-type(even) .univers-text {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .univers-visual .univers-layer {
    animation: none;
  }
}

@media (min-width:800px) {
  .univers-section {
    margin-bottom: clamp(16px,2.5vw,36px);
  }
}

.univers-cta {
  display: flex;
  justify-content: center;
  margin: 20px auto 80px;
  text-align: center;
}

.univers-cta .button {
  gap: 12px;
}

.univers-cta .button .univers-button-arrow {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  flex: none;
}

@media (max-width: 430px) {
  .univers-text p {
    font-size: 22px;
  }
}