/*
 * JF Home — page d'accueil Juliette Febrero.
 * Tout est scopé sous .jf-home (chargé uniquement sur le modèle « Accueil JF »).
 * Mobile-first.
 */

/* ---------- Page ---------- */
/* Fond de la page (visible quand on « tire » au-delà du haut ou du bas) : notre couleur foncée */
html:has(> body.jf-home-page),
body.jf-home-page {
	margin: 0;
	background: #12061b !important;
}

/* ---------- Jetons ---------- */
.jf-home {
	--jf-font-display: "cc-pass-the-port", "adobe-garamond-pro", Georgia, serif;
	--jf-font-titles: "adobe-garamond-pro", Garamond, Georgia, serif;
	--jf-font-text: "JF Pangram Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--jf-nuit: #12061b;
	--jf-creme: #f8f6f0;
	--jf-lilas: #e2bfff;
	--jf-mauve: #a984d4;
	--jf-prune: #54336f;
	--jf-dore: #d9a98c;
	--jf-texte: #3b3b3b;
	--jf-texte-clair: #f1ecf5;

	--jf-radius-section: clamp(40px, 7vw, 90px);
	--jf-radius-carte: 24px;
	--jf-gutter: clamp(20px, 5vw, 64px);
	--jf-max: 1140px;
	--jf-header-h: 84px;
	--jf-admin: var(--wp-admin--admin-bar--height, 0px);
	--jf-header-offset: calc(var(--jf-header-h) + var(--jf-admin));

	/* Casse des titres : « none » = minuscules, « uppercase » pour revenir aux majuscules */
	--jf-titre-casse: none;

	/* Livre du hero (largeur et hauteur partagées avec la section suivante) */
	--jf-livre-w: clamp(220px, min(62vw, 42svh), 440px);
	--jf-livre-h: calc(var(--jf-livre-w) * 1.234);

	font-family: var(--jf-font-text);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.7;
	color: var(--jf-texte);
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
	position: relative; /* repère des cartes de la traînée du bandeau */
}

/* ---------- Remises à zéro locales ---------- */
.jf-home *,
.jf-home *::before,
.jf-home *::after {
	box-sizing: border-box;
}
.jf-home h1,
.jf-home h2,
.jf-home h3,
.jf-home p {
	margin: 0;
	padding: 0;
	line-height: inherit;
	color: inherit;
	font-weight: inherit;
}
.jf-home ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.jf-home a {
	color: inherit;
}
.jf-home img,
.jf-home svg {
	display: block;
	max-width: 100%;
	height: auto;
}
.jf-home button {
	font: inherit;
	color: inherit;
}
.jf-home .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.jf-home .jf-insecable {
	white-space: nowrap;
}
.jf-home :focus-visible {
	outline: 3px solid var(--jf-lilas);
	outline-offset: 3px;
}
.jf-home .jf-skip {
	position: fixed;
	top: calc(var(--jf-admin) + 8px);
	left: 8px;
	z-index: 1000;
	padding: 10px 16px;
	border-radius: 8px;
	background: var(--jf-creme);
	color: var(--jf-prune);
	transform: translateY(-200%);
}
.jf-home .jf-skip:focus {
	transform: none;
}

/* ---------- Structure ---------- */
.jf-home .jf-main {
	display: block;
	background: var(--jf-nuit); /* visible dans les coins arrondis */
}
.jf-home .jf-section {
	position: relative;
	padding-block: clamp(72px, 10vw, 128px);
	scroll-margin-top: var(--jf-header-offset);
}
.jf-home .jf-section--nuit {
	background-color: var(--jf-nuit);
	color: var(--jf-texte-clair);
}
.jf-home .jf-section--creme {
	background-color: var(--jf-creme);
	color: var(--jf-texte);
}
/* Les hauteurs fractionnaires laissaient un trait d'1 px entre deux sections : on les fait se chevaucher */
.jf-home .jf-section + .jf-section:not(.jf-section--round) {
	margin-top: -1px;
}
/* Changement de couleur : la section recouvre la précédente avec de grands coins arrondis */
.jf-home .jf-section--round {
	margin-top: calc(-1 * var(--jf-radius-section));
	border-radius: var(--jf-radius-section) var(--jf-radius-section) 0 0;
	z-index: 1;
}
/* Une seule fin arrondie, juste avant le pied de page */
.jf-home .jf-main > .jf-section:last-child {
	border-bottom-left-radius: var(--jf-radius-section);
	border-bottom-right-radius: var(--jf-radius-section);
}

.jf-home .jf-container {
	width: min(100% - 2 * var(--jf-gutter), var(--jf-max));
	margin-inline: auto;
}

/* ---------- Typographie ---------- */
.jf-home .jf-titre {
	font-family: var(--jf-font-titles);
	font-weight: 700;
	font-size: clamp(2rem, 1.3rem + 2.4vw, 3.1rem);
	line-height: 1.08;
	letter-spacing: 0.005em;
	text-transform: var(--jf-titre-casse);
	color: var(--jf-mauve);
	margin-bottom: 0.6em;
	text-wrap: balance;
}
.jf-home .jf-section--nuit .jf-titre {
	color: var(--jf-lilas);
}
/* Mobile : titres de section un peu plus grands */
@media (max-width: 899px) {
	.jf-home .jf-titre {
		font-size: 2.5rem;
	}
}
.jf-home .jf-prose p + p {
	margin-top: 1em;
}
.jf-home .jf-prose a {
	text-decoration: underline;
}

.jf-home .jf-ornement {
	width: min(360px, 74vw);
	margin: clamp(56px, 8vw, 96px) auto 0;
}

