:root {
  --gold-primary: #C6A664;
  --gold-dark: #A88C4A;
  --gold-light: #E8D9B0;
  --beige-primary: #D6C6B1;
  --beige-light: #F5F3F0;
  --beige-lighter: #FAF9F7;
  --text-dark: #2C2C2C;
  --text-light: #6C6C6C;
  --border-light: #EAE5DD;
  --white: #FFFFFF;
  --shadow: 0 4px 20px rgba(214, 198, 177, 0.15);
  --shadow-hover: 0 8px 30px rgba(198, 166, 100, 0.2);
  
  /* Dark Background Variables */
  --bg-dark: #0f0f0f;
  --bg-darker: #0a0a0a;
  --bg-card: #1a1a1a;
  --bg-card-hover: #222222;
  --border-dark: #333333;
  --text-on-dark: #ffffff;
  --text-muted-dark: #a0a0a0;
}

/* Breadcrumb - Dark Theme */
.breadcrumb-nav {
  background: var(--bg-card);
  padding: 1rem 0;
  border-bottom: 1px solid var(--border-dark);
  font-family: 'Montserrat', sans-serif;
}

.breadcrumb-nav .container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.breadcrumb-link {
  color: var(--text-muted-dark);
  text-decoration: none;
  transition: color 0.3s ease;
  font-size: 0.9rem;
}

.breadcrumb-link:hover {
  color: var(--gold-primary);
}

.breadcrumb-separator {
  color: var(--text-muted-dark);
  margin: 0 0.25rem;
  opacity: 0.5;
}

.breadcrumb-current {
  color: var(--text-on-dark);
  font-weight: 600;
  font-size: 0.9rem;
}

/* Product Main Layout */
.product-main {
  display: grid;
  grid-template-columns: 55% 45%;
  gap: 2rem;
  margin: 1.2rem 0;
  align-items: start;
}

