.kitpro-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px 8px;
    margin: 6px 0;
    /* #208 : le conteneur ne doit jamais forcer la carte à s'élargir
       (cf. min-width sur .kitpro-badge ci-dessous pour la vraie cause). */
    max-width: 100%;
    min-width: 0;
}

/* #193 : chaque badge est un bloc atomique (libellé + valeur empilés) qui
   ne se coupe jamais en son milieu. Le conteneur ci-dessus gère le retour
   à la ligne PROPRE entre badges (flex-wrap) ; celui-ci empêche tout retour
   à la ligne À L'INTÉRIEUR d'un badge. */
.kitpro-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 100%;
    /* #208 : sans ceci, un flex item garde par défaut min-width:auto
       (= la largeur min-content de son contenu) et refuse de rétrécir sous
       cette taille, quoi que dise max-width plus bas dans l'arbre. */
    min-width: 0;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 10px;
    line-height: 1.25;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

a.kitpro-badge:hover {
    opacity: 0.8;
    text-decoration: none;
    color: inherit;
}

/* #237 — badge sans lien (ni facette ni recherche disponibles) : pas de
   retour visuel "cliquable" sur une pastille qui ne l'est pas. */
.kitpro-badge--static {
    cursor: default;
}

/* Libellé de la dimension (ex. « Capacité de stockage ») : discret, jamais
   plus large que le badge — un libellé long est tronqué avec « … » plutôt
   que de forcer le badge à s'élargir ou de casser sur 2 lignes (#193). Le
   `title` du badge porte le libellé complet pour qui a besoin de le lire. */
.kitpro-badge__label {
    display: block;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 400;
    font-size: 0.85em;
    opacity: 0.7;
}

/* #208 : « Intel® Core 5 210H (12M Cache, up to 4.80 GHz, 8 Cores,
   12 Threads) » (367px) débordait la carte de 101px malgré ce bloc — un
   `max-width: 100%` en pourcentage est ignoré par le navigateur pour le
   calcul de largeur INTRINSÈQUE d'un ancêtre lui-même dimensionné "auto"
   (ici .kitpro-badge, flex item) : le texte non coupé (white-space: nowrap)
   fuyait donc tel quel dans ce calcul et remontait jusqu'à agrandir la
   carte entière. Un max-width en px fixe, comme pour .kitpro-badge__label
   ci-dessus, coupe la fuite à la source ; l'ellipsis peut alors s'appliquer. */
.kitpro-badge__value {
    display: block;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

@media (max-width: 576px) {
    .kitpro-badge__label {
        max-width: 120px;
    }

    .kitpro-badge__value {
        max-width: 140px;
    }
}