/* FSS visiteurs.css - additions / overrides for /ma-liste/ + boutons fiche
 * S'appuie sur add.css pour les bases (.ul-card, .ul-tabs, .ul-act, etc.)
 */

/* Page ma-liste header */
#ma-liste-app .ul-profile { padding: 18px 14px; }

/* Modes d'affichage */
.ul-grid.ul-grid-classic { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1200px) { .ul-grid.ul-grid-classic { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 1000px) { .ul-grid.ul-grid-classic { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px)  { .ul-grid.ul-grid-classic { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px)  { .ul-grid.ul-grid-classic { grid-template-columns: repeat(2, 1fr); } }

/* Mode horizontal: ligne avec poster wide */
.ul-grid.ul-grid-horizontal { display: flex; flex-direction: column; gap: 10px; }
.ul-grid.ul-grid-horizontal .ul-card { display: flex; min-height: 110px; }
.ul-grid.ul-grid-horizontal .ul-card a { display: flex; flex: 1; }
.ul-grid.ul-grid-horizontal .ul-card-poster {
  width: 200px; height: 110px; aspect-ratio: auto; flex-shrink: 0;
}
.ul-grid.ul-grid-horizontal .ul-card-info { flex: 1; padding: 12px 16px; display: flex; flex-direction: column; justify-content: center; }
.ul-grid.ul-grid-horizontal .ul-card-title { font-size: 15px; white-space: normal; }
@media (max-width: 600px) {
  .ul-grid.ul-grid-horizontal .ul-card-poster { width: 120px; height: 90px; }
}

/* Mode netflix: posters serrés sans titre, overlay au hover */
.ul-grid.ul-grid-netflix {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
}
@media (max-width: 1200px) { .ul-grid.ul-grid-netflix { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 768px)  { .ul-grid.ul-grid-netflix { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 480px)  { .ul-grid.ul-grid-netflix { grid-template-columns: repeat(3, 1fr); } }
.ul-grid.ul-grid-netflix .ul-card { transition: transform .25s; border-radius: 4px; }
.ul-grid.ul-grid-netflix .ul-card:hover { transform: scale(1.06); z-index: 5; box-shadow: 0 8px 30px rgba(0,0,0,.6); }
.ul-grid.ul-grid-netflix .ul-card-info { display: none; }
.ul-grid.ul-grid-netflix .ul-card::after {
  content: attr(data-title);
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 8px 8px 6px;
  background: linear-gradient(to top, rgba(0,0,0,.92), transparent);
  color: #fff; font-size: 11px; font-weight: 600;
  opacity: 0; transition: opacity .15s;
  pointer-events: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ul-grid.ul-grid-netflix .ul-card:hover::after { opacity: 1; }

/* Filtres : forcer l'usage des button HTML pour avoir un look correct */
#ma-liste-app .ul-filter {
  background: transparent;
  font-family: inherit;
}

/* Pager */
#ma-liste-app .ul-page-nav { padding: 30px 0 50px; }

/* Fix : sur la page ma-liste, ne pas heriter du .ul-film-actions absolute du add.css */
#ma-liste-app .ul-film-actions {
  position: static !important;
  display: none !important;
}

/* === Calendrier (groupes par date dans onglet historique) === */
#ma-liste-app .ul-grouped-by-date { display: block; }
#ma-liste-app .ul-section-date { margin-bottom: 28px; }
#ma-liste-app .ul-date-title {
  font-size: 14px;
  font-weight: 700;
  color: #ff8c00;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 12px;
  padding: 4px 0 8px;
  border-bottom: 1px solid #2a2a2a;
}

/* === Barre de progression sur les cards "watched" === */
#ma-liste-app .ul-progress-wrap {
  position: relative;
  height: 4px;
  background: #2a2a2a;
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}
#ma-liste-app .ul-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff8c00, #ffa500);
  border-radius: 2px;
  transition: width .3s ease;
}
#ma-liste-app .ul-progress-text {
  font-size: 10px;
  color: #888;
  margin-top: 4px;
}

/* En mode netflix, barre overlay sur le poster */
#ma-liste-app .ul-grid-netflix .ul-progress-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  border-radius: 0;
  height: 3px;
  z-index: 4;
}
#ma-liste-app .ul-grid-netflix .ul-progress-text { display: none; }

/* En mode horizontal, barre dessous le titre */
#ma-liste-app .ul-grid-horizontal .ul-progress-wrap { margin-top: 10px; }

