/* ===========================================================================
   CinéPalmes — blocs autonomes
   ---------------------------------------------------------------------------
   Ces styles ne dépendent d'aucun thème : toutes les valeurs sont déclarées
   ici. Un thème qui souhaite reprendre la main redéfinit les variables
   --cpx-* ; s'il ne fait rien, l'affichage reste correct.
   ======================================================================== */

.cpx{
	--cpx-magenta:#E5005A;
	--cpx-magenta-fonce:#B80048;
	--cpx-blanc:#FFFFFF;
	--cpx-gris-clair:#F2F2F5;
	--cpx-sable:#F6EFEA;
	--cpx-anthracite:#2B2B2B;
	--cpx-gris:#6D6D6D;
	--cpx-trait:rgba(43,43,43,.12);

	--cpx-marque:var(--cpx-magenta);
	--cpx-alerte:var(--cpx-magenta);
	--cpx-rose:var(--cpx-magenta);
	--cpx-age:#B80048;
	--cpx-fond:var(--cpx-blanc);
	--cpx-fond-2:var(--cpx-gris-clair);
	--cpx-fond-3:var(--cpx-sable);
	--cpx-texte:var(--cpx-anthracite);
	--cpx-doux:var(--cpx-gris);
	--cpx-accent:var(--cpx-gris);
	--cpx-accent-clair:var(--cpx-magenta);

	--cpx-radius:8px;
	--cpx-mono:'Inter',system-ui,sans-serif;

	box-sizing:border-box;
	color:var(--cpx-anthracite);
	font-family:'Inter',system-ui,sans-serif;
	font-size:16px;
	line-height:1.6;
}

.cpx *,
.cpx *::before,
.cpx *::after{box-sizing:inherit}

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

/* --- Agenda ------------------------------------------------------------ */

.cpx-agendas{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.25rem;align-items:start;max-width:780px}

.cpx-agenda{
	background:var(--cpx-fond-2);
	border:1px solid var(--cpx-trait);
	border-top:3px solid var(--cpx-alerte);
	border-radius:var(--cpx-radius);
	overflow:hidden;
	box-shadow:0 10px 26px rgba(0,0,0,.06);
}

.cpx-agenda__venue{
	padding:.65rem 1.1rem;
	background:var(--cpx-fond-3);
	border-bottom:1px solid var(--cpx-trait);
	font-size:1rem;font-weight:700;letter-spacing:-.01em;
}

.cpx-agenda__head{
	display:flex;align-items:center;justify-content:space-between;gap:1rem;
	padding:.85rem 1.1rem;
	border-bottom:1px solid var(--cpx-trait);
}
.cpx-agenda__rel{display:block;font-size:.85rem;color:var(--cpx-doux)}
.cpx-agenda__date{display:block;font-size:1.15rem;font-weight:700;text-transform:capitalize;color:var(--cpx-anthracite)}

.cpx-agenda__nav{display:flex;gap:.4rem;flex:0 0 auto}
.cpx-arrow{
	width:34px;height:34px;
	border:0;border-radius:50%;
	background:var(--cpx-alerte);color:#fff;
	font-size:.9rem;line-height:1;cursor:pointer;
	transition:opacity .16s,background .16s;
}
.cpx-arrow:hover:not(:disabled){background:var(--cpx-magenta-fonce)}
.cpx-arrow:disabled{opacity:.35;cursor:default}

.cpx-agenda__days{max-height:420px;overflow-y:auto}
.cpx-day[hidden]{display:none}

.cpx-empty{margin:0;padding:1.75rem 1.1rem;color:var(--cpx-doux);font-size:.9rem}

.cpx-time{
	display:grid;grid-template-columns:76px minmax(0,1fr);
	gap:.25rem .9rem;align-items:center;
	padding:.65rem 1.1rem;
	border-bottom:1px solid var(--cpx-trait);
	transition:background .14s;
}
.cpx-time:last-child{border-bottom:0}
a.cpx-time:hover{background:rgba(43,43,43,.04)}
.cpx-time.is-static{opacity:.65}

