/**
 * Page « Nos œuvres audiovisuelles » : reprise fidèle de la maquette validée (ordinateur et
 * smartphone). Les films sont des articles « .oeuvre » (« .film » est déjà la section « Vidéo à
 * la une » de l’accueil).
 *
 * @package ReveNomades
 */

.c-pleine.amb:not(.amb-nuit) {
	--fg: var(--c-papier);
	--fg2: var(--c-papier-photo);
	--kick: var(--c-papier);
	--line: rgb(var(--c-papier-rgb) / .22);
}

.yt {
	width: 52px;
	height: 52px;
	display: grid;
	place-items: center;
	color: var(--fg);
	text-decoration: none;
	border-radius: 50%;
	transition: color .3s,transform .3s,background .3s;
}

.yt:hover {
	color: var(--c-verm-vif);
	transform: translateY(-2px);
}

.ch-media,
.sur-media,
.ohero-vid,
.cadre-media {
	position: relative;
	z-index: 1;
}

.ch-t,
.sur-t,
.ohero-title {
	z-index: 6 !important;
	transform: translateZ(0);
	will-change: transform;
}

.ch-txt {
	z-index: 6;
}

/* Surtitres aux couleurs de l’ambiance (maquette : .kick). */
.ohero .kick,
.osom .kick,
.oeuvre .kick,
.oteaser .kick,
.player .kick {
	color: var(--kick);
}

.oeuvre {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.logline {
	margin: 0;
	max-width: 50ch;
	line-height: 1.75;
	font-size: clamp(13px,1vw,15px);
}

.oeuvre .acts,
.oteaser .acts,
.fo .acts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin-top: 6px;
}




/* ---------- En-tête de rubrique ---------- */

.ohero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: clamp(120px,11vw,160px) 0 clamp(150px,14vw,230px);
	min-height: clamp(720px,62vw,940px);
}

.ohero-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
	opacity: .42;
	transform: scale(1.04);
}

.ohero .scrim {
	background: linear-gradient(90deg,rgb(var(--c-nuit-rgb) / .94) 0%,rgb(var(--c-nuit-rgb) / .6) 55%,rgb(var(--c-nuit-rgb) / .35) 100%);
}

.ohero-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 40px;
}

.ohero-txt {
	flex: 1 1 380px;
	max-width: 540px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	position: relative;
	z-index: 3;
}

.ohero-txt p {
	margin: 0;
	line-height: 1.75;
	font-size: clamp(13px,1.05vw,15px);
}

.ohero-vid {
	flex: 0 0 auto;
	width: clamp(240px,26vw,380px);
	aspect-ratio: 9/16;
	margin: 0;
	overflow: hidden;
	background: var(--c-nuit-2);
	box-shadow: 0 40px 80px -30px rgba(0,0,0,.6);
}

.ohero-title {
	position: absolute;
	left: 0;
	right: 0;
	bottom: clamp(30px,4vw,60px);
	margin: 0;
	padding: 0 clamp(16px,4vw,56px);
	z-index: 4;
	font-size: clamp(54px,10.4vw,176px);
	line-height: .84;
	text-align: right;
	text-shadow: 0 4px 30px rgba(0,0,0,.35);
	pointer-events: none;
}


/* ---------- Sommaire ---------- */

.osom {
	padding: clamp(80px,9vw,130px) 0;
}

.som-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill,minmax(min(100%,380px),1fr));
	gap: 0 clamp(24px,3vw,48px);
	border-top: 1px solid var(--line);
}

.som-list li {
	border-bottom: 1px solid var(--line);
}

.som-list a {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 20px 0;
	text-decoration: none;
	color: var(--fg);
	transition: padding .35s cubic-bezier(.2,.7,.2,1);
}

.som-list a:hover {
	padding-left: 10px;
}

.som-n {
	font-family: var(--f-title);
	font-weight: 700;
	font-size: 32px;
	line-height: 1;
	width: 46px;
	flex: 0 0 auto;
}

