/* L'accueil raconté au scroll (inc/recit.php, assets/js/recit.js), en réclame des années 30.
   Sans la classe .recit-anime (pas de JS, ou « réduire les animations »), tout s'empile. */

.recit { --gouttiere: max(16px, env(safe-area-inset-left, 0px)); }
.recit h1, .recit h2 { text-wrap: balance; }
/* Une image du récit garde toujours ses proportions : les scènes fixent souvent la hauteur,
   et une colonne étroite (tablette) peut alors lui imposer aussi une largeur. */
.recit img { max-width: 100%; height: auto; object-fit: contain; }

/* Titre imprimé en deux passes : l'encre rouge légèrement décalée sous la marine. */
.une-texte h1, .finitions-titre, .insert-texte h2 {
	text-shadow: .045em .045em 0 var(--wp--preset--color--rouge);
}

/* ---------- Mise en page de base, lisible sans animation ---------- */
.scene-colle {
	padding: clamp(3rem, 8vh, 6rem) var(--gouttiere);
	display: grid;
	justify-items: center;
	gap: 2rem;
	text-align: center;
	position: relative;
}
.une-script {
	font-family: var(--wp--preset--font-family--script);
	color: var(--wp--preset--color--rouge);
	font-size: clamp(1.8rem, 3.6vw, 2.8rem);
	line-height: 1;
	margin: 0 0 .3rem;
	transform: rotate(-4deg);
}
.une-texte h1 { margin: 0; font-size: clamp(2.4rem, 6.4vw, 5.6rem); max-width: 14ch; margin-inline: auto; }
.une-texte p { margin: 1rem 0 0; font-size: clamp(1.05rem, 1.8vw, 1.3rem); font-style: italic; color: var(--wp--preset--color--gris); }
.une-rang { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; position: relative; }
/* Le briquet de la une : illustration vectorielle (inc/briquet.svg.php), repères en unités du
   viewBox 600 × 560. --ouvre (0 à 1) fait pivoter le capot sur sa charnière (278, 270) ; --feu
   allume les jets. Sans animation, les deux valent 0 : briquet fermé. Le décalage rouge du
   repérage est posé sur l'ensemble, pour qu'il reste en bas à droite quand le capot tourne. */
.une-briquet { position: relative; z-index: 1; height: min(50vh, 560px); aspect-ratio: 480 / 510; margin-inline: auto; }
.une-briquet .lb { display: block; width: 100%; height: 100%; overflow: visible; }
.lb-tout {
	transform-box: view-box;
	transform: translateX(calc(-90px + var(--ouvre, 0) * 100px));
	filter: drop-shadow(6px 6px 0 var(--wp--preset--color--rouge));
}
.lb-capot { transform-box: view-box; transform-origin: 278px 270px; transform: rotate(calc(var(--ouvre, 0) * -178deg)); }
.lb-flammes { opacity: var(--feu, 0); transform-box: view-box; transform-origin: 370px 196px; transform: scaleY(calc(.15 + var(--feu, 0) * .85)); }
.lb-etincelle {
	transform-box: view-box;
	transform-origin: 370px 170px;
	opacity: clamp(0, var(--feu, 0) * (1 - var(--feu, 0)) * 4.5, 1);
	transform: scale(calc(.4 + var(--feu, 0) * 1.3)) rotate(calc(var(--feu, 0) * 50deg));
}
.lb-jets, .lb-chaleur { transform-box: view-box; transform-origin: 370px 196px; }
@media (prefers-reduced-motion: no-preference) {
	.recit-anime .lb-jets { animation: lb-vacille .12s steps(2) infinite alternate; }
	.recit-anime .lb-chaleur { animation: lb-chaleur .5s ease-in-out infinite alternate; }
}
@keyframes lb-vacille { to { transform: scaleY(.94) scaleX(1.04); } }
@keyframes lb-chaleur { from { opacity: .45; } to { opacity: 1; transform: scale(1.05); } }
.une-soleil, .une-sceau { display: none; }
.une-pied { display: grid; justify-items: center; gap: .9rem; }
.une-son {
	font-family: var(--wp--preset--font-family--reclame);
	font-weight: 600; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
	background: none; border: 1px solid currentColor; border-radius: 2px;
	color: var(--wp--preset--color--encre); padding: .45rem .8rem; cursor: pointer;
}
.une-son { display: none; }
.recit-anime .une-son { display: inline-block; }
.une-son[aria-pressed="true"] { background: var(--wp--preset--color--encre); color: var(--wp--preset--color--papier); }
.une-son:focus-visible { outline: 2px solid var(--wp--preset--color--moutarde); outline-offset: 2px; }
.une-suite {
	font-family: var(--wp--preset--font-family--reclame);
	font-weight: 700; text-transform: uppercase; letter-spacing: .18em;
	font-size: clamp(.9rem, 1.6vw, 1.15rem);
	margin: 0;
	border-top: 4px double currentColor; border-bottom: 4px double currentColor;
	padding: .55rem 1.2rem;
}

