.production-single-shell {
	background: #f7f7f7;
}

.production-single-page {
	background: #f7f7f7;
	padding: 0 0 90px;
}

/* Layout : colonne principale + une seule colonne laterale (fiche
   technique, liens, videos, prix, presse, boutons). Jamais de 3e colonne. */
.production-single-layout {
	display: grid;
	gap: 30px 40px;
	align-items: start;
}

.production-single-layout--two {
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.production-single-layout--one {
	grid-template-columns: minmax(0, 1fr);
}

.production-single-column {
	display: flex;
	flex-direction: column;
	gap: 26px;
	min-width: 0;
}

.production-panel {
	margin: 0;
	padding: 26px 26px 28px;
	border: 0;
	background: #ededed;
}

.production-panel--media {
	padding: 0;
	background: transparent;
}

/* Concept : fond blanc */
.production-panel--content {
	background: #fff;
	padding: 22px 28px 26px;
}

/* Le premier bloc sous le slider (Concept, ou bloc Actus utilise comme
   concept) est blanc et colle au slider sans marge. Le bloc logo mobile,
   masque en desktop, peut s'intercaler dans le DOM : on couvre les deux cas. */
.production-panel--media + .production-panel--content,
.production-panel--media + .production-panel--logo-mobile + .production-panel--content,
.production-panel--media + .production-panel--news,
.production-panel--media + .production-panel--logo-mobile + .production-panel--news {
	margin-top: -26px; /* annule le gap de la colonne */
	background: #fff;
	padding: 22px 28px 26px;
}

/* --- Media --- */

.production-media-slider .uk-slideshow > li {
	background: #000;
}

.production-media-slide img,
.production-media-fallback img {
	display: block;
	width: 100%;
	height: auto;
}

.production-media-embed iframe,
.production-media-embed video {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	background: #000;
}

/* Player HTML5 des videos mp4 du slider */
.production-media-video {
	position: relative;
	background: #000;
}

.production-media-video video {
	display: block;
	width: 100%;
	height: auto;
	cursor: pointer;
}

.production-video-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 76px;
	height: 76px;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.35);
	cursor: pointer;
	z-index: 5;
	transition: background-color 0.2s ease;
}

.production-video-play::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-40%, -50%);
	border-style: solid;
	border-width: 13px 0 13px 22px;
	border-color: transparent transparent transparent #fff;
}

.production-video-play:hover,
.production-video-play:focus {
	background: rgba(143, 0, 20, 0.75);
	outline: none;
}

.production-media-video.is-playing .production-video-play {
	display: none;
}

.production-media-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 14px;
	margin: 0;
	z-index: 15;
}

/* Bullets : contour blanc, fond transparent, active remplie */
.production-media-dots > * > * {
	width: 11px;
	height: 11px;
	background: transparent;
	border: 1px solid #fff;
	box-shadow: none;
}

.production-media-dots > * > :hover,
.production-media-dots > * > :focus {
	background: rgba(255, 255, 255, 0.45);
	border-color: #fff;
}

.production-media-dots > .uk-active > * {
	background: #fff;
	border-color: #fff;
}

/* --- Logo du projet : bloc gris dedie, image sans deformation ni crop --- */

.production-panel--logo {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 26px;
}

.production-panel--logo img {
	display: block;
	max-width: 100%;
	max-height: 280px;
	width: auto;
	height: auto;
}

/* Desktop : sous la fiche technique (colonne de droite).
   Mobile : apres le slider, avant le concept. */
.production-panel--logo-mobile {
	display: none;
}

/* --- Concept (contenu principal) --- */

.production-single-content {
	color: #242424;
	font-size: 17px;
	line-height: 1.78;
	text-align: justify;
}

.production-single-content p:first-child,
.production-item-text p:first-child {
	margin-top: 0;
}

.production-single-content p:last-child,
.production-item-text p:last-child {
	margin-bottom: 0;
}

