/* catalogue.css */

.catalogue-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  padding-top: 24px;
  align-items: start;
}

/* ── Sidebar filtres ────────────────────────────────────────── */
.filters-sidebar {
  position: sticky; top: 70px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
  max-height: calc(100vh - 90px); overflow-y: auto;
  scrollbar-width: thin;
}
.filters-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}
.filters-title { font-family: var(--font-head); font-size: 14px; font-weight: 700; }
.filters-reset {
  /* audit A11Y-02 : 3.65:1 avec l'accent de marque en 11.5px */
  font-size: 11.5px; color: var(--accent-text); font-weight: 500;
  transition: opacity var(--transition);
}
.filters-reset:hover { opacity: .75; }

.filter-section { margin-bottom: 18px; }
/* Une section masquee l'est parce que la source ne sait pas la traiter :
   `hidden` ne suffit pas quand la regle d'affichage est portee ailleurs. */
.filter-section[hidden] { display: none; }

/* Recherche de genre : des dizaines de tags, sans quoi trouver
   « Psychological » demande de parcourir toute la liste. */
.filter-search {
  width: 100%; margin-bottom: 8px; padding: 7px 10px;
  background: var(--bg3); border: 1px solid var(--border2); color: var(--text);
  border-radius: 8px; font-size: 12.5px; font-family: inherit;
}
.filter-search::placeholder { color: var(--text3); }
.filter-search:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.filter-empty { font-size: 12px; color: var(--text3); padding: 4px 2px; }

/* Annee : liste deroulante, alignee sur les autres champs de la barre. */
.filter-select {
  width: 100%; padding: 7px 10px;
  background: var(--bg3); border: 1px solid var(--border2); color: var(--text);
  border-radius: 8px; font-size: 12.5px; font-family: inherit; cursor: pointer;
}

/* Resume des filtres actifs : chaque entree se retire d'un clic. La croix est
   dans le bouton, pas a cote — c'est toute la pastille qui est cliquable. */
.filter-active-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-active-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid var(--accent); color: var(--accent-text);
  font-size: 11.5px; font-family: inherit;
}
.filter-active-chip:hover { background: color-mix(in srgb, var(--accent) 28%, transparent); }
.filter-active-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.filter-active-chip span { font-size: 13px; line-height: 1; }
.filter-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text2); margin-bottom: 8px;
}
.filter-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.filter-tag {
  padding: 3px 9px; background: var(--bg3); border: 1px solid var(--border);
  border-radius: 30px; font-size: 11px; color: var(--text2);
  transition: all var(--transition); cursor: pointer;
}
.filter-tag:hover, .filter-tag.active {
  background: rgba(255,107,26,.12); border-color: rgba(255,107,26,.3);
  /* --accent-text et non --accent : couleur de TEXTE sur fond sombre (QUAL-05) */
  color: var(--accent-text);
}
/* Audit AMEL-05 : troisième état, « exclu ». Il ne doit pas ressembler à
   « inclus » : couleur de rejet, texte barré et préfixe « − » posé dans le
   libellé — trois signaux, dont deux ne dépendent pas de la couleur, pour
   rester lisible en vision des couleurs déficiente. */
