/*
Theme Name: Orémi Films
Theme URI: https://oremi-films.fr
Author: Orémi Films
Description: Thème bloc (éditeur de site WordPress) pour Orémi Films. Scène sombre continue, affiche en fond flou, typographies Inter Tight, Instrument Serif et Geist Mono hébergées sur le site. Blocs natifs uniquement.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: oremi-films
*/

/* ==========================================================================
   Base
   ========================================================================== */
html { scroll-behavior: smooth; }
html body { -webkit-font-smoothing: antialiased; }
.wp-site-blocks > * { margin-block-start: 0 !important; }
.wp-site-blocks { overflow-x: clip; }

::selection { background: var(--wp--preset--color--rouge-texte); color: var(--wp--preset--color--on-rouge); }

/* Petits textes en mono */
.oremi-label,
.oremi-label a {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
	text-decoration: none;
}
.oremi-label a:hover { color: var(--wp--preset--color--rouge-texte); }
.oremi-meta,
.oremi-meta a {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
	text-decoration: none;
}

/* Titres de section : serif italique géant */
.wp-block-heading.oremi-section-title {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--section-title);
	line-height: .9;
	letter-spacing: -.02em;
	margin: 0;
}

/* Boutons « maison » (bloc Lire la suite) */
.wp-block-read-more.oremi-btn {
	display: inline-block;
	padding: 16px 24px;
	background: var(--wp--preset--color--rouge-texte);
	color: var(--wp--preset--color--on-rouge);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	margin-top: 32px;
}
.wp-block-read-more.oremi-btn:hover { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--surface-0); }

/* Rythme vertical des sections de l'accueil */
.oremi-section { padding-block: 96px; margin: 0; }
.oremi-section > * + * { margin-block-start: 32px; }

/* ==========================================================================
   En-tête
   ========================================================================== */
.oremi-header { max-width: 1152px; margin-inline: auto; padding-block: 32px; }
.oremi-logo { display: block; width: 64px; height: 68px; overflow: hidden; position: relative; margin: 0; }
.oremi-logo a { display: block; }
.oremi-logo img {
	position: absolute; width: 86px; height: 86px; left: -12px; top: -12px; max-width: none;
	filter: invert(1) hue-rotate(180deg);
	mix-blend-mode: screen;
}
.oremi-header .wp-block-navigation {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: .08em;
	text-transform: uppercase;
	font-weight: 500;
}
.oremi-header .wp-block-navigation a:hover { color: var(--wp--preset--color--rouge-texte); }
.oremi-header .wp-block-navigation__responsive-container-open { font-family: inherit; color: var(--wp--preset--color--ink); }
.wp-block-navigation__responsive-container.is-menu-open { padding: 32px var(--wp--custom--gutter); }

/* Sur l'accueil et les pages projet, l'en-tête flotte au-dessus de la scène */
.home header.wp-block-template-part,
.single-projet header.wp-block-template-part {
	position: absolute; top: 0; left: 0; right: 0; z-index: 10;
	padding-inline: var(--wp--custom--gutter);
}

/* ==========================================================================
   Scène (projet à la une / page projet)
   ========================================================================== */
.oremi-hero { --ox: max(0px, calc((100% - 1280px) / 2)); position: relative; overflow: hidden; margin: 0; padding: 0; }
.oremi-hero .wp-block-query,
.oremi-hero .wp-block-post-template { margin: 0; padding: 0; list-style: none; max-width: none; }
.oremi-hero .wp-block-post-template > li { margin: 0; }

.oremi-hero__stage { position: relative; height: 880px; margin: 0 !important; max-width: none !important; }
.oremi-hero__stage > * { margin: 0; }

/* Affiche géante, floue, qui se fond dans le noir */
.oremi-hero__backdrop {
	position: absolute; inset: 0; z-index: 0; overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}
.oremi-hero__backdrop img {
	width: 100% !important; height: 100% !important; object-fit: cover; display: block;
	filter: blur(36px); opacity: .6; transform: scale(1.2);
}

/* Titre en filigrane derrière l'affiche */
.oremi-hero__watermark {
	position: absolute; z-index: 1; left: 0; right: 0; top: 130px;
	text-align: center; white-space: nowrap; overflow: hidden; pointer-events: none;
	font-family: var(--wp--preset--font-family--serif); font-style: italic; font-weight: 400;
	font-size: var(--wp--preset--font-size--display-xl);
	line-height: .85; letter-spacing: -.03em;
	color: var(--wp--preset--color--ink); opacity: .09;
}
.oremi-hero__watermark a { color: inherit; }