.jf-home .jf-ornement {
	transform-origin: 50% 100%;
}
.jf-home .jf-ornement.is-vent {
	filter: url(#jf-vent);
	animation: jf-vent 1.6s ease-in-out;
}
@keyframes jf-vent {
	20% {
		transform: skewX(-2deg) rotate(-0.4deg);
	}
	45% {
		transform: skewX(1.6deg) rotate(0.3deg);
	}
	70% {
		transform: skewX(-0.9deg);
	}
}

.jf-home .jf-ovale {
	border-radius: 999px;
	overflow: hidden;
}

/* ---------- Boutons ---------- */
.jf-home .jf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.7em;
	min-height: 64px;
	padding: 1.15em 3.3em;
	border-radius: 999px;
	border: 1.5px solid transparent;
	font-family: var(--jf-font-text);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.25;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.jf-home .jf-btn--plein {
	background: var(--jf-mauve);
	color: var(--jf-nuit);
}
.jf-home .jf-btn--plein:hover,
.jf-home .jf-btn--plein:focus-visible {
	background: var(--jf-lilas);
}
.jf-home .jf-btn--contour {
	border-color: var(--jf-mauve);
	color: var(--jf-mauve);
	background: transparent;
	margin-top: 2.2em;
}
.jf-home .jf-btn--contour:hover,
.jf-home .jf-btn--contour:focus-visible {
	background: var(--jf-mauve);
	color: #fff;
}
.jf-home .jf-btn--clair {
	border-color: var(--jf-lilas);
	color: var(--jf-lilas);
	margin-top: 0;
}
.jf-home .jf-btn--clair:hover,
.jf-home .jf-btn--clair:focus-visible {
	background: var(--jf-lilas);
	color: var(--jf-nuit);
}
.jf-home .jf-btn--prune {
	background: var(--jf-prune);
	color: var(--jf-lilas);
}
.jf-home .jf-btn--prune:hover,
.jf-home .jf-btn--prune:focus-visible {
	background: var(--jf-nuit);
}
.jf-home .jf-btn--boutique {
	width: 100%;
	padding-left: 0.8em;
	justify-content: flex-start;
	background: var(--jf-creme);
	color: var(--jf-prune);
}
.jf-home .jf-btn--boutique:hover,
.jf-home .jf-btn--boutique:focus-visible {
	background: #fff;
}
.jf-home .jf-btn__logo {
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	padding: 6px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(84, 51, 111, 0.12);
}
.jf-home .jf-btn__logo-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Survol : chaque lettre monte et disparaît, puis réapparaît par en dessous, avec un léger décalage */
.jf-home .jf-roll__lettres {
	display: inline-flex;
	overflow: hidden;
	line-height: 1.3;
	padding-block: 0.05em;
	margin-block: -0.05em;
}
.jf-home .jf-roll__lettres > span {
	display: inline-block;
	text-shadow: 0 1.4em currentColor;
	transition: transform 0.5s cubic-bezier(0.65, 0, 0.25, 1);
	transition-delay: calc(var(--i, 0) * 22ms);
}
.jf-home .jf-roll__espace {
	white-space: pre;
}
.jf-home .jf-btn:hover .jf-roll__lettres > span,
.jf-home .jf-btn:focus-visible .jf-roll__lettres > span {
	transform: translateY(-1.4em);
}

/* Groupe d'actions (commande + premiers chapitres) */
.jf-home .jf-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 2.2em;
}
.jf-home .jf-actions .jf-btn {
	flex: 1 1 260px;
}
@media (min-width: 600px) {
	.jf-home .jf-actions .jf-btn {
		flex: 0 1 auto;
	}
}
/* Desktop : « Je commande » et « Lire les premiers chapitres » côte à côte */
@media (min-width: 900px) {
	.jf-home .jf-actions {
		flex-wrap: nowrap;
	}
	.jf-home .jf-actions .jf-btn {
		padding-inline: 2.4em;
		white-space: nowrap;
	}
}

/* ---------- En-tête ---------- */
.jf-home .jf-header {
	position: fixed;
	top: var(--jf-admin);
	left: 0;
	right: 0;
	z-index: 100;
	pointer-events: none;
}
.jf-home .jf-header__barre {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: var(--jf-header-h);
	padding-inline: var(--jf-gutter);
	border-radius: 0 0 28px 28px;
	background: transparent;
	transition: background-color 0.4s, box-shadow 0.4s;
	pointer-events: auto;
}
.jf-home .jf-header.is-scrolled .jf-header__barre {
	background: rgba(18, 6, 27, 0.96);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}
.jf-home .jf-header__logo {
	position: relative;
	z-index: 2;
	display: block;
	width: 64px;
}
.jf-home .jf-menu__liste {
	display: flex;
	gap: clamp(16px, 2.2vw, 32px);
}
.jf-home .jf-menu__lien {
	position: relative;
	display: inline-block;
	padding-block: 6px;
	font-size: 0.95rem;
	color: var(--jf-texte-clair);
	text-decoration: none;
}
.jf-home .jf-menu__lien::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1.5px;
	background: var(--jf-lilas);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.35s cubic-bezier(0.65, 0, 0.25, 1);
}
.jf-home .jf-menu__lien:hover::after,
.jf-home .jf-menu__lien:focus-visible::after {
	transform: scaleX(1);
	transform-origin: left;
}
.jf-home .jf-header__burger,
.jf-home .jf-menu__boule {
	display: none;
}

