:root {
              /* Couleur primaire configurable - surcharge celle du custom.css */
              --color-primary: #be2026 !important;

              --color-primary-50: #FBF3F4;
              --color-primary-100: #F8E8E9;
              --color-primary-200: #F2D2D3;
              --color-primary-300: #EBBCBD;
              --color-primary-400: #E5A5A8;
              --color-primary-500: #D8797C;
              --color-primary-600: #be2026;
              --color-primary-700: #A11B20;
              --color-primary-800: #85161A;
              --color-primary-900: #681114;
            }

            /* =========================
               CLASSES TAILWIND ROUGE SURCHARGÉES
               ========================= */

            /* Backgrounds rouges - toutes les nuances */
            .bg-red-50 { background-color: var(--color-primary-50) !important; }
            .bg-red-100 { background-color: var(--color-primary-100) !important; }
            .bg-red-200 { background-color: var(--color-primary-200) !important; }
            .bg-red-300 { background-color: var(--color-primary-300) !important; }
            .bg-red-400 { background-color: var(--color-primary-400) !important; }
            .bg-red-500 { background-color: var(--color-primary-500) !important; }
            .bg-red-600 { background-color: var(--color-primary-600) !important; }
            .bg-red-700 { background-color: var(--color-primary-700) !important; }
            .bg-red-800 { background-color: var(--color-primary-800) !important; }
            .bg-red-900 { background-color: var(--color-primary-900) !important; }

            /* Textes rouges - toutes les nuances */
            .text-red-50 { color: var(--color-primary-50) !important; }
            .text-red-100 { color: var(--color-primary-100) !important; }
            .text-red-200 { color: var(--color-primary-200) !important; }
            .text-red-300 { color: var(--color-primary-300) !important; }
            .text-red-400 { color: var(--color-primary-400) !important; }
            .text-red-500 { color: var(--color-primary-500) !important; }
            .text-red-600 { color: var(--color-primary-600) !important; }
            .text-red-700 { color: var(--color-primary-700) !important; }
            .text-red-800 { color: var(--color-primary-800) !important; }
            .text-red-900 { color: var(--color-primary-900) !important; }

            /* Bordures rouges - toutes les nuances */
            .border-red-50 { border-color: var(--color-primary-50) !important; }
            .border-red-100 { border-color: var(--color-primary-100) !important; }
            .border-red-200 { border-color: var(--color-primary-200) !important; }
            .border-red-300 { border-color: var(--color-primary-300) !important; }
            .border-red-400 { border-color: var(--color-primary-400) !important; }
            .border-red-500 { border-color: var(--color-primary-500) !important; }
            .border-red-600 { border-color: var(--color-primary-600) !important; }
            .border-red-700 { border-color: var(--color-primary-700) !important; }
            .border-red-800 { border-color: var(--color-primary-800) !important; }
            .border-red-900 { border-color: var(--color-primary-900) !important; }

            /* =========================
               ÉTATS HOVER ET FOCUS
               ========================= */

            /* Hover backgrounds */
            .hover\:bg-red-50:hover { background-color: var(--color-primary-50) !important; }
            .hover\:bg-red-100:hover { background-color: var(--color-primary-100) !important; }
            .hover\:bg-red-200:hover { background-color: var(--color-primary-200) !important; }
            .hover\:bg-red-300:hover { background-color: var(--color-primary-300) !important; }
            .hover\:bg-red-400:hover { background-color: var(--color-primary-400) !important; }
            .hover\:bg-red-500:hover { background-color: var(--color-primary-500) !important; }
            .hover\:bg-red-600:hover { background-color: var(--color-primary-600) !important; }
            .hover\:bg-red-700:hover { background-color: var(--color-primary-700) !important; }
            .hover\:bg-red-800:hover { background-color: var(--color-primary-800) !important; }
            .hover\:bg-red-900:hover { background-color: var(--color-primary-900) !important; }

            /* Hover textes */
            .hover\:text-red-50:hover { color: var(--color-primary-50) !important; }
            .hover\:text-red-100:hover { color: var(--color-primary-100) !important; }
            .hover\:text-red-200:hover { color: var(--color-primary-200) !important; }
            .hover\:text-red-300:hover { color: var(--color-primary-300) !important; }
            .hover\:text-red-400:hover { color: var(--color-primary-400) !important; }
            .hover\:text-red-500:hover { color: var(--color-primary-500) !important; }
            .hover\:text-red-600:hover { color: var(--color-primary-600) !important; }
            .hover\:text-red-700:hover { color: var(--color-primary-700) !important; }
            .hover\:text-red-800:hover { color: var(--color-primary-800) !important; }
            .hover\:text-red-900:hover { color: var(--color-primary-900) !important; }

            /* Hover bordures */
            .hover\:border-red-50:hover { border-color: var(--color-primary-50) !important; }
            .hover\:border-red-100:hover { border-color: var(--color-primary-100) !important; }
            .hover\:border-red-200:hover { border-color: var(--color-primary-200) !important; }
            .hover\:border-red-300:hover { border-color: var(--color-primary-300) !important; }
            .hover\:border-red-400:hover { border-color: var(--color-primary-400) !important; }
            .hover\:border-red-500:hover { border-color: var(--color-primary-500) !important; }
            .hover\:border-red-600:hover { border-color: var(--color-primary-600) !important; }
            .hover\:border-red-700:hover { border-color: var(--color-primary-700) !important; }
            .hover\:border-red-800:hover { border-color: var(--color-primary-800) !important; }
            .hover\:border-red-900:hover { border-color: var(--color-primary-900) !important; }

            /* Focus states */
            .focus\:border-red-500:focus, .focus\:ring-red-500:focus {
              border-color: var(--color-primary-500) !important;
              box-shadow: 0 0 0 2px rgba(190, 32, 38, 0.5) !important;
            }
            .focus\:border-red-600:focus, .focus\:ring-red-600:focus {
              border-color: var(--color-primary-600) !important;
              box-shadow: 0 0 0 2px rgba(190, 32, 38, 0.5) !important;
            }

            /* =========================
               GRADIENTS
               ========================= */
            .from-red-50 { --tw-gradient-from: var(--color-primary-50) !important; }
            .from-red-100 { --tw-gradient-from: var(--color-primary-100) !important; }
            .from-red-200 { --tw-gradient-from: var(--color-primary-200) !important; }
            .from-red-300 { --tw-gradient-from: var(--color-primary-300) !important; }
            .from-red-400 { --tw-gradient-from: var(--color-primary-400) !important; }
            .from-red-500 { --tw-gradient-from: var(--color-primary-500) !important; }
            .from-red-600 { --tw-gradient-from: var(--color-primary-600) !important; }
            .from-red-700 { --tw-gradient-from: var(--color-primary-700) !important; }
            .from-red-800 { --tw-gradient-from: var(--color-primary-800) !important; }
            .from-red-900 { --tw-gradient-from: var(--color-primary-900) !important; }

            .to-red-50 { --tw-gradient-to: var(--color-primary-50) !important; }
            .to-red-100 { --tw-gradient-to: var(--color-primary-100) !important; }
            .to-red-200 { --tw-gradient-to: var(--color-primary-200) !important; }
            .to-red-300 { --tw-gradient-to: var(--color-primary-300) !important; }
            .to-red-400 { --tw-gradient-to: var(--color-primary-400) !important; }
            .to-red-500 { --tw-gradient-to: var(--color-primary-500) !important; }
            .to-red-600 { --tw-gradient-to: var(--color-primary-600) !important; }
            .to-red-700 { --tw-gradient-to: var(--color-primary-700) !important; }
            .to-red-800 { --tw-gradient-to: var(--color-primary-800) !important; }
            .to-red-900 { --tw-gradient-to: var(--color-primary-900) !important; }

            /* =========================
               CLASSES CUSTOM HARMONIEUSES
               ========================= */

            /* Boutons primaires */
            .btn-primary {
              background-color: var(--color-primary-600) !important;
              border: 1px solid var(--color-primary-600) !important;
            }
            .btn-primary:hover {
              background-color: var(--color-primary-700) !important;
              border-color: var(--color-primary-700) !important;
            }

            /* Classes utilitaires custom */
            .text-primary { color: var(--color-primary-600) !important; }
            .bg-primary { background-color: var(--color-primary-600) !important; }
            .border-primary { border-color: var(--color-primary-600) !important; }

            /* Navigation harmonieuse */
            .nav-primary {
              background: var(--color-primary-700) !important;
            }

            /* Navigation spécifique - surcharge forte */
            nav.fixed.bg-red-700 {
              background-color: var(--color-primary-700) !important;
            }
            nav.bg-red-700, nav .bg-red-700 {
              background-color: var(--color-primary-700) !important;
            }
            nav.bg-red-800, nav .bg-red-800 {
              background-color: var(--color-primary-800) !important;
            }
            nav.bg-red-900, nav .bg-red-900 {
              background-color: var(--color-primary-900) !important;
            }
            nav .hover\:bg-red-600:hover {
              background-color: var(--color-primary-600) !important;
            }
            nav .hover\:bg-red-700:hover {
              background-color: var(--color-primary-700) !important;
            }
            nav .hover\:bg-red-800:hover {
              background-color: var(--color-primary-800) !important;
            }
            nav .hover\:bg-red-900:hover {
              background-color: var(--color-primary-900) !important;
            }
            nav .hover\:text-red-200:hover {
              color: var(--color-primary-200) !important;
            }

            /* =========================
               GLASS EFFECT MODERNE
               ========================= */

            /* Navigation - couleur pleine par défaut pour toutes les positions */
            .nav-glass {
              background: rgb(190, 32, 38) !important;
            }

            /* Navigation TOP - effet glass activé au scroll uniquement */
            nav.nav-position-top.nav-glass {
              transition: background 0.3s ease, backdrop-filter 0.3s ease !important;
            }

            nav.nav-position-top.nav-glass.scrolled {
              background: rgba(190, 32, 38, 0.85) !important;
              backdrop-filter: blur(12px) !important;
              -webkit-backdrop-filter: blur(12px) !important;
            }

            /* =========================
               EFFETS HOVER MENU DESKTOP MODERNES
               ========================= */

            /* Liens du menu - Style de base */
            nav .nav-links a,
            nav .nav-links button {
              position: relative !important;
              overflow: hidden !important;
              transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
            }

            /* Effet de survol minimaliste - Desktop uniquement */
            @media (min-width: 1024px) {
              nav .nav-links > li > a:not(.bg-white):hover,
              nav .nav-links > li > button:not(.bg-white):hover {
                color: white !important;
              }

              /* Bouton Connexion garde sa couleur primaire au survol */
              nav .nav-links > li > a.bg-white:hover {
                color: var(--color-primary-700) !important;
              }

              /* Bordure inférieure animée - seulement pour menu TOP/BOTTOM */
              /* Exclure les boutons Connexion/Déconnexion */
              nav.nav-position-top .nav-links > li > a:not(.bg-white):not(.bg-red-800)::after,
              nav.nav-position-top .nav-links > li > button:not(.bg-white):not(.bg-red-800)::after,
              nav.nav-position-bottom .nav-links > li > a:not(.bg-white):not(.bg-red-800)::after,
              nav.nav-position-bottom .nav-links > li > button:not(.bg-white):not(.bg-red-800)::after {
                content: '' !important;
                position: absolute !important;
                bottom: 0 !important;
                left: 50% !important;
                width: 0 !important;
                height: 3px !important;
                background: linear-gradient(90deg,
                  var(--color-primary-200) 0%,
                  white 50%,
                  var(--color-primary-200) 100%) !important;
                transform: translateX(-50%) !important;
                transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
                box-shadow: 0 0 8px rgba(255, 255, 255, 0.6) !important;
              }

              nav.nav-position-top .nav-links > li > a:not(.bg-white):not(.bg-red-800):hover::after,
              nav.nav-position-top .nav-links > li > button:not(.bg-white):not(.bg-red-800):hover::after,
              nav.nav-position-bottom .nav-links > li > a:not(.bg-white):not(.bg-red-800):hover::after,
              nav.nav-position-bottom .nav-links > li > button:not(.bg-white):not(.bg-red-800):hover::after {
                width: 90% !important;
              }

              /* Bordure latérale animée - pour menu LEFT/RIGHT */
              /* Exclure les boutons Connexion/Déconnexion */
              nav.nav-position-left .nav-links > li > a:not(.bg-white):not(.bg-red-800)::before,
              nav.nav-position-left .nav-links > li > button:not(.bg-white):not(.bg-red-800)::before,
              nav.nav-position-right .nav-links > li > a:not(.bg-white):not(.bg-red-800)::before,
              nav.nav-position-right .nav-links > li > button:not(.bg-white):not(.bg-red-800)::before {
                content: '' !important;
                position: absolute !important;
                left: 0 !important;
                top: 50% !important;
                width: 4px !important;
                height: 0 !important;
                background: linear-gradient(180deg,
                  var(--color-primary-200) 0%,
                  white 50%,
                  var(--color-primary-200) 100%) !important;
                transform: translateY(-50%) !important;
                transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
                box-shadow: 0 0 8px rgba(255, 255, 255, 0.6) !important;
              }

              nav.nav-position-left .nav-links > li > a:not(.bg-white):not(.bg-red-800):hover::before,
              nav.nav-position-left .nav-links > li > button:not(.bg-white):not(.bg-red-800):hover::before,
              nav.nav-position-right .nav-links > li > a:not(.bg-white):not(.bg-red-800):hover::before,
              nav.nav-position-right .nav-links > li > button:not(.bg-white):not(.bg-red-800):hover::before {
                height: 80% !important;
              }

              /* Effet glow sur le texte au survol */
              nav .nav-links > li > a:hover,
              nav .nav-links > li > button:hover {
                text-shadow: 0 0 12px rgba(255, 255, 255, 0.8),
                             0 0 24px rgba(255, 255, 255, 0.4) !important;
              }

              /* Animation de pulse subtile sur les icônes */
              nav .nav-links > li > a:hover i,
              nav .nav-links > li > button:hover i {
                animation: iconPulse 1.5s ease-in-out infinite !important;
              }
            }

            /* Animation keyframes pour l'icône */
            @keyframes iconPulse {
              0%, 100% {
                transform: scale(1);
                opacity: 1;
              }
              50% {
                transform: scale(1.15);
                opacity: 0.9;
              }
            }

            /* Menu mobile avec effet glass */
            .mobile-menu-glass {
              background: rgba(190, 32, 38, 0.85) !important;
              backdrop-filter: blur(12px) !important;
              -webkit-backdrop-filter: blur(12px) !important;
            }

            /* Bordures semi-transparentes pour le glass effect */
            .border-glass {
              border-color: rgba(190, 32, 38, 0.3) !important;
            }

            /* Hover effect pour les liens dans le menu mobile glass */
            .mobile-link-hover:hover {
              background-color: rgba(190, 32, 38, 0.3) !important;
            }

            /* Alert harmonieux avec la couleur primaire */
            .alert-primary {
              background-color: var(--color-primary-50) !important;
              border: 1px solid var(--color-primary-200) !important;
              color: var(--color-primary-900) !important;
            }

            /* Focus harmonieux pour inputs */
            .input-primary:focus {
              outline: none !important;
              box-shadow: 0 0 0 2px rgba(190, 32, 38, 0.5) !important;
              border-color: var(--color-primary-500) !important;
            }

            /* =========================
               STYLES GÉNÉRIQUES POUR INPUTS
               ========================= */

            /* Style générique pour tous les inputs - FORCER LA PRIORITÉ MAXIMALE */
            /* Reproduction exacte du style des formulaires équipes/entraînements */
            body input[type="text"],
            body input[type="email"],
            body input[type="password"],
            body input[type="number"],
            body input[type="tel"],
            body input[type="url"],
            body input[type="search"],
            body input[type="time"],
            body input[type="date"],
            body input[type="datetime-local"],
            body textarea,
            body select {
              width: 100% !important;
              padding: 8px 12px !important;
              border: 1px solid #d1d5db !important;
              border-radius: 6px !important;
              background-color: white !important;
              font-size: 14px !important;
              line-height: 1.5 !important;
              transition: all 0.15s ease-in-out !important;
              box-shadow: none !important;
            }

            /* États focus pour tous les inputs - PRIORITÉ MAXIMALE */
            body input[type="text"]:focus,
            body input[type="email"]:focus,
            body input[type="password"]:focus,
            body input[type="number"]:focus,
            body input[type="tel"]:focus,
            body input[type="url"]:focus,
            body input[type="search"]:focus,
            body input[type="time"]:focus,
            body input[type="date"]:focus,
            body input[type="datetime-local"]:focus,
            body textarea:focus,
            body select:focus {
              outline: none !important;
              border-color: var(--color-primary-500) !important;
              box-shadow: 0 0 0 2px rgba(190, 32, 38, 0.5) !important;
            }

            /* Pas d'état hover spécifique pour rester cohérent avec les formulaires existants */

            /* Placeholder styling */
            input::placeholder,
            textarea::placeholder {
              color: #9ca3af !important;
              font-style: italic !important;
            }

            /* =========================
               CLASSES CUSTOM SPÉCIFIQUES AUX PAGES
               ========================= */

            /* Boutons de mode (page /fun) */
            .mode-btn.active {
              background: var(--color-primary-600) !important;
              color: white !important;
              border-color: var(--color-primary-600) !important;
            }
            .mode-btn:hover {
              border-color: var(--color-primary-400) !important;
              background: var(--color-primary-50) !important;
            }

            /* Cartes d'entraînement avec accent coloré */
            .training-card:hover {
              border-left: 4px solid var(--color-primary-600) !important;
            }
            .training-card .category-badge {
              background: var(--color-primary-100) !important;
              color: var(--color-primary-900) !important;
            }

            /* Badges et pills avec thème */
            .badge-primary {
              background: var(--color-primary-600) !important;
              color: white !important;
            }
            .pill-primary {
              background: var(--color-primary-100) !important;
              color: var(--color-primary-900) !important;
              border: 1px solid var(--color-primary-300) !important;
            }

            /* Liens avec couleur thématique */
            .link-primary {
              color: var(--color-primary-600) !important;
            }
            .link-primary:hover {
              color: var(--color-primary-700) !important;
            }

            /* Accents colorés pour cartes et sections */
            .card-accent {
              border-left: 4px solid var(--color-primary-600) !important;
            }
            .section-accent {
              background: linear-gradient(90deg, var(--color-primary-50) 0%, transparent 100%) !important;
              border-left: 3px solid var(--color-primary-600) !important;
            }

            /* =========================
               CLASSES SÉMANTIQUES POUR SCORES DE MATCHS
               (Ne doivent PAS être surchargées par le thème)
               ========================= */

            /* Scores de matchs - couleurs fixes indépendantes du thème */
            .score-victoire {
              color: #16a34a !important; /* green-600 fixe */
            }
            .score-defaite {
              color: #dc2626 !important; /* red-600 fixe - vrai rouge */
            }
            .score-egalite {
              color: #4b5563 !important; /* gray-600 fixe */
            }

            /* =========================
               POLICES PERSONNALISÉES
               ========================= */

            /* Application des polices personnalisées */
            h1, h2, h3, h4, h5, h6,
            .font-heading,
            .nav-brand,
            .hero-title {
              font-family: var(--font-heading, system-ui, -apple-system, sans-serif) !important;
            }

            body,
            p, span, div, a, button, input, textarea, select,
            .font-body {
              font-family: var(--font-body, system-ui, -apple-system, sans-serif) !important;
            }