/* Guillemets rouges du logo */
.oremi-hero__quotes {
	position: absolute; z-index: 2;
	left: calc(var(--ox) + 560px); top: 430px;
	width: 380px; aspect-ratio: 548 / 505;
	background: var(--wp--preset--color--rouge-tango);
	-webkit-mask: url(assets/images/guillemets.png) center / contain no-repeat;
	mask: url(assets/images/guillemets.png) center / contain no-repeat;
	transform: rotate(6deg);
	pointer-events: none;
}

/* Affiche inclinée */
.oremi-hero__poster {
	position: absolute; z-index: 3;
	left: calc(var(--ox) + 700px); top: 150px;
	width: 400px; transform: rotate(-3deg);
	box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.oremi-hero__poster img { display: block; width: 100%; height: auto; }

/* Texte */
.oremi-hero__copy {
	position: absolute; z-index: 4;
	left: calc(var(--ox) + var(--wp--custom--gutter)); top: 470px;
	width: min(520px, 46%);
}
.oremi-hero__copy > * + * { margin-block-start: 16px; }
.oremi-hero__kicker { color: var(--wp--preset--color--rouge-texte); }
.oremi-hero__hook {
	font-family: var(--wp--preset--font-family--serif); font-style: italic; font-weight: 400;
	font-size: var(--wp--preset--font-size--hook); line-height: 1.1; letter-spacing: -.01em;
}

/* Mobile / tablette */
@media (max-width: 1100px) {
	.oremi-hero__stage { height: auto; display: flex; flex-direction: column; align-items: center; padding: 150px 0 56px; }
	.oremi-hero__watermark { top: 100px; }
	.oremi-hero__poster { position: relative; left: auto; top: auto; width: 62%; max-width: 340px; margin: 0 auto 48px !important; }
	.oremi-hero__quotes { left: auto; right: 6%; top: 330px; width: 46%; max-width: 260px; }
	.oremi-hero__copy { position: static; width: 100%; padding-inline: var(--wp--custom--gutter); box-sizing: border-box; }
}

/* ==========================================================================
   Actualités
   ========================================================================== */
.oremi-news .wp-block-post-template {
	display: grid; grid-template-columns: 540fr 280fr 196fr; gap: 48px; align-items: start;
	list-style: none; padding: 0; margin: 48px 0 0;
}
.oremi-news .wp-block-post-template > li { margin: 0; }
.oremi-news .wp-block-post-template > li:nth-child(1) { margin-top: 40px; }
.oremi-news .wp-block-post-template > li:nth-child(3) { margin-top: 160px; }
.oremi-news .wp-block-post-title { margin-top: 12px; }
.oremi-news li:nth-child(1) .wp-block-post-title { font-size: var(--wp--preset--font-size--news-l); }
.oremi-news li:nth-child(2) .wp-block-post-title { font-size: var(--wp--preset--font-size--news-m); }
.oremi-news li:nth-child(3) .wp-block-post-title { font-size: var(--wp--preset--font-size--news-s); }
.oremi-news .wp-block-post-featured-image { margin: 0 0 16px; }
.oremi-news .wp-block-post-featured-image img { display: block; }

/* ==========================================================================
   Vidéos (rail horizontal)
   ========================================================================== */
.oremi-rail {
	display: flex !important; flex-wrap: nowrap !important; gap: 24px;
	overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--line) transparent;
	padding-bottom: 16px; max-width: none !important;
}
.oremi-rail > * { flex: 0 0 min(420px, 80vw); scroll-snap-align: start; margin: 0 !important; }
.oremi-rail .wp-block-embed__wrapper { margin: 0; }

/* ==========================================================================
   Projets
   ========================================================================== */
.oremi-projects .wp-block-post-template {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; align-items: start;
	list-style: none; padding: 0; margin: 48px 0 0;
}
.oremi-projects .wp-block-post-template > li { margin: 0; }
.oremi-projects .wp-block-post-template > li:nth-child(4n+2) { margin-top: 80px; }
.oremi-projects .wp-block-post-template > li:nth-child(4n+3) { margin-top: 30px; }
.oremi-projects .wp-block-post-template > li:nth-child(4n+4) { margin-top: 120px; }
.oremi-projects .wp-block-post-featured-image { margin: 0 0 12px; }
.oremi-projects .wp-block-post-featured-image img { display: block; }
.oremi-projects .wp-block-post-title { font-size: var(--wp--preset--font-size--news-s); margin: 0 0 4px; }

