/*
Theme Name: CinéPalmes
Theme URI: https://cinepalmes.com
Author: Infinity Stratégie
Description: Thème cinéma pour CinéPalmes Saint-Denis et Sainte-Marie. Identité tirée du bâtiment : bardage aluminium bronze, enseigne écarlate, ouverture sur l'océan Indien. Conçu pour fonctionner avec l'extension Ciné 974 qui alimente les séances depuis les flux CinéOffice.
Version: 5.10.4
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cinepalmes
Tags: cinema, dark, custom-colors, custom-menu, featured-images, translation-ready
*/

/* ===========================================================================
   1. Tokens
   ------------------------------------------------------------------------
   Every colour is drawn from the building: bronze anodised cladding, the
   scarlet sign above the entrance, the Indian Ocean the foyer opens onto,
   the sand-white of the lobby.
   ======================================================================== */

:root{
	/* ---------------------------------------------------------------------
	   Charte graphique du réseau.

	   Le magenta est une couleur d'appel : elle ne supporte pas d'être
	   partout. Elle est donc réservée aux actions et à l'état sélectionné.
	   Tout le reste vit en gris et en blanc, ce qui laisse les affiches —
	   seule vraie couleur de la page — porter l'ambiance.
	   ------------------------------------------------------------------ */

	--cp-magenta:#E5005A;
	--cp-magenta-fonce:#B80048;
	--cp-magenta-clair:#FF5C92;
	--cp-magenta-voile:rgba(229,0,90,.08);

	--cp-blanc:#FFFFFF;
	--cp-gris-clair:#F2F2F5;
	--cp-sable:#F6EFEA;
	--cp-anthracite:#2B2B2B;
	--cp-gris:#6D6D6D;
	--cp-trait:rgba(43,43,43,.12);

	/* Anciens noms, conservés pour que rien ne casse. */
	--cp-marque:var(--cp-magenta);
	--cp-marque-clair:var(--cp-magenta-clair);
	--cp-ecarlate:var(--cp-magenta);
	--cp-rose:var(--cp-magenta);
	--cp-age:#B80048;
	--cp-nuit:var(--cp-blanc);
	--cp-nuit-2:var(--cp-gris-clair);
	--cp-nuit-3:var(--cp-sable);
	--cp-bronze:var(--cp-gris);
	--cp-bronze-clair:var(--cp-magenta);
	--cp-or:var(--cp-gris);
	--cp-brume:var(--cp-gris);
	--cp-ocean:var(--cp-sable);

	/* Rayons et ombres de la charte. */
	--cp-r:8px;
	--cp-r-s:4px;
	--cp-r-l:16px;
	--cp-r-xl:24px;
	--cp-radius:8px;
	--cp-ombre:0 4px 16px rgba(0,0,0,.06);
	--cp-ombre-forte:0 12px 40px rgba(0,0,0,.08);

	--cp-wrap:1180px;
	--cp-display:'Montserrat',system-ui,sans-serif;
	--cp-body:'Inter',system-ui,-apple-system,sans-serif;
	--cp-mono:'Inter',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
	margin:0;
	background:var(--cp-blanc);
	color:var(--cp-anthracite);
	font-family:var(--cp-body);
	font-size:16px;
	line-height:1.55;
	-webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button{font-family:inherit}

.cp-wrap{max-width:var(--cp-wrap);margin:0 auto;padding:0 clamp(1.1rem,4vw,2.5rem)}
.cp-sec{padding:3rem 0}
.cp-sec--rule{border-top:1px solid var(--cp-trait)}

.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link:focus{position:fixed;top:12px;left:12px;z-index:99;width:auto;height:auto;clip:auto;padding:.6rem 1rem;background:var(--cp-sable);color:var(--cp-nuit)}

/* Pare-soleil — the façade louvers, the theme's structural motif. */
.cp-louvers{
	position:absolute;inset:0;pointer-events:none;
	background:repeating-linear-gradient(90deg,transparent 0 26px,rgba(43,43,43,.045) 26px 27px);
}

.cp-hero .cp-louvers{
	background:repeating-linear-gradient(90deg,transparent 0 26px,rgba(255,255,255,.09) 26px 27px);
}

/* ===========================================================================
   2. Typography
   ======================================================================== */

.cp-eyebrow{
	margin:0 0 .5rem;
	font-family:var(--cp-display);
	font-size:.7rem;font-weight:600;
	letter-spacing:.14em;text-transform:uppercase;
	color:var(--cp-gris);
}

h1,h2,h3,h4{font-family:var(--cp-display);letter-spacing:-.02em;line-height:1.05;margin:0 0 .6rem}

.cp-h1{
	margin:0;
	font-size:clamp(2.4rem,7vw,4.6rem);
	font-weight:800;
	line-height:.9;letter-spacing:-.03em;
}

.cp-h2{margin:0 0 1.2rem;font-size:1.5rem;font-weight:700;font-stretch:88%}
.cp-h3{font-size:1.15rem;font-weight:700;font-stretch:90%}

.cp-sub{margin:.85rem 0 0;font-size:.95rem;color:var(--cp-brume);max-width:46ch}

.cp-meta{
	display:flex;flex-wrap:wrap;gap:.9rem;margin:0 0 1.1rem;
	font-family:var(--cp-mono);font-size:.68rem;
	letter-spacing:.04em;text-transform:uppercase;color:var(--cp-brume);
}

/* ===========================================================================
   3. Header
   ======================================================================== */

.cp-topbar{
	position:sticky;top:0;z-index:30;
	background:rgba(255,255,255,.94);
	backdrop-filter:blur(10px);
	border-bottom:1px solid var(--cp-trait);
}

.cp-topbar__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 0}

.cp-mark{display:flex;align-items:center;gap:.6rem}
.cp-mark__bar{width:4px;height:22px;background:var(--cp-ecarlate);flex:0 0 auto}
.cp-mark__txt{font-family:var(--cp-display);font-size:1.05rem;font-weight:800;text-transform:uppercase;letter-spacing:-.005em}
.cp-mark img{max-height:34px;width:auto}

