.hotspot {
  position: absolute;
  display: block;
  cursor: pointer;
  z-index: 2;          /* au-dessus du fond */
  /* overflow: hidden; */   /* ❌ supprimé, inutile si on zoome le conteneur */
  
  transform-origin: center;
  will-change: transform;
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* Responsive vertical gap between stacked replacement hotspots */
:root { --hotspot-v-gap: 2%; --hotspot-v-local-extra: 1.5%; }

/* ===== Boot drop-in animation (page load) ===== */
.boot-seq-pre .hotspot:not(.nav-back):not(.replacement),
.boot-seq-pre .social-instagram,
.boot-seq-pre .social-tiktok,
.boot-seq-pre .social-spotify,
.boot-seq-pre .social-login {
  opacity: 0;
  transform: translateY(-36px) scale(0.98);
  pointer-events: none;
}
.boot-seq-play .hotspot:not(.nav-back):not(.replacement),
.boot-seq-play .social-instagram,
.boot-seq-play .social-tiktok,
.boot-seq-play .social-spotify,
.boot-seq-play .social-login {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition: opacity 620ms cubic-bezier(.2,.8,.2,1), transform 620ms cubic-bezier(.2,.8,.2,1);
}
/* léger décalage progressif pour donner un rythme (accueil -> menu -> autres) */
.boot-seq-play .hotspot.accueil { transition-delay: 0ms; }
.boot-seq-play .hotspot.menu { transition-delay: 60ms; }
.boot-seq-play .hotspot.reservation { transition-delay: 110ms; }
.boot-seq-play .hotspot.delivery { transition-delay: 160ms; }
.boot-seq-play .hotspot.apropos { transition-delay: 210ms; }
.boot-seq-play .hotspot.contact { transition-delay: 260ms; }
.boot-seq-play .hotspot.shop { transition-delay: 310ms; }
.boot-seq-play .hotspot.archives { transition-delay: 360ms; }
.boot-seq-play .hotspot.photos { transition-delay: 410ms; }
.boot-seq-play .social-instagram { transition-delay: 440ms; }
.boot-seq-play .social-tiktok { transition-delay: 480ms; }
.boot-seq-play .social-spotify { transition-delay: 520ms; }
.boot-seq-play .social-login { transition-delay: 560ms; }
/* Make sure the always-visible localisation participates in boot-in animation */
.boot-seq-play .hotspot.localisation { transition-delay: 600ms; }

/* Animation when hiding/showing the main hotspot group (accueil sequence)
   - exit: fade out + slide down
   - entry:  fade in  + slide up
   We use opacity + transform so transitions are smooth. */


.hotspot-group-main .hotspot {
  /* override per-element transition for the entry/exit choreography */
  transition: opacity 320ms ease-out, transform 320ms ease-out;
}

/* when we want to play exit animation, add this class to the group */
.hotspot-group-main.play-exit .hotspot {
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  pointer-events: none;
}

/* staggered delays for exit: menu -> reservation -> delivery */
.hotspot-group-main.play-exit .hotspot.menu { transition-delay: 0ms; }
.hotspot-group-main.play-exit .hotspot.reservation { transition-delay: 80ms; }
.hotspot-group-main.play-exit .hotspot.delivery { transition-delay: 160ms; }

/* when we want to play entry animation, add this class; elements start hidden by default */
.hotspot-group-main.play-entry .hotspot {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* start state for entry (we only apply this when preparing an entry animation) */
.hotspot-group-main.pre-entry .hotspot { opacity: 0; transform: translateY(12px) scale(0.98); pointer-events: none; }
.hotspot-group-main.play-entry .hotspot { transition-delay: 0ms; }
.hotspot-group-main.play-entry .hotspot.menu { transition-delay: 0ms; }
.hotspot-group-main.play-entry .hotspot.reservation { transition-delay: 80ms; }
.hotspot-group-main.play-entry .hotspot.delivery { transition-delay: 160ms; }

/* Replacement exit helper: when we want replacements to exit (accueil pressed), add .play-exit */
.hotspot.replacement.play-exit {
  opacity: 0;
  transform: translateX(-50%) translateY(12px);
  pointer-events: none;
}
.hotspot.replacement.play-exit.deliveroo { transition-delay: 0ms; }
.hotspot.replacement.play-exit.ubereats { transition-delay: 80ms; }

/* utility class to disable interactions globally while animating */
.stage.animating { pointer-events: none; }

/* L’image remplit exactement la zone du hotspot */
.hotspot > img {
  position: absolute;
  inset: 0;            
  width: 100%;
  height: 100%;
  object-fit: contain; 
  display: block;
  pointer-events: none; 
  transition: filter 0.3s ease;
}

/* Tes positions en % */
.accueil     { top: 28%;   left: 7.3%;   width: 16%; height: 11%; }
.apropos     { top: 40%;   left: 7.3%;   width: 16%; height: 11%; }
.contact     { top: 52%;   left: 7.3%;   width: 16%; height: 11%; }
.shop        { top: 65%;   left: 7.3%;   width: 16%; height: 11%; }
.archives    { top: 76%;   left: 7.3%;   width: 16%; height: 11%; }
.menu        { top: 30.3%; left: 41.5%; width: 18%; height: 13%; }
.reservation { top: 46.5%;   left: 41.5%; width: 18%; height: 13%; }
.delivery    { top: 62%;   left: 41.5%; width: 18%; height: 13%; }
.photos      { top: 28%;  left: 76%;  width: 17%; height: 13%; }
.localisation { 
  /* Place under Photos, aligned on the right column stack */
  top: 80%;
  left: 76%;
  width: 17%;
  height: 13%;
  border-radius: 16px;
  overflow: hidden;
}
.social-instagram { top: 1.3%; left: 70%; width: 5%; height: 4%; }
.social-tiktok    { top: 0.4%; left: 62%; width: 5.95%; height: 5.95%; }
.social-spotify   { top: 0.75%; left: 77.5%; width: 6%; height: 5%; }
.social-login     { top: 0.75%; left: 85%; width: 6%; height: 5%; }

/* Rectangle de retour au-dessus de Menu (temporaire, encadré rouge) */
.return-rect {
  top: calc(20% - 12% - 1%);
  left: 24%;
  width: 52%;
  height: 17%;
  background: transparent; /* invisible */
  border: none;            /* invisible */
  border-radius: 0;
  box-shadow: none;
  z-index: 3;
  opacity: 0;              /* invisible mais cliquable (pointer-events conservés) */
}
/* Toujours actif (cliquable) même en sous-menus */

/* Bouton retour (flèche) entre Accueil (gauche) et Menu (droite) */
.nav-back {
  position: absolute;
  top: 30.3%;
  /* placer entre .accueil (left 7.3%, width 16%) et .menu (left 41.5%) */
  left: 29%;
  width: 7.6%;
  height: 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.82);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(0,0,0,.22), 0 1px 0 rgba(255,255,255,.6) inset;
  padding: 0;
  cursor: pointer;
  z-index: 6;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  pointer-events: none;
  transition: opacity 320ms ease, transform 320ms ease, filter .3s ease, box-shadow .3s ease;
}
.nav-back svg {
  width: 68%;
  height: 68%;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.25));
  /* Le dessin interne est légèrement décalé vers la droite dans le viewBox (centre ≈ x=14),
     on compense d'environ 2/24 = 8.33% de sa largeur pour un centrage visuel parfait */
  transform: translateX(-8.5%);
}
.nav-back:hover {
  transform: translateY(0) scale(1.06);
  filter: brightness(1.06) saturate(1.06);
  box-shadow: 0 10px 28px rgba(0,0,0,.26), 0 1px 0 rgba(255,255,255,.65) inset;
}
.nav-back:focus-visible {
  outline: 3px solid rgba(10,101,212,.6);
  outline-offset: 2px;
}

