/*
 * RUSHUP NEOBRUTALIST v3 — Style exact client.rushfid.fr
 * PROPRE — aucun conflit, aucun !important sur les couleurs de texte/fond
 * Seuls les bordures, ombres, radius et typo sont forcés
 */
@import url("https://fonts.googleapis.com/css2?family=Darker+Grotesque:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap");

/* ════════════════════════════════════════
   VARIABLES
   ════════════════════════════════════════ */
:root {
  --neo-bg: #0148a9;
  --neo-accent: #f7ac0b;
  --neo-orange: #ff6b00;
  --neo-orange-hover: #ff7d26;
  --neo-yellow: #ffdc58;
  --neo-success: #4caf50;
  --neo-danger: #f44336;
  --neo-warning: #ffc107;
  --neo-info: #2196f3;
  --neo-black: #000;
  --neo-white: #fff;
  --neo-shadow: 5px 5px 0px #000;
  --neo-shadow-hover: 7px 7px 0px #000;
  --neo-shadow-sm: 3px 3px 0px #000;

  --ru-primary: #0148a9 !important;
  --ru-primary-700: #013d8e !important;
  --ru-accent: #f7ac0b !important;
  --ru-danger: #f44336 !important;
  --ru-success: #4caf50 !important;
  --ru-warning: #ffc107 !important;
  --ru-info: #2196f3 !important;

  --color-blue-500: #ff6b00 !important;
  --color-blue-600: #ff6b00 !important;
  --color-blue-700: #e55f00 !important;
  --color-blue-50: #fff5eb !important;
  --color-blue-100: #ffe8d4 !important;

  --ru-bg: #0148a9 !important;
}

/* ════════════════════════════════════════
   BODY — fond bleu rushfid
   ════════════════════════════════════════ */
