Erreur : Frontmatter invalide

Chemin: /var/www/vhosts/milogistica.cloud/httpdocs/user/pages/07.estado/default.fr.md

Failed to read default.fr.md: Unexpected characters near "infrastructure — MiLogistica Hub3PL'" at line 1 (near "title: 'État du système et de l'infrastructure — MiLogistica Hub3PL'").

---
title: 'État du système et de l'infrastructure — MiLogistica Hub3PL'
menu: 'État'
metadata:
  description: 'Santé des services en temps réel, latence des microservices, métriques de disponibilité SLA de 99,98% et historique de maintenance de la plateforme MiLogistica Hub3PL.'
  keywords: 'état du système, status hub3pl, disponibilité wms tms, uptime logistique 3pl'
---

<div class="subpage-container" id="hub-status-page-root">

  <!-- ==========================================================================
       SUBPAGE HERO HEADER
       ========================================================================== -->
  <header class="subpage-hero" style="margin-bottom: 2rem;">
    <div class="subpage-hero-inner">
      <div style="display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem;">
        <span class="tech-tag tech-tag-emerald">DISPONIBILITÉ & SRE</span>
        <span class="tech-tag">SLA 99,98%</span>
      </div>
      <h1 class="subpage-title">
        État des services et infrastructure
      </h1>
      <p class="subpage-subtitle">
        Surveillance publique continue de la plateforme cloud-native MiLogistica Hub3PL. Consultez en direct la santé des API, moteurs WMS et TMS, bases PostgreSQL 17, files Valkey 8 et maintenances planifiées.
      </p>
    </div>
  </header>

  <!-- ==========================================================================
       HERO OVERALL STATUS BANNER
       ========================================================================== -->
  <div class="status-hero-banner banner-operational" id="hub-status-hero-banner">
    <div class="status-hero-left">
      <div class="status-hero-icon" id="hub-status-hero-icon">
        <i class="fa-solid fa-circle-check"></i>
      </div>
      <div>
        <h2 class="status-hero-title" id="hub-status-hero-title">Tous les systèmes sont opérationnels</h2>
        <p class="status-hero-subtitle" id="hub-status-hero-desc">Le cluster de microservices, le moteur WMS et les connecteurs fonctionnent selon les spécifications SLA nominales.</p>
      </div>
    </div>
    <div class="status-hero-meta">
      <div>Dernière vérification :</div>
      <div id="hub-status-hero-updated" style="font-weight: 700; color: var(--hub-text-primary);">En temps réel</div>
    </div>
  </div>

  <!-- ==========================================================================
       4 SLA KPIS
       ========================================================================== -->
  <div class="status-kpi-grid">
    <div class="status-kpi-card">
      <div class="status-kpi-label">Uptime global (90 jours)</div>
      <div class="status-kpi-value" id="kpi-uptime-val" style="color: var(--hub-accent-emerald);">99,98%</div>
      <div class="status-kpi-subtext">Engagement contractuel SLA</div>
    </div>
    <div class="status-kpi-card">
      <div class="status-kpi-label">Latence moyenne API</div>
      <div class="status-kpi-value" id="kpi-latency-val">18 ms</div>
      <div class="status-kpi-subtext">P95 < 45 ms sur les transactions</div>
    </div>
    <div class="status-kpi-card">
      <div class="status-kpi-label">Taux de succès transactionnel</div>
      <div class="status-kpi-value" id="kpi-success-val" style="color: var(--hub-accent-emerald);">99,99%</div>
      <div class="status-kpi-subtext">Lectures et écritures WMS</div>
    </div>
    <div class="status-kpi-card">
      <div class="status-kpi-label">Incidents actifs</div>
      <div class="status-kpi-value" id="kpi-incidents-val">0</div>
      <div class="status-kpi-subtext">Interventions d'astreinte</div>
    </div>
  </div>

  <!-- ==========================================================================
       SUBSYSTEMS HEALTH BREAKDOWN
       ========================================================================== -->
  <div class="status-section-header">
    <h3 class="status-section-title">
      <i class="fa-solid fa-server" style="color: var(--hub-accent-blue);"></i> Santé détaillée par sous-système
    </h3>
    <span style="font-size: 0.825rem; font-family: var(--hub-mono); color: var(--hub-text-muted);">
      Historique glissant de 90 jours
    </span>
  </div>

  <div class="status-services-list" id="hub-services-list">
    <div class="status-service-card">
      <div class="status-service-header">
        <div class="status-service-title-area">
          <span class="status-indicator-dot"></span>
          <div>
            <div class="status-service-name">API REST & Passerelle Webhooks</div>
            <div class="status-service-desc">Endpoints d'intégration transactionnelle, authentification et webhooks.</div>
          </div>
        </div>
        <div class="status-service-metrics">
          <span style="color: var(--hub-text-muted);">18 ms</span>
          <span style="font-weight: 700; color: var(--hub-accent-emerald);">99,99%</span>
          <span class="tech-tag tech-tag-emerald">Opérationnel</span>
        </div>
      </div>
      <div class="uptime-timeline-container">
        <div class="uptime-timeline-ticks">
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                  </div>
        <div class="uptime-timeline-legend">
          <span>Il y a 90 jours</span>
          <span>100% de disponibilité aujourd'hui</span>
        </div>
      </div>
    </div>

    <div class="status-service-card">
      <div class="status-service-header">
        <div class="status-service-title-area">
          <span class="status-indicator-dot"></span>
          <div>
            <div class="status-service-name">Base de données principale (PostgreSQL 17)</div>
            <div class="status-service-desc">Moteur relationnel avec schémas multi-tenants et transactions ACID.</div>
          </div>
        </div>
        <div class="status-service-metrics">
          <span style="color: var(--hub-text-muted);">3 ms</span>
          <span style="font-weight: 700; color: var(--hub-accent-emerald);">99,99%</span>
          <span class="tech-tag tech-tag-emerald">Opérationnel</span>
        </div>
      </div>
      <div class="uptime-timeline-container">
        <div class="uptime-timeline-ticks">
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                  </div>
        <div class="uptime-timeline-legend">
          <span>Il y a 90 jours</span>
          <span>100% de disponibilité aujourd'hui</span>
        </div>
      </div>
    </div>

    <div class="status-service-card">
      <div class="status-service-header">
        <div class="status-service-title-area">
          <span class="status-indicator-dot"></span>
          <div>
            <div class="status-service-name">Files d'attente et cache asynchrone (Valkey 8)</div>
            <div class="status-service-desc">Gestionnaire de files d'événements en mémoire et courtier de sync.</div>
          </div>
        </div>
        <div class="status-service-metrics">
          <span style="color: var(--hub-text-muted);">1 ms</span>
          <span style="font-weight: 700; color: var(--hub-accent-emerald);">99,99%</span>
          <span class="tech-tag tech-tag-emerald">Opérationnel</span>
        </div>
      </div>
      <div class="uptime-timeline-container">
        <div class="uptime-timeline-ticks">
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                  </div>
        <div class="uptime-timeline-legend">
          <span>Il y a 90 jours</span>
          <span>100% de disponibilité aujourd'hui</span>
        </div>
      </div>
    </div>

    <div class="status-service-card">
      <div class="status-service-header">
        <div class="status-service-title-area">
          <span class="status-indicator-dot"></span>
          <div>
            <div class="status-service-name">Moteur WMS Core (Vagues et Picking)</div>
            <div class="status-service-desc">Algorithme de consolidation des vagues et stock multi-clients.</div>
          </div>
        </div>
        <div class="status-service-metrics">
          <span style="color: var(--hub-text-muted);">14 ms</span>
          <span style="font-weight: 700; color: var(--hub-accent-emerald);">99,98%</span>
          <span class="tech-tag tech-tag-emerald">Opérationnel</span>
        </div>
      </div>
      <div class="uptime-timeline-container">
        <div class="uptime-timeline-ticks">
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                  </div>
        <div class="uptime-timeline-legend">
          <span>Il y a 90 jours</span>
          <span>100% de disponibilité aujourd'hui</span>
        </div>
      </div>
    </div>

    <div class="status-service-card">
      <div class="status-service-header">
        <div class="status-service-title-area">
          <span class="status-indicator-dot"></span>
          <div>
            <div class="status-service-name">Moteur TMS et Expédition Multi-Transporteurs</div>
            <div class="status-service-desc">Génération d'étiquettes ZPL/PDF et calcul automatisé des tarifs.</div>
          </div>
        </div>
        <div class="status-service-metrics">
          <span style="color: var(--hub-text-muted);">22 ms</span>
          <span style="font-weight: 700; color: var(--hub-accent-emerald);">99,96%</span>
          <span class="tech-tag tech-tag-emerald">Opérationnel</span>
        </div>
      </div>
      <div class="uptime-timeline-container">
        <div class="uptime-timeline-ticks">
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                  </div>
        <div class="uptime-timeline-legend">
          <span>Il y a 90 jours</span>
          <span>100% de disponibilité aujourd'hui</span>
        </div>
      </div>
    </div>

    <div class="status-service-card">
      <div class="status-service-header">
        <div class="status-service-title-area">
          <span class="status-indicator-dot"></span>
          <div>
            <div class="status-service-name">Moteur d'intelligence documentaire (OCR Tesseract 5)</div>
            <div class="status-service-desc">Extraction de texte sur bons de livraison scannés et CMR.</div>
          </div>
        </div>
        <div class="status-service-metrics">
          <span style="color: var(--hub-text-muted);">35 ms</span>
          <span style="font-weight: 700; color: var(--hub-accent-emerald);">99,95%</span>
          <span class="tech-tag tech-tag-emerald">Opérationnel</span>
        </div>
      </div>
      <div class="uptime-timeline-container">
        <div class="uptime-timeline-ticks">
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                  </div>
        <div class="uptime-timeline-legend">
          <span>Il y a 90 jours</span>
          <span>100% de disponibilité aujourd'hui</span>
        </div>
      </div>
    </div>

    <div class="status-service-card">
      <div class="status-service-header">
        <div class="status-service-title-area">
          <span class="status-indicator-dot"></span>
          <div>
            <div class="status-service-name">Connecteurs eCommerce (Shopify, PrestaShop, Woo)</div>
            <div class="status-service-desc">Synchronisation bidirectionnelle sans surveillance des commandes et stocks.</div>
          </div>
        </div>
        <div class="status-service-metrics">
          <span style="color: var(--hub-text-muted);">24 ms</span>
          <span style="font-weight: 700; color: var(--hub-accent-emerald);">99,97%</span>
          <span class="tech-tag tech-tag-emerald">Opérationnel</span>
        </div>
      </div>
      <div class="uptime-timeline-container">
        <div class="uptime-timeline-ticks">
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                  </div>
        <div class="uptime-timeline-legend">
          <span>Il y a 90 jours</span>
          <span>100% de disponibilité aujourd'hui</span>
        </div>
      </div>
    </div>

    <div class="status-service-card">
      <div class="status-service-header">
        <div class="status-service-title-area">
          <span class="status-indicator-dot"></span>
          <div>
            <div class="status-service-name">Moteur EDI / Documents PDF (Gotenberg)</div>
            <div class="status-service-desc">Rendu des factures mensuelles, listes de colisage et manifestes.</div>
          </div>
        </div>
        <div class="status-service-metrics">
          <span style="color: var(--hub-text-muted);">28 ms</span>
          <span style="font-weight: 700; color: var(--hub-accent-emerald);">99,98%</span>
          <span class="tech-tag tech-tag-emerald">Opérationnel</span>
        </div>
      </div>
      <div class="uptime-timeline-container">
        <div class="uptime-timeline-ticks">
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                  </div>
        <div class="uptime-timeline-legend">
          <span>Il y a 90 jours</span>
          <span>100% de disponibilité aujourd'hui</span>
        </div>
      </div>
    </div>

    <div class="status-service-card">
      <div class="status-service-header">
        <div class="status-service-title-area">
          <span class="status-indicator-dot"></span>
          <div>
            <div class="status-service-name">Réseau de points PUDO et consignes automatiques</div>
            <div class="status-service-desc">Géolocalisation et affectation des casiers InPost, Correos et Seur.</div>
          </div>
        </div>
        <div class="status-service-metrics">
          <span style="color: var(--hub-text-muted);">19 ms</span>
          <span style="font-weight: 700; color: var(--hub-accent-emerald);">99,97%</span>
          <span class="tech-tag tech-tag-emerald">Opérationnel</span>
        </div>
      </div>
      <div class="uptime-timeline-container">
        <div class="uptime-timeline-ticks">
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                    <div class="uptime-tick" title="100%"></div>
                  </div>
        <div class="uptime-timeline-legend">
          <span>Il y a 90 jours</span>
          <span>100% de disponibilité aujourd'hui</span>
        </div>
      </div>
    </div>
  </div>

  <!-- ==========================================================================
       SCHEDULED MAINTENANCE SECTION
       ========================================================================== -->
  <div class="status-section-header">
    <h3 class="status-section-title">
      <i class="fa-solid fa-calendar-check" style="color: var(--hub-accent-blue);"></i> Maintenances programmées
    </h3>
    <span class="tech-tag tech-tag-blue">MISES À JOUR SANS INTERRUPTION DE SERVICE</span>
  </div>

  <div class="maintenance-card card-blue">
    <div class="maintenance-card-header">
      <div style="display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;">
        <span class="tech-tag tech-tag-blue">PROGRAMMÉ</span>
        <h4 class="maintenance-card-title">Mise à niveau progressive des correctifs de sécurité kernel et Valkey 8</h4>
      </div>
      <span style="font-family: var(--hub-mono); font-size: 0.8rem; color: var(--hub-text-muted);">
        25 oct. 2026 · 02:00 - 03:30 UTC
      </span>
    </div>
    <div class="maintenance-card-body">
      <p style="margin: 0 0 0.5rem 0;">
        Application de correctifs de sécurité sur les répliques Valkey 8. L'architecture de basculement automatique garantit zéro interruption de service dans les entrepôts.
      </p>
      <div style="display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem;">
        <span class="maintenance-badge-tech"><i class="fa-solid fa-server"></i> Services : Valkey 8, API Gateway</span>
        <span class="maintenance-badge-tech"><i class="fa-solid fa-shield-halved"></i> Impact estimé : Nul (0 ms)</span>
      </div>
    </div>
  </div>

  <!-- ==========================================================================
       INCIDENT LOGS
       ========================================================================== -->
  <div class="status-section-header">
    <h3 class="status-section-title">
      <i class="fa-solid fa-clock-rotate-left" style="color: var(--hub-accent-blue);"></i> Historique des incidents résolus
    </h3>
    <span style="font-size: 0.825rem; font-family: var(--hub-mono); color: var(--hub-text-muted);">
      90 derniers jours
    </span>
  </div>

  <div class="incident-card">
    <div class="incident-card-header">
      <div style="display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;">
        <span class="tech-tag tech-tag-emerald"><i class="fa-solid fa-circle-check"></i> RÉSOLU</span>
        <h4 class="incident-card-title">Latence transitoire sur la passerelle de tracking des transporteurs</h4>
      </div>
      <span style="font-family: var(--hub-mono); font-size: 0.8rem; color: var(--hub-text-muted);">
        18 sept. 2026 · 14:15 - 14:32 UTC
      </span>
    </div>
    <div class="incident-card-body">
      <p style="margin: 0;">
        Un transporteur tiers a subi des ralentissements sur ses API. Le système a géré les files d'attente asynchrones sans aucun impact sur l'impression des étiquettes à quai.
      </p>
    </div>
  </div>

</div>