.filter-tag.excluded {
  background: rgba(168,50,50,.14); border-color: rgba(168,50,50,.38);
  color: var(--red-text); text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.filter-tag.excluded:hover { background: rgba(168,50,50,.22); }

.filter-status { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-status-btn {
  padding: 4px 12px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--bg3);
  font-size: 11.5px; color: var(--text2); transition: all var(--transition);
  cursor: pointer;
}
.filter-status-btn.active { background: var(--orange); border-color: var(--orange); color: #fff; }
.filter-status-btn[data-status="termine"].active { background: var(--bg4); color: var(--text); }

.filter-rating { padding: 0 2px; }
.filter-rating input[type="range"] {
  width: 100%; accent-color: var(--orange); cursor: pointer;
}
.rating-vals {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--text2); margin-top: 4px;
}

.filter-checkboxes { display: flex; flex-direction: column; gap: 6px; }
.filter-checkbox {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; cursor: pointer;
}
.filter-checkbox input { accent-color: var(--orange); width: 14px; height: 14px; }

.filter-langs { display: flex; gap: 6px; }
.lang-btn {
  padding: 4px 12px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--bg3);
  font-size: 11.5px; font-weight: 600; color: var(--text2);
  transition: all var(--transition); cursor: pointer;
}
.lang-btn.active { background: var(--orange); border-color: var(--orange); color: #fff; }

/* ── Dernières sorties (sidebar) ─────────────────────────────── */
.latest-mini { display: flex; flex-direction: column; gap: 2px; }
.latest-mini-loading { display: flex; justify-content: center; padding: 14px 0; }
.latest-mini-empty { font-size: 11.5px; color: var(--text3); padding: 6px 0; }
.latest-mini-row {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 6px; margin: 0 -6px; border-radius: 8px;
  text-decoration: none; transition: background var(--transition);
}
.latest-mini-row:hover { background: var(--bg3); }
.latest-mini-rank {
  flex-shrink: 0; width: 16px; text-align: center;
  font-family: var(--font-head); font-size: 12px; font-weight: 800;
  color: var(--text3);
}
.latest-mini-row:hover .latest-mini-rank { color: var(--orange); }
.latest-mini-cover {
  flex-shrink: 0; width: 32px; height: 44px; border-radius: 5px;
  overflow: hidden; background: var(--bg4); position: relative;
}
.latest-mini-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.latest-mini-cover.noimg img { display: none; }
.latest-mini-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.latest-mini-title {
  font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.latest-mini-sub { font-size: 10.5px; color: var(--text3); }

/* ── Catalogue header ───────────────────────────────────────── */
.catalogue-header {
  display: grid; grid-template-columns: 1fr auto;
  gap: 20px; margin-bottom: 24px;
}
.catalogue-title {
  font-family: var(--font-head); font-size: 28px; font-weight: 800;
  margin-bottom: 6px;
}
.catalogue-desc { font-size: 13px; color: var(--text2); max-width: 520px; line-height: 1.5; margin-bottom: 12px; }
.catalogue-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.catalogue-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px; background: var(--bg3); border: 1px solid var(--border);
  border-radius: 20px; font-size: 11.5px; color: var(--text2);
}
.catalogue-chip svg, .catalogue-chip-icon { color: var(--orange); font-size: 12px; }
.catalogue-quick-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.quick-filter-btn {
  padding: 4px 12px; border-radius: 20px; border: 1px solid var(--border);
  background: var(--bg3); font-size: 12px; color: var(--text2);
  transition: all var(--transition); cursor: pointer;
}
.quick-filter-btn.active { background: var(--orange); border-color: var(--orange); color: #fff; }
.catalogue-actions-bar { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.catalogue-active-filters { font-size: 11.5px; color: var(--orange); font-weight: 500; }

/* Focus du moment */
.catalogue-focus {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px; width: 220px; flex-shrink: 0;
}
.focus-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  color: var(--text2); letter-spacing: .06em; margin-bottom: 6px;
}
.focus-title { font-family: var(--font-head); font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.focus-cover {
  width: 100%; aspect-ratio: 16/9; border-radius: 6px;
  overflow: hidden; margin-bottom: 10px;
}
.focus-cover img { width: 100%; height: 100%; object-fit: cover; }
.focus-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.focus-stat { }
.focus-stat-label { font-size: 10px; color: var(--text3); }
.focus-stat-value { font-size: 13px; font-weight: 600; }
.focus-badge {
  position: absolute; top: 8px; right: 8px;
}

/* ── Team picks ─────────────────────────────────────────────── */
.team-picks-section { margin-bottom: 28px; }
.team-picks-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.team-pick-card {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column; position: relative;
  min-height: 130px; cursor: pointer; transition: all var(--transition);
}
.team-pick-card:hover { border-color: var(--border2); transform: translateY(-2px); }
.team-pick-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .35;
}
.team-pick-content { position: relative; padding: 14px; }
.team-pick-badge { margin-bottom: 6px; }
.team-pick-title { font-family: var(--font-head); font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.team-pick-subtitle { font-size: 11.5px; color: var(--text2); }

/* ── Results ────────────────────────────────────────────────── */
.results-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; padding: 0;
}
.results-count { font-size: 13px; color: var(--text2); }
.results-count strong { color: var(--text); font-weight: 600; }
.results-actions { display: flex; align-items: center; gap: 10px; }
.view-toggle { display: flex; }
.view-btn {
  width: 32px; height: 32px; border-radius: var(--radius2);
  border: 1px solid var(--border); background: var(--bg3);
  color: var(--text2); font-size: 14px; transition: all var(--transition);
}
.view-btn:first-child { border-radius: var(--radius2) 0 0 var(--radius2); }
.view-btn:last-child { border-radius: 0 var(--radius2) var(--radius2) 0; border-left: none; }
.view-btn.active { background: var(--bg4); color: var(--text); border-color: var(--border2); }
.sort-select {
  height: 32px; padding: 0 10px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius2); color: var(--text); font-size: 12.5px;
}
.sort-select:focus { outline: none; border-color: var(--orange); }

/* Grid results */
.results-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
  margin-bottom: 28px;
}
.results-grid.list-view { grid-template-columns: 1fr; }
.results-grid.list-view .manga-card { display: flex; flex-direction: row; }
.results-grid.list-view .manga-card-cover { width: 80px; flex-shrink: 0; aspect-ratio: auto; height: 110px; }
.results-grid.list-view .manga-card-info { flex: 1; padding: 12px; }

/* Catalogue card extra info */
.manga-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.manga-card-tag {
  font-size: 10px; padding: 1px 6px;
  background: var(--bg4); border-radius: 3px; color: var(--text2);
}

