/* =========================================
   CSS PERSONNALISÉ - SCORE DARTS (Neon Steel)
   ========================================= */

/* ===================
   RESET & BASE
   =================== */
body {
    font-family: var(--font-body);
    background-color: var(--color-bg);
    color: var(--color-text-body);
    line-height: var(--leading-normal);
}

/* ===================
   NAVIGATION
   =================== */
.navbar {
    background: var(--color-bg-white);
    border-bottom: var(--border-w-thick) solid var(--color-border);
    box-shadow: 0 4px 0 var(--color-border);
    position: relative;
    z-index: 100;
    overflow: visible;
    /* Override neon-steel.css fixed height et display flex */
    height: auto !important;
    display: block !important;
}

.navbar nav {
    overflow: visible;
}

.navbar-brand {
    color: var(--color-text-primary);
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: var(--font-bold);
    transition: color var(--transition-default);
}

.navbar-brand:hover {
    color: var(--color-accent);
}

.navbar-link {
    color: var(--color-text-body);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    padding: var(--space-2) var(--space-3);
    transition: all var(--transition-default);
    white-space: nowrap;
}

.navbar-link:hover {
    color: var(--color-text-primary);
    background: var(--color-bg-surface);
}

.navbar-link-active {
    color: var(--color-text-primary);
    font-weight: var(--font-bold);
}

.navbar-link-secondary {
    font-size: var(--text-sm);
    opacity: 0.8;
}

.navbar-link-secondary:hover {
    opacity: 1;
}

.navbar-burger {
    color: var(--color-text-primary);
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-2);
}

.navbar-mobile {
    border-top: var(--border-w) solid var(--color-border-light);
    background: var(--color-bg-white);
}

/* Menu mobile - override Tailwind avec ID selector (haute spécificité) */
#mobile-menu {
    display: none;
    margin-top: 0 !important;
    padding: var(--space-3) 0;
}

#mobile-menu:not(.hidden) {
    display: block !important;
}

/* Reset tous les margins Tailwind sur le menu */
#mobile-menu.mt-4,
#mobile-menu[class*="mt-"] {
    margin-top: 0 !important;
}

/* Reset spacing Tailwind */
#mobile-menu.space-y-2 > * + * {
    margin-top: 0 !important;
}

/* S'assurer que le premier lien est visible */
#mobile-menu > a:first-child {
    margin-top: 0 !important;
    position: relative !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Override pour le lien new-game dans le menu mobile */
#mobile-menu a.new-game-link {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
}

.navbar-mobile-link {
    display: block;
    color: var(--color-text-body);
    text-decoration: none;
    font-family: var(--font-body);
    font-weight: var(--font-medium);
    font-size: var(--text-base);
    padding: var(--space-2) var(--space-3);
    transition: color var(--transition-default);
}

.navbar-mobile-link:hover,
.navbar-mobile-link:active {
    color: var(--color-text-primary);
    background: var(--color-bg-surface);
}

/* Language Switcher */
.lang-switcher {
    display: flex;
    gap: var(--space-1);
}

.lang-btn {
    padding: var(--space-1) var(--space-2);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text-muted);
    text-decoration: none;
    background: var(--color-bg-surface);
    border: var(--border-w) solid var(--color-border-light);
    transition: all var(--transition-fast);
}

.lang-btn:hover {
    background: var(--color-bg);
    color: var(--color-text-primary);
    border-color: var(--color-border);
}

.lang-btn.active {
    background: var(--color-text-primary);
    color: var(--color-accent);
    border-color: var(--color-border);
    font-weight: var(--font-bold);
}

/* ===================
   FOOTER
   =================== */
.site-footer {
    background: var(--color-text-primary);
    border-top: var(--border-w-thick) solid var(--color-border);
}

.footer-text {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.footer-link {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition-default);
}

.footer-link:hover {
    color: var(--color-accent);
}

