/* « te voir dans Heat » — /des-films/heat-1995/camera (theme/page-film-camera.php, camera-heat.js) :
   l'image en plein écran, et par-dessus, l'hommage (en haut à gauche), la musique (en haut à droite),
   les crédits du film (en bas à gauche), les réglages (en bas à droite). D'après l'aperçu du 26 octobre
   2026 (_apercus/des-films/heat-thermique/). */
/* La page du site autour : ni marge ni largeur maximale. */
body.tpl-page-film-camera .wrap { max-width: none; margin: 0; padding: 0; }
@font-face { font-family: "PP Neue Montreal"; src: url("/theme/fonts/PPNeueMontreal-Book.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "PP Neue Montreal"; src: url("/theme/fonts/PPNeueMontreal-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "PP Eiko"; src: url("/theme/fonts/PPEiko-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Söhne Mono"; src: url("/theme/fonts/SohneMono-Buch.otf") format("opentype"); font-weight: 400; font-display: swap; }

/* Le noir du plan : un peu brun (mesuré, 5, 4, 3). */
:root { --noir: #050403; --encre: #DCE3EC; --pale: rgba(220, 227, 236, .62); --filet: rgba(220, 227, 236, .18); --carte: rgba(8, 9, 12, .72); }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--noir); color: var(--encre); overflow: hidden; }
body { font-family: "PP Neue Montreal", "Helvetica Neue", Arial, sans-serif; font-weight: 400; letter-spacing: -0.01em; }
a { color: inherit; }
button { font: inherit; color: inherit; letter-spacing: inherit; }
[hidden] { display: none !important; }

/* --- L'image ------------------------------------------------------------------------------- */
.th-ecran { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; }
/* Le cadre du film : 2,39, centré, des bandes noires autour. */
html.th-scope .th-ecran {
    left: 50%; top: 50%;
    width: min(100vw, 239dvh);
    height: min(100dvh, calc(100vw / 2.39));
    transform: translate(-50%, -50%);
}

/* --- Le texte par-dessus : lisible sur l'image, sans la cacher ------------------------------ */
.th-tete, .th-credits, .th-accueil { position: fixed; z-index: 2; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.th-tete { left: max(1.4rem, env(safe-area-inset-left)); top: 1.2rem; max-width: 30rem; }
.th-retour { margin: 0 0 .9rem; font-size: .74rem; }
.th-retour a { color: var(--pale); text-decoration: none; }
.th-retour a:hover { color: var(--encre); }
.th-hommage { margin: 0; font-size: .86rem; line-height: 1.45; }

/* Les crédits, comme ceux d'un plan. */
.th-credits { left: max(1.4rem, env(safe-area-inset-left)); bottom: max(1.2rem, env(safe-area-inset-bottom)); margin: 0; font-size: .76rem; line-height: 1.5; }
.th-credits p { margin: 0; }
.th-film { margin-bottom: .2rem !important; font-family: "PP Eiko", "Times New Roman", serif; font-size: 1.5rem; line-height: 1.1; letter-spacing: -.02em; }
.th-film cite { font-style: italic; }
.th-role { color: var(--pale); }
.th-shot { margin-top: .35rem !important; font-family: "Söhne Mono", ui-monospace, Menlo, monospace; font-size: .7rem; letter-spacing: .04em; color: var(--pale); }

/* L'accueil, au milieu, tant que la caméra n'est pas allumée. */
.th-accueil {
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(30rem, calc(100vw - 2.8rem));
    display: flex; flex-direction: column; align-items: center; gap: .8rem; text-align: center;
}
html.th-allumee .th-accueil { top: auto; bottom: 4.2rem; transform: translateX(-50%); }
html.th-allumee .th-accueil > :not(.th-etat) { display: none; }
.th-allumer { padding: .65rem 1.2rem; background: var(--encre); color: var(--noir); border: 0; border-radius: 2px; cursor: pointer; font-weight: 500; font-size: .9rem; text-shadow: none; }
.th-allumer:hover { opacity: .88; }
.th-lien { padding: 0; background: none; border: 0; cursor: pointer; font-size: .8rem; text-decoration: underline; text-underline-offset: 3px; }
.th-lien:hover { text-decoration: none; }
.th-prive { margin: .2rem 0 0; font-size: .74rem; line-height: 1.45; color: var(--pale); }
.th-etat { margin: 0; min-height: 1.2em; font-size: .8rem; }
.th-etat.est-erreur { color: #FF9B86; }

/* --- L'image seule : le bouton à l'œil, en haut à droite (la musique se range à sa gauche) ; une fois
   l'interface cachée, il reste seul, à peine visible, et la souris s'efface. ---------------------------- */
.th-vue {
    position: fixed; z-index: 4; right: max(1.2rem, env(safe-area-inset-right)); top: 1.1rem;
    display: none; place-items: center; width: 1.9rem; height: 1.9rem; padding: 0;
    background: var(--carte); border: 1px solid var(--filet); border-radius: 50%; cursor: pointer;
    transition: opacity .4s ease;
}
html.th-allumee .th-vue { display: grid; }
.th-vue svg { display: block; width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.th-vue .th-vue-off, .th-vue[aria-pressed="true"] .th-vue-on { display: none; }
.th-vue[aria-pressed="true"] .th-vue-off { display: block; }
html.th-image-seule .th-vue { opacity: .3; }
html.th-image-seule .th-vue:hover, html.th-image-seule .th-vue:focus-visible { opacity: 1; }
html.th-image-seule .th-tete, html.th-image-seule .th-credits, html.th-image-seule .th-reglette,
html.th-image-seule .th-musique, html.th-image-seule .th-credit-demo, html.th-image-seule .th-accueil {
    opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .4s ease, visibility 0s linear .4s;
}
.th-tete, .th-credits, .th-reglette, .th-credit-demo { transition: opacity .4s ease; }
html.th-image-seule.th-curseur-cache, html.th-image-seule.th-curseur-cache * { cursor: none !important; }
html.th-allumee.th-image-seule .th-musique { opacity: 0; }   /* plus fort que « html.th-allumee .th-musique » */

/* --- Le crédit de l'image de démonstration : en filigrane le long du bord droit, lu de bas en haut, comme
   celui de Good Time sur la couverture de « des films » (.cover-credit de style.css). ------------------ */
.th-credit-demo {
    position: fixed; z-index: 1; right: max(.9rem, env(safe-area-inset-right)); top: 5.6rem;
    margin: 0; writing-mode: vertical-rl; transform: rotate(180deg);
    max-height: calc(100dvh - 22rem); overflow: hidden;
    font-size: .6rem; line-height: 1.3; letter-spacing: .02em; color: rgba(255, 255, 255, .4);
    pointer-events: none;
}
.th-credit-demo em { font-style: italic; }

/* --- La musique : en haut à droite, le titre et un bouton pour la couper ------------------------- */
.th-musique {
    position: fixed; z-index: 2; right: calc(max(1.2rem, env(safe-area-inset-right)) + 2.6rem); top: 1.1rem;
    display: flex; align-items: flex-start; gap: .55rem; max-width: 19rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    opacity: 0; transition: opacity .6s ease; pointer-events: none;
}
html.th-allumee .th-musique { opacity: 1; pointer-events: auto; }
/* Le bouton : l'icône au centre exact du rond (en bloc, pas posée sur la ligne du texte ; chaque icône
   recadrée sur son dessin par son viewBox). */
.th-son { flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; padding: 0; background: var(--carte); border: 1px solid var(--filet); border-radius: 50%; cursor: pointer; }
.th-son svg { display: block; width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.th-son .th-son-off, .th-son[aria-pressed="true"] .th-son-on { display: none; }
.th-son[aria-pressed="true"] .th-son-off { display: block; }
.th-titre-musique { margin: .1rem 0 0; font-size: .76rem; line-height: 1.35; }
.th-titre-musique > span:first-child { font-weight: 500; margin-right: .25rem; }
.th-compositeur { display: block; color: var(--pale); font-size: .68rem; }

/* --- Les réglages ---------------------------------------------------------------------------- */
.th-reglette {
    position: fixed; z-index: 3;
    right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom));
    width: 17.5rem; max-width: calc(100vw - 2rem); max-height: calc(100dvh - 2rem); overflow: auto;
    padding: .55rem .8rem .7rem;
    background: var(--carte);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid var(--filet); border-radius: 3px;
    font-size: 12px; line-height: 1.35;
}
.th-reglette-tete { display: flex; align-items: center; justify-content: space-between; }
.th-lib { margin: 0; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--pale); }
.th-defaut { margin-left: auto; margin-right: .4rem; padding: 0; background: none; border: 0; cursor: pointer; font-size: 11px; text-decoration: underline; text-underline-offset: 2px; color: var(--pale); }
.th-defaut:hover { color: var(--encre); }
.th-plier { width: 1.5rem; padding: 0; background: none; border: 0; cursor: pointer; font-size: 1rem; line-height: 1; color: var(--pale); }
.th-plier:hover { color: var(--encre); }
html.th-reglette-pliee .th-reglette-corps { display: none; }
.th-reglette-corps { margin-top: .45rem; }
.th-curseur { display: grid; grid-template-columns: 4.4rem 1fr 2.1rem; align-items: center; gap: .4rem; margin: .18rem 0; }
.th-curseur input { width: 100%; accent-color: #A9B9CF; }
.th-curseur span { text-align: right; font-variant-numeric: tabular-nums; color: var(--pale); }
.th-bascules { display: flex; flex-wrap: wrap; gap: 4px; margin: .6rem 0 0; }
.th-bascules button { padding: .3rem .5rem; background: none; border: 1px solid var(--filet); border-radius: 2px; cursor: pointer; }
.th-bascules button[aria-pressed="true"] { background: var(--encre); color: var(--noir); border-color: var(--encre); }
.th-reglette-pied { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: .7rem 0 0; padding-top: .6rem; border-top: 1px solid var(--filet); }
.th-photo {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .4rem .75rem .4rem .6rem; background: var(--encre); color: var(--noir);
    border: 0; border-radius: 2px; cursor: pointer; font-weight: 500;
}
.th-photo svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.th-photo:disabled { opacity: .35; cursor: default; }
button:focus-visible, a:focus-visible { outline: 1px solid var(--encre); outline-offset: 2px; }

/* --- Téléphone : les réglages pliés au départ, moins de texte par-dessus l'image ------------------ */
@media (max-width: 700px) {
    .th-hommage { font-size: .78rem; max-width: 19rem; }
    .th-film { font-size: 1.2rem; }
    .th-credits { font-size: .7rem; bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 6.6rem); }
    .th-reglette { left: 1rem; right: 1rem; width: auto; max-width: none; }
    .th-musique { top: auto; bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 6.6rem); right: 1rem; max-width: 10rem; }
    .th-compositeur { display: none; }
}

/* --- Moins de mouvement : l'interface apparaît et disparaît sans fondu. ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .th-vue, .th-tete, .th-credits, .th-reglette, .th-credit-demo, .th-musique,
    html.th-image-seule .th-tete, html.th-image-seule .th-credits, html.th-image-seule .th-reglette,
    html.th-image-seule .th-musique, html.th-image-seule .th-credit-demo, html.th-image-seule .th-accueil { transition: none; }
}

/* --- Les vignettes (vignettes.py) --------------------------------------------------------------- */
/* Chrome sans fenêtre agrandit sa fenêtre au moment de la capture : la page garde la hauteur du départ (--h). */
html[data-capture] body { position: relative; height: var(--h); }
html[data-capture] .th-ecran, html[data-capture] .th-tete, html[data-capture] .th-credits, html[data-capture] .th-accueil, html[data-capture] .th-reglette, html[data-capture] .th-musique, html[data-capture] .th-credit-demo, html[data-capture] .th-vue { position: absolute; }
html[data-capture] .th-musique { transition: none; }
html[data-capture] .th-ecran { height: var(--h); }
html[data-capture].th-scope .th-ecran { height: min(var(--h), calc(100vw / 2.39)); }
html.th-nu .th-tete, html.th-nu .th-credits, html.th-nu .th-accueil, html.th-nu .th-reglette, html.th-nu .th-musique, html.th-nu .th-credit-demo { display: none; }   /* ?nu=1 : l'image seule */