/* ══════════════════════════════════════
   MÉDIAS — galerie photos + vidéos YouTube
   LMP Radio — 2026-09-25 (couleur de page : cyan #06b6d4)
   Contenu géré dans l'admin (rubrique « Médias »), rendu par js/medias.js.
══════════════════════════════════════ */
.md-section { padding: 30px 0 50px; }
.md-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.md-filter {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(255,255,255,.035); color: var(--t2);
  font-size: .86rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: all .2s;
}
.md-filter:hover { background: rgba(255,255,255,.08); color: #fff; }
.md-filter.active { color: #fff; border-color: transparent; background: linear-gradient(120deg, #0891b2, #06b6d4); box-shadow: 0 10px 24px -10px #06b6d4; }
.md-filter span { font-size: .72rem; opacity: .7; }
.md-grid { columns: 3 300px; column-gap: 16px; }
.md-item {
  position: relative; break-inside: avoid; margin-bottom: 16px; border-radius: 20px; overflow: hidden;
  cursor: zoom-in; background: #0c0a11; border: 1px solid var(--line);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s; animation: mdIn .45s ease both;
}
@keyframes mdIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.md-item:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -22px rgba(6,182,212,.55); }
.md-item img { display: block; width: 100%; height: auto; transition: transform .6s ease; }
.md-item:hover img { transform: scale(1.04); }
.md-item.video { cursor: pointer; }
.md-item.video img { aspect-ratio: 16/9; object-fit: cover; }
.md-play { position: absolute; left: 50%; top: 42%; transform: translate(-50%,-50%); width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 1.4rem; color: #fff; background: rgba(239,68,68,.92); box-shadow: 0 10px 30px rgba(0,0,0,.6); transition: transform .25s; }
.md-item.video:hover .md-play { transform: translate(-50%,-50%) scale(1.12); }
.md-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.85)); }
.md-cap strong { display: block; font-size: .95rem; font-weight: 800; }
.md-cap small { display: block; font-size: .78rem; color: rgba(255,255,255,.75); margin-top: 3px; }
.md-kind { position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: 20px; font-size: .64rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.18); }
.md-empty { column-span: all; text-align: center; padding: 70px 20px; color: var(--t3); border: 1px dashed var(--line-2); border-radius: 24px; line-height: 1.7; }
.md-empty i { display: block; font-size: 2.6rem; opacity: .3; margin-bottom: 12px; }

/* Visionneuse */
.md-lightbox { position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center; padding: 60px 70px; background: rgba(5,4,8,.94); backdrop-filter: blur(10px); }
.md-lightbox.open { display: flex; animation: mdIn .25s ease; }
.md-lb-fig { max-width: 1100px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.md-lb-media { width: 100%; display: flex; justify-content: center; }
.md-lb-media img { max-width: 100%; max-height: 78vh; border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.8); }
.md-lb-media iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 16px; background: #000; }
.md-lb-fig figcaption { text-align: center; color: var(--t2); font-size: .95rem; max-width: 760px; line-height: 1.5; }
.md-lb-fig figcaption strong { display: block; color: #fff; font-family: var(--font-display); font-size: 1.15rem; margin-bottom: 4px; }
.md-lb-btn { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(255,255,255,.08); color: #fff; font-size: 1.1rem; cursor: pointer; transition: background .2s; }
.md-lb-btn:hover { background: #0891b2; }
.md-lb-close { top: 18px; right: 18px; }
.md-lb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.md-lb-next { right: 14px; top: 50%; transform: translateY(-50%); }
@media (max-width: 700px) {
  .md-lightbox { padding: 60px 10px; }
  .md-lb-prev, .md-lb-next { top: auto; bottom: 16px; transform: none; }
  .md-lb-prev { left: calc(50% - 60px); } .md-lb-next { right: calc(50% - 60px); }
}