/*═══════════════════════════════════════════════════════════════════════════
  page-manifeste.css — feuille du gabarit `page-manifeste.php` (BLOG > Manifeste)
  Chargée automatiquement par functions.php §8 (gabarit résolu = page-manifeste),
  APRÈS assets/edv-production.css : les helpers globaux (.section, .band--*,
  .wrap, .eyebrow, .btn) sont réutilisés tels quels, cette feuille n'ajoute que
  ce qui est propre à la page. Aucune redéfinition de composant global.
  Créée le 2026-08-25 (lot BLOG-manifeste).
═══════════════════════════════════════════════════════════════════════════*/

/*── Colonnes de lecture ────────────────────────────────────────────────────*/
.mf-col{
	max-width: 44rem;
	margin-inline: auto;
}
.mf-col--wide{ max-width: 62rem; }
.mf-col--full{ max-width: none; }
.mf-col + .mf-col{ margin-top: var(--space-8); }

.mf-band p{
	font-size: var(--text-md);
	line-height: 1.72;
	margin: 0 0 var(--space-5);
}
.mf-band p:last-child{ margin-bottom: 0; }

.mf-band h2{
	line-height: 1.16;
	margin: var(--space-4) 0 var(--space-6);
}

.mf-h3{
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: 400;
	line-height: 1.3;
	margin: var(--space-8) 0 var(--space-4);
}
.mf-col > .mf-h3:first-child{ margin-top: 0; }

/*── Respiration autour des bandes photo ────────────────────────────────────*/
.mf-band--rule{ padding-top: var(--space-20); }
.mf-band--to-figure{ padding-bottom: var(--space-12); }
.mf-band--from-figure{ padding-top: var(--space-12); }

/*── Accents typographiques ─────────────────────────────────────────────────*/
.mf-lead{
	font-family: var(--font-display);
	font-size: var(--text-xl);
	line-height: 1.5;
	color: var(--color-ink-2);
}
.mf-band .mf-punch{
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	line-height: 1.25;
	text-align: center;
	color: var(--color-bordeaux);
	margin: 0;
}
.mf-band .mf-kicker{
	font-family: var(--font-display);
	font-size: var(--text-lg);
	line-height: 1.45;
	color: var(--color-bordeaux);
	border-left: 2px solid currentColor;
	padding-left: var(--space-4);
	margin-top: var(--space-6);
}
.band--bordeaux .mf-kicker{ color: var(--color-rose); }

.mf-note{
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: .04em;
	color: var(--color-ink-3);
	margin-top: var(--space-4);
	text-align: center;
}

/*── Exergues ───────────────────────────────────────────────────────────────*/
.mf-quote{
	margin: 0;
	padding: var(--space-6) 0;
	border-top: var(--border-hair);
	border-bottom: var(--border-hair);
	text-align: center;
}
.mf-band .mf-quote p{
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	line-height: 1.3;
	margin: 0;
	color: var(--color-ink);
}
.mf-band .mf-quote--strong p{
	font-size: var(--text-3xl);
	color: var(--color-bordeaux);
}
.band--bordeaux .mf-quote{ border-color: rgba(250,244,230,.35); }
.band--bordeaux .mf-quote p,
.band--bordeaux .mf-quote--strong p{ color: var(--color-cream); }

/*── Bandes photo, pleine largeur ───────────────────────────────────────────*/
.mf-figure{
	margin: 0;
	width: 100%;
	background: var(--color-ink);
}
.mf-figure img{
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
/* manifeste03 est une INFOGRAPHIE : jamais recadrée, sinon les légendes sautent */
.mf-figure--schema{
	background: #262b2f;
	padding: var(--space-6) var(--gutter);
}
.mf-figure--schema img{
	aspect-ratio: auto;
	object-fit: contain;
	max-width: 65rem;
	margin-inline: auto;
}
.mf-figure figcaption{
	max-width: 44rem;
	margin: var(--space-4) auto 0;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	line-height: 1.6;
	letter-spacing: .03em;
	color: var(--color-line-soft);
	text-align: center;
}

/*── Trois repères d'ouverture ──────────────────────────────────────────────*/
.mf-repere{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
	border-top: var(--border-firm);
	border-bottom: var(--border-firm);
	padding: var(--space-8) 0;
}
.mf-repere__item{ text-align: center; }
.mf-band .mf-repere__n{
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	line-height: 1.1;
	color: var(--color-bordeaux);
	margin: 0 0 var(--space-3);
}
.mf-band .mf-repere__t{
	font-size: var(--text-sm);
	line-height: 1.6;
	color: var(--color-ink-2);
	margin: 0;
}

/*── Duo de définitions (performance/robustesse, bio/raisonné) et trio ──────*/
.mf-duo{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-5);
}
/* Les trois moments qui décident de la dose de soufre : vendange, fermentation, mise */
.mf-trio{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
	align-items: start;
}
.mf-duo__card{
	border: var(--border-hair);
	border-radius: var(--radius-sm);
	padding: var(--space-6);
	background: var(--color-cream);
}
.mf-duo__card--on{
	border: 1.5px solid var(--color-bordeaux);
	background: var(--color-kraft);
}
.mf-band .mf-duo__k{
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--color-bordeaux);
	margin: 0 0 var(--space-3);
}
.mf-band .mf-duo__d{
	font-family: var(--font-display);
	font-size: var(--text-lg);
	line-height: 1.35;
	margin: 0 0 var(--space-3);
}
.mf-band .mf-duo__n{
	font-size: var(--text-sm);
	line-height: 1.6;
	color: var(--color-ink-3);
	margin: 0;
}