@media (max-width: 899px) {
	.jf-home {
		--jf-header-h: 72px;
	}
	.jf-home .jf-header__logo {
		width: 54px;
	}
	.jf-home .jf-header__burger {
		position: relative;
		z-index: 2;
		display: grid;
		place-items: center;
		width: 48px;
		height: 48px;
		margin-right: -10px;
		padding: 0;
		border: 0;
		background: transparent;
		cursor: pointer;
	}
	.jf-home .jf-header__burger-barres,
	.jf-home .jf-header__burger-barres::before,
	.jf-home .jf-header__burger-barres::after {
		display: block;
		width: 24px;
		height: 2px;
		border-radius: 2px;
		background: var(--jf-texte-clair);
		transition: transform 0.3s, background-color 0.3s;
	}
	.jf-home .jf-header__burger-barres {
		position: relative;
	}
	.jf-home .jf-header__burger-barres::before,
	.jf-home .jf-header__burger-barres::after {
		content: "";
		position: absolute;
		left: 0;
	}
	.jf-home .jf-header__burger-barres::before {
		top: -7px;
	}
	.jf-home .jf-header__burger-barres::after {
		top: 7px;
	}
	.jf-home .jf-header.is-open .jf-header__burger-barres {
		background: transparent;
	}
	.jf-home .jf-header.is-open .jf-header__burger-barres::before {
		transform: translateY(7px) rotate(45deg);
	}
	.jf-home .jf-header.is-open .jf-header__burger-barres::after {
		transform: translateY(-7px) rotate(-45deg);
	}
	.jf-home .jf-menu {
		position: fixed;
		inset: 0;
		display: grid;
		place-items: center;
		background: var(--jf-nuit);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.35s, visibility 0s 0.35s;
		pointer-events: auto;
	}
	.jf-home .jf-header.is-open .jf-menu {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.35s;
	}
	.jf-home .jf-menu {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		padding: calc(var(--jf-header-offset) + 2vh) 24px 40px;
		overflow-y: auto;
	}
	.jf-home .jf-menu__boule {
		display: block;
		flex: none;
		width: 110px;
		margin-bottom: 3vh;
		filter: drop-shadow(0 0 18px rgba(181, 140, 255, 0.35));
	}
	.jf-home .jf-menu__liste {
		flex-direction: column;
		align-items: center;
		gap: 18px;
	}
	.jf-home .jf-menu__lien {
		font-family: var(--jf-font-titles);
		font-weight: 700;
		font-size: 1.5rem;
		text-transform: uppercase;
	}
}

/* ---------- 1. Hero ---------- */
.jf-home .jf-hero {
	/* Tailles liées à la hauteur d'écran : la moitié du livre doit rester visible dès l'arrivée */
	--jf-boule-w: clamp(240px, min(84vw, 45svh), 540px);
	--jf-titre-w: clamp(300px, min(94vw, 62svh), 760px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	min-height: 100svh;
	padding-top: var(--jf-header-offset);
	/* La moitié haute du livre est visible dans le hero dès l'arrivée */
	padding-bottom: calc(var(--jf-livre-h) * 0.5 + 16px);
	text-align: center;
}
.jf-home .jf-hero__fond {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}
.jf-home .jf-hero__fond img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.06); /* marge pour la parallaxe à la souris */
	will-change: transform;
}
.jf-home .jf-hero__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-inline: var(--jf-gutter);
}
/* Boules de cristal : reflet qui glisse au survol */
.jf-home .jf-boule {
	position: relative;
	display: block;
}
.jf-home .jf-boule img {
	transition: filter 0.6s;
}
.jf-home .jf-boule::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.6) 50%, transparent 62%) 160% 0 / 260% 100% no-repeat;
	-webkit-mask: var(--jf-boule-masque) center / contain no-repeat;
	mask: var(--jf-boule-masque) center / contain no-repeat;
	mix-blend-mode: screen;
	opacity: 0;
	pointer-events: none;
}
@media (hover: hover) {
	.jf-home .jf-boule:hover img {
		filter: brightness(1.08) drop-shadow(0 0 24px rgba(181, 140, 255, 0.45));
	}
	.jf-home .jf-boule:hover::after {
		animation: jf-reflet 1.3s cubic-bezier(0.4, 0, 0.2, 1);
	}
}
@keyframes jf-reflet {
	0% {
		opacity: 0;
		background-position: 160% 0;
	}
	25% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		background-position: -60% 0;
	}
}

