/* Ziana TV : classement « Les plus lus » et newsletter compacte. */

/* ---- Numéros de classement « Les plus lus » ---- */
.z-section-title:has(a[href*="les-plus-lus"]) + .z-cards,
.z-cards--top { counter-reset: zrang; }

.z-section-title:has(a[href*="les-plus-lus"]) + .z-cards > .z-card,
.z-cards--top .z-card { position: relative; counter-increment: zrang; }

.z-section-title:has(a[href*="les-plus-lus"]) + .z-cards > .z-card::before,
.z-cards--top .z-card::before {
	content: counter(zrang);
	position: absolute; top: 10px; left: 10px; z-index: 2;
	width: 36px; height: 36px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--z-red, #DA1026); color: #fff;
	font-weight: 800; font-size: 17px; line-height: 1;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .35); border: 2px solid #fff;
}

/* ---- Page « Les plus lus » ---- */
.z-plus-lus-page { padding-top: 24px; padding-bottom: 48px; }
.z-plus-lus-page__titre { font-size: clamp(26px, 4vw, 36px); margin: 0 0 6px; }
.z-plus-lus-page__intro { color: #555; margin: 0 0 22px; font-size: 15px; }
.z-cards--top { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.z-top-item { display: flex; flex-direction: column; gap: 6px; }
.z-top-item > .z-card { flex: 1; }
.z-top-item__vues { font-size: 12.5px; font-weight: 700; color: var(--z-red, #DA1026); padding-left: 4px; }

/* ---- Newsletter : plus compacte ---- */
body .z-newsletter { padding: 20px 22px; margin-top: 28px; }
body .z-newsletter h3 { font-size: 18px; line-height: 1.25; margin: 0 0 4px; }
body .z-newsletter > p { font-size: 13.5px; margin: 0 0 12px; }
body .z-newsletter form { gap: 8px; }
body .z-newsletter input { flex: 1 1 200px; min-width: 0; height: 44px; padding: 0 18px; font-size: 15px; }
body .z-newsletter button { height: 44px; padding: 0 22px; }
body .z-newsletter small { font-size: 11px; margin-top: 8px; }

/* ---- Newsletter sur mobile : carte sombre, champ et bouton sur une ligne ---- */
@media (max-width: 600px) {
	body .z-newsletter {
		display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; align-items: center;
		background: #141414; color: #fff;
		border-top: 4px solid var(--z-red, #DA1026); border-radius: 14px;
		padding: 16px;
	}
	body .z-newsletter::before {
		content: "\2709"; grid-row: 1 / span 2;
		width: 40px; height: 40px; border-radius: 50%;
		display: flex; align-items: center; justify-content: center;
		background: var(--z-red, #DA1026); color: #fff; font-size: 19px;
	}
	body .z-newsletter h3 { font-size: 16px; margin: 0; }
	body .z-newsletter > p { font-size: 12.5px; margin: 2px 0 0; color: rgba(255, 255, 255, .72); }
	body .z-newsletter form {
		grid-column: 1 / -1; display: flex; flex-direction: row; flex-wrap: nowrap;
		gap: 8px; margin-top: 12px;
	}
	body .z-newsletter input {
		flex: 1 1 auto; width: auto; min-width: 0; height: 42px;
		padding: 0 14px; font-size: 14px; border-radius: 999px;
	}
	body .z-newsletter button {
		flex: 0 0 auto; width: auto; height: 42px; padding: 0 16px;
		font-size: 14px; border-radius: 999px;
	}
	body .z-newsletter small,
	body .z-newsletter .z-nl-msg { grid-column: 1 / -1; }
	body .z-newsletter small { font-size: 10.5px; margin-top: 8px; color: rgba(255, 255, 255, .55); }
}