.som-t {
	font-family: var(--f-sub);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
	font-size: clamp(22px,2vw,28px);
	line-height: 1.05;
	flex: 1;
}

.som-m {
	color: var(--fg2);
	flex: 0 1 auto;
	text-align: right;
	max-width: 44%;
}

/* Titre et informations : un titre long prend toute la largeur, les informations passent
   dessous (au lieu d’un mot par ligne). */
.som-tm {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 16px;
}

.som-tm .som-t {
	flex: 1 1 auto;
	min-width: 0;
}

.som-tm .som-m {
	margin-left: auto;
}

.som-hidden {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin-top: 22px;
	color: var(--fg2);
}


/* ---------- Composition : pleine largeur ---------- */

.c-pleine {
	min-height: clamp(600px,56vw,880px);
	display: flex;
	align-items: flex-end;
}

.cp-media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.c-pleine .scrim {
	background: linear-gradient(180deg,rgb(var(--c-nuit-rgb) / .25) 0%,rgb(var(--c-nuit-rgb) / 0) 35%,rgb(var(--c-nuit-rgb) / .88) 100%);
}

.cp-in {
	width: 100%;
	padding-top: 150px;
	padding-bottom: clamp(36px,5vw,72px);
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.cp-t {
	margin: 0;
	font-size: calc(clamp(56px,9vw,150px) * var(--oe-tz, 1));
	line-height: .86;
}


/* ---------- Composition : image + logline (images superposées) ---------- */

.c-duo {
	padding: clamp(80px,9vw,140px) 0;
}

.duo-grid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(40px,7vw,120px);
}

.c-duo.rev .duo-grid {
	flex-direction: row-reverse;
}

.duo-media {
	flex: 1 1 360px;
	position: relative;
	max-width: 620px;
	padding-bottom: clamp(40px,6vw,90px);
}

.duo-main {
	margin: 0 0 0 clamp(24px,9%,90px);
	width: min(100%,440px);
	aspect-ratio: 2/3;
	overflow: hidden;
	background: var(--c-nuit-2);
	box-shadow: 0 30px 60px -30px rgba(0,0,0,.45);
}

.duo-sec {
	position: absolute;
	left: clamp(-60px,-4vw,-12px);
	bottom: 0;
	width: 58%;
	aspect-ratio: 3/2;
	margin: 0;
	overflow: hidden;
	z-index: 2;
	box-shadow: 0 24px 50px -20px rgba(0,0,0,.5);
}

.c-duo.rev .duo-sec {
	left: auto;
	right: clamp(-60px,-4vw,-12px);
}

.c-duo.rev .duo-main {
	margin: 0 clamp(24px,9%,90px) 0 auto;
}

.duo-txt {
	flex: 1 1 340px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 560px;
}

.duo-t {
	margin: 0;
	font-size: calc(clamp(52px,7vw,116px) * var(--oe-tz, 1));
	line-height: .88;
}


/* ---------- Composition : texte superposé ---------- */

.c-sur {
	padding: clamp(90px,10vw,150px) 0;
}

.sur-grid {
	display: grid;
	grid-template-columns: repeat(12,minmax(0,1fr));
	align-items: end;
}

.sur-media {
	grid-column: 4 / span 9;
	grid-row: 1;
	margin: 0;
	aspect-ratio: 16/10;
	overflow: hidden;
	background: var(--c-nuit-2);
}

.sur-t {
	grid-column: 1 / span 9;
	grid-row: 1;
	align-self: end;
	position: relative;
	z-index: 2;
	margin: 0 0 -.12em;
	font-size: calc(clamp(56px,8.8vw,152px) * var(--oe-tz, 1));
	line-height: .86;
	text-shadow: 0 6px 40px rgba(0,0,0,.45);
}

.sur-txt {
	grid-column: 1 / span 6;
	grid-row: 2;
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: clamp(28px,3vw,44px);
}


/* ---------- Composition : vidéo verticale et titre qui la chevauche ---------- */

