/* ==========================================================================
   Ciné-Cantons — feuille de style unique.

   PRINCIPE DE MISE EN PAGE, relevé dans la maquette Figma :
   le site n'a PAS de conteneur centré. Il est composé de BANDES pleine
   largeur, chacune avec 80 px de marge latérale et, le plus souvent, un filet
   inférieur qui traverse tout l'écran. Les colonnes intérieures sont séparées
   par des filets verticaux. C'est ce quadrillage qui donne au site son allure
   de grille imprimée — un conteneur centré de largeur fixe le perdrait.

   Sommaire
   1. Jetons
   2. Base
   3. Bandes et utilitaires
   4. En-tête
   5. Pied de page
   6. Tableau des séances
   7. Sections de l'accueil
   8. Gabarits internes
   9. Adaptatif
   ========================================================================== */

/* 1. Jetons ============================================================== */

:root {
	/* --- Couleurs pilotées par le client (surchargées à l'exécution) --- */
	--cc-accent: #e2001a;
	--cc-accent-sombre: #b80015;
	--cc-fond: #ffffff;

	/* --- Palette relevée dans la maquette. Elle est CHAUDE : l'encre tire
	   sur le brun, les filets sur le beige. --- */
	--cc-encre: #1a1410;
	--cc-encre-douce: #5a524e;
	--cc-gris: #8c7b6b;
	--cc-gris-clair: #efefef;
	--cc-gris-bordure: #d4c9bc;
	--cc-bordure-claire: #e8dfd4;
	--cc-or: #7a5c1f;
	--cc-creme: #e8dfd4;
	--cc-creme-bordure: #c8bfb5;
	--cc-jaune: #f7c158;
	--cc-fonce: #4a3f35;
	--cc-sable: #a89880;
	--cc-noir: #1a1410;
	--cc-blanc: #ffffff;

	/* --- Typographie : Lora pour les titres, DM Sans pour le texte,
	   chargées localement depuis assets/fonts/ (voir fonts.css). --- */
	--cc-police-titre: 'Lora', Georgia, 'Times New Roman', Times, serif;
	--cc-police-texte: 'DM Sans', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;

	/* --- Échelle typographique, en pixels relevés dans la maquette. --- */
	--cc-t-10: 0.625rem;
	--cc-t-11: 0.6875rem;
	--cc-t-12: 0.75rem;
	--cc-t-13: 0.8125rem;
	--cc-t-14: 0.875rem;
	--cc-t-16: 1rem;
	--cc-t-18: 1.125rem;
	--cc-t-20: 1.25rem;
	--cc-t-22: 1.375rem;
	--cc-t-24: 1.5rem;
	--cc-t-26: 1.625rem;
	--cc-t-28: 1.75rem;
	--cc-t-48: clamp(2rem, 4vw, 3rem);
	--cc-t-60: clamp(2.5rem, 5.5vw, 3.75rem);

	/* Alias sémantiques, pour que les règles restent lisibles. */
	--cc-t-xs: var(--cc-t-10);
	--cc-t-s: var(--cc-t-12);
	--cc-t-base: var(--cc-t-13);
	--cc-t-m: var(--cc-t-14);
	--cc-t-l: var(--cc-t-18);
	--cc-t-xl: var(--cc-t-24);
	--cc-t-xxl: var(--cc-t-28);
	--cc-t-titre: var(--cc-t-48);
	--cc-t-geant: var(--cc-t-60);

	/* --- Marge latérale des bandes : 80 px dans la maquette. Elle se
	   resserre sur les petits écrans pour ne pas étrangler le contenu. --- */
	--cc-marge: 80px;

	/* --- Espacements --- */
	--cc-e-1: 4px;
	--cc-e-2: 8px;
	--cc-e-3: 12px;
	--cc-e-4: 16px;
	--cc-e-5: 20px;
	--cc-e-6: 28px;
	--cc-e-7: 32px;
	--cc-e-8: 40px;
	--cc-e-9: 48px;
	--cc-e-10: 56px;

	/* --- Colonnes du tableau des séances, largeurs de la maquette. --- */
	--cc-col-affiche: 180px;
	--cc-col-titre: 280px;
	--cc-col-date: 200px;
	--cc-col-genre: 120px;
	--cc-col-classe: 100px;

	--cc-rayon: 2px;
	--cc-transition: 160ms ease;
}

/* 2. Base =============================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* L'en-tête est collant : sans cette réserve, une ancre placerait la
	   cible sous la barre de navigation. */
	scroll-padding-top: 90px;
}

body {
	margin: 0;
	background: var(--cc-fond);
	color: var(--cc-encre);
	font-family: var(--cc-police-texte);
	font-size: var(--cc-t-base);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	margin: 0;
	font-family: var(--cc-police-titre);
	font-weight: 700;
	line-height: 1.2;
}

h1 { font-size: var(--cc-t-48); }
h2 { font-size: var(--cc-t-24); }
h3 { font-size: var(--cc-t-18); }

p { margin: 0; }

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

a:hover { color: var(--cc-accent); }

img {
	max-width: 100%;
	height: auto;
	display: block;
}

ul, ol { margin: 0; padding-left: 1.15rem; }

table { border-collapse: collapse; }

:focus-visible {
	outline: 2px solid var(--cc-accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* 3. Bandes et utilitaires ============================================== */

/* La bande est l'unité de mise en page du site : pleine largeur, marge
   latérale constante, filet éventuel qui traverse tout l'écran. */
.cc-contenant,
.cc-bande {
	width: 100%;
	padding-inline: var(--cc-marge);
}

.cc-bande--filet { border-bottom: 1px solid var(--cc-gris-bordure); }
.cc-bande--filet-haut { border-top: 1px solid var(--cc-gris-bordure); }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.cc-evitement {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: var(--cc-e-3) var(--cc-e-4);
	background: var(--cc-accent);
	color: var(--cc-blanc);
	text-decoration: none;
}

.cc-evitement:focus {
	left: var(--cc-e-4);
	top: var(--cc-e-4);
	color: var(--cc-blanc);
}

/* Surtitre : DM Sans Bold 10 px, capitales, brun clair. */
.cc-surtitre {
	margin: 0;
	color: var(--cc-gris);
	font-size: var(--cc-t-10);
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
}

.cc-surtitre--or { color: var(--cc-or); }
.cc-surtitre--accent { color: var(--cc-accent); }

/* Titre de section : filet rouge de 4 × 20 px, puis Lora Bold 24 px. */
.cc-titre-barre {
	display: flex;
	align-items: center;
	gap: var(--cc-e-3);
	margin: 0;
	font-size: var(--cc-t-24);
}

.cc-titre-barre::before {
	content: "";
	width: 4px;
	height: 20px;
	background: var(--cc-accent);
	flex: none;
}

.cc-accroche {
	margin: 0;
	color: var(--cc-or);
	font-family: var(--cc-police-titre);
	font-size: var(--cc-t-18);
	font-style: italic;
	font-weight: 400;
}

/* --- Boutons ---
   Trois gabarits dans la maquette : en-tête (18/8), listes et tarifs (16/8),
   sections éditoriales (20-22/10). */
.cc-bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cc-e-2);
	padding: 10px 20px;
	border: 1px solid transparent;
	border-radius: var(--cc-rayon);
	font-family: var(--cc-police-texte);
	font-size: var(--cc-t-12);
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--cc-transition), color var(--cc-transition), border-color var(--cc-transition);
}

