/* ===== CIRCLE MENU radial (chrome) — bouton rond en haut à droite, icônes en arc =====
   Partagé par toutes les pages. Interaction + page active : nav-menu.js. */
#main-nav { display: none !important; }  /* masque l'ancienne navbar blanche */

/* scrim : assombrit (+ floute sur mobile) le fond quand le menu est ouvert */
#veo-cm-scrim { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 8999; opacity: 0; pointer-events: none;
  background: radial-gradient(130% 95% at 88% 6%, rgba(0,0,0,.5), rgba(0,0,0,.2) 52%, transparent 78%);
  visibility: hidden;                                   /* ABSOLUTE (surtout PAS fixed) sur toute la hauteur de page → aucun fantôme "carré" iOS (même astuce que #veo-twinkle). Hauteur réelle posée en JS à l'ouverture. Fermé = hors rendu. */
  transition: opacity .35s ease, visibility 0s .35s; }
#veo-cm-scrim.show { opacity: 1; pointer-events: auto; visibility: visible; transition: opacity .35s ease, visibility 0s; }

#veo-cm { position: fixed; top: 18px; right: 18px; z-index: 9000; width: 60px; height: 60px;
  font-family: 'Inter', sans-serif; }

/* bouton nu : juste l'icône chrome (hamburger -> croix), pas de fond ni de rond */
#veo-cm-trigger { position: relative; z-index: 3; width: 60px; height: 60px; border: none; padding: 0;
  background: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1); }
#veo-cm-trigger:hover  { transform: scale(1.08); }
#veo-cm-trigger:active { transform: scale(.92); }
#veo-cm-trigger img { position: absolute; width: 48px; height: 48px; object-fit: contain; pointer-events: none;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.6));
  transition: opacity .26s ease, transform .34s cubic-bezier(.34,1.56,.64,1); }
.cm-ico-close { opacity: 0; transform: scale(.55) rotate(-30deg); }
#veo-cm.open .cm-ico-menu  { opacity: 0; transform: scale(.55) rotate(30deg); }
#veo-cm.open .cm-ico-close { opacity: 1; transform: scale(1) rotate(0); }

/* items nus : icône chrome qui flotte ; projetée en (--dx,--dy) à l'ouverture */
.cm-item { position: absolute; top: 3px; left: 3px; width: 54px; height: 54px; z-index: 2;
  display: flex; align-items: center; justify-content: center; text-decoration: none; color: #fff;
  opacity: 0; pointer-events: none; transform: translate(0,0) scale(.4);
  transition: transform .5s cubic-bezier(.34,1.42,.5,1), opacity .32s ease; }
#veo-cm.open .cm-item { opacity: 1; pointer-events: auto; transform: translate(var(--dx,0), var(--dy,0)) scale(1); }
.cm-item:focus-visible { outline: 2px solid rgba(255,255,255,.6); outline-offset: 3px; border-radius: 10px; }
.cm-item img { width: 54px; height: 54px; object-fit: contain; pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); transition: transform .18s ease; }
.cm-item:hover img { transform: scale(1.12); }
/* icônes SVG inline (ex: Resto) : mêmes dimensions/effets que les PNG chrome */
.cm-item svg.cm-ico { width: 50px; height: 50px; pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); transition: transform .18s ease; }
.cm-item:hover svg.cm-ico { transform: scale(1.12); }
.cm-item.active svg.cm-ico { filter: drop-shadow(0 0 7px rgba(255,255,255,.6)) drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
/* page active : léger halo blanc sur l'icône + label en gras */
.cm-item.active img { filter: drop-shadow(0 0 7px rgba(255,255,255,.6)) drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.cm-item.active .cm-label { font-weight: 700; opacity: 1; }
.cm-label { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 6px;
  font-size: 12px; font-weight: 500; letter-spacing: .3px; color: #fff; white-space: nowrap;
  text-shadow: 0 1px 5px rgba(0,0,0,.85); opacity: 0; transition: opacity .2s ease .12s; }
#veo-cm.open .cm-item .cm-label { opacity: .9; }

@media (max-width:767px) {
  #veo-cm { top: 14px; right: 14px; }
  /* mobile : fond foncé OPAQUE (SURTOUT PAS de backdrop-filter → le flou sur élément fixe = "carré" fantôme Safari iOS). Icônes chrome ressortent nettes. */
  #veo-cm-scrim.show { background: rgba(5,5,8,.94); }
}
@media (min-width:768px) {
  #veo-cm { width: 80px; height: 80px; top: 22px; right: 22px; }
  #veo-cm-trigger { width: 80px; height: 80px; }
  #veo-cm-trigger img { width: 64px; height: 64px; }
  .cm-item { top: 6px; left: 6px; width: 68px; height: 68px; }
  .cm-item img { width: 68px; height: 68px; }
  .cm-item svg.cm-ico { width: 62px; height: 62px; }
}
@media (prefers-reduced-motion: reduce) {
  .cm-item, #veo-cm-trigger img, #veo-cm-scrim { transition: none !important; }
  #veo-cm-trigger { animation: none !important; }
}