/* ============================================================
   FxMpiTV — Grille de vignettes flip
   Intégré à la suite Fx WP Plugin Suite
   ============================================================ */

/* ----- Variables ----- */
:root {
    --fxmpitv-bg-heading: #c0132e;
    --fxmpitv-text-heading: #ffffff;
    --fxmpitv-back-bg: rgba(0, 0, 0, 0.92);
    --fxmpitv-back-text: #ffffff;
    --fxmpitv-back-cta: #e63946;
    --fxmpitv-radius: 4px;
    --fxmpitv-gap: 6px;
    --fxmpitv-flip-duration: 0.45s;
    --fxmpitv-play-color: rgba(255, 255, 255, 0.85);
}

/* ----- Wrapper ----- */
.fxmpitv-wrapper {
    margin: 1.5rem 0;
    font-family: inherit;
}

/* ----- Heading (style bandeau MPI) ----- */
.fxmpitv-heading {
    display: block;
    background: var(--fxmpitv-bg-heading);
    color: var(--fxmpitv-text-heading);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .5rem 1rem;
    margin: 0 0 .5rem 0;
    border-radius: var(--fxmpitv-radius) var(--fxmpitv-radius) 0 0;
}

/* ----- Grille responsive ----- */
.fxmpitv-grid {
    display: grid;
    grid-template-columns: repeat(var(--fxmpitv-cols, 6), 1fr);
    gap: var(--fxmpitv-gap);
}

@media (max-width: 1024px) {
    .fxmpitv-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
    .fxmpitv-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 400px) {
    .fxmpitv-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ----- Carte ----- */
.fxmpitv-card {
    aspect-ratio: 16 / 10;
    perspective: 800px;
    border-radius: var(--fxmpitv-radius);
    overflow: hidden;
}

/* ----- Flip container ----- */
.fxmpitv-flip {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform var(--fxmpitv-flip-duration) cubic-bezier(.4, .2, .2, 1);
    border-radius: var(--fxmpitv-radius);
    text-decoration: none;
    cursor: pointer;
}

.fxmpitv-card:hover .fxmpitv-flip,
.fxmpitv-card:focus-within .fxmpitv-flip {
    transform: rotateY(180deg);
}

/* ----- Face avant ----- */
.fxmpitv-front,
.fxmpitv-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: var(--fxmpitv-radius);
}

.fxmpitv-front {
    background: #111;
    overflow: hidden;
}

.fxmpitv-front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

/* Icône play centrée */
.fxmpitv-play-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(.9rem, 2vw, 1.4rem);
    color: var(--fxmpitv-play-color);
    text-shadow: 0 0 8px rgba(0,0,0,.6);
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}

.fxmpitv-card:hover .fxmpitv-front img {
    transform: scale(1.05);
}

.fxmpitv-card:hover .fxmpitv-play-icon {
    opacity: 1;
}

/* ----- Face arrière ----- */
.fxmpitv-back {
    background: var(--fxmpitv-back-bg);
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: .5rem;
    gap: .35rem;
}

.fxmpitv-back-title {
    color: var(--fxmpitv-back-text);
    font-size: clamp(.65rem, 1.2vw, .85rem);
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fxmpitv-back-cta {
    font-size: clamp(.55rem, 1vw, .7rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--fxmpitv-back-cta);
    border: 1px solid var(--fxmpitv-back-cta);
    padding: .15rem .45rem;
    border-radius: 2px;
    margin-top: .1rem;
}

/* ----- Message vide ----- */
.fxmpitv-empty {
    color: #888;
    font-style: italic;
    padding: 1rem 0;
}