.cc-bouton--principal {
	background: var(--cc-accent);
	border-color: var(--cc-accent);
	color: var(--cc-blanc);
}

.cc-bouton--principal:hover {
	background: var(--cc-accent-sombre);
	border-color: var(--cc-accent-sombre);
	color: var(--cc-blanc);
}

.cc-bouton--secondaire {
	background: transparent;
	border-color: var(--cc-creme-bordure);
	color: var(--cc-encre);
}

.cc-bouton--secondaire:hover {
	border-color: var(--cc-encre);
	color: var(--cc-encre);
}

/* Contour encre, utilisé par le bloc des tarifs. */
.cc-bouton--contour {
	padding: 8px 16px;
	background: transparent;
	border-color: var(--cc-encre);
	color: var(--cc-encre);
	font-size: var(--cc-t-11);
}

.cc-bouton--contour:hover {
	background: var(--cc-encre);
	color: var(--cc-blanc);
}

/* Contour rouge, pour « Dons » à côté de « Carte de membre ». */
.cc-bouton--contour-accent {
	background: transparent;
	border-color: var(--cc-accent);
	color: var(--cc-accent);
}

.cc-bouton--contour-accent:hover {
	background: var(--cc-accent);
	color: var(--cc-blanc);
}

.cc-bouton--sombre {
	background: var(--cc-fonce);
	border-color: var(--cc-fonce);
	color: var(--cc-blanc);
}

.cc-bouton--sombre:hover {
	background: var(--cc-encre);
	border-color: var(--cc-encre);
	color: var(--cc-blanc);
}

.cc-bouton--petit { padding: 8px 16px; }
.cc-bouton--entete { padding: 8px 18px; }

.cc-lien-fleche {
	display: inline-flex;
	align-items: center;
	gap: var(--cc-e-2);
	color: var(--cc-accent);
	font-size: var(--cc-t-13);
	font-weight: 600;
	text-decoration: underline;
}

.cc-lien-fleche:hover { color: var(--cc-accent-sombre); }

.cc-icone { flex: none; }

.cc-note {
	margin: 0;
	color: var(--cc-gris);
	font-size: var(--cc-t-12);
}

.cc-vide {
	padding: var(--cc-e-10) var(--cc-marge);
	color: var(--cc-gris);
	text-align: center;
}

/* 4. En-tête ============================================================ */

.cc-bandeau {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-e-3);
	padding-block: var(--cc-e-2);
	border-bottom: 1px solid var(--cc-bordure-claire);
	font-size: var(--cc-t-12);
}

.cc-bandeau__annonce {
	margin: 0;
	color: var(--cc-accent);
	font-weight: 600;
}

.cc-bandeau__etoile { margin-right: var(--cc-e-1); }

.cc-bandeau__liens {
	display: flex;
	align-items: center;
	gap: var(--cc-e-6);
	color: var(--cc-gris);
}

.cc-bandeau__lien {
	color: var(--cc-accent);
	font-weight: 600;
}

/* Le séparateur vertical entre la billetterie et l'adresse, comme en maquette. */
.cc-bandeau__adresse {
	padding-left: var(--cc-e-6);
	border-left: 1px solid var(--cc-bordure-claire);
}

.cc-entete {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--cc-blanc);
	border-bottom: 1px solid var(--cc-bordure-claire);
}

.cc-entete__interieur {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-e-6);
	height: 72px;
}

.cc-entete__marque { display: flex; align-items: center; }

.cc-logo {
	display: inline-flex;
	align-items: center;
	height: 52px;
}

.cc-logo__image,
.custom-logo {
	max-height: 52px;
	width: auto;
}

.cc-nav {
	display: flex;
	align-items: center;
	gap: var(--cc-e-6);
}