.cpx-row__hour{
	grid-row:1 / span 2;
	font-family:var(--cpx-mono);font-size:1.15rem;font-weight:600;
	font-variant-numeric:tabular-nums;color:var(--cpx-alerte);
}
.cpx-row__title{color:var(--cpx-anthracite);
	grid-column:2;
	font-size:.95rem;font-weight:700;line-height:1.2;text-transform:uppercase;
	overflow:hidden;text-overflow:ellipsis;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.cpx-row__meta{grid-column:2;display:flex;flex-wrap:wrap;gap:.3rem;font-family:var(--cpx-mono);font-size:.62rem;color:var(--cpx-doux)}

.cpx-badge{
	font-style:normal;font-weight:600;letter-spacing:.07em;
	padding:.05rem .3rem;border:1px solid var(--cpx-alerte);border-radius:2px;color:var(--cpx-alerte);
}
.cpx-badge--fmt{border-color:var(--cpx-accent);color:var(--cpx-accent-clair)}

/* Avant-première : rose plein, parce que c'est une occasion et non une
   caractéristique technique. La 3D et la version informent ; l'avant-première
   donne une raison de venir ce soir-là plutôt qu'un autre. */
.cpx-badge--avp{
	border-color:var(--cpx-rose);
	background:var(--cpx-rose);
	color:#FFFFFF;
	font-weight:700;
}
.cpx-badge--age{border-color:var(--cpx-age);background:var(--cpx-age);color:#fff;font-weight:700}

/* Art et Essai : un contour, sans fond. C'est un classement, pas une mise en
   garde — lui donner un aplat le mettrait au même rang que l'interdiction
   d'âge, qui doit rester la seule à s'imposer au regard.

   Le sigle tient en trois signes : un interlettrage plus large qu'un mot
   ordinaire, sans quoi l'esperluette colle à ses voisines. */
.cpx-badge--ae{
	border-color:var(--cpx-anthracite);
	color:var(--cpx-anthracite);
	letter-spacing:.1em;
	white-space:nowrap;
}

/* --- Sections de la page Prochainement ---------------------------------- */

.cpx-lot + .cpx-lot{margin-top:2.5rem}

/* Les couleurs sont relatives, jamais fixes.
 *
 * Ce bloc est posé indifféremment sur fond blanc, sur fond sable, ou — comme
 * sur la page Prochainement — sur un aplat magenta pleine page. Un titre en
 * magenta y devenait invisible, et un titre anthracite presque autant.
 *
 * Tout se déduit donc de `currentColor`, c'est-à-dire de la couleur de texte
 * que le gabarit a déjà choisie pour cette zone : sur fond clair elle est
 * sombre, sur fond magenta elle est blanche. Le contraste suit tout seul. */
.cpx-lot__titre{
	display:flex;align-items:center;gap:.6rem;
	margin:0 0 1rem;padding-bottom:.5rem;
	border-bottom:1px solid color-mix(in srgb, currentColor 28%, transparent);
	font-size:1.05rem;font-weight:700;letter-spacing:.02em;
	text-transform:uppercase;
	color:inherit;
}

/* Le compte dit d'emblée l'ampleur de chaque lot — cinq préventes ou trente
   annonces ne se parcourent pas de la même façon. */
.cpx-lot__compte{
	font-family:var(--cpx-mono);
	font-size:.7rem;font-weight:700;
	padding:.1rem .45rem;border-radius:999px;
	/* Aucun remplissage : sur fond magenta, tout aplat translucide éclaircit
	   le fond sous un chiffre déjà blanc et fait retomber le contraste sous le
	   seuil. Le contour suffit à dessiner la pastille, et il suit la couleur
	   du texte donc ne peut jamais s'effacer. */
	background:transparent;
	box-shadow:inset 0 0 0 1px color-mix(in srgb, currentColor 45%, transparent);
	color:inherit;
}

/* La section achetable se distingue par l'appui, non par la teinte : filet
   plein pleine largeur et pastille inversée. Une teinte d'accent ne tient pas
   quand le fond peut lui-même être cette teinte. */
.cpx-lot[data-cpv-lot="prevente"] .cpx-lot__titre{
	border-bottom-width:2px;
	border-bottom-color:currentColor;
}
.cpx-lot[data-cpv-lot="prevente"] .cpx-lot__compte{
	/* Pas d'inversion : sur fond magenta, `currentColor` vaut blanc, et un
	   chiffre en `--cpx-fond` — blanc lui aussi — disparaîtrait. L'appui vient
	   d'un fond plus dense et d'un contour, deux effets qui ne dépendent
	   d'aucune teinte absolue. */
	background:transparent;
	box-shadow:inset 0 0 0 2px currentColor;
}

/* Repli pour les navigateurs sans color-mix : des valeurs neutres plutôt
   qu'aucune séparation. */
@supports not (color: color-mix(in srgb, red 50%, transparent)){
	.cpx-lot__titre{border-bottom-color:rgba(128,128,128,.4)}
	.cpx-lot__compte{box-shadow:inset 0 0 0 1px rgba(128,128,128,.55)}
}

.cpx-lot[hidden]{display:none}

/* --- Grille d'affiches -------------------------------------------------- */

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

.cpx-card{display:flex;flex-direction:column;gap:.4rem}
.cpx-card__poster{
	position:relative;display:flex;align-items:center;justify-content:center;
	aspect-ratio:2/3;overflow:hidden;
	border-radius:var(--cpx-radius);background:var(--cpx-fond-2);
	transition:box-shadow .18s;
}
.cpx-card__poster img{width:100%;height:100%;object-fit:cover}
.cpx-card:hover .cpx-card__poster{box-shadow:0 0 0 1px var(--cpx-accent)}

.cpx-initials{font-size:1.8rem;font-weight:800;color:var(--cpx-fond-3)}

.cpx-tag{
	position:absolute;top:.4rem;right:.4rem;
	padding:.15rem .42rem;
	background:var(--cpx-age);
	font-family:var(--cpx-mono);font-size:.66rem;font-weight:700;color:#fff;
}
.cpx-tag--new{background:var(--cpx-rose);color:#FFFFFF;right:auto;left:.4rem}

/* Le classement descend au pied de l'affiche : les deux coins hauts sont pris
   par l'interdiction d'âge à droite et par « Prochainement » à gauche, et un
   troisième signe en haut aurait recouvert le visuel là où il porte le titre.
   Fond anthracite translucide, pour se poser sur n'importe quelle image sans
   la trouer. */
.cpx-tag--ae{
	top:auto;bottom:.4rem;right:auto;left:.4rem;
	background:rgba(43,43,43,.82);
	font-family:var(--cpx-mono);
	font-size:.64rem;font-weight:700;letter-spacing:.1em;
	text-transform:uppercase;
	border-radius:3px;
	backdrop-filter:blur(2px);
}

.cpx-card__title{font-size:.95rem;font-weight:700;line-height:1.15;text-transform:uppercase;color:var(--cpx-anthracite)}
.cpx-card:hover .cpx-card__title{color:var(--cpx-accent-clair)}
.cpx-card__next{font-family:var(--cpx-mono);font-size:.68rem;color:var(--cpx-accent-clair)}

/* --- Programme ---------------------------------------------------------- */

.cpx-film{display:grid;grid-template-columns:96px minmax(0,1fr);gap:1.25rem;padding:1.4rem 0;border-top:1px solid var(--cpx-trait)}
.cpx-film:first-child{border-top:0;padding-top:0}
.cpx-film__poster{display:flex;align-items:center;justify-content:center;aspect-ratio:2/3;overflow:hidden;border-radius:var(--cpx-radius);background:var(--cpx-fond-2)}
.cpx-film__poster img{width:100%;height:100%;object-fit:cover}
.cpx-film__title{margin:0 0 .7rem;font-size:1.25rem;font-weight:700;line-height:1.15;text-transform:uppercase;color:var(--cpx-anthracite)}

.cpx-board{display:grid;grid-template-columns:130px minmax(0,1fr);gap:.9rem;padding:.5rem 0;border-top:1px dashed var(--cpx-trait)}
.cpx-board:first-of-type{border-top:0}
.cpx-board__venue{font-family:var(--cpx-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cpx-accent);padding-top:.4rem}
.cpx-board__times{display:flex;flex-wrap:wrap;gap:.4rem}

.cpx-programme .cpx-time{
	display:inline-flex;align-items:baseline;gap:.3rem;
	padding:.4rem .6rem;
	border:1px solid var(--cpx-trait);border-radius:4px;
	background:var(--cpx-fond-2);
	font-family:var(--cpx-mono);font-size:.92rem;font-variant-numeric:tabular-nums;
}
.cpx-programme a.cpx-time:hover{border-color:var(--cpx-accent);background:var(--cpx-fond-3)}

/* --- Responsive --------------------------------------------------------- */

@media (max-width:560px){
	.cpx-time{grid-template-columns:62px minmax(0,1fr);padding:.6rem .8rem}
	.cpx-row__hour{font-size:1rem}
	.cpx-film{grid-template-columns:72px minmax(0,1fr);gap:.9rem}
	.cpx-board{grid-template-columns:1fr;gap:.35rem}
}

@media (prefers-reduced-motion:reduce){
	.cpx *{transition:none !important}
}

/* --- Prochaine séance --------------------------------------------------- */

.cpx-next{
	display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;
	padding:1rem 1.25rem;
	background:var(--cpx-fond-2);
	border:1px solid rgba(199,147,85,.25);
	border-left:3px solid var(--cpx-alerte);
	border-radius:var(--cpx-radius);
	transition:background .16s;
}
a.cpx-next:hover{background:var(--cpx-fond-3)}
.cpx-next__label{width:100%;font-family:var(--cpx-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cpx-accent)}
.cpx-next__hour{font-family:var(--cpx-mono);font-size:1.5rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--cpx-alerte)}
.cpx-next__film{font-size:1.05rem;font-weight:700;text-transform:uppercase}
.cpx-next__where{font-family:var(--cpx-mono);font-size:.68rem;color:var(--cpx-doux)}

/* --- Carrousel ---------------------------------------------------------- */

.cpx-carousel{
	display:flex;gap:1.1rem;
	overflow-x:auto;padding-bottom:.5rem;
	scroll-snap-type:x mandatory;
	scroll-behavior:smooth;
	scrollbar-width:thin;scrollbar-color:var(--cpx-fond-3) transparent;
}
.cpx-carousel::-webkit-scrollbar{height:6px}
.cpx-carousel::-webkit-scrollbar-thumb{background:var(--cpx-fond-3);border-radius:99px}
.cpx-carousel .cpx-card{flex:0 0 170px;scroll-snap-align:start}

/* --- Groupes de jours (fiche film) -------------------------------------- */

.cpx-daygroup{padding:1rem 0;border-top:1px solid var(--cpx-trait)}
.cpx-daygroup:first-child{border-top:0;padding-top:0}
.cpx-daygroup__date{margin:0 0 .6rem;font-family:var(--cpx-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cpx-accent)}

/* --- Salles ------------------------------------------------------------- */

.cpx-venues{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.cpx-venuecard{
	padding:1.1rem 1.2rem;
	background:var(--cpx-fond-2);
	border:1px solid var(--cpx-trait);border-radius:var(--cpx-radius);
}
.cpx-venuecard b{display:block;margin-bottom:.4rem;font-size:1.02rem}
.cpx-venuecard address{font-style:normal;font-size:.88rem;line-height:1.55;color:var(--cpx-doux)}
.cpx-venuecard__phone{display:inline-block;margin-top:.5rem;font-family:var(--cpx-mono);font-size:.72rem;color:var(--cpx-accent-clair)}
.cpx-venuecard__state{display:block;margin-top:.6rem;font-family:var(--cpx-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cpx-doux)}

/* --- Recherche ---------------------------------------------------------- */

.cpx-search{display:flex;gap:.5rem;max-width:460px}
.cpx-search input{
	flex:1;min-width:0;padding:.7rem .9rem;
	border:1px solid var(--cpx-trait);border-radius:4px;
	background:var(--cpx-fond-2);color:var(--cpx-anthracite);font-size:.95rem;
}
.cpx-search input:focus{outline:2px solid var(--cpx-accent);outline-offset:-2px}
.cpx-search button{
	flex:0 0 auto;padding:.7rem 1.2rem;border:0;border-radius:4px;
	background:var(--cpx-accent);color:#FFFFFF;cursor:pointer;
	font-family:var(--cpx-mono);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
}
.cpx-search button:hover{background:var(--cpx-accent-clair)}

/* --- Bande-annonce ------------------------------------------------------ */

.cpx-video{position:relative;aspect-ratio:16/9;background:var(--cpx-anthracite);border-radius:var(--cpx-radius);overflow:hidden}
.cpx-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* --- Compteur ----------------------------------------------------------- */

.cpx-counter{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--cpx-trait);border:1px solid var(--cpx-trait)}
.cpx-counter > div{padding:1.1rem 1.2rem;background:var(--cpx-fond)}
.cpx-counter b{display:block;font-size:1.7rem;font-weight:700;color:var(--cpx-accent-clair)}
.cpx-counter span{font-family:var(--cpx-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cpx-doux)}

/* --- Bandeau de jours --------------------------------------------------- */

.cpx-days{display:flex;overflow-x:auto;border-top:1px solid var(--cpx-trait);border-bottom:1px solid var(--cpx-trait)}
.cpx-dayjump{
	flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:.05rem;
	min-width:66px;padding:.65rem .5rem;
	border-right:1px solid var(--cpx-trait);
	color:var(--cpx-doux);transition:background .16s,color .16s;
}
.cpx-dayjump:hover{background:var(--cpx-fond-2);color:var(--cpx-anthracite)}
.cpx-dayjump.is-active{background:var(--cpx-texte);color:var(--cpx-fond)}
.cpx-dayjump span{font-size:.6rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.cpx-dayjump strong{font-family:var(--cpx-mono);font-size:1.15rem;font-weight:500}

/* --- Page de réservation ------------------------------------------------ */

/* La page de réservation suivait sa propre mesure — 1400 px —, plus large
   que le site : le module touchait les bords quand tout le reste gardait ses
   marges. Elle se cale désormais sur la même largeur que les autres pages. */
.cpx-reservation{
	width:100%;
	max-width:var(--cp-wrap,1200px);
	margin:0 auto;
	padding-inline:clamp(1.1rem,4vw,2.5rem);
}
.cpx-reservation__head{
	margin:0 0 .75rem;
	font-family:var(--cpx-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--cpx-doux);
}
.cpx-reservation__head strong{color:var(--cpx-anthracite);font-size:.9rem}
.cpx-reservation > div{background:#fff}
.cpx-reservation iframe{display:block}

/* --- Billetterie par-dessus la page ------------------------------------- */

body.cpx-locked{overflow:hidden}

.cpx-modal{
	position:fixed;inset:0;z-index:99999;
	display:flex;align-items:center;justify-content:center;
	padding:clamp(.5rem,3vw,2rem);
	background:rgba(43,43,43,.55);
	opacity:0;visibility:hidden;
	transition:opacity .2s ease,visibility .2s;
}
.cpx-modal.is-open{opacity:1;visibility:visible}

.cpx-modal__panel{
	display:flex;flex-direction:column;
	width:100%;max-width:1400px;height:min(1000px,92vh);
	background:var(--cpx-blanc);
	border:1px solid var(--cpx-trait);
	border-radius:12px;overflow:hidden;
	box-shadow:0 30px 80px rgba(0,0,0,.14);
	transform:translateY(10px);transition:transform .2s ease;
}
.cpx-modal.is-open .cpx-modal__panel{transform:none}

.cpx-modal__head{
	display:flex;align-items:center;justify-content:space-between;gap:1rem;
	padding:.75rem 1.1rem;
	background:var(--cpx-gris-clair);
	border-bottom:1px solid var(--cpx-trait);
	color:var(--cpx-anthracite);
}
.cpx-modal__head strong{display:block;font-size:.95rem;text-transform:uppercase}
.cpx-modal__head span{display:block;font-size:.75rem;color:#8E97A3}

.cpx-modal__actions{display:flex;align-items:center;gap:.5rem;flex:0 0 auto}
.cpx-modal__actions a,
.cpx-modal__actions button{
	padding:.4rem .75rem;
	border:1px solid var(--cpx-trait);border-radius:4px;
	background:none;color:var(--cpx-anthracite);
	font-family:ui-monospace,monospace;font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;
	cursor:pointer;text-decoration:none;
	transition:background .16s,border-color .16s,color .16s;
}
.cpx-modal__actions a:hover{background:#C79355;border-color:#C79355;color:#FFFFFF}
.cpx-modal__actions button:hover{background:#D8262B;border-color:#D8262B;color:#fff}

.cpx-modal iframe{flex:1;width:100%;border:0;background:#fff}

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

/* --- Réservation : centrée, et pleine largeur sur mobile ---------------- */

.cpx-reservation{
	width:100%;
	max-width:var(--cpx-res-w,900px);
	margin-inline:auto;
}

.cpx-reservation__frame{
	width:100%;
	height:var(--cpx-res-h,100vh);
	overflow:hidden;
	border-radius:var(--cpx-res-r,0);
	background:var(--cpx-res-bg,#000);
}

.cpx-reservation__head{text-align:center}

/* Le module CinéOffice suit la même largeur utile. */
/* Le module suit la largeur du site, comme le reste des pages : 900 px le
   laissaient trop étroit, aucune limite le collait aux bords de l'écran. Il
   se cale donc sur --cp-wrap, la mesure du thème, et garde ses marges. */
/* Le sélecteur porte les deux classes du conteneur : le thème libère la
   largeur de tous les blocs « .cpx » posés dans une page, et cette règle
   générale l'emportait sur celle-ci. Le module de billetterie doit garder
   ses marges, lui — il n'est pas une bannière. */
.cpx.cpx-module,
.cp-entry .cpx.cpx-module{
	width:100%;
	max-width:var(--cp-wrap,1180px)!important;
	margin-inline:auto;
	padding-inline:clamp(1.1rem,4vw,2.5rem);
}

/* Le module fixe parfois une largeur sur ses propres conteneurs : elle est
   neutralisée ici, faute de quoi la nôtre ne sert à rien. */
/* CinéOffice charge ses propres feuilles — theme.css et modules.css — qui
   plafonnent la largeur de sa mise en page interne. Nos règles s'arrêtaient
   au conteneur ; il faut viser les enveloppes qu'elles posent. Les noms
   couverts ici sont ceux des grilles courantes : container, wrapper, row,
   content, main, page. */
.cpx-module > div,
.cpx-module .cineoffice,
.cpx-module [class*="container"],
.cpx-module [class*="wrapper"],
.cpx-module [class*="-content"],
.cpx-module [class*="-main"],
.cpx-module [class*="-page"],
.cpx-module > div > div,
.cpx-module main,
.cpx-module section,
.cpx-module #app{max-width:none!important;width:100%}

/* La grille interne suit la largeur disponible plutôt qu'une mesure fixe. */
.cpx-module [class*="row"]{max-width:none!important;margin-inline:0}

@media (max-width:782px){
	/* Sur téléphone, le plan de salle a besoin de toute la largeur : la
	   marge et l'arrondi lui prendraient l'espace dont il manque déjà. */
	.cpx-reservation__frame{
		height:calc(100vh - 60px);
		border-radius:0;
	}
	.cpx-reservation{
		max-width:none;
		margin-inline:calc(50% - 50vw);
		width:100vw;
	}
	.cpx-module{max-width:none}
}

@media (max-width:480px){
	.cpx-reservation__frame{height:calc(100vh - 44px)}
}

/* --- Barre de composants CinéOffice -------------------------------------
   Le module apporte ses propres styles : la barre se contente de les
   disposer, sans imposer de couleurs qui entreraient en conflit.
   ---------------------------------------------------------------------- */

.cpx-vadbar{
	display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;
	padding:.6rem 0;margin-bottom:.75rem;
	border-bottom:1px solid var(--cpx-trait);
}
.cpx-vadbar__item{display:flex;align-items:center;min-height:36px}
.cpx-vadbar__item:last-child{margin-left:auto}

@media (max-width:560px){
	.cpx-vadbar{gap:.5rem .75rem}
	.cpx-vadbar__item:last-child{margin-left:0}
}

/* --- Barre au-dessus de la billetterie ---------------------------------- */

.cpx-bar{
	display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;
	padding:.7rem .9rem;margin-bottom:.75rem;
	background:var(--cpx-fond-2);
	border:1px solid var(--cpx-trait);
	border-radius:var(--cpx-radius);
}

.cpx-bar__venue{display:flex;flex-direction:column;line-height:1.2}
.cpx-bar__venue span{font-family:var(--cpx-mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cpx-accent)}
.cpx-bar__venue strong{font-size:.92rem;color:var(--cpx-anthracite)}

.cpx-bar__switch{
	font-family:var(--cpx-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
	color:var(--cpx-doux);
}
.cpx-bar__switch:hover{color:var(--cpx-accent-clair);text-decoration:underline}

.cpx-bar__links{display:flex;align-items:center;gap:.4rem;margin-left:auto;flex-wrap:wrap}

.cpx-bar__link{
	padding:.4rem .85rem;
	border:1px solid var(--cpx-magenta);border-radius:99px;
	color:var(--cpx-accent-clair);
	font-family:var(--cpx-mono);font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;
	transition:background .16s,color .16s;
}
.cpx-bar__link:hover{background:var(--cpx-accent);color:#FFFFFF}

.cpx-bar__cart{display:inline-flex;align-items:center}

@media (max-width:560px){
	.cpx-bar{gap:.4rem .6rem;padding:.6rem .7rem}
	.cpx-bar__links{margin-left:0;width:100%}
	.cpx-bar__link{flex:1;text-align:center}
}

/* --- Cadre générique : centré, pleine largeur sur mobile ---------------- */

.cpx-frame{
	width:100%;
	max-width:var(--cpx-f-w,900px);
	margin-inline:auto;
}
.cpx-frame iframe{
	display:block;width:100%;
	height:var(--cpx-f-h,1000px);
	border:none;border-radius:var(--cpx-f-r,12px);
	background:#fff;
}

@media (max-width:782px){
	.cpx-frame{max-width:none;width:100vw;margin-inline:calc(50% - 50vw)}
	.cpx-frame iframe{height:calc(100vh - 60px);border-radius:0}
	.cpx-hdr{max-width:none;padding-inline:1rem}
}

/* --- En-tête de billetterie ---------------------------------------------
   Le nom de la salle, seul et centré. Les liens compte et panier ont été
   retirés d'ici : la grille à deux colonnes n'a donc plus lieu d'être, et le
   titre s'aligne sur la billetterie qui suit, elle-même centrée.
   ---------------------------------------------------------------------- */

.cpx-hdr{
	display:flex;justify-content:center;
	width:100%;max-width:900px;margin-inline:auto;
	padding:1.5rem 1rem 1.1rem;
	background:var(--cpx-anthracite);color:#fff;
	text-align:center;
}

.cpx-hdr__title{
	display:flex;align-items:center;justify-content:center;gap:1rem;
	width:100%;margin:0;
	font-size:clamp(1.15rem,2.6vw,1.7rem);font-weight:500;letter-spacing:.01em;
}

/* Un filet de chaque côté : c'est lui qui tient le titre au centre. Un seul
   filet, à droite, le pousserait contre le bord gauche. */
.cpx-hdr__title::before,
.cpx-hdr__title::after{
	content:'';flex:1;max-width:130px;height:1px;
	background:rgba(255,255,255,.35);
}

.cpx-hdr__links{list-style:none;margin:0;padding:0}
.cpx-hdr__links li + li{border-top:1px solid var(--cpx-trait)}
.cpx-hdr__links li:nth-child(odd){background:var(--cpx-trait)}

.cpx-hdr__links a{
	display:flex;align-items:center;justify-content:flex-end;gap:.75rem;
	padding:.7rem 1rem;
	color:#fff;font-size:1.02rem;
	transition:background .16s;
}
.cpx-hdr__links a:hover{background:var(--cpx-trait)}
.cpx-hdr__links svg{flex:0 0 auto}

@media (max-width:782px){
	.cpx-hdr{padding:1.25rem 1rem 1rem}
	.cpx-hdr__title{font-size:1.05rem}
	.cpx-hdr__title::before,
	.cpx-hdr__title::after{max-width:28px}
}

/* --- Centrage vertical de la billetterie --------------------------------
   Le bloc occupe la hauteur disponible et se place au milieu. Utile quand
   la billetterie est plus courte que l'écran : sans cela elle reste collée
   en haut, avec un grand vide en dessous.
   ---------------------------------------------------------------------- */

.cpx-reservation,
.cpx-frame,
.cpx-module{
	display:flex;
	flex-direction:column;
	justify-content:center;
	min-height:calc(100vh - var(--cpx-offset,120px));
}

/* La hauteur demandée reste un maximum : le cadre ne dépasse pas l'écran. */
.cpx-reservation__frame,
.cpx-frame iframe{
	max-height:calc(100vh - var(--cpx-offset,120px));
}

@media (max-width:782px){
	.cpx-reservation,
	.cpx-frame,
	.cpx-module{min-height:auto;justify-content:flex-start}

	.cpx-reservation__frame,
	.cpx-frame iframe{max-height:none}
}

/* --- Avant-premières -----------------------------------------------------
   La date de sortie est mise en avant autant que l'horaire : c'est elle qui
   fait la valeur de l'avant-première, et sans elle la page ressemblerait à un
   programme ordinaire.
   ---------------------------------------------------------------------- */

.cpx-previews{display:flex;flex-direction:column;gap:1.25rem}

.cpx-preview{
	display:grid;grid-template-columns:110px minmax(0,1fr);
	gap:1.25rem;
	padding:1.25rem;
	background:var(--cpx-blanc);
	border:1px solid var(--cpx-trait);
	border-left:3px solid var(--cpx-magenta);
	border-radius:12px;
}

.cpx-preview__poster{
	aspect-ratio:2/3;overflow:hidden;
	border-radius:8px;background:var(--cpx-gris-clair);
}
.cpx-preview__poster img{width:100%;height:100%;object-fit:cover}

.cpx-preview__flag{
	display:inline-block;margin-bottom:.5rem;
	padding:.2rem .6rem;border-radius:999px;
	background:var(--cpx-magenta);color:#fff;
	font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}

.cpx-preview__title{margin:0 0 .3rem;font-size:1.2rem;font-weight:700;line-height:1.15;color:var(--cpx-anthracite)}
.cpx-preview__title a{color:inherit}
.cpx-preview__title a:hover{color:var(--cpx-magenta)}

.cpx-preview__release{
	margin:0 0 .9rem;
	font-size:.82rem;color:var(--cpx-gris);
}

.cpx-preview__day{
	display:grid;grid-template-columns:150px minmax(0,1fr);
	gap:.75rem;align-items:baseline;
	padding:.5rem 0;border-top:1px dashed var(--cpx-trait);
}
.cpx-preview__date{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--cpx-magenta);font-weight:600}
.cpx-preview__times{display:flex;flex-wrap:wrap;gap:.4rem}

@media (max-width:640px){
	.cpx-preview{grid-template-columns:72px minmax(0,1fr);gap:.9rem;padding:1rem}
	.cpx-preview__day{grid-template-columns:1fr;gap:.3rem}
	.cpx-preview__title{font-size:1.05rem}
}

/* La prévente se signale sous le titre : c'est ce qui distingue une annonce
   d'une place déjà achetable, et donc ce qui décide de cliquer. */
.cpx-card__presale{
	display:inline-block;margin-top:.15rem;
	padding:.15rem .5rem;border-radius:999px;
	background:var(--cpx-magenta);color:#fff;
	font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.cpx-card__presale--avant-premiere{background:var(--cpx-magenta)}
.cpx-card__presale--prevente{background:var(--cpx-anthracite)}

/* La vignette « Événement » : anthracite pour se distinguer des préventes,
   qui portent le magenta. Deux mises en avant de même couleur cesseraient
   toutes deux d'en être une. */
.cpx-tag--evenement{
	background:var(--cpx-anthracite);
	color:#fff;
	right:auto;left:.4rem;
}


/* ===========================================================================
   Page événements
   ---------------------------------------------------------------------------
   Un événement en tête, les autres en agenda. La hiérarchie fait plus pour la
   lisibilité que n'importe quel ornement : six cartes égales ne disent pas
   quoi regarder.
   ======================================================================== */

.cpe{display:block}

/* --- L'événement de tête ------------------------------------------------- */

/* ===========================================================================
   Page Événements — raccordement à la charte du thème
   ===========================================================================
   Cette page emploie les variables de l'extension, dont la palette ressemble à
   celle du thème sans coïncider avec elle : le sable de l'une n'est pas le gris
   de l'autre, et `--cpx-display` n'était même déclarée nulle part — les titres
   retombaient donc sur la police par défaut du navigateur, un serif système,
   pendant que tout le site s'affiche en Montserrat. C'est ce qui rendait la
   page étrangère au premier coup d'œil.

   Plutôt que de réécrire chaque règle, les variables sont redéfinies ici, sur
   la racine du bloc. Elles ne valent que dans cette page, et tout ce qui vit
   dessous — titres, étiquettes, horaires, contours — hérite de la charte sans
   qu'une seule déclaration ait à changer.

   Conséquence utile : le jour où la charte du thème évolue, cette page suivra
   d'elle-même.
   ======================================================================== */

.cpe{
	--cpx-display:      var(--cp-display, 'Montserrat', system-ui, sans-serif);
	--cpx-mono:         var(--cp-mono, 'Inter', system-ui, sans-serif);

	--cpx-anthracite:   var(--cp-anthracite, #2B2B2B);
	--cpx-blanc:        var(--cp-blanc, #FFFFFF);
	--cpx-gris:         var(--cp-gris, #6D6D6D);
	--cpx-gris-clair:   var(--cp-gris-clair, #F2F2F5);
	--cpx-doux:         var(--cp-brume, #6D6D6D);
	--cpx-trait:        var(--cp-trait, rgba(43,43,43,.12));
	--cpx-magenta:      var(--cp-magenta, #E5005A);
	--cpx-magenta-clair:var(--cp-magenta-clair, #FF5C92);
	--cpx-magenta-fonce:var(--cp-magenta-fonce, #B80048);
	--cpx-sable:        var(--cp-sable, #F6EFEA);

	/* Le corps de texte suit celui du site : la page héritait jusqu'ici de
	   la fonte du conteneur, qui n'est pas toujours celle du thème. */
	font-family:var(--cp-body, 'Inter', system-ui, sans-serif);
}

/* Les filtres emploient déjà les classes du thème — cp-venuetabs, cp-chip —
   et sont donc habillés par lui. Rien à redéclarer ici : le faire écraserait
   la charte au lieu de la suivre. */

.cpe-une{
	display:grid;
	grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
	background:var(--cp-blanc, var(--cp-blanc, var(--cpx-blanc)));
	border:1px solid var(--cp-trait, var(--cp-trait, var(--cpx-trait)));
	border-radius:var(--cp-r-l, 16px);
	overflow:hidden;
	margin-bottom:1.5rem;
}

.cpe-une__texte{padding:1.75rem 1.9rem 1.6rem;display:flex;flex-direction:column}

.cpe-une__meta{display:flex;align-items:center;gap:.6rem;margin:0 0 .8rem}
.cpe-une__meta em{font-style:normal;font-size:.82rem;color:var(--cp-gris, var(--cpx-gris))}

/* Étiquettes alignées sur `.cp-chip` : contour fin, fonte à chasse fixe,
   capitales espacées. Elles avaient ici une graisse et une casse propres. */
/* Étiquettes en contour, comme « NOUVEAU » et « -12 » du programme : un
   aplat magenta les faisait passer pour des boutons. */
.cpe-chip{
	display:inline-block;
	padding:.25rem .55rem;border-radius:var(--cp-r-s, 4px);
	background:none;
	border:1px solid var(--cpx-magenta);
	color:var(--cpx-magenta);
	font-family:var(--cpx-mono);
	font-size:.7rem;font-weight:600;
	letter-spacing:.06em;text-transform:uppercase;
}

/* Le titre porte la page : large, serré, sans concurrence autour. */
.cpe-une__titre{
	margin:0;
	font-family:var(--cp-display, Montserrat, system-ui, sans-serif);
	font-size:clamp(1.6rem,3.2vw,2.2rem);
	font-weight:700;line-height:1.05;letter-spacing:-.02em;
}
.cpe-une__titre a{color:var(--cp-anthracite, var(--cp-anthracite, var(--cpx-anthracite)))}
.cpe-une__titre a:hover{color:var(--cp-marque-clair, var(--cp-magenta, var(--cpx-magenta)));text-decoration:none}

.cpe-une__texte-corps{
	margin:.85rem 0 0;max-width:52ch;
	font-size:1rem;line-height:1.6;color:var(--cp-gris, var(--cp-gris, var(--cpx-gris)));
}

/* Les trois faits alignés, séparés du reste par un filet : c'est ce qu'on
   cherche en premier — quand, où, combien. */
.cpe-une__faits{
	display:flex;gap:2rem;flex-wrap:wrap;
	margin-top:1.25rem;padding-top:1.1rem;
	border-top:1px solid var(--cp-trait, var(--cpx-trait));
}
.cpe-une__faits span{
	display:block;
	font-family:var(--cp-mono, var(--cp-mono, var(--cpx-mono)));
	font-size:.66rem;font-weight:600;letter-spacing:.14em;
	text-transform:uppercase;color:var(--cp-brume, var(--cp-gris, var(--cpx-gris)));
}
.cpe-une__faits b{
	display:block;margin-top:.2rem;
	font-family:var(--cp-display, Montserrat, system-ui, sans-serif);
	font-size:1.1rem;font-weight:700;letter-spacing:-.015em;
	color:var(--cp-anthracite, var(--cp-anthracite, var(--cpx-anthracite)));
}

.cpe-une__heures{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.35rem}
/* Même pastille que partout ailleurs, en version un peu plus généreuse : elle
   ouvre la page, pas une ligne de liste. La couleur ne vient qu'au survol. */
.cpe-une__heures a{
	display:inline-flex;align-items:baseline;gap:.32rem;
	padding:.6rem 1.1rem;
	border:1px solid var(--cp-trait, var(--cp-trait, var(--cpx-trait)));
	border-radius:var(--cp-r-s, 6px);
	background:var(--cp-gris-clair, #F2F2F5);
	color:var(--cp-anthracite, var(--cp-anthracite, var(--cpx-anthracite)));
	font-family:var(--cp-mono, var(--cp-mono, var(--cpx-mono)));
	font-size:1rem;font-weight:500;
	font-variant-numeric:tabular-nums;
	text-decoration:none;
	transition:background .16s, border-color .16s, color .16s;
}
.cpe-une__heures a:hover{
	background:var(--cp-marque, var(--cp-magenta, var(--cpx-magenta)));
	border-color:var(--cp-marque, var(--cp-magenta, var(--cpx-magenta)));
	color:#fff;text-decoration:none;
}

.cpe-une__visuel{display:block;position:relative;background:var(--cp-gris-clair, var(--cp-gris-clair, var(--cpx-gris-clair)));min-height:280px}
.cpe-une__visuel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* --- Les suivants, en lignes --------------------------------------------- */

.cpe-suite{display:flex;flex-direction:column;gap:.65rem}

/* La ligne d'événement adopte les mesures des cartes du site : même rayon,
   même contour, et surtout la même réaction au survol. Le glissement latéral
   qu'elle pratiquait n'existe nulle part ailleurs — chaque page a droit à son
   contenu, pas à ses propres gestes. */
.cpe-ligne{
	display:grid;
	grid-template-columns:60px 78px minmax(0,1fr) auto;
	gap:1.1rem;align-items:center;
	background:var(--cp-blanc, var(--cp-blanc, var(--cpx-blanc)));
	border:1px solid var(--cp-trait, var(--cp-trait, var(--cpx-trait)));
	border-radius:var(--cp-r-l, 16px);
	padding:.85rem 1.1rem;
	transition:border-color .16s, box-shadow .16s;
}
.cpe-ligne:hover{
	border-color:var(--cp-marque, var(--cp-magenta, var(--cpx-magenta)));
	box-shadow:var(--cp-ombre, 0 2px 12px rgba(0,0,0,.06));
}

.cpe-ligne__date{text-align:center}
.cpe-ligne__date span{
	display:block;
	font-family:var(--cp-mono, var(--cp-mono, var(--cpx-mono)));
	font-size:.66rem;font-weight:600;letter-spacing:.14em;
	text-transform:uppercase;color:var(--cp-marque, var(--cp-magenta, var(--cpx-magenta)));
}
.cpe-ligne__date b{
	display:block;font-family:var(--cp-display, Montserrat, system-ui, sans-serif);font-size:1.7rem;
	font-weight:700;line-height:1;color:var(--cp-anthracite, var(--cpx-anthracite));
}
.cpe-ligne__date i{
	font-style:normal;
	font-family:var(--cp-mono, var(--cp-mono, var(--cpx-mono)));
	font-size:.66rem;color:var(--cp-brume, var(--cp-gris, var(--cpx-gris)));
	text-transform:lowercase;
}

.cpe-ligne__visuel{display:block;aspect-ratio:2/3;border-radius:var(--cp-r, 8px);overflow:hidden;background:var(--cp-gris-clair, var(--cp-gris-clair, var(--cpx-gris-clair)))}
.cpe-ligne__visuel img{width:100%;height:100%;object-fit:cover;display:block}

/* Le titre reprend celui du programme, à la valeur près : même échelle
   fluide, même graisse, mêmes capitales. C'était l'écart le plus visible
   entre les deux pages — un rem ici contre 1,7 là-bas. */
.cpe-ligne__corps h3{
	margin:.35rem 0 .4rem;
	font-family:var(--cpx-display);
	font-size:clamp(1.3rem,2.6vw,1.7rem);
	font-weight:700;line-height:1.05;letter-spacing:-.01em;
	text-transform:uppercase;
}
.cpe-ligne__corps h3 a{color:var(--cp-anthracite, var(--cp-anthracite, var(--cpx-anthracite)))}
.cpe-ligne__corps h3 a:hover{color:var(--cp-marque-clair, var(--cp-magenta, var(--cpx-magenta)))}
.cpe-ligne__corps p{
	margin:.2rem 0 0;
	font-family:var(--cpx-mono);
	font-size:.8rem;letter-spacing:.04em;
	color:var(--cpx-gris);
}

/* L'étiquette de ligne ne redéfinit plus que ce qui la distingue.
 *
 * Elle imposait auparavant son propre rembourrage et un contour plus pâle,
 * ce qui suffisait à la faire diverger de celles du programme malgré une base
 * alignée — une règle plus spécifique l'emportait sur la charte.
 *
 * Ne reste ici que l'exception voulue : dans une ligne, « Événement » cesse
 * d'être en aplat pour laisser le titre dominer. Tout le reste — forme,
 * mesure, fonte — vient de la base. */
.cpe-ligne__corps .cpe-chip--fort{
	background:none;
	border-color:var(--cpx-magenta);
	color:var(--cpx-magenta);
}

/* Horaires d'un événement.
 *
 * Sur une seule salle, ils restent alignés comme avant. Sur deux, ils se
 * rangent en colonnes nommées : le spectateur voit où il va avant de choisir
 * son heure, au lieu de le découvrir dans la billetterie. */
.cpe-ligne__heures{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:flex-end}

.cpe-ligne__heures--salles{
	flex-direction:column;align-items:flex-end;gap:.55rem;
}

.cpe-salle{display:flex;flex-direction:column;align-items:flex-end;gap:.25rem}

/* Le nom de salle reprend le libellé du tableau des séances : même fonte à
   chasse fixe, même graisse, même espacement. Le spectateur retrouve d'une
   page à l'autre le signe qui désigne un cinéma. */
/* Le libellé reprend celui du programme : l'enseigne en petites capitales
   espacées au-dessus, la ville en gras en dessous. */
.cpe-salle__nom{
	display:block;
	font-family:var(--cpx-display);
	font-size:.86rem;font-weight:700;letter-spacing:-.01em;
	color:var(--cpx-anthracite);
	text-transform:none;white-space:nowrap;
}
.cpe-salle__nom::before{
	content:'CINEPALMES';
	display:block;
	font-family:var(--cpx-mono);
	font-size:.66rem;font-weight:600;letter-spacing:.14em;
	color:var(--cpx-doux);
}

.cpe-salle[hidden]{display:none}

/* Quand le filtre ne laisse qu'une salle, son nom n'apprend plus rien : le
   visiteur vient de le choisir lui-même dans l'onglet au-dessus. */
.cpe-ligne.is-une-salle .cpe-salle__nom,
.cpe-une.is-une-salle .cpe-salle__nom{display:none}

.cpe-une__heures--salles{flex-direction:column;align-items:flex-start;gap:.55rem}

/* « Événement » garde son aplat : c'est la seule étiquette qui qualifie la
   séance elle-même, là où « 2 séances » ou « Séance unique » ne font que
   décrire. Sur le programme, la même distinction existe entre « NOUVEAU »,
   plein, et « -12 », en contour. */
.cpe-chip--fort{
	background:var(--cpx-magenta);
	border-color:var(--cpx-magenta);
	color:#FFFFFF;
}

/* Le premier horaire à venir est cerclé, comme sur le programme : c'est la
   séance qu'on peut encore attraper. */
.cpe-salle__heures a:first-child,
.cpe-une__heures a:first-child{
	border-color:var(--cpx-magenta);
	color:var(--cpx-magenta);
	background:var(--cpx-blanc);
}
.cpe-salle__heures a:first-child:hover,
.cpe-une__heures a:first-child:hover{
	background:var(--cpx-magenta);
	color:#FFFFFF;
}

.cpe-salle__heures{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:flex-end}

/* Sur téléphone, la ligne se replie : les horaires passent à gauche avec le
   reste du texte plutôt que de rester collés au bord droit. */
@media (max-width:720px){
	.cpe-ligne__heures--salles{align-items:flex-start}
	.cpe-salle{align-items:flex-start}
	.cpe-salle__heures{justify-content:flex-start}
}
/* Les horaires reprennent la pastille du reste du site.
 *
 * Elles étaient en magenta plein, ce qu'aucune autre page ne fait : un horaire
 * s'y présente en gris clair, contour fin, chiffres à chasse fixe, et ne prend
 * la couleur de marque qu'au survol. Une pastille magenta se lisait ici comme
 * un appel à l'action alors qu'elle désigne la même chose qu'ailleurs — une
 * heure de séance.
 *
 * Le rayon suit aussi : le site emploie un coin légèrement arrondi, pas la
 * pastille entièrement circulaire. */
.cpe-ligne__heures a{
	display:inline-flex;align-items:baseline;gap:.32rem;
	padding:.5rem .85rem;
	border:1px solid var(--cp-trait, var(--cp-trait, var(--cpx-trait)));
	border-radius:var(--cp-r-s, 6px);
	background:var(--cp-gris-clair, #F2F2F5);
	color:var(--cp-anthracite, var(--cp-anthracite, var(--cpx-anthracite)));
	font-family:var(--cp-mono, var(--cp-mono, var(--cpx-mono)));font-size:.94rem;font-weight:500;
	font-variant-numeric:tabular-nums;
	text-decoration:none;
	transition:background .16s, border-color .16s, color .16s;
}
.cpe-ligne__heures a:hover{
	background:var(--cp-marque, var(--cp-magenta, var(--cpx-magenta)));
	border-color:var(--cp-marque, var(--cp-magenta, var(--cpx-magenta)));
	color:#fff;text-decoration:none;
}

@media (max-width:820px){
	.cpe-une{grid-template-columns:1fr}
	.cpe-une__visuel{order:-1;min-height:200px;aspect-ratio:16/9}
	.cpe-une__texte{padding:1.35rem 1.4rem 1.5rem}
}

@media (max-width:640px){
	.cpe-ligne{
		grid-template-columns:52px minmax(0,1fr);
		gap:.75rem .9rem;
	}
	.cpe-ligne__visuel{display:none}
	.cpe-ligne__heures{grid-column:1 / -1;justify-content:flex-start}
	.cpe-une__faits{gap:1.25rem}
}

/* Les informations pratiques d'une ligne : groupées sur un seul rang, elles
   se lisent d'un coup plutôt que de se chercher. */
.cpe-ligne__tags{display:flex;gap:.4rem;flex-wrap:wrap;margin:0}

.cpe-chip--creux{
	background:transparent;color:var(--cp-gris, var(--cpx-gris));
	border:1px solid var(--cp-trait, var(--cpx-trait));
}

.cpe-ligne__texte{
	margin:.4rem 0 0;
	font-size:.85rem;line-height:1.55;color:var(--cp-gris, var(--cpx-gris));
}

.cpe-ligne__faits{
	display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;
	margin:.45rem 0 0;
	font-family:var(--cp-display, Montserrat, system-ui, sans-serif);font-size:.76rem;font-weight:600;
	letter-spacing:.04em;color:var(--cp-anthracite, var(--cpx-anthracite));
}
.cpe-sep{color:var(--cp-trait, var(--cpx-trait))}

.cpe-ligne{align-items:start}
.cpe-ligne__date,
.cpe-ligne__heures{padding-top:.35rem}

/* Réalisation et distribution sous le synopsis du bandeau : deux lignes
   discrètes, qui suffisent à situer un film inconnu. */
.cpe-une__credits{
	margin:.7rem 0 0;
	font-size:.82rem;line-height:1.7;color:var(--cp-gris, var(--cpx-gris));
}
.cpe-une__credits b{
	font-family:var(--cp-display, Montserrat, system-ui, sans-serif);font-size:.68rem;font-weight:700;
	letter-spacing:.09em;text-transform:uppercase;color:var(--cp-anthracite, var(--cpx-anthracite));
	margin-right:.35rem;
}

/* Les faits passent à la ligne plutôt que de se serrer : ils sont désormais
   jusqu'à cinq. */
.cpe-une__faits{gap:1.5rem 2rem}
/* --- Page événements : ce qui lui appartient en propre -------------------
   Les barres de filtres reprennent les classes du programme — cp-venuetabs,
   cp-refine, cp-chip —, donc le thème les habille. Ne restent ici que l'état
   masqué et le message de liste vide.
   ---------------------------------------------------------------------- */

.cpe-vide{
	margin:0 0 1.25rem;padding:1.5rem 1.1rem;
	border:1px dashed var(--cp-trait, var(--cp-trait, var(--cpx-trait)));border-radius:var(--cp-r-l, 16px);
	text-align:center;color:var(--cp-gris, var(--cpx-gris));font-size:.9rem;
}

.cpe-une[hidden],
.cpe-ligne[hidden]{display:none}

/* Les deux barres reprises du thème respirent un peu plus sur cette page,
   qui n'a pas de bande de jours entre elles. */
.cpe .cp-venuetabs{margin-bottom:1rem}
.cpe .cp-refine{margin-bottom:1.75rem}

/* --- Prochainement : les rares compléments à la mise en page du thème -----
   Les lignes reprennent cp-list et cp-film, donc le thème s'en charge. Ne
   restent que le synopsis et la ligne de date, qui n'existent pas sur le
   programme — celui-ci affiche des horaires à leur place.
   ---------------------------------------------------------------------- */

.cp-film__text{
	margin:.5rem 0 0;max-width:64ch;
	font-size:.88rem;line-height:1.6;color:var(--cpx-gris);
}

.cp-film__when{
	margin:.7rem 0 0;
	font-family:var(--cp-display, Montserrat, system-ui, sans-serif);font-size:.9rem;color:var(--cpx-anthracite);
}
.cp-film__when b{color:var(--cpx-magenta)}

/* Prochainement : les barres viennent du thème, seule la carte masquée
   appartient à cette page. */
.cpx-card[hidden]{display:none}

/* --- Filtres : boutons habillés comme les liens du thème -----------------
   Le thème stylise .cp-venuetab pour des <a>. Nos filtres sont des <button>,
   auxquels le navigateur impose son fond gris, sa bordure et sa police —
   aucune de ces trois propriétés n'étant redéfinie par la règle du thème,
   elles passaient au travers. On les neutralise ici plutôt que de recopier
   la charte, qui reste la source.
   ---------------------------------------------------------------------- */

button.cp-venuetab,
button.cp-chip{
	-webkit-appearance:none;appearance:none;
	background:none;
	font:inherit;
	cursor:pointer;
	border-radius:0;
}

button.cp-venuetab{border:0;border-bottom:2px solid transparent}
button.cp-chip{border-radius:99px}

/* La barre des salles a besoin de son filet, que le bouton ne porte pas. */
.cpx .cp-venuetabs{
	display:flex;flex-wrap:wrap;gap:.3rem;
	margin-bottom:1.25rem;
	border-bottom:1px solid var(--cpx-trait);
}

/* Le filtre de l'agenda : une salle seule occupe toute la largeur plutôt que
   de laisser une colonne vide à côté d'elle. */
.cpx-agendas__item[hidden]{display:none}
[data-cpa].is-seul .cpx-agendas{grid-template-columns:1fr}

/* --- Onglets de l'espace client ------------------------------------------
   Le module de CinéOffice les compose en petit, ce qui convient à un écran
   de bureau mais pas au doigt. Les noms de classes ne nous étant pas connus,
   les règles visent la structure — les liens et boutons d'une barre
   d'onglets — plutôt que des classes précises.
   ---------------------------------------------------------------------- */

.cpx-module [role="tablist"] [role="tab"],
.cpx-module [class*="tab"] > a,
.cpx-module [class*="tab"] > button,
.cpx-module [class*="onglet"] > a,
.cpx-module nav a{
	font-size:1rem!important;
	padding:.85rem 1.15rem!important;
	line-height:1.3!important;
}

/* La barre elle-même respire, et défile plutôt que de tasser ses onglets. */
.cpx-module [role="tablist"],
.cpx-module [class*="tabs"]{
	gap:.25rem!important;
	overflow-x:auto;
	scrollbar-width:none;
}
.cpx-module [role="tablist"]::-webkit-scrollbar,
.cpx-module [class*="tabs"]::-webkit-scrollbar{display:none}

/* Le corps du module suit : lire ses tableaux à 12 px demande un effort que
   rien ne justifie sur un site public. */
.cpx-module{font-size:1rem}
.cpx-module table{font-size:.95rem}
.cpx-module button,
.cpx-module input,
.cpx-module select{font-size:1rem}

@media (max-width:640px){
	.cpx-module [role="tablist"] [role="tab"],
	.cpx-module [class*="tab"] > a,
	.cpx-module [class*="tab"] > button,
	.cpx-module nav a{
		font-size:.95rem!important;
		padding:.8rem .9rem!important;
		white-space:nowrap;
	}
}


/* --- Alerte d'ouverture des séances ------------------------------------- */

/* Le bloc emprunte au thème plutôt qu'à sa propre palette.
 *
 * Il est rendu par l'extension mais s'affiche sur la fiche du film, dont il
 * doit avoir l'air d'être une partie. Un fond sable et un rayon propres le
 * faisaient lire comme une pièce rapportée. Les variables du thème sont donc
 * prises en premier, celles de l'extension ne servant que de repli si le bloc
 * est posé ailleurs — dans un contenu, par un code court.
 *
 * Le fond et le contour se déduisent de la couleur du texte : le bloc suit
 * ainsi la page sur laquelle il tombe, claire ou sombre. */
.cpx-alerte{
	margin:1.5rem 0;padding:1.5rem;
	border-radius:var(--cp-r-l, var(--cpx-radius));
	background:color-mix(in srgb, currentColor 4%, transparent);
	border:1px solid color-mix(in srgb, currentColor 14%, transparent);
	color:inherit;
}

.cpx-alerte__titre{
	margin:0 0 .35rem;
	font-size:1.15rem;font-weight:700;
	text-transform:uppercase;letter-spacing:.02em;
	color:inherit;
}

.cpx-alerte__pitch{
	margin:0 0 1rem;max-width:44ch;line-height:1.5;
	color:inherit;opacity:.78;
}

/* Le champ et le bouton se séparent sous 30rem : côte à côte sur un téléphone,
   le champ devient trop court pour qu'on relise son adresse avant d'envoyer. */
.cpx-alerte__ligne{display:flex;flex-wrap:wrap;gap:.5rem;max-width:34rem}

/* Le champ garde un fond franc : un champ de saisie translucide se confond
   avec le bloc, et on ne voit plus où l'on écrit. */
.cpx-alerte__champ{
	flex:1 1 16rem;min-width:0;
	padding:.7rem .9rem;
	border:1px solid color-mix(in srgb, currentColor 28%, transparent);
	border-radius:var(--cp-r, calc(var(--cpx-radius) / 2));
	background:var(--cp-fond, var(--cpx-fond));
	font:inherit;font-size:1rem;
	color:var(--cp-texte, var(--cpx-texte));
}
.cpx-alerte__champ:focus{outline:2px solid var(--cp-rose, var(--cpx-marque));outline-offset:1px}
.cpx-alerte__champ:disabled{opacity:.6}

/* Le bouton reprend celui de « Réserver maintenant » : même rose, même rayon,
   même graisse. Les deux occupent la même place selon l'état du film, et une
   différence de forme se lirait comme une différence de nature. */
.cpx-alerte__bouton{
	flex:0 0 auto;
	padding:.7rem 1.4rem;border:0;
	border-radius:var(--cp-r, calc(var(--cpx-radius) / 2));
	background:var(--cp-rose, var(--cpx-marque));color:#FFFFFF;
	font:inherit;font-size:1rem;font-weight:700;
	cursor:pointer;
	transition:transform .12s ease, box-shadow .12s ease;
}
.cpx-alerte__bouton:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.22)}
.cpx-alerte__bouton:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none}

.cpx-alerte__retour{margin:.7rem 0 0;font-weight:600;color:inherit;min-height:1.2em}
.cpx-alerte__retour.is-erreur{color:var(--cp-rose, var(--cpx-alerte))}

.cpx-alerte__compte{margin:.5rem 0 0;font-size:.85rem;color:inherit;opacity:.7}

.cpx-alerte__mention{margin:.9rem 0 0;font-size:.78rem;color:inherit;opacity:.65;line-height:1.4}

/* Une fois inscrit, l'argumentaire n'a plus lieu d'être : il ne reste que la
   confirmation. */
/* Même repli que « Réserver maintenant » : sur téléphone, champ et bouton
   prennent chacun toute la largeur. Côte à côte, le champ devient trop court
   pour qu'on relise son adresse avant d'envoyer. */
@media (max-width:600px){
	.cpx-alerte{padding:1.15rem}
	.cpx-alerte__ligne{gap:.6rem}
	.cpx-alerte__champ,
	.cpx-alerte__bouton{flex:1 1 100%;width:100%}
}

.cpx-alerte.is-inscrit .cpx-alerte__pitch,
.cpx-alerte.is-inscrit .cpx-alerte__compte{display:none}

/* L'appel sur la carte d'un film annoncé.
 *
 * Il était écrit dans le magenta de la marque. Or la page « Prochainement »
 * est elle-même un aplat magenta : le texte s'y effaçait presque entièrement.
 * C'est la même erreur que sur les titres de sections, corrigée là et pas ici.
 *
 * Il reprend donc la couleur du texte de la carte, et se distingue par le
 * soulignement et la flèche — deux marques d'action qui ne dépendent d'aucune
 * teinte, et qui tiennent sur n'importe quel fond. */
.cpx-card__alerte{
	display:inline-block;margin-top:.35rem;
	font-size:.78rem;font-weight:700;
	color:inherit;
	text-decoration:underline;
	text-underline-offset:.25em;
	text-decoration-thickness:1px;
}
.cpx-card__alerte::after{content:" \2192";text-decoration:none;display:inline-block}
.cpx-card:hover .cpx-card__alerte{text-decoration-thickness:2px}


/* --- Champs de carte délégués ------------------------------------------- */

/* Les quatre conteneurs sont dessinés comme des champs par la couche Ant
   Design de CinéOffice, mais restent vides jusqu'à ce que la bibliothèque
   bancaire y dépose son cadre. Ce cadre arrive sans dimensions propres : ces
   règles lui donnent la place et le rang qui lui reviennent, faute de quoi il
   peut être présent et pourtant invisible. */
#hipay-card-holder,
#hipay-card-number,
#hipay-expiry-date,
#hipay-cvc{min-height:32px;overflow:visible}

#hipay-card-holder iframe,
#hipay-card-number iframe,
#hipay-expiry-date iframe,
#hipay-cvc iframe{
	display:block;width:100%;height:100%;min-height:22px;
	border:0;position:relative;z-index:1;pointer-events:auto;
}

/* Rien ne doit recouvrir le formulaire de paiement : une barre publicitaire
   collante intercepterait les clics sans que rien ne le laisse voir. */
.hipayForm,
#hipay-form{position:relative;z-index:2}