/* ==========================================================================
   Soutenir
   ========================================================================== */
.oremi-soutenir { position: relative; overflow: hidden; }
.oremi-soutenir > * { position: relative; z-index: 1; }
.oremi-soutenir::before {
	content: ""; position: absolute; z-index: 0; right: 4%; top: 50%;
	width: 360px; aspect-ratio: 548 / 505;
	background: var(--wp--preset--color--rouge-tango);
	-webkit-mask: url(assets/images/guillemets.png) center / contain no-repeat;
	mask: url(assets/images/guillemets.png) center / contain no-repeat;
	transform: translateY(-50%) rotate(6deg);
	pointer-events: none;
}
.oremi-soutenir p { max-width: 560px; }

/* ==========================================================================
   Pages intérieures
   ========================================================================== */
.oremi-main { padding-block: 48px 96px; }
.oremi-main .wp-block-query-title,
.oremi-main .wp-block-post-title.oremi-page-title {
	font-family: var(--wp--preset--font-family--serif); font-style: italic; font-weight: 400;
	font-size: clamp(48px, 8vw, 96px); line-height: .95; letter-spacing: -.02em;
}
.oremi-list .wp-block-post-template { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 32px; }
.oremi-list .wp-block-post-template > li { margin: 0; }
.oremi-list .wp-block-post-title { font-size: var(--wp--preset--font-size--news-m); margin: 8px 0; }
.oremi-list .wp-block-post-featured-image { margin: 0 0 12px; }
.oremi-list .wp-block-post-featured-image img { display: block; }
.oremi-list--projets .wp-block-post-template { grid-template-columns: repeat(4, 1fr); }
.oremi-list--projets .wp-block-post-title { font-size: var(--wp--preset--font-size--news-s); }
.wp-block-query-pagination { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--label); letter-spacing: .08em; text-transform: uppercase; margin-top: 48px; }

/* Équipe de tournage */
.oremi-team .wp-block-post-template { list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 32px 24px; }
.oremi-team .wp-block-post-template > li { margin: 0; }
.oremi-team .wp-block-post-featured-image { margin: 0 0 8px; }
.oremi-team .wp-block-post-featured-image img { display: block; filter: grayscale(1); }
.oremi-team .wp-block-post-title { font-size: var(--wp--preset--font-size--body); margin: 0; }
.oremi-team .wp-block-post-excerpt { margin: 0; }
.oremi-team .wp-block-post-excerpt__excerpt { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--meta); letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--ink-muted); margin: 0; }

/* Texte courant des articles / projets */
.wp-block-post-content a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--wp--preset--color--line); }
.wp-block-post-content a:hover { text-decoration-color: var(--wp--preset--color--rouge-texte); }
.wp-block-post-content .wp-block-button a,
.wp-block-post-content .wp-block-read-more { text-decoration: none; }
.wp-block-embed iframe { max-width: 100%; }

/* ==========================================================================
   Pied de page
   ========================================================================== */
.oremi-footer { max-width: 1152px; margin-inline: auto; padding-block: 96px 48px; }
.oremi-footer .wp-block-navigation { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--label); letter-spacing: .08em; text-transform: uppercase; }

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 782px) {
	html body { --wp--custom--gutter: 20px; }
	.oremi-section { padding-block: 64px; }
	.oremi-news .wp-block-post-template { grid-template-columns: 1fr; gap: 40px; margin-top: 32px; }
	.oremi-news .wp-block-post-template > li:nth-child(n) { margin-top: 0; }
	.oremi-news li:nth-child(n) .wp-block-post-title { font-size: var(--wp--preset--font-size--news-m); }
	.oremi-projects .wp-block-post-template { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
	.oremi-projects .wp-block-post-template > li:nth-child(n) { margin-top: 0; }
	.oremi-projects .wp-block-post-template > li:nth-child(even) { margin-top: 48px; }
	.oremi-list .wp-block-post-template,
	.oremi-list--projets .wp-block-post-template { grid-template-columns: 1fr 1fr; gap: 32px 16px; }
	.oremi-soutenir::before { width: 220px; right: -40px; top: 70px; transform: rotate(6deg); }
	.oremi-footer { padding-block: 64px 32px; }
}

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