.cc-nav__liste {
	display: flex;
	align-items: center;
	gap: var(--cc-e-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cc-nav__liste a {
	font-size: var(--cc-t-13);
	text-decoration: none;
}

.cc-nav__liste .current-menu-item > a,
.cc-nav__liste .current_page_item > a {
	color: var(--cc-accent);
}

.cc-burger {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 1px solid var(--cc-gris-bordure);
	border-radius: var(--cc-rayon);
	cursor: pointer;
}

.cc-burger__barres,
.cc-burger__barres::before,
.cc-burger__barres::after {
	display: block;
	width: 20px;
	height: 2px;
	margin-inline: auto;
	background: var(--cc-encre);
	transition: transform var(--cc-transition), opacity var(--cc-transition);
}

.cc-burger__barres::before,
.cc-burger__barres::after { content: ""; position: relative; }
.cc-burger__barres::before { top: -6px; }
.cc-burger__barres::after { top: 4px; }

.cc-burger[aria-expanded="true"] .cc-burger__barres { background: transparent; }
.cc-burger[aria-expanded="true"] .cc-burger__barres::before { transform: translateY(6px) rotate(45deg); }
.cc-burger[aria-expanded="true"] .cc-burger__barres::after { transform: translateY(-6px) rotate(-45deg); }

.cc-page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.cc-principal { flex: 1 0 auto; }

/* 5. Pied de page ======================================================= */

.cc-pied {
	border-top: 1px solid var(--cc-gris-bordure);
	padding-top: var(--cc-e-9);
	font-size: var(--cc-t-13);
}

.cc-pied__grille {
	display: flex;
	align-items: flex-start;
	padding-bottom: var(--cc-e-8);
}

/* Première colonne à largeur fixe, les suivantes se partagent le reste :
   c'est le rythme de la maquette, pas une grille de colonnes égales. */
.cc-pied__colonne--marque {
	width: 320px;
	flex: none;
	display: flex;
	flex-direction: column;
	gap: var(--cc-e-3);
	padding-right: var(--cc-e-8);
	border-right: 1px solid var(--cc-gris-bordure);
}

.cc-pied__colonne:not(.cc-pied__colonne--marque) {
	flex: 1 1 0;
	min-width: 0;
	padding-inline: var(--cc-e-8);
	border-right: 1px solid var(--cc-gris-bordure);
}

.cc-pied__colonne:last-child { border-right: 0; }

/* Le pied de page porte le logo, pas le nom en toutes lettres. */
.cc-pied__logo {
	display: inline-flex;
	align-items: center;
	margin-bottom: var(--cc-e-1);
}

.cc-pied__logo-image {
	max-height: 64px;
	width: auto;
}

.cc-pied__baseline {
	margin: 0;
	color: var(--cc-accent);
	font-size: var(--cc-t-10);
	font-weight: 600;
	text-transform: uppercase;
}

/* Le petit trait rouge sous la signature. */
.cc-pied__baseline::after {
	content: "";
	display: block;
	width: 32px;
	height: 2px;
	margin-top: var(--cc-e-2);
	background: var(--cc-accent);
}

.cc-pied__description {
	margin: 0;
	color: var(--cc-gris);
	line-height: 1.65;
}

.cc-pied__titre {
	margin: 0 0 var(--cc-e-3);
	color: var(--cc-accent);
	font-family: var(--cc-police-texte);
	font-size: var(--cc-t-10);
	font-weight: 700;
	text-transform: uppercase;
}

.cc-pied__adresse {
	font-style: normal;
	display: grid;
	gap: 2px;
}

.cc-pied__adresse-ligne { font-weight: 600; }

.cc-pied__adresse-ville,
.cc-pied__note,
.cc-pied__courriel a { color: var(--cc-gris); }

.cc-pied__note { margin: var(--cc-e-3) 0 var(--cc-e-2); }

.cc-pied__social,
.cc-pied__social--inactif {
	display: flex;
	align-items: center;
	gap: var(--cc-e-2);
	margin: 0;
	color: var(--cc-or);
}

.cc-pied__social a { text-decoration: none; color: var(--cc-or); }
.cc-pied__social--inactif { color: var(--cc-gris); }

.cc-pied__puce {
	width: 6px;
	height: 6px;
	flex: none;
	border-radius: 3px;
	background: var(--cc-accent);
}

.cc-pied__menu {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--cc-e-2);
}

.cc-pied__menu a { text-decoration: none; }

.cc-pied__bas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-e-3);
	padding-block: var(--cc-e-5);
	border-top: 1px solid var(--cc-gris-bordure);
	color: var(--cc-gris);
	font-size: var(--cc-t-12);
}

.cc-pied__copyright { margin: 0; }

.cc-pied__legal { display: flex; }

.cc-pied__legal-liste {
	display: flex;
	gap: var(--cc-e-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 6. Tableau des séances ================================================ */

/* Chaque ligne est une bande pleine largeur : le filet inférieur doit
   traverser l'écran, donc les cellules extrêmes portent la marge de 80 px
   plutôt qu'un conteneur englobant. */
.cc-seances__table {
	width: 100%;
	table-layout: fixed;
}

.cc-seances__table thead th {
	padding: var(--cc-e-2) 0;
	border-bottom: 1px solid var(--cc-gris-bordure);
	color: var(--cc-gris);
	font-size: var(--cc-t-10);
	font-weight: 700;
	text-align: left;
	text-transform: uppercase;
}

.cc-seances__table td {
	padding: var(--cc-e-4) 0;
	border-bottom: 1px solid var(--cc-gris-bordure);
	vertical-align: middle;
}

.cc-seances__table th:first-child,
.cc-seances__table td:first-child { padding-left: var(--cc-marge); }

.cc-seances__table th:last-child,
.cc-seances__table td:last-child { padding-right: var(--cc-marge); }

/* Largeurs exactes de la maquette. La colonne « billets » prend le reste. */
.cc-seances__cellule-affiche { width: calc(var(--cc-col-affiche) + var(--cc-marge)); }
.cc-seances__cellule-titre { width: var(--cc-col-titre); padding-right: var(--cc-e-4); }
.cc-seances__cellule-date { width: var(--cc-col-date); }
.cc-seances__cellule-genre { width: var(--cc-col-genre); }
.cc-seances__cellule-classement { width: var(--cc-col-classe); }

.cc-seances__affiche,
.cc-seances__affiche-vide {
	display: block;
	width: 120px;
	height: 90px;
	object-fit: cover;
	border-radius: var(--cc-rayon);
	background: var(--cc-gris-clair);
}

.cc-seances__titre {
	margin: 0 0 6px;
	font-family: var(--cc-police-titre);
	font-size: var(--cc-t-18);
	font-weight: 700;
	line-height: 1.25;
}

.cc-seances__titre a { text-decoration: none; }

.cc-seances__synopsis {
	margin: 6px 0 0;
	color: var(--cc-gris);
	font-size: var(--cc-t-12);
	line-height: 1.5;
}

.cc-seances__date {
	display: block;
	margin-bottom: 3px;
	font-size: var(--cc-t-13);
	font-weight: 600;
}

.cc-seances__heure {
	display: block;
	color: var(--cc-accent);
	font-family: var(--cc-police-titre);
	font-size: var(--cc-t-20);
	font-weight: 700;
	line-height: 1.1;
}

.cc-seances__genre {
	display: block;
	margin-bottom: 2px;
	font-size: var(--cc-t-13);
}

.cc-seances__duree {
	display: block;
	color: var(--cc-gris);
	font-size: var(--cc-t-12);
}

.cc-classement {
	display: inline-block;
	padding: 3px 8px;
	background: var(--cc-gris-clair);
	border-radius: var(--cc-rayon);
	font-size: var(--cc-t-11);
	white-space: nowrap;
}

.cc-invite {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	color: var(--cc-gris);
	font-size: var(--cc-t-12);
	font-style: italic;
}

.cc-invite--confirme {
	color: var(--cc-or);
	font-style: normal;
	font-weight: 600;
}

.cc-invite__pastille {
	width: 6px;
	height: 6px;
	flex: none;
	border-radius: 3px;
	background: var(--cc-jaune);
}

/* 7. Sections de l'accueil ============================================== */

/* En-tête de section : bande avec filet inférieur. */
.cc-section__entete {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-e-4);
	padding-block: var(--cc-e-5);
	border-bottom: 1px solid var(--cc-gris-bordure);
}

.cc-section__pied {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-e-3);
	padding-block: var(--cc-e-3);
}

