/*
Theme Name: CityClub — Zélie
Template: cityclub
Description: Évolution de « Salle obscure » 1.0.10 vers le design suisse (« less is more ») : police Aileron hébergée sur le serveur, couleurs de rubriques harmonisées, largeur maximale de 1920 px, nouvel accueil (photo seule, bloc « Aujourd'hui » au nombre d'or). Voir « Consignes de design — site du CityClub ». Thème actif sur pro.cityclubpully.ch depuis le 28.10.2026.
Version: 0.3.24
Requires PHP: 8.1
Author: Cinéma CityClub
Text Domain: cityclub-zelie
*/

:root {
	--or:#ab9362; --or-clair:#d9c49a; --nuit:#0e0d0b; --nuit-2:#1a1814; --nuit-3:#25221c; --trait:#2a261f;
	--texte:#ece6da; --doux:#9b9487; --rouge:#c4422f; --vert:#6f8f6a; --bleu:#5b7a99; --rose:#b8708a; --violet:#7b6aa8;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body.nuit {
	background:var(--nuit); color:var(--texte); margin:0;
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; font-size:15px; line-height:1.55;
}
body.nuit a { color:inherit; text-decoration:none; }
body.nuit img { max-width:100%; height:auto; }

/* ---------- Bandeau ---------- */
.bandeau {
	position:sticky; top:0; z-index:50; display:flex; align-items:baseline; gap:28px; /* bas du menu aligné sur le bas du logo */ padding:14px 4vw;
	background:rgba(14,13,11,.88); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--trait);
}
body.admin-bar .bandeau { top:32px; }
.logo { display:block; width:230px; flex:none; line-height:0; position:relative; top:5px; } /* compromis : logo centré en hauteur, menu calé un peu au-dessus de sa ligne de base */
.logo-svg { display:block; width:100%; height:auto; }
.logo-svg .m { fill:#fff; }
.logo-svg .p { fill:#a49354; }
@media (max-width: 900px) { .logo { width:190px; } }
.principal { display:flex; gap:20px; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--doux); flex:1; flex-wrap:wrap; }
.principal a:hover, .principal a.on { color:var(--or-clair); }
.billet { align-self:center; border:1px solid var(--or); color:var(--or-clair) !important; padding:8px 16px; border-radius:999px; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; }
.billet:hover { background:var(--or); color:var(--nuit) !important; }

/* ---------- Ce soir ---------- */
.hero {
	position:relative; display:grid; grid-template-columns:1.2fr 1fr; gap:5vw; padding:8vh 4vw 7vh; min-height:70vh;
	background:
		radial-gradient(ellipse at 75% 30%, rgba(171,147,98,.28), transparent 55%),
		radial-gradient(ellipse at 10% 90%, rgba(196,66,47,.18), transparent 50%),
		linear-gradient(180deg, #14120f, #0e0d0b);
}
.hero::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.06; background-image:repeating-linear-gradient(0deg, #fff 0 1px, transparent 1px 3px); }
.kicker { font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--or); margin:0; }
.hero h1 { font-size:clamp(40px, 5.6vw, 96px); line-height:.98; font-weight:300; letter-spacing:-.02em; margin:18px 0 22px; }
.hero h1 .logo-titre { display:inline-block; height:.73em; width:auto; vertical-align:-.017em; fill:var(--or-clair); }
.chapo { max-width:520px; color:var(--doux); font-size:17px; }
.timeline { position:relative; z-index:1; align-self:center; border-left:1px solid #3a352b; padding-left:28px; display:flex; flex-direction:column; gap:26px; }
.seance { position:relative; }
.seance::before { content:""; position:absolute; left:-36px; top:10px; width:11px; height:11px; border-radius:50%; background:var(--nuit); border:2px solid var(--or); }
.seance.live::before { background:var(--rouge); border-color:var(--rouge); box-shadow:0 0 0 6px rgba(196,66,47,.25); animation:pulse 2s infinite; }
@keyframes pulse { 50% { box-shadow:0 0 0 10px rgba(196,66,47,.05); } }
.heure { font-size:32px; font-weight:200; letter-spacing:-.01em; }
.seance h3 { font-size:19px; font-weight:600; margin:2px 0; }
.meta { font-size:12px; color:var(--doux); letter-spacing:.04em; margin:0; }
.acheter { color:var(--or-clair) !important; }
.tag { display:inline-block; font-size:10px; letter-spacing:.14em; text-transform:uppercase; padding:3px 8px; border-radius:3px; margin-right:6px; vertical-align:2px; color:#fff; font-weight:500; }
/* Couleurs des rubriques (proposition, à valider avec Sara) : même clarté et même intensité que l'or, teintes réparties autour du cercle */
:root { --c-films:#ab9362; --c-rencontre:#ce7761; --c-musique:#5fa2c4; --c-ptit:#74a77b; --c-senior:#c78194; --c-relax:#9c8dca; }
.tag { color:#0e0d0b; font-weight:600; }
.t-rencontre { background:var(--c-rencontre); } .t-ptit { background:var(--c-ptit); } .t-musique { background:var(--c-musique); }
.t-senior { background:var(--c-senior); } .t-relax { background:var(--c-relax); } .t-autre { background:#4a443a; color:#fff; }

/* ---------- Contenu ---------- */
.contenu { padding:50px 4vw 70px; }
.titre-sec h2, .canevasPage h1 { font-size:42px; font-weight:300; letter-spacing:-.01em; margin:0 0 24px; text-transform:none; }
.canevasPage h1 span { font-weight:300 !important; }
.canevasPage { max-width:1400px; }
.page .canevasPage > :not(.grille):not(.filtres):not(.jours):not(.jours-car):not(.nuit-periode):not(.carte-bar):not(.infos-grille):not(.infos-colonnes) { max-width:760px; }
.canevasPage p, .canevasPage li { color:#cfc8bb; }
.canevasPage a { color:var(--or-clair); }
.canevasPage hr { border:0; border-top:1px solid var(--trait); margin:28px 0; }
.canevasPage b, .canevasPage strong, .canevasPage span[style*="bold"] { color:var(--texte); }
.canevasPage h2 { font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--or); }

/* ---------- Filtres et jours ---------- */
.filtres { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 18px; }
.filtres a { font-size:12px; letter-spacing:.1em; text-transform:uppercase; padding:8px 14px; border:1px solid #3a352b; border-radius:999px; color:var(--doux) !important; }
.filtres a.on, .filtres a:hover { border-color:var(--or); color:var(--or-clair) !important; }
.filtres a[class*="r-"] { --c:var(--or); color:var(--c) !important; border-color:color-mix(in srgb, var(--c) 45%, transparent); }
.filtres a.r-films-du-mois { --c:var(--c-films); } .filtres a.r-rencontres { --c:var(--c-rencontre); } .filtres a.r-musique { --c:var(--c-musique); }
.filtres a.r-le-ptit-cityclub { --c:var(--c-ptit); } .filtres a.r-cine-seniors { --c:var(--c-senior); } .filtres a.r-relax { --c:var(--c-relax); }
.filtres a[class*="r-"]:hover { border-color:var(--c); }
.filtres a[class*="r-"].on { background:var(--c); border-color:var(--c); color:#0e0d0b !important; }
.jours-car { display:flex; align-items:center; gap:8px; margin:0 0 26px; padding-bottom:12px; border-bottom:1px solid var(--trait); }
.jours { display:flex; gap:6px; overflow-x:auto; padding:6px 0; flex:1; min-width:0; scrollbar-width:none; scroll-snap-type:x mandatory; scroll-behavior:smooth; }
.jours-fl { flex:none; width:34px; height:34px; border-radius:50%; border:1px solid #3a352b; background:transparent; color:var(--or-clair); font-size:20px; line-height:1; cursor:pointer; }
.jours-fl:hover { border-color:var(--or); }
.jours-fl { align-self:flex-start; margin-top:35px; } /* centrées sur le chiffre du jour */
.jours-fl:disabled { opacity:.2; cursor:default; }
.jours-prec:disabled { display:none; } /* au début : pas de flèche, la 1re date est collée à gauche */
.jours::-webkit-scrollbar { display:none; }
.jour { flex:0 0 auto; width:58px; scroll-snap-align:start; text-align:center; padding:9px 0; border-radius:10px; color:var(--doux) !important; font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.jour b { display:block; font-size:22px; font-weight:300; color:var(--texte); letter-spacing:0; }
.jour .pts { display:flex; justify-content:center; gap:3px; margin-top:5px; height:5px; }
.mois-sep { flex:0 0 auto; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:1px; margin:6px 4px; font-size:10px; font-weight:600; line-height:1.1; color:var(--or); }
.jour .pts i { width:5px; height:5px; border-radius:50%; background:var(--c-films); }
.jour .pts i.p-rencontres { background:var(--c-rencontre); } .jour .pts i.p-musique { background:var(--c-musique); }
.jour .pts i.p-le-ptit-cityclub { background:var(--c-ptit); } .jour .pts i.p-cine-seniors { background:var(--c-senior); }
.jour .pts i.p-relax { background:var(--c-relax); } .jour .pts i.p-autre { background:var(--doux); }
.jour:hover { background:var(--nuit-3); }
.jour.on { background:var(--or); color:var(--nuit) !important; } .jour.on b { color:var(--nuit); } .jour.on .pts i { box-shadow:0 0 0 1.5px var(--nuit); }
.jour.vide { opacity:.35; pointer-events:none; }
.nuit-periode { font-size:22px; font-weight:300; text-transform:capitalize; margin:0 0 16px; color:var(--or-clair) !important; }
.nuit-periode a { font-size:12px; text-transform:none; letter-spacing:.08em; color:var(--doux) !important; margin-left:12px; }

/* ---------- Grille des films ---------- */
.grille { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:38px 26px; }
.film h3 { font-size:17px; margin:14px 0 4px; font-weight:600; line-height:1.25; color:var(--texte); }
.film .meta { margin-bottom:8px; }
.affiche { display:block; aspect-ratio:1363/1920; /* ratio de l'affiche de Nicole Nicole */ border-radius:6px; position:relative; overflow:hidden; background:var(--nuit-3);
	box-shadow:0 20px 40px -20px rgba(0,0,0,.9); transition:transform .35s ease, box-shadow .35s ease; }
.affiche img { position:absolute; inset:0; width:100%; height:100% !important; object-fit:cover; display:block; }
.film:hover .affiche { transform:translateY(-6px) rotate(-.6deg); box-shadow:0 30px 50px -20px rgba(171,147,98,.4); }
.affiche .badge { position:absolute; top:12px; left:12px; }
.affiche .badges { position:absolute; top:12px; left:12px; display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.affiche .badges .tag { margin:0; }
.resume { font-size:13px; line-height:1.5; color:#b9b2a5 !important; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin:0 0 10px; }
/* Synopsis complet au survol : une copie s'affiche par-dessus, sans décaler la grille */
.resume-boite { position:relative; }
.resume-complet { display:none; position:absolute; z-index:6; top:-10px; left:-10px; right:-10px; margin:0; padding:10px; font-size:13px; line-height:1.5; color:var(--texte); background:#1a1814; border:1px solid #3a352b; border-radius:6px; box-shadow:0 18px 40px rgba(0,0,0,.6); }
.resume-boite:hover .resume-complet { display:block; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chips a { font-size:12px; padding:5px 9px; border-radius:4px; background:var(--nuit-3); color:var(--texte) !important; white-space:nowrap; }
.chips a:hover { background:var(--or); color:var(--nuit) !important; }
.chips a.plus { background:transparent; border:1px solid #3a352b; color:var(--doux) !important; }
.pastille { display:inline-block; width:7px; height:7px; border-radius:50%; margin-left:4px; vertical-align:1px; }
.nuit-vide { color:var(--doux); }

/* ---------- Fiche film (extension Ticketack) ---------- */
body.nuit .tkt-wrapper, body.nuit .tkt-wrapper .tkt-light-section, body.nuit .tkt-wrapper .tkt-dark-section { background:transparent !important; color:var(--texte) !important; }
body.nuit .tkt-wrapper .tkt-section-title { color:var(--or-clair) !important; font-weight:300; border-color:var(--trait) !important; }
body.nuit .tkt-wrapper .row .col div[class*="label"], body.nuit .tkt-wrapper .tkt-badge { background:var(--nuit-3) !important; color:var(--texte) !important; }

/* ---------- Pied ---------- */
.lieu { display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--trait); border-top:1px solid var(--trait); }
.lieu div { background:var(--nuit); padding:44px 4vw 44px 36px; }
.lieu h4 { font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--or); margin:0 0 12px; }
.lieu p { color:var(--doux); margin:0 0 10px; }
.lieu .gros { font-size:28px; font-weight:200; color:var(--texte); line-height:1.15; }
.lieu a { color:var(--or-clair) !important; }
.pied { padding:28px 4vw 46px; color:#6a6458; font-size:12px; letter-spacing:.06em; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.pied a:hover { color:var(--or-clair); }

/* ---------- Petits écrans ---------- */
.canevasPage { font-size:15px; line-height:1.7; color:#cfc8bb; }
.canevasPage [style*="background-color"] { background-color:transparent !important; }
.canevasPage [style*="font-family"] { font-family:inherit !important; }
.canevasPage [style*="color"]:not(a) { color:inherit !important; }
/* Carte du bar (page Le bar) — reprend la mise en page du PDF */
.carte-bar { font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; margin:30px 0 40px; max-width:900px; }
.carte-bar .carte-titre { font-size:64px; font-weight:300; line-height:1; letter-spacing:0; text-transform:none; margin:20px 0 26px; }
.carte-bar .carte-colonnes { display:grid; grid-template-columns:1fr 1fr; gap:0 6%; align-items:start; }
.carte-bar .carte-bloc { margin-bottom:34px; }
.carte-bar .carte-bloc h3 { font-size:28px; font-weight:300; letter-spacing:0; text-transform:none; margin:0 0 14px; }
.carte-bar .carte-table { width:100%; border-collapse:collapse; border-top:1px solid currentColor; }
.carte-bar .carte-table td { border-bottom:1px solid currentColor; padding:4px 0 3px; vertical-align:top; font-size:14px; line-height:1.35; background:none; }
.carte-bar .carte-table td + td { white-space:nowrap; padding-left:14px; }
.carte-bar .carte-table td.carte-nom { width:100%; }
.carte-bar .carte-table td.carte-prix { text-align:right; }
.carte-bar .carte-nom small { display:block; font-size:10px; line-height:1.4; }
.carte-bar .carte-type { font-size:10px; }
.carte-bar .carte-note { font-style:italic; font-size:10px; margin:8px 0 0; }
@media (max-width: 700px) {
	.carte-bar .carte-colonnes { grid-template-columns:1fr; }
	.carte-bar .carte-titre { font-size:48px; }
}
.canevasPage .carte-bar, .canevasPage .carte-bar p { color:var(--texte); }
.canevasPage .carte-bar .carte-titre { color:var(--texte); }
.canevasPage .carte-bar .carte-bloc h3 { color:var(--or-clair); }
.carte-bar .carte-table, .carte-bar .carte-table td { border-color:rgba(171,147,98,.45); }
.carte-bar .carte-nom small, .carte-bar .carte-type, .carte-bar .carte-note { color:var(--doux); }
.carte-bar .carte-table td.carte-prix { color:var(--or-clair); }

/* Fiche film */
.fiche { max-width:1200px; margin:0 auto; }
.retour { font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--doux); }
.retour:hover { color:var(--or-clair); }
.fiche-grille { display:grid; grid-template-columns:minmax(0,360px) minmax(0,1fr); gap:56px; margin-top:28px; align-items:start; }
.fiche-affiche { position:sticky; top:96px; }
.fiche-affiche img { width:100%; aspect-ratio:1363/1920; height:auto !important; object-fit:cover; border-radius:6px; box-shadow:0 30px 80px rgba(0,0,0,.6); display:block; }
.fiche-texte h1 { font-size:clamp(34px,4.4vw,58px); font-weight:300; line-height:1.05; margin:14px 0 14px; letter-spacing:-.01em; }
.fiche-realis { color:var(--or-clair); margin:0 0 4px; }
.fiche-texte h2 { font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--or); margin:36px 0 12px; font-weight:500; }
.fiche-seances { list-style:none; margin:0; padding:0; border-top:1px solid var(--trait); }
.fiche-seances li { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 0; border-bottom:1px solid var(--trait); }
.fiche-seances .quand { flex:1; min-width:180px; }
.fiche-seances .quand b { color:var(--or-clair); font-weight:600; }
.fiche-seances .btn { border:1px solid var(--or); color:var(--or-clair); padding:6px 14px; border-radius:999px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.fiche-seances .btn:hover { background:var(--or); color:var(--nuit); }
.fiche-resume, .fiche-libre { color:#cfc8bb; line-height:1.7; margin-top:28px; max-width:68ch; }
.fiche-libre { border-top:1px solid var(--trait); padding-top:24px; font-size:14px; }
.fiche-resume a, .fiche-libre a { color:var(--or-clair); }
.cityclub-video { position:relative; margin-top:32px; aspect-ratio:16/9; background:#000; border-radius:6px; overflow:hidden; cursor:pointer; max-width:720px; }
.cityclub-video img, .cityclub-video iframe { width:100%; height:100%; object-fit:cover; border:0; display:block; }
.cityclub-video img { opacity:.75; transition:opacity .2s; }
.cityclub-video:hover img { opacity:.95; }
.cityclub-video .fa { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:64px; color:#fff; text-shadow:0 4px 20px rgba(0,0,0,.6); }
@media (max-width: 900px) {
	.fiche-grille { grid-template-columns:1fr; gap:28px; }
	.fiche-affiche { position:static; max-width:260px; }
}

@media (max-width: 900px) {
	.bandeau { flex-wrap:wrap; gap:10px 16px; align-items:center; }
	.bandeau .principal { flex:0 0 100%; }
	.logo { top:0; }
	.principal { order:3; width:100%; flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
	.principal a { white-space:nowrap; }
	.hero { grid-template-columns:1fr; min-height:auto; padding-top:6vh; }
	.lieu { grid-template-columns:1fr; }
}
@media (max-width: 782px) { body.admin-bar .bandeau { top:46px; } }
@media (max-width: 560px) {
	.grille { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:28px 14px; }
	.film h3 { font-size:15px; }
	.film .resume-boite { display:none; }
	.film .chips a { font-size:10.5px; padding:4px 7px; }
}

/* Titres de films en capitales, étiquette au-dessus du titre */
.seance h3 a, .film h3, .fiche-texte h1 { text-transform:uppercase; }
.seance h3 { line-height:1.25; }
.seance h3 .tags { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 6px; }
.seance h3 .tags .tag { margin:0; }
/* Places restantes (accueil) */
.places { font-size:12px; color:var(--or-clair); margin-top:6px; }
/* Image de fond de l'accueil (images du thème clair), assombrie pour rester lisible ; la trame reste par-dessus */
.hero.avec-fond::before {
	content:""; position:absolute; inset:0; pointer-events:none;
	background:
		linear-gradient(90deg, rgba(14,13,11,.82) 0%, rgba(14,13,11,.38) 38%, rgba(14,13,11,.42) 45%, rgba(14,13,11,.9) 58%, rgba(14,13,11,.9) 100%),
		linear-gradient(180deg, rgba(14,13,11,.2) 0%, rgba(14,13,11,0) 60%, #0e0d0b 100%),
		var(--fond) center / cover no-repeat;
	filter:saturate(.85);
}
.hero > div { position:relative; z-index:2; }
.hero.avec-fond h1, .hero.avec-fond .chapo { text-shadow:0 1px 14px rgba(0,0,0,.7); }
.hero.avec-fond .seance { text-shadow:0 0 10px rgba(0,0,0,.9), 0 1px 2px rgba(0,0,0,.9); }
.hero.avec-fond .seance .tag { text-shadow:none; } /* pas d'ombre sur le texte des étiquettes */
.hero.avec-fond .chapo { color:#cfc8bb; }
@media (max-width: 900px) {
	.hero.avec-fond::before { background:linear-gradient(180deg, rgba(14,13,11,.62) 0%, rgba(14,13,11,.5) 60%, #0e0d0b 100%), var(--fond) center / cover no-repeat; }
}
@media (max-width: 560px) { .jours-fl { display:none; } }

/* Bulle d'explication au survol d'une étiquette (textes à valider avec Sara) */
.tag[data-info] { position:relative; cursor:help; }
.tag[data-info]:hover::after, .tag[data-info]:focus::after {
	content:attr(data-info); position:absolute; left:0; top:calc(100% + 8px); z-index:30;
	width:220px; padding:10px 12px; border-radius:6px; border:1px solid #3a352b;
	background:#1a1814; color:var(--texte); box-shadow:0 12px 30px rgba(0,0,0,.55);
	font-size:12px; font-weight:400; line-height:1.45; letter-spacing:0; text-transform:none; text-shadow:none; white-space:normal;
}
.tag[data-info]:hover::before, .tag[data-info]:focus::before {
	content:""; position:absolute; left:14px; top:calc(100% + 3px); z-index:31;
	border:5px solid transparent; border-top:0; border-bottom-color:#3a352b;
}
.tag[data-info]:focus { outline:none; }

/* Images supplémentaires de la fiche film (2e image Kronos et suivantes) */
.fiche-images { display:grid; gap:14px; margin-top:32px; max-width:720px; }
.fiche-images img { width:100%; height:auto !important; border-radius:6px; display:block; }
.fiche-seances .tag { margin:0; }

/* Pied de page : photos en fond des trois blocs (le lieu = salle retournée, le bar, devenir membre = enseigne), assombries + trame */
.lieu > div { position:relative; overflow:hidden; isolation:isolate; text-shadow:0 1px 10px rgba(0,0,0,.75); }
.lieu > div::before { content:""; position:absolute; inset:0; z-index:-2; background-position:center; background-size:cover; background-repeat:no-repeat; filter:saturate(.85); }
.lieu > div::after { content:""; position:absolute; inset:0; z-index:-1; background:
	repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px),
	linear-gradient(90deg, rgba(14,13,11,.9) 0%, rgba(14,13,11,.74) 55%, rgba(14,13,11,.55) 100%); }
.lieu-lieu::before { background-image:url('assets/pied/pied-lieu.jpg'); }
.lieu-bar::before { background-image:url('assets/pied/pied-bar.jpg'); }
.lieu-membre::before { background-image:url('assets/pied/pied-membre.jpg'); background-size:auto 120%; background-position:calc(100% + 150px) 40%; } /* enseigne décalée à droite, hors du texte */

/* Loupe et panneau de recherche */
.loupe { align-self:center; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; margin-left:-6px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--doux); cursor:pointer; }
.loupe svg, .recherche-ico { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.loupe:hover { color:var(--or-clair); }
.principal .loupe { transform:translateY(-5px); } /* rond de la loupe centré sur le O de PRO */
body.recherche-ouverte { overflow:hidden; }
.recherche { position:fixed; inset:0; z-index:200; background:rgba(10,9,8,.94); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); overflow-y:auto; padding:9vh 4vw 6vh; }
.recherche[hidden] { display:none; }
.recherche-boite { max-width:880px; margin:0 auto; }
.recherche-tete { display:flex; align-items:center; gap:14px; border-bottom:1px solid var(--or); padding-bottom:12px; }
.recherche-ico { width:26px; height:26px; color:var(--or); flex:none; }
.recherche-tete input { flex:1; min-width:0; background:transparent; border:0; outline:0; color:var(--texte); font:300 clamp(24px,3.4vw,38px)/1.2 inherit; font-family:inherit; }
.recherche-tete input::placeholder { color:#5d574d; }
.recherche-tete input::-webkit-search-cancel-button { display:none; }
.recherche-fermer { flex:none; background:transparent; border:0; color:var(--doux); font-size:34px; line-height:1; cursor:pointer; }
.recherche-fermer:hover { color:var(--or-clair); }
.recherche-ages { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:18px 0 6px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--doux); }
.recherche-ages span { margin:0 4px; }
.recherche-ages button { min-width:36px; height:32px; padding:0 9px; border-radius:999px; border:1px solid color-mix(in srgb, var(--c-ptit) 50%, transparent); background:transparent; color:var(--c-ptit); font:500 13px/1 inherit; font-family:inherit; cursor:pointer; }
.recherche-ages button:hover { border-color:var(--c-ptit); }
.recherche-ages button.on { background:var(--c-ptit); border-color:var(--c-ptit); color:#0e0d0b; }
.recherche-res h3 { font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--or); font-weight:500; margin:30px 0 12px; }
.recherche-info { color:var(--doux); margin-top:28px; }
.recherche-films { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:10px; }
.recherche-film { display:flex; gap:12px; padding:8px; border-radius:6px; color:var(--texte) !important; }
.recherche-film:hover { background:var(--nuit-3); }
.recherche-film img, .recherche-film .sans-img { width:56px; height:auto; align-self:flex-start; aspect-ratio:1363/1920; object-fit:cover; border-radius:3px; flex:none; background:var(--nuit-3); }
.recherche-film > span { display:flex; flex-direction:column; gap:3px; min-width:0; }
.recherche-film b { font-weight:600; text-transform:uppercase; font-size:14px; line-height:1.25; }
.recherche-film small { color:var(--doux); font-size:12px; }
.recherche-film .recherche-quand { color:var(--or-clair); }
.recherche-tags { display:flex; flex-wrap:wrap; gap:4px; }
.recherche-tags .tag { font-style:normal; margin:0; }
.recherche-pages a { display:block; padding:12px 8px; border-top:1px solid var(--trait); color:var(--texte) !important; }
.recherche-pages a:hover { background:var(--nuit-2); }
.recherche-pages b { font-weight:400; font-size:18px; }
.recherche-pages small { display:block; color:var(--doux); font-size:13px; margin-top:4px; }
.recherche mark { background:transparent; color:var(--or-clair); font-weight:600; }
@media (max-width: 900px) { .principal .loupe { position:sticky; right:0; flex:none; background:var(--nuit); box-shadow:-12px 0 12px var(--nuit); } }

/* Pages Le lieu et Infos pratiques : sections, blocs, tarifs façon carte du bar */
.canevasPage h2.section-titre { font-size:64px; font-weight:300; line-height:1; letter-spacing:0; text-transform:none; margin:60px 0 8px; padding:0; }
.canevasPage .section-sous { font-size:12px; letter-spacing:.12em; text-transform:uppercase; margin:0 0 26px; }
.canevasPage .page-intro { max-width:760px; margin:26px 0 0; }
.canevasPage .page-intro h2 { margin:0 0 12px; }
.canevasPage .page-chapeau { font-size:22px; line-height:1.4; font-weight:300; margin:0 0 18px; }
.canevasPage .infos-grille { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:28px 5%; max-width:900px; margin:0 0 20px; }
.canevasPage .infos-colonnes { display:grid; grid-template-columns:1fr 1fr; gap:24px 6%; max-width:900px; margin:0 0 20px; }
.canevasPage .infos-bloc { border-top:1px solid currentColor; padding-top:10px; }
.canevasPage .infos-bloc h3 { font-size:12px; font-weight:normal; letter-spacing:.1em; text-transform:uppercase; line-height:1.35; margin:0 0 8px; }
.canevasPage .infos-bloc p { margin:0 0 8px; }
.canevasPage .infos-adresse p:first-child { font-size:22px; line-height:1.3; font-weight:300; }
.carte-tarifs { margin-top:0; }
.carte-tarifs .carte-bloc h3 { font-size:22px; line-height:1.2; }
.carte-tarifs .carte-table td.carte-nom::first-letter { text-transform:uppercase; }
.carte-bar .carte-sous { font-size:11px; margin:-8px 0 10px; }
.carte-bar .carte-lien { font-size:12px; margin:8px 0 0; }
.carte-bar .carte-pied p { font-style:italic; font-size:12px; line-height:1.5; margin:0 0 4px; max-width:760px; }
@media (max-width: 700px) {
	.canevasPage h2.section-titre { font-size:48px; }
	.canevasPage .infos-colonnes { grid-template-columns:1fr; }
}
.canevasPage h1 { text-transform:uppercase; line-height:1.1; }
@media (max-width: 700px) { .canevasPage h1 { font-size:30px; } }
.canevasPage h2.section-titre { color:var(--texte); }
.canevasPage .section-sous { color:var(--or); }
.canevasPage .page-chapeau, .canevasPage .infos-adresse p:first-child { color:var(--texte); }
.canevasPage .infos-bloc { border-top-color:rgba(171,147,98,.45); }
.canevasPage .infos-bloc h3 { color:var(--or); }
.carte-bar .carte-sous, .carte-bar .carte-pied p { color:var(--doux); }
.canevasPage .infos-bloc small { display:block; font-size:11px; line-height:1.4; }
.canevasPage .infos-note { font-style:italic; font-size:12px; line-height:1.5; max-width:760px; margin:6px 0 0; }
.carte-bar .carte-texte p { font-size:13px; line-height:1.5; margin:0 0 8px; }
.canevasPage .infos-bloc small, .canevasPage .infos-note { color:var(--doux); }
.canevasPage .page-intro + .carte-bar { margin-top:44px; }
.canevasPage .infos-bloc.infos-large { grid-column:1 / -1; display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:0 5%; }
.canevasPage .infos-large h3 { grid-column:1 / -1; }

/* v0.9.6 — Survol des affiches : le bloc entier zoome légèrement, avec l'éclairage doré (sans soulèvement ni rotation) */
.affiche { transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease; }
.film:hover .affiche { transform:scale(1.03); box-shadow:0 30px 50px -20px rgba(171,147,98,.4); }
@media (prefers-reduced-motion: reduce) { .affiche { transition:box-shadow .5s ease; } .film:hover .affiche { transform:none; } }

/* Points de la bande des jours : couleurs plus denses (même teinte, saturation ×1,7) et un peu plus grands */
.jour .pts { height:6px; }
.jour .pts i { width:6px; height:6px; background:#c59c48; }
.jour .pts i.p-rencontres { background:#f4603b; } .jour .pts i.p-musique { background:#3caee7; }
.jour .pts i.p-le-ptit-cityclub { background:#62b96e; } .jour .pts i.p-cine-seniors { background:#e06889; }
.jour .pts i.p-relax { background:#9178df; } .jour .pts i.p-autre { background:var(--doux); }

/* v0.9.7 — Accueil : « Réserver » dans un cartouche, comme sur la fiche film (règle : pas de flèche dans les cartouches) */
.seance .acheter { display:inline-block; margin-top:8px; padding:5px 14px; border:1px solid var(--or); border-radius:999px; background:rgba(14,13,11,.45); font-size:11px; letter-spacing:.12em; text-transform:uppercase; text-shadow:none; transition:background .2s, color .2s; }
.seance .acheter:hover { background:var(--or); color:var(--nuit) !important; }

/* ==================================================================
 * v1.0.0 — Bouton jour / nuit (à droite du bandeau) et version JOUR
 * La version jour ne change que les couleurs, jamais la mise en page.
 * ================================================================== */
.mode { align-self:center; flex:none; position:relative; width:34px; height:34px; padding:0; border:1px solid #3a352b; border-radius:50%; background:transparent; color:var(--or-clair); cursor:pointer; margin-left:-14px; }
.mode:hover { border-color:var(--or); }
.mode svg { position:absolute; left:50%; top:50%; width:18px; height:18px; margin:-9px 0 0 -9px; transition:transform .5s cubic-bezier(.2,.7,.2,1), opacity .35s; }
.mode .ico-soleil { fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }
.mode .ico-lune { fill:currentColor; }
/* En nuit on propose le soleil, en jour la lune */
.mode .ico-lune { opacity:0; transform:rotate(-90deg) scale(.4); }
html.mode-jour .mode .ico-soleil { opacity:0; transform:rotate(90deg) scale(.4); }
html.mode-jour .mode .ico-lune { opacity:1; transform:none; }
::view-transition-old(root), ::view-transition-new(root) { animation:none; mix-blend-mode:normal; }
@media (max-width: 900px) { .mode { margin-left:0; } }

/* ---------- Version jour : palette ---------- */
html.mode-jour {
	--or:#957a42; --or-clair:#7a6230; --nuit:#f5f1e8; --nuit-2:#ece6d9; --nuit-3:#e3dbca; --trait:#d6ccb8;
	--texte:#1d1a15; --doux:#6c6558;
	color-scheme:light;
}
html.mode-jour .bandeau { background:rgba(245,241,232,.9); }
html.mode-jour .logo-svg .m { fill:#1d1a15; }
html.mode-jour .logo-svg .p { fill:#957a42; }
html.mode-jour .mode:not(:hover), html.mode-jour .filtres a:not([class*="r-"]):not(.on):not(:hover), html.mode-jour .jours-fl:not(:hover), html.mode-jour .chips a.plus, html.mode-jour .timeline { border-color:#cfc4ae; }
/* Couleurs de rubriques écrites sur fond clair : un peu assombries pour rester lisibles (les fonds pleins ne changent pas) */
html.mode-jour .filtres a[class*="r-"]:not(.on) { color:color-mix(in srgb, var(--c) 72%, #000) !important; }
html.mode-jour .recherche-ages button:not(.on) { color:color-mix(in srgb, var(--c-ptit) 72%, #000); }

/* Accueil */
html.mode-jour .hero { background:
	radial-gradient(ellipse at 75% 30%, rgba(171,147,98,.24), transparent 55%),
	radial-gradient(ellipse at 10% 90%, rgba(196,66,47,.08), transparent 50%),
	linear-gradient(180deg, #faf7f0, #f5f1e8); }
html.mode-jour .hero::after { background-image:repeating-linear-gradient(0deg, #000 0 1px, transparent 1px 3px); opacity:.035; }
html.mode-jour .hero.avec-fond::before { background:
	linear-gradient(90deg, rgba(245,241,232,.88) 0%, rgba(245,241,232,.5) 38%, rgba(245,241,232,.55) 45%, rgba(245,241,232,.92) 58%, rgba(245,241,232,.92) 100%),
	linear-gradient(180deg, rgba(245,241,232,.25) 0%, rgba(245,241,232,0) 60%, #f5f1e8 100%),
	var(--fond) center / cover no-repeat; }
html.mode-jour .hero.avec-fond h1, html.mode-jour .hero.avec-fond .chapo { text-shadow:0 1px 14px rgba(245,241,232,.9); }
html.mode-jour .hero.avec-fond .seance { text-shadow:0 0 10px rgba(245,241,232,.95), 0 1px 2px rgba(245,241,232,.9); }
html.mode-jour .hero.avec-fond .chapo { color:#3a362e; }
html.mode-jour .seance .acheter { background:rgba(245,241,232,.7); }
@media (max-width: 900px) {
	html.mode-jour .hero.avec-fond::before { background:linear-gradient(180deg, rgba(245,241,232,.78) 0%, rgba(245,241,232,.7) 60%, #f5f1e8 100%), var(--fond) center / cover no-repeat; }
}

/* Textes */
html.mode-jour .canevasPage, html.mode-jour .canevasPage p, html.mode-jour .canevasPage li, html.mode-jour .fiche-resume, html.mode-jour .fiche-libre { color:#3a362e; }
html.mode-jour .resume { color:#4f493f !important; }
html.mode-jour .pied { color:#8a8375; }
html.mode-jour .recherche-tete input::placeholder { color:#a39b8c; }

/* Ombres et surfaces */
html.mode-jour .affiche { box-shadow:0 20px 40px -22px rgba(60,45,20,.45); }
html.mode-jour .film:hover .affiche { box-shadow:0 30px 50px -20px rgba(171,147,98,.55); }
html.mode-jour .fiche-affiche img { box-shadow:0 30px 70px rgba(60,45,20,.28); }
html.mode-jour .resume-complet, html.mode-jour .tag[data-info]:hover::after, html.mode-jour .tag[data-info]:focus::after { background:#fffdf8; border-color:#d6ccb8; box-shadow:0 18px 40px rgba(60,45,20,.18); }
html.mode-jour .tag[data-info]:hover::before, html.mode-jour .tag[data-info]:focus::before { border-bottom-color:#d6ccb8; }
html.mode-jour .recherche { background:rgba(245,241,232,.97); }
html.mode-jour .carte-bar .carte-table, html.mode-jour .carte-bar .carte-table td, html.mode-jour .canevasPage .infos-bloc { border-color:rgba(149,122,66,.45); }

/* Pied de page : photos voilées de clair au lieu de sombre */
html.mode-jour .lieu > div { text-shadow:0 1px 10px rgba(245,241,232,.85); }
html.mode-jour .lieu > div::after { background:
	repeating-linear-gradient(0deg, rgba(0,0,0,.035) 0 1px, transparent 1px 3px),
	linear-gradient(90deg, rgba(245,241,232,.94) 0%, rgba(245,241,232,.82) 55%, rgba(245,241,232,.64) 100%); }
@media (max-width: 420px) { .logo { width:168px; } .billet { padding:7px 12px; } .mode { width:32px; height:32px; } }

/* v1.0.3 — Couleurs de rubriques plus denses partout (cartouches, filtres, points), jour comme nuit : même teinte, saturation ×1,7 */
:root { --c-films:#c59c48; --c-rencontre:#f4603b; --c-musique:#3caee7; --c-ptit:#62b96e; --c-senior:#e06889; --c-relax:#9178df; }

/* Version jour : plus de contraste sur les images, plus de doré */
html.mode-jour .hero.avec-fond::before { background:
	radial-gradient(ellipse at 75% 30%, rgba(171,147,98,.30), transparent 60%),
	linear-gradient(90deg, rgba(245,241,232,.80) 0%, rgba(245,241,232,.22) 36%, rgba(245,241,232,.28) 45%, rgba(240,232,214,.86) 58%, rgba(240,232,214,.86) 100%),
	linear-gradient(180deg, rgba(245,241,232,.1) 0%, rgba(245,241,232,0) 60%, #f5f1e8 100%),
	var(--fond) center / cover no-repeat;
	filter:saturate(1) contrast(1.08); }
@media (max-width: 900px) {
	html.mode-jour .hero.avec-fond::before { background:linear-gradient(180deg, rgba(245,241,232,.62) 0%, rgba(240,232,214,.6) 60%, #f5f1e8 100%), var(--fond) center / cover no-repeat; }
}
html.mode-jour .lieu > div::after { background:
	repeating-linear-gradient(0deg, rgba(0,0,0,.04) 0 1px, transparent 1px 3px),
	linear-gradient(90deg, rgba(245,241,232,.9) 0%, rgba(240,232,214,.8) 50%, rgba(236,226,204,.3) 100%); }
html.mode-jour .kicker { color:var(--or-clair); font-weight:600; }
html.mode-jour .lieu > div::before { filter:saturate(1) contrast(1.08); }
html.mode-jour .lieu { background:rgba(149,122,66,.55); border-top-color:rgba(149,122,66,.55); }
html.mode-jour .bandeau { border-bottom-color:rgba(149,122,66,.4); }
html.mode-jour .timeline { border-left-color:rgba(149,122,66,.55); }
html.mode-jour .heure { color:var(--or-clair); }
html.mode-jour .seance::before { background:#f0e4c8; }
html.mode-jour .jours-car { border-bottom-color:rgba(149,122,66,.4); }
html.mode-jour .canevasPage hr, html.mode-jour .fiche-seances, html.mode-jour .fiche-seances li { border-color:rgba(149,122,66,.35); }
html.mode-jour .hero.avec-fond h1 { text-shadow:0 1px 18px rgba(245,241,232,.95); }

/* v1.0.7 — Jour : pas d'ombre claire sur le texte du bloc du haut (à juger sans) */
html.mode-jour .hero.avec-fond h1, html.mode-jour .hero.avec-fond .chapo, html.mode-jour .hero.avec-fond .seance { text-shadow:none; }

/* v1.0.9 — Bulles des étiquettes en position fixe (JS dans footer.php) : plus jamais coupées par l'affiche ou le bord de l'écran */
.tag[data-info]:hover::after, .tag[data-info]:focus::after, .tag[data-info]:hover::before, .tag[data-info]:focus::before { content:none; display:none; }
.bulle { position:fixed; z-index:300; max-width:min(240px, calc(100vw - 16px)); padding:10px 12px; border-radius:6px; border:1px solid #3a352b;
	background:#1a1814; color:var(--texte); box-shadow:0 12px 30px rgba(0,0,0,.55); pointer-events:none;
	font-size:12px; font-weight:400; line-height:1.45; letter-spacing:0; text-transform:none; text-shadow:none; white-space:normal; }
.bulle[hidden] { display:none; }
.bulle::before { content:""; position:absolute; left:var(--fl, 14px); top:-6px; border:5px solid transparent; border-top:0; border-bottom-color:#3a352b; }
.bulle.dessus::before { top:auto; bottom:-6px; border:5px solid transparent; border-bottom:0; border-top-color:#3a352b; }
html.mode-jour .bulle { background:#fffdf8; border-color:#d6ccb8; box-shadow:0 18px 40px rgba(60,45,20,.18); }
html.mode-jour .bulle::before { border-bottom-color:#d6ccb8; }
html.mode-jour .bulle.dessus::before { border-bottom-color:transparent; border-top-color:#d6ccb8; }

/* v1.0.10 — Titre de page à la même taille que les titres de section (ex. LE LIEU = L’Équipe) */
.canevasPage h1 { font-size:64px; font-weight:300; line-height:1; letter-spacing:0; margin:0 0 26px; }
@media (max-width: 700px) { .canevasPage h1 { font-size:48px; } }

/* ==================================================================
 * ZÉLIE 0.1.0 — mise en œuvre des « Consignes de design » (27.10.2026)
 * Ce qui suit remplace l'habillage de Salle obscure là où les consignes
 * l'ont décidé. Les points encore « proposés » ou « ouverts » (palette
 * du texte, échelle typographique, ornements) ne sont pas appliqués.
 * ================================================================== */

/* §2 — Police unique : Aileron (CC0, @fontsource/aileron 5.3.0), hébergée dans le thème.
 * Graisses chargées : 300, 400, 600 (choix provisoire, l'échelle typographique est encore ouverte). */
@font-face { font-family:"Aileron"; font-style:normal; font-weight:300; font-display:swap;
	src:url("assets/fonts/aileron-latin-300-normal.woff2") format("woff2"), url("assets/fonts/aileron-latin-300-normal.woff") format("woff"); }
@font-face { font-family:"Aileron"; font-style:normal; font-weight:400; font-display:swap;
	src:url("assets/fonts/aileron-latin-400-normal.woff2") format("woff2"), url("assets/fonts/aileron-latin-400-normal.woff") format("woff"); }
@font-face { font-family:"Aileron"; font-style:normal; font-weight:600; font-display:swap;
	src:url("assets/fonts/aileron-latin-600-normal.woff2") format("woff2"), url("assets/fonts/aileron-latin-600-normal.woff") format("woff"); }
body.nuit, .carte-bar, .recherche-tete input, .recherche-ages button { font-family:"Aileron", "Helvetica Neue", Helvetica, Arial, sans-serif; }

/* §1 — Largeur maximale du site : 1920 px. Au-delà, marges de fond de chaque côté (comme le masquage en salle). */
html { --marge:#070706; background:var(--marge); }
html.mode-jour { --marge:#e8e2d5; }
body.nuit { max-width:1920px; margin:0 auto; min-height:100vh; }

/* §3.2 — Rubriques : 5 teintes de même luminosité et saturation (OKLCH 0,76 / 0,12), Films du mois neutre.
 * --c-*  : variante claire (étiquettes dans les deux modes ; filtres et points en nuit)
 * --cf-* : variante foncée (filtres et points en jour) */
:root {
	--c-films:#9b9487; --c-rencontre:#ee9a69; --c-musique:#35c5db; --c-ptit:#6dc88f; --c-senior:#ea91bc; --c-relax:#93adfe;
	--cf-films:#6c6558; --cf-rencontre:#a55725; --cf-musique:#007887; --cf-ptit:#187c49; --cf-senior:#a2507a; --cf-relax:#5268b2;
}
/* Filtres */
.filtres a.r-films-du-mois { --c:var(--c-films); --cf:var(--cf-films); } .filtres a.r-rencontres { --c:var(--c-rencontre); --cf:var(--cf-rencontre); }
.filtres a.r-musique { --c:var(--c-musique); --cf:var(--cf-musique); } .filtres a.r-le-ptit-cityclub { --c:var(--c-ptit); --cf:var(--cf-ptit); }
.filtres a.r-cine-seniors { --c:var(--c-senior); --cf:var(--cf-senior); } .filtres a.r-relax { --c:var(--c-relax); --cf:var(--cf-relax); }
html.mode-jour .filtres a[class*="r-"]:not(.on) { color:var(--cf) !important; border-color:color-mix(in srgb, var(--cf) 45%, transparent); }
html.mode-jour .filtres a[class*="r-"]:hover { border-color:var(--cf); }
html.mode-jour .filtres a[class*="r-"].on { background:var(--cf); border-color:var(--cf); color:var(--nuit) !important; }
/* Points de la bande des jours (remplacent les valeurs saturées codées en dur de Salle obscure 1.0.3) */
.jour .pts i { background:var(--c-films); }
.jour .pts i.p-rencontres { background:var(--c-rencontre); } .jour .pts i.p-musique { background:var(--c-musique); }
.jour .pts i.p-le-ptit-cityclub { background:var(--c-ptit); } .jour .pts i.p-cine-seniors { background:var(--c-senior); }
.jour .pts i.p-relax { background:var(--c-relax); } .jour .pts i.p-autre { background:var(--doux); }
html.mode-jour .jour .pts i { background:var(--cf-films); }
html.mode-jour .jour .pts i.p-rencontres { background:var(--cf-rencontre); } html.mode-jour .jour .pts i.p-musique { background:var(--cf-musique); }
html.mode-jour .jour .pts i.p-le-ptit-cityclub { background:var(--cf-ptit); } html.mode-jour .jour .pts i.p-cine-seniors { background:var(--cf-senior); }
html.mode-jour .jour .pts i.p-relax { background:var(--cf-relax); } html.mode-jour .jour .pts i.p-autre { background:var(--doux); }
/* Âges de la recherche (P'tit CityClub) */
html.mode-jour .recherche-ages button:not(.on) { color:var(--cf-ptit); border-color:color-mix(in srgb, var(--cf-ptit) 50%, transparent); }

/* §4.1 — Affiches : déformation légère (≤ 4 %) avant recadrage (script dans footer.php).
 * Le script pose --zw / --zh / --zx / --zy (étirement) ; object-fit:cover recadre ce qui dépasse encore. */
.affiche img, .fiche-affiche img { transform-origin:50% 50%; }
.affiche img.z-def { inset:auto; max-width:none; max-height:none; left:50%; top:50%; width:calc(100% * var(--zw, 1)); height:calc(100% * var(--zh, 1)) !important; transform:translate(-50%, -50%) scale(var(--zx, 1), var(--zy, 1)); }
.fiche-affiche { position:sticky; }
.fiche-affiche .fiche-cadre { position:relative; aspect-ratio:1363/1920; overflow:hidden; border-radius:6px; box-shadow:0 30px 80px rgba(0,0,0,.6); background:var(--nuit-3); }
.fiche-affiche .fiche-cadre img { position:absolute; inset:0; width:100%; height:100% !important; aspect-ratio:auto; object-fit:cover; border-radius:0; box-shadow:none; }
.fiche-affiche .fiche-cadre img.z-def { inset:auto; max-width:none; max-height:none; left:50%; top:50%; width:calc(100% * var(--zw, 1)); height:calc(100% * var(--zh, 1)) !important; transform:translate(-50%, -50%) scale(var(--zx, 1), var(--zy, 1)); }
html.mode-jour .fiche-affiche .fiche-cadre { box-shadow:0 30px 70px rgba(60,45,20,.28); }

/* §5 — Accueil : photo seule en haut, bloc « Aujourd'hui » sur fond uni, rappel du bas de l'image, puis les dates.
 * Hauteurs calculées par le script de front-page.php (nombre d'or, garde-fous). */
#sonde { position:fixed; top:0; left:0; width:1px; height:100vh; height:100svh; visibility:hidden; pointer-events:none; }
.ecran { --photoH:0px; --basH:0px; --extra:0px; }
.morceau { position:relative; overflow:hidden; background:var(--nuit-2); }
.morceau.haut { height:var(--photoH); }
.morceau.haut img { display:block; width:100%; height:100% !important; object-fit:cover; object-position:50% 50%; }
.morceau.bas { height:var(--basH); }
.morceau.bas img { position:absolute; left:0; bottom:0; display:block; width:100%; height:auto !important; }
.auj { position:relative; display:grid; grid-template-columns:1.2fr 1fr; gap:5vw; align-items:center; padding:calc(28px + var(--extra) / 2) 4vw; background:var(--nuit); }
.auj .kicker { color:var(--or-clair); }
.auj h1 { font-size:clamp(38px, 4.6vw, 84px); line-height:.98; font-weight:300; letter-spacing:-.02em; margin:14px 0 16px; }
.auj h1 .logo-titre { display:inline-block; height:.73em; width:auto; vertical-align:-.017em; fill:var(--or-clair); }
.auj .chapo { max-width:520px; color:var(--doux); font-size:16px; margin:0; }
.auj .timeline { gap:18px; }
.auj .heure { font-size:28px; font-weight:300; line-height:1.15; }
.auj .seance h3 { font-size:16px; }
/* Le bloc des cartouches et des dates suit directement (pas de titre « À l'affiche ») */
.accueil-programme { padding-top:26px; }
html.mode-jour .auj { background:var(--nuit); }
/* Téléphone (< 700 px) : photo fixe en 1,78:1, pas de rappel, séances côte à côte qui défilent au doigt */
@media (max-width: 699px) {
	.morceau.haut { height:auto; aspect-ratio:1.78 / 1; }
	.morceau.bas { display:none; }
	.auj { grid-template-columns:1fr; gap:22px; padding:24px 4vw; }
	.auj .timeline { flex-direction:row; border-left:0; padding-left:0; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; align-self:start; }
	.auj .timeline::-webkit-scrollbar { display:none; }
	.auj .seance { flex:1 0 150px; border-top:1px solid var(--trait); padding-top:10px; scroll-snap-align:start; }
	.auj .seance::before { display:none; }
	.auj .heure { font-size:22px; }
	.auj .seance h3 { font-size:14px; }
}
@media (min-width: 700px) and (max-width: 899px) {
	.auj { grid-template-columns:1fr; gap:28px; }
}

/* ==================================================================
 * ZÉLIE 0.1.3 — blocs film « suisses » : ni lueur, ni coins arrondis ;
 * séances en liste à filets (inspirée de la carte du bar), 3 au plus, puis « +X ».
 * ================================================================== */
.affiche, .fiche-affiche .fiche-cadre, .resume-complet { border-radius:0; }
.affiche, html.mode-jour .affiche, .film:hover .affiche, html.mode-jour .film:hover .affiche, .fiche-affiche .fiche-cadre { box-shadow:none; }
.resume-complet { box-shadow:none; }
.film .meta { margin-bottom:10px; }
.seances-film { list-style:none; margin:0; padding:0; border-top:1px solid var(--filet); font-size:13px; line-height:1.35; --filet:rgba(171,147,98,.45); }
.seances-film li { border-bottom:1px solid var(--filet); }
.seances-film a { display:flex; justify-content:space-between; gap:12px; padding:5px 0 4px; color:var(--texte) !important; }
.seances-film .sf-heure { white-space:nowrap; font-variant-numeric:tabular-nums; }
.seances-film a:hover { color:var(--or-clair) !important; }
.seances-plus { display:inline-block; margin-top:6px; font-size:12px; color:var(--doux) !important; }
.seances-plus:hover { color:var(--or-clair) !important; }
html.mode-jour .seances-film { --filet:rgba(149,122,66,.35); }
html.mode-jour .seances-film a:hover, html.mode-jour .seances-plus:hover { color:var(--or) !important; }
@media (max-width: 560px) { .seances-film { font-size:11.5px; } .seances-film a { gap:6px; } }

/* Zélie 0.1.4 — menu sur fond uni (consignes §5.1 : plus de voile) : ni transparence ni flou. */
.bandeau, html.mode-jour .bandeau { background:var(--nuit); -webkit-backdrop-filter:none; backdrop-filter:none; }

/* Zélie 0.1.5 — séances d'« Aujourd'hui » comme la maquette : places et « Réserver » sur la même ligne. */
.auj .ligne { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:4px; }
.auj .ligne .places, .auj .ligne .meta { margin:0; }

/* ==================================================================
 * ZÉLIE 0.1.9 — cartouches en aplat (piste 3 retenue) : rectangles pleins,
 * ni contour ni coins arrondis. Filtres en teinte de leur rubrique, élément
 * actif et actions (Réserver, Billetterie) en or plein. En jour, l'or plein
 * est l'or foncé (#7a6230) pour garder un contraste d'au moins 4,5:1.
 * ================================================================== */
.filtres a, html.mode-jour .filtres a { --a:var(--texte); border:0 !important; border-radius:0; padding:9px 14px; background:color-mix(in srgb, var(--a) 12%, var(--nuit)); color:var(--a) !important; }
.filtres a[class*="r-"] { --a:var(--c); background:color-mix(in srgb, var(--a) 16%, var(--nuit)); }
html.mode-jour .filtres a[class*="r-"] { --a:color-mix(in srgb, var(--cf) 85%, #000); background:color-mix(in srgb, var(--cf) 14%, var(--nuit)); }
.filtres a:hover { color:var(--a) !important; background:color-mix(in srgb, var(--a) 28%, var(--nuit)); }
html.mode-jour .filtres a[class*="r-"]:hover { background:color-mix(in srgb, var(--cf) 26%, var(--nuit)); }
.filtres a.on, .filtres a[class*="r-"].on { background:var(--or); color:var(--nuit) !important; }
html.mode-jour .filtres a.on, html.mode-jour .filtres a[class*="r-"].on { background:var(--or-clair); color:var(--nuit) !important; }
.jour { border-radius:0; }
html.mode-jour .jour.on { background:var(--or-clair); }
.tag { border-radius:0; }
.billet, .seance .acheter, html.mode-jour .seance .acheter, .fiche-seances .btn { border:0; border-radius:0; background:var(--or); color:var(--nuit) !important; }
.billet:hover, .seance .acheter:hover, .fiche-seances .btn:hover { background:var(--or-clair); color:var(--nuit) !important; }
html.mode-jour .billet, html.mode-jour .seance .acheter, html.mode-jour .fiche-seances .btn { background:var(--or-clair); }
html.mode-jour .billet:hover, html.mode-jour .seance .acheter:hover, html.mode-jour .fiche-seances .btn:hover { background:#5f4c25; }
.recherche-ages button { border:0; border-radius:0; background:color-mix(in srgb, var(--c-ptit) 16%, var(--nuit)); }
html.mode-jour .recherche-ages button:not(.on) { color:color-mix(in srgb, var(--cf-ptit) 85%, #000); background:color-mix(in srgb, var(--cf-ptit) 14%, var(--nuit)); }
.recherche-ages button.on { background:var(--c-ptit); }

/* ==================================================================
 * ZÉLIE 0.2.0 — corrections du 28.10.2026
 * ================================================================== */

/* Bloc « Aujourd'hui » : le texte de gauche s'aligne en haut (même axe horizontal que la 1re séance). */
.auj > div:first-child { align-self:start; }

/* Cartouches des rubriques un peu moins hauts. */
.filtres a, html.mode-jour .filtres a { padding:6px 12px; }

/* Cartouche sélectionné : aplat de sa propre couleur, plus d'or.
 * « Tout » (sans rubrique) : aplat de la couleur du texte. */
.filtres a.on { background:var(--texte); color:var(--nuit) !important; }
.filtres a[class*="r-"].on { background:var(--c); color:#0e0d0b !important; }
html.mode-jour .filtres a.on { background:var(--texte); color:var(--nuit) !important; }
html.mode-jour .filtres a[class*="r-"].on { background:var(--cf); color:var(--nuit) !important; }

/* Jour : l'or des aplats (Billetterie, Réserver, jour choisi, puces au survol) devient l'or de la nuit #ab9362,
 * avec texte noir chaud #0e0d0b (6,55:1). Remplace l'or foncé #7a6230 de la 0.1.9. */
html.mode-jour .billet, html.mode-jour .seance .acheter, html.mode-jour .fiche-seances .btn { background:#ab9362; color:#0e0d0b !important; }
html.mode-jour .billet:hover, html.mode-jour .seance .acheter:hover, html.mode-jour .fiche-seances .btn:hover { background:#c4a86e; color:#0e0d0b !important; }
html.mode-jour .jour.on { background:#ab9362; color:#0e0d0b !important; }
html.mode-jour .jour.on b { color:#0e0d0b; }
html.mode-jour .jour.on .pts i { box-shadow:0 0 0 1.5px #ab9362; }
html.mode-jour .chips a:hover { background:#ab9362; color:#0e0d0b !important; }

/* Fiche film, colonne unique (≤ 900 px) : l'affiche défile avec la page (la règle sticky de la 0.1.0 l'emportait). */
@media (max-width: 900px) { .fiche-affiche { position:static; } }

/* Fiche film : plus aucune ombre portée sur l'affiche (restes de Salle obscure en version jour). */
html.mode-jour .fiche-affiche .fiche-cadre, html.mode-jour .fiche-affiche img, html.mode-jour .fiche-affiche .fiche-cadre img { box-shadow:none; }

/* Téléphone : pas de zoom sur les affiches (le survol reste « collé » après un toucher). */
@media (max-width: 699px) { .film:hover .affiche { transform:none; } }

/* Zélie 0.2.1 — Carte de film en colonne flex : les marges ne fusionnent plus, ce qui permet au script
 * du pied de page d'aligner exactement les listes de séances d'une même rangée. */
.film { display:flex; flex-direction:column; }
.film .seances-plus { align-self:flex-start; }
/* Pastille de rubrique après la date, collée au texte */
.seances-film .sf-jour .pastille { margin-left:5px; }

/* ==================================================================
 * ZÉLIE 0.2.2 — résumé déroulé sur place, bulles des étiquettes suissisées
 * ================================================================== */
/* Résumé : plus de copie en cadre ; le texte se déroule dans la carte (script dans footer.php). */
.resume-complet, .resume-boite:hover .resume-complet { display:none !important; }
.film.ouvert { position:relative; z-index:4; background:var(--nuit); padding-bottom:20px; }
.film.ouvert .resume { display:block !important; -webkit-line-clamp:unset !important; overflow:visible; color:var(--texte) !important; }
.resume { cursor:default; }
@media (hover: none) { .resume { cursor:pointer; } }

/* Bulles des étiquettes : aplat inversé (texte clair sur sombre devient sombre sur clair), sans cadre, sans ombre, sans coins arrondis ni pointe. */
.bulle, html.mode-jour .bulle { border:0; border-radius:0; box-shadow:none; background:var(--texte); color:var(--nuit); padding:10px 12px; font-size:12px; line-height:1.45; }
.bulle::before, .bulle.dessus::before, html.mode-jour .bulle::before, html.mode-jour .bulle.dessus::before { content:none; display:none; }

/* ==================================================================
 * ZÉLIE 0.2.3 — résumé animé, bulles des étiquettes d'affiche en bandeau
 * ================================================================== */
/* L'espacement du bas de la carte ouverte est piloté par l'animation (footer.php). */
.film.ouvert { padding-bottom:0; }
.film:not(.ouvert) .resume, .film.ouvert .resume { transition:color .32s ease; }
/* Bulle d'une étiquette posée sur une affiche : bandeau sur toute la largeur de l'affiche, sous l'étiquette, sans déborder. */
.bulle.bandeau { position:absolute; left:0; right:0; width:auto; max-width:none; z-index:5; padding:10px 12px; }

/* Zélie 0.2.4 — Bulles des étiquettes dans la couleur du mode : fond de page et texte du mode (sombre la nuit, clair le jour). */
.bulle, html.mode-jour .bulle { background:var(--nuit); color:var(--texte); }

/* ==================================================================
 * ZÉLIE 0.2.5 — « pied suisse » pour les 3 blocs du bas (lieu, bar, membre). Par défaut depuis 0.3.0.
 * Même logique que l'accueil : la photo seule, puis le texte sur fond uni. Ni voile, ni trame, ni ombre.
 * ================================================================== */
.lieu, html.mode-jour .lieu { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:44px 26px; padding:56px 4vw 64px; background:var(--nuit); border-top:1px solid var(--trait); }
html.mode-jour .lieu { border-top-color:rgba(149,122,66,.4); }
.lieu > div, html.mode-jour .lieu > div { padding:0; background:transparent; overflow:visible; isolation:auto; text-shadow:none; }
.lieu > div::after, html.mode-jour .lieu > div::after { content:none; display:none; }
.lieu > div::before, html.mode-jour .lieu > div::before { position:static; inset:auto; z-index:auto; display:block; aspect-ratio:3 / 2; margin:0 0 22px; filter:none; background-size:cover; background-position:center; }
.lieu-membre::before { background-size:cover; background-position:70% 40%; }
.lieu h4 { font-size:11.5px; letter-spacing:.14em; font-weight:400; color:var(--doux); margin:0 0 10px; }
.lieu .gros { font-size:28px; font-weight:300; line-height:1.15; color:var(--texte); margin:0 0 14px; }
.lieu p { color:var(--doux); margin:0 0 8px; }
.lieu a { color:var(--or-clair) !important; }
@media (max-width: 900px) { .lieu, html.mode-jour .lieu { grid-template-columns:1fr; } .lieu > div::before { aspect-ratio:16 / 9; } }

/* Zélie 0.2.6 — Carte au résumé ouvert : son fond déborde de 13 px de chaque côté (la moitié de la gouttière de la grille),
 * pour garder une marge quand elle passe par-dessus le pied de page ou le film du dessous. Aplat de la couleur du fond, sans changer la mise en page. */
.film.ouvert { box-shadow:0 0 0 13px var(--nuit); }

/* Zélie 0.2.7 — Marge de la carte ouverte portée à 20 px ; photos du « pied suisse » au format 1,85:1 (aussi sur téléphone). */
.film.ouvert { box-shadow:0 0 0 20px var(--nuit); }
.lieu > div::before, html.mode-jour .lieu > div::before { aspect-ratio:1.85 / 1; }
@media (max-width: 900px) { .lieu > div::before { aspect-ratio:1.85 / 1; } }

/* ==================================================================
 * ZÉLIE 0.2.8 — pages fixes (Le lieu, Le bar, Infos pratiques…)
 * ================================================================== */
/* Titres de page en casse normale (« Le lieu », pas « LE LIEU »). */
.canevasPage h1 { text-transform:none; }
/* Grilles d'infos (équipe, soutiens…) : toute la largeur de la page, 5 colonnes au plus, 200 px au moins, gouttière de la grille des films. */
.canevasPage .infos-grille { --col:max(200px, calc((100% - 4 * 26px) / 5)); max-width:none; column-gap:26px; grid-template-columns:repeat(auto-fill, minmax(var(--col), 1fr)); }
.canevasPage .infos-bloc.infos-large { --col:max(200px, calc((100% - 4 * 26px) / 5)); column-gap:26px; grid-template-columns:repeat(auto-fill, minmax(var(--col), 1fr)); }
/* Carte du bar : lignes plus longues sur grand écran ; Faim à droite de Soif dès 1200 px. */
.carte-bar:not(.carte-tarifs) { max-width:none; }
.carte-bar:not(.carte-tarifs) .carte-colonnes { gap:0 26px; }
@media (min-width: 1200px) {
	.carte-bar:not(.carte-tarifs) { display:grid; grid-template-rows:auto auto; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); column-gap:52px; }
}

/* ==================================================================
 * ZÉLIE 0.2.9 — boutons d'action en cadre, carte du bar
 * ================================================================== */
/* Billetterie et Réserver : cadre or de 1 px (plus d'aplat plein), coins droits, même hauteur et même typographie que les cartouches de rubriques (≈ 30,6 px).
 * Survol : aplat or #ab9362, texte noir chaud. */
.billet, .seance .acheter, .fiche-seances .btn,
html.mode-jour .billet, html.mode-jour .seance .acheter, html.mode-jour .fiche-seances .btn {
	display:inline-block; border:1px solid var(--or); border-radius:0; background:transparent; color:var(--or-clair) !important;
	padding:5px 11px; font-size:12px; line-height:1.55; letter-spacing:.1em; text-transform:uppercase; }
.billet:hover, .seance .acheter:hover, .fiche-seances .btn:hover,
html.mode-jour .billet:hover, html.mode-jour .seance .acheter:hover, html.mode-jour .fiche-seances .btn:hover { background:#ab9362; border-color:#ab9362; color:#0e0d0b !important; }
/* Carte du bar : taux d'alcool calé à droite. */
.carte-bar .carte-table td.carte-degre { text-align:right; }

/* ==================================================================
 * ZÉLIE 0.3.1 — Carte d'accès (Infos pratiques, shortcode [cityclub_carte])
 * ================================================================== */
.page .canevasPage > .carte-acces { max-width:none !important; }
.carte-acces { display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 1fr); gap:26px; margin:0 0 44px; }
.carte-map { aspect-ratio:1.85 / 1; background:var(--nuit-2); font-family:inherit; }
.carte-itin-titre { font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--doux) !important; margin:0 0 12px; }
.carte-itin-liens { display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin:0 0 16px; }
.canevasPage a.carte-btn { display:inline-block; border:1px solid var(--or); border-radius:0; background:transparent; color:var(--or-clair) !important;
	padding:5px 11px; font-size:12px; line-height:1.55; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; }
.canevasPage a.carte-btn span { color:var(--doux); }
.canevasPage a.carte-btn:hover { background:#ab9362; border-color:#ab9362; color:#0e0d0b !important; }
.canevasPage a.carte-btn:hover span { color:#0e0d0b; }
.carte-itin-note { font-size:13px; line-height:1.5; color:var(--doux) !important; margin:0; max-width:36ch; }
@media (max-width: 900px) {
	.carte-acces { grid-template-columns:1fr; }
	.carte-map { aspect-ratio:4 / 3; }
	.carte-itin-liens { flex-direction:row; flex-wrap:wrap; }
}
/* Repère du cinéma : point or et nom, sans ombre */
.carte-repere { display:flex; align-items:center; gap:8px; pointer-events:none; }
.carte-repere i { display:block; width:14px; height:14px; border-radius:50%; background:#ab9362; box-shadow:0 0 0 3px var(--nuit); }
.carte-repere span { padding:3px 6px; background:var(--nuit); color:var(--texte); font-size:13px; font-weight:600; line-height:1.2; white-space:nowrap; }
/* Commandes MapLibre suissisées : carrés, filet fin, ni ombre ni arrondi */
.carte-map .maplibregl-ctrl-group { border-radius:0; box-shadow:none !important; background:var(--nuit); border:1px solid var(--trait); }
.carte-map .maplibregl-ctrl-group button { width:32px; height:32px; }
.carte-map .maplibregl-ctrl-group button + button { border-top:1px solid var(--trait); }
html:not(.mode-jour) .carte-map .maplibregl-ctrl-icon { filter:invert(1) opacity(.75); }
.carte-map .maplibregl-ctrl-attrib, .carte-map .maplibregl-ctrl-attrib.maplibregl-compact { background:var(--nuit); color:var(--doux); border-radius:0; font-size:11px; }
.carte-map .maplibregl-ctrl-attrib a { color:var(--doux) !important; }
html:not(.mode-jour) .carte-map .maplibregl-ctrl-attrib-button { filter:invert(1) opacity(.75); }
.carte-map .maplibregl-cooperative-gesture-screen { background:color-mix(in srgb, var(--nuit) 80%, transparent); color:var(--texte); font-size:15px; }

/* ==================================================================
 * ZÉLIE 0.3.2 — carte plus basse, étiquettes à droite du titre (Aujourd'hui),
 * points des dates différenciés par la forme, « Tout » actif en or
 * ================================================================== */
/* Carte d'accès moins haute */
.carte-map { aspect-ratio:2.4 / 1; }
@media (max-width: 900px) { .carte-map { aspect-ratio:16 / 9; } }

/* Bloc « Aujourd'hui » : étiquettes après le titre, sur la même ligne quand il y a la place */
.auj .seance h3 { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; }
.auj .seance h3 > a { order:1; }
.auj .seance h3 .tags { order:2; margin:0; }

/* « Tout » sélectionné : de nouveau en or (aplat #ab9362, texte noir chaud) */
.filtres a.on:not([class*="r-"]), html.mode-jour .filtres a.on:not([class*="r-"]) { background:#ab9362; color:#0e0d0b !important; }

/* Zélie 0.3.3 — Points de la bande des dates : formes de la 0.3.2 retirées (retour aux points ronds).
 * On joue sur l'intensité : Films du mois, la rubrique la plus fréquente, passe en gris discret
 * (nuit #6a6458, 3,31:1 ; jour #938b7c, 2,99:1) pour que les points des rubriques colorées ressortent. */
.jour .pts i, .jour .pts i.p-autre { background:#6a6458; }
html.mode-jour .jour .pts i, html.mode-jour .jour .pts i.p-autre { background:#938b7c; }
.jour .pts i.p-rencontres { background:var(--c-rencontre); } .jour .pts i.p-musique { background:var(--c-musique); }
.jour .pts i.p-le-ptit-cityclub { background:var(--c-ptit); } .jour .pts i.p-cine-seniors { background:var(--c-senior); }
.jour .pts i.p-relax { background:var(--c-relax); }
html.mode-jour .jour .pts i.p-rencontres { background:var(--cf-rencontre); } html.mode-jour .jour .pts i.p-musique { background:var(--cf-musique); }
html.mode-jour .jour .pts i.p-le-ptit-cityclub { background:var(--cf-ptit); } html.mode-jour .jour .pts i.p-cine-seniors { background:var(--cf-senior); }
html.mode-jour .jour .pts i.p-relax { background:var(--cf-relax); }

/* Zélie 0.3.4 — Points de la bande des dates : couleurs intensifiées (saturation OKLCH poussée à 0,17 au plus,
 * même teinte ; points seulement, les étiquettes et filtres gardent la charte). Musique et Relax, qui ne peuvent pas
 * gagner en saturation à la même luminosité, sont légèrement éclaircie (Musique) ou assombrie (Relax) en nuit.
 * Nuit : Rencontres #ff904a · Musique #04d5ee · P'tit #3ad07f · Seniors #ff7fc1 · Relax #6b89f9 (tous ≥ 6:1 sur le noir)
 * Jour : Rencontres #ae5002 · Musique #007887 (déjà au maximum) · P'tit #037d47 · Seniors #b43b7e · Relax #4862ce (tous ≥ 4,6:1) */
.jour .pts i.p-rencontres { background:#ff904a; } .jour .pts i.p-musique { background:#04d5ee; }
.jour .pts i.p-le-ptit-cityclub { background:#3ad07f; } .jour .pts i.p-cine-seniors { background:#ff7fc1; }
.jour .pts i.p-relax { background:#6b89f9; }
html.mode-jour .jour .pts i.p-rencontres { background:#ae5002; } html.mode-jour .jour .pts i.p-musique { background:#007887; }
html.mode-jour .jour .pts i.p-le-ptit-cityclub { background:#037d47; } html.mode-jour .jour .pts i.p-cine-seniors { background:#b43b7e; }
html.mode-jour .jour .pts i.p-relax { background:#4862ce; }

/* Zélie 0.3.5 — Résumé déroulé : la carte ouverte ne s'étire plus sur la hauteur de la rangée ;
 * son fond s'arrête toujours 25 px sous le dernier élément (5 px de marge intérieure + 20 px de débord). */
.film.ouvert { align-self:start; }

/* Zélie 0.3.7 — Police unique partout : les boutons et champs (qui n'héritent pas de la police par défaut)
 * et la carte MapLibre (qui impose « Helvetica Neue, Arial ») passent en Aileron. */
button, input, select, textarea { font-family:inherit; }
.carte-map.maplibregl-map, .carte-map .maplibregl-ctrl-attrib, .carte-map .maplibregl-cooperative-gesture-screen, .carte-repere { font-family:"Aileron", "Helvetica Neue", Helvetica, Arial, sans-serif; }


/* Zélie 0.3.10 — En-tête de l'accueil : images empilées, fondu vers le film de la séance survolée */
.morceau.haut img { position:absolute; inset:0; }
.morceau img.fondu { opacity:0; transition:opacity .7s ease; }
.morceau img.fondu.on { opacity:1; }
@media (prefers-reduced-motion: reduce) { .morceau img.fondu { transition:none; } }


/* Zélie 0.3.11 — Fiche film : affiche dans son vrai ratio (ni recadrage ni étirement), même largeur ; la hauteur suit l'affiche */
.fiche-affiche .fiche-cadre { aspect-ratio:auto; }
.fiche-affiche .fiche-cadre img { position:static; inset:auto; display:block; width:100%; height:auto !important; object-fit:contain; transform:none; }


/* Zélie 0.3.12 — Fiche film : bande-annonce sous l'affiche, même largeur, image du film en couverture */
.fiche-affiche .zelie-ba { margin-top:16px; max-width:none; border-radius:0; }
.zelie-ba img { opacity:1; transition:transform .8s cubic-bezier(.2,.6,.2,1); }
/* 0.3.13 : la règle générale « .fiche-affiche img » (ratio d'affiche 1363/1920) s'appliquait aussi à la couverture → image beaucoup trop zoomée. */
.fiche-affiche .zelie-ba img { aspect-ratio:auto; width:100%; height:100% !important; object-fit:cover; border-radius:0; box-shadow:none; }
.zelie-ba:hover img, .zelie-ba:focus-visible img { opacity:1; transform:scale(1.04); }
.zelie-ba:focus-visible { outline:2px solid var(--or); outline-offset:3px; }
.zelie-ba-voile { position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0) 60%); pointer-events:none; }
.zelie-ba-btn { position:absolute; left:14px; bottom:12px; display:flex; align-items:center; gap:10px; color:#fff; font-size:12px; letter-spacing:.12em; text-transform:uppercase; pointer-events:none; }
.zelie-ba-btn svg { width:34px; height:34px; flex:none; transition:transform .3s ease; }
.zelie-ba-btn circle { fill:none; stroke:#fff; stroke-width:1.2; }
.zelie-ba-btn path { fill:#fff; }
.zelie-ba:hover .zelie-ba-btn svg, .zelie-ba:focus-visible .zelie-ba-btn svg { transform:scale(1.1); }
.zelie-ba-lien { margin-top:16px; }
@media (prefers-reduced-motion: reduce) { .zelie-ba img, .zelie-ba-btn svg { transition:none; } }
/* Affiche + bande-annonce peuvent dépasser la hauteur d'un petit écran : la colonne ne reste plus collée en haut. */
@media (max-height: 880px) { .fiche-affiche { position:static; } }


/* Zélie 0.3.14 — Pages de rubrique : cartouches, titre, texte d'explication (taille du texte des pages fixes) ; Films du mois par mois */
.canevasPage .rubrique-tete { margin:30px 0 34px; }
.canevasPage .rubrique-tete h1 { margin:0 0 16px; }
.canevasPage .rubrique-texte { max-width:760px; margin:0; }
/* 0.3.15 : nom du mois distinct du titre de page — capitales espacées, filet au-dessus */
.canevasPage h2.rubrique-mois { font-size:30px; font-weight:300; line-height:1.1; letter-spacing:.08em; text-transform:uppercase; color:var(--or); margin:60px 0 24px; padding-top:14px; border-top:1px solid var(--trait); max-width:none; }
.canevasPage .rubrique-tete + h2.rubrique-mois { margin-top:20px; }
.page .canevasPage > h2.rubrique-mois { max-width:none !important; } /* filet sur toute la largeur de la grille */
@media (max-width: 700px) { .canevasPage h2.rubrique-mois { font-size:24px; } }


/* Zélie 0.3.17 — Rubrique choisie sur place (accueil, « À l'affiche ») : titre, texte et mois sous les dates */
.prog-resultats { transition:opacity .25s ease; }
.prog-resultats.chargement { opacity:.35; pointer-events:none; }
.accueil-programme .rubrique-tete, .canevasPage .prog-resultats > .rubrique-tete { margin:34px 0; }
.accueil-programme .rubrique-titre, .canevasPage h2.rubrique-titre { font-size:64px; font-weight:300; line-height:1; letter-spacing:0; text-transform:none; color:var(--texte); margin:0 0 16px; padding:0; }
.accueil-programme .rubrique-texte { font-size:22px; line-height:1.4; font-weight:300; color:var(--texte); max-width:760px; margin:0; }
.accueil-programme h2.rubrique-mois { font-size:30px; font-weight:300; line-height:1.1; letter-spacing:.08em; text-transform:uppercase; color:var(--or); margin:60px 0 24px; padding-top:14px; border-top:1px solid var(--trait); }
.accueil-programme .rubrique-tete + h2.rubrique-mois { margin-top:20px; }
@media (max-width: 700px) { .accueil-programme .rubrique-titre, .canevasPage h2.rubrique-titre { font-size:44px; } .accueil-programme h2.rubrique-mois { font-size:24px; } }

/* Zélie 0.3.18 — Page « À l'affiche » : la zone des résultats prend toute la largeur (elle était limitée à 760 px comme le texte, d'où 3 colonnes). */
.page .canevasPage > .prog-resultats { max-width:none !important; }

/* Zélie 0.3.22 — Lien « ← À l'affiche » des fiches (accueil#programme) : la grille ne passe pas sous le bandeau fixe. */
#programme { scroll-margin-top:calc(var(--wp-admin--admin-bar--height, 0px) + 88px); }

/* Zélie 0.3.23 — Fiche film affichée sur place, sous les dates (même logique que les rubriques) */
.prog-fiche { padding-top:8px; animation:zelie-fiche .3s ease; }
.prog-fiche:focus { outline:none; }
.prog-fiche .fiche { max-width:1200px; margin:0 auto; }
@keyframes zelie-fiche { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .prog-fiche { animation:none; } }