/* UI — Media Cards — Cartes média photo/vidéo (Design System) */
.media-card {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    aspect-ratio: var(--media-card-aspect, 16/9);
    border-radius: var(--media-card-radius, var(--border-radius));
    background: var(--media-card-bg, var(--carbon-300));
    border: var(--media-card-border, none);
    box-shadow: var(--media-card-shadow, none);
    --media-card-accent: var(--color-primary);
}

.media-card:hover {
    box-shadow: var(--media-card-shadow-hover, var(--media-card-shadow, none));
}

/* --- .video-card --- */
.video-card {
    --media-card-radius: var(--border-radius-xl);
    --media-card-border: var(--border-subtle);
    --media-card-shadow: var(--shadow-lg);
    --media-card-shadow-hover: var(--shadow-xl);

    overflow: hidden;
    border-radius: var(--media-card-radius, var(--border-radius-xl));

    transition: transform var(--transition-normal), box-shadow var(--transition-normal);

    will-change: transform;
    contain: layout style;
    cursor: pointer;

    --viewfinder-stroke: rgba(255, 255, 255, 0.5);
    --viewfinder-stroke-width: 1.5;
    --viewfinder-triangle-fill: rgba(255, 255, 255, 0.5);
    --viewfinder-corner-stroke-hover: var(--media-card-accent, var(--color-primary));
    --viewfinder-triangle-fill-hover: var(--white);
    --viewfinder-icon-scale: 1.05;
}

.video-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-normal);
    will-change: transform;
}

.video-card__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Bouton play centré — Style Viewfinder */
.video-card__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: var(--z-content);
    display: flex;
    align-items: center;
    justify-content: center;

    width: 80px;
    height: 80px;
    padding: 0;

    background: transparent;
    border: none;
    cursor: pointer;

    opacity: 0;
    transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.video-card:hover .video-card__play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
}

.video-card__play:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.video-card__iframe-container {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.video-card__iframe-container iframe,
.video-card__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: inherit;
}

/* État lecture */
.video-card.is-playing .video-card__play,
.video-card.video-card--playing .video-card__play {
    opacity: 0;
    pointer-events: none;
}

.video-card.is-playing,
.video-card.video-card--playing {
    cursor: default;
}

.video-card.is-playing .video-card__image,
.video-card.is-playing .video-card__overlay,
.video-card.video-card--playing .video-card__image,
.video-card.video-card--playing .video-card__overlay {
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-normal);
}

.video-card.is-playing .video-card__iframe-container,
.video-card.video-card--playing .video-card__iframe-container {
    opacity: 1;
    pointer-events: auto;
    transition: opacity var(--transition-normal);
}

/* Adaptation Elementor */
.video-card .elementor-widget-container,
.video-card .elementor-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    overflow: hidden;
}

.video-card .elementor-wrapper iframe,
.video-card .elementor-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: inherit;
}

.video-card .elementor-custom-embed-image-overlay {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-size: cover;
    background-position: center;
}

.video-card .elementor-custom-embed-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 62px;
    pointer-events: auto;
}