body {
  background-color: var(--neo-bg) !important;
  font-family: "Inter", "Darker Grotesque", sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Forcer le fond bleu sur le conteneur principal React */
.min-h-screen.bg-\[var\(--ru-bg\)\] {
  background-color: var(--neo-bg) !important;
}

/* Dark mode : fond sombre au lieu du bleu */
html.dark body,
.dark body {
  background-color: #0a0a0a !important;
}

/* ════════════════════════════════════════
   CONTENU PRINCIPAL — forcer le fond bleu néo
   Écraser les bg-white/bg-gray de Tailwind
   ════════════════════════════════════════ */
main, [class*="flex-1"][class*="overflow"],
.min-h-screen > div > div:not(nav):not(aside):not(header),
[class*="bg-gray-50"], [class*="bg-gray-100"],
div[class*="flex-col"][class*="flex-1"]:not([class*="sidebar"]):not(nav):not(aside) {
  background-color: var(--neo-bg) !important;
}

/* Les cartes/formulaires restent blancs avec bordure néo */
main [class*="bg-white"], main [class*="rounded"],
[class*="shadow"][class*="bg-white"],
form, .card, [class*="card"],
[class*="p-6"][class*="bg-white"],
[class*="p-4"][class*="bg-white"] {
  background-color: var(--neo-white) !important;
  border: 3px solid var(--neo-black) !important;
  box-shadow: var(--neo-shadow) !important;
  border-radius: 0 !important;
}

/* Texte dans le contenu principal — blanc sur fond bleu */
main h1, main h2, main h3, main h4,
main > p, main > span,
[class*="bg-gray-50"] h1, [class*="bg-gray-50"] h2,
[class*="bg-gray-50"] > p {
  color: var(--neo-white) !important;
}

/* Les textes dans les cartes blanches — noir */
[class*="bg-white"] h1, [class*="bg-white"] h2, [class*="bg-white"] h3,
[class*="bg-white"] p, [class*="bg-white"] span, [class*="bg-white"] label,
form h1, form h2, form h3, form p, form span, form label {
  color: var(--neo-black) !important;
}

/* Dark mode — fond sombre pour le contenu */
html.dark main, html.dark [class*="bg-gray-50"], html.dark [class*="bg-gray-100"],
.dark main, .dark [class*="bg-gray-50"] {
  background-color: #0a0a0a !important;
}

/* ════════════════════════════════════════
   SIDEBAR — style néo rushfid
   ════════════════════════════════════════ */
nav, aside, [class*="sidebar"], [class*="side-nav"] {
  background-color: var(--neo-white) !important;
  border-right: 3px solid var(--neo-black) !important;
}

/* Sidebar container (le div parent direct) */
.h-screen > div[class*="flex-col"][class*="border-r"] {
  box-shadow: none !important;
}

/* Logo zone — bordure basse épaisse */
.h-screen > div[class*="flex-col"] > div.h-16 {
  border-bottom: 3px solid var(--neo-black) !important;
}

/* Nav items — style néo */
nav ul li a, aside ul li a {
  border-radius: 0 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  font-size: 0.85rem !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
  border: 2px solid transparent !important;
  padding: 0.6rem 0.75rem !important;
}

/* Item hover → néo effect */
nav ul li a:hover, aside ul li a:hover {
  border-color: var(--neo-black) !important;
  box-shadow: 3px 3px 0px var(--neo-black) !important;
  transform: translate(-2px, -2px) !important;
  background-color: var(--neo-yellow) !important;
  color: var(--neo-black) !important;
}

/* Item actif → fond orange néo */
nav ul li a.text-blue-600,
nav ul li a[class*="text-blue-600"],
aside ul li a.text-blue-600 {
  background-color: var(--neo-orange) !important;
  color: var(--neo-white) !important;
  border: 2px solid var(--neo-black) !important;
  box-shadow: 3px 3px 0px var(--neo-black) !important;
}

nav ul li a.text-blue-600 *,
nav ul li a[class*="text-blue-600"] * {
  color: var(--neo-white) !important;
}

/* Déconnexion — style danger, en bas */
nav ul li:last-child a, aside ul li:last-child a {
  margin-top: 1rem !important;
  border: 2px solid var(--neo-danger) !important;
  color: var(--neo-danger) !important;
  font-weight: 800 !important;
}

nav ul li:last-child a:hover, aside ul li:last-child a:hover {
  background-color: var(--neo-danger) !important;
  color: var(--neo-white) !important;
  box-shadow: 3px 3px 0px var(--neo-black) !important;
}

/* Badge "NEW" — néo style */
nav ul li a span[class*="bg-yellow"] {
  background-color: var(--neo-yellow) !important;
  color: var(--neo-black) !important;
  border: 2px solid var(--neo-black) !important;
  border-radius: 0 !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  box-shadow: 2px 2px 0px var(--neo-black) !important;
}

/* ════════════════════════════════════════
   HEADER — style néo
   ════════════════════════════════════════ */
header {
  background-color: var(--neo-white) !important;
  border-bottom: 3px solid var(--neo-black) !important;
  box-shadow: none !important;
}

/* Header buttons → néo */
header button {
  border: 2px solid var(--neo-black) !important;
  border-radius: 0 !important;
  box-shadow: 2px 2px 0px var(--neo-black) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

header button:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 3px 3px 0px var(--neo-black) !important;
}

/* Sélecteur de langue → néo */
header div[class*="relative"] > button[class*="rounded-xl"] {
  border-radius: 0 !important;
}

/* Dropdown langue → néo */
header div[class*="absolute"][class*="rounded-lg"] {
  border: 3px solid var(--neo-black) !important;
  border-radius: 0 !important;
  box-shadow: var(--neo-shadow) !important;
}

/* Avatar → bordure néo */
header div[class*="rounded-full"][class*="bg-blue"] {
  border: 2px solid var(--neo-black) !important;
  box-shadow: 2px 2px 0px var(--neo-black) !important;
  background-color: var(--neo-orange) !important;
}

/* Dark mode toggle → néo */
header button[class*="rounded-xl"] {
  border-radius: 0 !important;
}

/* ════════════════════════════════════════
   TOUS LES ROUNDED → CARRÉ
   ════════════════════════════════════════ */
.rounded-lg:not(.phone-container *):not(.superWheel *):not(img):not(.rounded-full):not([role="switch"]),
.rounded-xl:not(.phone-container *):not(.superWheel *),
.rounded-2xl:not(.phone-container *):not(.superWheel *),
.rounded-md:not(.phone-container *):not(.superWheel *),
.rounded:not(.phone-container *):not(.superWheel *):not(.rounded-full):not([role="switch"]) {
  border-radius: 0 !important;
}

/* ════════════════════════════════════════
   TOUTES LES OMBRES → néo décalées
   ════════════════════════════════════════ */
.shadow-lg:not(.phone-container *):not(button),
.shadow-md:not(.phone-container *):not(button),
.shadow-sm:not(.phone-container *):not(button),
.shadow:not(.phone-container *):not(button) {
  box-shadow: var(--neo-shadow) !important;
  border: 3px solid var(--neo-black) !important;
  border-radius: 0 !important;
}

/* ════════════════════════════════════════
   BORDURES → noires
   ════════════════════════════════════════ */
.border-gray-200:not(.phone-container *) { border-color: var(--neo-black) !important; }
.border-gray-300:not(.phone-container *) { border-color: var(--neo-black) !important; }

/* ════════════════════════════════════════
   HEADINGS — Darker Grotesque, uppercase
   ════════════════════════════════════════ */
h1:not(.phone-container *):not(.superWheel *),
h2:not(.phone-container *):not(.superWheel *),
h3:not(.phone-container *):not(.superWheel *),
h4:not(.phone-container *):not(.superWheel *) {
  font-family: "Darker Grotesque", "Inter", sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

/* ════════════════════════════════════════
   LABELS — bold uppercase
   ════════════════════════════════════════ */
label:not(.phone-container *) {
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  font-size: 0.8rem !important;
}

/* ════════════════════════════════════════
   BOUTONS — néo (bordure noire, ombre, carré)
   PAS de changement de couleur sauf blue→orange
   ════════════════════════════════════════ */
button:not(.phone-container *):not(.superWheel *):not(.swal2-styled) {
  border: 2px solid var(--neo-black) !important;
  border-radius: 0 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  box-shadow: var(--neo-shadow-sm) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
button:not(.phone-container *):not(.superWheel *):hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: var(--neo-shadow) !important;
}
button:not(.phone-container *):not(.superWheel *):active {
  transform: translate(0, 0) !important;
  box-shadow: 1px 1px 0px #000 !important;
}

/* Blue buttons → orange */
.bg-blue-500:not(.phone-container *) { background-color: var(--neo-orange) !important; }
.bg-blue-600:not(.phone-container *) { background-color: var(--neo-orange) !important; }
.hover\:bg-blue-600:hover:not(.phone-container *) { background-color: var(--neo-orange-hover) !important; }
.hover\:bg-blue-700:hover:not(.phone-container *) { background-color: #e55f00 !important; }
.text-blue-500:not(.phone-container *) { color: var(--neo-orange) !important; }
.text-blue-600:not(.phone-container *) { color: var(--neo-orange) !important; }
.border-blue-500:not(.phone-container *) { border-color: var(--neo-orange) !important; }
.border-blue-600:not(.phone-container *) { border-color: var(--neo-orange) !important; }
.ring-blue-500:not(.phone-container *),
.focus\:ring-blue-500:focus:not(.phone-container *) { --tw-ring-color: var(--neo-orange) !important; }
.bg-gradient-to-r:not(.phone-container *) { background-image: linear-gradient(to right, var(--neo-orange), var(--neo-accent)) !important; }

/* ════════════════════════════════════════
   INPUTS — bordure noire, carré, focus jaune
   ════════════════════════════════════════ */
input[type="text"]:not(.phone-container *), input[type="email"]:not(.phone-container *),
input[type="password"]:not(.phone-container *), input[type="search"]:not(.phone-container *),
input[type="number"]:not(.phone-container *), input[type="tel"]:not(.phone-container *),
textarea:not(.phone-container *), select:not(.phone-container *) {
  border: 2px solid var(--neo-black) !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
}
input:not(.phone-container *):focus, textarea:not(.phone-container *):focus, select:not(.phone-container *):focus {
  outline: none !important;
  box-shadow: 3px 3px 0px var(--neo-yellow) !important;
  border-color: var(--neo-orange) !important;
}

/* ════════════════════════════════════════
   COLOR PICKERS
   ════════════════════════════════════════ */
input[type="color"] {
  width: 2.5rem !important; height: 2.5rem !important;
  min-width: 2.5rem !important; min-height: 2.5rem !important;
  border: 2px solid var(--neo-black) !important;
  border-radius: 0 !important;
  box-shadow: var(--neo-shadow-sm) !important;
}
.color-display {
  width: 2.5rem !important; height: 2.5rem !important;
  min-width: 2.5rem !important; min-height: 2.5rem !important;
  border: 2px solid var(--neo-black) !important;
  border-radius: 0 !important;
  box-shadow: var(--neo-shadow-sm) !important;
}
.picker-wrapper { border: 2px solid var(--neo-black) !important; border-radius: 0 !important; box-shadow: var(--neo-shadow) !important; }

/* ════════════════════════════════════════
   TABLES — header bleu foncé, texte doré
   ════════════════════════════════════════ */
table { border: 3px solid var(--neo-black) !important; }
table thead { background-color: var(--neo-bg) !important; }
table th { font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; color: var(--neo-accent) !important; }
table tbody tr:hover { background-color: rgba(247, 172, 11, 0.08) !important; }

/* ════════════════════════════════════════
   BADGES / TAGS
   ════════════════════════════════════════ */
[class*="badge"]:not(.phone-container *), [class*="tag"]:not(.phone-container *) {
  border-radius: 0 !important;
  border: 2px solid var(--neo-black) !important;
  font-weight: 700 !important;
}

/* Couleurs spéciales → bordure noire */
[class*="bg-emerald"]:not(.phone-container *), [class*="bg-purple"]:not(.phone-container *),
[class*="bg-indigo"]:not(.phone-container *), [class*="bg-orange"]:not(.phone-container *),
[class*="bg-pink"]:not(.phone-container *) { border: 2px solid #000 !important; border-radius: 0 !important; }

/* Icônes bg-*-100 */
[class*="bg-blue-100"]:not(.phone-container *), [class*="bg-green-100"]:not(.phone-container *),
[class*="bg-red-100"]:not(.phone-container *), [class*="bg-yellow-100"]:not(.phone-container *) {
  border: 2px solid #000 !important; border-radius: 0 !important; box-shadow: 2px 2px 0px #000 !important;
}

/* ════════════════════════════════════════
   MODALS
   ════════════════════════════════════════ */
[role="dialog"], .swal2-popup {
  border: 3px solid var(--neo-black) !important;
  border-radius: 0 !important;
  box-shadow: 8px 8px 0px var(--neo-accent) !important;
}

/* ════════════════════════════════════════
   TOASTS
   ════════════════════════════════════════ */
[class*="toast"], .Toastify__toast {
  border: 2px solid #000 !important;
  border-radius: 0 !important;
  box-shadow: var(--neo-shadow-sm) !important;
}

/* ════════════════════════════════════════
   IMAGES — bordure noire
   ════════════════════════════════════════ */
main img:not(.phone-container *):not(.superWheel *):not([class*="rounded-full"]) {
  border: 2px solid #000 !important;
}

/* ════════════════════════════════════════
   DIVIDERS
   ════════════════════════════════════════ */
main hr:not(.phone-container *) { border-color: var(--neo-black) !important; border-width: 2px !important; }

/* ════════════════════════════════════════
   SCROLLBAR
   ════════════════════════════════════════ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #000; border: 1px solid #fff; }

/* ════════════════════════════════════════
   ANIMATIONS
   ════════════════════════════════════════ */
@keyframes neo-fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes neo-scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }

/* ════════════════════════════════════════
   STEPS MODE RAPIDE
   ════════════════════════════════════════ */
.border-2.border-blue-500 {
  border: 3px solid var(--neo-black) !important;
  border-radius: 0 !important;
  box-shadow: var(--neo-shadow) !important;
}
.bg-gray-200.rounded-full.h-2 { border-radius: 0 !important; border: 1px solid var(--neo-black) !important; }
.bg-blue-600.h-2.rounded-full { background: var(--neo-orange) !important; border-radius: 0 !important; }
.border-b-2.border-blue-500.text-blue-600 {
  border-bottom: 3px solid var(--neo-orange) !important;
  color: var(--neo-orange) !important;
  font-weight: 800 !important;
}

/* Blocs lots */
main [class*="border-l-4"][class*="border-2"][class*="p-3"] {
  border: 3px solid #000 !important;
  border-radius: 0 !important;
  box-shadow: var(--neo-shadow-sm) !important;
}
main [class*="border-l-4"][class*="border-2"][class*="p-3"]:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: var(--neo-shadow) !important;
}

/* ════════════════════════════════════════
   LIENS → orange
   ════════════════════════════════════════ */
.text-blue-700:not(.phone-container *) { color: #e55f00 !important; }
.hover\:text-blue-600:hover:not(.phone-container *) { color: var(--neo-orange) !important; }

/* ════════════════════════════════════════
   DARK MODE
   ════════════════════════════════════════ */
.dark body { background-color: #0a0a0a !important; }
.dark nav, .dark aside, .dark [class*="sidebar"] { background-color: #111 !important; border-color: #333 !important; }
.dark header { background-color: #111 !important; border-color: #333 !important; }
.dark [role="dialog"], .dark .swal2-popup {
  background-color: #1a1a1a !important; border-color: #fff !important; box-shadow: 8px 8px 0px var(--neo-accent) !important;
}
.dark ::-webkit-scrollbar-thumb { background: #fff !important; border: 1px solid #000 !important; }

/* ════════════════════════════════════════
   RESPONSIVE MOBILE — style rushfid client
   ════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Touch-friendly */
  button:not(.phone-container *) { min-height: 44px !important; }
  input:not(.phone-container *), select:not(.phone-container *), textarea:not(.phone-container *) {
    min-height: 44px !important; font-size: 16px !important;
  }

  /* Body padding pour la bottom nav */
  body { padding-bottom: 65px !important; }

  /* Cards pleine largeur */
  main > div { margin: 0.5rem !important; padding: 1rem !important; }

  /* Grids → 1 colonne */
  main [class*="grid-cols-2"]:not(.phone-container *),
  main [class*="grid-cols-3"]:not(.phone-container *) {
    grid-template-columns: 1fr !important;
  }

  /* Tables → scroll horizontal */
  main table { display: block; overflow-x: auto; }

  /* Modals → plein écran */
  [role="dialog"] { width: 95vw !important; max-width: none !important; }

  /* Headings plus petits */
  h1:not(.phone-container *) { font-size: 1.5rem !important; }
  h2:not(.phone-container *) { font-size: 1.25rem !important; }
  h3:not(.phone-container *) { font-size: 1.1rem !important; }

  /* Ombres plus petites sur mobile */
  .shadow-lg:not(.phone-container *):not(button),
  .shadow-md:not(.phone-container *):not(button) {
    box-shadow: 3px 3px 0px #000 !important;
  }

  /* Sidebar mobile overlay → pleine hauteur avec bottom nav space */
  .h-screen > div[class*="fixed"][class*="z-50"] {
    padding-bottom: 65px !important;
  }

  /* Le contenu principal prend toute la largeur */
  main { padding: 0.75rem !important; }

  /* Labels plus petits */
  label:not(.phone-container *) { font-size: 0.75rem !important; }
}

/* Très petit écran (< 480px) */
@media (max-width: 480px) {
  h1:not(.phone-container *) { font-size: 1.25rem !important; }
  h2:not(.phone-container *) { font-size: 1.1rem !important; }
  main > div { padding: 0.75rem !important; }
}

/* ════════════════════════════════════════
   LOGO ÉTABLISSEMENT — fix bouton croix + clic image
   ════════════════════════════════════════ */
/* Le badge TEMPORAIRE et le bouton ✕ se chevauchent.
   Repositionner la croix sous le badge */
main .relative > button[class*="bg-\[var\(--ru-danger\)\]"][class*="absolute"] {
  top: auto !important;
  bottom: -8px !important;
  right: -8px !important;
}

/* Rendre l'image du logo cliquable (curseur pointer) */
main .relative > img[class*="w-24"][class*="h-24"] {
  cursor: pointer !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  border: 3px solid var(--neo-black) !important;
  border-radius: 0 !important;
  box-shadow: var(--neo-shadow-sm) !important;
}

main .relative > img[class*="w-24"][class*="h-24"]:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: var(--neo-shadow) !important;
  opacity: 0.8 !important;
}

/* Badge TEMPORAIRE → style néo */
main .relative > div[class*="bg-\[var\(--ru-warning\)\]"][class*="absolute"] {
  border-radius: 0 !important;
  border: 2px solid var(--neo-black) !important;
  box-shadow: 2px 2px 0px var(--neo-black) !important;
}

/* ════════════════════════════════════════
   PROTECTION APERÇU JEU
   ════════════════════════════════════════ */
.phone-container, .phone-container *, .superWheel, .superWheel *,
.sWheel *, .sWheel-txt *, .sWheel-bg-layer *, .sWheel-center *, .sWheel-marker * { /* rien */ }

/* ════════════════════════════════════════
   CLASSES TAILWIND ARBITRAIRES (--ru-*)
   ════════════════════════════════════════ */
.bg-\[var\(--ru-primary\)\] { background-color: var(--ru-primary) !important; }
.bg-\[var\(--ru-primary-700\)\] { background-color: var(--ru-primary-700) !important; }
.bg-\[var\(--ru-primary-900\)\] { background-color: var(--ru-primary-900) !important; }
.bg-\[var\(--ru-success\)\] { background-color: var(--ru-success) !important; }
.bg-\[var\(--ru-success-dark\)\] { background-color: var(--ru-success-dark) !important; }
.bg-\[var\(--ru-danger\)\] { background-color: var(--ru-danger) !important; }
.bg-\[var\(--ru-danger-dark\)\] { background-color: var(--ru-danger-dark) !important; }
.bg-\[var\(--ru-danger-light\)\] { background-color: var(--ru-danger-light) !important; }
.bg-\[var\(--ru-warning\)\] { background-color: var(--ru-warning) !important; }
.bg-\[var\(--ru-info\)\] { background-color: var(--ru-info) !important; }
.bg-\[var\(--ru-info-light\)\] { background-color: var(--ru-info-light) !important; }
.bg-\[var\(--ru-accent\)\] { background-color: var(--ru-accent) !important; }
.bg-\[var\(--ru-surface\)\] { background-color: var(--ru-surface) !important; }
.bg-\[var\(--ru-surface-2\)\] { background-color: var(--ru-surface-2) !important; }
.bg-\[var\(--ru-surface-3\)\] { background-color: var(--ru-surface-3) !important; }
.bg-\[var\(--ru-bg\)\] { background-color: var(--ru-bg) !important; }
.bg-\[var\(--ru-border\)\] { background-color: var(--ru-border) !important; }
.bg-\[var\(--ru-text-muted\)\] { background-color: var(--ru-text-muted) !important; }
.bg-\[var\(--ru-overlay\)\] { background-color: rgba(0,0,0,0.7) !important; }
.text-\[var\(--ru-text\)\] { color: var(--ru-text) !important; }
.text-\[var\(--ru-text-muted\)\] { color: var(--ru-text-muted) !important; }
.text-\[var\(--ru-text-subtle\)\] { color: var(--ru-text-subtle) !important; }
.text-\[var\(--ru-text-inverse\)\] { color: var(--ru-text-inverse) !important; }
.text-\[var\(--ru-text-on-primary\)\] { color: #fff !important; }
.text-\[var\(--ru-text-base\)\] { font-size: var(--ru-text-base) !important; }
.text-\[var\(--ru-text-sm\)\] { font-size: var(--ru-text-sm) !important; }
.text-\[var\(--ru-text-lg\)\] { font-size: var(--ru-text-lg) !important; }
.text-\[var\(--ru-primary\)\] { color: var(--ru-primary) !important; }
.text-\[var\(--ru-success\)\] { color: var(--ru-success) !important; }
.text-\[var\(--ru-success-dark\)\] { color: var(--ru-success-dark) !important; }
.text-\[var\(--ru-danger\)\] { color: var(--ru-danger) !important; }
.text-\[var\(--ru-warning\)\] { color: var(--ru-warning) !important; }
.text-\[var\(--ru-warning-dark\)\] { color: var(--ru-warning-dark) !important; }
.text-\[var\(--ru-info\)\] { color: var(--ru-info) !important; }
.text-\[var\(--ru-accent\)\] { color: var(--ru-accent) !important; }
.text-\[var\(--ru-accent-dark\)\] { color: var(--ru-accent-dark) !important; }
.border-\[var\(--ru-border\)\] { border-color: var(--ru-border) !important; }
.border-\[var\(--ru-border-strong\)\] { border-color: var(--ru-border-strong) !important; }
.border-\[var\(--ru-divider\)\] { border-color: var(--ru-divider) !important; }
.border-\[var\(--ru-primary\)\] { border-color: var(--ru-primary) !important; }
.border-\[var\(--ru-primary\,\#0B4DB8\)\] { border-color: var(--ru-primary) !important; }
.border-\[var\(--ru-success\)\] { border-color: var(--ru-success) !important; }
.border-\[var\(--ru-danger\)\] { border-color: var(--ru-danger) !important; }
.border-\[var\(--ru-warning\)\] { border-color: var(--ru-warning) !important; }
.border-\[var\(--ru-info\)\] { border-color: var(--ru-info) !important; }
.border-\[var\(--ru-accent\)\] { border-color: var(--ru-accent) !important; }
.ring-\[var\(--ru-primary\)\] { --tw-ring-color: var(--ru-primary) !important; }
.ring-\[var\(--ru-success\)\] { --tw-ring-color: var(--ru-success) !important; }
.ring-\[var\(--ru-danger\)\] { --tw-ring-color: var(--ru-danger) !important; }
.rounded-\[var\(--ru-radius-sm\)\], .rounded-\[var\(--ru-radius-md\)\],
.rounded-\[var\(--ru-radius-lg\)\], .rounded-\[var\(--ru-radius-xl\)\] { border-radius: 0 !important; }
.rounded-\[var\(--ru-radius-full\)\] { border-radius: 9999px !important; }
.font-\[var\(--ru-font-medium\)\] { font-weight: 600 !important; }
.font-\[var\(--ru-font-semibold\)\] { font-weight: 700 !important; }
.font-\[var\(--ru-font-bold\)\] { font-weight: 800 !important; }
.duration-\[var\(--ru-transition-base\)\] { transition-duration: 0.2s !important; }
.duration-\[var\(--ru-transition-fast\)\] { transition-duration: 0.15s !important; }

/* Opacités */
.bg-\[var\(--ru-success\)\]\/10 { background-color: rgba(76, 175, 80, 0.1) !important; }
.bg-\[var\(--ru-success\)\]\/15 { background-color: rgba(76, 175, 80, 0.15) !important; }
.bg-\[var\(--ru-success\)\]\/20 { background-color: rgba(76, 175, 80, 0.2) !important; }
.bg-\[var\(--ru-success\)\]\/90 { background-color: rgba(76, 175, 80, 0.9) !important; }
.bg-\[var\(--ru-danger\)\]\/5 { background-color: rgba(244, 67, 54, 0.05) !important; }
.bg-\[var\(--ru-danger\)\]\/10 { background-color: rgba(244, 67, 54, 0.1) !important; }
.bg-\[var\(--ru-danger\)\]\/15 { background-color: rgba(244, 67, 54, 0.15) !important; }
.bg-\[var\(--ru-danger\)\]\/90 { background-color: rgba(244, 67, 54, 0.9) !important; }
.bg-\[var\(--ru-primary\)\]\/5 { background-color: rgba(1, 72, 169, 0.05) !important; }
.bg-\[var\(--ru-primary\)\]\/10 { background-color: rgba(1, 72, 169, 0.1) !important; }
.bg-\[var\(--ru-primary\)\]\/20 { background-color: rgba(1, 72, 169, 0.2) !important; }
.bg-\[var\(--ru-primary\)\]\/30 { background-color: rgba(1, 72, 169, 0.3) !important; }
.bg-\[var\(--ru-warning\)\]\/10 { background-color: rgba(255, 193, 7, 0.1) !important; }
.bg-\[var\(--ru-accent\)\]\/10 { background-color: rgba(247, 172, 11, 0.1) !important; }
.bg-\[var\(--ru-accent\)\]\/20 { background-color: rgba(247, 172, 11, 0.2) !important; }
.bg-\[var\(--ru-info\)\]\/10 { background-color: rgba(33, 150, 243, 0.1) !important; }
.bg-\[var\(--ru-info-light\)\]\/50 { background-color: rgba(227, 242, 253, 0.5) !important; }
.bg-\[var\(--ru-surface-2\)\]\/50 { background-color: rgba(248, 249, 250, 0.5) !important; }
.bg-\[var\(--ru-danger-dark\)\]\/20 { background-color: rgba(229, 57, 53, 0.2) !important; }
.border-\[var\(--ru-success\)\]\/30 { border-color: rgba(76, 175, 80, 0.3) !important; }
.border-\[var\(--ru-success\)\]\/50 { border-color: rgba(76, 175, 80, 0.5) !important; }
.border-\[var\(--ru-success\)\]\/20 { border-color: rgba(76, 175, 80, 0.2) !important; }
.border-\[var\(--ru-danger\)\]\/30 { border-color: rgba(244, 67, 54, 0.3) !important; }
.border-\[var\(--ru-danger\)\]\/40 { border-color: rgba(244, 67, 54, 0.4) !important; }
.border-\[var\(--ru-primary\)\]\/20 { border-color: rgba(1, 72, 169, 0.2) !important; }
.border-\[var\(--ru-primary\)\]\/30 { border-color: rgba(1, 72, 169, 0.3) !important; }
.border-\[var\(--ru-primary\)\]\/50 { border-color: rgba(1, 72, 169, 0.5) !important; }
.border-\[var\(--ru-warning\)\]\/30 { border-color: rgba(255, 193, 7, 0.3) !important; }
.border-\[var\(--ru-info\)\]\/30 { border-color: rgba(33, 150, 243, 0.3) !important; }
.border-\[var\(--ru-info\)\]\/40 { border-color: rgba(33, 150, 243, 0.4) !important; }
.border-\[var\(--ru-accent\)\]\/20 { border-color: rgba(247, 172, 11, 0.2) !important; }
.ring-\[var\(--ru-success\)\]\/30 { --tw-ring-color: rgba(76, 175, 80, 0.3) !important; }
.shadow-\[var\(--ru-shadow-sm\)\] { box-shadow: var(--neo-shadow-sm) !important; }
.shadow-\[var\(--ru-shadow-md\)\] { box-shadow: var(--neo-shadow) !important; }
.shadow-\[var\(--ru-shadow-lg\)\] { box-shadow: var(--neo-shadow) !important; }
.shadow-\[var\(--ru-shadow-xl\)\] { box-shadow: var(--neo-shadow-hover) !important; }
.shadow-\[var\(--ru-shadow-2xl\)\] { box-shadow: 8px 8px 0px #000 !important; }
.divide-\[var\(--ru-border\)\] > * + * { border-color: #000 !important; }
.placeholder-\[var\(--ru-text-subtle\)\]::placeholder { color: #999 !important; }