.c-haute {
	padding: clamp(110px,10vw,150px) 0 clamp(150px,15vw,230px);
	min-height: clamp(720px,62vw,940px);
}

.ch-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
	opacity: .45;
}

.c-haute .scrim {
	background: linear-gradient(270deg,rgb(var(--c-nuit-rgb) / .94) 0%,rgb(var(--c-nuit-rgb) / .6) 55%,rgb(var(--c-nuit-rgb) / .3) 100%);
}

.ch-grid {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: center;
	gap: 40px;
}

.ch-txt {
	flex: 1 1 360px;
	max-width: 500px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	position: relative;
	z-index: 3;
}

.ch-media {
	flex: 0 0 auto;
	width: clamp(240px,26vw,380px);
	aspect-ratio: 9/16;
	margin: 0;
	overflow: hidden;
	background: var(--c-nuit-2);
	box-shadow: 0 40px 80px -30px rgba(0,0,0,.6);
}

.ch-t {
	position: absolute;
	left: 0;
	right: 0;
	bottom: clamp(30px,4vw,60px);
	margin: 0;
	padding: 0 clamp(16px,4vw,56px);
	z-index: 4;
	font-size: calc(clamp(54px,10vw,170px) * var(--oe-tz, 1));
	line-height: .84;
	pointer-events: none;
	text-shadow: 0 4px 30px rgba(0,0,0,.35);
}


/* ---------- Composition : galerie horizontale ---------- */

.c-galerie {
	padding: clamp(80px,9vw,130px) 0 clamp(80px,9vw,120px);
}

.gal-side {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 460px;
}

.ep {
	flex: 0 0 auto;
	width: clamp(260px,30vw,440px);
	aspect-ratio: 16/10;
	position: relative;
	overflow: hidden;
	border: 0;
	padding: 0;
	margin: 0;
	background: var(--c-nuit-2);
	cursor: pointer;
	text-align: left;
	color: var(--c-papier);
	scroll-snap-align: start;
	font: inherit;
	display: block;
}

.ep img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}

.ep:hover img {
	transform: scale(1.06);
}

.ep-shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,rgb(var(--c-nuit-rgb) / 0) 38%,rgb(var(--c-nuit-rgb) / .88) 100%);
}

.ep-play {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgb(var(--c-nuit-rgb) / .55);
	display: grid;
	place-items: center;
	color: var(--c-papier);
	transition: background .3s,color .3s;
}

.ep:hover .ep-play {
	background: var(--verm);
	color: var(--c-blanc);
}

.ep-txt {
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ep-txt .mono {
	color: var(--c-papier-3);
}

.ep-t {
	font-family: var(--f-sub);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: clamp(18px,1.6vw,24px);
	line-height: 1.05;
}


/* ---------- Composition : asymétrique, images superposées ---------- */

.c-asym {
	padding: clamp(90px,10vw,150px) 0 clamp(110px,12vw,180px);
}

.asym-grid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(40px,6vw,100px);
}

.asym-txt {
	flex: 1 1 320px;
	max-width: 470px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	position: relative;
	z-index: 3;
}

.asym-t {
	margin: 0;
	font-size: calc(clamp(50px,6.4vw,108px) * var(--oe-tz, 1));
	line-height: .88;
}

.asym-media {
	flex: 999 1 520px;
	position: relative;
	margin-right: calc(-1 * clamp(16px,4vw,56px));
	padding-bottom: clamp(60px,7vw,110px);
}

.am-big {
	margin: 0 0 0 auto;
	width: 88%;
	aspect-ratio: 4/3;
	overflow: hidden;
	background: var(--c-nuit-2);
}

.am-small {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 36%;
	aspect-ratio: 3/4;
	margin: 0;
	overflow: hidden;
	z-index: 2;
	box-shadow: 0 30px 60px -24px rgba(0,0,0,.55);
}


/* ---------- Composition : vidéo encadrée sur titre géant ---------- */

.c-cadre {
	padding: clamp(90px,10vw,150px) 0 clamp(80px,9vw,130px);
}