/* ===================
   ANIMATIONS
   =================== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ===================
   MODALES GLOBALES
   =================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-bg-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.2s ease-out;
}

.modal-overlay.hidden {
    display: none;
}

.modal-box {
    background: var(--color-bg-white);
    border: var(--border-w-heavy) solid var(--color-border);
    box-shadow: var(--shadow-brutal);
    padding: var(--space-8);
    max-width: 400px;
    width: 90%;
    text-align: center;
    animation: slideIn 0.3s ease-out;
}

.modal-icon {
    font-size: 3rem;
    margin-bottom: var(--space-4);
    line-height: 1;
}

.modal-title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
    line-height: var(--leading-snug);
}

.modal-text {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-body);
    margin-bottom: var(--space-6);
    line-height: var(--leading-normal);
}

.modal-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
}

.modal-btn {
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    border: var(--border-w-thick) solid var(--color-border);
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    min-width: 120px;
    min-height: var(--tap-min);
}

.modal-btn-secondary {
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-brutal-sm);
}

.modal-btn-secondary:hover {
    transform: translate(-1px, -1px);
    box-shadow: var(--shadow-brutal);
}

.modal-btn-secondary:active {
    transform: translate(2px, 2px);
    box-shadow: var(--shadow-brutal-active);
}

.modal-btn-primary {
    background: var(--color-accent);
    color: var(--color-accent-text);
    box-shadow: var(--shadow-brutal-sm);
}

.modal-btn-primary:hover {
    transform: translate(-1px, -1px);
    box-shadow: var(--shadow-brutal);
}

.modal-btn-primary:active {
    transform: translate(2px, 2px);
    box-shadow: var(--shadow-brutal-active);
}

.modal-btn-danger {
    background: var(--color-danger);
    color: var(--color-bg-white);
    box-shadow: var(--shadow-brutal-sm);
}

.modal-btn-danger:hover {
    transform: translate(-1px, -1px);
    box-shadow: var(--shadow-brutal);
}

.modal-btn-danger:active {
    transform: translate(2px, 2px);
    box-shadow: var(--shadow-brutal-active);
}

/* ===================
   HEADINGS
   =================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
    line-height: var(--leading-tight);
}

/* ===================
   UTILITY CLASSES
   =================== */
.text-muted {
    color: var(--color-text-muted);
}

.text-success {
    color: var(--color-success);
}

.text-danger {
    color: var(--color-danger);
}

.text-warning {
    color: var(--color-warn);
}

/* ===================
   RESPONSIVE
   =================== */
@media (max-width: 640px) {
    .modal-box {
        padding: var(--space-6);
        max-width: 95%;
    }

    .modal-icon {
        font-size: 2.5rem;
        margin-bottom: var(--space-3);
    }

    .modal-title {
        font-size: var(--text-lg);
    }

    .modal-btn {
        padding: var(--space-3) var(--space-4);
        font-size: var(--text-sm);
        min-width: 100px;
    }

    .modal-actions {
        flex-direction: column;
        gap: var(--space-2);
    }

    .modal-btn {
        width: 100%;
    }
}

/* =========================================
   HOMEPAGE - NEON STEEL
   ========================================= */

/* ===================
   CURRENT GAME BANNER
   =================== */
.home-current-game {
    background: var(--color-bg-white);
    border: var(--border-w-thick) solid var(--color-border);
    border-left: var(--border-w-heavy) solid var(--color-warn);
    box-shadow: var(--shadow-brutal-sm);
    padding: var(--space-4);
    text-align: center;
}

/* ===================
   TYPOGRAPHY
   =================== */
.home-title {
    font-family: var(--font-display);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
    line-height: var(--leading-tight);
}

.home-subtitle {
    font-family: var(--font-body);
    color: var(--color-text-body);
    line-height: var(--leading-normal);
}

.home-section-title {
    font-family: var(--font-display);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
    line-height: var(--leading-tight);
}

/* ===================
   HERO IMAGE
   =================== */
