/* ===================================================================
 * assets/css/suggest.css - Suggestions de la barre de recherche
 * Version 1.0.0 (autocompletion 1.4, etape 4) - voir assets/js/suggest.js
 * =================================================================== */

/* Liste calee sous le formulaire par le script (position fixe). */
.uj-sg {
    position: fixed;
    box-sizing: border-box;        /* largeur = celle du formulaire, bordure comprise */
    z-index: 9500;                 /* au-dessus de la fenetre de recherche mobile (9000) */
    overflow-y: auto;
    background: #fff;
    border: 1px solid #d0d6df;
    border-radius: 8px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .18);
    font-family: 'Segoe UI', system-ui, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.35;
    color: #222;
    text-align: left;
}
.uj-sg[hidden] { display: none; }

.uj-sg-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid #f0f2f5;
}
.uj-sg-item:last-child { border-bottom: 0; }
.uj-sg-item:hover,
.uj-sg-item.uj-sg-on { background: #eef4fb; }

.uj-sg-vig {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    object-fit: contain;
    border: 0;
    border-radius: 4px;
    background: #f3f5f8;
}

/* Une seule ligne par suggestion : "Produit - Type" absorbe la place
   restante et se tronque avec "...", "( Jeu )" garde toujours sa largeur,
   sur ordinateur comme sur mobile. */
.uj-sg-txt {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.uj-sg-nom {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}
.uj-sg-jeu {
    flex: 0 0 auto;
    white-space: nowrap;
    color: #6b7685;
    font-size: 13px;
}

/* En-tete de groupe : seulement si produits ET cartes repondent. */
.uj-sg-grp {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 7px 12px 5px;
    background: #f6f8fa;
    border-bottom: 1px solid #e6e9ee;
}
.uj-sg-titre {
    font-size: 11px;
    font-weight: 700;
    color: #6b7685;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.uj-sg-grp a,
.uj-sg-plus a { font-size: 12px; color: #005A9C; text-decoration: none; }
.uj-sg-grp a:hover,
.uj-sg-plus a:hover { text-decoration: underline; }

/* "Voir tous les resultats", quand un seul groupe repond. */
.uj-sg-plus {
    padding: 9px 12px;
    text-align: center;
    background: #f6f8fa;
    border-top: 1px solid #e6e9ee;
}
