.mp-prod-photo-stage>.product-3d{position:absolute;inset:0;z-index:1;width:100%;height:100%;overflow:hidden;background:transparent;text-align:center}
.product-3d:not([data-ready="true"]) .product-3d-controls{display:none}
.product-3d-stage{position:absolute;inset:0;display:grid;place-items:center;background:transparent}
.product-3d-stage canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}
.product-3d-stage canvas:active{cursor:grabbing}
.product-3d-stage canvas:focus-visible{outline:2px solid var(--rouge);outline-offset:-3px}
.product-3d-controls{position:absolute;z-index:2;left:12px;right:12px;bottom:10px;display:flex;justify-content:center;align-items:center;gap:4px 8px;flex-wrap:wrap;pointer-events:none}
.product-3d-controls button{pointer-events:auto;font:inherit;font-size:.78rem;color:var(--ink);background:color-mix(in srgb,var(--paper) 92%,transparent);border:1px solid var(--ink-15);border-radius:999px;padding:7px 11px;min-height:40px;cursor:pointer;box-shadow:0 3px 14px rgba(35,27,22,.08)}
.product-3d-controls button:focus-visible{outline:2px solid var(--rouge);outline-offset:2px}
.product-3d-controls p{flex-basis:100%;font-size:.72rem;line-height:1.35;color:var(--ink-70);margin:0;text-shadow:0 1px 8px var(--paper),0 1px 3px var(--paper)}
@media (max-width:520px){.product-3d-controls{left:6px;right:6px;bottom:6px;gap:4px}.product-3d-controls button{font-size:.72rem;padding:6px 9px}.product-3d-controls p{display:none}}

/* Manual model carousel: navigation stays below the interactive object. */
.mp-prod-photo-stage[data-3d-carousel]>.product-3d{bottom:68px;height:calc(100% - 68px)}
.product-3d[hidden],.product-3d-carousel-nav[hidden]{display:none}
.product-3d-carousel-nav{position:absolute;z-index:2;background:var(--paper);inset:auto 0 0 110px;min-height:68px;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:12px;padding:8px 4px;border-top:1px solid var(--ink-15);color:var(--ink)}
.product-3d-carousel-arrow{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--ink-15);border-radius:50%;background:transparent;color:inherit;font:inherit;font-size:1.35rem;cursor:pointer;transition:background .2s,border-color .2s}
.product-3d-carousel-arrow:hover{background:var(--paper);border-color:var(--ink)}
.product-3d-carousel-arrow:focus-visible{outline:2px solid var(--rouge);outline-offset:3px}
.product-3d-carousel-caption{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;text-align:center;font-size:.82rem;font-weight:600;line-height:1.3}
.product-3d-carousel-count{font-size:.7rem;font-weight:400;letter-spacing:.12em;color:var(--ink-70);font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){.product-3d-carousel-arrow{transition:none}}

/* Photo dimensions, original gallery and CTA placement stay unchanged. */
.mp-prod-photo-stage>.product-3d{background:var(--paper)}
/* Sans JavaScript (ou navigateur sans modules), la photo reste seule : la zone 3D n'existe pas à l'écran. */
html:not(.product-3d-js) .mp-prod-photo-stage>.product-3d{visibility:hidden}
/* Dès le premier rendu, la zone 3D couvre la photo avec son texte d'attente : aucune image
   n'apparaît puis ne disparaît pendant le chargement. La photo ne revient que sur échec. */
html.product-3d-js .mp-prod-photo-stage[data-media="3d"]:has(.product-3d:not([hidden]):not([data-error="true"])) #prodPhoto{visibility:hidden;transition:none}
.product-3d:not([data-ready="true"]):not([data-error="true"]) .product-3d-stage{font-size:.85rem;color:var(--ink-70)}
.mp-prod-photo-stage[data-media="photo"]>.product-3d,
.mp-prod-photo-stage[data-media="photo"]>.product-3d-carousel-nav{display:none}
/* Le modèle prêt apparaît en fondu ; le canevas est inséré et marqué prêt dans le même temps,
   seule une animation (pas une transition) part donc de l'état invisible. */
.product-3d[data-ready="true"] .product-3d-stage canvas{animation:product-3d-reveal .35s ease-out}
@keyframes product-3d-reveal{from{opacity:0}}
@media(prefers-reduced-motion:reduce){.product-3d[data-ready="true"] .product-3d-stage canvas{animation:none}}
.mp-prod-photo-stage .product-3d-controls{left:100px;right:8px}
.mp-prod-photo-stage[data-3d-carousel] .product-3d-controls{left:8px}
.mp-prod-thumb--3d{display:grid;place-items:center;font-family:inherit;font-size:16px;font-weight:600;color:var(--ink);background:var(--paper-deep)}
.mp-prod-photo-stage>.product-3d[data-error="true"]{background:transparent;pointer-events:none}
.product-3d[data-error="true"] .product-3d-stage{inset:auto 12px 12px;background:var(--paper);padding:8px;font-size:.8rem}