/* Pagination */
.pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 40px; }
.page-btn {
  width: 34px; height: 34px; border-radius: var(--radius2);
  background: var(--bg3); border: 1px solid var(--border);
  color: var(--text2); font-size: 13px; transition: all var(--transition);
}
.page-btn:hover { border-color: var(--border2); color: var(--text); }
.page-btn.active { background: var(--orange); border-color: var(--orange); color: #fff; }
.page-sep { color: var(--text3); }

/* Collections mini */
.collections-mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.collection-mini-card {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px;
  display: flex; align-items: center; gap: 12px;
  transition: all var(--transition); cursor: pointer;
}
.collection-mini-card:hover { border-color: var(--border2); }
.collection-mini-cover {
  width: 56px; height: 56px; border-radius: 6px;
  overflow: hidden; flex-shrink: 0;
  background: var(--bg4);
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
}
.collection-mini-cover img { width: 100%; height: 100%; object-fit: cover; }
.collection-mini-info {}
.collection-mini-title { font-size: 12.5px; font-weight: 600; margin-bottom: 2px; line-height: 1.3; }
.collection-mini-meta { font-size: 11px; color: var(--text2); }

/* Reviews grid */
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.review-card {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px;
}
.review-card-manga { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--orange); margin-bottom: 6px; letter-spacing: .04em; }
.review-card-stars { margin-bottom: 6px; }
.review-card-text { font-size: 12.5px; color: var(--text2); line-height: 1.5; font-style: italic; }
.review-card-user { font-size: 11.5px; color: var(--text3); margin-top: 8px; display: flex; align-items: center; gap: 6px; }
.review-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--bg4); display: flex; align-items: center;
  justify-content: center; font-size: 10px; font-weight: 700; color: var(--orange);
  flex-shrink: 0;
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  RESPONSIVE — catalogue.css                              ║
   ╚══════════════════════════════════════════════════════════╝ */

/* ── Tablet (≤ 1024px) ──────────────────────────────────── */
@media (max-width: 1024px) {
  .catalogue-layout {
    grid-template-columns: 1fr;
  }
  .filters-sidebar {
    position: static;
    max-height: none;
  }
  .results-grid { grid-template-columns: repeat(4, 1fr); }
  .team-picks-grid { grid-template-columns: repeat(2, 1fr); }
  .collections-mini-grid { grid-template-columns: repeat(2, 1fr); }
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
  .catalogue-header { grid-template-columns: 1fr; }
  .catalogue-focus { width: auto; }
}

/* ── Mobile landscape (≤ 768px) ─────────────────────────── */
@media (max-width: 768px) {
  .results-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .team-picks-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .collections-mini-grid { grid-template-columns: 1fr; }
  .reviews-grid { grid-template-columns: 1fr; }
  .results-header { flex-wrap: wrap; gap: 10px; }
  .catalogue-quick-filters { gap: 4px; }
  .catalogue-actions-bar { flex-wrap: wrap; }
  .catalogue-title { font-size: 22px; }
  .filter-section { margin-bottom: 12px; }
}

/* ── Mobile portrait (≤ 480px) ──────────────────────────── */
@media (max-width: 480px) {
  .results-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .results-grid.list-view { grid-template-columns: 1fr; }
  .team-picks-grid { grid-template-columns: 1fr; }
  .pagination { gap: 4px; }
  .page-btn { width: 30px; height: 30px; font-size: 12px; }
  .catalogue-title { font-size: 20px; }
  .catalogue-desc { font-size: 12px; }
  .filter-tags { gap: 4px; }
  .filter-tag { font-size: 10.5px; padding: 2px 7px; }
}

/* ══ Échelle de colonnes TACTILE (audit IX.5) ═══════════
   Les seuils ci-dessus visent une fenêtre de navigateur qu'on redimensionne ;
   ceux-ci visent un ÉCRAN qu'on tient. La différence n'est pas une nuance : à
   375 px, deux colonnes donnent des couvertures de 167 px — la taille d'une
   affiche là où l'œil en attend une vignette, et deux titres par écran au lieu
   de six. La spécification en demande TROIS, soit 109 px de large.

   Les requêtes sont dissociées par `hover: none` plutôt que par la seule
   largeur : une fenêtre de bureau étroite n'est pas un téléphone, et lui
   servir six colonnes de 100 px serait absurde à la souris.

   Chrome 41 connaît `hover` — le WebView d'Android 8 (Chrome 61) aussi. */
@media (hover: none) and (max-width: 420px) {
  .results-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .results-grid.list-view { grid-template-columns: minmax(0, 1fr); }
}
@media (hover: none) and (min-width: 421px) and (max-width: 767px) {
  .results-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .results-grid.list-view { grid-template-columns: minmax(0, 1fr); }
}
/* Tablette. Plus de colonnes qu'un bureau de même largeur, et c'est voulu :
   une tablette se tient à 40 cm, un écran de bureau à 70. */
@media (hover: none) and (min-width: 768px) and (max-width: 1024px) {
  .results-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
  .results-grid.list-view { grid-template-columns: minmax(0, 1fr); }
}
/* Téléphone en paysage : large mais BAS. Garder quatre colonnes y gaspillerait
   la largeur en n'affichant qu'une rangée et demie. */
@media (hover: none) and (orientation: landscape) and (max-height: 520px) {
  .results-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
  .results-grid.list-view { grid-template-columns: minmax(0, 1fr); }
}