/* Films animés (V12) */
.film .film-cadre { position: relative; background: #fff; border: 1px solid var(--filet, #E2DAEB); border-radius: var(--rayon, 16px); overflow: hidden; max-width: 460px; margin-inline: auto; }
.film .film-cadre svg { display: block; width: 100%; height: auto; }
.film-logo { position: absolute; top: 10px; left: 12px; height: 26px; width: auto; opacity: .95; }
.film-credit { position: absolute; left: 0; right: 0; bottom: 6px; margin: 0; text-align: center; font-size: .75rem; color: #5A5266; padding: 0 8px; }
.film-soustitre { position: absolute; left: 10px; right: 10px; bottom: 30px; margin: 0; text-align: center; font-size: .9rem; line-height: 1.3; color: #292331; background: rgba(250,248,244,.92); border-radius: 8px; padding: .35rem .5rem; min-height: 0; }
.film-soustitre:empty { display: none; }
.film-lbl { font: 600 21px Inter, system-ui, sans-serif; paint-order: stroke; stroke: #fff; stroke-width: 5px; }
.film-commandes { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem .75rem; margin-top: .8rem; }
.film-commandes input[type=range] { flex: 1 1 160px; max-width: 260px; accent-color: #51376B; min-height: 44px; }
.film-temps { font-size: .8125rem; color: #5A5266; font-variant-numeric: tabular-nums; min-width: 6ch; }
.film-option { font-size: .875rem; display: inline-flex; gap: .35rem; align-items: center; min-height: 44px; }
.film-etapes { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin-top: .6rem; }
.film-etape { font: inherit; font-size: .8125rem; padding: .45rem .7rem; min-height: 40px; border-radius: 999px; border: 1px solid #CDBFDC; background: #fff; color: #51376B; cursor: pointer; }
.film-etape[aria-pressed="true"] { background: #EEE8F4; border-color: #51376B; font-weight: 600; }
.film figcaption { max-width: 62ch; margin-inline: auto; }
.film .film-texte { min-height: 3.2em; font-size: .9375rem; }
@media (max-width: 600px) { .film-logo { height: 20px; } .film-soustitre { font-size: .8125rem; bottom: 26px; } .film-credit { font-size: .6875rem; } }
.film .film-cadre img.film-logo { position: absolute; top: 10px; left: 12px; height: 26px !important; width: auto !important; max-width: none; margin: 0; z-index: 2; }
.film [hidden] { display: none !important; }
@media (max-width: 600px) { .film .film-cadre img.film-logo { height: 20px !important; } }