.finitions-titre, .insert-texte h2, .comparatif h2, .vitrine h2 { font-size: clamp(2rem, 4.6vw, 3.6rem); margin: 0; }
.finitions-scene { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2rem; width: 100%; max-width: 1200px; }
.finition { margin: 0; display: grid; gap: .8rem; justify-items: center; }
.finition img { width: min(240px, 100%); filter: drop-shadow(0 22px 22px rgba(38, 41, 44, .22)); }
.finition figcaption { display: grid; gap: .5rem; justify-items: center; width: 100%; max-width: 26rem; min-width: 0; }
.finition-ref { font-family: var(--wp--preset--font-family--reclame); font-weight: 600; font-size: .78rem; letter-spacing: .2em; color: var(--wp--preset--color--rouge); }
.finition-nom { font-family: var(--wp--preset--font-family--reclame); font-weight: 800; text-transform: uppercase; font-size: 1.5rem; line-height: 1; letter-spacing: .02em; }
.finition-texte { font-style: italic; color: var(--wp--preset--color--gris); max-width: 32ch; }
.finition-prix { width: 100%; font-size: .95rem; }
.finitions-points { display: none; }
.finitions-pied { display: grid; justify-items: center; gap: .9rem; position: relative; }
/* Les cinq finitions ne sont qu'un début : le lien mène au catalogue entier. */
.finitions-tous {
	font-family: var(--wp--preset--font-family--reclame);
	font-weight: 700; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase;
	color: var(--wp--preset--color--rouge); text-decoration: none;
	border-bottom: 2px solid currentColor; padding-bottom: .15rem;
}
.finitions-tous:hover { color: var(--wp--preset--color--encre); }
.finitions-tous:focus-visible { outline: 2px solid var(--wp--preset--color--moutarde); outline-offset: 3px; }

.scene-insert .scene-colle { background-color: var(--wp--preset--color--papier-fonce); }
.insert-texte { max-width: 36rem; }
.insert-texte p { font-style: italic; color: var(--wp--preset--color--gris); font-size: 1.12rem; margin: 1rem 0 0; }
.insert-scene { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 5vw, 5rem); max-width: 980px; width: 100%; }
.insert-photo { width: min(360px, 100%); justify-self: end; filter: drop-shadow(0 18px 18px rgba(38, 41, 44, .2)); }
.insert-legendes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; text-align: left; justify-self: start; }
.insert-legendes li { font-size: clamp(1.1rem, 2vw, 1.5rem); line-height: 1.25; display: grid; gap: .15rem; border-top: 1px solid var(--wp--preset--color--encre); padding-top: .55rem; max-width: 22rem; }
.insert-legendes .fig { font-family: var(--wp--preset--font-family--reclame); font-weight: 600; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--wp--preset--color--rouge); }
@media (max-width: 720px) {
	.insert-scene { grid-template-columns: 1fr; justify-items: center; }
	.insert-photo { justify-self: center; width: min(240px, 70%); }
}

/* Mèche ou torche : une page de journal, deux colonnes et un filet entre elles. */
.scene-libre { padding: clamp(4rem, 10vw, 7rem) var(--gouttiere); max-width: 1200px; margin-inline: auto; box-sizing: border-box; }
.comparatif { text-align: center; }
.comparatif h2 { border-top: 4px double var(--wp--preset--color--encre); border-bottom: 4px double var(--wp--preset--color--encre); padding: .9rem 0 .75rem; }
.comparatif-intro { max-width: 58ch; margin: 1.6rem auto 0; font-style: italic; font-size: 1.15rem; }
.comparatif-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: left; margin-top: 2.2rem; }
.comparatif-cols > div { padding: 0 clamp(1rem, 3vw, 2.5rem); }
.comparatif-cols > div + div { border-left: 1px solid var(--wp--preset--color--encre); }
.comparatif-cols h3 { margin: 0 0 .7rem; }
.comparatif-cols p { margin: 0; max-width: 46ch; }
.comparatif-cols > div > p::first-letter {
	font-family: var(--wp--preset--font-family--reclame); font-weight: 800; float: left; font-size: 3.2em; line-height: .82; margin: .06em .1em 0 0; color: var(--wp--preset--color--rouge);
}
@media (max-width: 820px) {
	.comparatif-cols { grid-template-columns: 1fr; gap: 2rem; }
	.comparatif-cols > div { padding: 0; }
	.comparatif-cols > div + div { border-left: 0; border-top: 1px solid var(--wp--preset--color--encre); padding-top: 1.5rem; }
}
.comparatif-prix {
	display: inline-block;
	margin: 3rem 0 0;
	background: var(--wp--preset--color--rouge);
	color: var(--wp--preset--color--papier);
	font-family: var(--wp--preset--font-family--reclame);
	font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
	font-size: clamp(.95rem, 2vw, 1.25rem);
	padding: .7rem 1.4rem;
	transform: rotate(-1.5deg);
	box-shadow: 4px 4px 0 var(--wp--preset--color--encre);
}

