/*
  Section 3 — sélecteur de produits en carrousel, adapté d'une maquette
  autonome fournie par le client (mécanique : marquee auto-défilant qui
  s'arrête sur chaque produit, carte cliquable qui s'agrandit en place,
  points-info par variante, filtre catégories, pagination).

  Reskin complet : palette teal/pêche + Fraunces italique abandonnées au
  profit des tokens de base.css (blanc / gris clair / rouge, Sora + Inter —
  déjà chargées par index.html, aucune police supplémentaire ajoutée).

  Différence structurelle avec la maquette d'origine : celle-ci occupait tout
  le viewport (html,body{height:100%;overflow:hidden}). Ici, .products-frame
  est un bloc normal de la page : sa propre hauteur et son propre
  overflow:hidden suffisent, sans toucher au html/body ni gêner le scroll du
  reste du site.
*/

.products{
  position:relative;
  background:var(--white);
  padding:80px 0 0;
}

.products-head{
  max-width:1280px;
  margin:0 auto;
  padding:0 48px 40px;
}
.products-title{
  margin-top:14px;
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:clamp(28px, 3.2vw, 38px);
  letter-spacing:-0.02em;
  color:var(--ink);
}

/* ================= CADRE DU CARROUSEL ================= */
.products-frame{
  position:relative;
  width:100%;
  height:min(660px, 80vh);
  overflow:hidden;
  background:var(--paper);
  /* contexte d'empilement propre : les z-index internes (catégories 20,
     bouton fermer 60…) ne passent plus devant la topbar sticky */
  isolation:isolate;
}

.close-btn{
  position:absolute; top:22px; right:34px; z-index:60;
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  background:rgba(22,32,43,0.06);
  border:none; cursor:pointer; color:var(--ink);
  font-size:20px; line-height:1;
  opacity:0; pointer-events:none;
  transition:opacity .25s ease, background .2s ease;
}
.close-btn:hover{ background:rgba(22,32,43,0.12); }
.products-frame.is-expanded .close-btn{ opacity:1; pointer-events:auto; }

.expand-overlay{
  position:absolute; inset:0; z-index:8;
  background:rgba(22,32,43,0);
  opacity:0; pointer-events:none;
  transition:opacity .35s ease, background .35s ease;
}
.products-frame.is-expanded .expand-overlay{
  opacity:1; pointer-events:auto;
  background:rgba(22,32,43,0.14);
}

