/* Charte graphique S63 — https://smerceur.fr/docs-assets/chartes/s63-charte.html
   fond dark, argent + cuivre en accents, couleurs de statut réservées aux données. */
:root {
  --c-bg: #0d1117;
  --c-surface: #161b22;
  --c-border: #2a3444;
  --c-text-mid: #8b95a3;
  --c-text: #e6edf3;
  --c-silver: #c8d0dc;
  --c-copper: #c87941;
  --c-ok: #3fb950;
  --c-info: #58a6ff;
  --c-warn: #d29922;
  --c-danger: #f85149;

  /* alias fonctionnels utilisés dans le reste du fichier */
  --bg: var(--c-bg);
  --bg-raised: var(--c-surface);
  --bg-card: var(--c-surface);
  --border: var(--c-border);
  --text: var(--c-text);
  --text-dim: var(--c-text-mid);

  --accent: var(--c-copper);       /* marque / actions primaires */
  --accent-dim: #a5652f;

  --aime: var(--c-ok);             /* j'aime — statut positif */
  --aime-bg: rgba(63, 185, 80, 0.14);
  --pas: var(--c-danger);          /* j'aime pas — statut négatif */
  --pas-bg: rgba(248, 81, 73, 0.14);
  --neutre-bg: #1c2229;

  --radius: 8px;
  --font-title: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  padding-bottom: 90px; /* place pour la barre d'export fixe */
}

/* ---------- Topbar ---------- */

.topbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  padding: 28px 24px 16px;
  border-bottom: 1px solid var(--border);
}

.topbar__title h1 {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--c-silver);
}

.topbar__title .accent { color: var(--accent); }

.tagline {
  margin: 6px 0 0;
  color: var(--text-dim);
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.topbar__stats {
  display: flex;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-dim);
}

.stat strong { font-size: 0.95rem; }
.stat--aime strong { color: var(--aime); }
.stat--pas strong { color: var(--pas); }
.stat--neutre strong { color: var(--text-dim); }

/* ---------- Controls ---------- */

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 20;
  border-bottom: 1px solid var(--border);
}

#search {
  flex: 1;
  min-width: 220px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 14px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.9rem;
}
#search:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.btn {
  border: none;
  border-radius: var(--radius);
  padding: 10px 16px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: transform 0.05s ease, background 0.15s ease;
}
.btn:active { transform: scale(0.97); }

.btn--ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
}
.btn--ghost:hover { border-color: var(--pas); color: var(--pas); }

.btn--primary {
  background: var(--accent);
  color: #0c1512;
}
.btn--primary:hover { background: #63c2b3; }

/* ---------- Category nav ---------- */

.catnav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 24px;
}

.catnav a {
  font-size: 0.75rem;
  color: var(--text-dim);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
}
.catnav a:hover { color: var(--accent); border-color: var(--accent-dim); }

/* ---------- Categories & chips ---------- */

main { padding: 8px 24px 24px; }

.category {
  margin-bottom: 28px;
  scroll-margin-top: 90px;
}

.category__header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}

.category__header h2 {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 15px;
  color: var(--c-silver);
}

.category__count {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
}

.chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  background: var(--neutre-bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 0.85rem;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.05s ease;
}
.chip:active { transform: scale(0.96); }

.chip__icon {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  opacity: 0.8;
}

.chip.is-aime {
  background: var(--aime-bg);
  border-color: var(--aime);
  color: var(--aime);
}
.chip.is-pas {
  background: var(--pas-bg);
  border-color: var(--pas);
  color: var(--pas);
}

.chip.is-hidden { display: none; }

/* ---------- Constraints ---------- */

.constraints {
  margin: 32px 24px;
  padding: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.constraints h2 {
  margin: 0 0 14px;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 15px;
  color: var(--c-silver);
}

.constraints {
  border-left: 3px solid var(--c-copper);
}

.constraints__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-bottom: 18px;
}

.constraints__grid label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--text-dim);
  cursor: pointer;
}

.constraints__grid input[type="checkbox"] {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
}

.constraints__time {
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 320px;
}

.constraints__time label,
.constraints__free label {
  font-size: 0.78rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.constraints__time select {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 10px;
  border-radius: var(--radius);
  font-family: var(--font-body);
}

.constraints__free {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.constraints__free textarea {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 12px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.85rem;
  resize: vertical;
}

.constraints--nuances {
  border-left: 3px solid var(--c-silver);
}

.constraints__hint {
  margin: 0 0 14px;
  color: var(--text-dim);
  font-size: 0.8rem;
  line-height: 1.5;
}

/* ---------- Export bar ---------- */

.exportbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-raised);
  border-top: 1px solid var(--border);
  padding: 14px 24px;
  z-index: 30;
}

.exportbar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  max-width: 1100px;
  margin: 0 auto;
}

.save-indicator {
  font-size: 0.75rem;
  color: var(--text-dim);
  font-family: var(--font-mono);
}

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
  .topbar, .controls, main, .constraints { padding-left: 16px; padding-right: 16px; }
  .exportbar { padding: 12px 16px; }
  .topbar__stats { font-size: 0.72rem; gap: 10px; }
}