/* --- Badges --- */
  .badge{
    display:inline-block; padding:4px 10px; border-radius:999px;
    border:1px solid var(--border,#262a31); background:var(--muted,#1a1d22);
    margin:0 6px 6px 0; font-size:12px; letter-spacing:.2px;
  }
  /* Couleurs (activées par la classe ajoutée en JS) */
  .badge--django{border-color:#2e7d32; background:color-mix(in oklab,#2e7d32 12%, var(--muted,#1a1d22));}
  .badge--celery{border-color:#56b274; background:color-mix(in oklab,#56b274 14%, var(--muted,#1a1d22));}
  .badge--redis{border-color:#d54b3d; background:color-mix(in oklab,#d54b3d 12%, var(--muted,#1a1d22));}
  .badge--postgres{border-color:#336791; background:color-mix(in oklab,#336791 14%, var(--muted,#1a1d22));}
  .badge--nginx{border-color:#199900; background:color-mix(in oklab,#199900 12%, var(--muted,#1a1d22));}
  .badge--docker{border-color:#0db7ed; background:color-mix(in oklab,#0db7ed 12%, var(--muted,#1a1d22));}
  .badge--gha{border-color:#8957e5; background:color-mix(in oklab,#8957e5 12%, var(--muted,#1a1d22));}
  .badge--sentry{border-color:#ff4c4c; background:color-mix(in oklab,#ff4c4c 12%, var(--muted,#1a1d22));}
  .badge--prom{border-color:#e6522c; background:color-mix(in oklab,#e6522c 12%, var(--muted,#1a1d22));}

  .list{margin:0; padding-left:18px}

  /* --- Tableau clean & fun --- */
  .table{width:100%; border-collapse:separate; border-spacing:0}
  .table thead th{
    position:sticky; top:0;
    background:linear-gradient(180deg, rgba(40,44,54,.9), rgba(22,24,28,.95));
    backdrop-filter:blur(4px);
    text-align:left; padding:12px 14px; border-bottom:1px solid var(--border,#262a31); font-weight:600;
  }
  .table-wrap{ --ring: color-mix(in oklab, var(--brand,#4f8cf3) 26%, transparent); }
  .table tbody tr{ transition:background .15s ease, transform .06s ease }
  .table tbody tr:hover{ background:color-mix(in oklab, var(--ring) 16%, transparent) }
  .table tbody td{ padding:12px 14px; vertical-align:top; border-bottom:1px dashed color-mix(in oklab, var(--border,#262a31), transparent 20%) }

  /* Coins arrondis du head */
  .table thead tr th:first-child{ border-top-left-radius:14px }
  .table thead tr th:last-child{ border-top-right-radius:14px }

  /* Liseré subtil autour de la carte */
  .card{ position:relative }
  .card::after{
    content:\"\"; position:absolute; inset:0; border-radius:16px; pointer-events:none;
    box-shadow:0 0 0 1px color-mix(in oklab, var(--brand,#4f8cf3) 28%, var(--border,#262a31));
  }

  /* Mobile */
  @media (max-width:760px){
    .table thead{display:none}
    .table tbody tr{display:grid; grid-template-columns:1fr; border-bottom:1px solid var(--border,#262a31)}
    .table tbody td{border:none; padding:10px 14px}
    .table tbody td::before{content:attr(data-th) \" : \"; display:block; color:var(--text-dim,#b9bec7); font-size:12px; margin-bottom:4px}
  }