/* LeCri24 TV — archive-video.php, taxonomy-emission.php (maquette 07, 893 px de large : cote × 1,57). */

.tpl-tv .page-hero__media::after { background: linear-gradient(90deg, rgb(8 10 16 / .94) 0%, rgb(8 10 16 / .78) 45%, rgb(8 10 16 / .4) 100%); }
/* Bandeau */
.tpl-tv .page-hero__inner { justify-content: flex-start; gap: 0; min-height: 215px; padding-block: 18px 14px; }
.tpl-tv .page-hero__title { margin-top: 14px; font: 700 73px/1.08 var(--serif); letter-spacing: 0; }
.tpl-tv .page-hero__subtitle { margin-top: 6px; font: 700 23.5px/1.3 var(--serif); color: var(--white); }
.tv-hero__desc { margin: 4px 0 0; max-width: 760px; font-size: 17.5px; color: rgb(255 255 255 / .92); }
.tv-hero__schedule { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 16px; font-weight: 700; color: var(--white); }
.tv-hero__schedule .icon { color: var(--red); }

/* Blocs */
.tv-block { margin-top: 26px; min-width: 0; }
.tpl-tv .section-header { flex-wrap: wrap; row-gap: 4px; margin-bottom: 12px; } /* écran étroit : le lien passe sous le titre */
.tpl-tv .section-header__title { font-size: 18.5px; line-height: 1.25; } /* largeur et barre rouge (15 px de maquette) de la maquette */
.tpl-tv .section-header__link { font-size: 14.5px; }
.tv-split { margin-top: 0; gap: 32px; grid-template-columns: minmax(0, 1fr) 365px; }
.tv-main { min-width: 0; }

/* Vignettes vidéo : rond lecture sombre, durée noire */
.tpl-tv .play { width: 38px; height: 38px; margin: -19px 0 0 -19px; background: rgb(0 0 0 / .55); color: var(--white); box-shadow: none; }
.tpl-tv .play .icon { font-size: 16px; margin-left: 2px; }
.tpl-tv .duration { right: 6px; bottom: 6px; padding: 2px 6px; background: rgb(0 0 0 / .85); font-size: 12px; }
.tpl-tv .card-video__media:hover .play, .tv-item:hover .play, .tv-top__item:hover .play { background: var(--red); }

