.container_cube {
  position: fixed;
  width: 100%;
  transform: rotate(-35deg);
  z-index: 0;
}

.container_cube .box {
  position: relative;
  left: -100px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: clac(100% +400px);
  -webkit-box-reflect: below 1px linear-gradient(transparent, #000);
  animation: animatesurface 1.5s ease-in-out infinite;
}

@keyframes animatesurface {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-200px);
  }
}

.container_cube .box .cube {
  position: relative;
  width: 200px;
  height: 200px;
  background: #03e9f4;
  box-shadow: 0 0 5px rgba(3, 233, 244, 0.5), 0 0 15px rgba(3, 233, 244, 0.4),
    0 0 30px rgba(3, 233, 244, 0.3), 0 0 50px rgba(3, 233, 244, 0.2);
  transform-origin: bottom right;
  animation: animate 1.5s ease-in-out infinite;
}

@keyframes animate {
  0% {
    transform: rotate(0deg);
  }

  60%,
  70%,
  80%,
  100% {
    transform: rotate(90deg);
  }

  65% {
    transform: rotate(85deg);
  }

  75% {
    transform: rotate(87.5deg);
  }
}

.header {
  position: relative;
  /* ou absolute/fixed selon le contexte */
  left: 0;
  transform: translateX(0);
  /* point de départ */
  transition: transform 0.1s ease-out;
  will-change: transform;
  /* optimisation des performances */
}

.end_container {
  margin-top: 12%;
  width: 100%;
  backdrop-filter: blur(10px);
  /* Applique le flou */
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  background-color: #0000001e;
}

.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  /* Ratio 16:9 = 9/16 = 0.5625 */
  height: 0;
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 5%;
  left: 2%;
  width: 96%;
  height: 90%;
  border-radius: 30px;
}

.card-grid {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 50px;
  padding: 50px;
  margin-top: 20px;
  width: 100%;
  flex-wrap: wrap;
  /* Permet aux cartes de passer à la ligne */
}

.animated-card {
  width: 300px;
  height: 700px;
  max-width: 90vw;
  background: rgba(18, 4, 98, 0.185);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: 25px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  flex-direction: column;
  justify-content: flex-end;
  padding: 30px;
  box-sizing: border-box;
  opacity: 0;
  transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1), opacity 1s ease-out;
  color: white;
}

/* Responsive typography */
.animated-card h2 {
  font-size: clamp(1.5em, 2.5vw, 2.5em);
  margin-bottom: 10px;
  font-weight: 600;
}

.animated-card p {
  font-size: clamp(1em, 2vw, 1.2em);
}

/* Media query pour petits écrans */
@media (max-width: 600px) {
  .card-grid {
    gap: 20px;
    padding: 20px;
    margin-top: 10%;
  }

  .animated-card {
    height: auto;
    padding: 20px;
  }
}

/* Initial positions for center cards (2 and 3) */
.animated-card:nth-child(2) {
  transform: translateX(-150px);
}

.animated-card:nth-child(3) {
  transform: translateX(150px);
}

/* Initial positions for outer cards (1 and 4) */
.animated-card:nth-child(1) {
  transform: translateX(-250px);
}

.animated-card:nth-child(4) {
  transform: translateX(250px);
}

/* Final state for cards */
.animated-card.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}