/* La visionneuse en plein écran (public/app/visionneuse.js), sur le coffre et
   sur la page du destinataire d'un lien : servie sous /app/, joignable des
   deux hôtes. Mêmes jetons que lumiere.css, jour et nuit. Le fond de la scène
   est celui que peint le cadre isolé (public/apercu/cadre.css) : les deux
   doivent rester égaux, sinon un liseré paraît autour du fichier. */

:root{--vis-scene:#E3E0D7}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="clair"]){--vis-scene:#060B13}
}
:root[data-theme="sombre"]{--vis-scene:#060B13}

html.visionneuse-ouverte,html.visionneuse-ouverte body{overflow:hidden}

.visionneuse{
  position:fixed;inset:0;z-index:90;
  display:flex;flex-direction:column;
  background:var(--vis-scene);color:var(--texte);outline:none;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.vis-tete{
  display:flex;align-items:center;gap:12px;flex:none;min-height:58px;
  padding:8px clamp(10px,2.4vw,24px);
  background:var(--surface-haute);border-bottom:1px solid var(--trait);
}
.vis-titre{flex:1 1 auto;min-width:0;display:grid;gap:2px}
.vis-nom{
  margin:0;font:500 1rem/1.3 var(--f-texte);letter-spacing:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.vis-position{margin:0;font:400 12.5px/1.4 var(--f-technique);color:var(--texte-faible);font-variant-numeric:tabular-nums}
.vis-outils{display:flex;align-items:center;gap:6px;flex:none}
.vis-zoom{display:flex;align-items:center;gap:2px}
.vis-zoom[hidden]{display:none}
.vis-niveau{min-width:62px;font:400 12.5px/1 var(--f-technique);font-variant-numeric:tabular-nums;justify-content:center}

.vis-scene{position:relative;flex:1 1 auto;min-height:0;background:var(--vis-scene)}
.vis-cadre{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;background:transparent}
.vis-cadre.vis-cache{visibility:hidden}

.vis-etat{
  position:absolute;inset:0;
  display:grid;place-content:center;justify-items:center;gap:14px;
  padding:24px;text-align:center;
}
.vis-etat[hidden]{display:none}
.vis-etat-icone{display:grid;place-items:center;color:var(--texte-faible)}
.vis-message{margin:0;max-width:46ch;color:var(--texte-doux);line-height:1.5}
.vis-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.vis-chargement{display:grid;justify-items:center;gap:12px;width:min(420px,calc(100vw - 48px))}
.vis-chargement .progression{width:100%;text-align:left}
.vis-chargement .mention{margin:0;font-size:.88rem;line-height:1.5;color:var(--texte-faible)}

.visionneuse .vis-fleche{
  position:absolute;top:50%;z-index:1;transform:translateY(-50%);
  width:44px;height:64px;padding:0;border-radius:var(--r-bloc);
  background:color-mix(in srgb,var(--surface-haute) 84%,transparent);color:var(--texte);
  box-shadow:var(--ombre-courte);
}
.visionneuse .vis-fleche:hover{background:var(--surface-haute)}
.visionneuse .vis-fleche:disabled{opacity:.35;cursor:default}
.visionneuse .vis-fleche[hidden]{display:none}
.vis-precedent{left:12px}
.vis-suivant{right:12px}

.vis-garde{position:fixed;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none;outline:none}
.visionneuse :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.visionneuse:focus{outline:none}

@media (max-width:640px){
  .vis-tete{gap:8px;min-height:54px}
  .vis-telecharger span{display:none}
  .vis-telecharger.btn.petit{padding:9px}
  .vis-niveau{display:none}
  .visionneuse .vis-fleche{width:36px;height:52px}
  .vis-precedent{left:6px}
  .vis-suivant{right:6px}
}
@media (prefers-reduced-motion:no-preference){
  .visionneuse{animation:vis-entree .16s var(--sortie)}
}
@keyframes vis-entree{from{opacity:0}to{opacity:1}}