/* Vitrine 3D : styles limités à .vitrine-3d. Panneau toujours sombre (studio), quel que soit le thème de la page. */
.vitrine-3d {
  --v3-fond: #0c1f12;
  --v3-fond-2: #142a1b;
  --v3-texte: #eef3ec;
  --v3-texte-2: #b9c6b6;
  --v3-trait: rgba(238, 243, 236, .16);
  --v3-trait-fort: rgba(238, 243, 236, .32);
  --v3-verre: rgba(12, 31, 18, .62);
  --v3-laiton: #d6ad66;
  --v3-vert: #3cc35a;
  --v3-sur-vert: #0b1a0f;
  --v3-halo: #24432d;
  --v3-halo-2: #15301d;
  position: relative;
  color: var(--v3-texte);
  background: var(--v3-fond);
  border: 1px solid var(--v3-trait);
  border-radius: var(--rayon, 10px);
  overflow: hidden;
}
.vitrine-3d *, .vitrine-3d *::before, .vitrine-3d *::after { box-sizing: border-box; }
.vitrine-3d [hidden] { display: none !important; }
.vitrine-3d :focus-visible { outline: 3px solid var(--v3-vert); outline-offset: 2px; }

/* scène : même taille avant et après le chargement (pas de saut de page) */
.vitrine-3d__scene { position: relative; aspect-ratio: 16 / 9; width: 100%; background: radial-gradient(ellipse at 50% 42%, var(--v3-halo) 0%, var(--v3-halo-2) 42%, var(--v3-fond) 78%); touch-action: pan-y; user-select: none; -webkit-user-select: none; outline: none; }
.vitrine-3d__scene:focus-visible { outline: 3px solid var(--v3-vert); outline-offset: -3px; }
.vitrine-3d__affiche, .vitrine-3d__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vitrine-3d__affiche { object-fit: cover; transition: opacity .6s ease; }
.vitrine-3d.is-3d .vitrine-3d__affiche { opacity: 0; pointer-events: none; }
.vitrine-3d__canvas { cursor: grab; }
.vitrine-3d__canvas:active { cursor: grabbing; }

.vitrine-3d__legende {
  position: absolute; left: clamp(12px, 3vw, 28px); bottom: clamp(12px, 3vw, 26px); max-width: min(30rem, calc(100% - 120px));
  padding: .7rem .95rem .75rem; border-left: 2px solid var(--v3-laiton); background: var(--v3-verre);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 0 8px 8px 0; transition: opacity .26s ease, transform .26s ease;
}
.vitrine-3d.is-change .vitrine-3d__legende { opacity: 0; transform: translateY(6px); }
.vitrine-3d__legende p { margin: 0; }
.vitrine-3d__cat { font: 600 var(--t-xs, .8125rem)/1.3 var(--f-cote, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--v3-laiton); }
.vitrine-3d__nom { font: 700 var(--t-l, 1.3rem)/1.2 var(--f-titre, sans-serif); color: var(--v3-texte); margin-top: .15rem !important; }
.vitrine-3d__taille { font: 500 var(--t-xs, .8125rem)/1.4 var(--f-cote, monospace); color: var(--v3-texte-2); margin-top: .2rem !important; }
.vitrine-3d__phrase { font-size: var(--t-s, .9375rem); line-height: 1.45; color: var(--v3-texte-2); margin-top: .15rem !important; }

.vitrine-3d__fleche {
  position: absolute; top: 50%; transform: translateY(-50%); display: none; place-items: center; width: 46px; height: 46px;
  border: 1px solid var(--v3-trait-fort); border-radius: 50%; background: var(--v3-verre); color: var(--v3-texte); cursor: pointer;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.vitrine-3d__fleche:hover { border-color: var(--v3-laiton); color: var(--v3-laiton); }
.vitrine-3d__fleche--prec { left: 12px; }
.vitrine-3d__fleche--suiv { right: 12px; }
.vitrine-3d.is-3d-possible .vitrine-3d__fleche { display: grid; }

.vitrine-3d__attente {
  position: absolute; right: 14px; top: 14px; display: inline-flex; align-items: center; gap: .5rem; margin: 0;
  padding: .4rem .75rem; border-radius: 999px; background: var(--v3-verre); color: var(--v3-texte-2); font: 500 var(--t-xs, .8125rem)/1 var(--f-texte, sans-serif);
}
.vitrine-3d__roue { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--v3-trait-fort); border-top-color: var(--v3-vert); animation: v3-tourne .9s linear infinite; }
@keyframes v3-tourne { to { transform: rotate(1turn); } }

