/* Personnalisations maison, chargées APRÈS Pico.css (surcharge des variables --pico-*). */

/* Conteneur de tableau à hauteur limitée : un ascenseur vertical apparaît quand le contenu déborde. */
.tableau-defilant{
	max-height: 24rem;
	overflow-y: auto;
}

/* En-tête de tableau figé en haut pendant le défilement (lisibilité des colonnes). */
.tableau-defilant thead th{
	position: sticky;
	top: 0;
	background: var(--pico-background-color);
	z-index: 1;
}

/* Onglets de tri des vidéos (À trier / Conservées / Corbeille). */
.onglets-barre{
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--pico-muted-border-color);
}
.onglet{
	padding: 0.4rem 0.9rem;
	color: var(--pico-color);
	text-decoration: none;
	border-bottom: 2px solid transparent;
}
.onglet:hover{
	background: var(--pico-secondary-background);
}
.onglet.actif{
	color: var(--pico-primary);
	border-bottom-color: var(--pico-primary);
	font-weight: bold;
}

/* Barre de filtres (caméras + bouton d'analyse) et navigation entre les jours. */
.barre-filtres,
.barre-jours{
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
}
.barre-filtres form{
	margin: 0;
}
.barre-filtres button{
	width: auto;
	margin: 0;
	padding: 0.35rem 0.8rem;
	font-size: 0.85rem;
}

/* Grille de vignettes : s'adapte de 2 colonnes sur mobile à autant que la largeur permet. */
.grille-videos{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 1rem;
}
.tuile-video{
	margin: 0;
	padding: 0;
	overflow: hidden;
}

/* L'aperçu est un bouton : toute la vignette est cliquable pour lancer la lecture. */
.tuile-video .apercu{
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	background: var(--pico-secondary-background);
	/* Ratio fixe : la grille ne saute pas quand les vignettes arrivent une à une. */
	aspect-ratio: 16 / 9;
	cursor: pointer;
}
.tuile-video .apercu img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Visuel d'attente, le temps que le navigateur produise la vignette. */
.attente-vignette{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 1.6rem;
	color: var(--pico-muted-color);
}
.tuile-video[data-vignette="echec"] .attente-vignette{
	opacity: 0.35;
}

.infos-video{
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.5rem 0.7rem;
}

.actions-video{
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	padding: 0 0.7rem 0.7rem;
}
.actions-video form{
	margin: 0;
	flex: 1 1 auto;
}
.actions-video button{
	width: 100%;
	margin: 0;
	padding: 0.3rem 0.5rem;
	font-size: 0.8rem;
}

/* Fenêtre de lecture : la vidéo ne doit jamais déborder de l'écran. */
#lecteur-video video{
	width: 100%;
	max-height: 70vh;
	background: #000;
}