/* ville.php, the page of one edition (2026-10-31). Uses the TV styles (zp-tv.css: .zt-wrap, .zt-h2, .zl-*). */
.zv { padding-bottom: 40px; }
.zv-hero { padding: 120px 0 40px; background: radial-gradient(1200px 500px at 85% 20%, rgba(96,255,0,.12), transparent 60%), #1c1c21; border-bottom: 1px solid rgba(255,255,255,.06); }
.zv-hero__in { display: flex; align-items: center; gap: 48px; }
.zv-hero__txt { flex: 1; min-width: 0; }
.zv-kicker { margin: 0 0 10px; font: 500 13px Oswald, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--zt-accent); }
.zv h1 { margin: 0; font: 700 clamp(44px, 8vw, 92px)/.95 Oswald, sans-serif; text-transform: uppercase; color: #fff; }
.zv h1 small { display: block; margin-top: 6px; font-size: .42em; font-weight: 400; letter-spacing: 1px; color: var(--zt-accent); }
.zv-intro { margin: 18px 0 0; max-width: 560px; font-size: 18px; line-height: 1.55; color: #d6d6de; }
.zv-issue { margin: 18px 0 0; font-size: 14px; color: #a4a4b0; }
.zv-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.zv-btn { display: inline-block; padding: 11px 20px; border-radius: 24px; background: var(--zt-accent); color: #111 !important; font: 600 15px 'Open Sans', sans-serif; text-decoration: none !important; transition: transform .15s; }
.zv-btn:hover { transform: translateY(-1px); }
.zv-btn--ghost { background: transparent; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.zv-cover { flex: 0 0 auto; width: 340px; transform: rotate(2deg); transition: transform .2s; }
.zv-cover:hover { transform: rotate(0) scale(1.02); }
.zv-cover img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 24px 60px rgba(0,0,0,.55); }

.zv-sec { margin-top: 44px; }
.zv-lead { margin: -6px 0 16px; color: #a4a4b0; }
.zv-more { margin: 14px 0 0; text-align: right; }
.zv-more a { color: var(--zt-accent); text-decoration: none; }
.zv-local .zl-story { display: -webkit-box; -webkit-line-clamp: 4; color: #e4e4ea; }

.zv-out { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.zv-ev { position: relative; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: #24242a; border: 1px solid rgba(255,255,255,.06); color: inherit; text-decoration: none !important; transition: border-color .2s, transform .2s; }
a.zv-ev:hover { border-color: var(--zt-accent); transform: translateY(-2px); }
/* the picture: a colour and a drawing for the kind of event (zsVisuel) */
.zv-ev__pic { position: relative; display: block; height: 150px; overflow: hidden; background: linear-gradient(135deg, var(--c1), var(--c2)); color: rgba(255,255,255,.9); }
.zv-ev__pic svg { position: absolute; right: -6px; top: -10px; width: 120px; height: 120px; opacity: .35; transform: rotate(-8deg); }
/* the photo of the tourist office, over the drawing, with its credit */
.zv-ev__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
a.zv-ev:hover .zv-ev__pic img { transform: scale(1.04); }
.zv-ev__cr { position: absolute; right: 0; bottom: 0; max-width: 75%; padding: 2px 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: rgba(0,0,0,.55); font-size: 10px; color: rgba(255,255,255,.8); border-top-left-radius: 6px; }
.zv-ev--musique { --c1: #7b2ff7; --c2: #f107a3; }
.zv-ev--scene { --c1: #b91d47; --c2: #ff7a59; }
.zv-ev--fete { --c1: #f7971e; --c2: #ffd200; }
.zv-ev--expo { --c1: #0f766e; --c2: #34d399; }
.zv-ev--sport { --c1: #1d4ed8; --c2: #38bdf8; }
.zv-ev--cinema { --c1: #111827; --c2: #6b7280; }
.zv-ev--enfants { --c1: #ec4899; --c2: #fbbf24; }
.zv-ev--chine { --c1: #92400e; --c2: #d97706; }
.zv-ev--balade { --c1: #166534; --c2: #84cc16; }
.zv-ev--parole { --c1: #334155; --c2: #64748b; }
.zv-ev--sortie { --c1: #3f3f46; --c2: #71717a; }
.zv-ev__d { position: absolute; z-index: 1; left: 12px; top: 12px; display: flex; align-items: baseline; gap: 5px; padding: 6px 10px; border-radius: 8px; background: rgba(20,20,24,.82); line-height: 1; font-family: Oswald, sans-serif; color: #fff; }
.zv-ev__d small { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: #d4d4dc; }
.zv-ev__d b { font-size: 22px; font-weight: 600; color: var(--zt-accent); }
.zv-ev__d b.zv-ev__now { font-size: 15px; text-transform: uppercase; }
.zv-ev__b { min-width: 0; padding: 12px 14px 14px; }
.zv-ev__k { display: block; font-size: 12px; color: var(--zt-accent); }
.zv-ev__t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 2px 0; font-weight: 600; line-height: 1.3; color: #fff; }
.zv-ev__w { display: block; font-size: 13px; color: #a4a4b0; }
.zv-src { margin: 14px 0 0; font-size: 13px; color: #8c8c98; }
.zv-src a { color: var(--zt-accent); }

.zv-tonight { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.zv-tv { display: block; color: inherit; text-decoration: none; }
.zv-tv__pic { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #2a2a31; }
.zv-tv__pic > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.zv-tv:hover .zv-tv__pic > img { transform: scale(1.04); }
.zv-tv__t { display: block; margin-top: 8px; font-weight: 600; line-height: 1.35; color: #fff; }
.zv-tv__t time { color: var(--zt-accent); font-family: Oswald, sans-serif; font-weight: 500; margin-right: 4px; }
.zv-tv__m { display: block; font-size: 13px; color: #a4a4b0; }

.zv-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.zv-card { padding: 26px 26px 28px; border-radius: 14px; background: #24242a; border: 1px solid rgba(255,255,255,.06); }
.zv-card h2 { margin: 0 0 10px; font: 500 24px Oswald, sans-serif; color: #fff; }
.zv-card p { margin: 0 0 18px; line-height: 1.6; color: #c9c9d2; }

.zv-past { display: flex; flex-wrap: wrap; gap: 24px; }
.zv-old { display: flex; align-items: center; gap: 16px; padding: 12px 18px 12px 12px; border-radius: 12px; background: #24242a; color: inherit; text-decoration: none; }
.zv-old img { width: 110px; height: auto; border-radius: 4px; }
.zv-old b { display: block; margin-bottom: 4px; font: 500 20px Oswald, sans-serif; color: var(--zt-accent); }
.zv-old span { color: #c9c9d2; line-height: 1.45; }

.zv-contact p { margin: 0; line-height: 1.6; color: #d6d6de; font-size: 17px; }

@media (max-width: 991px) {
	.zv-out { grid-template-columns: repeat(2, 1fr); }
	.zv-tonight { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
	.zv-hero { padding: 100px 0 28px; }
	.zv-hero__in { flex-direction: column; align-items: flex-start; gap: 28px; }
	.zv-cover { width: 55%; max-width: 240px; margin-left: 4px; }
	.zv-intro { font-size: 16px; }
	.zv-duo, .zv-out { grid-template-columns: 1fr; }
	.zv-ev__pic { height: 64px; }
	.zv-ev--photo .zv-ev__pic { height: 180px; }
	.zv-ev__pic svg { width: 90px; height: 90px; }
	.zv-old { width: 100%; }
	.zv-old img { width: 80px; }
	.zv .zl-story { display: -webkit-box; }
}

/* the panel of an event (2026-11-01): on the right on a computer, from the bottom on a phone */
.zv-lock, .zv-lock body { overflow: hidden; }
.zv-drawer { --zt-accent: #60ff00; position: fixed; inset: 0; z-index: 10000; }
.zv-drawer[hidden] { display: none; }
.zv-drawer__bg { position: absolute; inset: 0; background: rgba(0,0,0,.6); opacity: 0; transition: opacity .25s; }
.zv-drawer__in { position: absolute; top: 0; right: 0; bottom: 0; width: min(480px, 100%); overflow-y: auto; overscroll-behavior: contain; background: #1c1c21; box-shadow: -20px 0 60px rgba(0,0,0,.5); transform: translateX(100%); transition: transform .25s ease-out; }
.zv-drawer.is-open .zv-drawer__bg { opacity: 1; }
.zv-drawer.is-open .zv-drawer__in { transform: none; }
.zv-drawer__x { position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(20,20,24,.8); color: #fff; font-size: 26px; line-height: 40px; cursor: pointer; }
.zv-drawer__x:hover { background: var(--zt-accent); color: #111; }
.zv-drawer__pic { position: relative; height: 260px; overflow: hidden; background: linear-gradient(135deg, var(--c1, #3f3f46), var(--c2, #71717a)); color: rgba(255,255,255,.9); }
.zv-drawer__pic svg { position: absolute; right: 10px; top: 10px; width: 200px; height: 200px; opacity: .3; transform: rotate(-8deg); }
.zv-drawer__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zv-drawer__body { padding: 22px 24px 32px; }
/* the head of the panel on the green of the magazine, written in black */
.zv-drawer__head { padding: 20px 24px 22px; background: var(--zt-accent); color: #111; }
.zv-drawer__k { margin: 0 0 6px; font: 500 13px Oswald, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(0,0,0,.65); }
.zv-drawer__t { margin: 0 0 14px; font: 600 28px/1.15 Oswald, sans-serif; color: #111; }
.zv-drawer__dates { margin: 0 0 12px; padding: 0; list-style: none; }
.zv-drawer__dates li { padding: 6px 0 6px 26px; border-bottom: 1px solid rgba(0,0,0,.15); color: #111; font-weight: 700; background: no-repeat 0 50% / 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.zv-drawer__lieu { margin: 0 0 16px; padding-left: 26px; color: #111; background: no-repeat 0 3px / 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2'%3E%3Cpath d='M12 21s-7-6.3-7-12a7 7 0 0 1 14 0c0 5.7-7 12-7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E"); }
.zv-drawer__btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.zv-drawer__btns .zv-btn { padding: 9px 16px; font-size: 14px; background: #111; color: var(--zt-accent) !important; }
.zv-drawer__btns .zv-btn--ghost { background: transparent; color: #111 !important; box-shadow: inset 0 0 0 1.5px #111; }
.zv-drawer__btns .zv-btn--ghost:hover { background: #111; color: var(--zt-accent) !important; }
.zv-drawer__btns [hidden] { display: none; }
.zv-drawer__txt { white-space: pre-line; line-height: 1.65; color: #d6d6de; }
.zv-drawer__src { margin: 20px 0 0; font-size: 12px; color: #8c8c98; }
@media (max-width: 767px) {
	.zv-drawer__in { top: auto; left: 0; width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; transform: translateY(100%); box-shadow: 0 -20px 60px rgba(0,0,0,.5); }
	.zv-drawer__pic { height: 200px; }
	.zv-drawer__t { font-size: 24px; }
	.zv-drawer__body { padding: 18px 18px 28px; }
	.zv-drawer__head { padding: 16px 18px 18px; }
}
@media (prefers-reduced-motion: reduce) { .zv-drawer__in, .zv-drawer__bg { transition: none; } }

/* the carousel of the issues (assets/css/zm-flow.css), and the issues of other years under it */
.zv-mags .zm-flow { padding-top: 10px; }
.zv-time { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 8px auto 0; }
.zv-time a { padding: 9px 16px; border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); color: #d6d6de; text-decoration: none; font-size: 14px; }
.zv-time a:hover { box-shadow: inset 0 0 0 1px var(--zt-accent); color: var(--zt-accent); }
.zv-time b { font-weight: 600; color: #fff; }
.zv-time a:hover b { color: var(--zt-accent); }