/* ============================================================
   TrustyData — status page (POC)
   Charte 2026. Subset de tokens inliné (source de vérité :
   trustydata-site/static/css/style.css). Aucune dépendance,
   aucun build. Fonts : stack avec fallback système — pour la
   typo exacte, copier les woff2 depuis trustydata-site et
   ajouter les @font-face (voir README).
   ============================================================ */

:root {
  --deep-navy:    #0B1628;
  --ocean-blue:   #1B3A5C;
  --trust-blue:   #2D7BE5;
  --sky-accent:   #5BA8F5;
  --ice-blue:     #E8F2FF;

  --emerald:      #10B981;
  --emerald-soft: #D1FAE5;
  --amber-warn:   #F59E0B;
  --amber-soft:   #FEF3C7;
  --coral-alert:  #F43F5E;
  --coral-soft:   #FFE4E6;

  --white:        #FFFFFF;
  --cloud:        #F8FAFC;
  --mist:         #E2E8F0;
  --slate-400:    #94A3B8;
  --slate-500:    #64748B;
  --slate-600:    #475569;
  --slate-700:    #334155;
  --charcoal:     #1E293B;

  --font-display: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 100px;

  --shadow-card: 0 1px 2px rgba(11, 22, 40, .04), 0 8px 24px rgba(11, 22, 40, .06);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--cloud);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: 100%; max-width: 880px; margin-inline: auto; padding-inline: 1.25rem; }

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--trust-blue); color: #fff; padding: .5rem 1rem;
  border-radius: 0 0 var(--r-md) 0; z-index: 100;
}
.skip-link:focus { left: 0; }

a { color: var(--trust-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--trust-blue); outline-offset: 2px; border-radius: 4px; }

/* ── Header ─────────────────────────────────────────────── */
.status-header {
  background: var(--white);
  border-bottom: 1px solid var(--mist);
  position: sticky; top: 0; z-index: 10;
}
.status-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.brand {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
  color: var(--deep-navy);
}
.brand:hover { text-decoration: none; }
.brand__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gradient-accent, linear-gradient(135deg, var(--trust-blue), var(--emerald)));
}
.brand__badge {
  font-family: var(--font-body); font-weight: 600; font-size: .7rem;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--trust-blue); background: var(--ice-blue);
  padding: .15rem .5rem; border-radius: var(--r-pill);
}
.status-header nav { display: flex; gap: 1.25rem; font-size: .9rem; }
.status-header nav a { color: var(--slate-600); }

/* ── Bannière globale ───────────────────────────────────── */
.banner {
  display: flex; align-items: center; gap: 1rem;
  margin: 2rem 0 1.5rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--mist);
  background: var(--white);
  box-shadow: var(--shadow-card);
}
.banner__icon {
  flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%;
  background: var(--slate-400);
}
.banner__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--deep-navy); }
.banner__sub { margin: .15rem 0 0; font-size: .9rem; color: var(--slate-500); }

.banner--ok    { background: var(--emerald-soft); border-color: #A7F3D0; }
.banner--ok .banner__icon { background: var(--emerald); box-shadow: 0 0 0 4px rgba(16,185,129,.18); }
.banner--ok .banner__title { color: #065F46; }

.banner--degraded { background: var(--amber-soft); border-color: #FDE68A; }
.banner--degraded .banner__icon { background: var(--amber-warn); box-shadow: 0 0 0 4px rgba(245,158,11,.18); }
.banner--degraded .banner__title { color: #92400E; }

.banner--down { background: var(--coral-soft); border-color: #FECDD3; }
.banner--down .banner__icon { background: var(--coral-alert); box-shadow: 0 0 0 4px rgba(244,63,94,.18); }
.banner--down .banner__title { color: #9F1239; }

.banner--error .banner__icon { background: var(--slate-400); }

/* ── Cartes composants ──────────────────────────────────── */
.components { display: grid; gap: .75rem; margin-bottom: 2.5rem; }

.card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .5rem 1rem;
  padding: 1.1rem 1.4rem;
  background: var(--white);
  border: 1px solid var(--mist);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
.card__name { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--deep-navy); }
.card__desc { grid-column: 1; font-size: .85rem; color: var(--slate-500); margin-top: .1rem; }

.pill {
  justify-self: end;
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .82rem; font-weight: 600;
  padding: .3rem .7rem; border-radius: var(--r-pill);
}
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pill--ok       { color: #047857; background: var(--emerald-soft); }
.pill--degraded { color: #B45309; background: var(--amber-soft); }
.pill--down     { color: #BE123C; background: var(--coral-soft); }
.pill--unknown  { color: var(--slate-600); background: var(--mist); }

.card__metrics {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: 1.25rem;
  margin-top: .35rem; padding-top: .75rem;
  border-top: 1px dashed var(--mist);
  font-family: var(--font-mono); font-size: .8rem; color: var(--slate-600);
}
.card__metrics span b { color: var(--charcoal); font-weight: 600; }

/* ── Skeleton (état de chargement) ──────────────────────── */
.skeleton-card {
  height: 86px; border-radius: var(--r-lg);
  background: linear-gradient(90deg, var(--white) 0%, var(--cloud) 50%, var(--white) 100%);
  background-size: 200% 100%;
  border: 1px solid var(--mist);
  animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton-card { animation: none; } }

/* ── Meta / pied technique ──────────────────────────────── */
.meta { margin-bottom: 3rem; }
.meta__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
  margin: 0 0 1rem;
}
.meta__grid dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--slate-400); }
.meta__grid dd { margin: .2rem 0 0; font-family: var(--font-mono); font-size: .95rem; color: var(--slate-700); }
.meta__note { font-size: .82rem; color: var(--slate-500); margin: 0; }

/* ── Footer ─────────────────────────────────────────────── */
.status-footer {
  border-top: 1px solid var(--mist); background: var(--white);
  padding: 1.5rem 0; font-size: .85rem; color: var(--slate-500);
}
.status-footer p { margin: .15rem 0; }

@media (max-width: 600px) {
  .status-header nav { gap: .9rem; font-size: .82rem; }
  .meta__grid { grid-template-columns: 1fr; }
  .card { grid-template-columns: 1fr; }
  .pill { justify-self: start; }
}