/* --- Hero : 480 px de haut, image de 620 px, liseré rouge de 30 px. --- */
.cc-hero {
	display: flex;
	align-items: stretch;
	height: 480px;
	overflow: hidden;
}

.cc-hero__media {
	position: relative;
	width: 620px;
	flex: none;
	background: var(--cc-noir);
}

.cc-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cc-hero__media::after {
	content: "";
	position: absolute;
	inset-block: 0;
	right: 0;
	width: 30px;
	background: var(--cc-accent);
}

.cc-hero__texte {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 48px 56px;
}

.cc-hero__titre {
	margin: 16px 0 0;
	font-size: var(--cc-t-60);
	line-height: 1.05;
}

.cc-hero__accroche { margin-top: 14px; }

.cc-hero__description {
	margin-top: 14px;
	max-width: 52ch;
	color: var(--cc-encre-douce);
	font-size: var(--cc-t-14);
	line-height: 1.65;
}

.cc-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cc-e-3);
	padding-top: var(--cc-e-6);
}

.cc-hero__actions .cc-bouton { padding: 10px 22px; }

/* --- Tarifs : colonne d'intitulé de 280 px, puis trois cellules égales
   séparées par des filets verticaux. --- */
.cc-tarifs {
	display: flex;
	align-items: stretch;
	border-top: 1px solid var(--cc-gris-bordure);
	border-bottom: 1px solid var(--cc-gris-bordure);
}

.cc-tarifs__intro {
	width: 280px;
	flex: none;
	display: flex;
	flex-direction: column;
	gap: var(--cc-e-2);
	padding: 40px 40px 40px var(--cc-marge);
}

.cc-tarifs__titre {
	margin: 0;
	font-size: var(--cc-t-26);
}

.cc-tarifs__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cc-e-2);
	padding-top: var(--cc-e-4);
}

.cc-tarifs__liste {
	display: flex;
	flex: 1 1 0;
	min-width: 0;
}

.cc-tarif {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--cc-e-1);
	padding: 40px;
	border-left: 1px solid var(--cc-gris-bordure);
}

.cc-tarif:last-child { padding-right: var(--cc-marge); }

.cc-tarif__montant {
	color: var(--cc-accent);
	font-family: var(--cc-police-titre);
	font-size: var(--cc-t-48);
	font-weight: 700;
	line-height: 1;
}

.cc-tarif__libelle {
	color: var(--cc-encre);
	font-size: var(--cc-t-14);
	font-weight: 600;
}

.cc-tarif__precision {
	color: var(--cc-gris);
	font-size: var(--cc-t-12);
}

/* --- Nouvelles : trois colonnes séparées par des filets verticaux. --- */
.cc-nouvelles-bloc {
	display: flex;
	flex-direction: column;
	gap: var(--cc-e-6);
	padding-block: var(--cc-e-9);
	border-bottom: 1px solid var(--cc-gris-bordure);
}

.cc-nouvelles-bloc__entete {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--cc-e-4);
}

.cc-cartes {
	display: flex;
	align-items: flex-start;
}

.cc-carte {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-right: var(--cc-e-7);
	border-right: 1px solid var(--cc-gris-bordure);
}

.cc-carte + .cc-carte { padding-left: var(--cc-e-7); }
.cc-carte:last-child { border-right: 0; padding-right: 0; }

.cc-carte__entete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-e-3);
}

.cc-etiquette {
	display: inline-block;
	padding: 2px 8px;
	background: var(--cc-accent);
	border-radius: 1px;
	color: var(--cc-blanc);
	font-size: var(--cc-t-10);
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
}

.cc-etiquette:hover { background: var(--cc-accent-sombre); color: var(--cc-blanc); }
.cc-etiquette--sombre { background: var(--cc-encre); }
.cc-etiquette--or { background: var(--cc-or); }

.cc-carte__date {
	color: var(--cc-gris);
	font-size: var(--cc-t-11);
	white-space: nowrap;
}

.cc-carte__titre {
	margin: 0;
	font-size: var(--cc-t-16);
	line-height: 1.3;
}

.cc-carte__titre a { text-decoration: none; }

.cc-carte__extrait {
	margin: 0;
	color: var(--cc-encre-douce);
	font-size: var(--cc-t-13);
	line-height: 1.55;
}

/* --- Infolettre --- */
.cc-infolettre {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-e-6);
	padding-block: var(--cc-e-6);
	border-top: 1px solid var(--cc-gris-bordure);
	border-bottom: 1px solid var(--cc-gris-bordure);
}

.cc-infolettre__titre {
	margin: 0 0 2px;
	font-size: var(--cc-t-22);
}

.cc-infolettre__soustitre {
	margin: 0;
	color: var(--cc-gris);
	font-size: var(--cc-t-13);
}

/* La bande passe en colonne : la barre visible en haut, le formulaire
   déplié en dessous. */
.cc-infolettre {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.cc-infolettre__barre {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-e-6);
}

.cc-infolettre__intro { flex: 0 1 auto; min-width: 0; }
.cc-infolettre__bouton { flex: none; }

/* Le formulaire Zeffy vit dans une iframe, donc dans un document étranger que
   notre CSS ne peut pas atteindre. On l'encadre proprement dans nos couleurs,
   et on laisse le client régler la teinte du formulaire côté Zeffy. */
.cc-infolettre__panneau {
	margin-top: var(--cc-e-5);
	border: 1px solid var(--cc-gris-bordure);
	border-radius: var(--cc-rayon);
	overflow: hidden;
	background: var(--cc-blanc);
}

.cc-infolettre__panneau[hidden] { display: none; }
.cc-infolettre__panneau:focus { outline: none; }