.home-hero-crop {
    max-width: 28rem;
    margin: 0 auto;
    overflow: hidden;
    border: var(--border-w-thick) solid var(--color-border);
    box-shadow: var(--shadow-brutal);
}

@media (max-width: 767px) {
    .home-hero-crop {
        max-height: 25vh;
    }
    .home-hero-crop .home-hero-image {
        height: 100%;
        object-fit: cover;
    }
}

.home-hero-image {
    display: block;
    width: 100%;
}

/* ===================
   BUTTONS
   =================== */
.home-btn {
    display: inline-block;
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    text-decoration: none;
    text-align: center;
    border: var(--border-w-thick) solid var(--color-border);
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    min-height: var(--tap-min);
}

.home-btn-primary {
    background: var(--color-accent);
    color: var(--color-accent-text);
    box-shadow: var(--shadow-brutal-sm);
}

.home-btn-primary:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-brutal);
}

.home-btn-primary:active {
    transform: translate(2px, 2px);
    box-shadow: var(--shadow-brutal-active);
}

.home-btn-warning {
    background: var(--color-warn);
    color: var(--color-bg-white);
    box-shadow: var(--shadow-brutal-sm);
}

.home-btn-warning:hover {
    transform: translate(-1px, -1px);
    box-shadow: var(--shadow-brutal);
}

/* Game mode buttons - unified accent color */
.home-btn-301,
.home-btn-501,
.home-btn-cricket {
    background: var(--color-accent);
    color: var(--color-accent-text);
    box-shadow: var(--shadow-brutal-sm);
}

.home-btn-301:hover,
.home-btn-501:hover,
.home-btn-cricket:hover {
    transform: translate(-1px, -1px);
    box-shadow: var(--shadow-brutal);
}

.home-btn-cta {
    background: var(--color-bg-white);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-brutal-sm);
}

.home-btn-cta:hover {
    transform: translate(-1px, -1px);
    box-shadow: var(--shadow-brutal);
    background: var(--color-bg-surface);
}

/* ===================
   GAME CARDS
   =================== */
.home-game-card {
    background: var(--color-bg-white);
    border: var(--border-w-thick) solid var(--color-border);
    box-shadow: var(--shadow-brutal-sm);
    padding: var(--space-6);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.home-game-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-brutal);
}

.home-game-card-301 {
    border-top: 6px solid var(--color-game-301);
}

.home-game-card-501 {
    border-top: 6px solid var(--color-success);
}

.home-game-card-cricket {
    border-top: 6px solid var(--color-game-cricket);
}

.home-game-number {
    font-family: var(--font-mono);
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
    margin-bottom: var(--space-2);
}

.home-game-number-301 {
    color: var(--color-game-301);
}

.home-game-number-501 {
    color: var(--color-success);
}

.home-game-number-cricket {
    color: var(--color-game-cricket);
}

.home-game-desc {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-body);
    margin-bottom: var(--space-4);
    line-height: var(--leading-normal);
}

/* ===================
   FEATURES SECTION
   =================== */
.home-features-section {
    background: var(--color-bg-surface);
}

.home-feature-item {
    text-align: left;
    padding: var(--space-5);
    background: var(--color-bg-white);
    border: var(--border-w-thick) solid var(--color-border);
    box-shadow: var(--shadow-brutal-sm);
    position: relative;
}

.home-feature-number {
    font-family: var(--font-mono);
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--color-accent);
    line-height: 1;
    display: block;
    margin-bottom: var(--space-3);
}

.home-feature-title {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}

.home-feature-desc {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text-body);
    line-height: var(--leading-normal);
}

/* ===================
   TRACKER BANNER
   =================== */
.home-tracker-banner {
    background: var(--color-bg-surface);
    border: var(--border-w-thick) solid var(--color-border);
    padding: var(--space-4) var(--space-6);
    box-shadow: var(--shadow-brutal-sm);
}

