/* static/css/media_category.css */
/* Header */
.site-header{padding:2rem;text-align:center}
.site-header .subnav{margin-top:1rem}
/* Grille des vignettes */
.media-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))!important;gap:1.5rem;padding:2rem;max-width:1200px;margin:0 auto}
.media-grid .item{position:relative;font-family:'Roboto',sans-serif}
.media-grid .thumb{width:100%;padding-top:100%;position:relative;overflow:hidden;border-radius:.25rem;border:2px solid #555}
.media-grid .thumb img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;cursor:pointer}
.media-grid .download-btn{position:absolute;bottom:.5rem;right:.5rem;background:rgba(0,0,0,.6);border:none;color:#fff;padding:.3rem;border-radius:.25rem;cursor:pointer;font-size:1.2rem}
/* Titre et compteurs */
.media-grid .item p{margin:.5rem 0 0;font-size:.95rem;font-weight:500;text-align:center}
.media-grid .item .view-count,.media-grid .item .dl-count{display:inline-block;font-size:.85rem;color:#666;margin:0 .5rem}
/* Modal diaporama */
#modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.8);justify-content:center;align-items:center;z-index:1000}
#modal img{max-width:90%;max-height:80%;border-radius:.25rem;box-shadow:0 2px 8px rgba(0,0,0,.5)}
#modal .close,#modal .prev,#modal .next{position:absolute;background:none;border:none;color:#fff;cursor:pointer}
#modal .close{top:1rem;right:1rem;font-size:1.5rem}
#modal .prev{left:1rem;font-size:2rem}
#modal .next{right:1rem;font-size:2rem}
/* Crédit source */
.media-source{background:transparent!important;padding:0;margin:1.5em 0 0;text-align:center;border-top:none;color:black}
.media-source p{background:none!important;margin:0;padding:0;display:inline-block;font-style:italic;font-size:.9em}
/* Responsive */
@media screen and (max-width:768px){
.media-grid{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))!important}
}
@media (min-width:769px) and (max-width:1024px){
.media-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))!important;gap:1.25rem;padding:1.5rem;max-width:1000px;margin:1.5rem auto}
.media-grid .thumb{padding-top:100%;border:2px solid #555}
.media-grid .download-btn{bottom:.4rem;right:.4rem;padding:.25rem;font-size:1.1rem}
.media-grid .item p{font-size:.9rem;margin-top:.4rem}
.media-grid .item .view-count,.media-grid .item .dl-count{font-size:.8rem;margin:0 .4rem}
.media-source{margin:1rem 0 0;font-size:.85em}
#modal img{max-width:92%;max-height:88%}
.site-header{padding:1.5rem}
.site-header .subnav{margin-top:.75rem}
}