.cp-nav ul{display:flex;gap:.15rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.cp-nav a{
	display:block;padding:.42rem .9rem;border-radius:99px;
	font-family:var(--cp-mono);font-size:.7rem;
	letter-spacing:.09em;text-transform:uppercase;
	color:var(--cp-brume);transition:color .18s,background .18s;
}
.cp-nav a:hover{color:var(--cp-anthracite);background:var(--cp-gris-clair)}
.cp-nav .current-menu-item>a{background:var(--cp-magenta);color:#fff}

.cp-burger{display:none;padding:.4rem .7rem;border:1px solid var(--cp-trait);border-radius:var(--cp-r);background:none;color:var(--cp-anthracite);cursor:pointer}

/* ===========================================================================
   4. Hero
   ======================================================================== */

.cp-hero{
	position:relative;
	padding:clamp(3rem,8vw,5.5rem) 0 3.25rem;
	overflow:hidden;
	border-bottom:0;
	/* Le dégradé magenta de la charte, réservé aux superpositions : c'est
	   le seul endroit du site où la couleur occupe toute la surface. */
	background:linear-gradient(135deg,var(--cp-magenta) 0%,var(--cp-magenta-clair) 100%);
	color:#fff;
}
.cp-hero::after{content:'';position:absolute;inset:auto 0 0 0;height:70%;background:linear-gradient(to top,rgba(27,70,82,.35),transparent)}
.cp-hero>*{position:relative;z-index:2}
.cp-hero .cp-louvers{z-index:1}
.cp-hero__mark{
	display:inline-block;width:64px;height:5px;margin-bottom:1.4rem;
	background:#fff;border-radius:99px;
}

.cp-hero .cp-eyebrow{color:rgba(255,255,255,.8)}
.cp-hero .cp-h1{color:#fff}
.cp-hero .cp-sub{color:rgba(255,255,255,.9);max-width:44ch}
.cp-hero .cp-striplabel{color:rgba(255,255,255,.75)}

/* Les pastilles d'horaires du hero s'inversent : blanches sur le magenta. */
.cp-hero .cp-time{
	background:rgba(255,255,255,.16);
	border-color:rgba(255,255,255,.35);
	color:#fff;
}
.cp-hero a.cp-time:hover{background:#fff;border-color:#fff;color:var(--cp-magenta);box-shadow:none}
.cp-hero .cp-time.is-soon{border-color:#fff;color:#fff}
.cp-hero .cp-badge{color:#fff}

/* Le sélecteur de salle suit. */
.cp-hero .cp-venues{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.2)}
.cp-hero .cp-venue{background:rgba(255,255,255,.12)}
.cp-hero .cp-venue:hover{background:rgba(255,255,255,.22)}
.cp-hero .cp-venue.is-active{background:#fff;box-shadow:inset 3px 0 0 var(--cp-magenta)}
.cp-hero .cp-venue b{color:#fff}
.cp-hero .cp-venue span{color:rgba(255,255,255,.75)}
.cp-hero .cp-venue.is-active b{color:var(--cp-anthracite)}
.cp-hero .cp-venue.is-active span{color:var(--cp-gris)}
.cp-hero__strip{margin-top:2rem}
.cp-striplabel{margin:0 0 .6rem;font-family:var(--cp-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cp-brume)}

/* ===========================================================================
   5. Venue switch
   ======================================================================== */

.cp-venues{
	display:grid;grid-template-columns:1fr 1fr;gap:1px;
	margin-top:2.25rem;
	background:var(--cp-trait);
	border:1px solid var(--cp-trait);
	border-radius:var(--cp-r);overflow:hidden;
}
.cp-venue{padding:.9rem 1.1rem;background:var(--cp-nuit-2);border:0;text-align:left;cursor:pointer;transition:background .18s}
.cp-venue:hover{background:var(--cp-nuit-3)}
.cp-venue.is-active{background:var(--cp-nuit-3);box-shadow:inset 3px 0 0 var(--cp-ecarlate)}
.cp-venue b{display:block;font-family:var(--cp-display);font-size:1rem;font-weight:700;color:var(--cp-anthracite)}
.cp-venue span{font-family:var(--cp-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cp-brume)}

/* ===========================================================================
   6. Film cards
   ======================================================================== */

.cp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:1.5rem 1.25rem}

.cp-card__poster{
	position:relative;display:flex;align-items:center;justify-content:center;
	aspect-ratio:2/3;margin-bottom:.6rem;overflow:hidden;
	border-radius:var(--cp-r-l);background:var(--cp-gris-clair);
	box-shadow:var(--cp-ombre);
	color:#2C3440;font-family:var(--cp-display);font-size:2rem;font-weight:800;
	transition:box-shadow .2s;
}
.cp-card__poster img{width:100%;height:100%;object-fit:cover}
.cp-card:hover .cp-card__poster{box-shadow:var(--cp-ombre-forte)}
.cp-card__title{font-family:var(--cp-display);font-size:1rem;font-weight:700;line-height:1.12}
.cp-card:hover .cp-card__title{color:var(--cp-marque-clair)}
.cp-card__meta{font-family:var(--cp-mono);font-size:.66rem;color:var(--cp-brume)}

/* Badges on a film page sit in a row above the title, at full size. */
.cp-film__badges{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 .9rem}
.cp-film__badges .cp-tag{position:static;font-size:.7rem;padding:.25rem .55rem}

/* A stack of status badges down the poster's left edge. */
.cp-card__tags{
	position:absolute;top:.5rem;left:.5rem;right:.5rem;z-index:2;
	display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;
	pointer-events:none;
}

.cp-tag{
	max-width:100%;
	padding:.2rem .45rem;
	background:var(--cp-rose);color:#FFFFFF;
	font-family:var(--cp-mono);font-size:.58rem;font-weight:600;
	letter-spacing:.09em;text-transform:uppercase;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.cp-tag--preview{background:var(--cp-bronze);color:#FFFFFF}
.cp-tag--excl{background:rgba(43,43,43,.55);border:1px solid var(--cp-bronze);color:var(--cp-bronze-clair)}
.cp-tag--custom{background:var(--cp-anthracite);border:0;color:#fff}
/* Age restriction: red, and nothing else on the page is red. */
.cp-tag--age{
	background:var(--cp-age);
	border:0;
	color:#fff;
	letter-spacing:.02em;font-size:.68rem;font-weight:700;
}

/* Versions and formats a film actually screens in. */
.cp-card{display:flex;flex-direction:column;gap:.4rem}
.cp-card__head{display:flex;flex-direction:column;gap:.45rem}
.cp-card__flags{display:flex;flex-wrap:wrap;gap:.25rem;margin:.15rem 0}

/* Both venues under the poster, each with its next hours. */
.cp-card__times{display:flex;flex-direction:column;gap:.35rem;margin-top:.15rem}

.cp-cardline{display:flex;flex-direction:column;gap:.18rem}
.cp-cardline__venue{
	font-family:var(--cp-mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
	color:var(--cp-bronze);
}
.cp-cardline__venue em{font-style:normal;color:var(--cp-brume)}
.cp-cardline__times{display:flex;flex-wrap:wrap;gap:.25rem}

.cp-cardtime{
	display:inline-flex;align-items:baseline;gap:.15rem;
	padding:.15rem .35rem;
	border:1px solid var(--cp-trait);border-radius:2px;
	background:var(--cp-nuit-2);color:var(--cp-anthracite);
	font-family:var(--cp-mono);font-size:.7rem;font-variant-numeric:tabular-nums;
	transition:background .14s,border-color .14s,color .14s;
}
a.cp-cardtime:hover{background:var(--cp-marque);border-color:var(--cp-marque);color:#fff}
.cp-cardtime.is-static{opacity:.6}
.cp-cardtime i{font-style:normal;font-size:.52rem;color:var(--cp-ecarlate)}
a.cp-cardtime:hover i{color:#FFFFFF}
.cp-chipflag{
	padding:.1rem .35rem;
	border:1px solid var(--cp-ecarlate);border-radius:2px;
	color:var(--cp-ecarlate);
	font-family:var(--cp-mono);font-size:.56rem;font-style:normal;font-weight:600;
	letter-spacing:.07em;text-transform:uppercase;
}
.cp-chipflag--fmt{border-color:var(--cp-bronze);color:var(--cp-bronze-clair)}

/* Exclusivity and hand-written labels read as information, not as alerts:
   a poster covered in red loses the red that matters. */
.cp-chipflag--excl{border-color:var(--cp-bronze);color:var(--cp-bronze-clair)}
.cp-chipflag--custom{border-color:var(--cp-trait);color:var(--cp-brume)}
.cp-chipflag--age{border-color:var(--cp-age);background:var(--cp-age);color:#fff;font-weight:700}
.cp-chipflag--preview{border-color:var(--cp-bronze);background:var(--cp-trait);color:var(--cp-bronze-clair)}
.cp-chipflag--new{border-color:var(--cp-rose);color:var(--cp-rose)}

.cp-age{
	display:inline-block;padding:.05rem .35rem;
	border-radius:2px;background:var(--cp-age);
	font-family:var(--cp-mono);font-size:.64rem;font-weight:700;letter-spacing:.02em;color:#fff;
}

/* ===========================================================================
   7. Showtime board
   ======================================================================== */

.cp-board{display:flex;flex-direction:column}
.cp-board__row{display:grid;grid-template-columns:136px 1fr;gap:1rem;align-items:start;padding:.6rem 0;border-top:1px solid var(--cp-trait)}
.cp-board__row:first-child{border-top:0;padding-top:0}
.cp-board__venue{display:flex;flex-direction:column;padding-top:.3rem}
.cp-board__code{font-family:var(--cp-mono);font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cp-bronze);white-space:nowrap}
.cp-board__city{font-family:var(--cp-display);font-size:.86rem;font-weight:700;letter-spacing:-.01em;color:var(--cp-anthracite);white-space:nowrap}
.cp-board__times{display:flex;flex-wrap:wrap;gap:.4rem}

.cp-time{
	display:inline-flex;align-items:baseline;gap:.32rem;
	padding:.5rem .85rem;
	border:1px solid var(--cp-trait);border-radius:var(--cp-r-s);
	background:var(--cp-gris-clair);color:var(--cp-anthracite);font-weight:500;
	font-family:var(--cp-mono);font-size:.94rem;font-weight:500;
	font-variant-numeric:tabular-nums;
	transition:background .16s,border-color .16s,color .16s;
}
a.cp-time:hover{background:var(--cp-marque);border-color:var(--cp-marque);color:#fff;box-shadow:var(--cp-ombre-forte)}
a.cp-time:hover .cp-badge{color:#fff}
.cp-time.is-soon{border-color:var(--cp-magenta);color:var(--cp-magenta)}
.cp-time.is-static{opacity:.7}

.cp-badge{font-size:.57rem;font-style:normal;font-weight:600;letter-spacing:.09em;color:var(--cp-ecarlate);transition:color .16s}
.cp-badge--fmt{color:var(--cp-bronze-clair)}

/* ===========================================================================
   8. Programme list
   ======================================================================== */

.cp-days{display:flex;overflow-x:auto;margin-bottom:1.5rem;border-top:1px solid var(--cp-trait);border-bottom:1px solid var(--cp-trait);scrollbar-width:thin}
.cp-day{
	flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:.1rem;
	min-width:74px;padding:.75rem .5rem;
	border:0;border-right:1px solid var(--cp-trait);
	background:none;color:var(--cp-brume);cursor:pointer;
	text-align:center;text-decoration:none;
	transition:background .16s,color .16s;
}
.cp-day:hover{background:var(--cp-gris-clair);color:var(--cp-magenta)}
.cp-day.is-active,
.cp-day[aria-current="page"]{
	background:var(--cp-marque);color:#fff;
	box-shadow:inset 0 -3px 0 rgba(0,0,0,.25);
}

/* A day without screenings stays reachable but says so. */
.cp-day.is-empty{opacity:.4}
.cp-day.is-empty.is-active{opacity:1}

.cp-filmday{padding-top:1.25rem}
.cp-filmday[hidden]{display:none}
.cp-day__name{font-size:.63rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase}
.cp-day__num{font-family:var(--cp-mono);font-size:1.3rem;font-weight:500;line-height:1.05}
.cp-day__month{font-size:.58rem;letter-spacing:.09em;text-transform:uppercase;opacity:.75}

/* ===========================================================================
   Poster carousel
   ------------------------------------------------------------------------
   Scroll-snap rather than a slideshow library: the strip stays usable by
   touch, trackpad and keyboard, and the arrows are an addition rather than
   the only way through.
   ======================================================================== */

.cp-carousel{padding:2.5rem 0 1rem}
.cp-carousel__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.25rem}
.cp-carousel__nav{display:flex;gap:.5rem}
.cp-carousel__arrow{
	width:38px;height:38px;
	border:1px solid var(--cp-magenta);border-radius:50%;
	background:none;color:var(--cp-bronze-clair);
	font-size:.9rem;line-height:1;cursor:pointer;
	transition:background .16s,color .16s,opacity .16s;
}
.cp-carousel__arrow:hover:not(:disabled){background:var(--cp-bronze);color:#FFFFFF}
.cp-carousel__arrow:disabled{opacity:.3;cursor:default}

.cp-carousel__track{
	display:flex;gap:1.25rem;
	overflow-x:auto;
	scroll-snap-type:x mandatory;
	scroll-padding-left:0;
	padding-bottom:.5rem;
	scrollbar-width:thin;scrollbar-color:var(--cp-nuit-3) transparent;
}
.cp-carousel__track::-webkit-scrollbar{height:6px}
.cp-carousel__track::-webkit-scrollbar-thumb{background:var(--cp-nuit-3);border-radius:99px}

.cp-slide{flex:0 0 200px;scroll-snap-align:start;display:flex;flex-direction:column;gap:.5rem}
.cp-slide__link{display:flex;flex-direction:column;gap:.45rem}

.cp-slide__poster{
	position:relative;display:block;
	aspect-ratio:2/3;overflow:hidden;
	border-radius:var(--cp-r);background:var(--cp-nuit-2);
	transition:box-shadow .2s,transform .2s;
}
.cp-slide__poster img{width:100%;height:100%;object-fit:cover}
.cp-slide:hover .cp-slide__poster{box-shadow:0 0 0 1px var(--cp-bronze),0 16px 34px rgba(0,0,0,.1);transform:translateY(-2px)}

.cp-slide__title{
	font-family:var(--cp-display);font-size:1rem;font-weight:700;
	line-height:1.15;text-transform:uppercase;color:var(--cp-anthracite);
}
.cp-slide:hover .cp-slide__title{color:var(--cp-bronze-clair)}
.cp-slide__next{font-family:var(--cp-mono);font-size:.66rem;font-variant-numeric:tabular-nums;color:var(--cp-bronze-clair)}

.cp-slide__cta{
	margin-top:auto;padding:.45rem .8rem;
	border:1px solid var(--cp-magenta);border-radius:99px;
	text-align:center;
	font-family:var(--cp-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cp-bronze-clair);
	transition:background .16s,color .16s;
}
.cp-slide__cta:hover{background:var(--cp-ecarlate);border-color:var(--cp-ecarlate);color:#fff}

@media (max-width:640px){
	.cp-slide{flex:0 0 148px}
	.cp-slide__title{font-size:.88rem}
}

@media (prefers-reduced-motion:reduce){
	.cp-carousel__track{scroll-behavior:auto}
	.cp-slide:hover .cp-slide__poster{transform:none}
}

/* ===========================================================================
   Agenda card — next screenings, one day at a time
   ------------------------------------------------------------------------
   Time on the left in scarlet with its version beneath, film on the right.
   The eye scans the left column for an hour that fits, then reads across.
   ======================================================================== */

/* Two cinemas, two cards, both on screen — contained rather than stretched.
   A schedule read at full page width forces the eye across dead space between
   the hour and the film; boxed, the pair scans in one glance. */
.cp-agendas{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
	gap:1.25rem;
	align-items:start;
	max-width:760px;
}

.cp-agenda__venue{
	padding:.65rem 1.1rem;
	background:var(--cp-nuit-3);
	border-bottom:1px solid var(--cp-trait);
	font-family:var(--cp-display);font-size:1.02rem;font-weight:700;
	letter-spacing:-.01em;color:var(--cp-anthracite);
}

.cp-agenda{
	border:1px solid var(--cp-trait);
	border-top:3px solid var(--cp-ecarlate);
	border-radius:6px;
	background:var(--cp-nuit-2);
	overflow:hidden;
	box-shadow:0 12px 30px rgba(0,0,0,.08);
}
.cp-agenda[hidden]{display:none}

.cp-agenda__head{
	display:flex;align-items:center;justify-content:space-between;gap:1rem;
	padding:.9rem 1.1rem;
	border-bottom:1px solid var(--cp-trait);
}
.cp-agenda__rel{display:block;font-size:.92rem;color:var(--cp-brume);margin-bottom:.1rem}
.cp-agenda__date{color:var(--cp-anthracite);
	display:block;font-family:var(--cp-display);font-size:clamp(1.2rem,3vw,1.6rem);
	font-weight:700;letter-spacing:-.02em;color:var(--cp-anthracite);
	text-transform:capitalize;
}

.cp-agenda__nav{display:flex;gap:.5rem;flex:0 0 auto}
.cp-agenda__arrow{
	width:36px;height:36px;
	border:0;border-radius:50%;
	background:var(--cp-marque);color:#fff;
	font-size:1rem;line-height:1;cursor:pointer;
	transition:background .16s,opacity .16s;
}
.cp-agenda__arrow:hover:not(:disabled){background:var(--cp-marque-clair);box-shadow:var(--cp-ombre)}
.cp-agenda__arrow:disabled{opacity:.35;cursor:default}

.cp-agenda__days{max-height:420px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--cp-nuit-3) transparent}
.cp-agenda__days::-webkit-scrollbar{width:6px}
.cp-agenda__days::-webkit-scrollbar-thumb{background:var(--cp-nuit-3);border-radius:99px}
.cp-agenda__day[hidden]{display:none}
.cp-agenda__empty{margin:0;padding:2rem 1.3rem;color:var(--cp-brume);font-size:.92rem}

.cp-ag-row{
	display:grid;grid-template-columns:92px minmax(0,1fr);
	gap:.9rem;align-items:center;
	padding:.7rem 1.1rem;
	border-bottom:1px solid var(--cp-trait);
	transition:background .14s;
}
.cp-ag-row:last-child{border-bottom:0}
.cp-ag-row:hover{background:rgba(43,43,43,.04)}

.cp-ag-row__left{display:flex;flex-direction:column;gap:.05rem}
.cp-ag-row__time{
	font-family:var(--cp-mono);font-size:1.2rem;font-weight:500;
	font-variant-numeric:tabular-nums;line-height:1.1;color:var(--cp-ecarlate);
}
.cp-ag-row__ver{font-family:var(--cp-mono);font-size:.68rem;letter-spacing:.08em;color:var(--cp-brume)}

.cp-ag-row__title{color:var(--cp-anthracite);
	font-family:var(--cp-display);font-size:1.02rem;font-weight:700;
	line-height:1.2;letter-spacing:-.01em;text-transform:uppercase;text-align:right;
	color:var(--cp-anthracite);
	overflow:hidden;text-overflow:ellipsis;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.cp-ag-row:hover .cp-ag-row__title{color:var(--cp-anthracite);color:var(--cp-bronze-clair)}

.cp-agenda__all{
	display:block;padding:.8rem 1.1rem;
	border-top:1px solid var(--cp-trait);
	font-family:var(--cp-mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
	color:var(--cp-bronze-clair);
}
.cp-agenda__all:hover{background:rgba(43,43,43,.03)}

@media (max-width:560px){
	.cp-ag-row{grid-template-columns:86px minmax(0,1fr);gap:.75rem;padding:.8rem 1rem}
	.cp-ag-row__time{font-size:1.15rem}
	.cp-ag-row__title{color:var(--cp-anthracite);font-size:.92rem}
	.cp-agenda__head{padding:.9rem 1rem}
	.cp-agenda__arrow{width:38px;height:38px}
}

/* Quick links: the three questions people actually arrive with. */
.cp-quick{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.5rem}
.cp-quick__link{
	padding:.4rem .9rem;
	border:1px solid var(--cp-trait);border-radius:99px;
	color:var(--cp-brume);
	font-family:var(--cp-mono);font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;
	transition:color .16s,border-color .16s,background .16s;
}
.cp-quick__link:hover{color:var(--cp-magenta);border-color:var(--cp-magenta)}
.cp-quick__link.is-current{background:var(--cp-marque);border-color:var(--cp-marque);color:#fff;font-weight:500}

/* Venue tabs: the two cinemas are separate places, not a filter. */
.cp-venuetabs{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:2rem;border-bottom:1px solid var(--cp-trait)}
.cp-venuetab{
	padding:.7rem 1.1rem;
	border-bottom:2px solid transparent;
	color:var(--cp-brume);
	font-family:var(--cp-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
	transition:color .16s,border-color .16s;
}
.cp-venuetab:hover{color:var(--cp-magenta)}
.cp-venuetab.is-active{color:var(--cp-bronze-clair);border-bottom-color:var(--cp-ecarlate)}

.cp-filters{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:2rem}
.cp-chip{
	padding:.35rem .85rem;border:1px solid var(--cp-trait);border-radius:99px;
	background:none;color:var(--cp-brume);
	font-family:var(--cp-mono);font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;
	cursor:pointer;transition:color .18s,border-color .18s;
}
.cp-chip:hover{color:var(--cp-magenta);border-color:var(--cp-magenta)}
.cp-chip.is-active{background:var(--cp-marque);border-color:var(--cp-marque);color:#fff;font-weight:500}

.cp-list.is-loading{opacity:.45;transition:opacity .15s}

.cp-film{display:grid;grid-template-columns:104px 1fr;gap:1.5rem;padding:1.75rem 0;border-top:1px solid var(--cp-trait)}
.cp-film:first-child{border-top:0;padding-top:0}
.cp-film__poster{display:flex;align-items:center;justify-content:center;aspect-ratio:2/3;overflow:hidden;border-radius:var(--cp-r);background:var(--cp-nuit-2);color:#2C3440;font-family:var(--cp-display);font-size:1.9rem;font-weight:800}
.cp-film__poster img{width:100%;height:100%;object-fit:cover}
.cp-film__when{
	margin:0 0 .6rem;
	font-family:var(--cp-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
	color:var(--cp-bronze);
}

.cp-film__title{margin:0 0 .35rem;font-size:clamp(1.3rem,2.6vw,1.7rem);font-weight:700;line-height:1.05}
.cp-film__title a:hover{color:var(--cp-marque-clair)}

/* ===========================================================================
   9. Film page
   ======================================================================== */

.cp-fhero{position:relative;padding:2.75rem 0;overflow:hidden;border-bottom:1px solid var(--cp-trait)}
.cp-fhero::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 45%,rgba(27,70,82,.4));pointer-events:none}
.cp-fhero__in{position:relative;z-index:2;display:grid;grid-template-columns:250px 1fr;gap:2.5rem}

.cp-fhero__poster{display:flex;align-items:center;justify-content:center;aspect-ratio:2/3;overflow:hidden;border-radius:var(--cp-r);background:var(--cp-nuit-2);color:#2C3440;font-family:var(--cp-display);font-size:3.2rem;font-weight:800}
.cp-fhero__poster img{width:100%;height:100%;object-fit:cover}
.cp-synopsis{max-width:60ch;margin:1.1rem 0 1.4rem;font-size:.98rem;color:var(--cp-brume)}

.cp-pill{
	display:inline-flex;align-items:center;gap:.5rem;
	padding:.55rem 1.05rem;border:1px solid var(--cp-bronze);border-radius:99px;
	color:var(--cp-bronze-clair);
	font-family:var(--cp-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
	transition:background .18s,color .18s;
}
.cp-pill:hover{background:var(--cp-bronze);color:#FFFFFF}

.cp-daygroup{padding:1.4rem 0;border-top:1px solid var(--cp-trait)}
.cp-daygroup:first-child{border-top:0;padding-top:0}

/* --- The week as columns: one date per column ---------------------------
   Times stack under their date, so scanning "what is on Friday evening"
   is a single vertical read, and comparing two days is a horizontal one.
   ---------------------------------------------------------------------- */

.cp-grille{
	display:grid;
	grid-template-columns:repeat(7,minmax(118px,1fr));
	gap:1px;
	margin-top:.5rem;
	background:var(--cp-trait);
	border:1px solid var(--cp-trait);
	overflow-x:auto;
}

.cp-grille__col{display:flex;flex-direction:column;gap:.5rem;padding:.9rem .7rem;background:var(--cp-nuit);min-width:0}
.cp-grille__col.is-dark{opacity:.45}
.cp-grille__col.is-today{background:var(--cp-nuit-2);box-shadow:inset 0 2px 0 var(--cp-ecarlate)}

.cp-grille__head{display:flex;flex-direction:column;gap:.02rem;text-align:center}
.cp-grille__day{font-family:var(--cp-mono);font-size:.6rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cp-bronze)}
.cp-grille__num{font-family:var(--cp-display);font-size:1.4rem;font-weight:700;line-height:1;color:var(--cp-anthracite)}
.cp-grille__month{font-size:.58rem;letter-spacing:.09em;text-transform:uppercase;color:var(--cp-brume)}

.cp-grille__none{text-align:center;color:var(--cp-brume);font-family:var(--cp-mono);font-size:.8rem}

.cp-grille__venue{display:flex;flex-direction:column;gap:.3rem}
.cp-grille__label{
	font-family:var(--cp-mono);font-size:.54rem;letter-spacing:.1em;text-transform:uppercase;
	color:var(--cp-brume);text-align:center;
	padding-top:.35rem;border-top:1px dashed var(--cp-trait);
}

.cp-grille__time{
	display:flex;align-items:baseline;justify-content:center;gap:.25rem;
	padding:.35rem .3rem;
	border:1px solid var(--cp-trait);border-radius:var(--cp-r);
	background:var(--cp-nuit-2);color:var(--cp-anthracite);
	font-family:var(--cp-mono);font-size:.85rem;font-variant-numeric:tabular-nums;
	transition:background .16s,border-color .16s,color .16s;
}
a.cp-grille__time:hover{background:var(--cp-marque);border-color:var(--cp-marque);color:#fff;box-shadow:var(--cp-ombre-forte)}
a.cp-grille__time:hover .cp-badge{color:#fff}
.cp-grille__time.is-static{opacity:.6}
.cp-grille__time .cp-badge{font-size:.5rem}

@media (max-width:900px){
	.cp-grille{grid-template-columns:repeat(7,minmax(104px,1fr))}
	.cp-grille__num{font-size:1.15rem}
	.cp-grille__time{font-size:.78rem}
}

/* --- The week, read vertically: one date per row --- */

.cp-week__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.75rem 1.5rem;margin-bottom:1.25rem}
.cp-week__range{margin:0;font-family:var(--cp-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cp-bronze)}

.cp-week{display:flex;flex-direction:column;border-top:1px solid var(--cp-trait)}

.cp-week__row{
	display:grid;grid-template-columns:112px minmax(0,1fr);
	gap:1.25rem;align-items:start;
	padding:1rem 0;
	border-bottom:1px solid var(--cp-trait);
}
.cp-week__row.is-dark{opacity:.42}

.cp-week__date{display:flex;flex-direction:column;gap:.05rem;padding-top:.15rem}
.cp-week__day{font-family:var(--cp-mono);font-size:.62rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--cp-bronze)}
.cp-week__num{font-family:var(--cp-display);font-size:1.6rem;font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--cp-anthracite)}
.cp-week__month{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cp-brume)}

.cp-week__shows{min-width:0}
.cp-week__none{font-family:var(--cp-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--cp-brume)}

/* Inside a week row the board carries no rules of its own: the row does. */
.cp-week__shows .cp-board__row{border-top:0;padding:.25rem 0}

@media (max-width:640px){
	.cp-week__row{grid-template-columns:1fr;gap:.5rem}
	.cp-week__date{flex-direction:row;align-items:baseline;gap:.45rem;padding-top:0}
	.cp-week__num{font-size:1.1rem}
}
.cp-daygroup__date{margin:0 0 .85rem;font-family:var(--cp-mono);font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--cp-bronze)}

/* ===========================================================================
   10. Specs, editorial, footer
   ======================================================================== */

.cp-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--cp-trait);border:1px solid var(--cp-trait)}
.cp-spec{padding:1.1rem 1.15rem;background:var(--cp-nuit)}
.cp-spec b{display:block;font-family:var(--cp-display);font-size:1.5rem;font-weight:700;color:var(--cp-bronze-clair)}
.cp-spec span{font-family:var(--cp-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cp-brume)}

.cp-entry{max-width:68ch}
.cp-entry p{margin:0 0 1.1rem}
.cp-entry a{color:var(--cp-bronze-clair);text-decoration:underline;text-underline-offset:3px}
.cp-entry blockquote{margin:1.5rem 0;padding-left:1.25rem;border-left:2px solid var(--cp-bronze);color:var(--cp-brume)}
.cp-entry ul,.cp-entry ol{padding-left:1.2rem}
.cp-entry code{font-family:var(--cp-mono);font-size:.88em;background:var(--cp-nuit-2);padding:.1em .35em;border-radius:var(--cp-r)}

/* ===========================================================================
   10bis. Video player
   ------------------------------------------------------------------------
   Used inline at the top of a film page and inside the overlay. The shield
   covers the whole picture: the provider's title, logo and share hotspots sit
   under it and cannot be clicked. Controls below are the theme's own.
   ======================================================================== */

.cp-pl{background:#000;border:1px solid var(--cp-trait);border-radius:var(--cp-r);overflow:hidden}
.cp-pl:fullscreen{border:0;border-radius:0;display:flex;flex-direction:column}
.cp-pl:fullscreen .cp-pl__stage{flex:1;aspect-ratio:auto}

.cp-pl__stage{position:relative;aspect-ratio:16/9;background:#000}
.cp-pl__stage iframe,
.cp-pl__stage video,
.cp-pl__stage > div{position:absolute;inset:0;width:100%;height:100%;border:0}

.cp-pl__shield{position:absolute;inset:0;z-index:2;border:0;background:transparent;cursor:pointer}

.cp-pl__bar{
	display:flex;align-items:center;gap:.6rem;
	padding:.5rem .65rem;
	background:var(--cp-anthracite);color:#fff;
	border-top:1px solid rgba(255,255,255,.12);
}
.cp-pl__btn{
	flex:0 0 auto;width:30px;height:30px;
	border:1px solid rgba(255,255,255,.25);border-radius:var(--cp-r);
	background:none;color:#fff;font-size:.75rem;line-height:1;cursor:pointer;
	transition:background .16s,border-color .16s,color .16s;
}
.cp-pl__btn:hover{background:var(--cp-bronze);border-color:var(--cp-bronze);color:#FFFFFF}

.cp-pl__track{flex:1;position:relative;height:4px;background:rgba(255,255,255,.2);border-radius:99px;cursor:pointer}
.cp-pl__track::before{content:'';position:absolute;inset:-9px 0}
.cp-pl__played{position:absolute;inset:0 auto 0 0;width:0;background:var(--cp-marque);border-radius:99px;transition:width .2s linear}
.cp-pl__track:hover .cp-pl__played{background:var(--cp-bronze-clair)}

.cp-pl__time{flex:0 0 auto;font-family:var(--cp-display);font-size:.7rem;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.7)}

/* --- Reel: the trailer band at the top of a film page --- */

.cp-reel{
	position:relative;
	padding:clamp(1.25rem,3vw,2.25rem) 0 clamp(1.5rem,3vw,2.5rem);
	background:linear-gradient(180deg,var(--cp-nuit) 0%,#0A0D11 100%);
	overflow:hidden;
}
.cp-reel::after{
	content:'';position:absolute;inset:auto 0 0 0;height:120px;
	background:linear-gradient(180deg,transparent,var(--cp-sable));
	pointer-events:none;
}
.cp-reel__mount{position:relative;z-index:2}
.cp-reel .cp-pl{border-color:var(--cp-trait);box-shadow:0 24px 70px rgba(0,0,0,.12)}

.cp-fhero.is-under-reel{border-top:0}
.cp-fhero.is-under-reel .cp-fhero__in{padding-top:.5rem}

/* --- Caption over the still frame --- */

.cp-pl__caption{
	position:absolute;left:0;right:0;bottom:0;z-index:3;
	display:flex;flex-direction:column;gap:.15rem;
	padding:2.5rem 1.4rem 1.1rem;
	background:linear-gradient(to top,rgba(43,43,43,.5),transparent);
	pointer-events:none;transition:opacity .4s ease;
}
.cp-pl__caption.is-faded{opacity:0}
.cp-pl__caption span{font-family:var(--cp-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cp-bronze)}
.cp-pl__caption strong{
	font-family:var(--cp-display);font-size:clamp(1.1rem,2.6vw,1.9rem);
	font-weight:700;line-height:1.05;letter-spacing:-.02em;color:#fff;
}

/* --- Recovery control when unattended playback is refused --- */

.cp-pl__start{
	position:absolute;inset:0;z-index:4;
	display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;
	border:0;background:rgba(43,43,43,.45);color:#fff;cursor:pointer;
}
.cp-pl__start[hidden]{display:none}
.cp-pl__starticon{
	display:flex;align-items:center;justify-content:center;
	width:62px;height:62px;
	border:1px solid var(--cp-bronze);border-radius:50%;
	background:rgba(255,255,255,.8);color:var(--cp-bronze-clair);font-size:1.2rem;
	transition:background .18s,color .18s,transform .18s;
}
.cp-pl__start:hover .cp-pl__starticon{background:var(--cp-bronze);color:#FFFFFF;transform:scale(1.05)}
.cp-pl__starttext{font-family:var(--cp-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cp-brume)}

/* --- Overlay player --- */

.cp-viewer{
	position:fixed;inset:0;z-index:120;
	display:flex;align-items:center;justify-content:center;
	padding:clamp(1rem,4vw,3rem);
	background:rgba(43,43,43,.65);
	opacity:0;visibility:hidden;
	transition:opacity .2s ease,visibility .2s;
}
.cp-viewer.is-open{opacity:1;visibility:visible}
.cp-viewer__panel{
	position:relative;width:100%;max-width:1000px;
	background:var(--cp-anthracite);color:#fff;
	border:1px solid var(--cp-trait);border-radius:var(--cp-r);
	overflow:hidden;transform:translateY(8px);transition:transform .2s ease;
}
.cp-viewer.is-open .cp-viewer__panel{transform:none}
.cp-viewer__panel .cp-pl{border:0;border-radius:0}
.cp-viewer__head{
	display:flex;align-items:center;justify-content:space-between;gap:1rem;
	padding:.6rem .85rem;border-bottom:1px solid rgba(255,255,255,.14);
}
.cp-viewer__title{
	font-family:var(--cp-mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--cp-bronze);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cp-viewer__close{
	flex:0 0 auto;width:30px;height:30px;
	border:1px solid rgba(255,255,255,.3);border-radius:var(--cp-r);
	background:none;color:#fff;font-size:.8rem;line-height:1;cursor:pointer;
	transition:background .16s,border-color .16s;
}
.cp-viewer__close:hover{background:var(--cp-ecarlate);border-color:var(--cp-ecarlate);color:#fff}

/* --- Booking window --- */

.cp-modal{
	position:fixed;inset:0;z-index:110;
	display:flex;align-items:center;justify-content:center;
	padding:clamp(.5rem,3vw,2.5rem);
	background:rgba(8,10,13,.86);
	opacity:0;visibility:hidden;
	transition:opacity .2s ease,visibility .2s;
}
.cp-modal.is-open{opacity:1;visibility:visible}

.cp-modal__panel{
	position:relative;display:flex;flex-direction:column;
	width:min(1080px,100%);height:min(860px,92vh);
	background:var(--cp-nuit);
	border:1px solid var(--cp-trait);border-radius:var(--cp-r);
	overflow:hidden;
	box-shadow:0 30px 80px rgba(0,0,0,.14);
	transform:translateY(10px);transition:transform .2s ease;
}
.cp-modal.is-open .cp-modal__panel{transform:none}

.cp-modal__head{
	display:flex;align-items:center;justify-content:space-between;gap:1rem;
	padding:.8rem 1.1rem;
	background:var(--cp-nuit-2);
	border-bottom:1px solid var(--cp-trait);
}
.cp-modal__sub{font-family:var(--cp-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cp-bronze)}
.cp-modal__title{font-family:var(--cp-display);font-size:1rem;font-weight:700;color:var(--cp-anthracite)}
.cp-modal__actions{display:flex;gap:.4rem;flex:0 0 auto}

.cp-modal__body{position:relative;flex:1;background:#fff}
.cp-modal__body iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cp-modal__wait{
	position:absolute;inset:0;z-index:1;
	display:flex;align-items:center;justify-content:center;
	background:var(--cp-nuit);
	font-family:var(--cp-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cp-brume);
}

@media (max-width:640px){
	.cp-modal{padding:0}
	.cp-modal__panel{width:100%;height:100%;border:0;border-radius:0}
}

/* --- Booking drawer (side-panel mode) --- */

.cp-drawer{
	position:fixed;inset:0;z-index:110;
	display:flex;justify-content:flex-end;
	background:rgba(43,43,43,.5);
	opacity:0;visibility:hidden;transition:opacity .24s ease,visibility .24s;
}
.cp-drawer.is-open{opacity:1;visibility:visible}
.cp-drawer__panel{
	position:relative;display:flex;flex-direction:column;
	width:min(560px,100%);height:100%;
	background:var(--cp-nuit);
	border-left:1px solid var(--cp-trait);
	transform:translateX(24px);transition:transform .24s ease;
}
.cp-drawer.is-open .cp-drawer__panel{transform:none}
.cp-drawer__head{
	display:flex;align-items:center;justify-content:space-between;gap:1rem;
	padding:.85rem 1.1rem;
	border-bottom:1px solid var(--cp-trait);background:var(--cp-nuit-2);
}
.cp-drawer__title{font-family:var(--cp-display);font-size:.98rem;font-weight:700;font-stretch:90%}
.cp-drawer__sub{font-family:var(--cp-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cp-bronze)}
.cp-drawer__actions{display:flex;gap:.4rem;flex:0 0 auto}
.cp-drawer__btn{
	padding:.4rem .75rem;
	border:1px solid var(--cp-trait);border-radius:var(--cp-r);
	background:none;color:var(--cp-anthracite);
	font-family:var(--cp-mono);font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;
	cursor:pointer;transition:background .16s,border-color .16s,color .16s;
}
.cp-drawer__btn:hover{background:var(--cp-bronze);border-color:var(--cp-bronze);color:#FFFFFF}
.cp-drawer__btn--close:hover{background:var(--cp-ecarlate);border-color:var(--cp-ecarlate);color:#fff}
.cp-drawer__body{position:relative;flex:1;background:#fff}
.cp-drawer__body iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cp-drawer__fallback{
	position:absolute;inset:0;z-index:2;
	display:none;flex-direction:column;align-items:flex-start;justify-content:center;gap:1rem;
	padding:2rem;background:var(--cp-nuit);
}
.cp-drawer__fallback.is-shown{display:flex}
.cp-drawer__fallback p{margin:0;max-width:38ch;color:var(--cp-brume);font-size:.92rem}
.cp-drawer__wait{
	position:absolute;inset:0;z-index:1;
	display:flex;align-items:center;justify-content:center;
	background:var(--cp-nuit);
	font-family:var(--cp-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cp-brume);
}

@media (max-width:640px){
	.cp-viewer{padding:0}
	.cp-viewer__panel{border-radius:0;border-left:0;border-right:0}
	.cp-pl__time{display:none}
	.cp-pl__caption{padding:2rem 1rem .9rem}
	.cp-pl__starttext{display:none}
	.cp-drawer__panel{width:100%;border-left:0}
}

@media (prefers-reduced-motion:reduce){
	.cp-viewer,.cp-viewer__panel,.cp-pl__played,.cp-drawer,.cp-drawer__panel{transition:none}
}

.cp-foot{
	position:relative;margin-top:4rem;
	padding:clamp(2.5rem,5vw,4rem) 0 2rem;
	overflow:hidden;
	background:var(--cp-gris-clair);
	border-top:1px solid var(--cp-trait);
}
.cp-foot__inner{position:relative;z-index:2}

/* --- Tier 1 --- */

.cp-foot__top{
	display:grid;
	grid-template-columns:1.4fr 1fr 1fr 1.7fr;
	gap:2.5rem 2rem;
	padding-bottom:2.5rem;
}

.cp-foot__brand .cp-mark{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:.9rem}
.cp-foot__brand .cp-mark__txt{font-size:1.25rem}
.cp-foot__brand img{max-width:180px;height:auto;margin-bottom:.9rem}
.cp-foot__tagline{margin:0;max-width:26ch;font-size:.88rem;line-height:1.6;color:var(--cp-brume)}

.cp-foot__col h4,
.cp-foot__news h4,
.cp-foot__venues h4,
.cp-foot__follow h4{
	margin:0 0 1rem;
	font-family:var(--cp-mono);font-size:.64rem;font-weight:600;
	letter-spacing:.18em;text-transform:uppercase;color:var(--cp-bronze);
}

.cp-foot__col ul{list-style:none;margin:0;padding:0}
.cp-foot__col li{margin-bottom:.6rem}
.cp-foot__col a{font-size:.94rem;color:var(--cp-anthracite);opacity:.78;transition:opacity .16s,color .16s}
.cp-foot__col a:hover{opacity:1;color:var(--cp-bronze-clair)}

.cp-foot__pitch{margin:0 0 1rem;max-width:36ch;font-size:.9rem;line-height:1.6;color:var(--cp-brume)}

/* Inline sign-up: one field, one button, no second page. */
.cp-news{display:flex;max-width:420px;border-radius:var(--cp-r);overflow:hidden}
.cp-news input{
	flex:1;min-width:0;
	padding:.8rem 1rem;
	border:1px solid var(--cp-trait);border-right:0;
	background:var(--cp-sable);color:#14171C;
	font-family:var(--cp-body);font-size:.9rem;
}
.cp-news input::placeholder{color:#7A7F87}
.cp-news input:focus{outline:2px solid var(--cp-bronze);outline-offset:-2px}
.cp-news button{
	flex:0 0 auto;
	padding:.8rem 1.3rem;
	border:0;
	background:var(--cp-marque);color:#fff;
	font-family:var(--cp-mono);font-size:.72rem;font-weight:600;
	letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
	transition:background .16s;
}
.cp-news button:hover{background:var(--cp-marque-clair)}

.cp-foot__micro{margin:.7rem 0 0;max-width:42ch;font-size:.74rem;line-height:1.5;color:var(--cp-brume);opacity:.75}

/* --- Tier 2 --- */

.cp-foot__mid{
	display:grid;grid-template-columns:minmax(0,1fr) auto;
	gap:2rem;align-items:start;
	padding:2rem 0;
	border-top:1px solid var(--cp-trait);
}

.cp-foot__venuelist{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem}

.cp-venuecard{
	padding:1.1rem 1.2rem;
	background:var(--cp-nuit-2);
	border:1px solid var(--cp-trait);border-radius:var(--cp-r);
	transition:border-color .18s;
}
.cp-venuecard:hover{border-color:var(--cp-magenta)}
.cp-venuecard b{display:block;margin-bottom:.4rem;font-family:var(--cp-display);font-size:1.02rem;font-weight:700;font-stretch:90%}
.cp-venuecard address{font-style:normal;font-size:.85rem;line-height:1.55;color:var(--cp-brume)}
.cp-venuecard__links{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:.7rem}
.cp-venuecard__links a{
	font-family:var(--cp-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cp-bronze-clair);
}
.cp-venuecard__links a:hover{text-decoration:underline;text-underline-offset:3px}
.cp-venuecard__hours{display:block;margin-top:.6rem;font-size:.78rem;color:var(--cp-brume);opacity:.8}

.cp-foot__social{display:flex;gap:.5rem}
.cp-foot__social a{
	display:flex;align-items:center;justify-content:center;
	width:40px;height:40px;
	border:1px solid var(--cp-trait);border-radius:var(--cp-r);
	color:var(--cp-brume);
	transition:color .16s,border-color .16s,background .16s;
}
.cp-foot__social a:hover{color:#FFFFFF;background:var(--cp-bronze);border-color:var(--cp-bronze)}

/* --- Tier 3 --- */

.cp-foot__bottom{
	display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 2rem;
	padding-top:1.5rem;
	border-top:1px solid var(--cp-trait);
}
.cp-foot__legal ul{display:flex;flex-wrap:wrap;gap:1.5rem;list-style:none;margin:0;padding:0}
.cp-foot__legal a{font-size:.82rem;color:var(--cp-brume);transition:color .16s}
.cp-foot__legal a:hover{color:var(--cp-anthracite)}
.cp-legal{margin:0;font-family:var(--cp-mono);font-size:.68rem;letter-spacing:.05em;color:var(--cp-brume);opacity:.7}

@media (max-width:960px){
	.cp-foot__top{grid-template-columns:1fr 1fr;gap:2rem}
	.cp-foot__news{grid-column:1 / -1}
	.cp-foot__mid{grid-template-columns:1fr}
}

@media (max-width:560px){
	.cp-foot__top{grid-template-columns:1fr}
	.cp-news{flex-direction:column;max-width:none}
	.cp-news input{border-right:1px solid var(--cp-trait);border-bottom:0}
	.cp-foot__bottom{flex-direction:column;align-items:flex-start}
}

.cp-totop{
	position:absolute;top:-20px;right:clamp(1.1rem,4vw,2.5rem);z-index:3;
	width:40px;height:40px;
	border:1px solid var(--cp-magenta);border-radius:var(--cp-r);
	background:var(--cp-nuit);color:var(--cp-bronze);
	font-size:1rem;cursor:pointer;
	transition:background .16s,color .16s;
}
.cp-totop:hover{background:var(--cp-bronze);color:var(--cp-nuit)}

/* ===========================================================================
   10quinquies. Integrated booking page
   ------------------------------------------------------------------------
   The frame fills the space between header and footer. Its height is set from
   the viewport rather than the remote document: cross-origin frames cannot
   report their own height, so anything else would guess wrong.
   ======================================================================== */

.cp-frame__head{
	display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem;
	padding-top:1.75rem;padding-bottom:1.1rem;
}
.cp-frame__title{margin:0;font-family:var(--cp-display);font-size:clamp(1.4rem,3.5vw,2rem);font-weight:700;letter-spacing:-.02em}
.cp-frame__actions{display:flex;gap:.4rem;flex-wrap:wrap}

.cp-frame__stage{
	position:relative;
	height:clamp(620px,calc(100vh - 190px),1200px);
	background:#fff;
	border-top:1px solid var(--cp-trait);
	border-bottom:1px solid var(--cp-trait);
}
.cp-frame__stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.cp-frame__wait{
	position:absolute;inset:0;z-index:1;
	display:flex;align-items:center;justify-content:center;
	background:var(--cp-nuit);
	font-family:var(--cp-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cp-brume);
}

.cp-frame__fallback{
	position:absolute;inset:0;z-index:2;
	display:none;flex-direction:column;align-items:flex-start;justify-content:center;gap:.75rem;
	padding:clamp(1.5rem,5vw,3rem);
	background:var(--cp-nuit);
}
.cp-frame__fallback.is-shown{display:flex}
.cp-frame__fallback.is-leaving{align-items:center;justify-content:center;text-align:center}
.cp-frame__fallback p{margin:0;max-width:46ch;color:var(--cp-brume);font-size:.95rem}

@media (max-width:640px){
	.cp-frame__stage{height:calc(100vh - 170px)}
}

.cp-account{
	display:inline-flex;align-items:center;gap:.4rem;
	padding:.4rem .85rem;
	border:1px solid var(--cp-magenta);border-radius:99px;
	color:var(--cp-bronze-clair);
	font-family:var(--cp-mono);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;
	transition:background .16s,color .16s;
}
.cp-account:hover{background:var(--cp-bronze);color:#FFFFFF}

@media (max-width:840px){
	.cp-account{display:none}
}

.cp-account-wrap{position:relative}

.cp-account-menu{
	position:absolute;top:calc(100% + .5rem);right:0;z-index:40;
	min-width:200px;padding:.5rem;
	background:var(--cp-nuit-2);
	border:1px solid var(--cp-trait);border-radius:var(--cp-r);
	box-shadow:0 12px 32px rgba(0,0,0,.12);
	opacity:0;visibility:hidden;transform:translateY(-4px);
	transition:opacity .16s,visibility .16s,transform .16s;
}
.cp-account-wrap.is-open .cp-account-menu{opacity:1;visibility:visible;transform:none}

.cp-account-menu__hint{
	margin:0 0 .4rem;padding:.25rem .55rem;
	font-family:var(--cp-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cp-bronze);
}
.cp-account-menu a{
	display:block;padding:.5rem .55rem;border-radius:var(--cp-r);
	font-size:.88rem;color:var(--cp-anthracite);
	transition:background .14s;
}
.cp-account-menu a:hover{background:var(--cp-nuit-3);color:var(--cp-bronze-clair)}

@media (max-width:840px){
	.cp-account-wrap{display:none}
}

/* ===========================================================================
   10sexies. Refine bar and sticky booking
   ======================================================================== */

.cp-refine{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:-.75rem 0 1.75rem}
.cp-refine__label{
	margin-right:.35rem;
	font-family:var(--cp-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cp-brume);
}

/* The bar sits above the fold of the footer, not over the schedule. */
.cp-sticky{
	position:fixed;left:0;right:0;bottom:0;z-index:50;
	background:rgba(255,255,255,.96);
	backdrop-filter:blur(10px);
	border-top:1px solid var(--cp-trait);
	box-shadow:0 -12px 32px rgba(0,0,0,.1);
}
.cp-sticky[hidden]{display:none}

.cp-sticky__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 0}
.cp-sticky__info{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.cp-sticky__label{font-family:var(--cp-display);font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cp-magenta)}
.cp-sticky__when{
	display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap;
	font-size:.9rem;color:var(--cp-gris);
}
.cp-sticky__when strong{
	font-family:var(--cp-mono);font-size:1.05rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--cp-anthracite);
}

.cp-sticky__cta{
	flex:0 0 auto;
	padding:.65rem 1.4rem;
	border-radius:99px;
	background:linear-gradient(135deg,var(--cp-marque),var(--cp-marque-clair));color:#fff;
	box-shadow:0 4px 16px rgba(229,0,90,.25);
	font-family:var(--cp-mono);font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
	transition:background .16s,transform .16s;
}
.cp-sticky__cta:hover{filter:brightness(1.08);transform:translateY(-1px)}

@media (max-width:520px){
	.cp-sticky__when{font-size:.8rem}
	.cp-sticky__cta{padding:.6rem 1rem}
}

/* Keeps the last screenings clear of the bar. */
body.single-cp_film{padding-bottom:76px}

/* ===========================================================================
   10septies. Native booking module
   ------------------------------------------------------------------------
   The CinéOffice module brings its own stylesheet, built for a light Joomla
   template. It is given a light surface of its own rather than being forced
   into the dark theme — legibility of a seat map and a payment form matters
   more than palette consistency.
   ======================================================================== */

.cp-vad{ /* legacy container, kept for the other modes */ 
	position:relative;
	min-height:520px;
	margin:1.5rem 0 3rem;
	padding:clamp(1rem,3vw,2rem);
	background:#fff;
	color:#14171C;
	border:1px solid var(--cp-trait);
	border-radius:var(--cp-r);
}

/* The module's own portals sit on the body and position themselves; they
   only need to clear the sticky header. */
#cineboutique-media-sider,
#show-full-portal{position:relative;z-index:60}

/* Anything the module renders that duplicates page furniture is suppressed:
   the host page already has a header, a logo and a footer. */
.cp-vad header,
.cp-vad footer,
.cp-vad .logo,
.cp-vad [class*="header"],
.cp-vad [class*="footer"],
.cp-vad [class*="breadcrumb"]{display:none !important}

.cp-vad__wait{
	display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
	min-height:420px;text-align:center;
}
.cp-vad__wait p{margin:0;color:#5B6270;font-size:.92rem}
.cp-vad__wait .cp-eyebrow{color:var(--cp-bronze)}
.cp-vad.is-ready .cp-vad__wait{display:none}

/* The module renders links and buttons of its own; keep them readable. */
.cp-vad a{color:#8A5F22}
.cp-vad h1,.cp-vad h2,.cp-vad h3{color:#14171C;font-family:var(--cp-display)}

@media (max-width:640px){
	.cp-vad{ /* legacy container, kept for the other modes */ padding:.75rem;min-height:420px}
}

/* ===========================================================================
   11. Accessibility and responsive
   ======================================================================== */

:focus-visible{outline:2px solid var(--cp-bronze);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}
	*{transition:none!important;animation:none!important}
}

@media (max-width:840px){
	.cp-burger{display:block}
	.cp-nav{display:none;position:absolute;top:100%;right:0;left:0;padding:.5rem 0;background:var(--cp-nuit);border-bottom:1px solid var(--cp-trait)}
	.cp-nav.is-open{display:block}
	.cp-nav ul{flex-direction:column;padding:0 clamp(1.1rem,4vw,2.5rem)}
	.cp-nav a{padding:.7rem 0;border-radius:0}
}

@media (max-width:720px){
	.cp-film{grid-template-columns:78px 1fr;gap:1rem}
	.cp-board__row{grid-template-columns:1fr;gap:.35rem}
	.cp-board__venue{flex-direction:row;align-items:baseline;gap:.5rem;padding-top:0}
	.cp-fhero__in{grid-template-columns:1fr;gap:1.5rem}
	.cp-fhero__poster{max-width:190px}
	.cp-venues{grid-template-columns:1fr}
}

/* ===========================================================================
   12. Calque de composition
   ---------------------------------------------------------------------------
   La charte donne les couleurs, les rayons et les polices. Ce qu'elle ne dit
   pas, c'est le rythme : quelle taille pour un titre, combien d'air entre les
   sections, ce qui bouge au survol. C'est l'objet de cette couche.

   Trois partis pris la traversent.

   1. L'affiche est la seule vraie couleur de la page. Tout le reste est blanc,
      gris et magenta — l'interface s'efface pour que les films ressortent.

   2. Le magenta ne décore jamais. Il signale une action possible ou un état
      choisi, rien d'autre. Une couleur d'appel employée en aplat décoratif
      cesse d'appeler.

   3. Rien ne bouge sans raison. Les seules animations répondent à un geste :
      un survol, un focus. Aucune entrée automatique, aucun carrousel qui
      défile seul.
   ======================================================================== */

/* --- Rythme typographique ------------------------------------------------
   Les titres sont serrés et lourds, le texte courant aéré. Le contraste entre
   les deux fait la hiérarchie, plus sûrement qu'une différence de taille.
   ---------------------------------------------------------------------- */

.cp-h1{
	font-weight:800;
	letter-spacing:-.035em;
	line-height:.94;
	font-size:clamp(2.6rem,7vw,5rem);
}

.cp-h2{
	font-weight:700;
	letter-spacing:-.025em;
	line-height:1.05;
	font-size:clamp(1.5rem,3.2vw,2.25rem);
	margin-bottom:.4rem;
}

.cp-sub{font-size:1.02rem;line-height:1.65;color:var(--cp-gris)}

/* Le sur-titre devient une étiquette, ancrée par un trait court. */
.cp-eyebrow{
	display:flex;align-items:center;gap:.6rem;
	font-size:.72rem;font-weight:700;letter-spacing:.16em;
	color:var(--cp-magenta);
}
.cp-eyebrow::before{
	content:'';width:22px;height:2px;background:currentColor;flex:0 0 auto;
}
.cp-hero .cp-eyebrow::before{background:rgba(255,255,255,.7)}

/* --- Respiration des sections ------------------------------------------- */

.cp-sec{padding:clamp(2.75rem,6vw,4.5rem) 0}
.cp-sec--rule{border-top:1px solid var(--cp-trait)}

/* --- Le bandeau : un écran, pas un rectangle -----------------------------
   La coupe oblique en pied reprend l'angle d'un faisceau de projection. Elle
   évite surtout la barre horizontale qui écrase toutes les pages d'accueil.
   ---------------------------------------------------------------------- */

.cp-hero{
	padding-bottom:clamp(4rem,9vw,7rem);
	clip-path:polygon(0 0,100% 0,100% calc(100% - 3.5vw),0 100%);
}

.cp-hero .cp-h1{
	text-shadow:0 2px 24px rgba(120,0,45,.25);
}

/* Silhouette de palme, discrète, dans l'angle. */
.cp-hero::before{
	content:'';
	position:absolute;right:-4%;bottom:-8%;
	width:min(420px,42vw);aspect-ratio:1;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23ffffff' d='M50 96c-1-22 2-40 9-54-9 6-16 14-21 24 1-16 6-29 15-38-12 3-21 10-28 21 3-15 11-26 24-33-13-1-24 3-33 12 7-14 19-22 35-24-11-6-22-7-34-3 12-9 25-11 39-7-8-9-18-14-30-16 15-4 29 0 41 12-2-11-8-20-17-27 15 4 25 14 30 30 4-10 5-20 3-30 10 11 13 24 9 39 8-7 13-15 16-25 4 15 0 28-11 39 10-3 18-8 25-16-2 16-11 27-26 33 11 1 21-1 30-7-7 14-19 21-36 22 3 15 4 32 4 50z'/%3E%3C/svg%3E") no-repeat center/contain;
	opacity:.08;
	transform:rotate(-12deg);
	pointer-events:none;
}

/* --- Affiches ------------------------------------------------------------
   La carte se soulève et s'entoure d'un liseré magenta ; l'affiche zoome
   légèrement dans son cadre. Deux gestes discrets valent mieux qu'un effet.
   ---------------------------------------------------------------------- */

.cp-card__poster{
	border-radius:var(--cp-r-l);
	box-shadow:var(--cp-ombre);
	transition:box-shadow .28s cubic-bezier(.2,.7,.3,1),transform .28s cubic-bezier(.2,.7,.3,1);
}
.cp-card__poster img{transition:transform .5s cubic-bezier(.2,.7,.3,1)}

.cp-card:hover .cp-card__poster{
	transform:translateY(-4px);
	box-shadow:0 18px 44px rgba(43,43,43,.14),0 0 0 2px var(--cp-magenta);
}
.cp-card:hover .cp-card__poster img{transform:scale(1.045)}

.cp-card__title{
	font-family:var(--cp-display);font-weight:700;
	letter-spacing:-.015em;line-height:1.2;
	text-transform:none;font-size:1rem;
}

.cp-tag{
	border-radius:99px;
	font-family:var(--cp-display);font-size:.62rem;font-weight:700;
	letter-spacing:.1em;
	box-shadow:0 2px 10px rgba(229,0,90,.3);
}
.cp-tag--age{box-shadow:0 2px 10px rgba(184,0,72,.3)}

/* --- Horaires ------------------------------------------------------------
   La pastille est la pièce la plus cliquée du site : elle est traitée comme
   un bouton à part entière, pas comme une étiquette.
   ---------------------------------------------------------------------- */

.cp-time,
.cp-cardtime,
.cp-grille__time{
	border-radius:99px;
	font-family:var(--cp-display);font-weight:600;
	font-variant-numeric:tabular-nums;
	transition:background .18s,color .18s,border-color .18s,transform .18s,box-shadow .18s;
}

a.cp-time:hover,
a.cp-cardtime:hover,
a.cp-grille__time:hover{
	transform:translateY(-1px);
	box-shadow:0 6px 16px rgba(229,0,90,.28);
}

/* --- Cartes agenda ------------------------------------------------------- */

.cp-agenda{
	background:#fff;
	border:1px solid var(--cp-trait);
	border-top:3px solid var(--cp-magenta);
	border-radius:var(--cp-r-l);
	box-shadow:var(--cp-ombre);
	overflow:hidden;
}
.cp-agenda__venue{
	background:var(--cp-sable);
	font-family:var(--cp-display);font-weight:700;letter-spacing:-.01em;
}
.cp-agenda__date{font-family:var(--cp-display);font-weight:700;letter-spacing:-.02em}
.cp-ag-row{transition:background .16s}
.cp-ag-row:hover{background:var(--cp-magenta-voile)}
.cp-ag-row__time{font-family:var(--cp-display);font-weight:700;color:var(--cp-magenta)}
.cp-ag-row__title{font-family:var(--cp-display);font-weight:600;text-transform:none;letter-spacing:-.01em}

.cp-agenda__arrow{
	background:var(--cp-magenta);
	box-shadow:0 4px 12px rgba(229,0,90,.28);
	transition:transform .18s,background .18s,box-shadow .18s;
}
.cp-agenda__arrow:hover:not(:disabled){transform:scale(1.06)}
.cp-agenda__arrow:disabled{background:var(--cp-magenta);opacity:.28;box-shadow:none}

/* --- Bande de jours ------------------------------------------------------ */

.cp-days{border:1px solid var(--cp-trait);border-radius:var(--cp-r-l);overflow:hidden;background:#fff}
.cp-day{border-right:1px solid var(--cp-trait);transition:background .16s,color .16s}
.cp-day:last-child{border-right:0}
.cp-day__num{font-family:var(--cp-display);font-weight:700}
.cp-day.is-active,
.cp-day[aria-current="page"]{background:var(--cp-magenta);color:#fff;box-shadow:none}
.cp-day.is-active .cp-day__name,
.cp-day.is-active .cp-day__month{color:rgba(255,255,255,.85)}

/* --- Boutons ------------------------------------------------------------- */

.cp-pill,
.cp-sticky__cta{
	font-family:var(--cp-display);font-weight:600;letter-spacing:.04em;
	transition:background .18s,transform .18s,box-shadow .18s;
}
.cp-pill:hover,
.cp-sticky__cta:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(229,0,90,.3)}

/* --- Détails qui se remarquent quand ils manquent ------------------------ */

::selection{background:var(--cp-magenta);color:#fff}

:focus-visible{
	outline:2px solid var(--cp-magenta);
	outline-offset:3px;
	border-radius:4px;
}

.cp-film{border-top:1px solid var(--cp-trait)}
.cp-film__title{font-weight:700;letter-spacing:-.02em;text-transform:none}

.cp-foot{background:var(--cp-sable);border-top:2px solid var(--cp-magenta)}
.cp-foot__col h4{font-family:var(--cp-display);color:var(--cp-anthracite);letter-spacing:.1em}

@media (prefers-reduced-motion:reduce){
	.cp-card:hover .cp-card__poster,
	.cp-card:hover .cp-card__poster img,
	a.cp-time:hover,
	a.cp-cardtime:hover,
	a.cp-grille__time:hover,
	.cp-pill:hover,
	.cp-sticky__cta:hover,
	.cp-agenda__arrow:hover:not(:disabled){transform:none}
}

/* ===========================================================================
   13. Bandes
   ---------------------------------------------------------------------------
   Une page d'accueil qui empile des sections blanches finit par se lire comme
   un seul bloc : rien n'indique où l'on en est. Les bandes magenta donnent ces
   points d'appui — on repère sa position au défilement, sans avoir à lire.

   Elles sont rares par construction : deux au maximum sur une page. Au-delà,
   le magenta redevient un fond et cesse de signaler.
   ======================================================================== */

.cp-band{
	position:relative;
	margin-block:clamp(3rem,7vw,5rem);
	padding-block:clamp(3rem,7vw,5rem);
	background:linear-gradient(135deg,var(--cp-magenta) 0%,var(--cp-magenta-clair) 100%);
	color:#fff;
	/* Débordement pleine largeur, quelle que soit la largeur du contenu. */
	width:100vw;
	margin-inline:calc(50% - 50vw);
	/* Coupes obliques opposées : la bande paraît glisser sous la page. */
	clip-path:polygon(0 2.5vw,100% 0,100% calc(100% - 2.5vw),0 100%);
}

.cp-band .cp-eyebrow{color:rgba(255,255,255,.85)}
.cp-band .cp-eyebrow::before{background:rgba(255,255,255,.7)}
.cp-band .cp-h2,
.cp-band h2,
.cp-band h3{color:#fff}
.cp-band .cp-sub{color:rgba(255,255,255,.9)}

/* Trame diagonale, très basse, pour que l'aplat ne soit pas plat. */
.cp-band::before{
	content:'';position:absolute;inset:0;pointer-events:none;
	background:repeating-linear-gradient(
		-45deg,
		rgba(255,255,255,.06) 0 2px,
		transparent 2px 14px
	);
}

.cp-band > *{position:relative;z-index:1}

/* --- Variante sable, pour respirer entre deux bandes fortes ------------- */

.cp-band--sable{
	background:var(--cp-sable);
	color:var(--cp-anthracite);
	clip-path:none;
}
.cp-band--sable::before{display:none}
.cp-band--sable .cp-eyebrow{color:var(--cp-magenta)}
.cp-band--sable .cp-h2{color:var(--cp-anthracite)}
.cp-band--sable .cp-sub{color:var(--cp-gris)}

/* --- Chiffres clés sur la bande ----------------------------------------- */

.cp-band .cp-specs{border:0;background:none;gap:1px}
.cp-band .cp-spec{background:rgba(255,255,255,.1);border:0}
.cp-band .cp-spec b{color:#fff}
.cp-band .cp-spec span{color:rgba(255,255,255,.8)}

/* --- Cartes posées sur la bande ----------------------------------------- */

.cp-band .cp-card__poster{box-shadow:0 14px 34px rgba(120,0,45,.3)}
.cp-band .cp-card__title{color:#fff}
.cp-band .cp-card:hover .cp-card__title{color:#fff}
.cp-band .cp-card:hover .cp-card__poster{box-shadow:0 20px 46px rgba(120,0,45,.4),0 0 0 2px #fff}
.cp-band .cp-cardline__venue{color:rgba(255,255,255,.8)}
.cp-band .cp-cardtime{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.35);color:#fff}
.cp-band a.cp-cardtime:hover{background:#fff;border-color:#fff;color:var(--cp-magenta)}

/* --- Séparateur rayé, pour marquer une rupture sans ouvrir une bande ---- */

.cp-rayures{
	height:6px;
	background:repeating-linear-gradient(
		-45deg,
		var(--cp-magenta) 0 10px,
		transparent 10px 20px
	);
	opacity:.9;
}

@media (max-width:640px){
	.cp-band{clip-path:polygon(0 4vw,100% 0,100% calc(100% - 4vw),0 100%)}
}

@media (prefers-reduced-motion:reduce){
	.cp-band{clip-path:none}
}


/* ===========================================================================
   14. Pied de page
   ---------------------------------------------------------------------------
   Deux rappels du lieu, sans jamais l'illustrer.

   Les coulures reprennent le geste de la sculpture qui accueille le public :
   la peinture qui glisse. L'œuvre elle-même n'est pas reproduite — elle est
   protégée, et une évocation vaut de toute façon mieux qu'une copie.

   Les cocotiers reviennent en silhouettes très basses, à la limite du visible.
   Un décor tropical appuyé daterait la page en deux ans ; à cette intensité,
   il donne un lieu sans imposer un style.
   ======================================================================== */

.cp-foot{position:relative;overflow:hidden}

/* Les coulures pendent du bord supérieur, longueurs inégales. */
.cp-foot::before{
	content:'';
	position:absolute;top:0;left:0;right:0;height:48px;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 48' preserveAspectRatio='none'%3E%3Crect x='0' y='0' width='6' height='43' rx='3.0' fill='%232B2B2B' opacity='.85'/%3E%3Crect x='15' y='0' width='4' height='19' rx='2.0' fill='%232B2B2B' opacity='.7'/%3E%3Crect x='28' y='0' width='4' height='14' rx='2.0' fill='%2300A8A8' opacity='.85'/%3E%3Crect x='36' y='0' width='3' height='42' rx='1.5' fill='%232B2B2B' opacity='.7'/%3E%3Crect x='41' y='0' width='6' height='36' rx='3.0' fill='%23E5005A' opacity='.7'/%3E%3Crect x='51' y='0' width='3' height='41' rx='1.5' fill='%23E5005A' opacity='1'/%3E%3Crect x='56' y='0' width='4' height='23' rx='2.0' fill='%237B4FE0' opacity='1'/%3E%3Crect x='69' y='0' width='5' height='36' rx='2.5' fill='%237B4FE0' opacity='1'/%3E%3Crect x='79' y='0' width='5' height='39' rx='2.5' fill='%23E5005A' opacity='.7'/%3E%3Crect x='87' y='0' width='6' height='25' rx='3.0' fill='%2300A8A8' opacity='.7'/%3E%3Crect x='96' y='0' width='5' height='28' rx='2.5' fill='%232B2B2B' opacity='1'/%3E%3Crect x='107' y='0' width='3' height='12' rx='1.5' fill='%237B4FE0' opacity='1'/%3E%3Crect x='118' y='0' width='3' height='26' rx='1.5' fill='%2300A8A8' opacity='1'/%3E%3Crect x='123' y='0' width='3' height='21' rx='1.5' fill='%23FF5C92' opacity='1'/%3E%3Crect x='135' y='0' width='6' height='33' rx='3.0' fill='%2300A8A8' opacity='1'/%3E%3Crect x='146' y='0' width='5' height='29' rx='2.5' fill='%23E5005A' opacity='.85'/%3E%3Crect x='158' y='0' width='3' height='34' rx='1.5' fill='%232B2B2B' opacity='1'/%3E%3Crect x='165' y='0' width='4' height='14' rx='2.0' fill='%23E5005A' opacity='1'/%3E%3Crect x='178' y='0' width='6' height='19' rx='3.0' fill='%23E5005A' opacity='.7'/%3E%3Crect x='189' y='0' width='6' height='40' rx='3.0' fill='%23FF5C92' opacity='.7'/%3E%3Crect x='199' y='0' width='6' height='32' rx='3.0' fill='%23E5005A' opacity='.85'/%3E%3Crect x='213' y='0' width='4' height='8' rx='2.0' fill='%23F5A623' opacity='.7'/%3E%3Crect x='223' y='0' width='3' height='21' rx='1.5' fill='%23FF5C92' opacity='.85'/%3E%3Crect x='229' y='0' width='3' height='17' rx='1.5' fill='%23FF5C92' opacity='.85'/%3E%3Crect x='238' y='0' width='3' height='29' rx='1.5' fill='%232B2B2B' opacity='.85'/%3E%3Crect x='249' y='0' width='3' height='12' rx='1.5' fill='%23E5005A' opacity='1'/%3E%3Crect x='257' y='0' width='3' height='46' rx='1.5' fill='%23F5A623' opacity='.85'/%3E%3Crect x='269' y='0' width='4' height='45' rx='2.0' fill='%2300A8A8' opacity='.7'/%3E%3Crect x='277' y='0' width='6' height='19' rx='3.0' fill='%23E5005A' opacity='1'/%3E%3Crect x='289' y='0' width='4' height='23' rx='2.0' fill='%23E5005A' opacity='1'/%3E%3Crect x='297' y='0' width='4' height='32' rx='2.0' fill='%2300A8A8' opacity='.7'/%3E%3C/svg%3E") repeat-x top left;
	background-size:auto 48px;
	pointer-events:none;
}

/* Deux cocotiers, l'un grand à droite, l'autre plus petit à gauche. */
.cp-foot::after{
	content:'';
	position:absolute;right:-3%;bottom:-6%;
	width:min(340px,34vw);aspect-ratio:1;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%232B2B2B' d='M50 96c-1-22 2-40 9-54-9 6-16 14-21 24 1-16 6-29 15-38-12 3-21 10-28 21 3-15 11-26 24-33-13-1-24 3-33 12 7-14 19-22 35-24-11-6-22-7-34-3 12-9 25-11 39-7-8-9-18-14-30-16 15-4 29 0 41 12-2-11-8-20-17-27 15 4 25 14 30 30 4-10 5-20 3-30 10 11 13 24 9 39 8-7 13-15 16-25 4 15 0 28-11 39 10-3 18-8 25-16-2 16-11 27-26 33 11 1 21-1 30-7-7 14-19 21-36 22 3 15 4 32 4 50z'/%3E%3C/svg%3E") no-repeat center/contain;
	opacity:.06;
	transform:rotate(-8deg);
	pointer-events:none;
}

.cp-foot__inner{position:relative;z-index:1;padding-top:1.5rem}

.cp-foot__bottom{position:relative;z-index:1}

@media (max-width:640px){
	.cp-foot::before{height:34px;background-size:auto 34px}
	.cp-foot::after{width:60vw;opacity:.05}
}

/* ===========================================================================
   15. Bandeau photographié
   ---------------------------------------------------------------------------
   Une photo de la façade ou d'une salle en fond, sous un voile magenta.

   Le voile n'est pas un effet : sans lui, le texte blanc passe sur un ciel
   clair, une rangée de fauteuils rouges et une casquette blanche, et devient
   illisible en trois endroits différents de la même image. Le dégradé règle
   ce problème une fois pour toutes, quelle que soit la photo.
   ======================================================================== */

.cp-hero.has-photo{
	background:
		linear-gradient(135deg,rgba(229,0,90,.92) 0%,rgba(255,92,146,.86) 100%),
		var(--cp-hero-img) center/cover no-repeat;
	background-blend-mode:multiply,normal;
}

.cp-hero--moyen{
	background:
		linear-gradient(135deg,rgba(229,0,90,.82) 0%,rgba(255,92,146,.72) 100%),
		var(--cp-hero-img) center/cover no-repeat;
	background-blend-mode:multiply,normal;
}

.cp-hero--leger{
	background:
		linear-gradient(135deg,rgba(229,0,90,.66) 0%,rgba(255,92,146,.5) 100%),
		var(--cp-hero-img) center/cover no-repeat;
	background-blend-mode:multiply,normal;
}

/* Assombrissement en pied : le texte y est le plus dense. */
.cp-hero.has-photo .cp-wrap::before{
	content:'';
	position:absolute;inset:auto 0 0 0;height:60%;
	background:linear-gradient(180deg,transparent,rgba(120,0,45,.45));
	pointer-events:none;z-index:-1;
}

.cp-hero.has-photo .cp-wrap{position:relative;z-index:1}

/* La palme s'efface devant une vraie image. */
.cp-hero.has-photo::before{opacity:.05}
.cp-hero.has-photo .cp-louvers{opacity:.5}

/* ===========================================================================
   16. Titres sur fond de marque
   ---------------------------------------------------------------------------
   Chaque page s'ouvre sur la même bande magenta. C'est ce qui donne à
   l'ensemble sa cohérence : quelle que soit la page où l'on arrive, on sait
   immédiatement qu'on est sur le même site.
   ======================================================================== */

.cp-pagehead{
	position:relative;
	width:100vw;margin-inline:calc(50% - 50vw);
	padding:clamp(2.25rem,5vw,3.75rem) 0 clamp(2.5rem,5.5vw,4rem);
	margin-bottom:clamp(1.5rem,3vw,2.5rem);
	background:linear-gradient(135deg,var(--cp-magenta) 0%,var(--cp-magenta-clair) 100%);
	color:#fff;
	clip-path:polygon(0 0,100% 0,100% calc(100% - 2vw),0 100%);
	overflow:hidden;
}

.cp-pagehead::before{
	content:'';position:absolute;inset:0;pointer-events:none;
	background:repeating-linear-gradient(-45deg,rgba(255,255,255,.06) 0 2px,transparent 2px 14px);
}

.cp-pagehead > *{position:relative;z-index:1}

.cp-pagehead .cp-eyebrow{color:rgba(255,255,255,.85)}
.cp-pagehead .cp-eyebrow::before{background:rgba(255,255,255,.7)}
.cp-pagehead .cp-h1,
.cp-pagehead h1{color:#fff}
.cp-pagehead .cp-sub{color:rgba(255,255,255,.9)}

/* --- Distinction des deux salles ----------------------------------------
   Une pastille de couleur devant le nom. Les deux salles portent le même
   magenta dans l'interface : sans repère, on confond deux listes d'horaires
   identiques en un coup d'œil.
   ---------------------------------------------------------------------- */

.cp-cardline__venue{display:flex;align-items:center;gap:.4rem}
.cp-cardline__venue i{
	width:7px;height:7px;border-radius:50%;
	background:currentColor;flex:0 0 auto;
}
.cp-cardline--sainte-marie .cp-cardline__venue{color:var(--cp-magenta)}
.cp-cardline--saint-denis .cp-cardline__venue{color:#00A8A8}

.cp-band .cp-cardline--sainte-marie .cp-cardline__venue{color:#fff}
.cp-band .cp-cardline--saint-denis .cp-cardline__venue{color:rgba(255,255,255,.75)}
.cp-band .cp-cardline--saint-denis .cp-cardline__venue i{background:#8FE8E8}

/* ===========================================================================
   17. Pied de page sur fond de marque
   ======================================================================== */

.cp-foot{
	background:linear-gradient(135deg,var(--cp-magenta) 0%,var(--cp-magenta-clair) 100%);
	border-top:0;
	color:#fff;
}

/* La trame diagonale de la bande, reprise à l'identique. */
.cp-foot__grain{
	position:absolute;inset:0;pointer-events:none;
	background:repeating-linear-gradient(-45deg,rgba(255,255,255,.07) 0 2px,transparent 2px 16px);
}

.cp-foot,
.cp-foot p,
.cp-foot li,
.cp-foot address{color:rgba(255,255,255,.9)}

.cp-foot a{color:#fff}
.cp-foot a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}

.cp-foot__col h4{color:#fff}
.cp-foot__tag,
.cp-foot__legal,
.cp-foot__stamp{color:rgba(255,255,255,.75)}

.cp-foot__venue{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25)}
.cp-foot__venue b{color:#fff}

.cp-news input{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.35);color:#fff}
.cp-news input::placeholder{color:rgba(255,255,255,.7)}
.cp-news button{background:#fff;color:var(--cp-magenta)}
.cp-news button:hover{background:rgba(255,255,255,.88)}

.cp-social a{border-color:rgba(255,255,255,.3);color:#fff}
.cp-social a:hover{background:#fff;color:var(--cp-magenta)}

/* Les coulures se détachent en blanc sur la couleur. */
.cp-foot::before{opacity:.85;mix-blend-mode:screen}
.cp-foot::after{opacity:.09}

/* --- Illustration du pied de page --------------------------------------- */

.cp-foot__figure{
	position:absolute;right:2%;bottom:0;
	width:min(280px,26vw);height:auto;
	object-fit:contain;object-position:bottom;
	pointer-events:none;
	filter:drop-shadow(0 12px 30px rgba(120,0,45,.35));
	z-index:0;
}

@media (max-width:900px){
	.cp-foot__figure{opacity:.25;right:-4%;width:min(220px,42vw)}
}

/* ===========================================================================
   18. En-tête de fiche film
   ---------------------------------------------------------------------------
   Même bande magenta que l'accueil et le programme. L'affiche s'y détache
   nettement mieux que sur le gris : un fond neutre derrière une image la
   laisse flotter, un fond coloré la pose.
   ======================================================================== */

.cp-fhero{
	position:relative;
	width:100vw;margin-inline:calc(50% - 50vw);
	padding:clamp(2rem,5vw,3.5rem) 0 clamp(2.25rem,5vw,3.5rem);
	background:linear-gradient(135deg,var(--cp-magenta) 0%,var(--cp-magenta-clair) 100%);
	color:#fff;
	clip-path:polygon(0 0,100% 0,100% calc(100% - 2vw),0 100%);
	overflow:hidden;
}

.cp-fhero::before{
	content:'';position:absolute;inset:0;pointer-events:none;
	background:repeating-linear-gradient(-45deg,rgba(255,255,255,.06) 0 2px,transparent 2px 14px);
}

.cp-fhero__in{position:relative;z-index:1}

.cp-fhero .cp-louvers{
	background:repeating-linear-gradient(90deg,transparent 0 26px,rgba(255,255,255,.08) 26px 27px);
}

.cp-fhero .cp-eyebrow{color:rgba(255,255,255,.85)}
.cp-fhero .cp-eyebrow::before{background:rgba(255,255,255,.7)}
.cp-fhero .cp-h1{color:#fff}
.cp-fhero .cp-meta,
.cp-fhero .cp-meta span{color:rgba(255,255,255,.85)}
.cp-fhero p{color:rgba(255,255,255,.92)}

/* L'affiche gagne un liseré clair et une ombre portée colorée. */
.cp-fhero__poster{
	border-radius:var(--cp-r-l);
	overflow:hidden;
	box-shadow:0 18px 44px rgba(120,0,45,.35),0 0 0 1px rgba(255,255,255,.35);
}

/* Les pastilles de version et de format s'inversent. */
.cp-fhero .cp-chipflag{border-color:rgba(255,255,255,.6);color:#fff}
.cp-fhero .cp-chipflag--fmt{border-color:rgba(255,255,255,.6);color:#fff}
.cp-fhero .cp-tag--age{background:#fff;color:var(--cp-age)}
.cp-fhero .cp-tag--new{background:#fff;color:var(--cp-magenta)}
.cp-fhero .cp-tag--preview{background:rgba(255,255,255,.2);color:#fff}
.cp-fhero .cp-tag--excl,
.cp-fhero .cp-tag--custom{background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.4)}

/* Le bouton de bande-annonce se pose sur la couleur. */
.cp-fhero .cp-pill{background:#fff;color:var(--cp-magenta)}
.cp-fhero .cp-pill:hover{background:rgba(255,255,255,.88);color:var(--cp-magenta-fonce)}

/* Sous la bande-annonce, la coupe haute disparaît : le lecteur la porte déjà. */
.cp-fhero.is-under-reel{clip-path:polygon(0 0,100% 0,100% calc(100% - 2vw),0 100%)}

/* ===========================================================================
   19. Pied de page — palmeraie
   ---------------------------------------------------------------------------
   Fond magenta, deux plans de palmiers à droite, filet rythmé en tête.

   La profondeur vient de l'écart entre les plans : le fond est grand et pâle,
   le premier plan petit et net. L'inverse de ce qu'on attend — mais c'est
   ainsi qu'on lit une perspective, et ça évite la frise d'arbres alignés.
   ======================================================================== */

/* Le filet remplace les coulures : même rappel, sans le côté figuratif. */
.cp-foot__rule{
	position:absolute;top:0;left:0;right:0;height:5px;z-index:2;
	background:repeating-linear-gradient(
		90deg,
		var(--cp-magenta-fonce) 0 34px,
		#fff 34px 44px,
		var(--cp-magenta-fonce) 44px 62px,
		rgba(255,255,255,.55) 62px 70px
	);
}

/* Les anciennes coulures cèdent la place. */
.cp-foot::before{display:none}
.cp-foot::after{display:none}

.cp-foot__palms{
	position:absolute;right:0;bottom:0;
	width:min(760px,68%);height:auto;
	pointer-events:none;z-index:0;
}

.cp-foot__palms--far{fill:#fff;opacity:.10}
.cp-foot__palms--near{fill:var(--cp-magenta-fonce);opacity:.34}

/* Le contenu passe devant, avec un dégradé de lisibilité derrière lui. */
.cp-foot__inner,
.cp-foot__bottom{position:relative;z-index:2}

.cp-foot__inner::before{
	content:'';
	position:absolute;inset:-2rem -2rem -1rem -3rem;
	background:linear-gradient(90deg,var(--cp-magenta) 55%,transparent);
	z-index:-1;pointer-events:none;
}

/* Les deux salles reprennent la pastille des cartes de films. */
.cp-foot__venue b{display:flex;align-items:center;gap:.45rem}
.cp-foot__venue b::before{
	content:'';width:8px;height:8px;border-radius:50%;
	background:#fff;flex:0 0 auto;
}

/* L'horodatage de synchronisation, information la plus utile du bloc. */
.cp-foot__stamp{color:rgba(255,255,255,.8)}

@media (max-width:900px){
	.cp-foot__palms{width:min(420px,86%);opacity:.7}
	.cp-foot__inner::before{display:none}
}

@media (max-width:560px){
	.cp-foot__rule{height:4px}
	.cp-foot__palms{opacity:.45}
}

/* --- Le logo dans le pied de page ---------------------------------------
   Le logo porte déjà du magenta et un anneau gris : posé directement sur le
   fond magenta, son disque disparaît et il ne reste que le C flottant. Un
   socle blanc lui rend sa forme.
   ---------------------------------------------------------------------- */

.cp-foot__logo{
	display:inline-flex;align-items:center;justify-content:center;
	width:88px;height:88px;
	background:#fff;border-radius:50%;
	margin-bottom:1rem;
	box-shadow:0 6px 20px rgba(120,0,45,.28);
}

.cp-foot__logo img,
.cp-foot__logo .custom-logo{
	width:76px;height:76px;
	object-fit:contain;
	display:block;
}

/* Le même logo en filigrane, très grand, à cheval sur le bord gauche.
   Un filigrane centré se lit comme une erreur ; débordant, comme une
   intention. */
.cp-foot__watermark{
	position:absolute;
	left:-70px;bottom:-60px;
	width:min(300px,32vw);height:auto;
	opacity:.09;
	pointer-events:none;
	z-index:0;
	filter:grayscale(1) brightness(3);
}

@media (max-width:900px){
	.cp-foot__logo{width:72px;height:72px}
	.cp-foot__logo img,
	.cp-foot__logo .custom-logo{width:62px;height:62px}
	.cp-foot__watermark{width:200px;left:-56px;bottom:-40px;opacity:.07}
}

/* --- Fiche salle dans le pied de page -----------------------------------
   Le nom complet, l'adresse, les horaires, puis le numéro. Le téléphone est
   traité en bouton : chaque salle a le sien, et se tromper de numéro est la
   principale erreur qu'un visiteur peut commettre ici.
   ---------------------------------------------------------------------- */

.cp-venuecard{
	display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;
	padding:1.1rem 1.2rem;
	background:rgba(255,255,255,.1);
	border:1px solid rgba(255,255,255,.28);
	border-radius:var(--cp-r-l);
}

.cp-venuecard b{
	display:flex;align-items:center;gap:.45rem;
	font-family:var(--cp-display);font-size:1rem;font-weight:700;
	letter-spacing:-.01em;color:#fff;
}
.cp-venuecard b::before{
	content:'';width:8px;height:8px;border-radius:50%;
	background:#fff;flex:0 0 auto;
}

.cp-venuecard address{
	font-style:normal;font-size:.88rem;line-height:1.6;
	color:rgba(255,255,255,.85);
}

.cp-venuecard__hours{
	font-family:var(--cp-display);font-size:.7rem;font-weight:600;
	letter-spacing:.1em;text-transform:uppercase;
	color:rgba(255,255,255,.75);
}

.cp-venuecard__phone{
	display:inline-flex;align-items:center;gap:.45rem;
	margin-top:.15rem;padding:.5rem 1rem;
	background:#fff;border-radius:99px;
	font-family:var(--cp-display);font-size:.9rem;font-weight:600;
	font-variant-numeric:tabular-nums;letter-spacing:.02em;
	color:var(--cp-magenta);
	transition:background .16s,transform .16s;
}
.cp-venuecard__phone:hover{background:rgba(255,255,255,.88);transform:translateY(-1px);text-decoration:none}

.cp-venuecard__map{
	font-family:var(--cp-display);font-size:.72rem;font-weight:600;
	letter-spacing:.09em;text-transform:uppercase;
	color:rgba(255,255,255,.85);
}
.cp-venuecard__map:hover{color:#fff}

.cp-foot__venuelist{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}

/* --- Compte et panier ----------------------------------------------------
   Les deux accès personnels, groupés. Sur mobile ils restent visibles mais
   perdent leur libellé : ce sont deux pictogrammes universels, et la place
   gagnée profite au nom du cinéma.
   ---------------------------------------------------------------------- */

.cp-userbar{display:flex;align-items:center;gap:.4rem;flex:0 0 auto}

.cp-account{
	display:inline-flex;align-items:center;gap:.5rem;
	padding:.55rem 1.1rem;
	border:1px solid var(--cp-magenta);border-radius:99px;
	color:var(--cp-magenta);
	font-family:var(--cp-display);font-size:.72rem;font-weight:600;
	letter-spacing:.09em;text-transform:uppercase;
	white-space:nowrap;
	transition:background .16s,color .16s,transform .16s;
}
.cp-account:hover{background:var(--cp-magenta);color:#fff;transform:translateY(-1px)}

/* Le panier est secondaire : contour gris, il ne concurrence pas le compte. */
.cp-account--cart{border-color:var(--cp-trait);color:var(--cp-gris)}
.cp-account--cart:hover{background:var(--cp-anthracite);border-color:var(--cp-anthracite);color:#fff}

.cp-account svg{flex:0 0 auto}

@media (max-width:900px){
	.cp-account{padding:.55rem .75rem}
	.cp-account__txt{
		position:absolute;width:1px;height:1px;
		padding:0;margin:-1px;overflow:hidden;
		clip:rect(0 0 0 0);white-space:nowrap;border:0;
	}
}

/* ===========================================================================
   20. Colonne latérale
   ---------------------------------------------------------------------------
   Deux colonnes seulement si la zone contient quelque chose. Une colonne vide
   qui réserve un tiers de la largeur sur toutes les pages coûte plus qu'elle
   ne rapporte — d'où la classe conditionnelle plutôt qu'une grille figée.
   ======================================================================== */

.cp-withside{
	display:grid;
	grid-template-columns:minmax(0,1fr) 320px;
	gap:clamp(1.5rem,3vw,2.75rem);
	align-items:start;
}

.cp-withside__main{min-width:0}

.cp-withside__aside{
	position:sticky;top:88px;
	display:flex;flex-direction:column;gap:1.25rem;
}

.cp-widget{
	background:#fff;
	border:1px solid var(--cp-trait);
	border-radius:var(--cp-r-l);
	padding:1.15rem 1.25rem;
	box-shadow:var(--cp-ombre);
}

.cp-widget__title{
	margin:0 0 .9rem;
	font-family:var(--cp-display);font-size:.72rem;font-weight:700;
	letter-spacing:.14em;text-transform:uppercase;
	color:var(--cp-magenta);
	display:flex;align-items:center;gap:.6rem;
}
.cp-widget__title::before{
	content:'';width:22px;height:2px;background:currentColor;flex:0 0 auto;
}

.cp-widget ul{list-style:none;margin:0;padding:0}
.cp-widget li{padding:.35rem 0;border-bottom:1px solid var(--cp-trait)}
.cp-widget li:last-child{border-bottom:0}

/* Les blocs de l'extension perdent leur cadre : le widget le porte déjà. */
.cp-widget .cpx-agendas{grid-template-columns:1fr;max-width:none;gap:1rem}
.cp-widget .cpx-agenda{box-shadow:none;border-radius:var(--cp-r);}
.cp-widget .cpx-agenda__days{max-height:340px}

@media (max-width:1024px){
	.cp-withside{grid-template-columns:1fr}
	.cp-withside__aside{position:static;flex-direction:row;flex-wrap:wrap}
	.cp-withside__aside > *{flex:1 1 280px}
}