/* ─────────────────────────────────────────────────────────────────────────
   Socle des maquettes marki v2 — repris du langage visuel de pppt2.
   L'accent est `sky` ; les surfaces, les bordures et les textes suivent
   l'échelle `slate` de Tailwind.
   ───────────────────────────────────────────────────────────────────────── */

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

body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Les chiffres alignés dans les colonnes de montants et de compteurs. */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Étiquette de validation, posée par la coquille ou à la main sur les
   portails. Elle ne doit jamais masquer un élément actionnable. */
.mockup-tag {
  position: fixed;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 60;
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.82);
  color: #fff;
  padding: 0.25rem 0.65rem;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: none;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .mockup-tag {
    bottom: 4.75rem; /* au-dessus du dock mobile */
  }
}

/* Les tableaux larges défilent franchement, avec la barre visible. */
.force-scrollbar {
  overflow-x: auto;
  scrollbar-width: thin;
}
.force-scrollbar::-webkit-scrollbar {
  height: 8px;
}
.force-scrollbar::-webkit-scrollbar-thumb {
  border-radius: 9999px;
  background: #cbd5e1;
}
.force-scrollbar::-webkit-scrollbar-track {
  background: #f1f5f9;
}

/* Les cellules ne passent pas à la ligne : c'est la colonne qui grandit. */
.mockup-table th,
.mockup-table td {
  white-space: nowrap;
}

/* Hauteur de ligne des tableaux. pppt2 laisse respirer chaque ligne (contenu
   sur deux niveaux, ~68 px) ; on la fixe ici pour que toutes les maquettes
   aient la même assise, quelle que soit la densité de leurs cellules. */
.mockup-table tbody tr {
  height: 4.25rem;
}
.mockup-table tbody td {
  vertical-align: middle;
}

/* Ligne d'en-tête de groupe (tableau groupé des relances) : elle porte un
   fond, pas de hauteur de ligne de données. */
.mockup-table tbody tr[data-groupe] {
  height: auto;
}
.mockup-table tbody tr[data-groupe] td {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* Bandeaux d'états secondaires, quand une maquette en montre un à l'écran. */
.mockup-state-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  border: 1px solid #bae6fd;
  background: #f0f9ff;
  color: #075985;
  padding: 0.5rem 0.75rem;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.mockup-state-banner::before {
  content: "état";
  border-radius: 0.25rem;
  background: #0284c7;
  color: #fff;
  padding: 0.05rem 0.35rem;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}