/* --- Titres de blocs (plus petits que le titre du projet) --- */

.production-block-title {
	margin: 0 0 16px;
	color: #000;
	font-family: 'Montserrat', Arial, sans-serif;
	font-size: 13px;
	line-height: 1.4;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.production-item-text {
	color: #2a2a2a;
	font-size: 15px;
	line-height: 1.68;
	text-align: justify;
}

.production-item-text iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	margin: 10px auto;
}

/* Videos de la mediatheque inserees dans les textes */
.production-item-text .wp-video,
.production-item-text video {
	width: 100% !important;
	max-width: 100%;
	height: auto;
	margin: 10px 0;
}

.production-news-list,
.production-awards-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.production-link-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.production-news-item,
.production-award-item {
	margin: 0;
	padding: 0;
	border: 0;
}

/* --- Liens flechés rouges (Videos, Contenus additionnels, Liens) --- */

.production-action-link {
	display: inline-block;
	align-self: flex-start;
	color: #8f0014;
	font-family: 'Montserrat', Arial, sans-serif;
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
}

.production-action-link::before {
	content: '\2192\00a0\00a0';
}

.production-action-link:hover,
.production-action-link:focus {
	color: #290006;
	text-decoration: none;
}

/* --- Fiche technique --- */

.production-meta-title {
	margin: 0 0 24px;
	color: #000;
	font-family: 'Montserrat', Arial, sans-serif;
	font-size: 26px;
	line-height: 1.3;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Sous-titre : titre original francais, automatique sur les pages non FR.
   Meme police que le titre (Montserrat), plus petit. */
.production-meta-subtitle {
	margin: -20px 0 24px;
	color: #2a2a2a;
	font-family: 'Montserrat', Arial, sans-serif;
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.production-meta-subtitle--mobile {
	display: none;
	margin: -14px 0 18px;
}

/* Titre affiche au-dessus du slider, hors bloc gris, uniquement en mobile */
.production-meta-title--mobile {
	display: none;
	margin: 0 0 18px;
}

/* Champ WYSIWYG libre : les titres saisis servent de libelles
   (Format, Ecrit par...), les paragraphes de contenu. */
.production-tech-sheet {
	color: #2a2a2a;
	font-size: 15px;
	line-height: 1.55;
	text-align: justify;
}

/* Les styles inline colles depuis Word ne doivent pas changer la police */
.production-tech-sheet span,
.production-item-text span,
.production-single-content span {
	font-family: inherit !important;
	font-size: inherit !important;
}

.production-tech-sheet h2,
.production-tech-sheet h3,
.production-tech-sheet h4 {
	margin: 16px 0 4px;
	color: #000;
	font-family: 'Montserrat', Arial, sans-serif;
	font-size: 10px;
	line-height: 1.4;
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-align: left;
}

.production-tech-sheet h2:first-child,
.production-tech-sheet h3:first-child,
.production-tech-sheet h4:first-child {
	margin-top: 0;
}

.production-tech-sheet p {
	margin: 0 0 10px;
}

.production-tech-sheet p:last-child {
	margin-bottom: 0;
}

.production-tech-sheet ul {
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}

/* --- Boutons noirs (Regarder des maintenant, A decouvrir aussi) --- */

.production-panel--cta {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.production-cta-item {
	display: flex;
	flex-direction: column;
}

.production-cta-item .production-cta-button {
	width: 100%;
}

.production-cta-button,
.production-discover-button {
	box-sizing: border-box; /* sinon width:100% + padding deborde du bloc */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 13px 22px;
	background: #000;
	color: #fff;
	font-family: 'Montserrat', Arial, sans-serif;
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.production-discover-button::after {
	content: '\00a0\2192';
}

.production-cta-button:hover,
.production-cta-button:focus,
.production-discover-button:hover,
.production-discover-button:focus {
	background: #8f0014;
	color: #fff;
	text-decoration: none;
}

.production-link-list--buttons {
	gap: 12px;
}

.production-cta-note {
	margin: 6px 0 0;
	color: #000;
	font-size: 13px;
	line-height: 1.5;
	font-style: italic;
	text-align: center;
}

.production-review-author {
	margin: 6px 0 0;
	color: #6f6f6f;
	font-size: 13px;
	line-height: 1.5;
	font-style: italic;
	text-align: right;
}

/* --- Galerie des personnages --- */

/* Titre hors de la box grise, meme typo que "Nos productions" (uk-h1) */
.production-characters-title {
	margin: 46px 0 25px;
	color: #000;
	font-size: 30px;
	line-height: 38px;
}

.production-panel--characters {
	margin-top: 0;
	padding: 0;
	background: transparent;
}

.production-characters-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}

.production-character-card {
	margin: 0;
	padding: 14px 14px 16px;
	background: #ededed;
}

.production-character-card img {
	display: block;
	width: 100%;
	aspect-ratio: 0.82 / 1;
	object-fit: cover;
	margin-bottom: 10px;
}

.production-character-card figcaption {
	color: #000;
	font-family: 'Montserrat', Arial, sans-serif;
	font-size: 12px;
	line-height: 1.4;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
}

/* --- Responsive : la colonne principale passe en pleine largeur,
   les colonnes laterales se rangent en dessous, jamais de vide. --- */

@media (max-width: 1200px) {
	.production-characters-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* Entre 1000 et 1200px : on garde la mise en page 2 colonnes, resserree */
	.production-single-layout--two {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	}
}

@media (max-width: 1000px) {
	/* Une seule file de blocs, reordonnee : Titre - Photos - Fiche
	   technique - Logo - Concept - le reste. Passage en 1 colonne a la
	   moitie d'un ecran standard (V4), au lieu des 2/3.
	   align-items: stretch est indispensable : la valeur "start" du layout
	   de base retrecirait chaque bloc a sa largeur naturelle (slider a
	   0px, fiche technique en colonne etroite). */
	.production-single-layout--two,
	.production-single-layout--one {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.production-single-column {
		display: contents;
	}

	.production-panel--media { order: 1; }
	.production-panel--meta { order: 2; }
	.production-panel--logo-mobile { order: 3; }
	.production-panel--content { order: 4; }
	.production-panel--news { order: 5; }
	.production-panel--links { order: 6; }
	.production-panel--awards { order: 7; }
	.production-panel--press { order: 8; }
	.production-panel--cta { order: 9; }
	.production-panel--discover { order: 10; }

	/* Le titre sort du bloc gris et passe en tout premier, avant le slider */
	.production-meta-title--mobile {
		display: block;
	}

	.production-meta-subtitle--mobile {
		display: block;
	}

	.production-panel--meta .production-meta-title,
	.production-panel--meta .production-meta-subtitle {
		display: none;
	}

	/* Le logo remonte apres la fiche, la version colonne de droite disparait */
	.production-panel--logo-mobile {
		display: flex;
	}

	.production-panel--logo-desktop {
		display: none;
	}

	/* L'ordre visuel change : on retablit les marges normales des blocs */
	.production-panel--media + .production-panel--content,
	.production-panel--media + .production-panel--logo-mobile + .production-panel--content,
	.production-panel--media + .production-panel--news,
	.production-panel--media + .production-panel--logo-mobile + .production-panel--news {
		margin-top: 0;
	}
}

@media (max-width: 700px) {
	.production-single-page {
		padding-bottom: 70px;
	}

	.production-single-content {
		font-size: 16px;
	}

	.production-panel {
		padding: 20px;
	}

	.production-panel--media {
		padding: 0;
	}

	.production-panel--content {
		padding: 20px;
	}

	.production-meta-title {
		font-size: 21px;
	}

	.production-characters-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.production-characters-grid {
		grid-template-columns: 1fr;
	}
}