/* Cartes de catégorie/liste partagées entre index.html, films-listes.html et
   series-listes.html (3e/4e consommateur du même bloc — extrait ici plutôt que
   dupliqué à nouveau). Suppose que assets/theme.css est chargé avant (variables de
   couleur/espacement). */
.section{
  display:flex; flex-direction:column; gap:16px; width:100%; max-width:760px; align-items:center;
}
.section-title{
  font-size:12px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--text-dim); font-weight:600; margin:0; text-align:left; width:100%;
}
.category-card{
  display:flex; flex-direction:column; gap:12px; text-align:left; text-decoration:none;
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:18px; color:var(--text); transition:border-color .2s, transform .2s, box-shadow .2s;
}
.category-card:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
/* Les styles :hover ne s'appliquent qu'aux pointeurs avec vrai survol (souris) : sur
   tactile, un appui-glissé laisserait sinon un hover "collé" indéfiniment. */
@media (hover:hover) and (pointer:fine){
  .category-card:hover{ border-color:var(--accent); transform:translateY(-3px) scale(1.015); box-shadow:var(--shadow-md); }
}
.category-card .cat-title{ font-size:16px; font-weight:600; letter-spacing:0.02em; }
.category-card .cat-desc{ font-size:13px; color:var(--text-dim); line-height:1.5; }
.category-card.disabled{
  opacity:0.45; cursor:default; pointer-events:none;
}
.category-card .cat-tag{
  font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent);
}
.card-preview{ display:flex; gap:8px; }
.card-preview img{
  width:50%; aspect-ratio:2/3; object-fit:cover; border-radius:8px;
  background:var(--bg);
}
.card-preview-questions{ display:flex; gap:8px; }
.card-preview-questions span{
  width:50%; aspect-ratio:2/3; border-radius:8px; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  font-size:48px; font-weight:700;
}
.card-preview-questions .mark-left{ color:var(--text); }
.card-preview-questions .mark-right{ color:var(--accent); }

/* Grille générique réutilisable (identique à #categories/#games sur index.html) pour
   toute nouvelle page de cartes qui n'a pas besoin d'un id dédié. */
.card-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:16px; width:100%; max-width:760px;
}

/* Barre like/dislike sous une carte de liste (assets/list-cards.js). Le bouton ne peut
   pas être imbriqué dans le <a> de la carte (conflit de clic/navigation) : le conteneur
   .list-card-wrap remplace la carte comme enfant direct de .card-grid, empilant le
   lien puis la barre de vote. */
.list-card-wrap{ display:flex; flex-direction:column; gap:8px; }
.vote-bar{ display:flex; gap:8px; }
.vote-btn{
  display:flex; align-items:center; gap:5px; background:none; cursor:pointer;
  border:1px solid var(--border); border-radius:var(--radius-pill); padding:5px 10px;
  font-size:11px; font-variant-numeric:tabular-nums; transition:border-color .15s, background .15s;
}
.vote-btn.vote-up{ color:var(--accent); }
.vote-btn.vote-down{ color:var(--text); }
.vote-btn.vote-up.active{ border-color:var(--accent); background:rgba(212,165,61,0.12); }
.vote-btn.vote-down.active{ border-color:var(--text-dim); background:var(--panel); }
@media (hover:hover) and (pointer:fine){
  .vote-btn.vote-up:hover{ border-color:var(--accent); }
  .vote-btn.vote-down:hover{ border-color:var(--text-dim); }
}