.cc-infolettre__panneau iframe {
	display: block;
	width: 100%;
	border: 0;
}

.cc-infolettre__noscript { margin-top: var(--cc-e-4); }

/* Petit chevron sur le bouton, qui pivote une fois le panneau ouvert. */
.cc-infolettre__bouton::after {
	content: "";
	width: 8px;
	height: 8px;
	margin-left: var(--cc-e-1);
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--cc-transition);
}

.cc-infolettre__bouton[aria-expanded="true"]::after {
	transform: translateY(1px) rotate(-135deg);
}

/* Champ de saisie générique (recherche). */
.cc-champ {
	flex: 1 1 0;
	min-width: 0;
	padding: 10px 16px;
	border: 1px solid var(--cc-gris-bordure);
	border-right: 0;
	border-radius: var(--cc-rayon) 0 0 var(--cc-rayon);
	background: var(--cc-blanc);
	color: var(--cc-encre);
	font: inherit;
	font-size: var(--cc-t-13);
}

.cc-champ::placeholder { color: var(--cc-sable); }
.cc-recherche .cc-bouton { border-radius: 0 var(--cc-rayon) var(--cc-rayon) 0; }

/* --- Nous soutenir / partenaires : colonne fixe de 760 px + le reste. --- */
.cc-soutien {
	display: flex;
	align-items: stretch;
}

.cc-soutien__colonne--principale {
	width: 760px;
	flex: none;
	display: flex;
	flex-direction: column;
	gap: var(--cc-e-7);
	padding: 56px 56px 56px var(--cc-marge);
	border-right: 1px solid var(--cc-gris-bordure);
}

.cc-soutien__colonne--partenaires {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--cc-e-6);
	padding: 56px var(--cc-marge) 56px 56px;
}

.cc-bloc {
	display: flex;
	flex-direction: column;
	gap: var(--cc-e-4);
}

.cc-bloc__titre {
	margin: 0;
	font-size: var(--cc-t-28);
}

.cc-bloc__sous-titre {
	margin: 0;
	font-family: var(--cc-police-texte);
	font-size: var(--cc-t-13);
	font-weight: 700;
}

.cc-bloc p {
	margin: 0 0 var(--cc-e-3);
	color: var(--cc-encre-douce);
	font-size: var(--cc-t-14);
	line-height: 1.65;
}

.cc-bloc p:last-child { margin-bottom: 0; }

/* Avantages : puce ronde rouge de 6 px, alignée sur la première ligne. */
.cc-avantages ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--cc-e-2);
}

.cc-avantages li {
	position: relative;
	padding-left: var(--cc-e-4);
	color: var(--cc-encre-douce);
	font-size: var(--cc-t-13);
	line-height: 1.55;
}

.cc-avantages li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 6px;
	height: 6px;
	border-radius: 3px;
	background: var(--cc-accent);
}

.cc-merci {
	color: var(--cc-or) !important;
	font-family: var(--cc-police-titre);
	font-style: italic;
	font-size: var(--cc-t-14);
}

.cc-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cc-e-3);
}

.cc-partenaires {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: var(--cc-e-4);
}

.cc-partenaire {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--cc-e-1);
	min-height: 92px;
	padding: var(--cc-e-4);
	border: 1px solid var(--cc-gris-bordure);
	border-radius: var(--cc-rayon);
	text-align: center;
	text-decoration: none;
}

.cc-partenaire img {
	max-height: 56px;
	width: auto;
	object-fit: contain;
}

.cc-partenaire__nom { font-size: var(--cc-t-14); font-weight: 600; }

.cc-partenaire__mention {
	color: var(--cc-or);
	font-size: var(--cc-t-10);
	text-transform: uppercase;
}

/* 8. Gabarits internes ================================================== */

.cc-page-entete {
	display: flex;
	flex-direction: column;
	gap: var(--cc-e-3);
	padding-block: var(--cc-e-10) var(--cc-e-7);
	border-bottom: 1px solid var(--cc-gris-bordure);
}

.cc-page-entete__titre {
	margin: 0;
	font-size: var(--cc-t-48);
}

.cc-ariane {
	padding-block: var(--cc-e-4);
	color: var(--cc-gris);
	font-size: var(--cc-t-12);
}

.cc-ariane a { text-decoration: none; }
.cc-ariane__separateur { margin-inline: var(--cc-e-2); }

/* --- Détail film --- */
.cc-film {
	display: flex;
	align-items: flex-start;
	gap: var(--cc-e-10);
	padding-block: var(--cc-e-8) var(--cc-e-10);
}

.cc-film__affiche { width: 360px; flex: none; }
.cc-film__affiche img { width: 100%; border-radius: var(--cc-rayon); }

.cc-film__credit {
	margin: var(--cc-e-3) 0 0;
	color: var(--cc-gris);
	font-size: var(--cc-t-11);
	text-align: center;
}

.cc-film__contenu { flex: 1 1 0; min-width: 0; }

.cc-film__titre {
	margin: var(--cc-e-3) 0 var(--cc-e-2);
	font-size: var(--cc-t-48);
}

.cc-film__realisateur { margin-bottom: var(--cc-e-6); }

.cc-film__metas {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 var(--cc-e-6);
	padding: var(--cc-e-3) 0;
	background: var(--cc-gris-clair);
	border-radius: var(--cc-rayon);
}

.cc-film__meta {
	padding-inline: var(--cc-e-5);
	border-right: 1px solid var(--cc-gris-bordure);
}

.cc-film__meta:last-child { border-right: 0; }

.cc-film__meta dt {
	color: var(--cc-gris);
	font-size: var(--cc-t-10);
	text-transform: uppercase;
}

.cc-film__meta dd { margin: 0; font-size: var(--cc-t-14); font-weight: 600; }

.cc-seance {
	padding: var(--cc-e-5);
	margin-bottom: var(--cc-e-7);
	background: var(--cc-creme);
	border: 1px solid var(--cc-creme-bordure);
	border-radius: var(--cc-rayon);
}

.cc-seance__entete {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--cc-e-4);
}

.cc-seance__label {
	margin: 0 0 var(--cc-e-2);
	color: var(--cc-or);
	font-size: var(--cc-t-10);
	font-weight: 700;
	text-transform: uppercase;
}

.cc-seance__date {
	margin: 0 0 var(--cc-e-1);
	font-family: var(--cc-police-titre);
	font-size: var(--cc-t-20);
	font-weight: 700;
}

