/* ================================================================
   LIGNE TALIA — Thème partagé "métro / signalétique de gare"
   ----------------------------------------------------------------
   Ce fichier reskinne les composants GLOBAUX déjà utilisés par
   toutes les pages du site (boutons, panneaux, tableaux, formu-
   laires, badges, onglets, pagination, titres) afin que chaque
   page hérite automatiquement de la même identité que l'accueil
   et la boutique, sans dupliquer de CSS par page.
   Chargé après style.css / responsive.css : mêmes sélecteurs,
   priorité par ordre de cascade (pas de !important nécessaire).
   ================================================================ */

:root {
  --font-head: 'Oswald', var(--font-sub), sans-serif;
  --rail-1: var(--blue-bright);
  --rail-2: #4fb3a8;
  --rail-3: #d1596a;
}

/* ── Titres de page : marqueur de station ───────────────────── */
.page-header { position: relative; padding-left: 1rem; }
.page-header::before {
  content: '';
  position: absolute; left: 0; top: 0.35rem;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--rail-1);
  box-shadow: 0 0 0 3px rgba(240,136,0,0.16);
}
.page-header h1 { letter-spacing: 0.02em; }

/* ── Boutons : billets / tampons plats ──────────────────────── */
.btn {
  font-family: var(--font-head);
  letter-spacing: 0.03em;
  border-radius: 4px;
}
.btn-primary {
  background: var(--rail-1);
  border-color: var(--rail-1);
  color: #0a0500;
  box-shadow: none;
}
.btn-primary:hover { background: var(--blue-glow); border-color: var(--blue-glow); box-shadow: 0 4px 14px rgba(190,96,0,0.25); transform: translateY(-1px); }
.btn-secondary {
  background: transparent;
  border-color: rgba(190,96,0,0.3);
}
.btn-secondary:hover { background: rgba(190,96,0,0.08); border-color: var(--rail-1); }
.btn-sm, .btn-lg { border-radius: 4px; }

/* ── Panneaux : accent de ligne en tête ──────────────────────── */
.panel { border-radius: 8px; }
.panel::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--rail-1), transparent 70%);
  border-radius: 8px 8px 0 0;
}
.panel-title { font-family: var(--font-head); letter-spacing: 0.08em; }
.panel-title::after { background: linear-gradient(90deg, var(--rail-1), transparent); }

.stat-card { border-radius: 8px; }
.stat-value { font-family: var(--font-mono); }
.stat-label { font-family: var(--font-head); letter-spacing: 0.1em; }

/* ── Formulaires : guichet ───────────────────────────────────── */
.form-control { border-radius: 4px; }
.form-control:focus { border-color: var(--rail-1); box-shadow: 0 0 0 3px rgba(240,136,0,0.12); }
.form-group label { font-family: var(--font-head); letter-spacing: 0.06em; }
.checkbox-group input[type="checkbox"] { accent-color: var(--rail-1); }

/* ── Alertes ──────────────────────────────────────────────────── */
.alert { border-radius: 4px; }

/* ── Badges : étiquettes de signalétique ─────────────────────── */
.badge { border-radius: 3px; font-family: var(--font-mono); }

/* ── Tableaux : panneau d'affichage ──────────────────────────── */
.table-wrap { border-radius: 8px; }
thead tr { background: rgba(190,96,0,0.06); border-bottom: 1px solid rgba(190,96,0,0.25); }
th { font-family: var(--font-head); letter-spacing: 0.09em; color: var(--text-muted); }
td { border-bottom: 1px dashed rgba(190,96,0,0.12); font-family: var(--font-main); }
tbody tr:hover { background: rgba(190,96,0,0.045); }

/* ── Pagination : jalons de voie ─────────────────────────────── */
.pagination a, .pagination span { font-family: var(--font-head); border-radius: 3px; }
.pagination .current { background: var(--rail-1); border-color: var(--rail-1); color: #0a0500; box-shadow: none; }
.pagination a:hover { border-color: var(--rail-1); }

/* ── Onglets génériques (si présents : .tab-nav / [data-tab]) ─ */
.tab-nav, .profile-tabs, .prof-tabs, [role="tablist"] {
  display: flex; gap: 0.4rem; flex-wrap: wrap;
}
.tab-nav a, .tab-nav button,
.profile-tabs a, .profile-tabs button,
.prof-tab,
[role="tablist"] [role="tab"] {
  font-family: var(--font-head);
  letter-spacing: 0.04em;
  border-radius: 4px 4px 0 0;
}
.tab-nav a.active, .tab-nav button.active,
.profile-tabs a.active, .profile-tabs button.active,
.prof-tab.active,
[role="tablist"] [aria-selected="true"] {
  box-shadow: inset 0 -2px 0 var(--rail-1);
}

/* ── Empty states génériques ──────────────────────────────────── */
.empty-state, .no-results { font-family: var(--font-mono); }

@media (max-width: 640px) {
  .page-header { padding-left: 0.85rem; }
}