.jf-home .jf-hero__boule {
	width: var(--jf-boule-w);
	margin-top: calc(var(--jf-boule-w) * -0.07); /* l'image a une marge transparente en haut */
}
.jf-home .jf-hero__titre {
	position: relative;
	z-index: 1; /* passe légèrement par-dessus la boule */
	width: var(--jf-titre-w);
	margin-top: calc(var(--jf-boule-w) * -0.4);
	font-family: var(--jf-font-titles);
	font-size: 2.5rem;
	line-height: 1.1;
	color: #b5f0d8;
}
/* Légère ondulation du titre (filtre SVG #jf-vague, animé en continu) */
.jf-home .jf-hero__titre img {
	filter: url(#jf-vague);
}

.jf-home .jf-hero__autrice {
	position: relative;
	z-index: 1;
	margin-top: calc(var(--jf-titre-w) * -0.11); /* le logo a une marge transparente en bas */
	font-family: var(--jf-font-titles);
	font-weight: 700;
	font-size: clamp(1.3rem, 1rem + 1.1vw, 1.85rem);
	line-height: 1.1;
	letter-spacing: 0.02em;
	color: var(--jf-dore);
}
.jf-home .jf-hero__tome {
	margin-top: 0.1rem;
	font-family: var(--jf-font-titles);
	font-weight: 700;
	font-style: italic;
	font-size: clamp(1.35rem, 1.1rem + 0.6vw, 1.6rem);
	color: var(--jf-mauve);
}
.jf-home .jf-hero__livre {
	position: absolute;
	left: 50%;
	bottom: 0;
	z-index: 3; /* passe au-dessus de la section suivante (le hero ne crée pas de contexte d'empilement) */
	width: var(--jf-livre-w);
	transform: translate(-50%, 40%); /* repris par GSAP pour la remontée au scroll */
	will-change: transform;
}
.jf-home .jf-hero__livre img {
	filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.45));
}
/* Le livre est un bouton qui ouvre la fenêtre de commande */
.jf-home .jf-hero__livre-bouton {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.jf-home .jf-hero__livre-bouton:focus-visible {
	outline-offset: 8px;
	border-radius: 12px;
}

/* Survol du livre : il se soulève légèrement */
.jf-home .jf-hero__livre-survol {
	display: block;
	transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.6s;
}
.jf-home .jf-hero__livre-bouton:active .jf-hero__livre-survol {
	transform: translateY(-6px) scale(0.99);
}
@media (hover: hover) {
	.jf-home .jf-hero__livre-survol:hover {
		transform: translateY(-14px) rotate(-2.5deg) scale(1.03);
		filter: drop-shadow(0 0 28px rgba(169, 132, 212, 0.45));
	}
}

/* Apparition des éléments au chargement */
@keyframes jf-reveal {
	from {
		opacity: 0;
		transform: translateY(32px);
	}
}
@keyframes jf-reveal-boule {
	from {
		opacity: 0;
		transform: scale(0.82);
		filter: blur(10px);
	}
}
@keyframes jf-reveal-livre {
	from {
		opacity: 0;
		transform: translateY(90px) rotate(-4deg);
	}
}
.js .jf-home .jf-reveal {
	animation: jf-reveal 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	animation-delay: calc(0.15s + var(--d, 0) * 0.18s);
}
.js .jf-home .jf-reveal--boule {
	animation-name: jf-reveal-boule;
	animation-duration: 1.4s;
}
.js .jf-home .jf-reveal--livre {
	animation-name: jf-reveal-livre;
	animation-duration: 1.3s;
}

@media (max-width: 899px) {
	.jf-home {
		--jf-livre-w: clamp(240px, 72vw, 340px);
	}
	.jf-home .jf-hero {
		/* Pas de hauteur plein écran sur mobile : le livre suit « Tome 1 » et la section crème remonte */
		min-height: 0;
		padding-top: calc(var(--jf-header-offset) - 12px);
		padding-bottom: calc(var(--jf-livre-h) * 0.6 + 44px);
	}
	.jf-home .jf-section.jf-accroche {
		padding-top: calc(var(--jf-livre-h) * 0.26 + 84px);
	}
	.jf-home .jf-hero__boule {
		margin-top: calc(var(--jf-boule-w) * -0.14);
	}
}

/* Hero, version B : infos à gauche, grand livre à droite, entièrement dans le hero */
.jf-home .jf-hero.jf-hero--b {
	--jf-boule-w: clamp(220px, min(30vw, 44svh), 480px);
	--jf-titre-w: clamp(280px, min(40vw, 52svh), 620px);
	--jf-livre-b: clamp(300px, min(40vw, 56svh), 600px);
	display: grid;
	/* Colonnes à la taille de leur contenu, resserrées au centre */
	grid-template-columns: minmax(0, auto) minmax(0, auto);
	justify-content: center;
	align-items: center;
	justify-items: center;
	column-gap: clamp(20px, 3vw, 56px);
	padding-inline: var(--jf-gutter);
	/* La section crème remonte de la hauteur de l'arrondi */
	padding-bottom: calc(var(--jf-radius-section) + 24px);
}
.jf-home .jf-hero--b .jf-hero__inner {
	padding-inline: 0;
}
.jf-home .jf-hero--b .jf-hero__livre {
	position: relative;
	left: auto;
	bottom: auto;
	width: var(--jf-livre-b);
	max-width: 100%;
	transform: none;
}
.jf-home .jf-hero--b + .jf-section.jf-accroche {
	padding-top: clamp(32px, 4vw, 56px);
}
@media (max-width: 899px) {
	.jf-home .jf-hero.jf-hero--b {
		justify-content: stretch;
		--jf-boule-w: clamp(240px, 84vw, 420px);
		--jf-titre-w: clamp(280px, 92vw, 520px);
		--jf-livre-b: clamp(260px, 80vw, 400px);
		grid-template-columns: minmax(0, 1fr);
		row-gap: 28px;
		min-height: 0;
		padding-top: calc(var(--jf-header-offset) - 12px);
	}
}

/*
 * Hero, version C : pas de livre dans le hero. L'écran se fixe sur la section crème (sticky natif)
 * et le livre la traverse de bas en haut, par-dessus le texte (mouvement piloté par GSAP).
 */
.jf-home .jf-hero--c {
	justify-content: center;
	padding-bottom: calc(var(--jf-radius-section) + 32px);
}
.jf-home .jf-accroche__livre {
	display: none;
}
.js .jf-home .jf-hero--c + .jf-section.jf-accroche {
	--jf-livre-c: clamp(240px, min(70vw, 54svh), 480px);
	height: 280svh; /* 1 écran de scène + 1,8 écran pour la traversée du livre */
	padding-block: 0;
}
.js .jf-home .jf-accroche__scene {
	position: sticky;
	top: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100svh;
	padding-top: var(--jf-header-offset);
	overflow: hidden;
}
.js .jf-home .jf-accroche__livre {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 3;
	display: block;
	width: var(--jf-livre-c);
	transform: translate(-50%, 110svh); /* hors écran avant la reprise par GSAP */
	will-change: transform;
}
.js .jf-home .jf-accroche__livre img {
	filter: drop-shadow(0 30px 40px rgba(18, 6, 27, 0.4));
}

/* ---------- 2. Accroche ---------- */
.jf-home .jf-accroche {
	/* Le livre remonte au scroll : il suffit de réserver une petite partie de sa hauteur */
	padding-top: calc(var(--jf-livre-h) * 0.26 + clamp(40px, 5vw, 64px));
	padding-bottom: clamp(48px, 6vw, 80px);
	text-align: center;
}
.jf-home .jf-accroche__surtitre {
	font-size: 1rem;
}
.jf-home .jf-accroche__titre {
	margin-top: 0.4em;
	font-family: var(--jf-font-display);
	font-weight: 400;
	font-size: clamp(2.3rem, 1rem + 5.5vw, 5.4rem);
	line-height: 1.12;
	text-transform: uppercase; /* toujours en majuscules, quelle que soit la casse des autres titres */
	color: var(--jf-mauve);
	text-wrap: balance;
}

/* ---------- Mise en page texte / média ---------- */
.jf-home .jf-split {
	display: grid;
	gap: clamp(40px, 6vw, 96px);
	align-items: center;
}
.jf-home .jf-split__media {
	/* mobile : le texte d'abord, l'image ensuite */
	order: 1;
	justify-self: center;
	width: min(85%, 440px);
}
@media (min-width: 900px) {
	.jf-home .jf-split {
		grid-template-columns: 1.05fr 0.95fr;
	}
	.jf-home .jf-split__media {
		order: 0;
		width: min(100%, 440px);
	}
	.jf-home .jf-split--media-first {
		grid-template-columns: 0.85fr 1.15fr;
	}
	.jf-home .jf-split--media-first .jf-split__media {
		order: -1;
	}
}

/*
 * Halos violets ronds et très diffus dans les sections foncées : faible intensité, décroissance lente.
 * Rayons en px : ils s'effacent avant le bord de la section (pas de coupure visible entre deux sections).
 */
.jf-home .jf-roman {
	background-image:
		radial-gradient(circle min(460px, 50vw) at 0% 45%, rgba(126, 72, 196, 0.13), rgba(126, 72, 196, 0.09) 25%, rgba(126, 72, 196, 0.05) 50%, rgba(126, 72, 196, 0.02) 75%, transparent),
		radial-gradient(circle min(420px, 46vw) at 100% 62%, rgba(150, 96, 220, 0.11), rgba(150, 96, 220, 0.075) 25%, rgba(150, 96, 220, 0.04) 50%, rgba(150, 96, 220, 0.015) 75%, transparent);
}
.jf-home .jf-bandeau {
	background-image:
		radial-gradient(circle 140px at 8% 50%, rgba(126, 72, 196, 0.1), rgba(126, 72, 196, 0.05) 40%, rgba(126, 72, 196, 0.015) 75%, transparent),
		radial-gradient(circle 140px at 92% 50%, rgba(150, 96, 220, 0.09), rgba(150, 96, 220, 0.045) 40%, rgba(150, 96, 220, 0.012) 75%, transparent);
}
.jf-home .jf-personnages,
.jf-home .jf-personnages.is-pinned .jf-personnages__scene {
	background-image:
		radial-gradient(circle min(380px, 42vw) at 0% 50%, rgba(126, 72, 196, 0.13), rgba(126, 72, 196, 0.085) 25%, rgba(126, 72, 196, 0.045) 50%, rgba(126, 72, 196, 0.015) 75%, transparent),
		radial-gradient(circle min(360px, 40vw) at 100% 42%, rgba(150, 96, 220, 0.12), rgba(150, 96, 220, 0.08) 25%, rgba(150, 96, 220, 0.04) 50%, rgba(150, 96, 220, 0.015) 75%, transparent),
		radial-gradient(circle min(400px, 46vw) at 50% 55%, rgba(160, 110, 235, 0.1), rgba(160, 110, 235, 0.065) 25%, rgba(160, 110, 235, 0.035) 50%, rgba(160, 110, 235, 0.012) 75%, transparent);
}
/* En mode épinglé, les halos suivent la scène (collée à l'écran), pas la section très haute */
.jf-home .jf-personnages.is-pinned {
	background-image: none;
}

/* ---------- 3. L'autrice ---------- */
.jf-home .jf-autrice {
	padding-top: 0;
	/* Plus d'air sous l'ornement (la section suivante remonte de la hauteur de l'arrondi) */
	padding-bottom: calc(var(--jf-radius-section) + clamp(72px, 9vw, 128px));
}

/* ---------- 4. Le roman ---------- */
.jf-home .jf-roman__media {
	width: min(100%, 580px);
}
@media (min-width: 900px) {
	.jf-home .jf-roman__media {
		width: min(100%, 580px);
	}
}
.jf-home .jf-roman__media {
	position: relative;
	isolation: isolate;
}
.jf-home .jf-roman__media img {
	width: 100%;
	filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.5));
	transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Petite lueur derrière le livre, accentuée au survol */