/* Titre géant posé DEVANT le haut de la vidéo : la 1re ligne au-dessus du cadre, la 2e mord sur le ciel de l'image */

.cadre-bg {
	position: absolute;
	left: 0;
	right: 0;
	top: clamp(70px,8vw,120px);
	margin: 0;
	text-align: center;
	font-size: calc(clamp(84px,14vw,230px) * var(--oe-tz, 1));
	line-height: .82;
	z-index: 6;
	pointer-events: none;
	white-space: nowrap;
	text-shadow: 0 6px 40px rgba(0,0,0,.55);
	transform: translateZ(0);
}

.cadre-in {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(28px,3.4vw,48px);
	text-align: center;
}

.cadre-media {
	width: min(100%,860px);
	aspect-ratio: 16/9;
	margin: clamp(110px,12.5vw,200px) 0 0;
	overflow: hidden;
	background: var(--c-nuit-2);
	box-shadow: 0 40px 90px -30px rgba(0,0,0,.7);
}

.cadre-txt {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	max-width: 640px;
}

.cadre-t {
	margin: 0;
	font-size: clamp(34px,3.6vw,54px);
	line-height: .92;
}

.cadre-txt .acts {
	justify-content: center;
}


/* ---------- Prochain film ---------- */

.oteaser {
	padding: clamp(90px,10vw,150px) 0;
}

.tz-grid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(40px,7vw,120px);
}

.tz-media {
	flex: 1 1 340px;
	position: relative;
	max-width: 560px;
	padding: 0 0 clamp(50px,6vw,90px) clamp(40px,6vw,90px);
}

.tz-a {
	margin: 0;
	aspect-ratio: 4/3;
	overflow: hidden;
	background: var(--c-nuit-2);
}

.tz-b {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 44%;
	aspect-ratio: 3/4;
	margin: 0;
	overflow: hidden;
	box-shadow: 0 30px 60px -24px rgba(0,0,0,.45);
}

.tz-txt {
	flex: 1 1 340px;
	max-width: 560px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.tz-txt h2 {
	margin: 0;
	font-size: clamp(46px,6vw,96px);
	line-height: .9;
}

.tz-txt p {
	margin: 0;
	line-height: 1.75;
	font-size: clamp(13px,1vw,15px);
	max-width: 46ch;
}


/* ---------- Lecteur intégré (YouTube, ou extrait en attendant la vidéo) ---------- */

.player {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	animation: fadein .35s ease both;
}

.pl-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 14px clamp(16px,3vw,40px);
	color: var(--fg2);
}

.pl-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(18px,2.4vw,30px);
	padding: 0 clamp(16px,4vw,56px) 40px;
	max-width: 1240px;
	width: 100%;
	margin: 0 auto;
}

.pl-frame {
	position: relative;
	aspect-ratio: 16/9;
	background: #000;
	overflow: hidden;
	width: 100%;
}

.pl-big {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	width: 88px;
	height: 88px;
	border-radius: 50%;
	border: 0;
	background: var(--verm);
	color: var(--c-blanc);
	display: grid;
	place-items: center;
	cursor: pointer;
	z-index: 2;
}

.pl-bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 14px 12px;
	background: linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.78));
	color: var(--c-blanc);
	z-index: 2;
}

.pl-btn {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	background: none;
	border: 0;
	color: var(--c-blanc);
	cursor: pointer;
	padding: 0;
	flex: 0 0 auto;
}

.pl-prog {
	flex: 1;
	height: 3px;
	background: rgba(255,255,255,.3);
	position: relative;
	overflow: hidden;
}

.pl-prog i {
	position: absolute;
	inset: 0;
	background: var(--verm);
	transform-origin: left center;
	transform: scaleX(0);
	animation: rn-prog 8s linear infinite;
}

.pl-prog.paused i {
	animation-play-state: paused;
}