/*── Le gradient du soufre ──────────────────────────────────────────────────*/
.mf-scale{
	border: var(--border-firm);
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--color-cream);
}
.mf-scale__row{
	display: grid;
	grid-template-columns: 1.15fr .72fr .82fr 1.95fr;
	gap: var(--space-5);
	padding: var(--space-5) var(--space-6);
	border-top: var(--border-hair);
	font-size: var(--text-sm);
	line-height: 1.6;
	align-items: baseline;
}
.mf-scale__row:first-child{ border-top: 0; }
.mf-scale__row--head{
	background: var(--color-ink);
	color: var(--color-cream);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: .16em;
	text-transform: uppercase;
}
.mf-scale__row--edge{ background: var(--color-kraft); }
.mf-scale__sub{
	display: block;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: .06em;
	color: var(--color-ink-3);
}

/*── Chronologie 2020-2026 ──────────────────────────────────────────────────*/
.mf-time{
	list-style: none;
	margin: 0;
	padding: 0 0 0 var(--space-8);
	border-left: 1px solid rgba(250,244,230,.35);
}
.mf-time__item{
	position: relative;
	padding-bottom: var(--space-8);
}
.mf-time__item:last-child{ padding-bottom: 0; }
.mf-time__item::before{
	content: "";
	position: absolute;
	left: calc(var(--space-8) * -1 - 4px);
	top: .5em;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--color-rose);
}
.mf-time__item--now::before{
	background: var(--color-cream);
	box-shadow: 0 0 0 4px rgba(250,244,230,.25);
}
.mf-band .mf-time__d{
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--color-rose);
	margin: 0 0 var(--space-2);
}
.mf-band .mf-time__t{
	font-size: var(--text-base);
	line-height: 1.7;
	margin: 0;
}

/*── Pour creuser ───────────────────────────────────────────────────────────*/
.mf-src{
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
}
.mf-src__card{
	border-top: var(--border-firm);
	padding-top: var(--space-4);
}
.mf-band .mf-src__k{
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--color-bordeaux);
	margin: 0 0 var(--space-3);
}
.mf-band .mf-src__t{
	font-size: var(--text-sm);
	line-height: 1.65;
	color: var(--color-ink-2);
	margin: 0;
}

/*── Signature de fin ───────────────────────────────────────────────────────*/
.mf-sign{ text-align: center; }
.mf-sign__line{
	font-family: var(--font-display);
	font-size: var(--text-3xl);
	line-height: 1.15;
	color: var(--color-bordeaux);
	margin: 0 0 var(--space-8);
}
.mf-sign__cta{
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	justify-content: center;
}