.jf-home .jf-roman__media::before {
	content: "";
	position: absolute;
	inset: 8% 4%;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(200, 150, 255, 0.75), rgba(150, 100, 230, 0.35) 55%, transparent);
	filter: blur(34px);
	opacity: 0.85;
	transition: opacity 0.7s, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (hover: hover) {
	.jf-home .jf-roman__media:hover::before {
		opacity: 1;
		transform: scale(1.18);
	}
	.jf-home .jf-roman__media:hover img {
		transform: translateY(-6px);
	}
}
.jf-home .jf-roman__accroche {
	margin-bottom: 0.8em;
	font-family: var(--jf-font-titles);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.2;
}
.jf-home .jf-roman__resume {
	font-style: italic;
	margin-bottom: 1em;
}

/* Fenêtre de commande */
.jf-home .jf-dialog {
	width: min(100% - 32px, 480px);
	max-width: none;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--jf-prune);
	overflow: visible;
}
.jf-home .jf-dialog::backdrop {
	background: rgba(18, 6, 27, 0.75);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
.jf-home .jf-dialog__panneau {
	position: relative;
	padding: clamp(40px, 6vw, 56px) clamp(24px, 5vw, 44px) clamp(28px, 5vw, 40px);
	border-radius: 32px;
	background: var(--jf-lilas);
	text-align: center;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.jf-home .jf-dialog[open] .jf-dialog__panneau {
	animation: jf-pop 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes jf-pop {
	from {
		opacity: 0;
		transform: translateY(16px) scale(0.97);
	}
}
.jf-home .jf-dialog__titre {
	margin-bottom: 1.2em;
	font-family: var(--jf-font-titles);
	font-weight: 700;
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem);
	line-height: 1.1;
	text-wrap: balance;
}
.jf-home .jf-dialog__boutiques {
	display: grid;
	gap: 12px;
}
.jf-home .jf-dialog__fermer {
	position: absolute;
	top: 14px;
	right: 14px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--jf-prune);
	cursor: pointer;
}
.jf-home .jf-dialog__fermer:hover {
	background: rgba(84, 51, 111, 0.12);
}

/* ---------- 5. Bandeau ---------- */
.jf-home .jf-bandeau {
	--jf-bandeau-texte: #3a2550;
	--jf-bandeau-fond: var(--jf-nuit);
	padding-block: clamp(24px, 4vw, 48px);
	background-color: var(--jf-bandeau-fond);
	overflow: hidden;
}
.jf-home .jf-bandeau__piste {
	display: flex;
	align-items: center;
	gap: 0.35em;
	width: max-content;
	font-family: var(--jf-font-display);
	font-size: clamp(4.5rem, 2rem + 11vw, 12rem);
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--jf-bandeau-texte);
	transform: translateX(-50%);
}
/* Survol du bandeau : traînée de cartes de personnages qui suit la souris */
.jf-home .jf-bandeau__trace {
	position: absolute; /* posée sur la page (pas dans le bandeau) : jamais rognée */
	top: 0;
	left: 0;
	z-index: 50;
	width: clamp(70px, 7vw, 100px);
	aspect-ratio: 4 / 5;
	border-radius: 10px;
	object-fit: cover;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
	pointer-events: none;
	will-change: transform, opacity;
}