/* === Badges multiples (Film/Série + Année + Qualité) === */
#ma-liste-app .ul-card-badges {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  pointer-events: none;
}
#ma-liste-app .ul-card-badges .ul-card-badge {
  position: static !important;
  top: auto !important; right: auto !important;
  font-size: 9px;
  padding: 2px 7px;
  border-radius: 3px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  line-height: 1.2;
  backdrop-filter: blur(2px);
}
#ma-liste-app .ul-card-badges .ul-card-badge.film    { background: rgba(255,140,0,0.9); color: #fff; }
#ma-liste-app .ul-card-badges .ul-card-badge.serie   { background: rgba(33,150,243,0.9); color: #fff; }
#ma-liste-app .ul-card-badges .ul-card-badge.year    { background: rgba(0,0,0,0.75); color: #ffd699; font-weight: 600; }
#ma-liste-app .ul-card-badges .ul-card-badge.quality { background: rgba(229,9,20,0.9); color: #fff; }

/* En mode netflix : badges plus petits, juste film/serie */
#ma-liste-app .ul-grid-netflix .ul-card-badges .ul-card-badge.year,
#ma-liste-app .ul-grid-netflix .ul-card-badges .ul-card-badge.quality { display: none; }

/* En mode horizontal : pas les badges absolu (on a la meta-line) */
#ma-liste-app .ul-grid-horizontal .ul-card-badges { display: none; }

/* === Mode horizontal : meta-line + synopsis === */
#ma-liste-app .ul-grid-horizontal .ul-card { min-height: 140px; }
#ma-liste-app .ul-grid-horizontal .ul-card-poster { width: 220px; height: 140px; }
#ma-liste-app .ul-grid-horizontal .ul-card-title {
  font-size: 16px; font-weight: 700; color: #fff;
  margin-bottom: 6px; white-space: normal;
}
#ma-liste-app .ul-card-meta {
  display: flex; flex-wrap: wrap; gap: 8px;
  font-size: 11px; color: #aaa;
  margin-bottom: 8px;
}
#ma-liste-app .ul-card-meta .ul-meta-year    { color: #ffd699; font-weight: 600; }
#ma-liste-app .ul-card-meta .ul-meta-quality {
  background: #e50914; color: #fff;
  padding: 1px 6px; border-radius: 3px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
}
#ma-liste-app .ul-card-meta .ul-meta-type {
  padding: 1px 6px; border-radius: 3px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .3px;
}
#ma-liste-app .ul-card-meta .ul-meta-type.film  { background: rgba(255,140,0,0.9); color: #fff; }
#ma-liste-app .ul-card-meta .ul-meta-type.serie { background: rgba(33,150,243,0.9); color: #fff; }

#ma-liste-app .ul-card-synopsis {
  font-size: 12px; color: #999; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 600px) {
  #ma-liste-app .ul-grid-horizontal .ul-card { min-height: 110px; }
  #ma-liste-app .ul-grid-horizontal .ul-card-poster { width: 130px; height: 100px; }
  #ma-liste-app .ul-grid-horizontal .ul-card-title { font-size: 13px; }
  #ma-liste-app .ul-card-synopsis { -webkit-line-clamp: 2; }
}

/* === Mode CLASSIC : titre overlay sur poster avec gradient noir === */
#ma-liste-app .ul-grid-classic .ul-card,
#ma-liste-app .ul-grid-netflix .ul-card { position: relative; }
#ma-liste-app .ul-grid-classic .ul-card a,
#ma-liste-app .ul-grid-netflix .ul-card a { display: block; position: relative; }

#ma-liste-app .ul-card-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 40px 12px 10px;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.65) 50%, rgba(0,0,0,0) 100%);
  z-index: 2;
  pointer-events: none;
}
#ma-liste-app .ul-card-overlay .ul-card-title {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
}

/* En netflix, titre cache jusqu'au hover */
#ma-liste-app .ul-grid-netflix .ul-card-overlay { opacity: 0; transition: opacity .2s; }
#ma-liste-app .ul-grid-netflix .ul-card:hover .ul-card-overlay { opacity: 1; }
#ma-liste-app .ul-grid-netflix .ul-card-overlay .ul-card-title { font-size: 12px; }

/* En horizontal: pas d'overlay sur le poster (deja meta + synopsis a cote) */
#ma-liste-app .ul-grid-horizontal .ul-card-overlay { display: none; }

/* Progress bar a l'interieur de l'overlay (mode classic) */
#ma-liste-app .ul-card-overlay .ul-progress-wrap {
  margin-top: 6px;
  height: 3px;
  background: rgba(255,255,255,0.2);
}
#ma-liste-app .ul-card-overlay .ul-progress-text {
  font-size: 10px;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  margin-top: 3px;
}

/* Hide ul-card-info (legacy bloc) qui pourrait rester en cache */
#ma-liste-app .ul-grid-classic .ul-card-info,
#ma-liste-app .ul-grid-netflix .ul-card-info { display: none; }