/* Sélecteur de pictogramme partagé des pages GM (icon-picker.js) : bouton 😀 accolé au champ, fenêtre à onglets Emoji / Font Awesome, recherche, catégories, grille. Feuille AUTONOME (couleurs en dur, charte GM encre + fluo) ; classes kgip- et JAMAIS ad-/adv- (bloqueurs de publicité). */
/* Date: 2026-09-30 ; Version: 1.0.0 ; GSt / Claude ; NOUVEAU FICHIER — retour GSt du 30/09 : sélecteur d'emoji et d'icônes Font Awesome FREE avec recherche et insertion directe. */

.kgip-wrap { display: flex; align-items: stretch; gap: 6px; min-width: 0; }
.kgip-wrap > input { flex: 1 1 auto; min-width: 0; }
.kgip-open {
    flex: 0 0 auto; width: 42px; border: 1px solid #3a4038; border-radius: 6px; background: #151917;
    font-size: 1.15rem; line-height: 1; cursor: pointer; padding: 0;
}
.kgip-open:hover { border-color: #d4ff00; background: #1d231f; }

.kgip-overlay {
    position: fixed; inset: 0; z-index: 1000000; background: rgba(0, 0, 0, 0.72);
    display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box;
}
.kgip-box {
    width: min(760px, 100%); height: min(640px, 100%); display: flex; flex-direction: column; gap: 10px;
    background: #0d0f0e; border: 2px solid #d4ff00; border-radius: 10px; padding: 14px; box-sizing: border-box;
    font-family: sans-serif; color: #e8ece4;
}
.kgip-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kgip-tabs { display: flex; gap: 4px; }
.kgip-tab {
    border: 1px solid #3a4038; background: #151917; color: #cfd6c9; border-radius: 6px;
    padding: 7px 10px; font-size: 0.82rem; cursor: pointer; white-space: nowrap;
}
.kgip-tab.is-on { border-color: #d4ff00; color: #d4ff00; background: #1d231f; }
.kgip-search {
    flex: 1 1 200px; min-width: 0; padding: 8px 10px; border-radius: 6px; border: 1px solid #3a4038;
    background: #070908; color: #fff; font-size: 0.9rem;
}
.kgip-search:focus { outline: none; border-color: #d4ff00; }
.kgip-close {
    border: 1px solid #7a2a24; background: #3a1512; color: #ff8a80; border-radius: 6px;
    width: 36px; height: 34px; cursor: pointer;
}
.kgip-groups { display: flex; gap: 4px; flex-wrap: wrap; }
.kgip-groups:empty { display: none; }
.kgip-chip {
    border: 1px solid #2c322b; background: #111412; color: #aab3a4; border-radius: 999px;
    padding: 3px 9px; font-size: 0.72rem; cursor: pointer;
}
.kgip-chip.is-on { border-color: #d4ff00; color: #d4ff00; }

/* grid-auto-rows: max-content : les rangées gardent leur hauteur et la grille DÉFILE au lieu de s'écraser (même piège que la Médiathèque). */
.kgip-grid {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; align-content: start; scrollbar-color: #3a4038 #0d0f0e;
    display: grid; grid-auto-rows: max-content; gap: 4px;
    grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
}
.kgip-grid:has(.kgip-fa) { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.kgip-cell {
    border: 1px solid transparent; background: #111412; border-radius: 6px; cursor: pointer; color: #e8ece4;
}
.kgip-cell:hover, .kgip-cell:focus-visible { border-color: #d4ff00; background: #1d231f; outline: none; }
.kgip-emoji { height: 46px; font-size: 1.6rem; line-height: 1; padding: 0; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.kgip-fa { height: 70px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 4px; }
.kgip-fa i { font-size: 1.35rem; }
.kgip-fa span { max-width: 100%; font-size: 0.6rem; color: #8f998a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kgip-empty { grid-column: 1 / -1; text-align: center; color: #8f998a; padding: 24px 8px; }
.kgip-foot { font-size: 0.72rem; color: #8f998a; min-height: 1em; }