/* ============================================================
   PayFiP Mock Server — Feuille de style
   ============================================================ */

/* ── Variables CSS (thème couleurs) ── */
:root {
  --color-bg        : #0f1117;
  --color-surface   : #1a1d27;
  --color-border    : #2a2d3e;
  --color-text      : #e2e8f0;
  --color-muted     : #8892a4;
  --color-accent    : #6366f1;  /* Indigo */
  --color-success   : #22c55e;
  --color-warning   : #f59e0b;
  --color-danger    : #ef4444;
  --color-info      : #38bdf8;
  --radius          : 10px;
  --font-main       : 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono       : 'Fira Code', 'Cascadia Code', Consolas, monospace;
}

/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; }

body {
  font-family    : var(--font-main);
  background     : var(--color-bg);
  color          : var(--color-text);
  min-height     : 100vh;
  padding        : 2rem 1rem;
  line-height    : 1.6;
}

/* ── Conteneur principal ── */
.container {
  max-width  : 900px;
  margin     : 0 auto;
  display    : flex;
  flex-direction : column;
  gap        : 1.5rem;
}

/* ── En-tête de page ── */
.page-header {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  flex-wrap       : wrap;
  gap             : 1rem;
  background      : var(--color-surface);
  border          : 1px solid var(--color-border);
  border-radius   : var(--radius);
  padding         : 1.5rem 2rem;
}

.logo-area {
  display     : flex;
  align-items : center;
  gap         : 1rem;
}

.logo-icon {
  font-size   : 2.5rem;
  line-height : 1;
}

h1 {
  font-size   : 1.5rem;
  font-weight : 700;
  color       : var(--color-text);
}

.subtitle {
  font-size : 0.875rem;
  color     : var(--color-muted);
  margin-top: 0.15rem;
}

/* ── Bannière "mock" ── */
.mock-banner {
  background    : rgba(245, 158, 11, 0.12);
  border        : 1px solid rgba(245, 158, 11, 0.35);
  border-radius : var(--radius);
  padding       : 0.85rem 1.25rem;
  color         : var(--color-warning);
  font-size     : 0.9rem;
}

/* ── Sections ── */
.section {
  background    : var(--color-surface);
  border        : 1px solid var(--color-border);
  border-radius : var(--radius);
  padding       : 1.5rem 2rem;
}

.section h2 {
  font-size     : 1rem;
  font-weight   : 600;
  margin-bottom : 1rem;
  padding-bottom: 0.5rem;
  border-bottom : 1px solid var(--color-border);
  color         : var(--color-accent);
}

/* ── Tableaux ── */
table {
  width           : 100%;
  border-collapse : collapse;
  font-size       : 0.875rem;
}

th {
  text-align  : left;
  padding     : 0.6rem 0.85rem;
  color       : var(--color-muted);
  font-weight : 600;
  font-size   : 0.8rem;
  text-transform : uppercase;
  letter-spacing : 0.04em;
  border-bottom  : 1px solid var(--color-border);
}

td {
  padding      : 0.65rem 0.85rem;
  border-bottom: 1px solid rgba(42, 45, 62, 0.6);
  vertical-align: top;
}

tr:last-child td { border-bottom: none; }

td.param-key {
  font-family : var(--font-mono);
  color       : var(--color-info);
  white-space : nowrap;
  width       : 30%;
}

td.param-val {
  font-family : var(--font-mono);
  color       : var(--color-text);
  word-break  : break-all;
}

/* ── Badges de statut ── */
.badge {
  display       : inline-flex;
  align-items   : center;
  gap           : 0.4rem;
  padding       : 0.35rem 0.85rem;
  border-radius : 999px;
  font-size     : 0.8rem;
  font-weight   : 600;
  white-space   : nowrap;
}

.badge--success {
  background : rgba(34, 197, 94,  0.15);
  color      : var(--color-success);
  border     : 1px solid rgba(34, 197, 94, 0.3);
}

.badge--warning {
  background : rgba(245, 158, 11, 0.15);
  color      : var(--color-warning);
  border     : 1px solid rgba(245, 158, 11, 0.3);
}

.badge--danger {
  background : rgba(239, 68, 68,  0.15);
  color      : var(--color-danger);
  border     : 1px solid rgba(239, 68, 68, 0.3);
}

.badge--info {
  background : rgba(56, 189, 248, 0.15);
  color      : var(--color-info);
  border     : 1px solid rgba(56, 189, 248, 0.3);
}

/* ── Note d'information ── */
.note {
  background    : rgba(99, 102, 241, 0.08);
  border        : 1px solid rgba(99, 102, 241, 0.25);
  border-left   : 3px solid var(--color-accent);
  border-radius : var(--radius);
  padding       : 1rem 1.25rem;
  font-size     : 0.875rem;
  color         : var(--color-muted);
  line-height   : 1.7;
}

/* ── Code / pre ── */
code {
  font-family    : var(--font-mono);
  background     : rgba(99, 102, 241, 0.1);
  color          : var(--color-info);
  padding        : 0.15em 0.4em;
  border-radius  : 4px;
  font-size      : 0.875em;
}

pre {
  font-family    : var(--font-mono);
  font-size      : 0.8rem;
  color          : var(--color-text);
  white-space    : pre-wrap;
  word-break     : break-all;
  margin         : 0;
}

/* ── Liens ── */
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Pied de page ── */
footer {
  text-align  : center;
  font-size   : 0.8rem;
  color       : var(--color-muted);
  padding     : 1rem 0 0.5rem;
  display     : flex;
  flex-direction : column;
  gap         : 0.3rem;
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .page-header { flex-direction: column; align-items: flex-start; }
  td.param-key { width: 40%; }
  body { padding: 1rem 0.5rem; }
}