/* Éléments communs à toutes les pages : bouton musique, lecteur vidéo, visionneuse photos */

/* Bouton musique */
#bgm-btn{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:50;display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:1px solid var(--gold);background:var(--surface);color:var(--accent);font:600 15px/1 "EB Garamond",Georgia,serif;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.25)}
#bgm-btn .ico{font-size:14px}

/* Vignettes vidéo */
.vgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.4rem;margin-top:1.5rem}
.vcard{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--gold)}
.vcard h3{font-size:1rem;color:var(--accent);margin:0;padding:.8rem 1rem 1rem}
.thumb{position:relative;display:block;aspect-ratio:16/9;background:#000;overflow:hidden;cursor:pointer}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.thumb:hover img{transform:scale(1.04)}
.thumb .play{position:absolute;left:50%;top:50%;width:68px;height:48px;margin:-24px 0 0 -34px;background:#c4302b;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.thumb .play::after{content:"";position:absolute;left:27px;top:13px;border-left:18px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent}

/* Fenêtre plein écran (vidéo et photos) */
.overlay{position:fixed;inset:0;z-index:100;background:rgba(10,6,4,.94);display:flex;align-items:center;justify-content:center;padding:56px 12px 24px}
.overlay[hidden]{display:none}
.overlay .close{position:absolute;top:10px;right:12px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:28px;line-height:44px;cursor:pointer}
.overlay .player{width:min(1100px,100%);aspect-ratio:16/9;max-height:calc(100vh - 100px)}
.overlay .player iframe{width:100%;height:100%;border:0;display:block}
.overlay figure{margin:0;display:flex;flex-direction:column;align-items:center;max-width:100%;max-height:100%}
.overlay figure img{max-width:100%;max-height:calc(100vh - 130px);object-fit:contain;display:block;user-select:none}
.overlay figcaption{color:#f6e9c8;font-style:italic;text-align:center;padding:.7rem 3.5rem 0;font-size:1rem}
.overlay .nav{position:absolute;top:50%;margin-top:-28px;width:48px;height:56px;border:0;background:rgba(255,255,255,.15);color:#fff;font-size:32px;cursor:pointer;border-radius:4px}
.overlay .prev{left:8px}
.overlay .next{right:8px}
.overlay .count{position:absolute;top:20px;left:16px;color:#f6e9c8;font-size:.95rem}
body.noscroll{overflow:hidden}