/* Complément CSS à la charte Zeina (classes Tailwind déjà compilées :
   btn-primary, card, card-sm, inputbox, etc.) — mêmes conventions que
   l'extension Actualités (cf. son actualites.css), adaptées aux cartes
   vidéo (miniature YouTube + icône lecture, pas de visuel uploadé). */

.vid-page-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
}

.vid-page-head-links {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

/* Titre de section = même bandeau bleu "card-title" que les catégories de
   forum ailleurs sur le site (couleur pilotée par --panel-bg / le body
   .card-primary du thème Zeina, cf. stylesheet.css) : classes Tailwind
   "flex items-center justify-between" posées directement dans le HTML pour
   coller exactement à la structure attendue par ce composant, seul l'espacement
   entre sections reste propre à cette extension. */
.vid-section-head {
	margin-bottom: 0.75rem;
}

.vid-section-head h3 {
	margin: 0;
}

.vid-see-all {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: rgba(var(--color-primary), 1);
	text-decoration: none;
	white-space: nowrap;
}

.vid-see-all:hover {
	text-decoration: underline;
}

.dark .vid-see-all {
	color: #7fb2e6;
}

/* Dans le bandeau bleu, le lien "voir toutes les vidéos" doit rester lisible
   en blanc (comme le titre, cf. .card-primary .card-title dans le thème)
   plutôt que reprendre le bleu --color-primary utilisé partout ailleurs, qui
   se fondrait dans le fond. */
.vid-section-head.card-title .vid-see-all {
	color: #fff;
}

.vid-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	/* start plutôt que le stretch par défaut de Grid : la carte mise en avant
	   (.vid-card-featured, miniature 2x plus large donc 2x plus haute au même
	   ratio 16/9) ne doit pas étirer ses voisines classiques de la même ligne
	   jusqu'à sa propre hauteur — chaque carte garde sa hauteur naturelle. */
	align-items: start;
}

@media (max-width: 1100px) {
	.vid-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 800px) {
	.vid-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.vid-grid {
		grid-template-columns: 1fr;
	}
}

/* Grille "bento" d'une section d'accueil : la vidéo la plus récente occupe
   un bloc de 2 colonnes x 2 lignes à gauche (.vid-card-featured ci-dessous),
   les autres remplissent automatiquement les 4 cases de 1x1 restantes en
   grille 2x2 à droite — l'algorithme de placement automatique de Grid s'en
   charge seul (featured posée en premier avec ses spans explicites, le reste
   suit dans l'ordre du DOM) : rien à préciser sur .vid-card-compact. S'il y a
   moins de 4 vidéos classiques (voire 0), les cases manquantes restent
   simplement vides — la mise en page ne casse pas.
   align-items par défaut (stretch, pas de override ici contrairement à
   .vid-grid) : chaque carte remplit exactement la hauteur de sa case, cf.
   .vid-card-body plus bas pour comment le contenu absorbe cet espace. */
.vid-home-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: 1fr 1fr;
	gap: 1rem;
}

.vid-card-featured {
	grid-column: span 2;
	grid-row: span 2;
}

/* Sous 900px : bloc mis en avant en pleine largeur au-dessus, les classiques
   repassent en flux normal 2 par ligne en dessous (plus de grid-template-rows
   fixe : il peut désormais y avoir plus de 2 lignes, hauteur auto). */
@media (max-width: 900px) {
	.vid-home-grid {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: none;
	}

	.vid-card-featured {
		grid-column: span 2;
		grid-row: span 1;
	}
}

/* Sous 480px : tout empile en 1 colonne (même palier que .vid-grid plus haut). */
@media (max-width: 480px) {
	.vid-home-grid {
		grid-template-columns: 1fr;
	}

	.vid-card-featured {
		grid-column: span 1;
	}
}

.vid-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
	overflow: hidden;
}

.dark .vid-card {
	border-color: rgba(255, 255, 255, 0.14);
}

/* Enveloppe le texte sous la miniature : flex-1 pour absorber l'espace
   restant quand Grid étire la carte à la hauteur de sa case (.vid-home-grid),
   et pousser {L_VID_WATCH_ON_YOUTUBE} en pied de carte via margin-top:auto
   (cf. plus bas) plutôt que de laisser un blanc disgracieux au milieu. Sur
   .vid-grid (align-items:start, cartes à leur hauteur naturelle), ce flex-1
   n'a simplement rien à absorber — aucun changement visuel là-bas. */
.vid-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.vid-card-thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	flex-shrink: 0;
	background-size: cover;
	background-position: center;
	background-color: #e5e7eb;
	border-radius: 0.75rem;
}

.dark .vid-card-thumb {
	background-color: rgba(255, 255, 255, 0.06);
}

/* Icône lecture centrée sur la miniature — signale "vidéo externe" avant même
   le survol, contrairement aux cartes Actualités dont l'image seule suffit. */
.vid-play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	filter: drop-shadow(0 2px 6px rgba(8, 17, 33, .45));
	opacity: 0.92;
	transition: transform 200ms ease, opacity 200ms ease;
}

.vid-card:hover .vid-play-icon {
	transform: translate(-50%, -50%) scale(1.08);
	opacity: 1;
}

.vid-card h4 {
	max-width: 100%;
}

/* Cartes classiques des quadrants d'accueil (2,3,4,5 du bloc bento) : sans
   résumé (retiré côté contrôleur/template) pour rester compactes quelle que
   soit la hauteur de leur case — juste miniature + titre (1 ligne, tronqué
   avec une ellipse) + lien YouTube. */