.cc-seance__lieu { margin: 0; color: var(--cc-encre-douce); font-size: var(--cc-t-13); }

.cc-seance__invite {
	display: inline-flex;
	align-items: center;
	gap: var(--cc-e-2);
	padding: 6px 12px;
	background: var(--cc-jaune);
	border-radius: 999px;
	font-size: var(--cc-t-11);
	font-weight: 600;
	white-space: nowrap;
}

.cc-seance__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cc-e-4);
	margin-top: var(--cc-e-5);
	padding-top: var(--cc-e-4);
	border-top: 1px solid var(--cc-creme-bordure);
}

.cc-seance__note { margin: 0; color: var(--cc-encre-douce); font-size: var(--cc-t-11); }

.cc-film__synopsis { max-width: 70ch; }

.cc-film__synopsis-titre {
	margin: 0 0 var(--cc-e-2);
	color: var(--cc-accent);
	font-family: var(--cc-police-texte);
	font-size: var(--cc-t-10);
	font-weight: 700;
	text-transform: uppercase;
}

.cc-film__synopsis p {
	margin: 0 0 var(--cc-e-3);
	color: var(--cc-encre-douce);
	font-size: var(--cc-t-14);
	line-height: 1.65;
}

/* Crédit d'une image : légende discrète, sous l'image qu'elle concerne.
   Même traitement partout (galerie, portrait) pour que le lecteur reconnaisse
   la mention au premier coup d'œil, où qu'elle apparaisse. */
.cc-credit {
	margin: var(--cc-e-2) 0 0;
	color: var(--cc-gris);
	font-size: var(--cc-t-11);
	line-height: 1.4;
}

/* Crédit d'un portrait d'invité : dernière ligne du bloc, sous le descriptif.
   En italique pour se détacher du texte de présentation sans faire un second
   paragraphe de lecture. */
.cc-credit--portrait {
	font-style: italic;
}

/* Invités : portrait, rôle et descriptif. Le nombre de blocs est libre. */
.cc-invites-bloc {
	margin-top: var(--cc-e-6);
}

.cc-invites-bloc__titre {
	margin: 0 0 var(--cc-e-3);
	font-size: var(--cc-t-18);
}

.cc-invite-bloc {
	display: flex;
	align-items: flex-start;
	gap: var(--cc-e-4);
	padding: var(--cc-e-4);
	border: 1px solid var(--cc-gris-bordure);
	border-radius: var(--cc-rayon);
}

/* Les blocs suivants se collent au précédent : une pile de cartes séparées
   par un filet, plutôt que des cartes flottantes espacées. */
.cc-invite-bloc + .cc-invite-bloc {
	border-top: 0;
	border-radius: 0 0 var(--cc-rayon) var(--cc-rayon);
}

.cc-invite-bloc:has(+ .cc-invite-bloc) {
	border-radius: var(--cc-rayon) var(--cc-rayon) 0 0;
}

.cc-invite-bloc__corps {
	min-width: 0;
}

.cc-invite-bloc__portrait {
	width: 112px;
	height: 112px;
	flex: none;
	border-radius: 50%;
	object-fit: cover;
	/* Filet de sécurité si le portrait fourni n'est pas déjà cadré serré :
	   le disque garde le haut de l'image, donc le visage. */
	object-position: center top;
	background: var(--cc-gris-clair);
}

.cc-invite-bloc__nom {
	margin: 0;
	font-family: var(--cc-police-titre);
	font-size: var(--cc-t-18);
	font-weight: 700;
}

.cc-invite-bloc__role {
	margin: 0 0 var(--cc-e-2);
	color: var(--cc-or);
	font-size: var(--cc-t-11);
	text-transform: uppercase;
}

.cc-invite-bloc__texte {
	margin: 0;
	color: var(--cc-encre-douce);
	font-size: var(--cc-t-13);
	line-height: 1.6;
}

/* Photos du film. */
.cc-galerie {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--cc-e-3);
	margin-top: var(--cc-e-6);
}

.cc-galerie__element {
	margin: 0;
}

.cc-galerie img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--cc-rayon);
}

.cc-film__bas {
	display: flex;
	align-items: flex-start;
	gap: var(--cc-e-10);
	padding-block: var(--cc-e-10);
	border-top: 1px solid var(--cc-gris-bordure);
}

.cc-film__fiche { width: 360px; flex: none; }
.cc-film__trailer { flex: 1 1 0; min-width: 0; }

.cc-fiche { width: 100%; margin-top: var(--cc-e-4); }

.cc-fiche th,
.cc-fiche td {
	padding: var(--cc-e-3) 0;
	border-bottom: 1px solid var(--cc-gris-bordure);
	font-size: var(--cc-t-13);
	text-align: left;
	vertical-align: top;
}

.cc-fiche th {
	width: 40%;
	color: var(--cc-or);
	font-weight: 600;
}

.cc-trailer {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin-top: var(--cc-e-4);
	padding: 0;
	background: var(--cc-noir);
	border: 0;
	border-radius: var(--cc-rayon);
	cursor: pointer;
	overflow: hidden;
}

.cc-trailer img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.75;
	transition: opacity var(--cc-transition);
}

.cc-trailer:hover img { opacity: 0.9; }

.cc-trailer__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--cc-blanc);
}

.cc-trailer__play svg {
	width: 74px;
	height: 74px;
	padding: 20px;
	border: 2px solid rgba(255, 255, 255, 0.8);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.25);
}

.cc-trailer__legende {
	position: absolute;
	left: var(--cc-e-4);
	bottom: var(--cc-e-4);
	margin: 0;
	color: var(--cc-blanc);
	font-size: var(--cc-t-12);
	text-align: left;
}

.cc-trailer iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* --- Comment se rendre --- */
.cc-acces {
	display: flex;
	align-items: flex-start;
	gap: var(--cc-e-10);
	padding-block: var(--cc-e-9);
}

.cc-acces__colonne { flex: 1 1 0; min-width: 0; }
.cc-acces__colonne:last-child { flex: 1.4 1 0; }

.cc-acces__adresse {
	display: flex;
	flex-direction: column;
	gap: var(--cc-e-2);
	padding: var(--cc-e-5);
	margin-bottom: var(--cc-e-5);
	border: 1px solid var(--cc-gris-bordure);
	border-radius: var(--cc-rayon);
	font-style: normal;
}