.home-tracker-banner-title {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.home-tracker-banner-desc {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text-body);
}

.home-btn-tracker {
    background: var(--color-bg-white);
    color: var(--color-text-primary);
    border: var(--border-w-thick) solid var(--color-border);
    box-shadow: var(--shadow-brutal-sm);
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.home-btn-tracker:hover {
    transform: translate(-1px, -1px);
    box-shadow: var(--shadow-brutal);
    background: var(--color-accent);
    color: var(--color-accent-text);
    border-color: var(--color-border);
}

/* ===================
   ARTICLE CARDS
   =================== */
.home-article-card {
    display: block;
    background: var(--color-bg-white);
    border: var(--border-w-thick) solid var(--color-border);
    box-shadow: var(--shadow-brutal-sm);
    overflow: hidden;
    text-decoration: none;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.home-article-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-brutal);
}

.home-article-title {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
    transition: color var(--transition-default);
}

.home-article-desc {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text-body);
    margin-top: var(--space-1);
    line-height: var(--leading-normal);
}

.home-link-accent {
    font-family: var(--font-body);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
    text-decoration: none;
    transition: color var(--transition-default);
}

.home-link-accent:hover {
    color: var(--color-accent);
}

/* ===================
   CTA SECTION
   =================== */
.home-cta-section {
    background: var(--color-accent);
}

.home-cta-title {
    font-family: var(--font-display);
    font-weight: var(--font-bold);
    color: var(--color-accent-text);
    line-height: var(--leading-tight);
}

.home-cta-desc {
    font-family: var(--font-body);
    color: var(--color-accent-text);
    opacity: 0.9;
    line-height: var(--leading-normal);
}

/* ===================
   HOMEPAGE RESPONSIVE
   =================== */
@media (max-width: 640px) {
    .home-current-game {
        padding: var(--space-3);
    }

    .home-game-card {
        padding: var(--space-4);
    }

    .home-game-number {
        font-size: var(--text-3xl);
    }

    .home-feature-icon {
        width: 3rem;
        height: 3rem;
    }

    .home-feature-icon svg {
        width: 1.5rem;
        height: 1.5rem;
    }

    .home-btn {
        padding: var(--space-3) var(--space-4);
        font-size: var(--text-sm);
    }
}

/* =========================================
   GLOBAL FORM STYLES (Override Tailwind)
   ========================================= */

/* Auth form cards */
.max-w-md .bg-white.rounded-lg.shadow-md,
.max-w-md > .bg-white {
    background: var(--color-bg-white) !important;
    border-radius: 0 !important;
    border: var(--border-w-thick) solid var(--color-border) !important;
    box-shadow: var(--shadow-brutal) !important;
}

/* Form inputs */
input[type="email"],
input[type="text"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
textarea,
select {
    font-family: var(--font-body) !important;
    border-radius: var(--radius-input) !important;
    border: var(--border-w) solid var(--color-border) !important;
    transition: all var(--transition-fast) !important;
}

input[type="email"]:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
    outline: none !important;
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 0 3px rgba(191, 255, 0, 0.3) !important;
    ring: none !important;
}

/* Submit buttons (blue buttons → Neon Steel primary) */
button[type="submit"].bg-blue-600,
button[type="submit"].bg-green-600,
.bg-blue-600.text-white.py-3,
.bg-green-600.text-white.py-3 {
    background: var(--color-accent) !important;
    color: var(--color-accent-text) !important;
    border-radius: 0 !important;
    border: var(--border-w-thick) solid var(--color-border) !important;
    box-shadow: var(--shadow-brutal-sm) !important;
    font-family: var(--font-body) !important;
    font-weight: var(--font-bold) !important;
    text-transform: uppercase !important;
    letter-spacing: var(--tracking-wide) !important;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast) !important;
    min-height: var(--tap-min) !important;
}

