/* ─── LAYOUT PAGE PRODUIT ───────────────────── */
.product-detail-page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 24px;
  align-items: start;
  position: relative;
}


    /* ─── GALERIE VERTICALE ─────────────────────── */
    .product-detail-gallery {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .gallery-image-wrap {
      width: 100%;
      border-radius: 14px;
      overflow: hidden;
      background: #f8fafc;
      border: 1px solid rgba(0,0,0,0.07);
      transition: all 0.3s;
    }
    .gallery-image-wrap:hover {
      box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    }
    .gallery-image-wrap img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: contain;
      aspect-ratio: 4/3;
    }
    .gallery-desc {
      padding: 10px 14px;
      font-size: 0.87rem;
      color: #475569;
      line-height: 1.45;
      background: white;
      border-top: 1px solid #e2e8f0;
    }

    /* ─── INFOS PRODUIT ─────────────────────────── */
/* Colonne de droite avec sticky intelligent */
.product-detail-info {
  position: relative;
  align-self: start;
}

/* Classe ajoutée dynamiquement quand le bas est atteint */
.product-detail-info.sticky-bottom {
  position: sticky;
  bottom: 0;
  align-self: flex-end;
}

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #f1f5f9;
      color: #475569;
      padding: 5px 12px;
      border-radius: 999px;
      font-size: 0.73rem;
      font-weight: 600;
      margin-bottom: 12px;
    }
    .hero-badge-dot {
      width: 7px;
      height: 7px;
      background: #22c55e;
      border-radius: 50%;
      animation: pulse 2s infinite;
    }
    .hero-title {
      font-family: 'Syne', sans-serif;
      font-size: 2.1rem;
      font-weight: 700;
      color: #0d1f1a;
      line-height: 1.15;
      margin: 0 0 16px 0;
    }
    .hero-sub {
      font-size: 0.97rem;
      color: #64748b;
      line-height: 1.6;
    }

    .info-divider {
      height: 1px;
      background: #e2e8f0;
      margin: 24px 0;
    }

    /* Configuration */
    .config-block {
      margin-bottom: 20px;
    }
    .config-block label {
      display: block;
      margin-bottom: 8px;
      font-size: 0.78rem;
      font-weight: 700;
      color: #374151;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .modal-select {
      width: 100%;
      padding: 12px 36px 12px 14px;
      border-radius: 10px;
      border: 1px solid #e2e8f0;
      background: #fff;
      font-size: 0.95rem;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center;
    }
    .modal-select:focus {
      outline: none;
      border-color: #28a745;
      box-shadow: 0 0 0 3px rgba(40,167,69,0.15);
    }

    /* Prix */
/* ─── BOX PRIX PREMIUM ───────────────────── */

.price-box {
  margin: 26px 0;
  padding: 22px;
  border-radius: 18px;

  background:
    linear-gradient(135deg, #0d1f1a 0%, #162d23 100%);

  color: white;

  border: 1px solid rgba(40,167,69,0.18);

  box-shadow:
    0 10px 30px rgba(0,0,0,0.08);

  overflow: hidden;
}

.price-header {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  color: rgba(255,255,255,0.6);

  margin-bottom: 18px;
}

.price-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.price-card {
  background: rgba(255,255,255,0.05);

  border: 1px solid rgba(255,255,255,0.08);

  border-radius: 14px;

  padding: 18px;

  backdrop-filter: blur(6px);
}

.price-card.ht {
  opacity: 0.92;
}

.price-card.ttc {
  border-color: rgba(40,167,69,0.35);

  background:
    linear-gradient(
      135deg,
      rgba(40,167,69,0.12),
      rgba(255,255,255,0.05)
    );
}

.price-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(255,255,255,0.6);

  margin-bottom: 10px;
}

.price-amount {
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1;

  color: #28a745;

  margin-bottom: 8px;
}

.price-card.ttc .price-sub {
    color: rgba(255,255,255,0.7); /* sous-texte plus clair pour bien ressortir */
}

.price-sub {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.55);
}

.price-note {
  margin-top: 18px;

  padding-top: 16px;

  border-top: 1px solid rgba(255,255,255,0.08);

  font-size: 0.78rem;

  color: rgba(255,255,255,0.58);

  text-align: center;
}

/* MOBILE */

@media (max-width: 640px) {

  .price-grid {
    grid-template-columns: 1fr;
  }

  .price-amount {
    font-size: 1.6rem;
  }

  .price-box {
    padding: 18px;
  }


}

/* ─── MOBILE LAYOUT IMPROVEMENTS ───────────────────── */

@media (max-width: 640px) {
  /* Product Detail Page */
  .product-detail-page {
    grid-template-columns: 1fr;
    gap: 16px; /* Reduced gap for mobile */
  }

  /* Product Title and Description */
  .hero-title {
    font-size: 1.5rem; /* Smaller font for mobile */
    margin-bottom: 12px;
  }

  .hero-sub {
    font-size: 0.9rem; /* Smaller font for better readability */
    line-height: 1.4;
    margin-bottom: 12px; /* Add margin for better spacing */
  }

  /* Price Box */
  .price-box {
    padding: 16px;
  }

  .price-amount {
    font-size: 1.4rem; /* Smaller font size for price */
  }

  .price-sub {
    font-size: 0.75rem; /* Smaller subtext font */
  }

  /* Gallery */
  .product-detail-gallery {
    gap: 12px; /* Reduce gap between images */
  }

  /* Configuration Select */
  .modal-select {
    font-size: 0.85rem; /* Smaller font size for better fit */
    padding: 10px 20px; /* Adjust padding */
  }

  /* Action Buttons */
  .btn-primary {
    padding: 12px;
    font-size: 0.9rem; /* Smaller font size */
  }

  .btn-back {
    padding: 12px 16px;
    font-size: 0.9rem; /* Smaller font size */
  }
}

@media (max-width: 768px) {
  /* Adjust grid layout for medium-sized screens */
  .product-detail-page {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .hero-title {
    font-size: 1.8rem; /* Slightly smaller font */
  }
}

    /* Actions */
    .detail-actions {
      display: flex;
      gap: 12px;
      margin-top: 20px;
    }
    .btn-primary {
      flex: 1;
      padding: 15px;
      background: #28a745;
      color: white;
      border: none;
      border-radius: 10px;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
    }
    .btn-primary:hover {
      background: #1e7e34;
      transform: translateY(-2px);
    }
    .btn-back {
      padding: 15px 20px;
      background: #f1f5f9;
      color: #475569;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      text-decoration: none;
      font-weight: 500;
      transition: all 0.2s;
    }
    .btn-back:hover {
      background: #e2e8f0;
      color: #1f2937;
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.4; }
    }

@media (max-width: 768px) {
  .product-detail-info,
  .product-detail-info.sticky-bottom {
    position: static !important; /* annule sticky */
    top: auto !important;
    bottom: auto !important;
    align-self: auto !important;
  }

  /* Action buttons en bas */
  .detail-actions {
    position: static;
    margin-top: 20px;
  }
}