/* Marge posée directement ici (pas une classe utilitaire Tailwind mt-*/mb-*)
   et symétrique par construction (même valeur haut/bas, sur le titre
   lui-même plutôt que sur le badge précédent) : reste identique que la
   vidéo ait un badge match ou non, et les 2 lignes de .vid-home-grid
   (1fr 1fr) grandissent alors ensemble de façon égale — 2 petites cartes
   empilées valent donc toujours exactement la hauteur de la carte mise en
   avant, quelle que soit la valeur choisie ici. */
.vid-card-compact-title {
	font-size: 0.8125rem;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0.625rem 0;
}

/* Aperçu tronqué visuellement à 3 lignes (le texte réel n'est pas coupé côté
   serveur — même principe que .actu-excerpt-3 dans l'extension Actualités). */
.vid-excerpt-3 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

.vid-players-line {
	font-size: 0.78125rem;
	color: #64748b;
	margin: 0 0 0.5rem;
}

.dark .vid-players-line {
	color: #94a3b8;
}

.vid-yt-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: rgba(var(--color-primary), 1);
}

.dark .vid-yt-link {
	color: #7fb2e6;
}

.vid-category-badge,
.vid-match-badge {
	display: inline-block;
	/* .vid-card-body est un conteneur flex (colonne) depuis l'ajout de la
	   grille bento de l'accueil : sans ça, un enfant flex direct s'étire par
	   défaut sur tout l'axe transversal (donc toute la largeur de la carte)
	   au lieu de se limiter à la largeur de son texte comme un badge normal. */
	align-self: flex-start;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 2px 10px;
	border-radius: 9999px;
	text-decoration: none;
}

.vid-category-badge {
	background: rgba(var(--color-primary), 0.1);
	color: rgba(var(--color-primary), 1);
}

.dark .vid-category-badge {
	background: rgba(var(--color-primary-dark), 0.25);
	color: #7fb2e6;
}

.vid-match-badge {
	background: #fff;
	color: #0f172a;
	border: 1px solid rgba(15, 23, 42, .1);
}

.dark .vid-match-badge {
	background: rgba(255, 255, 255, .65);
	border-color: transparent;
}

.vid-category-badge + .vid-match-badge {
	margin-left: 6px;
}

/* Bandeau d'info sur la page d'une catégorie archivée : même teinte que
   .actu-topic-cta dans l'extension Actualités pour rester cohérent. */
.vid-archived-note {
	background-color: rgba(var(--color-primary), 0.05);
}

.dark .vid-archived-note {
	background-color: rgba(var(--color-primary-dark), 0.16);
}

.vid-archives-list {
	display: flex;
	flex-direction: column;
}

.vid-archives-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 4px;
	border-top: 1px solid rgba(15, 23, 42, .08);
	text-decoration: none;
	color: inherit;
}

.vid-archives-list a:first-child {
	border-top: none;
}

.dark .vid-archives-row {
	border-color: rgba(255, 255, 255, .09);
}

.vid-archives-name {
	font-weight: 600;
}

.vid-archives-count {
	font-size: 0.8125rem;
	color: #64748b;
	white-space: nowrap;
}

.dark .vid-archives-count {
	color: #94a3b8;
}

.vid-archives-row:hover .vid-archives-name {
	color: rgba(var(--color-primary), 1);
}

.dark .vid-archives-row:hover .vid-archives-name {
	color: #7fb2e6;
}

/* Bandeau de filtres (catégorie / saison+match / joueur) : <select> nus, la
   feuille de style compilée du thème (stylesheet.css, règle ".inputbox, select")
   leur applique déjà l'habillage input standard du site (dont la flèche,
   posée en background-image SVG — cf. juste en dessous pour son survol). */

/* Reproduit au survol le même traitement que les boutons de la barre de
   recherche du thème (rounded-full + hover:bg-primary/5, cf.
   zeina/template/breadcrumbs.html) sur la flèche du <select> — impossible de
   cibler "juste" cette flèche en CSS sur un <select> natif (ce n'est pas un
   élément séparé, seulement l'image de fond posée par le thème, pas de
   pseudo-élément dédié) : on superpose donc un 2e calque de fond, un disque
   teinté à la même position que la flèche (même SVG que le thème, repris ici
   à l'identique pour pouvoir empiler les 2 calques), révélé au survol de tout
   le <select> — seul déclencheur de survol possible sur un contrôle natif. */
.vid-filter-field select {
	cursor: pointer;
	background-image:
		url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"),
		radial-gradient(circle, transparent 60%, transparent 61%);
	background-position: right 0.5rem center, right 0.35rem center;
	background-repeat: no-repeat, no-repeat;
	background-size: 1.5em 1.5em, 1.8em 1.8em;
}

.vid-filter-field select:hover {
	background-image:
		url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"),
		radial-gradient(circle, rgba(var(--color-primary), 0.1) 60%, transparent 61%);
}

.dark .vid-filter-field select:hover {
	background-image:
		url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23cbd5e1' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"),
		radial-gradient(circle, rgba(var(--color-primary-dark), 0.18) 60%, transparent 61%);
}

.vid-filter-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	padding: 1rem;
}

.vid-filter-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1 1 160px;
	min-width: 140px;
}

.vid-filter-field label {
	font-size: 0.75rem;
	font-weight: 600;
	color: #64748b;
}

.dark .vid-filter-field label {
	color: #94a3b8;
}

.vid-filter-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
}

.vid-filter-reset {
	font-size: 0.8125rem;
	font-weight: 600;
	color: #64748b;
	text-decoration: none;
	white-space: nowrap;
}

.vid-filter-reset:hover {
	text-decoration: underline;
}

.dark .vid-filter-reset {
	color: #94a3b8;
}