button[type="submit"].bg-blue-600:hover,
button[type="submit"].bg-green-600:hover,
.bg-blue-600.text-white.py-3:hover,
.bg-green-600.text-white.py-3:hover {
    background: var(--color-accent) !important;
    transform: translate(-2px, -2px) !important;
    box-shadow: var(--shadow-brutal) !important;
}

button[type="submit"].bg-blue-600:active,
button[type="submit"].bg-green-600:active {
    transform: translate(2px, 2px) !important;
    box-shadow: var(--shadow-brutal-active) !important;
}

/* Form labels */
label.text-sm.font-medium,
.block.text-sm.font-medium {
    font-family: var(--font-body) !important;
    font-weight: var(--font-bold) !important;
    color: var(--color-text-primary) !important;
    text-transform: uppercase !important;
    letter-spacing: var(--tracking-wide) !important;
    font-size: var(--text-xs) !important;
}

/* Auth links */
a.text-blue-600 {
    color: var(--color-text-primary) !important;
    font-weight: var(--font-bold) !important;
    transition: color var(--transition-default) !important;
}

a.text-blue-600:hover {
    color: var(--color-accent) !important;
    text-decoration: none !important;
}

/* Auth page titles */
.max-w-md h1.text-3xl {
    font-family: var(--font-display) !important;
    color: var(--color-text-primary) !important;
}

/* =========================================
   ARTICLE STYLES (Override Tailwind)
   ========================================= */

/* Related articles pills (À lire aussi) */
a.bg-blue-100.text-blue-700,
a.bg-blue-100 {
    background: var(--color-bg-white) !important;
    color: var(--color-text-primary) !important;
    border-radius: 0 !important;
    border: var(--border-w) solid var(--color-border) !important;
    font-family: var(--font-body) !important;
    font-weight: var(--font-medium) !important;
    transition: all var(--transition-fast) !important;
    padding: var(--space-2) var(--space-3) !important;
}

a.bg-blue-100.text-blue-700:hover,
a.bg-blue-100:hover {
    background: var(--color-accent) !important;
    color: var(--color-accent-text) !important;
    border-color: var(--color-border) !important;
    box-shadow: var(--shadow-brutal-sm) !important;
    transform: translate(-1px, -1px) !important;
}

/* Article cards on index page */
.bg-white.rounded-lg.shadow-md.overflow-hidden,
article.bg-white.rounded-lg {
    background: var(--color-bg-white) !important;
    border-radius: 0 !important;
    border: var(--border-w-thick) solid var(--color-border) !important;
    box-shadow: var(--shadow-brutal-sm) !important;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast) !important;
}

.bg-white.rounded-lg.shadow-md.overflow-hidden:hover,
article.bg-white.rounded-lg:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: var(--shadow-brutal) !important;
}

/* Article page container */
article.prose,
.prose {
    font-family: var(--font-body) !important;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4 {
    font-family: var(--font-display) !important;
    color: var(--color-text-primary) !important;
}

/* Article page cards/boxes */
.bg-gray-50.rounded-lg,
.bg-gray-100.rounded-lg,
.bg-blue-50.rounded-lg,
.bg-green-50.rounded-lg {
    background: var(--color-bg-surface) !important;
    border-radius: 0 !important;
    border: var(--border-w) solid var(--color-border-light) !important;
}

/* Tables in articles */
table {
    border: var(--border-w) solid var(--color-border) !important;
    font-family: var(--font-body) !important;
}

table th {
    background: var(--color-text-primary) !important;
    color: var(--color-bg-white) !important;
    font-weight: var(--font-bold) !important;
    border: var(--border-w) solid var(--color-border) !important;
}

table td {
    border: var(--border-w) solid var(--color-border-light) !important;
}

table tr:nth-child(even) {
    background: var(--color-bg-surface) !important;
}

/* ===================
   ARTICLE IMAGES
   =================== */
/* Images dans les articles (prose) */
article img,
.prose img {
    border: 3px solid var(--color-border);
    box-shadow: 4px 4px 0 var(--color-border);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    filter: contrast(1.05) saturate(1.05);
}

article img:hover,
.prose img:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--color-border);
}