@keyframes rn-prog {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

.pl-time {
	color: var(--c-blanc);
	flex: 0 0 auto;
}

.pl-info {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 20px 40px;
}

.pl-info h2 {
	margin: 6px 0 10px;
	font-size: clamp(34px,4.4vw,64px);
	line-height: .9;
}

.pl-info p {
	margin: 0;
	max-width: 60ch;
	line-height: 1.7;
	font-size: 14px;
	color: var(--fg2);
}

.pl-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}


/* ---------- Petits écrans ---------- */
@media (max-width: 899px) {

	.ohero-grid,
	.ch-grid {
		flex-direction: column;
		align-items: stretch;
	}

	.ohero-vid {
		width: 68%;
		align-self: flex-end;
	}

	.ch-media {
		width: 68%;
		align-self: flex-start;
	}

	.ch-t {
		text-align: right;
	}

	.sur-grid {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.sur-media {
		width: 100%;
	}

	.sur-t {
		margin: -.55em 0 0;
		padding: 0 4px;
	}

	.sur-txt {
		margin-top: 24px;
	}

	.c-duo.rev .duo-grid {
		flex-direction: column;
	}

	.duo-grid {
		flex-direction: column;
		align-items: stretch;
	}

	.duo-media {
		max-width: none;
		padding-bottom: 56px;
	}

	.duo-main {
		width: 78%;
		margin: 0 0 0 auto;
	}

	.c-duo.rev .duo-main {
		margin: 0 auto 0 0;
	}

	.duo-sec {
		left: -16px;
		width: 62%;
	}

	.c-duo.rev .duo-sec {
		right: -16px;
	}

	.asym-media {
		margin-right: -16px;
		flex-basis: auto;
		width: 100%;
	}

	.som-list a {
		flex-wrap: wrap;
	}

	.som-m {
		flex-basis: 100%;
		text-align: left;
		max-width: none;
		padding-left: 62px;
	}

}

@media (max-width: 640px) {

	/* Ouverture de la page sur smartphone : l’image et le grand titre d’abord (le titre
	   chevauche le bas de l’image, comme sur ordinateur), le texte juste dessous, sans vide.
	   Demandé par l’association le 23/10/2026. */
	.ohero {
		display: flex;
		flex-direction: column;
		min-height: 0;
		padding: 92px 0 44px;
	}

	.ohero-grid {
		display: contents;
	}

	.ohero-vid {
		order: 1;
		width: 58%;
		align-self: flex-end;
		margin-right: clamp(16px, 4vw, 56px);
	}

	.ohero-title {
		order: 2;
		position: relative;
		bottom: auto;
		margin-top: -.62em;
	}

	.ohero-txt {
		order: 3;
		flex: 0 0 auto;
		max-width: none;
		margin-top: 22px;
		padding: 0 clamp(16px, 4vw, 56px);
	}

	.cadre-bg {
		font-size: calc(21vw * var(--oe-tz, 1));
		top: 110px;
	}

	.ep {
		width: 78vw;
	}

	.pl-time {
		display: none;
	}

}

/* ---------- Lecteur : YouTube intégré, mention de production ---------- */
.player[hidden],
.player [hidden] {
	display: none !important;
}

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

.pl-mention {
	margin: 12px 0 0 !important;
	color: var(--kick) !important;
	font-size: 11px !important;
}

.pl-mention:empty {
	display: none;
}

/* ---------- Jauge de collecte (financement participatif) ---------- */
.jauge {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 460px;
}

.jauge-barre {
	position: relative;
	display: block;
	height: 6px;
	background: var(--line);
	overflow: hidden;
}

.jauge-barre i {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	background: var(--verm);
}

.amb-vermillon .jauge-barre i {
	background: var(--c-nuit);
}

.jauge-t {
	color: var(--fg2);
}

/* ---------- Fiche d’un film (mise en page nouvelle, à valider) ---------- */
.fo-hero .cp-in {
	padding-top: 180px;
}

.fo-meta {
	color: var(--fg2);
}

.fo-corps {
	padding: clamp(80px, 9vw, 130px) 0;
}

.fo-grille {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(40px, 6vw, 110px);
	align-items: start;
}

.fo-texte {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
}

.fo-infos {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.fo-h {
	margin: 0;
	color: var(--kick);
	font-size: 11px;
}

.fo-h:not(:first-child) {
	margin-top: 26px;
}

.fo-dl {
	margin: 0;
	border-top: 1px solid var(--line);
}

.fo-dl > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--line);
}

