@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,400;0,500;0,700;1,400&display=swap');

/**
 * Fast4u Sovereign Ecosystem Utility Suite Styles
 * Styles for the 3 Unified Buttons: SaaS Web Shield, Cookie Consent (Loi 25), Live Support Chat
 * 21 Graphic Themes + Intelligent Non-Blocking Layout
 * Strictly zero emojis.
 */

/* =========================================================================
   DOCKS & POSITIONING (MODE INTELLIGENT COMME VOILA)
   ========================================================================= */
.f4u-smart-dock-left {
  position: fixed !important;
  left: 20px !important;
  bottom: 20px !important;
  right: auto !important;
  top: auto !important;
  z-index: 99990 !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  pointer-events: none !important;
}

.f4u-smart-dock-left > * {
  pointer-events: auto !important;
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  right: auto !important;
  top: auto !important;
}

.f4u-smart-dock-right {
  position: fixed !important;
  right: 20px !important;
  bottom: 20px !important;
  left: auto !important;
  top: auto !important;
  z-index: 99990 !important;
  display: inline-flex !important;
  align-items: center !important;
  pointer-events: auto !important;
}

/* Base Utility Button Styles */
.f4u-btn-bubble {
  position: relative !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, border-color 0.2s ease !important;
  text-decoration: none !important;
  padding: 0 !important;
  outline: none !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.f4u-btn-bubble:hover {
  transform: translateY(-2.5px) scale(1.05) !important;
}

.f4u-btn-bubble:active {
  transform: translateY(0) scale(0.97) !important;
}

.f4u-btn-bubble svg {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  transition: color 0.2s ease !important;
}

/* Live Status Pulse Dot */
.f4u-btn-pulse {
  position: absolute !important;
  top: 3px !important;
  right: 3px !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 9999px !important;
  border: 1.5px solid #08111f !important;
  animation: f4uPulseAnim 2s infinite ease-in-out !important;
}

@keyframes f4uPulseAnim {
  0%, 100% { transform: scale(0.88); opacity: 0.85; }
  50% { transform: scale(1.22); opacity: 1; filter: brightness(1.25); }
}

/* Tooltip */
.f4u-btn-tooltip {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) translateX(-6px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  white-space: nowrap !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  font: 700 11px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  letter-spacing: 0.03em !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
  transition: opacity 0.18s ease, transform 0.18s ease !important;
  z-index: 99999 !important;
}

.f4u-tooltip-right {
  left: calc(100% + 12px) !important;
}
.f4u-tooltip-right::before {
  content: '' !important;
  position: absolute !important;
  right: 100% !important;
  top: 50% !important;
  margin-top: -5px !important;
  border-width: 5px !important;
  border-style: solid !important;
  border-color: transparent var(--tooltip-bg, #08111f) transparent transparent !important;
}

.f4u-tooltip-left {
  right: calc(100% + 12px) !important;
}
.f4u-tooltip-left::before {
  content: '' !important;
  position: absolute !important;
  left: 100% !important;
  top: 50% !important;
  margin-top: -5px !important;
  border-width: 5px !important;
  border-style: solid !important;
  border-color: transparent transparent transparent var(--tooltip-bg, #08111f) !important;
}

.f4u-btn-bubble:hover .f4u-btn-tooltip {
  opacity: 1 !important;
  transform: translateY(-50%) translateX(0) !important;
}

/* =========================================================================
   LES 21 THÈMES DE BOUTONS (AFFECTENT LE TRIO SHIELD, COOKIE ET CHAT)
   ========================================================================= */

/* THEME 1 : NEON-CYAN (Officiel) */
.f4u-theme-neon-cyan .f4u-btn-bubble {
  background: linear-gradient(135deg, #020817 0%, #051329 50%, #030b1c 100%) !important;
  border: 1.8px solid #00c6ff !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.7), 0 0 20px rgba(0,198,255,0.6), inset 0 1px 2px rgba(255,255,255,0.3) !important;
  color: #00c6ff !important;
}
.f4u-theme-neon-cyan .f4u-btn-bubble:hover {
  box-shadow: 0 6px 28px rgba(0,0,0,0.8), 0 0 28px rgba(0,198,255,0.85) !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
}
.f4u-theme-neon-cyan .f4u-btn-pulse { background: #00f5a0 !important; box-shadow: 0 0 8px #00f5a0 !important; }
.f4u-theme-neon-cyan .f4u-btn-tooltip { background: #030d22 !important; color: #00c6ff !important; border: 1px solid rgba(0,198,255,0.5) !important; --tooltip-bg: #030d22; }

/* THEME 2 : ADAPTIVE */
.f4u-theme-adaptive .f4u-btn-bubble {
  background: rgba(9, 13, 24, 0.9) !important;
  border: 1.8px solid rgba(56, 189, 248, 0.6) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 20px rgba(8, 123, 255, 0.4) !important;
  color: #38bdf8 !important;
}
body.theme-classic .f4u-theme-adaptive .f4u-btn-bubble,
html.light .f4u-theme-adaptive .f4u-btn-bubble {
  background: #ffffff !important;
  border: 1.8px solid #cbd5e1 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1), 0 0 12px rgba(16, 185, 129, 0.2) !important;
  color: #0f172a !important;
}
.f4u-theme-adaptive .f4u-btn-pulse { background: #10b981 !important; box-shadow: 0 0 8px #10b981 !important; }
.f4u-theme-adaptive .f4u-btn-tooltip { background: #08111f !important; color: #38bdf8 !important; border: 1px solid rgba(56,189,248,0.4) !important; --tooltip-bg: #08111f; }
body.theme-classic .f4u-theme-adaptive .f4u-btn-tooltip,
html.light .f4u-theme-adaptive .f4u-btn-tooltip {
  background: #ffffff !important; color: #0f172a !important; border: 1px solid #cbd5e1 !important; --tooltip-bg: #ffffff;
}

/* THEME 3 : ORIGINAL (Titanium Perlé & Cyan) */
.f4u-theme-original .f4u-btn-bubble {
  background: linear-gradient(135deg, #0e0b16 0%, #170d2c 40%, #1e1438 75%, #0b1320 100%) !important;
  border: 1.8px solid rgba(226, 232, 240, 0.6) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6), 0 0 22px rgba(8,123,255,0.45) !important;
  color: #22d8f0 !important;
}
.f4u-theme-original .f4u-btn-pulse { background: #22d8f0 !important; box-shadow: 0 0 8px #22d8f0 !important; }
.f4u-theme-original .f4u-btn-tooltip { background: #170d2c !important; color: #22d8f0 !important; border: 1px solid rgba(226,232,240,0.4) !important; --tooltip-bg: #170d2c; }

/* THEME 4 : MODERN-GLOW (Cyan & Lime) */
.f4u-theme-modern-glow .f4u-btn-bubble {
  background: linear-gradient(135deg, rgba(3, 14, 33, 0.95), rgba(5, 24, 56, 0.92)) !important;
  border: 1.8px solid #00f2fe !important;
  box-shadow: 0 4px 22px rgba(0,0,0,0.6), 0 0 24px rgba(0,242,254,0.6), 0 0 32px rgba(163,230,53,0.35) !important;
  color: #a3e635 !important;
}
.f4u-theme-modern-glow .f4u-btn-pulse { background: #a3e635 !important; box-shadow: 0 0 8px #a3e635 !important; }
.f4u-theme-modern-glow .f4u-btn-tooltip { background: #03132e !important; color: #a3e635 !important; border: 1px solid #00f2fe !important; --tooltip-bg: #03132e; }

/* THEME 5 : GLASSMORPHISM */
.f4u-theme-glassmorphism .f4u-btn-bubble {
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(24px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
  border: 1.8px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 2px rgba(255,255,255,0.8) !important;
  color: #ffffff !important;
}
.f4u-theme-glassmorphism .f4u-btn-pulse { background: #38bdf8 !important; box-shadow: 0 0 8px #38bdf8 !important; }
.f4u-theme-glassmorphism .f4u-btn-tooltip { background: rgba(15,23,42,0.92) !important; backdrop-filter: blur(16px) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.4) !important; --tooltip-bg: #0f172a; }

/* THEME 6 : GOLD */
.f4u-theme-gold .f4u-btn-bubble {
  background: linear-gradient(135deg, #181206 0%, #0d0a02 100%) !important;
  border: 1.8px solid #f59e0b !important;
  box-shadow: 0 4px 22px rgba(0,0,0,0.7), 0 0 22px rgba(245,158,11,0.55) !important;
  color: #fbbf24 !important;
}
.f4u-theme-gold .f4u-btn-pulse { background: #fbbf24 !important; box-shadow: 0 0 8px #fbbf24 !important; }
.f4u-theme-gold .f4u-btn-tooltip { background: #1a1408 !important; color: #fbbf24 !important; border: 1px solid #f59e0b !important; --tooltip-bg: #1a1408; }

/* THEME 7 : WHITE-CLEAN */
.f4u-theme-white-clean .f4u-btn-bubble {
  background: #ffffff !important;
  border: 1.8px solid #cbd5e1 !important;
  box-shadow: 0 10px 25px -3px rgba(0,0,0,0.15), 0 0 16px rgba(16,185,129,0.25) !important;
  color: #0f172a !important;
}
.f4u-theme-white-clean .f4u-btn-pulse { background: #10b981 !important; box-shadow: 0 0 8px #10b981 !important; }
.f4u-theme-white-clean .f4u-btn-tooltip { background: #ffffff !important; color: #0f172a !important; border: 1px solid #cbd5e1 !important; --tooltip-bg: #ffffff; }

/* THEME 8 : DYNAMIC-GRADIENT */
.f4u-theme-dynamic-gradient .f4u-btn-bubble {
  background: linear-gradient(135deg, #090a1a 0%, #12092b 100%) !important;
  border: 1.8px solid #38bdf8 !important;
  box-shadow: 0 4px 22px rgba(0,0,0,0.7), 0 0 25px rgba(56,189,248,0.5), 0 0 35px rgba(168,85,247,0.4) !important;
  color: #c084fc !important;
}
.f4u-theme-dynamic-gradient .f4u-btn-pulse { background: #38bdf8 !important; box-shadow: 0 0 8px #38bdf8 !important; }
.f4u-theme-dynamic-gradient .f4u-btn-tooltip { background: #12092b !important; color: #c084fc !important; border: 1px solid #38bdf8 !important; --tooltip-bg: #12092b; }

/* THEME 9 : HEX-TECH */
.f4u-theme-hex-tech .f4u-btn-bubble {
  background: linear-gradient(135deg, #04131d 0%, #032127 100%) !important;
  border: 1.8px solid #06b6d4 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6), 0 0 22px rgba(6,182,212,0.5) !important;
  color: #22d3ee !important;
}
.f4u-theme-hex-tech .f4u-btn-pulse { background: #06b6d4 !important; box-shadow: 0 0 8px #06b6d4 !important; }
.f4u-theme-hex-tech .f4u-btn-tooltip { background: #032127 !important; color: #22d3ee !important; border: 1px solid #06b6d4 !important; --tooltip-bg: #032127; }

/* THEME 10 : NEUMORPHIC */
.f4u-theme-neumorphic .f4u-btn-bubble {
  background: #111422 !important;
  border: 1.8px solid rgba(255,255,255,0.08) !important;
  box-shadow: 6px 6px 16px #080a12, -6px -6px 16px #1a1e32 !important;
  color: #60a5fa !important;
}
.f4u-theme-neumorphic .f4u-btn-pulse { background: #60a5fa !important; box-shadow: 0 0 8px #60a5fa !important; }
.f4u-theme-neumorphic .f4u-btn-tooltip { background: #111422 !important; color: #60a5fa !important; border: 1px solid #22273e !important; --tooltip-bg: #111422; }

/* THEME 11 : BRUSHED-STEEL */
.f4u-theme-brushed-steel .f4u-btn-bubble {
  background: linear-gradient(90deg, #d1d5db 0%, #f3f4f6 25%, #9ca3af 50%, #e5e7eb 75%, #cbd5e1 100%) !important;
  border: 1.8px solid #ffffff !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4) !important;
  color: #0284c7 !important;
}
.f4u-theme-brushed-steel .f4u-btn-pulse { background: #0284c7 !important; box-shadow: 0 0 8px #0284c7 !important; }
.f4u-theme-brushed-steel .f4u-btn-tooltip { background: #ffffff !important; color: #0284c7 !important; border: 1px solid #cbd5e1 !important; --tooltip-bg: #ffffff; }

/* THEME 12 : DARK-RED */
.f4u-theme-dark-red .f4u-btn-bubble {
  background: linear-gradient(135deg, #180808 0%, #0d0303 100%) !important;
  border: 1.8px solid #ef4444 !important;
  box-shadow: 0 4px 22px rgba(0,0,0,0.7), 0 0 22px rgba(239,68,68,0.55) !important;
  color: #ef4444 !important;
}
.f4u-theme-dark-red .f4u-btn-pulse { background: #ef4444 !important; box-shadow: 0 0 8px #ef4444 !important; }
.f4u-theme-dark-red .f4u-btn-tooltip { background: #180808 !important; color: #ef4444 !important; border: 1px solid #ef4444 !important; --tooltip-bg: #180808; }

/* THEME 13 : EMERALD */
.f4u-theme-emerald .f4u-btn-bubble {
  background: linear-gradient(135deg, #03140b 0%, #020a06 100%) !important;
  border: 1.8px solid #10b981 !important;
  box-shadow: 0 4px 22px rgba(0,0,0,0.7), 0 0 22px rgba(16,185,129,0.55) !important;
  color: #10b981 !important;
}
.f4u-theme-emerald .f4u-btn-pulse { background: #10b981 !important; box-shadow: 0 0 8px #10b981 !important; }
.f4u-theme-emerald .f4u-btn-tooltip { background: #03140b !important; color: #10b981 !important; border: 1px solid #10b981 !important; --tooltip-bg: #03140b; }

/* THEME 14 : CYBER-PURPLE */
.f4u-theme-cyber-purple .f4u-btn-bubble {
  background: linear-gradient(135deg, #150524 0%, #0a0212 100%) !important;
  border: 1.8px solid #d946ef !important;
  box-shadow: 0 4px 22px rgba(0,0,0,0.7), 0 0 25px rgba(217,70,239,0.55) !important;
  color: #f472b6 !important;
}
.f4u-theme-cyber-purple .f4u-btn-pulse { background: #d946ef !important; box-shadow: 0 0 8px #d946ef !important; }
.f4u-theme-cyber-purple .f4u-btn-tooltip { background: #150524 !important; color: #f472b6 !important; border: 1px solid #d946ef !important; --tooltip-bg: #150524; }

/* THEME 15 : MIDNIGHT-BLUE */
.f4u-theme-midnight-blue .f4u-btn-bubble {
  background: linear-gradient(135deg, #050d24 0%, #020512 100%) !important;
  border: 1.8px solid #2563eb !important;
  box-shadow: 0 4px 22px rgba(0,0,0,0.7), 0 0 25px rgba(37,99,235,0.55) !important;
  color: #60a5fa !important;
}
.f4u-theme-midnight-blue .f4u-btn-pulse { background: #60a5fa !important; box-shadow: 0 0 8px #60a5fa !important; }
.f4u-theme-midnight-blue .f4u-btn-tooltip { background: #050d24 !important; color: #60a5fa !important; border: 1px solid #2563eb !important; --tooltip-bg: #050d24; }

/* THEME 16 : SUNSET-AMBER */
.f4u-theme-sunset-amber .f4u-btn-bubble {
  background: linear-gradient(135deg, #1f0f04 0%, #0e0702 100%) !important;
  border: 1.8px solid #f97316 !important;
  box-shadow: 0 4px 22px rgba(0,0,0,0.7), 0 0 25px rgba(249,115,22,0.55) !important;
  color: #fdba74 !important;
}
.f4u-theme-sunset-amber .f4u-btn-pulse { background: #f97316 !important; box-shadow: 0 0 8px #f97316 !important; }
.f4u-theme-sunset-amber .f4u-btn-tooltip { background: #1f0f04 !important; color: #fdba74 !important; border: 1px solid #f97316 !important; --tooltip-bg: #1f0f04; }

/* THEME 17 : MATRIX-GREEN */
.f4u-theme-matrix-green .f4u-btn-bubble {
  background: linear-gradient(135deg, #021a08 0%, #000904 100%) !important;
  border: 1.8px solid #22c55e !important;
  box-shadow: 0 4px 22px rgba(0,0,0,0.7), 0 0 25px rgba(34,197,94,0.65) !important;
  color: #4ade80 !important;
}
.f4u-theme-matrix-green .f4u-btn-pulse { background: #22c55e !important; box-shadow: 0 0 8px #22c55e !important; }
.f4u-theme-matrix-green .f4u-btn-tooltip { background: #021a08 !important; color: #4ade80 !important; border: 1px solid #22c55e !important; --tooltip-bg: #021a08; }

/* THEME 18 : ARCTIC-ICE */
.f4u-theme-arctic-ice .f4u-btn-bubble {
  background: linear-gradient(135deg, #0a1f2e 0%, #040d14 100%) !important;
  border: 1.8px solid #7dd3fc !important;
  box-shadow: 0 4px 22px rgba(0,0,0,0.7), 0 0 25px rgba(125,211,252,0.6) !important;
  color: #e0f2fe !important;
}
.f4u-theme-arctic-ice .f4u-btn-pulse { background: #7dd3fc !important; box-shadow: 0 0 8px #7dd3fc !important; }
.f4u-theme-arctic-ice .f4u-btn-tooltip { background: #0a1f2e !important; color: #e0f2fe !important; border: 1px solid #7dd3fc !important; --tooltip-bg: #0a1f2e; }

/* THEME 19 : SOLAR-FLARE */
.f4u-theme-solar-flare .f4u-btn-bubble {
  background: linear-gradient(135deg, #240e04 0%, #120601 100%) !important;
  border: 1.8px solid #ff6b00 !important;
  box-shadow: 0 4px 22px rgba(0,0,0,0.7), 0 0 25px rgba(255,107,0,0.6) !important;
  color: #fed7aa !important;
}
.f4u-theme-solar-flare .f4u-btn-pulse { background: #ff6b00 !important; box-shadow: 0 0 8px #ff6b00 !important; }
.f4u-theme-solar-flare .f4u-btn-tooltip { background: #240e04 !important; color: #fed7aa !important; border: 1px solid #ff6b00 !important; --tooltip-bg: #240e04; }

/* THEME 20 : CARBON-STEALTH */
.f4u-theme-carbon-stealth .f4u-btn-bubble {
  background: linear-gradient(135deg, #18191c 0%, #0d0e10 100%) !important;
  border: 1.8px solid #4b5563 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.8), 0 0 15px rgba(75,85,99,0.4) !important;
  color: #9ca3af !important;
}
.f4u-theme-carbon-stealth .f4u-btn-pulse { background: #9ca3af !important; box-shadow: 0 0 8px #9ca3af !important; }
.f4u-theme-carbon-stealth .f4u-btn-tooltip { background: #18191c !important; color: #9ca3af !important; border: 1px solid #4b5563 !important; --tooltip-bg: #18191c; }

/* THEME 21 : RETRO-SQUARE (LE BOUCLIER NŒUD CARRÉ RÉTRO BAS-GAUCHE COINS 12PX) */
.f4u-theme-retro-square .f4u-btn-bubble {
  background: linear-gradient(135deg, #0b1120 0%, #060b14 100%) !important;
  border: 1.8px solid #38bdf8 !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.65), 0 0 18px rgba(56,189,248,0.45) !important;
  color: #38bdf8 !important;
}
.f4u-theme-retro-square .f4u-btn-bubble:hover {
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.75), 0 0 25px rgba(56,189,248,0.65) !important;
  border-color: #7dd3fc !important;
  color: #ffffff !important;
}
.f4u-theme-retro-square .f4u-btn-pulse {
  background: #38bdf8 !important;
  box-shadow: 0 0 8px #38bdf8 !important;
  border-radius: 4px !important;
}
.f4u-theme-retro-square .f4u-btn-tooltip {
  background: #0b1120 !important;
  color: #38bdf8 !important;
  border: 1px solid #38bdf8 !important;
  border-radius: 8px !important;
  --tooltip-bg: #0b1120;
}

/* =========================================================================
   RESPONSIVE INTÉLLIGENT & ANTI-COLLISION
   ========================================================================= */
@media (max-width: 640px) {
  .f4u-smart-dock-left {
    left: 12px !important;
    bottom: 14px !important;
    gap: 8px !important;
  }
  .f4u-smart-dock-right {
    right: 12px !important;
    bottom: 14px !important;
  }
  .f4u-btn-bubble {
    width: 44px !important;
    height: 44px !important;
  }
  .f4u-btn-bubble svg {
    width: 20px !important;
    height: 20px !important;
  }
  .f4u-btn-tooltip {
    display: none !important;
  }
}


/* =========================================================================
   FAST4U SOVEREIGN TWO-TIER UNIFIED HEADER FRAMEWORK
   Full-width sticky, frosted glass blur, authentic monospace 'DM Mono' f4 box,
   strict per-ecosystem color charter & zero unwanted purple.
   ========================================================================= */

header.site-header-voila,
header.site-header.site-header-voila,
header.site-header {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  z-index: 1000 !important;
  box-sizing: border-box !important;
  background-color: rgba(11, 15, 25, 0.95);
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  min-height: auto !important;
  display: block !important;
}

/* Light mode backgrounds */
body.theme-classic header.site-header-voila,
body.theme-classic header.site-header,
html[data-theme="light"] header.site-header,
html[data-theme="light"] header.site-header-voila,
html:not(.dark) body.site-engine header.site-header-voila {
  background-color: rgba(244, 247, 246, 0.94) !important;
  border-bottom: 1px solid rgba(213, 223, 220, 0.8) !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
}

.voila-header-desktop {
  width: 100% !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
}

@media (min-width: 1800px) {
  .voila-header-desktop {
    max-width: 1680px !important;
    padding: 0 48px !important;
  }
}

@media (max-width: 900px) {
  .voila-header-desktop {
    padding: 0 16px !important;
  }
}

/* LIGNE SUPÉRIEURE : Logo à gauche, Langues & Thème à droite */
.header-tier-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body.theme-classic .header-tier-top,
html[data-theme="light"] .header-tier-top,
html:not(.dark) body.site-engine .header-tier-top {
  border-bottom-color: rgba(203, 213, 225, 0.6) !important;
}

.header-tier-brand .brand,
.header-tier-top .brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
}

/* =========================================================================
   L'AUTHENTIQUE LOGO 'f4' EN MONOSPACE AVEC CONTOUR & COULEUR DÉDIÉE
   ========================================================================= */
.brand-mark {
  display: inline-grid !important;
  place-items: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.06em !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.brand:hover .brand-mark,
.brand-mark:hover {
  transform: scale(1.06) !important;
}

.brand-titles {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.brand-name {
  font-size: 1.45rem !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
}

body.theme-classic .brand-name,
html[data-theme="light"] .brand-name,
html:not(.dark) body.site-engine .brand-name {
  color: #08111f !important;
}

.brand-muted {
  color: #94a3b8 !important;
  font-weight: 400 !important;
}

body.theme-classic .brand-muted,
html[data-theme="light"] .brand-muted {
  color: #64748b !important;
}

.brand-by {
  font-size: 8.5px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  margin-top: 4px !important;
}

body.theme-classic .brand-by,
html[data-theme="light"] .brand-by {
  color: #607078 !important;
}

.header-tier-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* GROUPE SÉLECTEUR DE LANGUE */
.voila-lang-pill-group,
.voila-lang-bar {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 12px !important;
  border-radius: 9999px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.theme-classic .voila-lang-pill-group,
body.theme-classic .voila-lang-bar,
html[data-theme="light"] .voila-lang-pill-group,
html[data-theme="light"] .voila-lang-bar,
html:not(.dark) body.site-engine .voila-lang-pill-group {
  background: rgba(15, 23, 42, 0.04) !important;
  border-color: rgba(203, 213, 225, 0.8) !important;
}

.voila-lang-btn,
.voila-lang-item {
  position: relative !important;
  padding: 3px 4px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  line-height: 1 !important;
}

.voila-lang-btn:hover,
.voila-lang-item:hover {
  color: #ffffff !important;
}

body.theme-classic .voila-lang-btn,
body.theme-classic .voila-lang-item,
html[data-theme="light"] .voila-lang-btn,
html[data-theme="light"] .voila-lang-item,
html:not(.dark) body.site-engine .voila-lang-btn {
  color: #64748b !important;
}

body.theme-classic .voila-lang-btn:hover,
body.theme-classic .voila-lang-item:hover,
html[data-theme="light"] .voila-lang-btn:hover,
html[data-theme="light"] .voila-lang-item:hover,
html:not(.dark) body.site-engine .voila-lang-btn:hover {
  color: #0f172a !important;
}

.voila-lang-btn.is-active,
.voila-lang-item.is-active {
  color: #ffffff !important;
  font-weight: 800 !important;
}

body.theme-classic .voila-lang-btn.is-active,
body.theme-classic .voila-lang-item.is-active,
html[data-theme="light"] .voila-lang-btn.is-active,
html[data-theme="light"] .voila-lang-item.is-active,
html:not(.dark) body.site-engine .voila-lang-btn.is-active {
  color: #0f172a !important;
}

.voila-lang-btn.is-active::after,
.voila-lang-item.is-active::after {
  content: '' !important;
  position: absolute !important;
  bottom: -4px !important;
  left: 2px !important;
  right: 2px !important;
  height: 2.5px !important;
  border-radius: 2px !important;
}

.voila-lang-sep {
  display: inline-block !important;
  width: 1px !important;
  height: 12px !important;
  background: rgba(255, 255, 255, 0.2) !important;
  margin: 0 2px !important;
}

body.theme-classic .voila-lang-sep,
html[data-theme="light"] .voila-lang-sep,
html:not(.dark) body.site-engine .voila-lang-sep {
  background: rgba(15, 23, 42, 0.2) !important;
}

/* BOUTON BASCULE DE THÈME MONOCHROMATIQUE */
.voila-theme-mono-btn,
.voila-theme-toggle,
.theme-toggle-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 9999px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #cbd5e1 !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  padding: 0 !important;
}

.voila-theme-mono-btn:hover,
.voila-theme-toggle:hover,
.theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  transform: scale(1.04) !important;
}

body.theme-classic .voila-theme-mono-btn,
body.theme-classic .voila-theme-toggle,
body.theme-classic .theme-toggle-btn,
html[data-theme="light"] .voila-theme-mono-btn,
html[data-theme="light"] .voila-theme-toggle,
html[data-theme="light"] .theme-toggle-btn,
html:not(.dark) body.site-engine .voila-theme-mono-btn {
  background: rgba(15, 23, 42, 0.04) !important;
  border-color: rgba(203, 213, 225, 0.8) !important;
  color: #334155 !important;
}

/* Sun/Moon icon visibility */
body:not(.theme-classic):not([data-theme="light"]) .voila-theme-mono-btn .voila-icon-sun,
html:not([data-theme="light"]) body:not(.theme-classic) .icon-sun,
html.dark .voila-theme-mono-btn .voila-icon-sun {
  display: inline-flex !important;
}
body:not(.theme-classic):not([data-theme="light"]) .voila-theme-mono-btn .voila-icon-moon,
html:not([data-theme="light"]) body:not(.theme-classic) .icon-moon,
html.dark .voila-theme-mono-btn .voila-icon-moon {
  display: none !important;
}

body.theme-classic .voila-theme-mono-btn .voila-icon-sun,
html[data-theme="light"] .voila-theme-mono-btn .voila-icon-sun,
html[data-theme="light"] .icon-sun,
html:not(.dark) body.site-engine .voila-theme-mono-btn .voila-icon-sun {
  display: none !important;
}
body.theme-classic .voila-theme-mono-btn .voila-icon-moon,
html[data-theme="light"] .voila-theme-mono-btn .voila-icon-moon,
html[data-theme="light"] .icon-moon,
html:not(.dark) body.site-engine .voila-theme-mono-btn .voila-icon-moon {
  display: inline-flex !important;
}

/* LIGNE INFÉRIEURE : Navigation & Boutons d'Action */
.header-tier-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 9px 0 !important;
  width: 100% !important;
  gap: 20px !important;
  box-sizing: border-box !important;
}

.header-tier-bottom .main-nav {
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;
  flex-wrap: wrap !important;
}

.v-nav-link,
.header-tier-bottom .main-nav a {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
  padding: 4px 0 !important;
}

.v-nav-link:hover,
.header-tier-bottom .main-nav a:hover {
  color: #ffffff !important;
}

body.theme-classic .v-nav-link,
body.theme-classic .header-tier-bottom .main-nav a,
html[data-theme="light"] .v-nav-link,
html[data-theme="light"] .header-tier-bottom .main-nav a,
html:not(.dark) body.site-engine .v-nav-link {
  color: #475569 !important;
}

body.theme-classic .v-nav-link:hover,
body.theme-classic .header-tier-bottom .main-nav a:hover,
html[data-theme="light"] .v-nav-link:hover,
html[data-theme="light"] .header-tier-bottom .main-nav a:hover,
html:not(.dark) body.site-engine .v-nav-link:hover {
  color: #0f172a !important;
}

/* BOUTONS D'ACCÈS / ACTIONS */
.header-auth-pills {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}

.v-header-dashboard-cta,
.header-pill-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 36px !important;
  padding: 0 20px !important;
  border-radius: 9999px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border: none !important;
  transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important;
}

.v-header-secondary-btn,
.header-pill-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 36px !important;
  padding: 0 16px !important;
  border-radius: 9999px !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #cbd5e1 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.18s ease !important;
}

.v-header-secondary-btn:hover,
.header-pill-secondary:hover {
  border-color: rgba(255, 255, 255, 0.5) !important;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.06) !important;
  transform: translateY(-1px) !important;
}

body.theme-classic .v-header-secondary-btn,
body.theme-classic .header-pill-secondary,
html[data-theme="light"] .v-header-secondary-btn,
html[data-theme="light"] .header-pill-secondary,
html:not(.dark) body.site-engine .v-header-secondary-btn {
  border-color: rgba(203, 213, 225, 0.8) !important;
  color: #334155 !important;
}

body.theme-classic .v-header-secondary-btn:hover,
body.theme-classic .header-pill-secondary:hover,
html[data-theme="light"] .v-header-secondary-btn:hover,
html[data-theme="light"] .header-pill-secondary:hover,
html:not(.dark) body.site-engine .v-header-secondary-btn:hover {
  border-color: #94a3b8 !important;
  color: #0f172a !important;
  background: rgba(15, 23, 42, 0.04) !important;
}

/* =========================================================================
   VARIATIONS DE COULEURS STRICTES PAR SITE / ÉCOSYSTÈME
   ========================================================================= */

/* --- 1. FAST4U HOSTING & CLOUD/STORAGE/DATA (ROUGE ET NOIR / VERT ET BLANC NOIR) --- */
body.site-hosting.theme-dark-red .brand-mark,
body.site-hosting:not(.theme-classic) .brand-mark,
body.theme-dark-red .brand-mark {
  background: #07080b !important;
  border: 1.5px solid #e50914 !important;
  color: #e50914 !important;
  box-shadow: 0 0 14px rgba(229, 9, 20, 0.35) !important;
}
body.site-hosting.theme-dark-red .brand b,
body.site-hosting:not(.theme-classic) .brand b,
body.theme-dark-red .brand b {
  color: #e50914 !important;
  text-shadow: 0 0 10px rgba(229, 9, 20, 0.5) !important;
}
body.site-hosting.theme-dark-red .header-pill-primary,
body.site-hosting.theme-dark-red .v-header-dashboard-cta,
body.theme-dark-red .header-pill-primary,
body.theme-dark-red .v-header-dashboard-cta {
  background: #e50914 !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px rgba(229, 9, 20, 0.45) !important;
}
body.site-hosting.theme-dark-red .header-pill-primary:hover,
body.site-hosting.theme-dark-red .v-header-dashboard-cta:hover,
body.theme-dark-red .header-pill-primary:hover,
body.theme-dark-red .v-header-dashboard-cta:hover {
  background: #ff2a38 !important;
  box-shadow: 0 0 22px rgba(229, 9, 20, 0.65) !important;
  transform: translateY(-1px) !important;
}
body.site-hosting.theme-dark-red .voila-lang-btn.is-active::after,
body.theme-dark-red .voila-lang-btn.is-active::after {
  background: linear-gradient(90deg, #e50914 0%, #ff2a38 100%) !important;
}

/* Fast4U Hosting Mode Clair (Vert et Blanc Noir) */
body.site-hosting.theme-classic .brand-mark,
body.theme-classic .brand-mark {
  background: #08111f !important;
  border: 1.5px solid #d5f26a !important;
  color: #d5f26a !important;
  box-shadow: 0 0 14px rgba(213, 242, 106, 0.35) !important;
}
body.site-hosting.theme-classic .brand b,
body.theme-classic .brand b {
  color: #18a687 !important;
}
body.site-hosting.theme-classic .header-pill-primary,
body.site-hosting.theme-classic .v-header-dashboard-cta,
body.theme-classic .header-pill-primary,
body.theme-classic .v-header-dashboard-cta {
  background: #08111f !important;
  color: #ffffff !important;
  border: 1px solid #08111f !important;
  box-shadow: 0 2px 8px rgba(8, 17, 31, 0.15) !important;
}
body.site-hosting.theme-classic .header-pill-primary:hover,
body.site-hosting.theme-classic .v-header-dashboard-cta:hover,
body.theme-classic .header-pill-primary:hover,
body.theme-classic .v-header-dashboard-cta:hover {
  background: #18304b !important;
  border-color: #18a687 !important;
  transform: translateY(-1px) !important;
}
body.site-hosting.theme-classic .voila-lang-btn.is-active::after,
body.theme-classic .voila-lang-btn.is-active::after {
  background: linear-gradient(90deg, #18a687 0%, #d5f26a 100%) !important;
}

/* --- 2. FAST4U.CO (BLEU / CYAN ÉLECTRIQUE) --- */
body.site-fast4uco .brand-mark,
header#siteHeader .brand-mark {
  background: #080f14 !important;
  border: 1.5px solid #00c4ff !important;
  color: #00c4ff !important;
  box-shadow: 0 0 14px rgba(0, 196, 255, 0.4) !important;
}
body.site-fast4uco .brand b,
header#siteHeader .brand b {
  color: #00c4ff !important;
}
body.site-fast4uco .header-pill-primary,
body.site-fast4uco .voila-cta-primary,
header#siteHeader .voila-cta-primary {
  background: #00c4ff !important;
  color: #080c14 !important;
  box-shadow: 0 0 18px rgba(0, 196, 255, 0.45) !important;
  font-weight: 800 !important;
}
body.site-fast4uco .header-pill-primary:hover,
body.site-fast4uco .voila-cta-primary:hover,
header#siteHeader .voila-cta-primary:hover {
  background: #38d3ff !important;
  transform: translateY(-1px) !important;
}
body.site-fast4uco .voila-lang-item.is-active::after,
header#siteHeader .voila-lang-item.is-active::after {
  background: #00c4ff !important;
}

/* Fast4u.co Mode Clair */
html[data-theme="light"] body.site-fast4uco .brand-mark,
html[data-theme="light"] header#siteHeader .brand-mark {
  background: #ffffff !important;
  border: 1.5px solid #0088cc !important;
  color: #0088cc !important;
  box-shadow: 0 0 14px rgba(0, 136, 204, 0.25) !important;
}
html[data-theme="light"] body.site-fast4uco .brand b,
html[data-theme="light"] header#siteHeader .brand b {
  color: #0088cc !important;
}
html[data-theme="light"] body.site-fast4uco .header-pill-primary,
html[data-theme="light"] body.site-fast4uco .voila-cta-primary,
html[data-theme="light"] header#siteHeader .voila-cta-primary {
  background: #0088cc !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px rgba(0, 136, 204, 0.35) !important;
}
html[data-theme="light"] body.site-fast4uco .header-pill-primary:hover,
html[data-theme="light"] body.site-fast4uco .voila-cta-primary:hover,
html[data-theme="light"] header#siteHeader .voila-cta-primary:hover {
  background: #0073ad !important;
  transform: translateY(-1px) !important;
}
html[data-theme="light"] body.site-fast4uco .voila-lang-item.is-active::after,
html[data-theme="light"] header#siteHeader .voila-lang-item.is-active::after {
  background: #0088cc !important;
}

/* --- 3. ENGINE (ROUGE & CYAN MINT) --- */
body.site-engine .brand-mark {
  background: #06090e !important;
  border: 1.8px solid #ff334b !important;
  color: #ff334b !important;
  box-shadow: 0 0 14px rgba(255, 51, 75, 0.25) !important;
}
body.site-engine .brand b,
body.site-engine .brand-name b {
  color: #ff334b !important;
}
body.site-engine .header-pill-primary {
  background: #00f0b5 !important;
  color: #06090e !important;
  border: 1px solid #00f0b5 !important;
  box-shadow: 0 0 16px rgba(0, 240, 181, 0.4) !important;
  font-weight: 800 !important;
}
body.site-engine .header-pill-primary:hover {
  background: #00d19d !important;
  border-color: #00d19d !important;
  transform: translateY(-1px) !important;
}
body.site-engine .voila-lang-btn.is-active::after {
  background: #00f0b5 !important;
}
/* Engine theme clair desactive de maniere permanente */
body.site-engine #themeToggleBtn,
body.site-engine .theme-toggle-btn,
body.site-engine .voila-theme-mono-btn {
  display: none !important;
}

/* --- 4. PORTAL (BEAU VERT ÉMERAUDE) --- */
body.site-portal .brand-mark {
  background: #06090e !important;
  border: 1.8px solid #10b981 !important;
  color: #10b981 !important;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.4) !important;
}
body.site-portal .brand b,
body.site-portal .brand-name b {
  color: #10b981 !important;
}
body.site-portal .header-pill-primary {
  background: #10b981 !important;
  color: #ffffff !important;
  border: 1px solid #10b981 !important;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.45) !important;
  font-weight: 800 !important;
}
body.site-portal .header-pill-primary:hover {
  background: #059669 !important;
  border-color: #059669 !important;
  transform: translateY(-1px) !important;
}
body.site-portal .voila-lang-btn.is-active::after,
body.site-portal .voila-lang-item.is-active::after {
  background: #10b981 !important;
}

/* --- 5. CENTRAL (FUCHSIA) --- */
body.site-central .brand-mark {
  background: #090812 !important;
  border: 2px solid #D946EF !important;
  color: #D946EF !important;
  box-shadow: 0 0 18px rgba(217, 70, 239, 0.35) !important;
}
body.site-central .brand b,
body.site-central .brand-name b {
  color: #D946EF !important;
}
body.site-central .header-pill-primary {
  background: #D946EF !important;
  color: #ffffff !important;
  border: 1px solid #D946EF !important;
  box-shadow: 0 0 16px rgba(217, 70, 239, 0.45) !important;
  font-weight: 800 !important;
}
body.site-central .header-pill-primary:hover {
  background: #c026d3 !important;
  border-color: #c026d3 !important;
  transform: translateY(-1px) !important;
}
body.site-central .voila-lang-btn.is-active::after,
body.site-central .voila-lang-item.is-active::after {
  background: #D946EF !important;
}

/* --- 6. VOILA (MAUVE #583BFF EXCLUSIF) --- */
body.site-voila .brand-mark {
  background: linear-gradient(135deg, #583bff 0%, #3b25c4 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 0 18px rgba(88, 59, 255, 0.45) !important;
}
body.site-voila .brand b,
body.site-voila .brand-name b {
  color: #583bff !important;
}
body.site-voila .header-pill-primary {
  background: #583bff !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px rgba(88, 59, 255, 0.45) !important;
}
body.site-voila .header-pill-primary:hover {
  background: #4830cc !important;
  box-shadow: 0 0 22px rgba(88, 59, 255, 0.65) !important;
  transform: translateY(-1px) !important;
}
body.site-voila .voila-lang-btn.is-active::after,
body.site-voila .voila-lang-item.is-active::after {
  background: linear-gradient(90deg, #295fff 0%, #593bff 52%, #9686ff 100%) !important;
}

/* Masquer tout contrôle orphelin injecté */
.header-controls {
  display: none !important;
}


/* =========================================================================
   DEDUPLICATION & SUPPRESSION CHIRURGICALE DES ÉLÉMENTS EXCÉDENTAIRES
   ========================================================================= */
#fast4uCookieManageButton,
.fast4u-cookie-manage,
.v-utility-bubble--cookie:not(#f4uCookieBtn),
#fast4u-chat-launcher,
.v-utility-bubble--chat:not(#f4uChatBtn),
#fast4uShieldButton,
#voilaLeftUtilityDock,
#saas-shield-widget-root,
#fast4uEcosystemUtilityDock,
body > #fast4u-shield-root .ffy-badge-dock.position-fixed,
body > .ffy-badge-dock.position-fixed {
  display: none !important;
}

/* =========================================================================
   AUTHENTIQUE BOUCLIER WEB SHIELD EXTENSIBLE AU SURVOL DANS LE SMART DOCK
   ========================================================================= */
.f4u-shield-slot {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  position: relative !important;
  overflow: visible !important;
}

.f4u-shield-slot .ffy-badge-dock {
  display: inline-flex !important;
  position: relative !important;
  overflow: visible !important;
  outline: none !important;
  cursor: pointer !important;
  user-select: none !important;
}

.f4u-shield-slot .ffy-badge-pill {
  display: inline-flex !important;
  align-items: center !important;
  width: 48px !important;
  height: 48px !important;
  padding: 5px !important;
  gap: 0 !important;
  border-radius: 9999px !important;
  border: 1.5px solid #00c6ff !important;
  background: radial-gradient(circle at 25% 25%, #081a36 0%, #030816 100%) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 14px rgba(0, 198, 255, 0.25) !important;
  transition: width 0.38s cubic-bezier(0.16, 1, 0.3, 1), padding 0.38s ease, box-shadow 0.35s ease, transform 0.25s ease !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.f4u-smart-dock-left.f4u-theme-retro-square .f4u-shield-slot .ffy-badge-pill,
.f4u-shield-slot .ffy-badge-dock.shape-square .ffy-badge-pill {
  border-radius: 12px !important;
}

.f4u-shield-slot .ffy-shield-icon-wrapper {
  position: relative !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.f4u-shield-slot .ffy-shield-icon {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.f4u-shield-slot .ffy-shield-icon svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.f4u-shield-slot .ffy-radar-pulse {
  position: absolute !important;
  top: 1px !important;
  right: 1px !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 9999px !important;
  background: #a3e635 !important;
  border: 1.5px solid #06152f !important;
  box-shadow: 0 0 8px #a3e635 !important;
  animation: f4uPulseAnim 2s infinite ease-in-out !important;
}

.f4u-shield-slot .ffy-badge-text-col,
.f4u-shield-slot .ffy-date-block {
  max-width: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  transition: max-width 0.38s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, margin 0.38s ease !important;
}

.f4u-shield-slot .ffy-badge-brand {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font: 800 11px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  letter-spacing: 0.05em !important;
  color: #38bdf8 !important;
}

.f4u-shield-slot .ffy-status-text {
  font: 700 9px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: #a3e635 !important;
  letter-spacing: 0.06em !important;
}

.f4u-shield-slot .ffy-date-block {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
  padding-left: 10px !important;
}

.f4u-shield-slot .ffy-date-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.f4u-shield-slot .ffy-calendar-icon svg {
  width: 13px !important;
  height: 13px !important;
  stroke: #38bdf8 !important;
}

.f4u-shield-slot .ffy-date-info {
  display: flex !important;
  flex-direction: column !important;
  font: 700 9px/1.1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: #94a3b8 !important;
}

.f4u-shield-slot .ffy-scan-date {
  color: #f1f5f9 !important;
}

/* EXPANSION AU SURVOL DU BOUCLIER */
.f4u-shield-slot .ffy-badge-dock:hover .ffy-badge-pill,
.f4u-shield-slot .ffy-badge-dock:focus-within .ffy-badge-pill {
  width: auto !important;
  padding: 6px 18px 6px 8px !important;
  gap: 12px !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.7), 0 0 24px rgba(0, 198, 255, 0.45) !important;
}

.f4u-shield-slot .ffy-badge-dock:hover .ffy-badge-text-col,
.f4u-shield-slot .ffy-badge-dock:focus-within .ffy-badge-text-col {
  max-width: 320px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  margin-left: 4px !important;
}

.f4u-shield-slot .ffy-badge-dock:hover .ffy-date-block,
.f4u-shield-slot .ffy-badge-dock:focus-within .ffy-date-block {
  max-width: 200px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}