/* ═══ Visionneuse de photos — HEIC lisibles partout (R-PHOTO-HEIC, 01/10/2026) ═══
   js/photo_visionneuse.js · maquette validée par Julien le 01/10/2026. Couleurs de la charte. */
.phv-ov { position:fixed; inset:0; z-index:9800; background:rgba(18,28,36,.94); display:flex; flex-direction:column; color:var(--white); }
.phv-bar { display:flex; align-items:center; gap:10px; padding:12px 16px; background:rgba(0,0,0,.25); flex-wrap:wrap; }
.phv-titre { flex:1; min-width:160px; font-weight:700; font-size:14px; overflow:hidden; }
.phv-titre span { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.phv-titre small { display:block; font-weight:500; font-size:11px; opacity:.75; margin-top:2px; }
.phv-n { font-size:12px; opacity:.85; padding:3px 9px; border:1px solid rgba(255,255,255,.25); border-radius:12px; }
.phv-b { font:inherit; font-size:13px; font-weight:700; border-radius:8px; padding:8px 13px; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.08); color:var(--white); cursor:pointer; display:inline-flex; gap:6px; align-items:center; }
.phv-b:hover, .phv-b:focus-visible { background:rgba(255,255,255,.18); outline:none; }
.phv-b.phv-p { background:var(--white); color:var(--wood-dark); border-color:var(--white); }
.phv-b.phv-x { width:38px; justify-content:center; padding:8px 0; }
.phv-zone { flex:1; display:grid; place-items:center; padding:14px; overflow:hidden; min-height:0; }
.phv-zone img { display:block; border-radius:6px; box-shadow:0 8px 30px rgba(0,0,0,.45); transition:transform .18s ease; background:var(--white); }
.phv-fl { position:fixed; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.12); color:var(--white); border:1px solid rgba(255,255,255,.28); font-size:22px; line-height:1; cursor:pointer; }
.phv-fl:hover, .phv-fl:focus-visible { background:rgba(255,255,255,.25); outline:none; }
.phv-g { left:16px; } .phv-d { right:16px; }
.phv-pied { text-align:center; font-size:12px; color:rgba(255,255,255,.7); padding:6px 0 12px; }
.phv-charge { display:flex; flex-direction:column; align-items:center; gap:14px; }
.phv-spin { width:42px; height:42px; border-radius:50%; border:4px solid rgba(255,255,255,.2); border-top-color:var(--white); animation:phv-tour .9s linear infinite; }
@keyframes phv-tour { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .phv-spin { animation-duration:3s; } .phv-zone img { transition:none; } }
.phv-err { background:var(--white); color:var(--text); border-radius:12px; padding:18px 20px; max-width:440px; text-align:center; font-size:13px; }
.phv-err b { display:block; margin-bottom:6px; color:var(--orange-text); font-size:14px; }
.phv-err div { margin-top:12px; }
.phv-badge { font-size:10px; font-weight:800; padding:1px 6px; border-radius:6px; background:var(--accent-soft); color:var(--accent); letter-spacing:.03em; white-space:nowrap; }
@media (max-width:640px) { .phv-b { padding:7px 10px; font-size:12px; } .phv-pied { display:none; } .phv-fl { width:40px; height:40px; } }