/* Les classiques : une page de catalogue par correspondance. */
.vitrine-tete { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; border-bottom: 4px double var(--wp--preset--color--encre); padding-bottom: .8rem; }
.vitrine-tous { font-family: var(--wp--preset--font-family--reclame); font-weight: 600; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--wp--preset--color--rouge); }
.vitrine-grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 44vw), 1fr)); gap: clamp(1rem, 2.4vw, 2rem); }
.vitrine-grille a { display: grid; gap: .25rem; text-decoration: none; color: inherit; }
.vitrine-photo { display: block; aspect-ratio: 4 / 5; background-color: var(--wp--preset--color--papier-fonce); background-image: var(--trame); background-size: 5px 5px; border: 1px solid var(--wp--preset--color--encre); overflow: hidden; margin-bottom: .55rem; }
.vitrine-photo img { width: 100%; height: 100%; object-fit: contain; padding: 12%; box-sizing: border-box; transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.vitrine-grille a:hover .vitrine-photo img { transform: translateY(-4px) rotate(-1deg); }
.vitrine-art { font-style: italic; font-size: .82rem; color: var(--wp--preset--color--gris); }
.vitrine-nom { font-family: var(--wp--preset--font-family--reclame); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .98rem; line-height: 1.2; }
.vitrine-prix { font-size: .9rem; }

/* ---------- Scènes animées ---------- */
.recit-anime .scene { position: relative; }
.recit-anime .scene-une { height: 260vh; }
.recit-anime .scene-finitions { height: calc(var(--etapes, 5) * 85vh + 100vh); }
.recit-anime .scene-insert { height: 280vh; }
.recit-anime .scene-colle {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	box-sizing: border-box;
	overflow: hidden;
	padding-top: calc(4.5rem + env(safe-area-inset-top, 0px));
	padding-bottom: 2rem;
	align-content: center;
}

/* 1. La une. --q : avancée lissée de 0 à 1. */
.recit-anime .scene-une .scene-colle { grid-template-rows: auto 1fr auto; align-content: stretch; gap: 1rem; }
/* Le capot s'ouvre de 5 à 30 %, le jet s'allume à partir de 33 %. */
.recit-anime .scene-une {
	--ouvre: clamp(0, (var(--q, 0) - .05) * 4, 1);
	--feu: clamp(0, (var(--q, 0) - .33) * 6, 1);
}
.recit-anime .une-texte { position: relative; z-index: 3; opacity: clamp(0, 2.6 - var(--q, 0) * 4, 1); transform: translateY(calc(var(--q, 0) * -4vh)); }
.recit-anime .une-rang { position: relative; width: 100%; display: block; }
/* Soleil Art déco derrière le briquet, qui tourne doucement avec le scroll. */
.recit-anime .une-soleil {
	display: block;
	position: absolute;
	left: 50%; top: 50%;
	width: max(130vmin, 900px); aspect-ratio: 1;
	transform: translate(-50%, -50%) rotate(calc(var(--q, 0) * 24deg));
	background: repeating-conic-gradient(from 0deg, rgba(168, 133, 61, .2) 0deg 5deg, transparent 5deg 10deg);
	-webkit-mask: radial-gradient(circle, #000 12%, transparent 62%);
	mask: radial-gradient(circle, #000 12%, transparent 62%);
	opacity: calc(1 - var(--q, 0) * .6);
	pointer-events: none;
}
/* Sceau « Prêt pour le cigare », tamponné à côté du briquet. */
.recit-anime .une-sceau {
	display: grid;
	place-items: center;
	position: absolute;
	z-index: 4;
	left: calc(50% + min(15vh, 22vw));
	top: 12%;
	width: clamp(5.5rem, 11vh, 8rem);
	aspect-ratio: 1;
	border-radius: 50%;
	border: 3px double var(--wp--preset--color--rouge);
	color: var(--wp--preset--color--rouge);
	background: var(--wp--preset--color--papier);
	font-family: var(--wp--preset--font-family--reclame);
	font-weight: 700; font-size: clamp(.62rem, 1.2vh, .8rem); line-height: 1.15;
	letter-spacing: .12em; text-transform: uppercase; text-align: center;
	padding: .6rem;
	box-sizing: border-box;
	transform: rotate(12deg) scale(calc(1 - var(--q, 0) * 1.5));
	opacity: clamp(0, 1 - var(--q, 0) * 2.5, 1);
}
.recit-anime .une-briquet {
	position: absolute;
	left: 50%;
	top: 50%;
	margin: 0;
	/* Le titre s'efface : le briquet remonte un peu pour occuper l'écran. */
	transform: translate(-50%, calc(-50% - min(var(--q, 0) * 1.6, 1) * 9vh));
}
@media (max-width: 720px) {
	.recit-anime .une-sceau { left: auto; right: 4%; top: 6%; }
	.recit-anime .une-briquet { height: auto; width: 96vw; }
}
.recit-anime .une-suite { opacity: clamp(0, var(--q, 0) * 4 - 2, 1); }
.recit-anime .une-son { opacity: clamp(.35, var(--q, 0) * 4, 1); }

/* 2. Les finitions : une à la fois, le papier prend la teinte, trame de points par-dessus. */
.recit-anime .scene-finitions .scene-colle { background-color: var(--teinte, #d2d0ca); transition: background-color .7s ease; grid-template-rows: auto 1fr auto; align-content: stretch; }
.recit-anime .scene-finitions .scene-colle::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background-image: var(--trame); background-size: 5px 5px;
}
.recit-anime .finitions-scene { position: relative; display: block; max-width: none; }
.recit-anime .finition {
	position: absolute;
	inset: 0;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(1rem, 5vw, 5rem);
	max-width: 1080px;
	margin: 0 auto;
	opacity: 0;
	transform: translateY(3vh);
	transition: opacity .6s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
	pointer-events: none;
}
.recit-anime .finition[data-active] { opacity: 1; transform: none; pointer-events: auto; }
.recit-anime .finition img { height: min(60vh, 640px); width: auto; justify-self: end; }
.recit-anime .finition figcaption { justify-items: start; text-align: left; }
.recit-anime .finition-nom { font-size: clamp(1.8rem, 3.8vw, 3.2rem); overflow-wrap: anywhere; }
.recit-anime .finitions-points { display: flex; gap: .5rem; justify-content: center; list-style: none; margin: 0; padding: 0; position: relative; }
.recit-anime .finitions-points li { width: 9px; height: 9px; border: 1.5px solid var(--wp--preset--color--encre); transform: rotate(45deg); transition: background .3s; }
.recit-anime .finitions-points li[data-active] { background: var(--wp--preset--color--rouge); border-color: var(--wp--preset--color--rouge); }
@media (max-width: 720px) {
	.recit-anime .finition { grid-template-columns: 1fr; justify-items: center; align-content: center; gap: 1rem; }
	.recit-anime .finition img { height: min(42vh, 400px); justify-self: center; }
	.recit-anime .finition figcaption { justify-items: center; text-align: center; }
}

/* 3. L'insert monte, les figures viennent une à une. */
.recit-anime .scene-insert .scene-colle { grid-template-rows: auto 1fr; align-content: stretch; }
.recit-anime .insert-texte { opacity: clamp(0, 1.4 - var(--q, 0) * 1.1, 1); }
.recit-anime .insert-photo { transform: translateY(calc((1 - min(var(--q, 0) * 1.6, 1)) * 45vh)); height: min(58vh, 600px); width: auto; }
.recit-anime .insert-legendes li {
	opacity: clamp(0, (var(--q, 0) - .35 - var(--n) * .13) * 9, 1);
	transform: translateX(calc(clamp(0, 1 - (var(--q, 0) - .35 - var(--n) * .13) * 9, 1) * 1.5rem));
}
@media (max-width: 720px) {
	.recit-anime .insert-scene { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); justify-items: stretch; gap: 1rem; }
	/* La hauteur commande : la largeur suit (la règle de base en fixait une aussi, la photo s'étirait). */
	.recit-anime .insert-photo { height: min(38vh, 320px); width: auto; max-width: 100%; object-fit: contain; justify-self: end; }
	.recit-anime .insert-legendes li { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
	.vitrine-photo img { transition: none; }
}