/* Vignettes articles sur la page d'accueil */
.home-article-card img {
    border: none;
    border-bottom: 3px solid var(--color-border);
    box-shadow: none;
    filter: contrast(1.05) saturate(1.05);
    transition: transform var(--transition-default);
}

/* Vignettes articles sur la page index articles */
.bg-white.rounded-lg.shadow-md.overflow-hidden img,
article.bg-white.rounded-lg img {
    border-bottom: 3px solid var(--color-border);
    filter: contrast(1.05) saturate(1.05);
}

/* ===================
   ARTICLE CTA BLOCK
   =================== */
/* CTA principal (bleu → accent) */
article .bg-blue-600.text-white.rounded-lg,
article .bg-blue-600.rounded-lg {
    background: var(--color-accent) !important;
    color: var(--color-accent-text) !important;
    border-radius: 0 !important;
    border: var(--border-w-thick) solid var(--color-border) !important;
    box-shadow: var(--shadow-brutal) !important;
}

/* Bouton CTA (blanc) */
article .bg-blue-600 a.bg-white,
article a.bg-white.text-blue-600 {
    background: var(--color-bg-white) !important;
    color: var(--color-accent-text) !important;
    border-radius: 0 !important;
    border: var(--border-w-thick) solid var(--color-border) !important;
    box-shadow: var(--shadow-brutal-sm) !important;
    font-family: var(--font-body) !important;
    font-weight: var(--font-bold) !important;
    text-transform: uppercase !important;
    letter-spacing: var(--tracking-wide) !important;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast) !important;
}

article .bg-blue-600 a.bg-white:hover,
article a.bg-white.text-blue-600:hover {
    background: var(--color-bg-surface) !important;
    color: var(--color-text-primary) !important;
    transform: translate(-2px, -2px) !important;
    box-shadow: var(--shadow-brutal) !important;
}

/* ===================
   ARTICLE CALLOUTS
   =================== */
/* Info callout (bleu) */
article .bg-blue-50.border-l-4,
article .bg-blue-50 {
    background: var(--color-bg-surface) !important;
    border-radius: 0 !important;
    border-left: 4px solid var(--color-accent) !important;
}

/* Warning/Error callout (rouge) */
article .bg-red-50.border-l-4,
article .bg-red-50 {
    background: var(--color-danger-bg) !important;
    border-radius: 0 !important;
    border-left: 4px solid var(--color-danger) !important;
}

/* ===================
   ARTICLE NAVIGATION
   =================== */
/* Breadcrumb */
article nav.text-sm a.hover\:text-blue-600:hover {
    color: var(--color-accent) !important;
}

/* TOC links */
article ol.text-blue-600 a,
article .list-decimal a {
    color: var(--color-text-primary) !important;
    font-weight: var(--font-medium) !important;
}

article ol.text-blue-600 a:hover,
article .list-decimal a:hover {
    color: var(--color-accent) !important;
}

/* Back to list link */
article a.text-blue-600.hover\:text-blue-800,
article a.text-blue-600 {
    color: var(--color-text-primary) !important;
    font-weight: var(--font-bold) !important;
}

article a.text-blue-600:hover {
    color: var(--color-accent) !important;
}

/* ===================
   ARTICLE BADGES
   =================== */
/* Niveau badges */
article .bg-green-100.text-green-800 {
    background: var(--color-success) !important;
    color: var(--color-bg-white) !important;
    border-radius: 0 !important;
    border: var(--border-w) solid var(--color-border) !important;
}

article .bg-yellow-100.text-yellow-800 {
    background: var(--color-warn) !important;
    color: var(--color-bg-white) !important;
    border-radius: 0 !important;
    border: var(--border-w) solid var(--color-border) !important;
}