/* Visible uniquement quand un sous-menu est ouvert */
.stage.lang-show .nav-back,
.stage.replacement-show .nav-back {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Style spécifique pour différencier (optionnel: halo + léger scale hover) */
/* Instagram, TikTok & Spotify: no shadow */
.social-instagram > img,
.social-tiktok > img,
.social-spotify > img { object-fit: contain; transition: transform .25s ease; filter: none; }
/* Login: keep subtle shadow */
.social-login > img { object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,.25)); transition: transform .25s ease, filter .25s ease; }
.social-instagram:hover > img,
.social-tiktok:hover > img,
.social-spotify:hover > img { transform: scale(1.06); filter: none; }
.social-login:hover > img { transform: scale(1.06); filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)); }

/* Assurer que l'image de login remplit bien la zone du hotspot */
.hotspot.social-login > img { position:absolute; inset:0; width:100%; height:100%; object-fit: contain; }
/* Encadrement du bouton de connexion (supprimé) */
.hotspot.social-login { box-sizing: border-box; border: none; }

/* Groupe langues (réutilise positions menu & reservation) */
.hotspot-group-lang.hidden { display: none; }
.hotspot-group-lang .hotspot { transition: opacity 300ms ease-out, transform 300ms ease-out; }
.hotspot-group-lang.pre-entry .hotspot { opacity: 0; transform: translateX(40px); pointer-events: none; }
.hotspot-group-lang.play-entry .hotspot { opacity: 1; transform: translateX(0); pointer-events: auto; }
.hotspot-group-lang.play-exit .hotspot { opacity: 0; transform: translateX(40px); pointer-events: none; }
.hotspot-group-lang.play-entry .hotspot.lang-fr { transition-delay: 0ms; }
.hotspot-group-lang.play-entry .hotspot.lang-en { transition-delay: 80ms; }
.hotspot-group-lang.play-exit .hotspot.lang-fr { transition-delay: 0ms; }
.hotspot-group-lang.play-exit .hotspot.lang-en { transition-delay: 80ms; }

