/* ═══ Le cinéma (5.66) : la lecture d'une vidéo en plein écran — voir cinema.js ═══ */
:root{--cine-or:#e3c27e;--cine-or-fonce:#b8913f;--cine-creme:#f6efe2;--cine-gris:rgba(246,239,226,.62)}
html.cine-ouvert,html.cine-ouvert body{overflow:hidden}
.cine{position:fixed;inset:0;z-index:2147483000;display:flex;flex-direction:column;background:#000;color:var(--cine-creme);
  opacity:0;transition:opacity .22s ease;
  padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0)}
.cine.la{opacity:1}
.cine.sort{opacity:0}
/* la lumière de l'image, très floue, déborde autour de l'écran */
.cine-lueur{position:absolute;inset:-12%;background:center/cover no-repeat;filter:blur(70px) saturate(1.5) brightness(.55);
  transform:scale(1.15);opacity:.85;pointer-events:none}
.cine-lueur::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 30%,rgba(0,0,0,.75) 85%)}
.cine-haut,.cine-bas{position:relative;z-index:2;display:flex;align-items:center;gap:12px;padding:12px 16px}
.cine-titre{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cine-titre b{font:500 1.35rem/1.15 "Cormorant","Cormorant Garamond",Georgia,serif;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cine-titre small{font-size:.8rem;color:var(--cine-gris)}
.cine-fermer,.cine-nav{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  border:1px solid rgba(246,239,226,.22);background:rgba(0,0,0,.35);color:var(--cine-creme);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);padding:0}
.cine-fermer:hover,.cine-nav:hover:not([disabled]){background:rgba(246,239,226,.14)}
.cine-nav[disabled]{opacity:.3;cursor:default}
.cine-fermer svg.ic,.cine-nav svg.ic{width:20px;height:20px}
.cine-scene{position:relative;z-index:1;flex:1;min-height:0;display:grid;place-items:center;padding:4px 16px;container-type:size}
/* l'écran prend la plus grande taille qui tient, sans jamais déborder */
.cine-cadre{position:relative;aspect-ratio:var(--r,1.7778);width:min(100cqw,calc(100cqh * var(--r,1.7778)));
  max-width:100%;max-height:100%;border-radius:10px;overflow:hidden;background:#000;
  box-shadow:0 0 0 1px rgba(246,239,226,.08),0 30px 90px -20px rgba(0,0,0,.9)}
.cine-cadre video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;display:block}
.cine-attente{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.cine-attente[hidden]{display:none}
.cine-attente i{width:46px;height:46px;border-radius:50%;border:3px solid rgba(227,194,126,.25);border-top-color:var(--cine-or);
  animation:cine-tourne .9s linear infinite}
@keyframes cine-tourne{to{transform:rotate(360deg)}}
.cine-erreur{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;background:rgba(0,0,0,.72)}
.cine-erreur[hidden]{display:none}
.cine-erreur p{max-width:30ch;line-height:1.5}
.cine-bas{justify-content:center;padding-bottom:max(16px,env(safe-area-inset-bottom,0))}
.cine-vide{flex:1}
.cine-dl{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:0 24px;border-radius:999px;cursor:pointer;
  border:0;font:600 1rem/1 inherit;font-family:inherit;color:#1d1608;
  background:linear-gradient(180deg,#f1d9a4,var(--cine-or) 55%,var(--cine-or-fonce));box-shadow:0 10px 30px -10px rgba(227,194,126,.55)}
.cine-dl:hover{filter:brightness(1.05)}
.cine-dl svg.ic{width:19px;height:19px}
.cine button:focus-visible{outline:2px solid var(--cine-or);outline-offset:3px}
/* vidéo filmée debout, sur ordinateur : l'écran reste haut, la lumière remplit les côtés */
@media (min-width:900px){
  .cine-haut{padding:18px 28px}
  .cine-scene{padding:6px 28px}
  .cine-titre b{font-size:1.6rem}
}
/* téléphone couché : la vidéo prend tout ; titre et boutons s'effacent sur les côtés */
@media (orientation:landscape) and (max-height:520px){
  .cine-haut{position:absolute;top:0;left:0;right:0;padding:8px 12px;background:linear-gradient(rgba(0,0,0,.6),transparent)}
  .cine-titre{max-width:calc(100% - 330px)}
  .cine-fermer{margin-left:auto}
  .cine-bas{position:absolute;top:0;right:70px;left:auto;padding:8px 0;gap:8px;background:none}
  .cine-nav,.cine-vide{display:none}
  .cine-scene{padding:0}
  .cine-cadre{border-radius:0;box-shadow:none}
  .cine-dl{min-height:42px;padding:0 16px;font-size:.9rem}
}
@media (prefers-reduced-motion:reduce){ .cine{transition:none} .cine-attente i{animation-duration:2s} }

/* ── l'affiche d'une vidéo sur les styles du site public (cinema.js : TG.cinemaAuto) ── */
.tg-film{position:relative;display:block;width:100%;aspect-ratio:16/9;margin:0;padding:0;border:0;cursor:pointer;overflow:hidden;
  background:#000;color:#fff;border-radius:inherit;font:inherit}
.tg-film.debout{aspect-ratio:4/5}
.tg-film img{position:absolute!important;inset:0;width:100%!important;height:100%!important;object-fit:cover;display:block;max-width:none;opacity:1!important;visibility:visible!important;filter:none!important;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.tg-film-fond{display:none}
.tg-film.debout .tg-film-fond{display:block;position:absolute;inset:-8%;background:center/cover no-repeat;filter:blur(26px) brightness(.55)}
.tg-film.debout img{object-fit:contain}
.tg-film::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.42))}
.tg-film:hover img{transform:scale(1.025)}
.tg-film-play{position:absolute;left:50%;top:50%;z-index:2;width:74px;height:74px;margin:-37px 0 0 -37px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.94);color:#111;
  box-shadow:0 0 0 10px rgba(255,255,255,.16),0 16px 40px rgba(0,0,0,.45);transition:transform .25s}
.tg-film:hover .tg-film-play,.tg-film:focus-visible .tg-film-play{transform:scale(1.07)}
.tg-film-play svg{width:30px;height:30px;margin-left:4px}
.tg-film:focus-visible{outline:2px solid var(--cine-or);outline-offset:3px}
@media (max-width:520px){ .tg-film-play{width:62px;height:62px;margin:-31px 0 0 -31px} .tg-film-play svg{width:26px;height:26px} }