Modèle:Badge/styles.css

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

/* === Base du badge === */
.badge {
display: inline-block;
font-size: 0.5em;
font-weight: 700;
padding: 0.45em 0.85em;
border-radius: 8px;
margin-left: 0.5em;
vertical-align: middle;
text-transform: uppercase;
letter-spacing: 0.8px;
transition: all 0.2s ease;
white-space: nowrap;
line-height: 1.2;
border: none;
box-shadow: none;
}

.badge:hover {
filter: brightness(1.1);
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 foncé) */
.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;
}

/* 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;
}

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

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

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

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

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

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

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

/* Icône seule */
.badge .fa-solid:only-child,
.badge .fa-regular:only-child,
.badge .fa-brands:only-child {
margin-right: 0;
}

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

.badge-sm {
font-size: 0.4em;
padding: 0.35em 0.7em;
border-radius: 6px;
}

.badge-lg {
font-size: 0.6em;
padding: 0.5em 1em;
border-radius: 10px;
}

.badge-xl {
font-size: 0.7em;
padding: 0.6em 1.2em;
border-radius: 12px;
}

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

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

.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 pill (arrondi complet) */
.badge-pill {
border-radius: 50px;
}

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

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

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

/* === Responsive === */

@media (max-width: 768px) {
.badge {
font-size: 0.45em;
padding: 0.4em 0.75em;
margin-left: 0.3em;
letter-spacing: 0.6px;
}

.badge-sm {
font-size: 0.35em;
padding: 0.3em 0.6em;
}

.badge-lg {
font-size: 0.5em;
padding: 0.45em 0.9em;
}
}

/* === 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;
}

/* === Support mode sombre === */

@media (prefers-color-scheme: dark) {
.badge-light {
background: #4b5563;
color: #f9fafb;
}

.badge-warning {
color: #1f2937;
}

.badge-premium {
color: #1f2937;
}
}

/* === Accessibilité === */
/* 
.badge:focus-visible {
outline: 3px solid currentColor;
outline-offset: 2px;
}*/

/* Réduction de mouvement */
@media (prefers-reduced-motion: reduce) {
.badge {
transition: none;
}

.badge:hover {
transform: none;
}
}