/* Produits 3D locaux : place réservée, image conservée quand le rendu manque. */
.vegalia-product__display:has(.pot-3d)::before { content: none; }
.pot-3d { --pot-focus: var(--heading); position: relative; max-width: 17.5rem; margin-inline: auto; }
.pot-3d [hidden] { display: none !important; }
.pot-3d__home, .pot-3d__stage { aspect-ratio: 1; width: 100%; }
.pot-3d__stage { position: relative; }
.pot-3d__poster { display: block; }
.pot-3d__stage canvas {
  display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y pinch-zoom;
  border-radius: 1rem;
}
.pot-3d__stage canvas:active { cursor: grabbing; }
.pot-3d__stage canvas:focus-visible, .pot-3d button:focus-visible {
  outline: 3px solid var(--pot-focus); outline-offset: 3px;
}
.pot-3d__stage canvas:focus-visible { outline-offset: -3px; }
.pot-3d__hint, .pot-3d__status {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.pot-3d__close {
  flex-shrink: 0; font: inherit; font-size: 0.8125rem; line-height: 1.3; color: var(--heading);
  min-height: 48px; min-width: 48px; padding: 0.5rem 0.7rem;
  background: var(--bg); border: 1px solid var(--heading); border-radius: 0.7rem; cursor: pointer;
}
.pot-3d__close:hover { background: var(--bg-bleu); }
.pot-3d__dialog {
  position: fixed; inset: 0; margin: auto; padding: 0;
  width: min(56rem, calc(100vw - 2rem)); max-width: none;
  max-height: calc(100dvh - 2rem); color: var(--heading); background: var(--bg);
  border: 1px solid var(--heading); border-radius: 1.25rem; overflow: auto;
  overscroll-behavior: contain;
}
.pot-3d__dialog::backdrop { background: rgb(26 29 31 / 65%); }
.pot-3d__dialog-content { padding: clamp(0.85rem, 3vw, 1.5rem); }
.pot-3d__dialog-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.pot-3d__dialog-header h2 { text-align: left; font-size: clamp(1.1rem, 3vw, 1.5rem); }
.pot-3d__large { height: clamp(12rem, 62dvh, 39rem); margin-block: 0.5rem; background: radial-gradient(ellipse, var(--bg-bleu), transparent 68%); }
.pot-3d[data-product="spiruline"] .pot-3d__large { background: radial-gradient(ellipse, var(--bg-menthe), transparent 68%); }
.pot-3d__large .pot-3d__stage { height: 100%; aspect-ratio: auto; }
.pot-3d__large canvas { touch-action: none; }
html:has(.pot-3d__dialog[open]) { overflow: hidden; }
@media (max-width: 35.99em) {
  .pot-3d__dialog { width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); }
}

/* Accueil : même viewer, dans la place réservée au produit de la sélection. */
.vegalia-teaser__pot { flex: 0 0 auto; width: min(36vw, 8rem); margin-bottom: 0; padding-bottom: 0.85rem; }
.vegalia-teaser__pot::after { left: 12%; right: 12%; height: 0.65rem; bottom: 0.2rem; box-shadow: 0 0.2rem 0 color-mix(in srgb, var(--bg-bleu), var(--heading) 12%); }
.vegalia-teaser__pot--menthe::after { background: var(--bg-menthe); box-shadow: 0 0.2rem 0 color-mix(in srgb, var(--bg-menthe), var(--heading) 12%); }
.vegalia-teaser__pot .pot-3d__poster { width: 100%; max-width: none; }
@media (min-width: 36em) {
  .vegalia-teaser__pot { width: 50%; max-width: 9rem; }
}

/* Ouverture volontaire, uniquement dans la vue agrandie. */
.pot-3d__opening { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.4rem 1rem; }
.pot-3d__open {
  min-height: 48px; padding: 0.7rem 1.15rem; font: inherit; font-weight: 600;
  color: var(--btn-text); background: var(--btn-bg); border: 2px solid var(--accent);
  border-radius: 0.75rem; cursor: pointer;
}
.pot-3d__open:hover { background: var(--color-charbon); }
.pot-3d__open:disabled { opacity: 0.75; cursor: wait; }
.pot-3d__opening p { margin: 0; font-size: 0.8125rem; line-height: 1.5; }
.pot-3d__effect-status { flex-basis: 100%; min-height: 1.5em; text-align: center; }
.pot-3d__large { height: clamp(12rem, 54dvh, 35rem); }
.pot-3d[data-effect="loading"] canvas,
.pot-3d[data-effect="opening"] canvas,
.pot-3d[data-effect="tilting"] canvas,
.pot-3d[data-effect="pouring"] canvas,
.pot-3d[data-effect="returning"] canvas { cursor: default; }