.jf-home .jf-bandeau__sep {
	font-size: 0.4em;
}

/* ---------- 6. Personnages ---------- */
.jf-home .jf-personnages {
	padding-bottom: clamp(64px, 8vw, 100px);
}
@media (max-width: 899px) {
	.jf-home .jf-roman {
		padding-bottom: 32px;
	}
	.jf-home .jf-bandeau {
		padding-block: 8px;
	}
	.jf-home .jf-personnages {
		padding-top: 40px;
	}
}
.jf-home .jf-personnages__aide {
	margin: -0.5em 0 1em;
	font-size: 0.9rem;
	opacity: 0.7;
}
/* Mobile / tablette : carrousel à swipe natif */
.jf-home .jf-personnages__fenetre {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--jf-gutter);
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	/* Marge interne pour que la rotation 3D ne soit pas rognée en haut et en bas */
	margin-block: -48px;
}
.jf-home .jf-personnages__fenetre::-webkit-scrollbar {
	display: none;
}
.jf-home .jf-personnages__piste {
	display: flex;
	gap: clamp(20px, 3vw, 48px);
	width: max-content;
	padding: 56px var(--jf-gutter);
}
.jf-home .jf-carte {
	position: relative;
	flex: none;
	width: min(78vw, 360px);
	aspect-ratio: 4 / 5;
	scroll-snap-align: start;
	perspective: 2200px;
}
/* Desktop (classe posée par le JS) : la section est allongée et sa scène reste collée en haut de l'écran */
.jf-home .jf-personnages.is-pinned {
	padding: 0;
}
.jf-home .jf-personnages.is-pinned .jf-personnages__scene {
	position: sticky;
	top: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100vh;
	padding-top: calc(var(--jf-header-offset) + 8px);
	padding-bottom: 24px;
}
.jf-home .jf-personnages.is-pinned .jf-personnages__fenetre {
	overflow: hidden;
	scroll-snap-type: none;
}
@media (min-width: 1024px) {
	.jf-home .jf-carte {
		/* Aussi grandes que possible, sans dépasser la hauteur de l'écran */
		width: clamp(280px, min(34vw, (100vh - var(--jf-header-offset) - 170px) * 0.8), 460px);
	}
	.jf-home .jf-personnages__aide {
		display: none;
	}
}

