/* showcase.css  v4  (MBS) — Three.js Showcase (vignettes + scene)
   Handle d'asset propre (mod_threejs_mbs.showcase), meme convention que helix.css. */

.mbs-showcase {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    width: 100%;
    outline: none;
}

/* ── Panneau de vignettes ───────────────────────────────────────────────────
   Masque par defaut ; il apparait au palier choisi via la classe --bp-*.
   Une media query ne peut pas lire une variable CSS : d'ou une classe par palier
   plutot qu'une valeur dynamique. */
.mbs-showcase-side {
    display: none;
    flex: 0 0 var(--sc-thumbs-w, 350px);
    width: var(--sc-thumbs-w, 350px);
    flex-direction: column;
    gap: 8px;
}
.mbs-showcase-thumbs {
    display: flex;
    width: 100%;
    max-height: var(--sc-stage-h, 70vh);
    overflow-y: auto;
    overflow-x: hidden;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 8px;
    scrollbar-width: thin;
}
@media (min-width: 640px)  { .mbs-showcase--bp-s .mbs-showcase-side { display: flex; } }
@media (min-width: 960px)  { .mbs-showcase--bp-m .mbs-showcase-side { display: flex; } }
@media (min-width: 1200px) { .mbs-showcase--bp-l .mbs-showcase-side { display: flex; } }

.mbs-showcase--thumbs-right { flex-direction: row-reverse; }

/* ── Vignette ───────────────────────────────────────────────────────────────
   Le bouton porte la perspective, l'element interne tourne : sans ce couple
   parent/enfant, la rotation 3D n'a pas de point de fuite et parait plate. */
.mbs-showcase-thumb {
    flex: 0 0 auto;
    width:  var(--sc-thumb, 70px);
    height: var(--sc-thumb, 70px);
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    perspective: 600px;
    transition: transform .45s cubic-bezier(.2,.8,.25,1), opacity .45s;
}
.mbs-showcase-thumb-inner {
    display: block;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform .7s cubic-bezier(.2,.8,.25,1);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.mbs-showcase-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* la vignette peut rogner : c'est un reperage */
    display: block;
    pointer-events: none;
}

/* Survol : tour complet horizontal */
/* Le flip est une ANIMATION jouee une fois a l'arrivee de la souris, pas une
   transition d'etat : un etat repartirait EN SENS INVERSE au depart de la souris,
   ce qui donnait l'impression qu'une deuxieme vignette tournait. */
@keyframes mbs-thumb-spin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
.mbs-showcase-thumb-inner.is-spin { animation: mbs-thumb-spin .7s cubic-bezier(.2,.8,.25,1); }
.mbs-showcase-thumb.is-fx-zoom.is-hover .mbs-showcase-thumb-inner { transform: scale(1.14); }
/* la vignette en rotation passe au-dessus de ses voisines */
.mbs-showcase-thumb { position: relative; z-index: 1; }
.mbs-showcase-thumb.is-hover { z-index: 3; }

.mbs-showcase-thumb.is-active .mbs-showcase-thumb-inner {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Entree en cascade : part petit, grossit */
.mbs-showcase-thumb.is-enter { transform: scale(.6); opacity: 0; }

/* ── Scene ──────────────────────────────────────────────────────────────────
   object-fit: contain — une photo PORTRAIT est vue entiere, jamais rognee.
   C'est la difference avec le slider natif.

   PAS d'overflow:hidden sur la scene : overflow est une propriete "groupante", elle
   APLATIT transform-style: preserve-3d. Avec elle, backface-visibility ne masquait
   plus rien et on voyait la photo precedente autour d'une photo portrait. */
.mbs-showcase-main {
    flex: 1 1 auto;
    min-width: 0;
}
.mbs-showcase-stage {
    position: relative;
    width: 100%;
    height: var(--sc-stage-h, 70vh);
    perspective: 1400px;
    transform-style: preserve-3d;
}
.mbs-showcase-flipper {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
}

/* ── Une seule photo visible a la fois ──────────────────────────────────────
   visibility ET opacity : une face non visible est retiree du rendu, pas seulement
   transparente. C'est ce qui rend la superposition impossible. */
.mbs-showcase-face {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.mbs-showcase-face.is-visible { opacity: 1; visibility: visible; }
.mbs-showcase-face img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    user-select: none;
}

/* Transitions actives seulement pendant un changement, sur des demi-durees */
.mbs-showcase-stage.is-phase .mbs-showcase-face {
    transition: transform var(--sc-half, 400ms) cubic-bezier(.45,.05,.55,1),
                opacity   var(--sc-half, 400ms) ease;
}
/* Pose d'un etat de depart sans l'animer (technique FLIP) */
.mbs-showcase-face.is-notrans { transition: none !important; }

/* ── Transitions ────────────────────────────────────────────────────────────
   Deux temps : .is-leaving = etat d'ARRIVEE de la sortie,
                .is-entering = etat de DEPART de l'entree.
   Au repos une face n'a aucune transformation. */

/* card : demi-tour continu. Aucune opacite : a la tranche on voit le fond de page. */
.is-card  .mbs-showcase-face.is-leaving  { transform: rotateY(90deg); }
.is-card  .mbs-showcase-face.is-entering { transform: rotateY(-90deg); }

/* flip : idem avec fondu */
.is-flip  .mbs-showcase-face.is-leaving  { transform: rotateY(90deg);  opacity: 0; }
.is-flip  .mbs-showcase-face.is-entering { transform: rotateY(-90deg); opacity: 0; }

/* cube : rotation en profondeur */
.is-cube  .mbs-showcase-face.is-leaving  { transform: translateZ(-260px) rotateY(-90deg); opacity: 0; }
.is-cube  .mbs-showcase-face.is-entering { transform: translateZ(-260px) rotateY(90deg);  opacity: 0; }

/* fold : bascule verticale */
.is-fold  .mbs-showcase-face.is-leaving  { transform: translateZ(-260px) rotateX(90deg);  opacity: 0; }
.is-fold  .mbs-showcase-face.is-entering { transform: translateZ(-260px) rotateX(-90deg); opacity: 0; }

/* zoom : l'ancienne s'eloigne, la nouvelle arrive de loin */
.is-zoom  .mbs-showcase-face.is-leaving  { transform: scale(1.18); opacity: 0; }
.is-zoom  .mbs-showcase-face.is-entering { transform: scale(.82);  opacity: 0; }

/* ── Controles ──────────────────────────────────────────────────────────────*/
.mbs-showcase-controls.is-side { margin-top: 0; margin-bottom: 2px; }
.mbs-showcase-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}
.mbs-showcase-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.3rem;
    line-height: 1;
    opacity: .75;
    transition: opacity .2s, background .2s;
}
.mbs-showcase-btn:hover { opacity: 1; background: rgba(127,127,127,.15); }
.mbs-showcase-btn.is-on { opacity: 1; }
.mbs-showcase-btn svg   { width: 15px; height: 15px; fill: currentColor; }

.mbs-showcase-counter {
    margin-left: auto;
    font-size: .85rem;
    opacity: .7;
    font-variant-numeric: tabular-nums;
}

/* Respect du reglage systeme "moins d'animations" */
@media (prefers-reduced-motion: reduce) {
    .mbs-showcase-thumb,
    .mbs-showcase-thumb-inner,
    .mbs-showcase-stage.is-phase .mbs-showcase-face { transition-duration: .01ms !important; }
    .mbs-showcase-thumb-inner.is-spin { animation-duration: .01ms; }
}