/* Positionner les drapeaux exactement aux places de menu & reservation */
.hotspot.lang-fr { top: 31%; left: 41.5%; width: 18%; height: 13%; }
.hotspot.lang-en { top: 47%;   left: 41.5%; width: 18%; height: 13%; }

/* Sécurité : si la classe lang-show est posée sur .stage, on force l'affichage du groupe langues */
.stage.lang-show .hotspot-group-lang { display: block; }

/* ===== Effet hover Ukiyo (zoom sur le conteneur) ===== */
.hotspot:hover {
  transform: scale(1.06); /* zoom léger du bloc entier */
  filter: brightness(1.12) saturate(1.08); /* petit peps couleur */
}

/* Ensure the hotspot-group-main hides when showing replacement (kept for safety) */
.hotspot-group-main.hidden { display: none; }

/* Replacement hotspots (hidden by default). Use visibility/opacity so transitions can run */
.hotspot.replacement {
  opacity: 0;
  pointer-events: none;
  /* start centered horizontally (use -50% to center by width) and slightly shifted down */
  transform: translateX(-50%) translateY(8px);
  transition: opacity 300ms ease, transform 300ms ease;
  will-change: opacity, transform;
}
.stage.replacement-show .hotspot.replacement {
  opacity: 1;
  pointer-events: auto;
  /* target: centered horizontally and in-place vertically */
  transform: translateX(-50%) translateY(0);
}

/* Stagger: deliveroo first, ubereats delayed */
.stage.replacement-show .hotspot.replacement.deliveroo { transition-delay: 0ms; }
.stage.replacement-show .hotspot.replacement.ubereats { transition-delay: 80ms; }
.stage.replacement-show .hotspot.replacement.localisation { transition-delay: 160ms; }

/* Deliveroo & UberEats: same center X, same size as hotspots, UberEats below Deliveroo */
.hotspot.replacement.deliveroo {
  z-index: 4;
  /* center X aligned with .menu: left = menu.left + menu.width/2 */
  left: calc(41.5% + 9%);
  top: 30.5%; /* same top as .menu */
  width: 18%;
  height: 13%;
  transform-origin: center;
  /* initial transform is defined on .hotspot.replacement */
}

.hotspot.replacement.ubereats {
  z-index: 3;
  /* same center X */
  left: calc(41.5% + 9%);
  /* position below deliveroo with a 16px gap */
  top: calc(31.5% + 13% + var(--hotspot-v-gap));
  width: 18%;
  height: 13%;
  transform-origin: center;
}

.hotspot.replacement.localisation {
  z-index: 2;
  /* same center X */
  left: calc(41.5% + 9%);
  /* position below ubereats with the same gap as deliveroo->ubereats (16px desktop) */
  top: calc(31.5% + 13% + var(--hotspot-v-gap) + 13% + var(--hotspot-v-gap) + var(--hotspot-v-local-extra));
  width: 18%;
  height: 13%;
  transform-origin: center;
  /* rounded corners for localisation image */
  border-radius: 16px;
  overflow: hidden;
}

.stage.replacement-show .hotspot.replacement.localisation { transform: translateX(-50%) translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }

.stage.replacement-show .hotspot.replacement.play-exit.localisation { transition-delay: 160ms; }

/* When showing, animate translateY to 0 so elements slide into place */
.stage.replacement-show .hotspot.replacement.deliveroo { transform: translateX(-50%) translateY(0); }
.stage.replacement-show .hotspot.replacement.ubereats { transform: translateX(-50%) translateY(0); }

/* Ensure play-exit takes precedence even if .replacement-show is present on the parent.
   This avoids a situation where the 'shown' rule overrides the exit state and nothing moves. */
.hotspot.replacement.play-exit,
.stage.replacement-show .hotspot.replacement.play-exit {
  opacity: 0;
  transform: translateX(-50%) translateY(12px);
  pointer-events: none;
}
.stage.replacement-show .hotspot.replacement.play-exit.deliveroo { transition-delay: 0ms; }
.stage.replacement-show .hotspot.replacement.play-exit.ubereats { transition-delay: 80ms; }

/* Mobile: reduce vertical gap proportionally to avoid crowding and add a bit more extra offset for localisation */
@media (max-width: 480px) {
  :root { --hotspot-v-gap: 1.25%; --hotspot-v-local-extra: 2%; }
  .hotspot.replacement.ubereats {
    top: calc(31.5% + 13% + var(--hotspot-v-gap));
  }
  .hotspot.replacement.localisation {
    top: calc(31.5% + 13% + var(--hotspot-v-gap) + 13% + var(--hotspot-v-gap) + var(--hotspot-v-local-extra));
  }
}