@media (max-width: 768px) {
  .product-main {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* Anti-débordement horizontal (bug mobile accordéons Description / Guide des tailles) :
   un item de grille a par défaut min-width:auto → il refuse de passer sous la largeur
   min-content de son contenu (tableau du guide, mots longs, breadcrumb…), ce qui faisait
   gonfler la colonne au-delà du viewport et débordait le texte des accordéons à droite.
   min-width:0 autorise la colonne à rétrécir jusqu'au viewport. */
.product-main > .product-info,
.product-main > .product-gallery {
  min-width: 0;
}

/* Sécurité : coupe les très longs tokens (URL, mots sans espace) au lieu de déborder. */
.accordion-body,
.accordion-body p,
.sg-intro,
.sg-step p {
  overflow-wrap: break-word;
}

/* Product Gallery — sticky : reste visible pendant que tu scrolles la fiche.
   Recette maison alignée sur le panier et la carte cadeau :
   • top calé sur --header-h (défini dans nav.css : 68px desktop / 58px mobile)
     au lieu d'un 100px en dur qui ne suivait pas la navbar.
   • max-height + overflow interne = garde-fou : la galerie ne dépasse JAMAIS
     la hauteur visible. Sans ce cap, sur une fenêtre courte le bas de l'image
     était coupé (la pièce n'était jamais vue en entier, bug signalé). En usage
     normal l'image tient dans le cadre → l'overflow ne se déclenche pas. */
.product-gallery {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: flex-start;
  position: sticky;
  top: calc(var(--header-h, 68px) + 24px);
  align-self: start; /* indispensable en CSS Grid pour que sticky fonctionne */
}

@media (max-width: 768px) {
  .product-gallery {
    position: static; /* pas de sticky sur mobile */
  }
}

/* La photo principale se dimensionne par la HAUTEUR : sa largeur découle du
   ratio 4/5 pour que la pièce entière tienne dans la fenêtre sans scroll.
   On prend la plus petite valeur entre la largeur dispo (100%) et la largeur
   qui fait rentrer un 4/5 dans la hauteur visible (hauteur × 0.8). */
.gallery-main {
  flex: 0 1 auto;
  width: min(100%, calc((100vh - var(--header-h, 68px) - 48px) * 0.8));
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* ── Crossfade deux couches, zéro flash ────────────────────────────────────────
   Layer-A : dans le flux normal → définit la hauteur du container (fiable Safari)
   Layer-B : absolue sur Layer-A → superposée, invisible par défaut              */
.gallery-layer-a {
  display: block;
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: top center;
  transition: opacity 0.38s ease;
  position: relative;   /* reste dans le flux */
  z-index: 2;
  opacity: 1;
}
.gallery-layer-b {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top center;
  transition: opacity 0.38s ease;
  opacity: 0;
  z-index: 1;
}

/* Compatibilité — classe parente sans aspect-ratio propre puisque Layer-A le porte */
.main-image-container {
  position: relative;
  overflow: hidden;
  background: var(--bg-card);
  cursor: pointer;
}

/* Pas de zoom hover sur la photo principale */

@media (max-width: 768px) {
  .product-gallery {
    flex-direction: column;
  }
  .gallery-main { width: 100%; } /* pleine largeur sur mobile, pas de cap hauteur */
}

/* ==================== ULTRA PREMIUM MINIMALIST BADGES ==================== */
.product-badges-container {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 25;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: flex-end;
}

.product-badge {
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  font-family: 'Unica One', cursive;
  backdrop-filter: blur(40px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  animation: premiumSlideIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
}

@keyframes premiumSlideIn {
  from {
    opacity: 0;
    transform: translateX(30px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* Ultra Premium Sale Badge */
.sale-badge {
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.95), rgba(238, 90, 36, 0.95));
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

/* Ultra Premium Sold Out Badge */
.soldout-badge {
  background: linear-gradient(135deg, rgba(44, 44, 44, 0.95), rgba(26, 26, 26, 0.95));
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Ultra Premium Unique Badge */
.unique-badge {
  background: linear-gradient(135deg, rgba(198, 166, 100, 0.95), rgba(168, 140, 74, 0.95));
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

/* Premium Shine Effect */
.product-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s ease;
}

.product-badge:hover::before {
  left: 100%;
}

/* ==================== SOLD OUT PRODUCT STYLING ==================== */
.sold-out-overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(108, 108, 108, 0.15);
  z-index: 15;
  border-radius: 20px;
  pointer-events: none;
}

/* Sold Out State */
.sold-out-state {
  text-align: center;
  padding: 1.5rem;
  background: var(--bg-card);
  border-radius: 15px;
  border: 1px solid var(--border-dark);
}

.sold-out-message {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  color: var(--text-muted-dark);
  font-weight: 600;
}

.sold-out-message i {
  color: #FF6B6B;
  font-size: 1.5rem;
}

.sold-out-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Enhanced Gallery Enlarge Button */
.gallery-zoom-btn {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-on-dark);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  cursor: pointer;
  z-index: 3;
  backdrop-filter: blur(10px);
}

.gallery-zoom-btn:hover {
  background: var(--gold-primary);
  color: var(--bg-dark);
  transform: scale(1.1) translateY(-2px);
  box-shadow: 0 8px 30px rgba(198, 166, 100, 0.3);
}

/* Premium Thumbnails - Vertical Strip */
.gallery-thumbnails {
  width: 76px;
  flex-shrink: 0;
}

.thumbnail-scroll {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.25rem;
  max-height: 520px;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
}
.thumbnail-scroll::-webkit-scrollbar {
  display: none; /* Chrome/Safari/mobile – pas de scrollbar visible */
}

/* scrollbar masquée — déjà géré ci-dessus */

/* On mobile: horizontal row below main image */
@media (max-width: 768px) {
  .product-main,
  .product-gallery {
    min-width: 0; /* autorise les grid/flex items à rétrécir sous leur contenu */
  }
  .gallery-thumbnails {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    order: 1;
    overflow: hidden; /* contient le scroll horizontal, empêche le débordement de page */
  }
  .thumbnail-scroll {
    flex-direction: row;
    max-height: none;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* swipe natif iOS */
    scroll-snap-type: x proximity;
    padding: 0.25rem 0.5rem;
  }
  .thumbnail-scroll .thumbnail {
    scroll-snap-align: start;
  }
}

.thumbnail {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  /* Une seule courbe partagée par le cadre, le liseré, l'ombre, le zoom de
     l'image et le voile doré (::after). Avant : le cadre filait sur un
     cubic-bezier nerveux pendant que l'image zoomait en `ease` → décalage
     visible de la lumière. Désormais tout bouge d'un seul geste. */
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  flex-shrink: 0;
  position: relative;
  background: var(--bg-card);
}

.thumbnail.active {
  border-color: var(--gold-primary);
  box-shadow: 0 4px 15px rgba(198, 166, 100, 0.3);
}

.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.thumbnail:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(198, 166, 100, 0.2);
  background: var(--bg-card-hover);
}

.thumbnail:hover img {
  transform: scale(1.08);
}

.thumbnail::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(198, 166, 100, 0.1), transparent);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.thumbnail.active::after,
.thumbnail:hover::after {
  opacity: 1;
}

/* ─── Product Info ────────────────────────────────────────────────────── */
.product-info {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* En-tête */
.product-header {
  margin-bottom: 0.8rem;
}

.product-category-tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-primary);
  margin-bottom: 0.4rem;
}

.product-title {
  font-family: 'Unica One', cursive;
  font-size: 1.9rem;
  color: var(--text-on-dark);
  letter-spacing: 0.06em;
  line-height: 1.1;
  margin: 0;
}

/* Prix */
.product-pricing {
  margin-bottom: 0.8rem;
}

.price-container {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.price-current {
  font-size: 1.75rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--gold-primary), var(--gold-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.price-original {
  font-size: 0.95rem;
  color: var(--text-muted-dark);
  text-decoration: line-through;
}

.sale-badge-pill {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #FF6B6B, #EE5A24);
  color: white;
  padding: 0.15rem 0.5rem;
  border-radius: 20px;
}

/* Specs rapides */
.quick-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.8rem;
}

.quick-spec {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: var(--text-muted-dark);
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: 20px;
  padding: 0.2rem 0.65rem;
}

.quick-spec i {
  color: var(--gold-primary);
  font-size: 0.7rem;
}

/* Séparateur */
.info-divider {
  height: 1px;
  background: var(--border-dark);
  margin: 0.8rem 0;
}

/* Wishlist lien discret */
.wishlist-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted-dark);
  font-size: 0.78rem;
  text-decoration: none;
  margin-top: 0.4rem;
  transition: color 0.2s ease;
  padding: 0.15rem 0;
}

.wishlist-link:hover {
  color: var(--gold-primary);
}

.wishlist-link i {
  font-size: 0.9rem;
}

/* Trust strip */
.trust-strip {
  display: flex;
  gap: 0;
  margin: 0.6rem 0 0;
}

.trust-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.4rem;
  border: 1px solid var(--border-dark);
  background: var(--bg-card);
  font-size: 0.68rem;
  color: var(--text-muted-dark);
  text-align: center;
  letter-spacing: 0.03em;
}