.jf-home .jf-carte__inner {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform 0.8s cubic-bezier(0.3, 0.7, 0.2, 1);
}
.jf-home .jf-carte.is-flipped .jf-carte__inner {
	transform: rotateY(180deg);
}
@media (hover: hover) {
	.jf-home .jf-carte:hover .jf-carte__inner {
		transform: rotateY(180deg);
	}
}
.jf-home .jf-carte__face {
	position: absolute;
	inset: 0;
	border-radius: var(--jf-radius-carte);
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.jf-home .jf-carte__recto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.jf-home .jf-carte__verso {
	transform: rotateY(180deg);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: safe center;
	gap: 0.5em;
	padding: clamp(18px, 2.2vw, 36px);
	background: var(--jf-lilas) center / cover no-repeat;
	color: var(--jf-prune);
	text-align: center;
	overflow-y: auto;
}
.jf-home .jf-carte__vignette {
	flex: none;
	width: clamp(52px, 5vw, 72px);
	height: clamp(52px, 5vw, 72px);
	border-radius: 50%; /* l'image a déjà son cercle prune : pas de bordure en plus (sinon liseré) */
	object-fit: cover;
}
.jf-home .jf-carte__nom {
	font-family: var(--jf-font-titles);
	font-weight: 700;
	font-size: clamp(1.45rem, 1rem + 1vw, 1.9rem);
	line-height: 1.05;
	text-transform: var(--jf-titre-casse);
}
.jf-home .jf-carte__role {
	font-family: var(--jf-font-titles);
	font-weight: 700;
	font-style: italic;
	font-size: 1.05rem;
}
.jf-home .jf-carte__citation {
	font-style: italic;
	font-size: clamp(0.85rem, 0.72rem + 0.3vw, 1rem);
	line-height: 1.35;
	opacity: 0.85;
}
.jf-home .jf-carte__texte {
	margin-top: 0.3em;
	font-size: clamp(0.8rem, 0.68rem + 0.25vw, 0.92rem);
	line-height: 1.5;
}
.jf-home .jf-carte__bouton {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: var(--jf-radius-carte);
	background: transparent;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* ---------- 7. Comment j'écris ---------- */
.jf-home .jf-ecriture {
	z-index: 2; /* recouvre la section des personnages, restée fixe */
	padding-bottom: clamp(24px, 3vw, 40px);
}
.jf-home .jf-ecriture__grille {
	display: grid;
	gap: clamp(40px, 6vw, 96px);
}
.jf-home .jf-ecriture__media {
	--jf-video-w: min(68vw, 300px);
	position: relative;
	order: 1; /* mobile : la vidéo après le texte */
}
.jf-home .jf-ecriture__sticky {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	padding-block: 20px;
}
.jf-home .jf-video {
	position: relative;
	width: var(--jf-video-w);
	aspect-ratio: 9 / 16;
	background: #d8d0c6;
	box-shadow: 0 24px 50px rgba(59, 59, 59, 0.18);
}
.jf-home .jf-video video,
.jf-home .jf-video iframe {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}
.jf-home .jf-video__embed {
	height: 100%;
}
/* Inscription géante : défile normalement, la vidéo glisse par-dessus */
.jf-home .jf-ecriture__inscription {
	position: absolute;
	top: 12%;
	left: 50%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	/* Les mots mordent légèrement sous la vidéo */
	width: calc(var(--jf-video-w) + 0.95em);
	transform: translateX(-50%);
	font-family: var(--jf-font-titles);
	font-size: clamp(4.5rem, 2rem + 8vw, 9.5rem);
	line-height: 0.8;
	text-transform: uppercase;
	white-space: nowrap;
	color: #f0e1d8;
	pointer-events: none;
	user-select: none;
}
.jf-home .jf-ecriture__mot {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}
/* Décalage : « Juliette » plus bas, « Febrero » plus haut */
.jf-home .jf-ecriture__mot--g {
	margin-top: 1.1em;
}
.jf-home .jf-etape + .jf-etape {
	margin-top: 2.2em;
}
.jf-home .jf-etape__titre {
	font-family: var(--jf-font-titles);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--jf-mauve);
	margin-bottom: 0.4em;
}
@media (min-width: 900px) {
	.jf-home .jf-ecriture__grille {
		grid-template-columns: 0.9fr 1.1fr;
	}
	.jf-home .jf-ecriture__media {
		order: 0;
	}
	.jf-home .jf-ecriture__media {
		--jf-video-w: min(100%, 340px, (100vh - var(--jf-header-offset) - 120px) * 0.5625);
	}
	.jf-home .jf-ecriture__sticky {
		position: sticky;
		top: calc(var(--jf-header-offset) + 32px);
		padding-block: 0;
	}
	.jf-home .jf-ecriture__inscription {
		/* Démarre plus bas que la vidéo */
		top: calc(var(--jf-video-w) * 0.75);
	}
}

/* ---------- 8. Réseaux ---------- */
.jf-home .jf-reseaux {
	padding-top: clamp(24px, 3vw, 40px);
}
.jf-home .jf-reseaux__carte {
	display: grid;
	overflow: hidden;
	border-radius: clamp(28px, 4vw, 48px);
	background: var(--jf-lilas);
	color: var(--jf-prune);
}
.jf-home .jf-reseaux__texte {
	position: relative;
	z-index: 1;
	padding: clamp(32px, 5vw, 72px);
}
.jf-home .jf-reseaux__texte .jf-titre {
	color: var(--jf-prune);
}
.jf-home .jf-reseaux__liens {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 1.8em;
}
/* Image en partie hors champ : plus grande que la carte, rognée par ses bords */
.jf-home .jf-reseaux__image {
	position: relative;
	min-height: 340px;
}
.jf-home .jf-reseaux__image {
	min-height: 400px;
}
.jf-home .jf-reseaux__image img {
	position: absolute;
	top: 0;
	left: 50%;
	width: 135%; /* déborde sur les côtés et en bas (hors champ) */
	max-width: none;
	transform: translateX(-50%); /* centrée ; le bas sort de la carte (hors champ) */
}
@media (min-width: 900px) {
	.jf-home .jf-reseaux__carte {
		grid-template-columns: 1.1fr 0.9fr;
	}
	.jf-home .jf-reseaux__image {
		min-height: 100%;
	}
	.jf-home .jf-reseaux__image img {
		top: 50%;
		left: 2%;
		width: 118%;
		transform: translateY(-46%);
	}
}

/* ---------- Pied de page ---------- */
.jf-home .jf-footer {
	position: relative;
	padding: clamp(72px, 9vw, 112px) var(--jf-gutter) calc(48px + env(safe-area-inset-bottom, 0px));
	background: var(--jf-nuit);
	color: var(--jf-texte-clair);
	text-align: center;
	overflow: hidden;
}
.jf-home .jf-footer__fond {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
/* Le bas du pied de page fond vers la couleur unie : sur iPhone, la barre translucide de Safari
   reprend la teinte du bas de page (sinon bleu-violet à cause de l'image étoilée). */
.jf-home .jf-footer__fond::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: min(320px, 45%);
	background: linear-gradient(to bottom, rgba(18, 6, 27, 0), #12061b 70%);
}
.jf-home .jf-footer__fond img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.jf-home .jf-footer__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.jf-home .jf-footer__boule {
	width: clamp(180px, 40vw, 240px);
}
.jf-home .jf-footer .jf-ornement {
	margin-top: 24px;
}
.jf-home .jf-footer__colonnes {
	display: grid;
	gap: 32px;
	margin-top: 48px;
}
.jf-home .jf-footer__colonne {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}
.jf-home .jf-footer__colonne a {
	text-decoration: none;
}
.jf-home .jf-footer__colonne a:hover,
.jf-home .jf-footer__colonne a:focus-visible {
	color: var(--jf-lilas);
}
.jf-home .jf-footer__titre {
	margin-bottom: 0.4em;
	font-family: var(--jf-font-titles);
	font-weight: 700;
	font-size: 1.6rem;
	line-height: 1.1;
	text-transform: var(--jf-titre-casse);
	color: var(--jf-dore);
}
.jf-home .jf-footer__reseaux {
	display: flex;
	gap: 14px;
	margin-top: 10px;
}
.jf-home .jf-footer__reseaux a {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
}
.jf-home .jf-footer__legal {
	margin-top: 56px;
	font-size: 0.85rem;
	opacity: 0.85;
}
.jf-home .jf-footer__credit {
	margin-top: 8px;
	font-size: 0.85rem;
	opacity: 0.85;
}
@media (min-width: 700px) {
	.jf-home .jf-footer__colonnes {
		grid-template-columns: 1fr 1fr;
		gap: 0;
	}
	.jf-home .jf-footer__colonne {
		padding-inline: 32px;
	}
	.jf-home .jf-footer__colonne--contact {
		align-items: flex-end;
		text-align: right;
		border-right: 1px solid var(--jf-dore);
	}
	.jf-home .jf-footer__colonne:not(.jf-footer__colonne--contact) {
		align-items: flex-start;
		text-align: left;
	}
}

/* ---------- Retour en haut ---------- */
.jf-home .jf-haut {
	position: fixed;
	right: clamp(20px, 3vw, 32px);
	bottom: clamp(20px, 3vw, 32px);
	z-index: 90;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--jf-lilas);
	color: var(--jf-prune);
	/* Ombre courte : elle ne doit pas être coupée par le bord de l'écran */
	box-shadow: 0 4px 14px rgba(18, 6, 27, 0.3);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity 0.3s, transform 0.3s, visibility 0s 0.3s, background-color 0.3s;
}
.jf-home .jf-haut.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.3s, transform 0.3s, background-color 0.3s;
}
.jf-home .jf-haut:hover,
.jf-home .jf-haut:focus-visible {
	background: #fff;
}
.jf-home .jf-haut svg {
	transition: transform 0.3s;
}
.jf-home .jf-haut:hover svg {
	transform: translateY(-3px);
}

