feat: Add CrowdSec Bouncer Key Display component and integrate into Security page

- Implemented CrowdSecBouncerKeyDisplay component to fetch and display the bouncer API key information.
- Added loading skeletons and error handling for API requests.
- Integrated the new component into the Security page, conditionally rendering it based on CrowdSec status.
- Created unit tests for the CrowdSecBouncerKeyDisplay component, covering various states including loading, registered/unregistered bouncer, and no key configured.
- Added functional tests for the Security page to ensure proper rendering of the CrowdSec Bouncer Key Display based on the CrowdSec status.
- Updated translation files to include new keys related to the bouncer API key functionality.

frontend/src/pages/Security.tsx

@@ -11,6 +11,7 @@ import { toast } from '../utils/toast'
 import { ConfigReloadOverlay } from '../components/LoadingStates'
 import { LiveLogViewer } from '../components/LiveLogViewer'
 import { SecurityNotificationSettingsModal } from '../components/SecurityNotificationSettingsModal'
+import { CrowdSecBouncerKeyDisplay } from '../components/CrowdSecBouncerKeyDisplay'
 import { PageShell } from '../components/layout/PageShell'
 import {
   Card,
@@ -396,6 +397,11 @@ export default function Security() {
 
         <Outlet />
 
+        {/* CrowdSec Bouncer Key Display - only shown when CrowdSec is enabled */}
+        {status.cerberus?.enabled && (crowdsecStatus?.running ?? status.crowdsec.enabled) && (
+          <CrowdSecBouncerKeyDisplay />
+        )}
+
         {/* Security Layer Cards */}
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
           {/* CrowdSec - Layer 1: IP Reputation */}