.fo-dl dt {
	color: var(--fg2);
	flex: 0 0 auto;
}

.fo-dl dd {
	margin: 0;
	text-align: right;
	font-family: var(--f-sub);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
	font-size: 16px;
	line-height: 1.2;
}

.fo-mentions {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.7;
	color: var(--fg2);
}

.fo-contreparties h3 {
	margin: 0 0 6px;
	font-size: 11px;
}

.fo-contreparties p {
	margin: 0;
}

.fo-collecte .tz-txt {
	max-width: 720px;
}

@media (max-width: 899px) {
	.fo-grille {
		grid-template-columns: minmax(0, 1fr);
	}
}

html.rn-lecteur-ouvert,
html.rn-lecteur-ouvert body {
	overflow: hidden;
}


/* ---------- Composition : affiche (design commun à tous les films) ----------
 * Grande affiche verticale (ou extrait vidéo en boucle) à gauche, texte à droite. */

.c-poster {
	padding: clamp(80px, 9vw, 140px) 0;
}

.poster-grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	align-items: center;
	gap: clamp(36px, 6vw, 110px);
}

.poster-media {
	position: relative;
	justify-self: end;
	width: min(100%, 480px);
	margin: 0;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	background: var(--c-nuit-2);
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .45);
}

.poster-txt {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 560px;
	min-width: 0;
}

.poster-t {
	margin: 0;
	font-size: calc(clamp(52px, 7vw, 116px) * var(--oe-tz, 1));
	line-height: .88;
}

@media (max-width: 899px) {
	.poster-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.poster-media {
		justify-self: center;
		width: min(78vw, 420px);
	}
}

/* « Le prochain film se fera avec vous » en design « Titre géant » (comme La dernière route). */
.oe-prod-cadre {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.oe-prod-cadre .cadre-txt .acts {
	justify-content: center;
}

/* ---------- Taille des titres de films ----------
 * Réglage « Taille du titre » de la fiche, sinon automatique selon la longueur
 * (inc/oeuvres.php, rn_theme_oe_taille) : les titres courts gardent leur grande taille,
 * les longs passent plus petits pour tenir en deux ou trois lignes. */

.oe-tz-l {
	--oe-tz: 1;
}

.oe-tz-m {
	--oe-tz: .72;
}

.oe-tz-s {
	--oe-tz: .56;
}

.oe-tz-xs {
	--oe-tz: .44;
}

/* « Très petite » : seulement si on la choisit dans la fiche du film. */
.oe-tz-xxs {
	--oe-tz: .34;
}

.oeuvre .shead h2.disp {
	font-size: calc(clamp(46px, 6vw, 96px) * var(--oe-tz, 1));
}

.oeuvre .disp,
.cp-t {
	overflow-wrap: break-word;
}

/* Smartphone : les titres partent déjà de leur taille minimale, on réduit moins. */
@media (max-width: 640px) {
	.oe-tz-m {
		--oe-tz: .84;
	}

	.oe-tz-s {
		--oe-tz: .7;
	}

	.oe-tz-xs {
		--oe-tz: .6;
	}

	.oe-tz-xxs {
		--oe-tz: .5;
	}
}

/* Titre géant d’une ligne : un titre long passe à la ligne au lieu de déborder. */
.cadre-bg.oe-tz-m,
.cadre-bg.oe-tz-s,
.cadre-bg.oe-tz-xs,
.cadre-bg.oe-tz-xxs {
	white-space: normal;
	padding: 0 clamp(16px, 4vw, 56px);
}

@media (max-width: 640px) {
	.som-tm .som-m {
		margin-left: 0;
		padding-left: 0;
	}
}