/* « le miroir des films » — /des-films/miroir (theme/page-films-miroir.php, films-miroir.js) :
   la page du site (Times, blanc, liens bleus), le portrait en grand, et à côté les réglages et le
   générique. D'après l'aperçu du 30 octobre 2026 (_apercus/iphone/02-le-miroir-des-films/). */
body.tpl-page-films-miroir .wrap { max-width: 86rem; }

.mi-tete { margin-bottom: 1.2rem; }
.mi-tete .back { margin-bottom: .6rem; }
.mi-titre { font-weight: normal; font-size: clamp(2.4rem, 7vw, 4.4rem); line-height: 1; letter-spacing: -.02em; margin: 0; }

.mi-lien {
    font: inherit; padding: 0; border: 0; background: none; cursor: pointer;
    color: var(--link); text-decoration: underline; text-underline-offset: .16em; text-decoration-thickness: 1px;
}
.mi-lien:hover { text-decoration: none; }
label.mi-lien { display: inline; }
.mi [hidden] { display: none !important; }

/* --- l'accueil --- */
.mi-accueil { max-width: 38rem; }
.mi-phrase { font-size: 1.25rem; line-height: 1.35; margin: 0 0 1.4rem; }
.mi-choix { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; font-size: 1.35rem; margin: 0 0 1.4rem; }
.mi-prive { font-size: .9rem; color: var(--muted); margin: 0; }

/* --- la caméra (sur un ordinateur) --- */
.mi-camera video { display: block; width: 100%; max-width: 46rem; max-height: 70vh; object-fit: contain; background: #000; transform: scaleX(-1); }
.mi-camera-actions { display: flex; align-items: center; gap: 1.6rem; margin: 1rem 0 0; }
.mi-declencheur { width: 3.4rem; height: 3.4rem; border-radius: 50%; border: 2px solid #000; background: #000; box-shadow: inset 0 0 0 4px #fff; cursor: pointer; padding: 0; }

/* --- le portrait et son générique --- */
.mi-resultat { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 2rem; align-items: start; }
.mi-image { position: relative; line-height: 0; }
.mi-image canvas { display: block; width: auto; max-width: 100%; max-height: calc(100vh - 7rem); max-height: calc(100dvh - 7rem); cursor: pointer; }
.mi.compose .mi-image canvas { cursor: progress; }
.mi.proche .mi-image { overflow: auto; max-height: calc(100vh - 7rem); max-height: calc(100dvh - 7rem); outline: 1px solid rgba(0, 0, 0, .15); }
.mi.proche .mi-image canvas { max-width: none; max-height: none; width: var(--largeur-proche); }

.mi-cote { font-size: 1rem; line-height: 1.35; }
.mi-etat { margin: 0 0 .8rem; min-height: 1.35em; font-variant-numeric: tabular-nums; }
.mi-credit-demo { margin: 0 0 .8rem; font-size: .85rem; color: var(--muted); }
.mi-reglages p { margin: 0 0 .55rem; }
.mi-lib { display: inline-block; min-width: 4.6rem; color: var(--muted); font-size: .9rem; }
.mi-reglages button[aria-pressed]:not(.mi-lien) { font: inherit; padding: 0; border: 0; background: none; cursor: pointer; margin-right: .6rem; color: var(--muted); }
.mi-reglages button[aria-pressed="true"]:not(.mi-lien) { color: var(--ink); text-decoration: underline; text-underline-offset: .16em; text-decoration-thickness: 1px; }
.mi-actions { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin-top: 1rem !important; }
.mi-aide { font-size: .85rem; color: var(--muted); }
.mi.compose .mi-reglages { opacity: .45; pointer-events: none; }

.mi-generique { margin-top: 2rem; border-top: 1px solid #000; padding-top: .8rem; }
.mi-generique-tete { margin: 0 0 1rem; }
.mi-generique h2 { font-size: .85rem; font-weight: normal; color: var(--muted); margin: 0 0 .5rem; }
.mi-generique ol { list-style: none; margin: 0; padding: 0; font-size: .95rem; }
.mi-generique li { display: flex; gap: .4rem; padding: .18rem 0; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.mi-generique li a { color: var(--ink); text-decoration: none; }
.mi-generique li a:hover { text-decoration: underline; }
.mi-nb { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; padding-left: .6rem; }

/* --- la fiche d'une case --- */
.mi-fiche {
    position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 20;
    width: min(26rem, calc(100vw - 2.8rem));
    background: #fff; border: 1px solid #000; padding: .8rem;
    font-size: 1rem; line-height: 1.3;
}
.mi-fiche[hidden] { display: none; }
.mi-fiche img { display: block; width: 100%; height: auto; min-height: 3rem; background: #eee; margin-bottom: .6rem; }
.mi-fiche p { margin: 0 0 .4rem; }
.mi-fiche-actions { display: flex; gap: 1.2rem; margin: 0 !important; }
.mi-fiche-actions a { color: var(--link); }

@media (max-width: 760px) {
    .mi-resultat { grid-template-columns: 1fr; gap: 1rem; }
    .mi-image canvas { max-height: none; width: 100%; }
    .mi.proche .mi-image { max-height: 75vh; max-height: 75dvh; }
    .mi-phrase { font-size: 1.1rem; }
    .mi-choix { flex-direction: column; align-items: flex-start; font-size: 1.3rem; }
    .mi-fiche { left: .8rem; right: .8rem; bottom: calc(.8rem + env(safe-area-inset-bottom, 0px)); width: auto; }
}