.trust-item:first-child { border-radius: 8px 0 0 8px; }
.trust-item:last-child  { border-radius: 0 8px 8px 0; }
.trust-item:not(:first-child) { border-left: none; }

.trust-item i {
  color: var(--gold-primary);
  font-size: 0.95rem;
}

/* Accordéons */
.product-accordions {
  display: flex;
  flex-direction: column;
}

.accordion-item {
  border-bottom: 1px solid var(--border-dark);
}

.accordion-item:first-child {
  border-top: 1px solid var(--border-dark);
}

.accordion-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  color: var(--text-on-dark);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 0.6rem 0;
  cursor: pointer;
  text-align: left;
  transition: color 0.2s ease;
}

.accordion-trigger:hover {
  color: var(--gold-primary);
}

.accordion-icon {
  color: var(--gold-primary);
  font-size: 0.8rem;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.accordion-body {
  padding-bottom: 0.6rem;
  color: var(--text-muted-dark);
  font-size: 0.82rem;
  line-height: 1.6;
}

.accordion-body p {
  margin: 0;
}

/* Specs (ancienne) — conservée pour compatibilité */
.price-current1 {
  font-weight: 500;
  opacity: 0.8;
  font-size: 0.9rem;
  color: white;
}

/* Purchase Section */
.purchase-section {
  background: var(--bg-card);
  padding: 1rem 1.2rem;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-dark);
}

.quantity-selector {
  margin-bottom: 0.8rem;
}

.quantity-label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-on-dark);
}

.quantity-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.quantity-btn {
  background: var(--bg-dark);
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-on-dark);
}

.quantity-btn:hover {
  background: var(--gold-primary);
  color: var(--bg-dark);
  border-color: var(--gold-primary);
}

.quantity-input {
  width: 60px;
  height: 36px;
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  text-align: center;
  font-weight: 600;
  font-size: 0.95rem;
  background: var(--bg-dark);
  color: var(--text-on-dark);
}

.quantity-input:focus {
  border-color: var(--gold-primary);
  outline: none;
  box-shadow: 0 0 0 2px rgba(198, 166, 100, 0.1);
}

/* Masquer les flèches natives du champ number */
.quantity-input::-webkit-inner-spin-button,
.quantity-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.quantity-input[type=number] { -moz-appearance: textfield; }

/* Action Buttons */
.action-buttons {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.8rem;
}

.btn-premium {
  flex: 2;
  background: linear-gradient(135deg, var(--gold-primary), var(--gold-dark));
  background-size: 200% 200%;
  background-position: left center;
  color: var(--text-dark);
  border: none;
  border-radius: 12px;
  padding: 1rem 2rem;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.785, 0.135, 0.15, 0.86),
              box-shadow 0.35s cubic-bezier(0.785, 0.135, 0.15, 0.86),
              background-position 0.5s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  position: relative;
  overflow: hidden;
}

.btn-premium::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s ease, height 0.5s ease;
}

.btn-premium:hover::after {
  width: 300px;
  height: 300px;
}

.btn-premium:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(198, 166, 100, 0.4);
  background-position: right center;
}

.btn-premium:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(198, 166, 100, 0.3);
}

.btn-premium-outline {
  flex: 1;
  background: transparent;
  color: var(--gold-primary);
  border: 2px solid var(--gold-primary);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-premium-outline:hover {
  background: var(--gold-primary);
  color: var(--text-dark);
  transform: translateY(-2px);
}

/* ==================== UPDATED RELATED PRODUCTS STYLES ==================== */
.related-products {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--border-dark);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.section-title {
  font-family: 'Unica One', cursive;
  font-size: 2rem;
  color: var(--text-on-dark);
  margin: 0;
}

.view-all-link {
  color: var(--gold-primary);
  text-decoration: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-dark);
  border-radius: 25px;
}

.view-all-link:hover {
  background: var(--gold-primary);
  color: var(--bg-dark);
  gap: 0.75rem;
  transform: translateX(5px);
}

/* Products Grid - Dark Theme */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.product-card {
  background: var(--bg-card);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  /* Transition explicite (jamais `all`) : élévation, lumière, fond et liseré
     sur la même courbe. État de repos non figé ici → l'entrée `fadeInUp`
     (fill backwards, plus bas) libère `transform` pour le :hover. */
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.45s ease,
    border-color 0.45s ease;
  border: 1px solid var(--border-dark);
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(198, 166, 100, 0.22);
  background: var(--bg-card-hover);
  border-color: rgba(198, 166, 100, 0.32);
}

.product-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--bg-card);
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-card:hover .product-image img {
  transform: scale(1.05);
}

/* ==================== ULTRA PREMIUM SOLD OUT STYLING ==================== */
.product-card.sold-out .product-image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(108, 108, 108, 0.15);
  z-index: 15;
  border-radius: 16px;
}

.product-card.sold-out .product-image img {
  transition: all 0.4s ease;
}

