/* LES BADGES (04/10/2026) — cadres, lueurs et états en CSS pur : aucune image de plus, aucune source externe. */
.tr-badges { --bdg-c: #8a8f98; }
.bdg-resume { margin: 0 0 10px; color: var(--tr-texte-2); }
.bdg-filtre { margin: 0 0 8px; }
.bdg-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; margin: 8px 0 16px; }
.bdg-epingles { display: flex; gap: 10px; margin: 0 0 12px; }
.bdg-epingles .bdg { flex: 1; }

.bdg {
  --bdg-c: #8a8f98;
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%;
  min-height: 44px; padding: 10px 6px 8px; text-align: center; cursor: pointer;
  border-radius: var(--tr-rond, 16px); border: 1.5px solid var(--bdg-c);
  background: color-mix(in srgb, var(--tr-carte) 78%, transparent); color: var(--tr-texte);
  font: 600 12px/1.2 var(--tr-police, inherit);
}
.bdg:focus-visible { outline: 3px solid var(--tr-or); outline-offset: 2px; }
.bdg--commun { --bdg-c: #8a8f98; }
.bdg--rare { --bdg-c: #4aa3ff; }
.bdg--epique { --bdg-c: #b66bff; }
.bdg--legendaire { --bdg-c: #ffc83d; }
.bdg--obtenu.bdg--rare { box-shadow: 0 0 10px color-mix(in srgb, var(--bdg-c) 45%, transparent); }
.bdg--obtenu.bdg--epique { box-shadow: 0 0 14px color-mix(in srgb, var(--bdg-c) 55%, transparent); }
.bdg--obtenu.bdg--legendaire { box-shadow: 0 0 18px color-mix(in srgb, var(--bdg-c) 65%, transparent); animation: bdg-lueur 3.2s ease-in-out infinite; }
@keyframes bdg-lueur { 50% { box-shadow: 0 0 26px color-mix(in srgb, var(--bdg-c) 85%, transparent); } }
@media (prefers-reduced-motion: reduce) { .bdg--obtenu.bdg--legendaire { animation: none; } }

.bdg-medaille { position: relative; display: block; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: #000; }
.bdg-img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); }
.bdg-embleme { position: absolute; right: -2px; bottom: -2px; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--tr-fond, #000); object-fit: cover; }
.bdg-nom { overflow-wrap: anywhere; }
.bdg-etat { color: var(--tr-texte-2); font-weight: 500; font-size: 11px; }
.bdg-cadenas, .bdg-epingle { position: absolute; top: 4px; right: 6px; font-size: 13px; }

/* Verrouillé par l'abonnement : grisé, jamais caché — on voit ce qui existe. Secret : silhouette. À gagner : un peu voilé. */
.bdg--verrouille .bdg-medaille { filter: grayscale(1) brightness(.55); }
.bdg--verrouille { border-style: dashed; opacity: .85; }
.bdg--a-gagner .bdg-medaille, .bdg--inconnu .bdg-medaille { filter: grayscale(.7) brightness(.7); }
.bdg-img--secret { filter: brightness(0) contrast(2); opacity: .55; }
.bdg--obtenu .bdg-img--secret { filter: none; opacity: 1; }

.bdg-fiche { margin: 12px 0; text-align: left; border-color: var(--bdg-c); }
.bdg-fiche-tete { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.bdg-fiche-nom { margin: 0; font-size: 18px; }
.bdg-fiche-meta, .bdg-etat-fiche { margin: 2px 0; color: var(--tr-texte-2); font-size: 13px; }
.bdg-invitation { margin: 8px 0; font-size: 14px; }
.bdg-barre { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--tr-ligne) 80%, transparent); overflow: hidden; margin: 6px 0 10px; }
.bdg-barre > span { display: block; height: 100%; background: var(--tr-or); }
.bdg-defi-zone { margin: 12px 0; }
.bdg-defi-actions { display: flex; gap: 8px; margin-top: 10px; }
.bdg-defi-actions .bouton { flex: 1; min-height: 44px; }
.bdg-consentement p { margin: 6px 0; }
.bdg-lien-mur { margin-left: 8px; }

/* Podium de la communauté (04/10) : le cadre d'un rang 1-3 reprend la rareté des badges — un cadre, jamais un lot. */
.bdg-podium { border: 1.5px solid var(--bdg-c, #8a8f98); border-radius: 12px; }
.bdg-podium.bdg--rare { box-shadow: 0 0 8px color-mix(in srgb, var(--bdg-c) 40%, transparent); }
.bdg-podium.bdg--epique { box-shadow: 0 0 12px color-mix(in srgb, var(--bdg-c) 50%, transparent); }
.bdg-podium.bdg--legendaire { box-shadow: 0 0 16px color-mix(in srgb, var(--bdg-c) 60%, transparent); }

/* 18/10 (étape 1a) — LES MÉDAILLES VALIDÉES : une image entière par badge (plaque, écu ou disque), sans recadrage rond.
   Tout est préfixé bdg1a- : rien de global, les anciens casques + emblèmes gardent leurs règles. */
.bdg-medaille.bdg1a-medaille { width: 72px; height: 72px; border-radius: 0; overflow: visible; background: none; }
.bdg1a-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.bdg1a-medaille--secret { display: grid; place-items: center; }
.bdg1a-medaille--secret > * { grid-area: 1 / 1; }
.bdg1a-secret-marque { font: 800 34px/1 var(--tr-police, inherit); color: #e9e4d8; text-shadow: 0 1px 3px #000; }
.bdg-fiche-tete .bdg1a-medaille { flex: 0 0 auto; }
/* 18/10 (temps 1) — LA VITRINE TRIO ET DÉFI : 21 badges montrés, verrouillés, qui ne se gagnent pas encore. Moins sombre que le
   verrouillage d'abonnement pour que la médaille reste lisible ; le cadre pointillé et le cadenas disent « pas encore ». */
.bdg1a-a-venir { border-style: dashed; opacity: .9; }
.bdg1a-a-venir .bdg-medaille { filter: grayscale(.8) brightness(.72); }
.bdg1a-a-venir-texte { color: var(--tr-texte-2); }