/* Sélecteur de Médiathèque PARTAGÉ (media-picker.js, window.KlugleMediaPicker) : fenêtre .kmp-*, construite par le script, utilisée par Adventure Config et Options. */
/* Date: 2026-10-23 ; Version: 1.1.0 ; GSt / Claude ; Mode son (media-picker.js 1.2.0) : vignette 🎵 et bouton ▶ d'écoute. */
/* Date: 2026-10-19 ; Version: 1.0.0 ; GSt / Claude ; NOUVEAU FICHIER — retours GSt du 19/10 : en-tête (titre, fichier actuel, Actualiser, Retour), barre (recherche, curseur de taille), dossiers + grille jusqu'au bas du cadre, vignettes entières sur damier, vignette actuelle encadrée. */

.kmp-overlay {
    position: fixed; inset: 0; z-index: 1000001; display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.82); backdrop-filter: blur(3px); --kmp-size: 130px;
}
.kmp-modal {
    width: 94vw; max-width: 1100px; height: 88vh; box-sizing: border-box; display: flex; flex-direction: column;
    background: #15151d; border: 1px solid #444; border-radius: 10px; padding: 14px 16px 10px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8); color: #ecf0f1; font-family: Arial, Helvetica, sans-serif; text-align: left;
}
.kmp-head { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.kmp-head h3 { margin: 0; font-size: 1.05rem; color: #ecf0f1; white-space: nowrap; text-transform: none; }
.kmp-current { flex: 1 1 auto; min-width: 0; font-size: 0.78rem; color: #bdc3c7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kmp-current strong { color: #C6FF00; }
.kmp-current em { color: #7f8c8d; }
.kmp-actions { display: flex; gap: 8px; flex-shrink: 0; }
.kmp-btn { background: #22222d; color: #ecf0f1; border: 1px solid #555; border-radius: 6px; padding: 7px 12px; font-size: 0.78rem; font-weight: bold; cursor: pointer; white-space: nowrap; }
.kmp-btn:hover:not(:disabled) { border-color: #9b59b6; color: #fff; }
.kmp-btn:disabled { opacity: 0.5; cursor: wait; }
.kmp-btn-back { border-color: #7f8c8d; }
.kmp-toolbar { display: flex; align-items: center; gap: 14px; margin: 10px 0 8px; flex-shrink: 0; }
.kmp-search { flex: 1 1 auto; min-width: 0; box-sizing: border-box; padding: 8px 10px; background: #0b0b0f; color: #fff; border: 1px solid #444; border-radius: 6px; font-size: 0.85rem; }
.kmp-size { display: flex; align-items: center; gap: 6px; color: #7f8c8d; font-size: 0.75rem; flex-shrink: 0; cursor: pointer; }
.kmp-size i:last-child { font-size: 1rem; }
.kmp-size input[type=range] { width: 140px; accent-color: #9b59b6; }
.kmp-workspace { display: flex; gap: 12px; flex: 1 1 auto; min-height: 0; }
.kmp-folders { width: 200px; flex-shrink: 0; overflow-y: auto; margin: 0; padding: 0; list-style: none; background: #101016; border: 1px solid #333; border-radius: 6px; }
.kmp-folder { padding: 6px 12px; font-size: 0.75rem; color: #bdc3c7; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kmp-folder i { margin-right: 6px; color: #f1c40f; width: 12px; text-align: center; }
.kmp-folder:hover { background: #22222d; color: #fff; }
.kmp-folder.active { background: rgba(155, 89, 182, 0.18); color: #c39bd3; font-weight: bold; }
.kmp-grid {
    flex: 1 1 auto; min-width: 0; overflow-y: auto; display: grid; align-content: start; gap: 10px; padding-right: 4px;
    grid-auto-rows: max-content; /* sans lui, les lignes se compriment pour tenir dans la fenêtre et les vignettes s'écrasent */
    grid-template-columns: repeat(auto-fill, minmax(var(--kmp-size), 1fr));
}
.kmp-empty { grid-column: 1 / -1; text-align: center; color: #7f8c8d; padding: 24px; }
.kmp-item { background: #101016; border: 1px solid #333; border-radius: 6px; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; }
.kmp-item:hover { border-color: #9b59b6; box-shadow: 0 0 0 1px #9b59b6; }
.kmp-item.is-current { border-color: #C6FF00; box-shadow: 0 0 0 2px #C6FF00; }
/* Vignette ENTIÈRE (contain) sur un damier : un PNG transparent (cadre, calque) reste lisible. */
.kmp-thumb {
    height: calc(var(--kmp-size) * 0.75); flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden;
    background-color: #2a2a33; background-size: 14px 14px; background-position: 0 0, 0 7px, 7px -7px, -7px 0;
    background-image: linear-gradient(45deg, #3a3a45 25%, transparent 25%), linear-gradient(-45deg, #3a3a45 25%, transparent 25%),
                      linear-gradient(45deg, transparent 75%, #3a3a45 75%), linear-gradient(-45deg, transparent 75%, #3a3a45 75%);
}
.kmp-thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.kmp-thumb i { font-size: 1.6rem; color: #7f8c8d; }
.kmp-name { padding: 4px 6px; font-size: 0.66rem; color: #bdc3c7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-top: 1px solid #222; }

@media (max-width: 700px) {
    .kmp-modal { width: 100vw; height: 100vh; max-width: none; border-radius: 0; padding: 10px; }
    .kmp-head { flex-wrap: wrap; gap: 6px 10px; }
    .kmp-current { order: 3; flex-basis: 100%; }
    .kmp-btn { padding: 6px 9px; }
    .kmp-workspace { flex-direction: column; }
    .kmp-folders { width: auto; max-height: 22vh; }
    .kmp-size input[type=range] { width: 90px; }
}

/* v1.1.0 — mode son : note de musique et bouton ▶ / ■ d'écoute, posé dans le coin de la vignette. */
.kmp-thumb { position: relative; }
.kmp-play { position: absolute; right: 6px; bottom: 6px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid #f1c40f; background: rgba(0,0,0,0.6); color: #f1c40f; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.kmp-play i { font-size: 0.8rem !important; color: inherit !important; }
.kmp-play:hover, .kmp-play.is-playing { background: #f1c40f; color: #000; }