/*═══════════════════════════════════════════════════════════════════════════
  EN-TÊTE FILM
  Le dégradé n'est pas un pis-aller : c'est l'affiche. L'iframe YouTube n'est
  injectée qu'après le `load` (voir page-manifeste.php), et jamais en
  `prefers-reduced-motion`. Sans JS, sans réseau, ou en mouvement réduit, le
  hero reste exactement aussi lisible — seul le film manque.
═══════════════════════════════════════════════════════════════════════════*/
.mf-hero{
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: clamp(430px, 78vh, 760px);
	display: flex;
	align-items: flex-end;
	padding: var(--space-16) var(--gutter) var(--space-12);
	color: var(--color-cream);
	background:
		radial-gradient(120% 120% at 18% 8%, #4A241A 0%, rgba(74,36,26,0) 58%),
		linear-gradient(160deg, #2A1F17 0%, #1F1A14 45%, #12100C 100%);
}
.mf-hero__film{
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	opacity: 0;
	transition: opacity .9s ease;
	pointer-events: none;
}
.mf-hero__film.is-on{ opacity: .85; }
.mf-hero__film iframe{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100vw;
	height: 56.25vw;
	min-width: 177.78vh;
	min-height: 100vh;
	border: 0;
	pointer-events: none;
}
.mf-hero__veil{
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(31,22,15,.58) 0%, rgba(31,22,15,.22) 38%, rgba(24,18,13,.88) 100%),
		radial-gradient(90% 70% at 50% 50%, rgba(24,18,13,0) 40%, rgba(24,18,13,.48) 100%);
}
.mf-hero__inner{
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--maxw);
	margin-inline: auto;
}
.mf-hero .eyebrow{ color: var(--color-rose); }
.mf-hero h1{
	font-family: var(--font-display);
	font-size: var(--text-hero);
	font-weight: 400;
	line-height: .95;
	letter-spacing: -.01em;
	margin: var(--space-5) 0 var(--space-6);
	color: var(--color-cream);
}
.mf-hero__deck{
	font-family: var(--font-display);
	font-size: var(--text-xl);
	line-height: 1.4;
	max-width: 36rem;
	margin: 0 0 var(--space-6);
	color: rgba(250,244,230,.92);
}
.mf-hero__sign{
	font-family: var(--font-hand);
	font-size: var(--text-2xl);
	line-height: 1;
	margin: 0;
	color: var(--color-rose);
}
.mf-hero__cue{
	position: absolute;
	z-index: 3;
	left: 50%;
	bottom: var(--space-5);
	transform: translateX(-50%);
	width: 44px;
	height: 44px;
	border: 1.5px solid rgba(250,244,230,.55);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-cream);
	text-decoration: none;
	font-size: var(--text-md);
	animation: mf-cue 2.4s ease-in-out infinite;
}
.mf-hero__cue:hover,
.mf-hero__cue:focus-visible{
	background: rgba(250,244,230,.14);
	border-color: var(--color-cream);
}
@keyframes mf-cue{
	0%, 100%{ transform: translate(-50%, 0); }
	50%{ transform: translate(-50%, 6px); }
}

/*── Écrans intermédiaires ──────────────────────────────────────────────────*/
@media (max-width: 1024px){
	.mf-src{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1180px){
	.mf-scale__row{ grid-template-columns: 1fr .8fr .9fr 1.8fr; gap: var(--space-4); padding: var(--space-4) var(--space-5); }
	.mf-trio{ gap: var(--space-4); }
}

@media (max-width: 900px){
	.mf-duo,
	.mf-trio{ grid-template-columns: 1fr; }

	.mf-scale__row{ grid-template-columns: 1fr; gap: var(--space-2); }
	.mf-scale__row--head{ display: none; }
	.mf-scale__row span[data-k]::before{
		content: attr(data-k) " · ";
		font-family: var(--font-mono);
		font-size: var(--text-xs);
		letter-spacing: .14em;
		text-transform: uppercase;
		color: var(--color-ink-3);
	}
	.mf-scale__row span[data-k="Mode"]::before{ content: none; }
}

@media (max-width: 760px){
	.mf-hero{
		min-height: clamp(400px, 68vh, 600px);
		padding: var(--space-12) var(--space-5) var(--space-10);
	}
	.mf-hero__deck{ font-size: var(--text-lg); }

	.mf-band--rule{ padding-top: var(--space-12); }
	.mf-band--to-figure{ padding-bottom: var(--space-8); }
	.mf-band--from-figure{ padding-top: var(--space-8); }

	.mf-figure img{ aspect-ratio: 3 / 2; }
	.mf-figure--schema{ padding: var(--space-5) var(--space-4); }
	.mf-figure--schema img{ aspect-ratio: auto; }

	.mf-repere{ grid-template-columns: 1fr; gap: var(--space-6); }
	.mf-src{ grid-template-columns: 1fr; }

	.mf-band .mf-punch{ font-size: var(--text-xl); }
	.mf-band .mf-quote p{ font-size: var(--text-xl); }
	.mf-band .mf-quote--strong p{ font-size: var(--text-2xl); }
	.mf-sign__line{ font-size: var(--text-2xl); }

	.mf-time{ padding-left: var(--space-6); }
	.mf-time__item::before{ left: calc(var(--space-6) * -1 - 4px); }
}

/*── Mouvement réduit ───────────────────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce){
	.mf-hero__cue{ animation: none; }
	.mf-hero__film{ transition: none; }
}

/*── Impression ─────────────────────────────────────────────────────────────*/
@media print{
	.mf-hero{ min-height: 0; padding: var(--space-6) 0; background: none; color: var(--color-ink); }
	.mf-hero__film,
	.mf-hero__veil,
	.mf-hero__cue{ display: none; }
	.mf-hero h1,
	.mf-hero__deck{ color: var(--color-ink); }
}