/* Premium Price Styling for Sold Out */
.product-card.sold-out .product-price {
  position: relative;
}

.product-card.sold-out .price-current,
.product-card.sold-out .price-old,
.product-card.sold-out .price-new {
  color: var(--text-muted-dark) !important;
  font-weight: 500;
  position: relative;
  opacity: 0.8;
}

/* Elegant line-through effect */
.product-card.sold-out .price-current::after,
.product-card.sold-out .price-old::after,
.product-card.sold-out .price-new::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -5%;
  width: 110%;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    var(--text-muted-dark) 20%, 
    var(--text-muted-dark) 80%, 
    transparent 100%);
  opacity: 0.6;
  transform: translateY(-50%);
}

/* Remove the default line-through */
.product-card.sold-out .price-old {
  text-decoration: none;
}

/* Ultra Premium Sold Out CTA */
.product-card.sold-out .product-link {
  background: transparent;
  color: var(--text-muted-dark);
  border: 1px solid var(--border-dark);
  opacity: 1;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.product-card.sold-out .product-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.1), 
    transparent);
  transition: left 0.6s ease;
}

.product-card.sold-out .product-link:hover {
  background: var(--text-muted-dark);
  color: var(--bg-dark);
  border-color: var(--text-muted-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(108, 108, 108, 0.2);
}

.product-card.sold-out .product-link:hover::before {
  left: 100%;
}

/* Premium icon transition */
.product-card.sold-out .product-link i {
  transition: transform 0.3s ease;
}

.product-card.sold-out .product-link:hover i {
  transform: translateX(3px);
}

/* Premium price grouping */
.product-card.sold-out .product-price {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.product-card.sold-out .price-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
}

/* Elegant price separator */
.product-card.sold-out .price-separator {
  color: var(--text-muted-dark);
  opacity: 0.5;
  font-weight: 300;
}

/* Wishlist pill — coin inférieur droit, cohérent avec la boutique */
.wishlist-pill {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  z-index: 30;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(10,10,10,0.65);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  transition: background 0.2s, color 0.2s, transform 0.15s;
  cursor: pointer;
  font-size: 0.85rem;
}
.wishlist-pill:hover {
  background: rgba(198,166,100,0.9);
  color: #0f0f0f;
  border-color: var(--gold-primary);
  transform: scale(1.1);
}

/* Désactiver hover lift sur touch — single-tap iOS */
@media (hover: none) {
  .product-card:hover {
    transform: none !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
  }
  .product-card { touch-action: manipulation; }
  .wishlist-pill { touch-action: manipulation; }
}

.action-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-on-dark);
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  text-decoration: none;
  cursor: pointer;
}

.action-btn:hover {
  background: var(--gold-primary);
  color: var(--bg-dark);
  transform: scale(1.1);
  border-color: var(--gold-primary);
}

.product-info {
  padding: 1.5rem;
}

.product-name {
  font-weight: 600;
  color: var(--text-on-dark);
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
}

.product-price {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.price-old {
  text-decoration: line-through;
  color: var(--text-muted-dark);
  font-size: 0.9rem;
}

.price-new {
  color: #FF6B6B;
  font-weight: 700;
  font-size: 1.1rem;
}

.price-current {
  color: var(--text-on-dark);
  font-weight: 700;
  font-size: 1.1rem;
}

.product-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--gold-primary);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  padding: 0.5rem 0;
}

.product-link:hover {
  gap: 0.75rem;
  color: var(--gold-light);
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--text-muted-dark);
  grid-column: 1 / -1;
}

.empty-icon {
  font-size: 4rem;
  color: var(--border-dark);
  margin-bottom: 1.5rem;
}

.empty-state h4 {
  color: var(--text-on-dark);
  margin-bottom: 0.5rem;
}

/* ==================== RELATED V2 — Suggestions curées (mai 2026) ====================
   Principe : le markup et les classes des cartes sont STRICTEMENT identiques
   à la boutique (`product-card` + `product-info` + `wishlist-pill` +
   `product-color-row` + `lc-badges`). Les styles existants des cartes
   boutique s'appliquent donc tels quels — pas un seul override sur la carte.
   La section ajoute UNIQUEMENT :
     • un header narratif (eyebrow + sous-titre)
     • une ligne whisper de pertinence (raison de la suggestion)
     • un confort responsive (4 → 2 colonnes → scroll snap mobile)
   =================================================================== */

.related-v2 {
  margin-top: 5rem;
  padding-top: 3.5rem;
  border-top: 1px solid var(--border-dark);
  position: relative;
}
.related-v2::before {
  /* Filet doré centré — signature Maison */
  content: '';
  position: absolute;
  top: -0.5px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 1px;
  background: var(--gold-primary);
  opacity: 0.7;
}

.related-v2 .section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2.75rem;
}
.related-v2 .section-header__title {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.related-v2 .section-eyebrow {
  display: inline-block;
  font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  font-size: 0.7rem;
  font-style: italic;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-primary);
  opacity: 0.9;
}
.related-v2 .section-title {
  font-family: 'Unica One', cursive;
  font-size: 2.4rem;
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: var(--text-on-dark);
  margin: 0;
}
.related-v2 .section-subtitle {
  margin: 0.2rem 0 0;
  font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  font-size: 1rem;
  font-style: italic;
  letter-spacing: 0.02em;
  color: var(--text-muted-dark);
  opacity: 0.9;
}

