/* ============================================================
   JANET DENESE — Composant HOTSPOTS PRODUIT
   Alexis (DAYDGROUP) — vanilla CSS, zéro dépendance
   Points ronds qui pulsent doucement sur l'image produit ;
   au survol / focus / tap : info-bulle chic décrivant le détail.
   Accessible (clavier, aria), mobile-first (bulle ancrée en bas
   de l'image sur petit écran). Respecte prefers-reduced-motion.
   ============================================================ */

.jd-hotspots{
  position:relative;display:inline-block;max-width:100%;line-height:0;
  min-width:0; /* autorise le rétrécissement dans un parent flex/grid */
}
.jd-hotspots>img{display:block;max-width:100%;height:auto}

/* état « éteint » (ex : quand la fiche produit affiche une autre vue) */
.jd-hotspots.jd-hotspots--off .jd-hotspot,
.jd-hotspots.jd-hotspots--off .jd-bulle{opacity:0;pointer-events:none;visibility:hidden}

/* ---------- Le point ---------- */
/* Cible tactile 44px ; pastille visible 26px, centrée sur (--x,--y) en % */
.jd-hotspot{
  position:absolute;left:var(--x,50%);top:var(--y,50%);
  transform:translate(-50%,-50%);
  width:44px;height:44px;padding:0;border:0;border-radius:50%;
  background:transparent;cursor:pointer;z-index:5;
  display:grid;place-items:center;
  -webkit-tap-highlight-color:transparent;
  transition:opacity .4s ease,visibility .4s ease;
}
.jd-hotspot .pastille{
  width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,253,248,.94);
  border:1.5px solid var(--accent,#722338);
  box-shadow:0 2px 8px rgba(36,26,23,.28),inset 0 1px 3px rgba(255,255,255,.8);
  color:var(--accent-ink,#571a28);
  font:600 15px/1 var(--sans,Helvetica,Arial,sans-serif);
  transition:transform .35s cubic-bezier(.25,.65,.2,1),background .35s,color .35s;
}
.jd-hotspot .pastille::before{content:"+";display:block;transform:translateY(-.5px)}

/* halo qui pulse doucement (léger décalage entre points pour la vie) */
.jd-hotspot::before{
  content:"";position:absolute;width:26px;height:26px;border-radius:50%;
  box-shadow:0 0 0 0 rgba(114,35,56,.42);
  animation:jd-pulse 3.2s cubic-bezier(.3,.6,.4,1) infinite;
}
.jd-hotspot:nth-of-type(2)::before{animation-delay:.5s}
.jd-hotspot:nth-of-type(3)::before{animation-delay:1s}
.jd-hotspot:nth-of-type(4)::before{animation-delay:1.5s}
.jd-hotspot:nth-of-type(5)::before{animation-delay:2s}
.jd-hotspot:nth-of-type(6)::before{animation-delay:2.5s}
@keyframes jd-pulse{
  0%  {box-shadow:0 0 0 0 rgba(114,35,56,.42)}
  70% {box-shadow:0 0 0 13px rgba(114,35,56,0)}
  100%{box-shadow:0 0 0 0 rgba(114,35,56,0)}
}

/* survol / focus / ouvert : pastille pleine, le + devient × */
.jd-hotspot:hover .pastille,
.jd-hotspot:focus-visible .pastille,
.jd-hotspot.is-open .pastille{
  background:var(--accent,#722338);color:#fff;transform:scale(1.12);
}
.jd-hotspot.is-open .pastille{transform:scale(1.12) rotate(45deg)}
.jd-hotspot:focus-visible{outline:2px solid var(--accent-ink,#571a28);outline-offset:3px}
.jd-hotspot.is-open::before{animation:none;box-shadow:0 0 0 0 transparent}

/* ---------- L'info-bulle ---------- */
.jd-bulle{
  position:absolute;left:var(--x,50%);top:var(--y,50%);z-index:6;
  width:min(250px,72vw);
  padding:14px 16px 15px;line-height:1.5;text-align:left;
  background:rgba(252,248,240,.96);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(177,132,85,.45);
  border-radius:var(--r-sm,10px);
  box-shadow:0 2px 6px rgba(36,26,23,.07),0 14px 34px rgba(36,26,23,.16);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .35s cubic-bezier(.25,.65,.2,1),transform .35s cubic-bezier(.25,.65,.2,1),visibility .35s;
}
.jd-bulle b{
  display:block;font-family:var(--serif,Georgia,serif);font-weight:500;
  font-size:1.02rem;color:var(--accent-ink,#571a28);margin-bottom:3px;letter-spacing:.01em;
}
.jd-bulle b::after{
  content:"";display:block;width:30px;height:1.5px;margin-top:6px;
  background:linear-gradient(90deg,var(--brass,#b18455),transparent);
}
.jd-bulle p{margin:6px 0 0;font-family:var(--sans,Helvetica,Arial,sans-serif);font-size:.8rem;color:var(--ink-soft,#4c3d38)}

/* placements (calculés par hotspots.js selon x,y) */
.jd-bulle--droite{transform:translate(28px,-50%) scale(.96)}
.jd-bulle--gauche{transform:translate(calc(-100% - 28px),-50%) scale(.96)}
.jd-bulle--haut  {transform:translate(-50%,calc(-100% - 30px)) scale(.96)}
.jd-bulle--bas   {transform:translate(-50%,30px) scale(.96)}

.jd-bulle.is-open{opacity:1;visibility:visible;pointer-events:auto}
.jd-bulle--droite.is-open{transform:translate(28px,-50%) scale(1)}
.jd-bulle--gauche.is-open{transform:translate(calc(-100% - 28px),-50%) scale(1)}
.jd-bulle--haut.is-open  {transform:translate(-50%,calc(-100% - 30px)) scale(1)}
.jd-bulle--bas.is-open   {transform:translate(-50%,30px) scale(1)}

/* petit bec (caret) vers le point */
.jd-bulle::before{
  content:"";position:absolute;width:10px;height:10px;
  background:inherit;border:inherit;border-width:0 0 1px 1px;
  transform:rotate(45deg);
}
.jd-bulle--droite::before{left:-6px;top:calc(50% - 5px);border-width:0 0 1px 1px}
.jd-bulle--gauche::before{right:-6px;top:calc(50% - 5px);border-width:1px 1px 0 0}
.jd-bulle--haut::before  {bottom:-6px;left:calc(50% - 5px);border-width:0 1px 1px 0;transform:rotate(45deg)}
.jd-bulle--bas::before   {top:-6px;left:calc(50% - 5px);border-width:1px 0 0 1px;transform:rotate(45deg)}

/* ---------- Mobile : la bulle devient un bandeau élégant en bas de l'image ---------- */
@media(max-width:560px){
  .jd-bulle,.jd-bulle--droite,.jd-bulle--gauche,.jd-bulle--haut,.jd-bulle--bas{
    left:8px;right:8px;top:auto;bottom:8px;width:auto;
    transform:translateY(8px) scale(.98);
  }
  .jd-bulle.is-open{transform:translateY(0) scale(1)}
  .jd-bulle::before{display:none}
}

/* ---------- Mouvement réduit ---------- */
@media(prefers-reduced-motion:reduce){
  .jd-hotspot::before{animation:none;box-shadow:0 0 0 5px rgba(114,35,56,.14)}
  .jd-bulle{transition:none}
}