/* bas : liste des pièces (boutons) et actions */
.vitrine-3d__bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1rem; padding: .9rem clamp(12px, 2.4vw, 22px) 1rem; border-top: 1px solid var(--v3-trait); }
.vitrine-3d__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; flex: 1 1 32rem; min-width: 0; font-size: var(--t-s, .9375rem); color: var(--v3-texte-2); }
.vitrine-3d__liste li { margin: 0; }
/* avant le script (ou sans) : mêmes dimensions que les boutons qui les remplacent, pas de saut de page */
.vitrine-3d:not([data-v3-pret]) .vitrine-3d__liste li { display: inline-flex; align-items: center; min-height: 40px; padding: .45rem .8rem; border: 1px solid var(--v3-trait); border-radius: 999px; font: 600 var(--t-xs, .8125rem)/1.15 var(--f-texte, sans-serif); }
.vitrine-3d__puce {
  min-height: 40px; padding: .45rem .8rem; border: 1px solid var(--v3-trait); border-radius: 999px; background: transparent;
  color: var(--v3-texte-2); font: 600 var(--t-xs, .8125rem)/1.15 var(--f-texte, sans-serif); cursor: pointer; text-align: left;
}
.vitrine-3d__puce:hover { border-color: var(--v3-trait-fort); color: var(--v3-texte); }
.vitrine-3d__puce[aria-current="true"] { border-color: var(--v3-laiton); color: var(--v3-fond); background: var(--v3-laiton); }
.vitrine-3d.is-sans-3d .vitrine-3d__puce { cursor: default; }
.vitrine-3d__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.vitrine-3d__pause {
  display: none; align-items: center; gap: .45rem; min-height: 44px; padding: .5rem .9rem; border: 1px solid var(--v3-trait-fort); border-radius: 999px;
  background: transparent; color: var(--v3-texte); font: 600 var(--t-xs, .8125rem)/1 var(--f-texte, sans-serif); cursor: pointer;
}
.vitrine-3d[data-v3-pret]:not(.is-sans-3d) .vitrine-3d__pause { display: inline-flex; visibility: hidden; }
.vitrine-3d.is-3d .vitrine-3d__pause { visibility: visible; }
.vitrine-3d__pause .vitrine-3d__ico-lecture, .vitrine-3d__pause[aria-pressed="true"] .vitrine-3d__ico-pause { display: none; }
.vitrine-3d__pause[aria-pressed="true"] .vitrine-3d__ico-lecture { display: inline; }
.vitrine-3d .vitrine-3d__essayer { background: var(--v3-vert); color: var(--v3-sur-vert); min-height: 44px; }

@media (max-width: 640px) {
  .vitrine-3d__scene { aspect-ratio: 4 / 5; }
  .vitrine-3d__legende { right: 12px; max-width: none; padding: .55rem .75rem .6rem; }
  .vitrine-3d__nom { font-size: 1.12rem; }
  .vitrine-3d__fleche { top: 40%; width: 44px; height: 44px; }
  .vitrine-3d__liste { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: .2rem; -webkit-overflow-scrolling: touch; }
  .vitrine-3d__liste::-webkit-scrollbar { display: none; }
  .vitrine-3d__puce { white-space: nowrap; }
  .vitrine-3d__actions { width: 100%; }
  .vitrine-3d .vitrine-3d__essayer { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .vitrine-3d__roue { animation: none; }
  .vitrine-3d__legende, .vitrine-3d__affiche { transition: none; }
}