.cc-acces__nom { margin: 0; font-size: var(--cc-t-22); }

.cc-acces__item {
	display: flex;
	align-items: flex-start;
	gap: var(--cc-e-4);
	padding-block: var(--cc-e-4);
	border-bottom: 1px solid var(--cc-gris-bordure);
}

.cc-acces__item:last-child { border-bottom: 0; }

.cc-acces__icone {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: 50%;
	background: var(--cc-gris-clair);
	color: var(--cc-encre-douce);
}

.cc-acces__item:first-child .cc-acces__icone {
	background: var(--cc-accent);
	color: var(--cc-blanc);
}

.cc-acces__titre {
	margin: 0 0 2px;
	font-family: var(--cc-police-texte);
	font-size: var(--cc-t-14);
	font-weight: 700;
}

.cc-acces__texte { margin: 0; color: var(--cc-encre-douce); font-size: var(--cc-t-13); }

.cc-acces__liste { display: flex; flex-direction: column; }

.cc-acces__carte {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--cc-gris-bordure);
	border-radius: var(--cc-rayon);
	overflow: hidden;
	background: var(--cc-gris-clair);
}

.cc-acces__carte iframe,
.cc-acces__carte img {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

.cc-acces__itineraire { margin-top: var(--cc-e-3); }

/* --- Nouvelles --- */
.cc-nouvelles {
	display: flex;
	align-items: flex-start;
	gap: var(--cc-e-10);
	padding-block: var(--cc-e-9);
}

.cc-article-liste {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--cc-e-5);
}

.cc-article-liste .cc-carte,
.cc-article-liste .cc-carte + .cc-carte {
	padding: var(--cc-e-5);
	border: 1px solid var(--cc-gris-bordure);
	border-radius: var(--cc-rayon);
}

.cc-article-liste .cc-carte__titre { font-size: var(--cc-t-22); }

.cc-aside {
	width: 320px;
	flex: none;
	display: flex;
	flex-direction: column;
	gap: var(--cc-e-5);
}

.cc-aside__bloc {
	display: flex;
	flex-direction: column;
	gap: var(--cc-e-3);
	padding: var(--cc-e-5);
	background: var(--cc-gris-clair);
	border-radius: var(--cc-rayon);
}

.cc-aside__bloc--bordee {
	background: transparent;
	border: 1px solid var(--cc-gris-bordure);
}

.cc-aside__titre { margin: 0; font-size: var(--cc-t-22); }
.cc-aside__bloc p { margin: 0; color: var(--cc-encre-douce); font-size: var(--cc-t-13); }

.cc-aside__form { display: flex; flex-direction: column; gap: var(--cc-e-3); }

.cc-aside__form input[type="email"] {
	width: 100%;
	padding: 10px 16px;
	border: 1px solid var(--cc-gris-bordure);
	border-radius: var(--cc-rayon);
	background: var(--cc-blanc);
	font: inherit;
	font-size: var(--cc-t-13);
}

.cc-article__image { margin: 0 0 var(--cc-e-7); }

/* --- Contenu éditorial --- */
.cc-prose {
	max-width: 78ch;
	padding-block: var(--cc-e-9);
	color: var(--cc-encre-douce);
	font-size: var(--cc-t-14);
	line-height: 1.75;
}

.cc-prose p { margin: 0 0 var(--cc-e-4); }
.cc-prose h2 { margin: var(--cc-e-7) 0 var(--cc-e-3); color: var(--cc-encre); }
.cc-prose img { margin-block: var(--cc-e-5); }
.cc-prose ul, .cc-prose ol { margin: 0 0 var(--cc-e-4); }

.cc-encadre {
	padding: var(--cc-e-5);
	margin-bottom: var(--cc-e-9);
	background: var(--cc-gris-clair);
	border-left: 3px solid var(--cc-accent);
	font-size: var(--cc-t-14);
}

.cc-encadre p { margin: 0; }

/* Le lien est la raison d'être de l'encadré : les liens du site héritent de la
   couleur du texte, celui-ci prend l'accent pour se voir au premier regard. */
.cc-encadre a {
	color: var(--cc-accent);
	font-weight: 600;
}

.cc-recherche {
	display: flex;
	gap: 0;
	margin-top: var(--cc-e-5);
	max-width: 480px;
}

.cc-pagination {
	display: flex;
	gap: var(--cc-e-2);
	margin-top: var(--cc-e-8);
}

.cc-pagination .page-numbers {
	padding: 8px 14px;
	border: 1px solid var(--cc-gris-bordure);
	border-radius: var(--cc-rayon);
	font-size: var(--cc-t-13);
	text-decoration: none;
}

.cc-pagination .current {
	background: var(--cc-accent);
	border-color: var(--cc-accent);
	color: var(--cc-blanc);
}

/* 9. Adaptatif ========================================================== */

/* La marge de 80 px se resserre progressivement : en dessous, les bandes
   toucheraient les bords de l'écran. */
@media (max-width: 1280px) {
	:root { --cc-marge: 40px; }

	.cc-hero__media { width: 45%; }
	.cc-soutien__colonne--principale { width: 58%; }
	.cc-film__affiche, .cc-film__fiche { width: 300px; }
}

@media (max-width: 1080px) {
	:root { --cc-marge: 24px; }

	.cc-seances__cellule-titre { width: auto; }

	.cc-tarifs { flex-wrap: wrap; }
	.cc-tarifs__intro { width: 100%; padding-inline: var(--cc-marge); }

	/* `flex: 1 1 0` (règle de base) l'emporte sur `width` dans un conteneur
	   flex : sans rebaser la base, la liste se calcule une largeur nulle,
	   reste sur la ligne de l'intitulé et sort de l'écran — les tarifs
	   disparaissent et la page gagne un défilement horizontal. */
	.cc-tarifs__liste { flex: 1 1 100%; width: 100%; border-top: 1px solid var(--cc-gris-bordure); }
	.cc-tarif:first-child { border-left: 0; }

	.cc-film, .cc-film__bas, .cc-acces, .cc-nouvelles { flex-direction: column; gap: var(--cc-e-7); }
	.cc-film__affiche, .cc-film__fiche, .cc-aside { width: 100%; }

	.cc-pied__grille { flex-wrap: wrap; gap: var(--cc-e-5); }
	.cc-pied__colonne--marque { width: 100%; padding-right: 0; border-right: 0; }
	.cc-pied__colonne:not(.cc-pied__colonne--marque) { padding-left: 0; }
}

