/* ============================================================
   cultural-library — frontend/soiree (phase 1 « quel jeu ce soir ? »)
   Pensée pour le téléphone, debout devant l'étagère : grandes cibles
   tactiles, une colonne, pas de sidebar.
   ============================================================ */

:root {
  --surface-color-text: #1a1a1a;
  --surface-color-bg: #f7f6f2;
  --surface-color-card-bg: #ffffff;
  --surface-color-muted: #555;
  --surface-color-rule: #d8d3c4;
  --surface-color-primary: #8a6a12;

  --fg: var(--surface-color-text);
  --fg-soft: var(--surface-color-muted);
  --fg-muted: #888;
  --bg: var(--surface-color-bg);
  --surface: var(--surface-color-card-bg);
  --accent: var(--surface-color-primary);
  --accent-soft: #f5edd6;
  --border: var(--surface-color-rule);
  --border-soft: #ebe6d8;
  --veto: #b03030;
}

[hidden] { display: none !important; }

html, body { font-size: 15px; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--ds-font-family-sans);
}

.sr-header {
  padding: 1.1em 1em 0.6em; max-width: 720px; margin: 0 auto;
}
.sr-header h1 {
  margin: 0 0 0.15em; font-size: 1.5em; font-weight: 600;
  font-family: Georgia, "Times New Roman", serif;
}
.sr-header p { margin: 0; color: var(--fg-soft); font-size: 0.9em; }

.sr-main { max-width: 720px; margin: 0 auto; padding: 0 1em 3em; }

/* ───── Contraintes ───── */
.sr-form {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: 10px; padding: 0.9em 1em; margin: 0.8em 0 1.2em;
}
.sr-field + .sr-field { margin-top: 0.9em; }
.sr-field h2 {
  margin: 0 0 0.4em; font-size: 0.78em; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--fg-muted);
}
.sr-field h2 small { text-transform: none; letter-spacing: 0; font-weight: 400; }

.segmented { display: flex; flex-wrap: wrap; gap: 0.35em; }
.seg-btn {
  padding: 0.55em 0.85em; font-size: 0.95em; font-family: inherit;
  background: white; color: var(--fg-soft);
  border: 1px solid var(--border); border-radius: 7px; cursor: pointer;
  min-height: 2.6em;  /* cible tactile */
}
.seg-btn:hover { background: #f4efe0; }
.seg-btn.active { background: var(--accent); color: white; border-color: var(--accent); }

.chips-wrap { display: flex; flex-wrap: wrap; gap: 0.35em; }
.chip {
  padding: 0.45em 0.8em; font-size: 0.92em; font-family: inherit;
  background: white; color: var(--fg-soft);
  border: 1px solid var(--border); border-radius: 16px; cursor: pointer;
}
.chip .chip-n { color: var(--fg-muted); font-size: 0.85em; }
.chip.fav { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.chip.veto { background: #f8e3e3; border-color: var(--veto); color: var(--veto); text-decoration: line-through; }
.chip.veto .chip-n { color: var(--veto); opacity: 0.7; }

.sr-more { margin-top: 1em; }
.sr-more summary { cursor: pointer; color: var(--accent); font-size: 0.92em; }
.sr-more > .sr-field:first-of-type { margin-top: 0.8em; }
.sr-check { display: flex; gap: 0.5em; align-items: center; margin-top: 0.9em; font-size: 0.95em; }

.sr-btn, .sr-btn-light {
  font-family: inherit; font-size: 0.95em; border-radius: 7px;
  padding: 0.6em 1em; cursor: pointer; min-height: 2.6em;
}
.sr-btn { background: var(--accent); color: white; border: 1px solid var(--accent); }
.sr-btn:hover { filter: brightness(0.93); }
.sr-btn-light { background: white; color: var(--fg); border: 1px solid var(--border); }
.sr-btn-light:hover { background: #f0ece0; }
#f-reset { margin-top: 0.9em; }

/* ───── Résultats ───── */
.sr-result-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 0.6em; margin-bottom: 0.6em;
}
#sr-count { color: var(--fg-soft); font-size: 0.92em; }

.sr-relax {
  display: flex; flex-wrap: wrap; gap: 0.4em; align-items: center;
  background: #fffaf0; border: 1px solid var(--border-soft);
  border-radius: 8px; padding: 0.7em 0.8em; margin-bottom: 0.8em;
}
.sr-relax p { margin: 0 0.3em 0 0; font-size: 0.9em; color: var(--fg-soft); }
.sr-relax strong { color: var(--accent); }

.sr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45em; }
.sr-card {
  display: grid; grid-template-columns: 1.8em 52px minmax(0, 1fr) auto;
  gap: 0.7em; align-items: center;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: 9px; padding: 0.55em 0.7em;
}
.sr-card.first { border-color: var(--accent); box-shadow: 0 1px 6px rgba(138, 106, 18, 0.12); }
.sr-card.picked {
  border-color: var(--accent); background: var(--accent-soft);
  box-shadow: 0 0 0 2px var(--accent);
}
.sr-pos { font-size: 1.1em; font-weight: 700; color: var(--fg-muted); text-align: right; font-variant-numeric: tabular-nums; }
.sr-card.first .sr-pos, .sr-card.picked .sr-pos { color: var(--accent); }
.sr-thumb {
  width: 52px; height: 52px; object-fit: cover; border-radius: 5px; background: #eee;
  display: flex; align-items: center; justify-content: center; font-size: 1.5em;
}
.sr-body { display: flex; flex-direction: column; min-width: 0; gap: 0.1em; }
.sr-title { font-weight: 600; color: var(--fg); text-decoration: none; }
.sr-title:hover { color: var(--accent); }
.sr-facts { font-size: 0.85em; color: var(--fg-muted); }
.sr-whys { display: flex; flex-wrap: wrap; gap: 0.3em; margin-top: 0.15em; }
.sr-why {
  font-size: 0.76em; padding: 0.1em 0.45em; border-radius: 9px;
  background: #f0ece0; color: var(--fg-soft);
}
.sr-why.rank { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.sr-why.favourite { background: #e3f3e7; color: #1f7a3d; }
.sr-why.wish { background: #eef1f5; color: #4a5a6a; }
.sr-playlist {
  font-size: 1.2em; text-decoration: none; padding: 0.3em;
  border-radius: 6px; line-height: 1;
}
.sr-playlist:hover { background: var(--accent-soft); }

.sr-empty { text-align: center; color: var(--fg-muted); padding: 2em 1em; }

.sr-footer {
  max-width: 720px; margin: 0 auto; padding: 1.2em 1em 2em;
  border-top: 1px solid var(--border-soft);
  font-size: 0.9em; color: var(--fg-muted); text-align: center;
}
.sr-footer a { color: var(--fg-soft); }

@media (min-width: 640px) {
  .sr-card { grid-template-columns: 2em 60px minmax(0, 1fr) auto; }
  .sr-thumb { width: 60px; height: 60px; }
}