/* ============================================================
   Encart vidéo « IIQARION en 30 secondes » — page d'accueil.
   Poster cliquable → lecture en modale (voir iko.css / iko.js).
   Charte : var(--marine) / var(--orange) (app.css).
   ============================================================ */

.film-frame {
    position: relative;
    display: block;
    width: 100%;
    max-width: 940px;
    margin: 0 auto;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--marine-900);
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    aspect-ratio: 16 / 9;
}
.film-poster { display: block; width: 100%; height: 100%; object-fit: cover; }
.film-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 50%, rgba(0, 16, 47, .12), rgba(0, 16, 47, .45));
    transition: background .3s var(--ease);
}
.film-frame:hover .film-play { background: radial-gradient(circle at 50% 50%, rgba(0, 16, 47, .04), rgba(0, 16, 47, .34)); }
.film-play-ic {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--grad-accent);
    box-shadow: var(--glow-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .25s var(--ease);
}
.film-frame:hover .film-play-ic { transform: scale(1.08); }
.film-play-ic::after {
    content: "";
    display: block;
    width: 0; height: 0;
    border-left: 26px solid #fff;
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
    margin-left: 8px;
}

@media (max-width: 640px) {
    .film-frame { border-radius: var(--radius); }
    .film-play-ic { width: 64px; height: 64px; }
    .film-play-ic::after { border-left-width: 20px; border-top-width: 12px; border-bottom-width: 12px; }
}