Modèle:Badge/styles.css

/* ============================================
   BADGE SYSTEM - Design FLAT lisible
   ============================================ */

/* === Base du badge === */
.badge {
display: inline-block;
font-size: 0.65em;
font-weight: 600;
padding: 0.5em 0.9em;
border-radius: 3px;
margin-left: 0.5em;
vertical-align: middle;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.2s ease;
white-space: nowrap;
line-height: 1.4;
border: none;
box-shadow: none;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.badge:hover {
filter: brightness(1.15);
transform: translateY(-1px);
}

/* === Présets FLAT === */

/* Default (gris neutre) */
.badge-default {
background: #6b7280;
color: white;
}

/* Beta (violet) */
.badge-beta {
background: #7c3aed;
color: white;
}

/* Alpha (orange) */
.badge-alpha {
background: #f97316;
color: white;
}

/* New (vert menthe) */
.badge-new {
background: #10b981;
color: white;
}

/* Stable (bleu) */
.badge-stable {
background: #3b82f6;
color: white;
}

/* Deprecated (rouge) */
.badge-deprecated {
background: #ef4444;
color: white;
}

/* WIP (violet clair) */
.badge-wip {
background: #8b5cf6;
color: white;
}

/* Experimental (rose/magenta) */
.badge-experimental {
background: #ec4899;
color: white;
}

/* Info (cyan) */
.badge-info {
background: #06b6d4;
color: white;
}

/* Warning (orange vif) */
.badge-warning {
background: #f59e0b;
color: #1f2937;
font-weight: 700;
}

/* Success (vert clair) */
.badge-success {
background: #22c55e;
color: white;
}

/* Danger (rouge vif) */
.badge-danger {
background: #f43f5e;
color: white;
}

/* Premium (or) */
.badge-premium {
background: #f59e0b;
color: #1f2937;
font-weight: 700;
}

/* Dark (noir) */
.badge-dark {
background: #1f2937;
color: white;
}

/* Light (gris clair) */
.badge-light {
background: #e5e7eb;
color: #1f2937;
font-weight: 700;
}

/* Discord (bleu Discord) */
.badge-discord {
background: #5865F2;
color: white;
}

/* Twitter/X (noir) */
.badge-twitter {
background: #14171A;
color: white;
}

/* Instagram */
.badge-instagram {
background: #E1306C;
color: white;
}

/* === Icônes === */

/* Icône AVANT le texte */
.badge > span:first-child,
.badge > i:first-child {
margin-right: 0;
margin-left: 0.6em;
}

/* Icône APRÈS le texte */
.badge > span:last-child:not(:first-child),
.badge > i:last-child:not(:first-child) {
margin-left: 0;
margin-right: 0.6em;
}

/* Alignement vertical des icônes FontAwesome */
.badge .fa,
.badge .fas,
.badge .far,
.badge .fab {
font-size: 0.6em;
vertical-align: middle;
line-height: 1;
display: inline-block;
}

/* Correction pour l'extension FontAwesome qui génère des <span> */
.badge span[class*="fa-"] {
margin-left: 0.6em;
margin-right: 0;
}

.badge span[class*="fa-"]:first-child {
margin-left: 0;
margin-right: 0.6em;
}


/* === Variantes de taille === */

.badge-sm {
font-size: 0.55em;
padding: 0.4em 0.75em;
}

.badge-lg {
font-size: 0.75em;
padding: 0.6em 1.1em;
}

.badge-xl {
font-size: 0.85em;
padding: 0.7em 1.3em;
}

/* === Variantes de style === */

/* Badge outline */
.badge-outline {
background: transparent;
border: 2px solid currentColor;
font-weight: 700;
}

.badge-outline.badge-beta {
color: #7c3aed;
border-color: #7c3aed;
}

.badge-outline.badge-alpha {
color: #f97316;
border-color: #f97316;
}

.badge-outline.badge-new {
color: #10b981;
border-color: #10b981;
}

.badge-outline.badge-info {
color: #06b6d4;
border-color: #06b6d4;
}

.badge-outline.badge-stable {
color: #3b82f6;
border-color: #3b82f6;
}

/* Badge pill (arrondi complet) */
.badge-pill {
border-radius: 50px;
}

/* Badge carré */
.badge-square {
border-radius: 0;
}

/* === Effets hover spéciaux === */

.badge-glow:hover {
box-shadow: 0 0 15px currentColor;
}

/* === Classes utilitaires === */

/* Pas de majuscules */
.badge-no-uppercase {
text-transform: none;
}

/* Pas d'effet hover */
.badge-no-hover:hover {
filter: none;
transform: none;
}

/* Texte en gras normal */
.badge-normal {
font-weight: 500;
}

/* === Icônes FontAwesome === */

.badge .fa-solid,
.badge .fa-regular,
.badge .fa-brands {
margin-right: 0.45em;
font-size: 1.1em;
vertical-align: middle;
}

/* Icône seule - version simplifiée */
.badge-icon-only .fa-solid,
.badge-icon-only .fa-regular,
.badge-icon-only .fa-brands {
margin-right: 0;
}