/* ============================================================
   VueCuisine — vue inventaire cuisine interactive
   ============================================================ */
.vc-scene {
  flex: 1;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-primary-soft);
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.vc-svg-wrap { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.vc-outils { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 6px; }
.vc-outils button { min-height: 44px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--sage-deep); font: inherit; font-size: .85rem; cursor: pointer; }
.vc-meuble-actions { position: absolute; top: 1rem; left: 1rem; right: 1rem; display: flex; flex-wrap: wrap; gap: 8px; }
.vc-meuble-actions .vc-retour { position: static; min-height: 44px; }
.vc-hotspot:focus-visible { outline: none; fill: color-mix(in srgb, var(--color-apple) 28%, transparent); stroke: var(--color-focus); stroke-width: 6px; }
.vc-panneau-liste li.vc-inventory-item { display: block; }
.vc-hotspot { fill: transparent; cursor: pointer; transition: fill 150ms; }
.vc-hotspot:hover  { fill: color-mix(in srgb, var(--color-primary) 16%, transparent); }
.vc-hotspot:active { fill: color-mix(in srgb, var(--color-primary) 30%, transparent); }
.vc-zone { fill: transparent; cursor: pointer; transition: fill 150ms ease-out; }
.vc-zone:hover  { fill: color-mix(in srgb, var(--color-primary) 14%, transparent); }
.vc-zone.vc-sel { fill: color-mix(in srgb, var(--color-primary) 24%, transparent); }
.vc-zone:focus-visible { outline: none; fill: color-mix(in srgb, var(--color-focus) 18%, transparent); }
.vc-etiq {
  font-size: 34px; font-weight: 500; fill: var(--ink);
  dominant-baseline: middle; pointer-events: none;
  paint-order: stroke; stroke: var(--paper); stroke-width: 5px; stroke-linejoin: round;
}
.vc-retour {
  position: absolute; top: 1rem; left: 1rem;
  border: 0; border-radius: 999px;
  background: var(--paper); color: var(--sage-deep);
  font: inherit; font-size: .85rem; padding: .5rem 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.16); cursor: pointer;
}
.vc-panneau {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--paper);
  border-top: 3px solid var(--sage-deep);
  border-radius: 22px 22px 0 0;
  padding: 1rem 1.25rem 2rem;
  transform: translateY(105%);
  transition: transform 260ms cubic-bezier(.2,.8,.3,1);
  max-height: 60dvh; overflow-y: auto; z-index: 150;
}
.vc-panneau--visible { transform: translateY(0); }
.vc-panneau-tete {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; border-bottom: 2px solid var(--sage-deep); padding-bottom: .5rem;
}
.vc-panneau-tete h2 { margin: 0; font-size: 1.1rem; font-weight: 600; }
.vc-panneau-tete button {
  border: 0; background: none; font: inherit; font-size: .85rem;
  color: var(--sage-deep); cursor: pointer; padding: .3rem;
}
.vc-panneau-liste { list-style: none; margin-top: .7rem; padding: 0; }
.vc-panneau-liste li {
  display: flex; align-items: center; gap: .55rem;
  padding: .55rem 0; border-bottom: 1px solid var(--line); font-size: .95rem;
}
.vc-panneau-liste li:last-child { border-bottom: 0; }
.vc-qte { margin-left: auto; opacity: .5; font-variant-numeric: tabular-nums; }
.vc-tag {
  font-size: .67rem; letter-spacing: .06em; text-transform: uppercase;
  border: 1.5px solid currentColor; border-radius: 999px; padding: .1rem .5rem;
}
.vc-tag--dlc  { color: var(--dlc-bientot-fg); }
.vc-tag--seul { color: var(--sage-deep); }
.vc-vide { opacity: .45; font-style: italic; padding: .9rem 0; border-bottom: 0 !important; }
.vc-item-btn {
  border: none; background: none; font-size: 1.2rem;
  cursor: pointer; padding: 0 .25rem; color: var(--sage-deep); flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) { .vc-scene *, .vc-panneau { transition: none !important; } }