body { font-family: 'Segoe UI', sans-serif; background: #0f0f0f; color: #fff; margin: 0; }
header {
  background: #111; padding: 15px 30px; display: flex; justify-content: space-between; align-items: center;
  position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
header h1 { color: #e50914; margin: 0; font-size: 1.6em; }
header input { padding: 6px 10px; border-radius: 6px; border: none; outline: none; font-size: 1em; }

nav {
  display: flex; gap: 20px; background: #1a1a1a; padding: 10px 20px;
}
nav button {
  background: none; border: none; color: #aaa; font-size: 1em; cursor: pointer; transition: .2s;
}
nav button.active, nav button:hover { color: #fff; font-weight: bold; }

.container { padding: 20px 30px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 16px; }

.card {
  background: #1a1a1a; border-radius: 10px; overflow: hidden;
  cursor: pointer; transition: transform .2s, box-shadow .2s;
  display: flex; flex-direction: column;
}
.card:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(0,0,0,0.5); }
.thumb { 
  height: 120px; background-size: cover; background-position: center; 
  position: relative;
}
.file-type-icon {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(0,0,0,0.5);
  border-radius: 6px;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-content { padding: 10px; }
.card-title { font-weight: bold; font-size: 1em; margin: 5px 0; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-meta { font-size: 0.85em; color: #aaa; }

button.upload { background: #e50914; color: #fff; padding: 10px 18px; border: none; border-radius: 8px; cursor: pointer; font-size: 1em; transition: background .2s; }
button.upload:hover { background: #b00610; }

/* Modale lecteur */
#mediaModal { display:none; position:fixed; z-index:1000; left:0; top:0; width:100vw; height:100vh;
  background:rgba(0,0,0,0.9); align-items:center; justify-content:center; }
#mediaModalContent { position: relative; max-width:90vw; max-height:90vh; }
#mediaModalContent video, #mediaModalContent audio { width:100%; height:auto; max-height:80vh; border-radius: 10px; background: #000; }
#mediaModalContent button.close { position:absolute; top:-40px; right:0; font-size:2em; background:none; border:none; color:#fff; cursor:pointer; }

#mediaModalContent audio {
  width: 100%;
  height: 56px;
  max-height: 56px;
  border-radius: 10px;
  background: #181818;
  display: block;
  margin: 0 auto;
  box-shadow: 0 2px 12px #0008;
  border: 2px solid #e50914;
}
#mediaModalContent .audio-player-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: #222;
  border-radius: 14px;
  box-shadow: 0 2px 16px #000a;
  max-width: 400px;
  margin: 0 auto;
}
#mediaModalContent .audio-title {
  color: #fff;
  font-size: 1.1em;
  font-weight: bold;
  margin-bottom: 12px;
  text-align: center;
}

/* Desktop par défaut */
.grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 16px; }

/* Tablette */
@media (max-width: 900px) {
  .container { padding: 12px 8px; }
  .grid { grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); gap: 10px; }
  .card { font-size: 0.95em; }
  header { padding: 10px 12px; }
  nav { padding: 8px 10px; gap: 12px; }
}

/* Mobile */
@media (max-width: 600px) {
  .container { padding: 6px 2px; }
  .grid { grid-template-columns: repeat(auto-fill,minmax(110px,1fr)); gap: 8px; }
  .card { font-size: 0.9em; }
  .card-title { font-size: 0.95em; }
  button.upload { padding: 8px 12px; font-size: 0.95em; }
  header h1 { font-size: 1em; }
  #mediaModalContent { max-width: 98vw; max-height: 70vh; }
  #mediaModalContent video, #mediaModalContent audio { max-height: 50vh; }

  #mediaModalContent {
    max-width: 98vw;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  #mediaModalContent audio {
    max-width: 95vw;
    height: 48px;
    max-height: 48px;
  }
}

/* Très petit mobile */
@media (max-width: 360px) {
  .grid { grid-template-columns: 1fr; }
  header h1 { font-size: 0.8em; }
  .card { font-size: 0.85em; }
  button.upload { padding: 6px 8px; font-size: 0.9em; }
}
