/* ============================================================
   Z7-GAME-FILTERS — LES FILTRES DE COMPETITION
   ============================================================
   Nom humain : « Filtres de competition ».
   Statut     : COMMUN.

   TROIS COMMANDES, TOUJOURS DANS CET ORDRE :

       [ 🎮 MODE DE JEU ]  [ 🕹️ TYPE DE JEU ]  [ 🌍 REGION ]

   C'est l'ordre de lecture des pastilles d'une carte de tournoi —
   « SOLO · BATTLE ROYALE · EUROPE » — et les deux doivent se lire
   pareil.

   LES COULEURS NE SONT PAS REDEFINIES ICI. Une commande selectionnee
   prend la couleur de sa categorie, et c'est EXACTEMENT celle de la
   pastille correspondante : les jetons `--z7-mode`, `--z7-type` et
   `--z7-region` de `Common/CSS/tags.css`. Mode -> bleu, type -> violet,
   region -> vert. Une seule source de verite pour ces trois couleurs ;
   si le bleu change un jour, il change aux deux endroits a la fois.

   CE QUI EST COMMUN : la structure, l'ordre, les dimensions, la
   hauteur, la typographie, les icones, le chevron, les bordures, le
   fond, le survol, l'etat ouvert, l'etat ferme, l'etat selectionne, les
   couleurs de categorie et l'espacement.

   CE QUI CHANGE SELON LA PAGE : les OPTIONS a l'interieur des menus,
   que chaque section remplit avec ses propres donnees. Le composant,
   lui, ne change pas.

   OU IL SERT : les trois barres de `Fortnite/fortnite.html` — Tournois,
   1V1 Token, Bracket — plus les deux commandes « First to » des
   defis, qui empruntent le meme dessin sans porter de categorie.

   COMPORTEMENT : `toggleZ7DD()` dans `Fortnite/JS/fortnite.js` ouvre un
   menu et ferme les autres.

   CE FICHIER A ETE DEPLACE DEPUIS `Fortnite/CSS/fortnite.css` SANS
   AUCUNE MODIFICATION DE REGLE : la barre Tournois etait la reference
   visuelle validee, et elle devait rester identique au pixel.

   Les barres qui ne declarent pas de categorie gardent le bleu par
   defaut — voir les valeurs de repli des `var()`.
   ============================================================ */

.z7-dd-wrap { position: relative; flex-shrink: 0; }
.z7-dd-btn {
    height: 32px;
    padding: 0 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: rgba(255,255,255,0.7);
    font-size: 11px;
    font-weight: 700;
    font-family: 'Arial Black', Arial, sans-serif;
    cursor: pointer;
    transition: border-color 0.15s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
}
.z7-dd-btn:hover { border-color: rgba(255,255,255,0.25); color: #fff; }
/*  LE LIBELLE COURT, EN MOBILE ET TABLETTE — une regle du COMPOSANT,
    la meme pour les trois barres.

        bureau  (> 900 px) : Mode de jeu | Type de jeu | Region
        mobile (<= 900 px) : Mode        | Type        | Region

    Le libelle est UN seul element flex (`.z7-dd-libelle`) : seul, le
    complement deviendrait un element flex a part et le `gap: 5px` du
    bouton s'intercalerait — le bureau ne serait plus identique au pixel.

    POURQUOI 900 px : c'est le seuil de `Common/CSS/mobile.css`, qui y
    resserre deja ces commandes, et celui des seuils mobiles de la barre
    (`Fortnite/CSS/fortnite.css`, section 4 bis). Ces seuils ont ete
    mesures avec des filtres de 229-230 px ; les libelles longs en
    faisaient 295, et « Region » passait sous la loupe a 390 px. */
@media (max-width: 900px) {
    .z7-dd-complement { display: none; }
}
/*  UNE COMMANDE SELECTIONNEE PREND LA COULEUR DE SA CATEGORIE, et
    cette couleur est celle des pastilles — jetons de
    `Common/CSS/tags.css`, pas une nuance recopiee :
        mode -> bleu, type -> violet, region -> vert.
    Les barres qui ne declarent pas de categorie gardent le bleu. */
.z7-dd-wrap--mode,   .z7-dd-menu--mode   { --z7-dd: var(--z7-mode);   --z7-dd-contour: var(--z7-mode-contour);   --z7-dd-fond: var(--z7-mode-fond); }
.z7-dd-wrap--type,   .z7-dd-menu--type   { --z7-dd: var(--z7-type);   --z7-dd-contour: var(--z7-type-contour);   --z7-dd-fond: var(--z7-type-fond); }
.z7-dd-wrap--region, .z7-dd-menu--region { --z7-dd: var(--z7-region); --z7-dd-contour: var(--z7-region-contour); --z7-dd-fond: var(--z7-region-fond); }

.z7-dd-btn.active {
    border-color: var(--z7-dd-contour, rgba(51, 198, 255, 0.5));
    background: var(--z7-dd-fond, rgba(51, 198, 255, 0.1));
    color: var(--z7-dd, #33C6FF);
}
.z7-dd-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    right: 0;
    min-width: 160px;
    background: rgba(13,17,23,0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 6px;
    z-index: 1000;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    flex-direction: column;
    gap: 2px;
}
.z7-dd-item {
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: rgba(255,255,255,0.6);
    font-size: 12px;
    font-weight: 700;
    font-family: 'Arial Black', Arial, sans-serif;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s;
    white-space: nowrap;
}
.z7-dd-item:hover { background: rgba(255,255,255,0.07); color: #fff; }
.z7-dd-item.selected {
    background: var(--z7-dd-fond, rgba(51, 198, 255, 0.15));
    color: var(--z7-dd, #33C6FF);
}