/* Une : lecteur (façade) + liste */
.tv-une { display: grid; grid-template-columns: minmax(0, 513fr) minmax(0, 287fr); gap: 14px; margin-top: 10px; }
.tv-player { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius); background: #0b0b0c; color: var(--white); }
.tv-player__media { position: relative; display: block; flex: 1 0 auto; aspect-ratio: 2.05; overflow: hidden; color: var(--white); }
.tv-player__media > img, .tv-player__media > .img-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tv-player__media:hover { color: var(--white); }
.tv-player__media:focus-visible { outline-offset: -4px; }
.tv-player__label { position: absolute; top: 17px; left: 18px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 7px 15px; border-radius: 999px; font-size: 13.5px; }
.tv-player__label .icon { font-size: 16px; }
.tv-player__bar { position: absolute; inset: auto 0 0; z-index: 1; display: grid; gap: 18px; padding: 40px 18px 9px; background: linear-gradient(180deg, rgb(0 0 0 / 0), rgb(0 0 0 / .75)); }
.tv-player__track { height: 4px; border-radius: 2px; background: rgb(255 255 255 / .35); }
.tv-player__media:hover .tv-player__track { background: var(--red); }
.tv-player__controls { display: flex; align-items: center; gap: 20px; font-size: 22.5px; }
.tv-player__time { margin-left: -4px; font-size: 13px; font-weight: 500; }
.tv-player__right { display: flex; gap: 23px; margin-right: 8px; margin-left: auto; }
.tv-player__body { padding: 16px 14px 14px; }
.tv-player__meta { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; font-size: 14px; color: rgb(255 255 255 / .85); }
.tv-player__meta .badge { padding: 4px 8px; border-radius: 2px; font-size: 11px; }
.tv-player__meta .badge + time::before { content: "|"; margin-right: 12px; opacity: .7; }
.tv-player__title { color: var(--white); font: 700 25px/1.25 var(--serif); }
.tv-player__title a:hover { color: var(--white); text-decoration: underline; }
.tv-player__excerpt { margin: 6px 0 0; font-size: 17px; line-height: 1.4; color: rgb(255 255 255 / .9); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.tv-side { display: grid; align-content: start; gap: 20px; }
.tv-item { position: relative; display: grid; grid-template-columns: 196px minmax(0, 1fr) 12px; align-items: start; }
.tv-item__media { border-radius: 6px; }
.tv-item__body { align-self: stretch; display: flex; flex-direction: column; min-width: 0; padding: 5px 6px 7px 17px; }
.tv-item .badge { font-size: 13px; }
.tv-item__title { font-size: 16px; line-height: 1.25; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tv-item__title a::after { content: ""; position: absolute; inset: 0; }
/* Méta « Il y a… | N vues » en bas de la vignette, sur une ligne prolongée sous le chevron ; le filet du début de ligne est rogné si elle se coupe quand même */
.tv-item .meta { margin: auto -18px 0 -11px; padding-top: 4px; overflow: hidden; font-size: 14px; color: #767676; gap: 4px 0; white-space: nowrap; }
.tv-item .stat { gap: 4px; margin-left: -1px; padding: 0 10px; border-left: 1px solid #d6d6d6; line-height: 1.1; }
.tv-item .stat:last-child { padding-right: 0; }
.tv-item .stat .icon { font-size: 14px; }
.tv-item__chevron { align-self: center; justify-self: end; width: 7px; height: 11px; margin-bottom: 10px; color: var(--red); } /* un peu au-dessus du milieu, comme sur la maquette */

/* Nos émissions */
.tv-emissions { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 11px; }
.tv-emission { position: relative; display: flex; flex-direction: column; align-items: center; padding-bottom: 8px; overflow: hidden; background: var(--white); border: 1px solid #ececec; border-radius: var(--radius); box-shadow: 0 1px 6px rgb(0 0 0 / .05); text-align: center; }
.tv-emission__media { position: relative; display: block; width: 100%; aspect-ratio: 1.64; margin-bottom: 9px; overflow: hidden; background: var(--surface); }
.tv-emission__media img, .tv-emission__media .img-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.tv-emission:hover img { transform: scale(1.05); }
.tv-emission__title { padding-inline: 8px; font-size: 17px; line-height: 1.25; font-weight: 700; }
.tv-emission__count { margin: 1px 0 0; line-height: 1.3; font-size: 14.5px; color: #767676; }
.tv-emission__schedule { display: inline-flex; align-items: center; gap: 6px; margin: 8px 12px 0; font-size: 13.5px; font-weight: 700; color: var(--red); }
.tv-emission__desc { margin: 6px 14px 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.tv-emissions--all { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
/* Page d'émission : autant de colonnes que de cartes (aucune case vide) */
.tv-emissions.tv-emissions--fit { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

/* Grilles de cartes vidéo (carte partagée « video ») */
.tv-grid { display: grid; gap: 14px; }
.tv-grid .card-video__media { aspect-ratio: 1.84; }
.tv-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 28px; }
.tv-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tpl-tv .card-video { gap: 9px; }
.tpl-tv .card-video__media { border-radius: var(--radius); }
.tpl-tv .card-video__body { flex: 1; }
.tpl-tv .card-video__title { font-size: 16px; line-height: 1.32; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Méta calée en bas de la carte : les dates d'une rangée restent alignées */
.tpl-tv .card-video .meta { flex-direction: column; align-items: flex-start; gap: 2px; margin-top: auto; padding-top: 2px; font-size: 14.5px; color: #767676; }
.tpl-tv .card-video .stats { margin-left: 0; }
.tpl-tv .card-video .stat::after { content: "vues"; margin-left: -1px; } /* la carte partagée n'affiche que le nombre */
.tv-row--wide .card-video__media { aspect-ratio: 2.47; }
.tv-row--wide .card-video .meta { flex-direction: row; align-items: center; gap: 4px 34px; }
.tv-row--wide { margin-top: 30px; }

.tv-rows { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 0 36px; }
@media (min-width: 1025px) {
	/* Grille 2 × 2 : la demi-section en haut à droite a des vignettes plus hautes (123 × 79 sur la maquette) */
	.tv-rows > .tv-row:nth-child(2) .card-video__media { aspect-ratio: 1.56; }
}

/* Les plus regardées */
.tv-top { margin-top: 18px; }
.tv-top .section-header--boxed { padding: 5px 12px; margin-bottom: 14px; }
.tv-top .section-header--boxed .section-header__title { font-size: 18px; }
.tv-top__list { display: grid; gap: 20px; }
.tv-top__item { position: relative; display: grid; grid-template-columns: 34px 110px minmax(0, 1fr); gap: 16px; align-items: center; }
.tv-top__rank { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fde0e4; color: var(--red); font-weight: 700; font-size: 16px; }
.tv-top__media { align-self: start; aspect-ratio: 1.65; border-radius: 4px; }
.tv-top__media .play { width: 30px; height: 30px; margin: -15px 0 0 -15px; font-size: 10px; }
.tv-top__media .duration { right: 4px; bottom: 4px; padding: 1px 5px; font-size: 11px; }
.tv-top__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tv-top__title { font-size: 15px; line-height: 1.32; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tv-top__title a::after { content: ""; position: absolute; inset: 0; }
.tv-top .meta { gap: 4px 20px; font-size: 13px; color: #767676; }
.tv-top .stat .icon { font-size: 13px; }

/* Direct en cours */
.tv-live { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding: 12px 18px; border-radius: var(--radius); background: var(--ink); color: var(--white); font-weight: 700; }
.tv-live:hover { color: var(--white); background: #000; }
.tv-live__label { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 4px; background: var(--red); font-size: 13px; text-transform: uppercase; }
.tv-live__label .icon { animation: live-pulse 1.4s infinite; }
.tv-live__title { flex: 1; min-width: 0; }
.tv-live__cta { display: inline-flex; align-items: center; gap: 6px; color: var(--red); }

.tpl-tv .pagination { margin-top: 28px; }

/* Bandeau newsletter (bloc partagé) aux cotes de la maquette : pied de page 11 px dessous, bouton foncé de 154 px */
.tpl-tv .nl-banner { margin-block: 29px 11px; }
.tpl-tv .nl-banner__inner { background: #fdedee; }
.tpl-tv .nl-banner .nl-form .btn { border-radius: var(--radius); background: var(--red-dark); }
@media (min-width: 1101px) {
	.tpl-tv .nl-banner__inner { grid-template-columns: auto 1fr minmax(320px, 541px); padding-left: 33px; }
	.tpl-tv .nl-banner .nl-form .btn { min-width: 154px; }
}

/* Responsive */
@media (max-width: 1240px) {
	.tv-item { grid-template-columns: 160px minmax(0, 1fr) 12px; }
	.tv-item__title { font-size: 14.5px; }
}
@media (max-width: 1100px) {
	.tv-une { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
	.tv-item { grid-template-columns: 130px minmax(0, 1fr); }
	.tv-item__body { padding: 0 0 0 12px; }
	.tv-item__chevron { display: none; }
	.tv-item .meta { margin-right: 0; }
	.tv-split { grid-template-columns: minmax(0, 1fr) 300px; }
	.tv-emissions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.tv-emissions--all { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.tv-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tv-row--wide .card-video .meta { flex-direction: column; align-items: flex-start; gap: 2px; } /* une ligne de méta qui se coupe décalerait les dates */
}
@media (max-width: 1024px) {
	.tv-une { grid-template-columns: 1fr; }
	.tv-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tv-rows { grid-template-columns: 1fr; }
	.tpl-tv .page-hero__title { font-size: 56px; }
}
@media (max-width: 900px) {
	.tv-split { grid-template-columns: 1fr; row-gap: 0; }
	.tv-top { margin-top: 26px; } /* même rythme que les autres sections */
	.tv-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	.tv-side { grid-template-columns: 1fr; gap: 16px; }
	.tv-grid--4, .tv-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
	.tv-row--wide .card-video__media { aspect-ratio: 16 / 9; }
	.tv-emissions, .tv-emissions--all { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tv-player__media { min-height: 0; aspect-ratio: 16 / 9; flex: none; }
	.tv-player__bar { padding: 24px 12px 10px; gap: 8px; }
	.tv-player__controls, .tv-player__right { font-size: 18px; gap: 14px; }
	.tv-player__title { font-size: 22px; }
	.tv-player__excerpt { font-size: 15px; }
	.tpl-tv .page-hero__inner { min-height: 0; padding-block: 16px 22px; }
	.tpl-tv .page-hero__title { font-size: 44px; }
	.tpl-tv .page-hero__subtitle { font-size: 20px; }
	.tv-hero__desc { font-size: 15px; }
}
@media (max-width: 600px) {
	/* Une colonne : les cartes vidéo passent en liste (vignette à gauche) */
	.tv-grid--4, .tv-grid--3 { grid-template-columns: 1fr; row-gap: 16px; }
	.tpl-tv .tv-grid .card-video { flex-direction: row; align-items: flex-start; gap: 12px; }
	.tpl-tv .tv-grid .card-video__media { flex: 0 0 42%; aspect-ratio: 16 / 9; }
	.tpl-tv .tv-grid .card-video__body { flex: 1; min-width: 0; }
	.tpl-tv .tv-grid .card-video .meta, .tv-row--wide .card-video .meta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 14px; margin-top: 2px; }
}
@media (max-width: 420px) {
	.tpl-tv .section-header__link { font-size: 13px; }
	.tv-item { grid-template-columns: 120px minmax(0, 1fr); }
	.tv-item .meta { font-size: 13px; }
	.tpl-tv .card-video__title { font-size: 15px; }
	.tpl-tv .card-video .meta { font-size: 13px; }
	.tv-emission__title { font-size: 15px; }
	.tv-live { flex-wrap: wrap; gap: 8px 12px; }
	.tpl-tv .page-hero__title { font-size: 38px; }
}