/* doc-project | projet/assets/css/media-frame.css | composant media frame reusable pour afficher les images catalogue, produit, option et portail en contain avec fond derive floute, fallback neutre, ratios utilitaires dont 1:1 pour les cards du configurateur V2, absence totale de recadrage lateral, centrage fiable horizontal et vertical des medias animes GIF ou statiques via image dimensionnee par max-width max-height sur son propre ratio plutot que par width height 100 et object-fit, afin de neutraliser les bugs de rendu des replaced elements GIF et baseline notamment sur WebKit iOS */
.sabatier-media-frame {
    --sabatier-media-frame-fallback: #ece2d6;
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
    background: var(--sabatier-media-frame-fallback);
}

.sabatier-media-frame::before,
.sabatier-media-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.sabatier-media-frame::before {
    background-color: var(--sabatier-media-frame-fallback);
    background-image: var(--sabatier-media-frame-image, none);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    filter: blur(28px) saturate(1.08);
    transform: scale(1.14);
    opacity: 0.96;
}

.sabatier-media-frame::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(31, 26, 23, 0.06));
    z-index: 1;
}

.sabatier-media-frame > picture {
    display: contents;
}

.sabatier-media-frame > img,
.sabatier-media-frame > picture > img,
.sabatier-media-frame__image {
    position: relative;
    z-index: 2;
    display: block;
    align-self: center;
    justify-self: center;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    object-fit: contain;
    object-position: center center;
}

.sabatier-media-frame--16-11 {
    aspect-ratio: 16 / 11;
}

.sabatier-media-frame--4-3 {
    aspect-ratio: 4 / 3;
}

.sabatier-media-frame--1-1 {
    aspect-ratio: 1 / 1;
}

@supports not (filter: blur(2px)) {
    .sabatier-media-frame::before {
        filter: none;
        transform: none;
        opacity: 0.22;
    }
}