article .bg-red-100.text-red-800 {
    background: var(--color-danger) !important;
    color: var(--color-bg-white) !important;
    border-radius: 0 !important;
    border: var(--border-w) solid var(--color-border) !important;
}

/* ===================
   ARTICLE TABLE HEADER
   =================== */
article table thead.bg-blue-600 {
    background: var(--color-text-primary) !important;
}

article table thead.bg-blue-600 th {
    background: var(--color-text-primary) !important;
}

/* ===================
   ARTICLE SOMMAIRE
   =================== */
article nav.bg-gray-50.rounded-lg {
    background: var(--color-bg-surface) !important;
    border-radius: 0 !important;
    border: var(--border-w) solid var(--color-border) !important;
}

/* =========================================
   GLOBAL PAGE STYLES (Account, Admin, Contact)
   ========================================= */

/* ===================
   CARDS GLOBAL
   =================== */
/* Cards génériques (account, admin, etc.) */
.bg-white.rounded-lg.shadow-md,
.bg-white.rounded-xl.shadow-md,
.bg-white.rounded-lg.shadow,
.bg-white.rounded-xl.shadow {
    background: var(--color-bg-white) !important;
    border-radius: 0 !important;
    border: var(--border-w-thick) solid var(--color-border) !important;
    box-shadow: var(--shadow-brutal-sm) !important;
}

/* ===================
   ADMIN NAVIGATION
   =================== */
.max-w-6xl a.bg-green-600.text-white.rounded-lg,
.max-w-6xl a.bg-gray-200.text-gray-700.rounded-lg {
    border-radius: 0 !important;
    border: var(--border-w-thick) solid var(--color-border) !important;
    font-family: var(--font-body) !important;
    font-weight: var(--font-bold) !important;
    transition: all var(--transition-fast) !important;
}

.max-w-6xl a.bg-green-600.text-white.rounded-lg {
    background: var(--color-text-primary) !important;
    color: var(--color-accent) !important;
    box-shadow: 2px 2px 0 var(--color-border) !important;
}

.max-w-6xl a.bg-gray-200.text-gray-700.rounded-lg {
    background: var(--color-bg-surface) !important;
    color: var(--color-text-body) !important;
}

.max-w-6xl a.bg-gray-200.text-gray-700.rounded-lg:hover {
    background: var(--color-bg-white) !important;
    color: var(--color-text-primary) !important;
    transform: translate(-1px, -1px) !important;
    box-shadow: var(--shadow-brutal-sm) !important;
}

/* ===================
   ADMIN STAT CARDS
   =================== */
/* Icônes rondes → carrées */
.w-12.h-12.rounded-full {
    border-radius: 0 !important;
    border: var(--border-w) solid var(--color-border) !important;
}

/* Stat numbers */
.text-3xl.font-bold {
    font-family: var(--font-mono) !important;
}

/* ===================
   BADGES GLOBAL
   =================== */
/* Badge rounded-full → square */
span.rounded-full,
span.px-2.py-1.rounded-full {
    border-radius: 0 !important;
    border: var(--border-w) solid var(--color-border) !important;
}

/* Admin badge */
span.bg-red-100.text-red-700 {
    background: var(--color-danger) !important;
    color: var(--color-bg-white) !important;
}

/* Google connected badge */
span.bg-green-100.text-green-800 {
    background: var(--color-success) !important;
    color: var(--color-bg-white) !important;
}

/* Game type badges */
span.bg-blue-100.text-blue-700 {
    background: var(--color-game-301) !important;
    color: var(--color-bg-white) !important;
}

span.bg-green-100.text-green-700 {
    background: var(--color-success) !important;
    color: var(--color-bg-white) !important;
}

span.bg-purple-100.text-purple-700 {
    background: var(--color-game-cricket) !important;
    color: var(--color-bg-white) !important;
}

/* Status badges */
span.bg-gray-100.text-gray-600 {
    background: var(--color-bg-surface) !important;
    color: var(--color-text-body) !important;
}