/* La grille hérite de .products-grid (déjà défini line 803).
   On force juste 4 colonnes max sur desktop large pour cette section. */
.related-v2 .products-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.75rem;
}

/* Whisper de pertinence — italique doré confidentiel.
   Placé APRÈS le prix, AVANT le CTA. Ligne unique, jamais en surbrillance. */
.related-v2 .match-whisper {
  margin: 0 0 0.75rem;
  font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  font-size: 0.82rem;
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--gold-primary);
  opacity: 0.82;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.related-v2 .match-whisper::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 1px;
  background: var(--gold-primary);
  opacity: 0.75;
  flex-shrink: 0;
}

/* Tablette — 2 colonnes */
@media (max-width: 1024px) {
  .related-v2 .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

/* Mobile — scroll horizontal snap, format vitrine */
@media (max-width: 640px) {
  .related-v2 { margin-top: 3.5rem; padding-top: 2.5rem; }
  .related-v2 .section-title { font-size: 1.8rem; }
  /* En-tête : empilé et aligné à gauche. La règle générique
     `.section-header{flex-direction:column}` (768px) ne s'applique pas ici —
     `.related-v2 .section-header` est plus spécifique — d'où ce rappel explicite
     qui évite le rendu cassé (titre à droite, « Voir Tout » en gros pavé). */
  .related-v2 .section-header {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 0.9rem;
    margin-bottom: 1.75rem;
  }
  .related-v2 .view-all-link { align-self: flex-start; }
  .related-v2 .products-grid {
    display: flex;
    grid-template-columns: none;
    gap: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    padding: 0 1rem 1rem;
    margin: 0 -1rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .related-v2 .products-grid::-webkit-scrollbar { display: none; }
  .related-v2 .products-grid > .product-card {
    flex: 0 0 75%;
    max-width: 300px;
    scroll-snap-align: start;
  }
}

/* ==================== SIMPLE IMAGE MODAL STYLES ==================== */
.image-modal-simple {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
}

.image-modal-simple.active {
  display: flex;
}

.modal-overlay-simple {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
}

.modal-content-simple {
  position: relative;
  background: transparent;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close-simple {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1.2rem;
  z-index: 10002;
}

.modal-close-simple:hover {
  background: var(--gold-primary);
  color: var(--bg-dark);
  transform: rotate(90deg);
}

.modal-image-container-simple {
  position: relative;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-image-simple {
  width: auto;
  height: auto;
  max-height: 88vh;
  max-width: 92vw;
  object-fit: contain;
  display: block;
  border-radius: 12px;
  cursor: zoom-in;
  /* Pas de transition sur transform : le JS le met à jour à 60fps
     (pan/pinch). Une transition CSS provoque un effet ressort visible
     ("tremblement"). Seule l'opacité reste animée pour le crossfade. */
  transition: opacity 0.2s ease;
  transform-origin: center center;
}

.modal-image-simple.zoomed {
  cursor: zoom-out;
}

/* Navigation arrows */
.nav-arrow-simple {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  opacity: 0.7;
}

.nav-arrow-simple:hover {
  opacity: 1;
  background: var(--gold-primary);
  color: var(--bg-dark);
  transform: translateY(-50%) scale(1.1);
}

.nav-prev-simple {
  left: 20px;
}

.nav-next-simple {
  right: 20px;
}

.image-counter-simple {
  position: absolute;
  bottom: -40px;
  left: 0;
  right: 0;
  text-align: center;
  color: white;
  font-weight: 600;
  font-size: 0.9rem;
}

/* Body scroll lock */
body.modal-open {
  overflow: hidden;
}

/* Responsive Design */
@media (max-width: 768px) {
  .section-header {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  
  .product-info {
    padding: 1rem;
  }
  
  .product-name {
    font-size: 1rem;
    min-height: 2.4em;
  }
  
  .action-buttons {
    flex-direction: column;
  }
  
  .product-badges-container {
    top: 1rem;
    right: 1rem;
    gap: 0.3rem;
  }
  
  .product-badge {
    padding: 0.4rem 0.8rem;
    font-size: 0.65rem;
    letter-spacing: 1px;
  }
  
  .sold-out-actions {
    flex-direction: column;
  }
  
  .sold-out-message {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }
  
  .product-title {
    font-size: 2rem;
  }
  
  .price-current {
    font-size: 2rem;
  }
  
  .price-original {
    font-size: 1.2rem;
  }
  
  /* Mobile modal adjustments */
  .modal-content-simple {
    max-width: 96vw;
  }
  .modal-image-simple {
    max-height: 82vh;
    max-width: 96vw;
  }
  
  .modal-close-simple {
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
  }
  
  .nav-arrow-simple {
    width: 40px;
    height: 40px;
  }
  
  .nav-prev-simple {
    left: 10px;
  }
  
  .nav-next-simple {
    right: 10px;
  }
  
  .image-counter-simple {
    bottom: -50px;
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .products-grid {
    grid-template-columns: 1fr;
  }
  
  .product-badge {
    padding: 0.35rem 0.7rem;
    font-size: 0.6rem;
  }
  
  .product-main {
    gap: 1.5rem;
  }
  
  .purchase-section {
    padding: 1.5rem;
  }
  
  .gallery-zoom-btn {
    width: 40px;
    height: 40px;
    bottom: 1rem;
    right: 1rem;
  }
  
  .thumbnail {
    width: 70px;
    height: 70px;
  }
}

/* Additional responsive improvements */
@media (max-width: 1024px) {
  .product-main {
    gap: 3rem;
  }
  
  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
  }
}

/* Animation for product cards */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.product-card {
  /* `backwards` (et non `forwards`) : anti-flash à l'entrée puis retour à
     l'état de repos → `transform` libre pour le :hover (soulèvement réel). */
  animation: fadeInUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.product-card:nth-child(1) { animation-delay: 0.05s; }
.product-card:nth-child(2) { animation-delay: 0.12s; }
.product-card:nth-child(3) { animation-delay: 0.19s; }
.product-card:nth-child(4) { animation-delay: 0.26s; }

@media (prefers-reduced-motion: reduce) {
  .product-card { animation: none; }
}
/* ==================== RESPONSIVE RELATED PRODUCTS GRID ==================== */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

/* For large desktops - 4 products per row */
@media (min-width: 1200px) {
  .products-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* For desktop - 4 products per row */
@media (min-width: 992px) and (max-width: 1199px) {
  .products-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* For tablets - 3 products per row */
@media (max-width: 991px) and (min-width: 768px) {
  .products-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

/* For mobile devices - 2 products per row */
@media (max-width: 767px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  
  .product-card {
    margin-bottom: 0;
    min-width: 0; /* Important for responsive behavior */
  }
  
  .product-info {
    padding: 1rem;
  }
  
  .product-name {
    font-size: 1rem;
    min-height: 2.4em;
  }
  
  .product-price {
    font-size: 0.9rem;
  }
  
  .price-current, .price-new {
    font-size: 1rem;
  }
}

/* For very small mobile devices - ensure 2 products fit nicely */
@media (max-width: 480px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  
  .product-card {
    min-width: 0;
  }
  
  .product-info {
    padding: 0.75rem;
  }
  
  .product-name {
    font-size: 0.9rem;
    min-height: 2.2em;
  }
  
  .price-current, .price-new {
    font-size: 0.9rem;
  }
  
  .product-badge {
    padding: 0.3rem 0.6rem;
    font-size: 0.6rem;
  }
  
  .action-btn {
    width: 35px;
    height: 35px;
  }
}

/* ==================== ENHANCED RESPONSIVE DESIGN ==================== */
@media (max-width: 768px) {
  .section-header {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  
  .view-all-link {
    align-self: center;
  }
  
  .related-products {
    margin-top: 3rem;
    padding-top: 2rem;
  }
  
  .section-title {
    font-size: 1.5rem;
  }
  
  /* Products - 2 per row on mobile */
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  
  .product-info {
    padding: 1rem;
  }
  
  .product-name {
    font-size: 1rem;
    min-height: 2.4em;
  }
  
  .action-buttons {
    flex-direction: column;
  }
  
  .product-badges-container {
    top: 1rem;
    right: 1rem;
    gap: 0.3rem;
  }
  
  .product-badge {
    padding: 0.4rem 0.8rem;
    font-size: 0.65rem;
    letter-spacing: 1px;
  }
  
  .sold-out-actions {
    flex-direction: column;
  }
  
  .sold-out-message {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }
  
  .product-title {
    font-size: 2rem;
  }
  
  .price-current {
    font-size: 2rem;
  }
  
  .price-original {
    font-size: 1.2rem;
  }
}

@media (max-width: 480px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  
  .product-badge {
    padding: 0.35rem 0.7rem;
    font-size: 0.6rem;
  }
  
  .product-main {
    gap: 1.5rem;
  }
  
  .purchase-section {
    padding: 1.5rem;
  }
  
  .gallery-zoom-btn {
    width: 40px;
    height: 40px;
    bottom: 1rem;
    right: 1rem;
  }
  
  .thumbnail {
    width: 70px;
    height: 70px;
  }
  
  .section-title {
    font-size: 1.3rem;
  }
  
  .view-all-link {
    font-size: 0.9rem;
    padding: 0.4rem 0.8rem;
  }
}

/* ==================== RESPONSIVE CARD BEHAVIOR ==================== */
.product-card {
  background: var(--bg-card);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  border: 1px solid var(--border-dark);
  opacity: 0;
  transform: translateY(20px);
  min-width: 0; /* Important for responsive grid behavior */
  width: 100%; /* Ensure full width within grid cell */
}

/* Ensure images are properly responsive */
.product-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--bg-card);
  width: 100%;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
  display: block;
}

/* ==================== RESPONSIVE ANIMATIONS ==================== */
@media (max-width: 768px) {
  .product-card {
    animation: fadeInUp 0.4s ease forwards;
  }
  
  .product-card:nth-child(1) { animation-delay: 0.1s; }
  .product-card:nth-child(2) { animation-delay: 0.2s; }
  .product-card:nth-child(3) { animation-delay: 0.3s; }
  .product-card:nth-child(4) { animation-delay: 0.4s; }
}

/* ==================== RESPONSIVE PAGINATION (if used) ==================== */
@media (max-width: 768px) {
  .pagination {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  .pagination-btn, .pagination-page {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }
}

/* ==================== RESPONSIVE EMPTY STATE ==================== */
@media (max-width: 768px) {
  .empty-state {
    padding: 3rem 1rem;
  }
  
  .empty-icon {
    font-size: 3rem;
  }
  
  .empty-state h4 {
    font-size: 1.2rem;
  }
}


/* ============================================================
   LC-SHARE v2 — Luxe discret, ergonomique, percutant
   Inspirations : Hermès, Loro Piana, Aesop. Filet doré, easing
   cubic-bezier raffiné, hover qui révèle subtilement la marque.
   ============================================================ */

:root {
  --lc-share-ease: cubic-bezier(.16, 1, .3, 1);
  --lc-share-bg: #0e0e0f;
  --lc-share-bg-soft: #18181a;
  --lc-share-border: rgba(198, 166, 100, .14);
  --lc-share-border-strong: rgba(198, 166, 100, .35);
  --lc-share-text: #f3eee2;
  --lc-share-muted: #8e8a82;
}

/* ---------- Trigger ---------- */
.lc-share { margin-top: .55rem; }

.lc-share__trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: transparent;
  border: none;
  padding: .35rem .1rem;
  margin: 0;
  color: var(--text-muted-dark, #a0a0a0);
  font-family: inherit;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .35s var(--lc-share-ease), letter-spacing .35s var(--lc-share-ease);
}
.lc-share__trigger::after {
  content: "";
  position: absolute;
  left: 1.7rem;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-primary, #C6A664), transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s var(--lc-share-ease);
}
.lc-share__trigger:hover,
.lc-share__trigger:focus-visible {
  color: var(--gold-light, #E8D9B0);
  letter-spacing: .14em;
  outline: none;
}
.lc-share__trigger:hover::after,
.lc-share__trigger:focus-visible::after { transform: scaleX(1); }
.lc-share__trigger i {
  font-size: 1rem;
  color: var(--gold-primary, #C6A664);
  transition: transform .5s var(--lc-share-ease);
}
.lc-share__trigger:hover i { transform: translateX(-2px) rotate(-6deg); }

/* ---------- Lock body scroll ---------- */
body.lc-share-locked { overflow: hidden; }

/* ---------- Modal ---------- */
.lc-share-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .32s var(--lc-share-ease);
  padding: 1rem;
}
.lc-share-modal[hidden] { display: none; }
.lc-share-modal.is-open { opacity: 1; pointer-events: auto; }

.lc-share-modal__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(20,18,12,.55) 0%, rgba(0,0,0,.82) 70%);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}

.lc-share-modal__panel {
  position: relative;
  width: min(94vw, 500px);
  max-height: min(92vh, 760px);
  overflow: auto;
  background:
    linear-gradient(180deg, var(--lc-share-bg-soft) 0%, var(--lc-share-bg) 100%);
  color: var(--lc-share-text);
  border: 1px solid var(--lc-share-border);
  border-radius: 18px;
  padding: 2rem 1.85rem 1.55rem;
  box-shadow:
    0 40px 100px rgba(0,0,0,.65),
    0 1px 0 rgba(255,255,255,.04) inset,
    0 0 0 1px rgba(255,255,255,.015) inset;
  transform: translateY(14px) scale(.985);
  transition: transform .42s var(--lc-share-ease);
  font-family: 'Montserrat', sans-serif;
}
.lc-share-modal.is-open .lc-share-modal__panel { transform: translateY(0) scale(1); }

/* Filet doré supérieur — signature luxe */
.lc-share-modal__filet {
  position: absolute;
  top: 0;
  left: 18%;
  right: 18%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(198,166,100,0) 5%,
    var(--gold-primary, #C6A664) 50%,
    rgba(198,166,100,0) 95%,
    transparent 100%);
  opacity: .85;
  pointer-events: none;
}

/* Bouton fermeture */
.lc-share-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--lc-share-muted);
  cursor: pointer;
  transition: color .3s var(--lc-share-ease), border-color .3s var(--lc-share-ease), transform .3s var(--lc-share-ease);
}
.lc-share-modal__close:hover,
.lc-share-modal__close:focus-visible {
  color: var(--gold-light, #E8D9B0);
  border-color: var(--lc-share-border-strong);
  transform: rotate(90deg);
  outline: none;
}

/* Header */
.lc-share-modal__header {
  margin: .25rem 0 1.4rem;
  padding-right: 2rem;
  text-align: center;
}
.lc-share-modal__eyebrow {
  margin: 0 0 .55rem;
  color: var(--gold-primary, #C6A664);
  font-size: .68rem;
  letter-spacing: .42em;
  text-transform: uppercase;
}
.lc-share-modal__title {
  margin: 0 0 .55rem;
  font-family: 'Cormorant Garamond', 'Playfair Display', serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.2;
  letter-spacing: .01em;
  color: var(--lc-share-text);
}
.lc-share-modal__subtitle {
  margin: 0 auto;
  max-width: 32ch;
  color: var(--lc-share-muted);
  font-size: .78rem;
  font-style: italic;
  line-height: 1.55;
}

/* Bloc lien + copier */
.lc-share-modal__link {
  display: flex;
  align-items: stretch;
  gap: .45rem;
  margin: 0 0 1.4rem;
  padding: .32rem .35rem .32rem .85rem;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--lc-share-border);
  border-radius: 999px;
  transition: border-color .35s var(--lc-share-ease), background .35s var(--lc-share-ease);
}
.lc-share-modal__link:focus-within,
.lc-share-modal__link:hover {
  border-color: var(--lc-share-border-strong);
  background: rgba(198,166,100,.04);
}
.lc-share-modal__url {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--lc-share-text);
  font-size: .78rem;
  padding: .55rem 0;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  letter-spacing: .01em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.lc-share-modal__copy {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: linear-gradient(180deg, #d4b67a 0%, var(--gold-primary, #C6A664) 100%);
  color: #1a1410;
  border: none;
  border-radius: 999px;
  padding: .55rem 1.1rem;
  font-family: inherit;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .35s var(--lc-share-ease), transform .25s var(--lc-share-ease), box-shadow .35s var(--lc-share-ease);
  box-shadow: 0 6px 20px rgba(198,166,100,.18);
}
.lc-share-modal__copy:hover {
  background: linear-gradient(180deg, #e2c890 0%, #cba86a 100%);
  box-shadow: 0 8px 26px rgba(198,166,100,.32);
  transform: translateY(-1px);
}
.lc-share-modal__copy:active { transform: translateY(0) scale(.98); }
.lc-share-modal__copy.is-success {
  background: linear-gradient(180deg, #4a7a52 0%, #2f6638 100%);
  color: #f3f7f3;
  box-shadow: 0 6px 20px rgba(60,120,70,.28);
}
.lc-share-modal__copy i { font-size: .95rem; }

/* Grille des canaux */
.lc-share-modal__channels {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .35rem;
  margin: 0 -.25rem 1.2rem;
}
@media (max-width: 480px) {
  .lc-share-modal__channels { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 360px) {
  .lc-share-modal__channels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.lc-share-channel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: .85rem .25rem .7rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 14px;
  color: var(--lc-share-text);
  text-decoration: none;
  transition: background .35s var(--lc-share-ease), border-color .35s var(--lc-share-ease), transform .35s var(--lc-share-ease);
}
.lc-share-channel:hover,
.lc-share-channel:focus-visible {
  background: rgba(198,166,100,.05);
  border-color: var(--lc-share-border);
  transform: translateY(-2px);
  outline: none;
}

.lc-share-channel__icon {
  --c: var(--gold-primary, #C6A664);
  position: relative;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--lc-share-border);
  color: var(--lc-share-text);
  font-size: 1.1rem;
  transition: background .45s var(--lc-share-ease), color .45s var(--lc-share-ease), border-color .45s var(--lc-share-ease), box-shadow .45s var(--lc-share-ease);
}
/* Hover : on révèle la couleur de marque, subtilement */
.lc-share-channel:hover .lc-share-channel__icon,
.lc-share-channel:focus-visible .lc-share-channel__icon {
  background: var(--c, var(--gold-primary));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04) inset;
}
/* Instagram : gradient de marque au hover */
.lc-share-channel__icon--insta { overflow: hidden; }
.lc-share-channel:hover .lc-share-channel__icon--insta,
.lc-share-channel:focus-visible .lc-share-channel__icon--insta {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.lc-share-channel__label {
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--lc-share-muted);
  transition: color .35s var(--lc-share-ease);
}
.lc-share-channel:hover .lc-share-channel__label,
.lc-share-channel:focus-visible .lc-share-channel__label {
  color: var(--lc-share-text);
}

/* Branding par canal — couleurs lues depuis data-brand sur l'icône */
.lc-share-channel__icon[data-brand="#25D366"] { --c: #25D366; }
.lc-share-channel__icon[data-brand="#0084FF"] { --c: #0084FF; }
.lc-share-channel__icon[data-brand="#1877F2"] { --c: #1877F2; }
.lc-share-channel__icon[data-brand="#E60023"] { --c: #E60023; }
.lc-share-channel__icon[data-brand="#0a0a0a"] { --c: #0a0a0a; }
.lc-share-channel__icon[data-brand="#229ED9"] { --c: #229ED9; }
.lc-share-channel__icon[data-brand="#C6A664"] { --c: #C6A664; }
.lc-share-channel__icon[data-brand="#A88C4A"] { --c: #A88C4A; }
.lc-share-channel__icon[data-brand="#000000"] { --c: #000000; }

/* Note bas */
.lc-share-modal__note {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: .45rem;
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--lc-share-border);
  color: var(--lc-share-muted);
  font-size: .7rem;
  font-style: italic;
  letter-spacing: .02em;
  line-height: 1.55;
  text-align: center;
}
.lc-share-modal__note i { color: var(--gold-primary); margin-top: 1px; font-size: .85rem; }

/* Toast — confirmation copy pour Insta/TikTok */
.lc-share-toast {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  transform: translate(-50%, 14px);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1.1rem;
  background: linear-gradient(180deg, #1f1c14 0%, #14110b 100%);
  border: 1px solid var(--lc-share-border-strong);
  border-radius: 999px;
  color: var(--gold-light, #E8D9B0);
  font-size: .74rem;
  letter-spacing: .04em;
  box-shadow: 0 12px 30px rgba(0,0,0,.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .26s var(--lc-share-ease), transform .26s var(--lc-share-ease);
  max-width: calc(100% - 2rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lc-share-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.lc-share-toast i { color: var(--gold-primary); font-size: .95rem; }

@media (prefers-reduced-motion: reduce) {
  .lc-share-modal,
  .lc-share-modal__panel,
  .lc-share-channel,
  .lc-share-channel__icon,
  .lc-share-toast,
  .lc-share__trigger,
  .lc-share__trigger::after,
  .lc-share__trigger i,
  .lc-share-modal__close { transition: none; }
}