/* fond fixe : halo + orbites, ne bougent jamais */
.products-backdrop{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.products-halo{
  position:absolute;
  width:min(38vw,400px); height:min(38vw,400px);
  border-radius:50%;
  background:var(--red-soft);
  top:48%; left:50%;
  transform:translate(-50%,-50%);
}
.products-orbit{
  position:absolute;
  border:1px solid var(--gray-200);
  border-radius:50%;
}
.products-orbit.o1{ width:66vw; height:66vw; top:20%; left:5%; }
.products-orbit.o2{ width:48vw; height:48vw; top:35%; right:0%; }

.products-track{
  position:absolute; top:0; bottom:0; left:0;
  display:flex;
  width:max-content;
  z-index:5;
  will-change:transform;
  /* la durée vient d'une variable CSS (posée par products.js) plutôt que du
     raccourci "animation" en style inline, qui figerait aussi
     animation-play-state en inline et empêcherait les pauses ci-dessous
     (survol, carte agrandie) de s'appliquer */
  animation:mdp-products-marquee var(--marquee-duration, 20s) linear infinite;
}
/* pause du défilement au survol d'une carte, ou pendant l'expansion */
.products-track:has(.product-card:hover){ animation-play-state:paused; }
.products-track.hover-pause{ animation-play-state:paused; }
/* cadre hors écran (IntersectionObserver dans products.js) : défilement gelé */
.products-track.is-offscreen{ animation-play-state:paused; }
/* Pendant l'expansion, .products-track passe au-dessus de .expand-overlay (z-index
   supérieur) pour que la carte agrandie (pointer-events:auto) reste cliquable ;
   le reste du track garde pointer-events:none, donc les clics y retombent
   naturellement sur l'overlay en dessous (ferme la carte). */
.products-frame.is-expanded .products-track{
  animation-play-state:paused;
  pointer-events:none;
  z-index:10;
}

.product-slide{
  /* 100vw et non 100% : .products-track a "width:max-content" (sa taille
     dépend de son contenu), donc un flex-basis en % y est indéterminé.
     vw donne une taille fixe et fiable, égale à la largeur réelle de
     .products-frame puisque celui-ci occupe toute la largeur de la page. */
  flex:0 0 100vw;
  width:100vw;
  height:100%;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:24px;
}
.product-slide.expanded, .product-slide.expanded *{ pointer-events:auto; }
.product-slide.expanded{ z-index:20; }

.product-card{
  position:relative;
  width:min(68vw,680px);
  height:min(43vw,430px);
  overflow:visible;
  cursor:pointer;
  z-index:5;
  margin-top:-5vh;
  transition:width .4s cubic-bezier(.4,0,.2,1), height .4s cubic-bezier(.4,0,.2,1), transform .35s ease;
}
.product-slide.active .product-card{ transform:scale(1.03); }
.product-slide.expanded .product-card{
  width:min(80vw,800px);
  height:min(50vw,500px);
  cursor:default;
  transform:none;
}
.product-card img{
  position:absolute; inset:0;
  width:100%; height:100%;
  /* photos produit sur fond blanc : rien n'est rogné, le blanc se fond dans le cadre */
  object-fit:contain;
}
/* repli tant que product{N}.jpg est absent ou ne charge pas : dégradé neutre + code */
.product-card .fallback{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(155deg, var(--gray-100), var(--red-soft) 130%);
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:15px;
  letter-spacing:.04em;
  color:var(--ink-soft);
}

.slide-code{
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:clamp(30px, 3.6vw, 48px);
  white-space:nowrap;
  color:var(--ink);
  z-index:6;
  letter-spacing:-0.01em;
  transition:opacity .3s ease;
}
.product-slide.expanded .slide-code{ opacity:0.5; }

/* ---- catégories ---- */
.categories{ position:absolute; left:48px; bottom:40px; z-index:20; }
/* petit libellé au-dessus du sélecteur : sans lui, le nom de la catégorie
   en capitales passait pour un titre orphelin en bas à gauche du cadre */
.categories-eyebrow{
  display:block;
  margin-bottom:6px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.categories-btn{
  font-family:'Inter', sans-serif;
  font-size:26px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  display:flex; align-items:center; gap:12px;
  background:none; border:none; color:var(--ink); cursor:pointer;
  padding:0;
  transition:opacity .3s ease;
}
.categories-btn .plus{
  display:inline-block;
  transition:transform .25s ease;
  font-size:30px; font-weight:400;
}
.categories.open .categories-btn .plus{ transform:rotate(45deg); }
.products-frame.is-expanded .categories{ opacity:0; pointer-events:none; }

.categories-menu{
  position:absolute; left:0; bottom:calc(100% + 18px);
  background:var(--white);
  border-radius:16px;
  padding:12px;
  min-width:280px;
  box-shadow:0 24px 55px -12px rgba(22,32,43,0.28), 0 0 0 1px var(--gray-200);
  opacity:0; transform:translateY(8px) scale(.97);
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.categories.open .categories-menu{
  opacity:1; transform:translateY(0) scale(1);
  pointer-events:auto;
}
.categories-menu button{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  width:100%;
  background:none; border:none; cursor:pointer;
  padding:14px 16px; border-radius:11px;
  font-family:'Inter', sans-serif; font-size:16px; font-weight:600;
  color:var(--ink-soft);
  text-align:left;
}
.categories-menu button:hover{ background:var(--gray-100); }
.categories-menu button.active{ color:var(--ink); }
.categories-menu button.active::after{
  content:"●"; font-size:10px; color:var(--red);
}

/* ---- pagination ---- */
.products-progress{
  position:absolute; left:50%; bottom:36px; transform:translateX(-50%);
  display:flex; gap:10px; z-index:20;
  transition:opacity .3s ease;
}
.products-frame.is-expanded .products-progress{ opacity:0; pointer-events:none; }
.products-progress button{
  width:9px; height:9px; border-radius:50%;
  background:var(--gray-300);
  border:none; padding:0; cursor:pointer;
  transition:background .2s, transform .2s;
}
.products-progress button{ position:relative; }
/* zone de toucher élargie autour du petit point (9px visibles, ~29px actifs) */
.products-progress button::before{ content:""; position:absolute; inset:-10px -5px; }
.products-progress button:hover{ background:var(--ink-soft); }
.products-progress button.active{ background:var(--red); transform:scale(1.15); }

/* ---- points-info sur la carte agrandie ---- */
.hotspot{
  position:absolute;
  width:20px; height:20px; border-radius:50%;
  background:#fff;
  border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  box-shadow:0 6px 14px rgba(22,32,43,0.28);
  transform:translate(-50%,-50%);
  z-index:12;
  opacity:0;
  animation:mdp-dot-in .3s ease forwards;
  animation-delay:.15s;
}
@keyframes mdp-dot-in{ to{ opacity:1; } }
.hotspot::after{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--ink);
}
.hotspot .pulse{
  position:absolute; inset:-8px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.85);
  animation:mdp-pulse 2.2s ease-out infinite;
}
@keyframes mdp-pulse{
  0%{ transform:scale(0.7); opacity:.9; }
  100%{ transform:scale(1.7); opacity:0; }
}
.hotspot.selected{ background:var(--ink); }
.hotspot.selected::after{ background:#fff; }

/* bulle d'information, positionnée près du point cliqué */
.info-card{
  position:absolute;
  width:270px;
  background:var(--white);
  border-radius:16px;
  padding:20px 20px 18px;
  box-shadow:0 25px 55px -14px rgba(22,32,43,0.30), 0 0 0 1px var(--gray-200);
  opacity:0; transform:translateY(8px) scale(.98);
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  z-index:25;
}
.info-card.show{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.info-card h3{
  margin:0 0 8px;
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:17px;
  color:var(--ink);
}
.info-card p{ margin:0 0 14px; font-size:12.5px; line-height:1.5; color:var(--ink-soft); }
.info-card .row{ display:flex; align-items:center; justify-content:space-between; }
.info-card .price{ font-weight:700; font-size:15px; color:var(--ink); }
.info-card .price small{ font-weight:500; color:var(--ink-soft); font-size:11px; }
.info-card .add-btn{
  width:34px; height:34px; border-radius:50%;
  border:1.5px solid var(--gray-300);
  background:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink);
  transition:background .2s, color .2s, border-color .2s;
}
.info-card .add-btn:hover{ background:var(--red); border-color:var(--red); color:#fff; }

@media (max-width:1180px){
  .products{ padding-top:64px; }
  .products-head{ padding:0 28px 32px; }
  .categories{ left:28px; }
  .categories-btn{ font-size:24px; }
  .categories-btn .plus{ font-size:28px; }
}

@media (max-width:900px){
  .products-head{ padding:0 28px 28px; }
  .products-frame{ height:min(640px, 86vh); }
  .product-card{ width:min(86vw,640px); height:min(55vw,410px); margin-top:-8vh; }
  .product-slide.expanded .product-card{ width:min(92vw,760px); height:min(60vw,480px); }
}

/* ---- portrait : même mécanique, cadre plus haut que large ----
   Cartes agrandies (plus de place en largeur qu'en hauteur ne compte plus),
   pagination remontée au-dessus du sélecteur de catégories pour qu'ils ne
   se chevauchent pas, bulle d'info posée en bas de la carte agrandie plutôt
   qu'à côté du point (pas la place à côté sur un écran étroit). */
@media (max-width:640px){
  .products-frame{ height:min(600px, 78svh); }
  .products-halo{ width:64vw; height:64vw; }
  .products-orbit.o1{ width:120vw; height:120vw; top:18%; left:-30%; }
  .products-orbit.o2{ width:90vw; height:90vw; top:40%; right:-30%; }

  .product-slide{ gap:18px; }
  .product-card{ width:92vw; height:60vw; margin-top:-6vh; }
  .product-slide.expanded .product-card{ width:96vw; height:64vw; }
  .slide-code{ font-size:clamp(28px, 9vw, 40px); }

  /* pleine largeur, posée sous la carte par products.js (showVariantInfo) */
  .info-card{
    left:16px !important;
    right:16px;
    width:auto;
    padding:16px 18px 14px;
  }

  .products-progress{ bottom:86px; }
  .categories{ left:20px; bottom:24px; }
  .categories-btn{ font-size:20px; gap:10px; }
  .categories-btn .plus{ font-size:24px; }
  .categories-eyebrow{ font-size:10px; margin-bottom:4px; }
  .categories-menu{ min-width:220px; }
  .categories-menu button{ font-size:14px; padding:12px 14px; }
  .close-btn{ right:20px; top:18px; }
}

@media (max-width:520px){
  .products{ padding:56px 0 0; }
  .products-head{ padding:0 20px 24px; }
}