span.bg-orange-100.text-orange-600 {
    background: var(--color-warn) !important;
    color: var(--color-bg-white) !important;
}

/* ===================
   BUTTONS - ALL PAGES
   =================== */
/* Blue buttons (login, account, etc.) */
.bg-blue-600.text-white,
button.bg-blue-600,
a.bg-blue-600 {
    background: var(--color-accent) !important;
    color: var(--color-accent-text) !important;
    border-radius: 0 !important;
    border: var(--border-w-thick) solid var(--color-border) !important;
    box-shadow: var(--shadow-brutal-sm) !important;
    font-family: var(--font-body) !important;
    font-weight: var(--font-bold) !important;
    text-transform: uppercase !important;
    letter-spacing: var(--tracking-wide) !important;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast) !important;
}

.bg-blue-600.text-white:hover,
button.bg-blue-600:hover,
a.bg-blue-600:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: var(--shadow-brutal) !important;
}

/* Green buttons (contact, etc.) */
.bg-green-600.text-white,
button.bg-green-600,
a.bg-green-600 {
    background: var(--color-accent) !important;
    color: var(--color-accent-text) !important;
    border-radius: 0 !important;
    border: var(--border-w-thick) solid var(--color-border) !important;
    box-shadow: var(--shadow-brutal-sm) !important;
    font-family: var(--font-body) !important;
    font-weight: var(--font-bold) !important;
    text-transform: uppercase !important;
    letter-spacing: var(--tracking-wide) !important;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast) !important;
}

.bg-green-600.text-white:hover,
button.bg-green-600:hover,
a.bg-green-600:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: var(--shadow-brutal) !important;
}

/* Red/Logout buttons */
.bg-red-600.text-white,
button.bg-red-600,
a.bg-red-600 {
    background: var(--color-danger) !important;
    color: var(--color-bg-white) !important;
    border-radius: 0 !important;
    border: var(--border-w-thick) solid var(--color-border) !important;
    box-shadow: var(--shadow-brutal-sm) !important;
    font-family: var(--font-body) !important;
    font-weight: var(--font-bold) !important;
    text-transform: uppercase !important;
    letter-spacing: var(--tracking-wide) !important;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast) !important;
}

.bg-red-600.text-white:hover,
button.bg-red-600:hover,
a.bg-red-600:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: var(--shadow-brutal) !important;
}

/* ===================
   PAGE TITLES
   =================== */
h1.text-3xl.font-bold {
    font-family: var(--font-display) !important;
    color: var(--color-text-primary) !important;
}

h2.text-xl.font-semibold,
h2.text-lg.font-semibold {
    font-family: var(--font-display) !important;
    color: var(--color-text-primary) !important;
}

/* ===================
   ERROR ALERTS
   =================== */
.bg-red-100.border.border-red-400 {
    background: var(--color-danger-bg) !important;
    border: var(--border-w-thick) solid var(--color-danger) !important;
    border-radius: 0 !important;
}

/* ===================
   GREEN LINK HOVER
   =================== */
a.text-green-600:hover {
    color: var(--color-accent) !important;
}

/* ===================
   PROGRESS BARS
   =================== */
.bg-gray-200.rounded-full.h-2 {
    background: var(--color-bg-surface) !important;
    border-radius: 0 !important;
    border: var(--border-w) solid var(--color-border-light) !important;
}

.bg-gray-200.rounded-full.h-2 > div {
    border-radius: 0 !important;
}

/* ===================
   ADMIN TABLES
   =================== */
.max-w-6xl table {
    border: var(--border-w) solid var(--color-border) !important;
}

.max-w-6xl table th {
    font-family: var(--font-body) !important;
    font-weight: var(--font-bold) !important;
    text-transform: uppercase !important;
    letter-spacing: var(--tracking-wide) !important;
    font-size: var(--text-xs) !important;
}

.max-w-6xl table td {
    font-family: var(--font-body) !important;
}