/* ---------- Moins d'animations ---------- */
@media (prefers-reduced-motion: reduce) {
	.js .jf-home .jf-reveal {
		animation: none;
	}
	.jf-home .jf-roll__lettres > span {
		transition: none;
	}
	.jf-home .jf-btn:hover .jf-roll__lettres > span,
	.jf-home .jf-btn:focus-visible .jf-roll__lettres > span {
		transform: none;
	}
	.jf-home .jf-carte__inner {
		transition: none;
	}
	.jf-home .jf-carte__face {
		transition: opacity 0.3s;
	}
	.jf-home .jf-carte.is-flipped .jf-carte__inner,
	.jf-home .jf-carte:hover .jf-carte__inner {
		transform: none;
	}
	.jf-home .jf-carte__verso {
		transform: none;
		opacity: 0;
	}
	.jf-home .jf-carte.is-flipped .jf-carte__verso,
	.jf-home .jf-carte:hover .jf-carte__verso {
		opacity: 1;
	}
	.jf-home .jf-carte.is-flipped .jf-carte__recto,
	.jf-home .jf-carte:hover .jf-carte__recto {
		opacity: 0;
	}
	.jf-home .jf-dialog[open] .jf-dialog__panneau {
		animation: none;
	}
	.jf-home .jf-ornement.is-vent {
		filter: none;
		animation: none;
	}
	.jf-home .jf-hero__livre-survol,
	.jf-home .jf-haut,
	.jf-home .jf-haut svg {
		transition: none;
	}
	.jf-home .jf-hero__fond img {
		transform: none;
	}
	.jf-home .jf-hero__titre img {
		filter: none;
	}
	/* Version C sans animation : la section reste normale, le livre s'affiche sous le texte */
	.js .jf-home .jf-hero--c + .jf-section.jf-accroche {
		height: auto;
		padding-block: 48px;
	}
	.js .jf-home .jf-accroche__scene {
		position: static;
		height: auto;
		padding-top: 0;
		overflow: visible;
	}
	.js .jf-home .jf-accroche__livre {
		position: static;
		margin: 0 auto 32px;
		transform: none;
	}
	.jf-home .jf-boule::after {
		animation: none !important;
	}
	/* Sans remontée du livre, il faut lui laisser sa place */
	.jf-home .jf-accroche {
		padding-top: calc(var(--jf-livre-h) * 0.45 + 48px);
	}
}

/* Définitions SVG (filtre « coup de vent ») : invisibles */
.jf-home .jf-defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}