/* ============================================================
(Frontend) Common/CSS/tags.css
============================================================
LES PASTILLES D'INFORMATION DU SITE — une seule définition.
Le propriétaire a validé ce dessin le 04/10/2026, sur les cartes
« Compétitions à la une » de l'Accueil, et en a fait la référence des
tags du site. Il vit donc dans `Common/`, et non dans la feuille d'une
page : la prochaine page qui en a besoin le reprend, elle ne le
recopie pas.
LE DESSIN, ET CE QU'IL REMPLACE. Les anciennes pastilles étaient des
APLATS PLEINS de la couleur du tournoi, texte noir
(`featured-card-badge`, `.badge`). Trois d'entre elles dans une carte
de 230 px faisaient une guirlande, et la couleur criait plus fort que
l'information.
Ici : fond très sombre et translucide, contour coloré, un point de
couleur, texte clair. La couleur distingue la NATURE de
l'information — mode de jeu, format, région — elle ne hurle pas.
EMPLOI :
Solo
Battle Royale
Europe
First to 5
Les quatre classes de sens ci-dessus sont des alias des couleurs. Pour
un usage nouveau, on prend une couleur directement
(`z7-tag--bleu`, `--violet`, `--vert`, `--or`, `--rouge`, `--neutre`)
plutôt que d'inventer une classe de plus.
`z7-tags` est le conteneur : il ne fait qu'aligner et faire retomber
les pastilles à la ligne.
============================================================ */
/* LES TROIS COULEURS DE SENS, ECRITES UNE FOIS.
============================================================
Elles etaient des valeurs en dur, repetees a chaque regle. Les
filtres de la page Tournois doivent porter exactement les memes :
un filtre « Mode » et une pastille « Solo » parlent de la meme
chose, ils ne peuvent pas etre bleus a deux nuances pres.
MODE DE JEU (Solo, Duo, Trio...) -> BLEU
TYPE DE JEU (Battle Royale, Recharge...) -> VIOLET
REGION (Europe, NA East...) -> VERT
`-contour` et `-fond` sont les deux declinaisons dont une commande
a besoin : un contour marque, un fond tres leger. */
:root {
--z7-mode: #33C6FF;
--z7-mode-contour: rgba(51, 198, 255, 0.45);
--z7-mode-fond: rgba(51, 198, 255, 0.10);
--z7-type: #8b5cf6;
--z7-type-contour: rgba(139, 92, 246, 0.5);
--z7-type-fond: rgba(139, 92, 246, 0.10);
--z7-region: #4ade80;
--z7-region-contour: rgba(74, 222, 128, 0.4);
--z7-region-fond: rgba(74, 222, 128, 0.10);
/* LA QUATRIEME CATEGORIE — LA REGLE DU DUEL. (06/10/2026)
============================================================
« First to 3 », « First to 5 » : ce n'est ni un mode, ni un
type, ni une region. C'est la REGLE qui dit quand le duel
s'arrete, et aucune des trois categories existantes ne la
contient.
POURQUOI UNE CATEGORIE ET NON UNE COULEUR PRISE AU HASARD. Le
commentaire en tete invite a prendre une couleur directement
(`z7-tag--or`...) pour un usage nouveau. Ici ce n'est pas un
usage, c'est une CATEGORIE : elle sera lue partout ou une regle
de duel s'affiche — carte de defi, fiche d'un duel, filtre
« First to », et demain un bracket. Elle merite donc son jeton,
comme les trois autres.
POURQUOI L'INDIGO. L'or dit l'argent partout sur le site
(Coins, cagnotte, prix d'entree) et le rouge dit le danger :
les prendre ici ferait mentir deux couleurs a la fois. L'indigo
#6366f1 est deja celui du decompte et de la barre de
progression — une couleur de STRUCTURE, jamais de categorie.
Elle est donc libre, et elle se distingue des trois autres.
Les couleurs deja validees ne changent pas. */
--z7-regle: #6366f1;
--z7-regle-contour: rgba(99, 102, 241, 0.5);
--z7-regle-fond: rgba(99, 102, 241, 0.10);
}
.z7-tags {
display: flex;
flex-wrap: wrap;
gap: 3px;
min-width: 0;
}
.z7-tag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 6px 2px 5px;
border-radius: 6px;
background: rgba(5, 8, 15, 0.75);
border: 1px solid rgba(255, 255, 255, 0.12);
font-family: Arial, sans-serif;
font-size: 8px;
font-weight: 900;
letter-spacing: 0.6px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.82);
white-space: nowrap;
line-height: 1.5;
}
/* LE POINT DE COULEUR EST UN PSEUDO-ÉLÉMENT : aucune icône à charger,
aucune balise de plus dans le gabarit, et il disparaît forcément avec
la pastille. Sa couleur est portée par la classe de couleur. */
.z7-tag::before {
content: '';
width: 4.5px;
height: 4.5px;
border-radius: 50%;
flex-shrink: 0;
background: currentColor;
}
/* Un cran plus grand, pour une page qui a la place (fiche d'un tournoi,
en-tête de liste). Le dessin ne change pas. */
.z7-tag--md { font-size: 9.5px; padding: 3px 8px 3px 7px; gap: 5px; }
.z7-tag--md::before { width: 5px; height: 5px; }
/* ---- les couleurs ---- */
.z7-tag--bleu { border-color: rgba(51, 198, 255, 0.45); }
.z7-tag--bleu::before { background: #33C6FF; }
.z7-tag--violet { border-color: rgba(139, 92, 246, 0.5); }
.z7-tag--violet::before { background: #8b5cf6; }
.z7-tag--vert { border-color: rgba(74, 222, 128, 0.4); }
.z7-tag--vert::before { background: #4ade80; }
.z7-tag--or { border-color: rgba(255, 183, 0, 0.45); }
.z7-tag--or::before { background: #FFB700; }
.z7-tag--rouge { border-color: rgba(239, 68, 68, 0.45); }
.z7-tag--rouge::before { background: #ef4444; }
.z7-tag--neutre { border-color: rgba(255, 255, 255, 0.18); }
.z7-tag--neutre::before { background: rgba(255, 255, 255, 0.5); }
/* ---- les alias de sens, pour ne pas choisir une couleur deux fois ----
Ils lisent les jetons : une commande de filtre pose la meme couleur
en ecrivant `var(--z7-mode)`, et les deux ne peuvent plus diverger. */
.z7-tag--mode { border-color: var(--z7-mode-contour); }
.z7-tag--mode::before { background: var(--z7-mode); }
.z7-tag--type { border-color: var(--z7-type-contour); }
.z7-tag--type::before { background: var(--z7-type); }
.z7-tag--region { border-color: var(--z7-region-contour); }
.z7-tag--region::before { background: var(--z7-region); }
.z7-tag--regle { border-color: var(--z7-regle-contour); }
.z7-tag--regle::before { background: var(--z7-regle); }