/* Transition liste <-> fiche produit (voir products.js et product-show.js) : en
   plus du fondu commun a tout le site (_transitions.css), la photo de la carte
   vole jusqu'a la photo de la fiche, et inversement. Feuille chargee par ces
   deux pages seulement. */

/* Seule la photo vole : ni la loupe de la fiche ni les pastilles de la carte
   (cote carte, products.js nomme la photo visible) */
.product-detail__image-wrapper > img {
    view-transition-name: photo-produit;
}

::view-transition-group(photo-produit) {
    animation-duration: 0.4s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

::view-transition-old(photo-produit),
::view-transition-new(photo-produit) {
    height: 100%;
    object-fit: cover;
}