/* CONTAINER PRINCIPAL */
.features {
  position: relative;
  width: 100%;
  max-width: 1100px;
  height: 650px;
  margin: 80px auto;
}

/* IMAGE CENTRALE */
.center-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
}

.center-image img {
  width: 300px;
  height: 260px;
  object-fit: cover;
}

/* CARD */
.feature-card {
  position: absolute;
  width: 340px;
  background: #fff;
  padding: 18px 20px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease;
}

/* Petit effet UX */
.feature-card:hover {
  transform: translateY(-5px);
}

/* ICON */
.icon {
  color: #ff6a00;
  font-size: 18px;
}

/* TEXT */
.feature-card h3 {
  margin: 10px 0 6px;
  font-size: 15px;
  font-weight: 600;
}

.feature-card p {
  font-size: 13px;
  color: #777;
  line-height: 1.4;
}

/* NUMERO */
.number {
  position: absolute;
  bottom: 10px;
  right: 15px;
  font-size: 28px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.06);
}

/* ===== POSITIONNEMENT (EFFET ÉPARPILLÉ) ===== */

/* 01 - haut gauche */
.feature-card:nth-of-type(1) {
  top: 40px;
  left: 60px;
}

/* 04 - haut droite */
.feature-card:nth-of-type(2) {
  top: 60px;
  right: 60px;
}

/* 02 - milieu gauche */
.feature-card:nth-of-type(3) {
  top: 260px;
  left: 0;
}

/* 05 - milieu droite */
.feature-card:nth-of-type(4) {
  top: 260px;
  right: 0;
}

/* 03 - bas gauche */
.feature-card:nth-of-type(5) {
  bottom: 40px;
  left: 120px;
}

/* 06 - bas droite */
.feature-card:nth-of-type(6) {
  bottom: 40px;
  right: 120px;
}

@media (max-width: 1024px) {
  .features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    height: auto;

    /* IMPORTANT */
    position: static;
    padding: 2rem 10vw;
  }

  .feature-card {
    position: relative !important; /* casse le absolute */
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100%;
    min-height: unset;
  }

  .center-image {
    display: none;
  }
}

@media (max-width: 700px) {
  .features {
    grid-template-columns: repeat(2, 1fr);
  }

  .feature-card {
    width: 100%;
  }
}

@media (max-width: 500px) {
  .features {
    grid-template-columns: repeat(1, 1fr);
  }

  .feature-card {
    width: 100%;
  }
}