@media (max-width: 900px) {
	/* Le tableau des séances garde ses six colonnes jusqu'à 720 px, mais le
	   synopsis n'y a plus la place d'être lu : il se réduit à une colonne de
	   deux ou trois mots. Le titre, l'horaire et le genre suffisent ici — le
	   synopsis reste sur la fiche du film. */
	.cc-seances__synopsis { display: none; }

	:root {
		--cc-col-affiche: 150px;
		--cc-col-date: 160px;
		--cc-col-genre: 110px;
		--cc-col-classe: 80px;
	}

	.cc-hero { flex-direction: column; height: auto; }
	.cc-hero__media { width: 100%; height: 260px; }
	.cc-hero__media::after { display: none; }
	.cc-hero__texte { padding: var(--cc-e-8) var(--cc-marge); }

	.cc-soutien { flex-direction: column; }

	.cc-soutien__colonne--principale {
		width: 100%;
		padding: var(--cc-e-9) var(--cc-marge);
		border-right: 0;
		border-bottom: 1px solid var(--cc-gris-bordure);
	}

	.cc-soutien__colonne--partenaires { padding: var(--cc-e-9) var(--cc-marge); }

	.cc-infolettre__barre { flex-direction: column; align-items: stretch; gap: var(--cc-e-4); }

	.cc-cartes { flex-direction: column; gap: var(--cc-e-5); }

	.cc-carte,
	.cc-carte + .cc-carte {
		padding: 0 0 var(--cc-e-5);
		border-right: 0;
		border-bottom: 1px solid var(--cc-gris-bordure);
	}

	.cc-carte:last-child { padding-bottom: 0; border-bottom: 0; }

	/* Menu en tiroir. */
	.cc-burger { display: block; }

	.cc-nav {
		position: absolute;
		inset-inline: 0;
		top: 100%;
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: var(--cc-e-4) var(--cc-marge) var(--cc-e-5);
		background: var(--cc-blanc);
		border-bottom: 1px solid var(--cc-gris-bordure);
		box-shadow: 0 12px 24px rgba(26, 20, 16, 0.08);
	}

	.cc-nav.est-ouvert { display: flex; }
	.cc-nav__liste { flex-direction: column; align-items: stretch; gap: 0; }
	.cc-nav__liste li { border-bottom: 1px solid var(--cc-gris-bordure); }
	.cc-nav__liste a { display: block; padding-block: var(--cc-e-3); }
}

@media (max-width: 720px) {
	/* Le filet vertical qui sépare la billetterie de l'adresse n'a plus de
	   sens dès que l'adresse passe à la ligne : il coupe un bloc de deux
	   lignes sur une seule. */
	.cc-bandeau { flex-direction: column; align-items: flex-start; gap: var(--cc-e-1); }
	.cc-bandeau__liens { flex-wrap: wrap; gap: var(--cc-e-1) var(--cc-e-3); }
	.cc-bandeau__adresse { padding-left: 0; border-left: 0; }

	.cc-tarifs__liste { flex-direction: column; }

	/* Empilés, les tarifs doivent se dimensionner sur leur contenu. Avec la
	   base `flex: 1 1 0`, ils se partageraient la hauteur imposée par la
	   colonne d'intitulé et se retrouveraient étirés au hasard. */
	.cc-tarif {
		flex: 0 0 auto;
		padding: var(--cc-e-5) var(--cc-marge);
		border-left: 0;
		border-top: 1px solid var(--cc-gris-bordure);
	}

	.cc-tarif:first-child { border-top: 0; }
	.cc-tarif:last-child { padding-right: var(--cc-marge); }

	/* Un titre de section et son lien « voir tout » ne tiennent pas côte à
	   côte sur 390 px : le lien se casse en deux lignes autour de sa flèche. */
	.cc-nouvelles-bloc__entete {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--cc-e-2);
	}

	.cc-film__metas { flex-direction: column; gap: var(--cc-e-3); padding: var(--cc-e-4); }
	.cc-film__meta { padding-inline: 0; border-right: 0; }

	.cc-recherche .cc-champ { border-right: 1px solid var(--cc-gris-bordure); border-radius: var(--cc-rayon); }
	.cc-recherche .cc-bouton { border-radius: var(--cc-rayon); }

	.cc-recherche { flex-direction: column; gap: var(--cc-e-2); }

	/* Pied de page : quatre colonnes sur 390 px donnent des colonnes de
	   80 px où chaque adresse se casse en cinq lignes. On empile, et le
	   filet vertical devient un filet horizontal. `align-items: stretch`
	   est nécessaire : sans lui les colonnes se rétrécissent sur leur
	   contenu et leurs filets s'arrêtent au milieu de la page. */
	.cc-pied__grille { flex-direction: column; align-items: stretch; }

	.cc-pied__colonne:not(.cc-pied__colonne--marque) {
		padding-inline: 0;
		padding-top: var(--cc-e-5);
		border-right: 0;
		border-top: 1px solid var(--cc-gris-bordure);
	}

	.cc-pied__bas { flex-direction: column; align-items: flex-start; }

	/* Le tableau des séances redevient une pile de cartes : six colonnes
	   imposeraient un défilement horizontal illisible. */
	.cc-seances__table,
	.cc-seances__table tbody,
	.cc-seances__ligne,
	.cc-seances__table td { display: block; width: 100%; }

	.cc-seances__table { table-layout: auto; }
	.cc-seances__table thead { display: none; }

	/* En cartes, le synopsis retrouve toute la largeur : on le rétablit
	   après l'avoir masqué en tableau étroit (voir 900 px). */
	.cc-seances__synopsis { display: block; }

	.cc-seances__ligne {
		padding: var(--cc-e-5) var(--cc-marge);
		border-bottom: 1px solid var(--cc-gris-bordure);
	}

	.cc-seances__table td {
		width: auto;
		padding: 2px 0;
		border-bottom: 0;
	}

	.cc-seances__affiche,
	.cc-seances__affiche-vide {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
		margin-bottom: var(--cc-e-3);
	}

	.cc-seances__date,
	.cc-seances__heure { display: inline-block; margin-right: var(--cc-e-2); }
}