@charset "UTF-8";
/**
 * Accueil — styles fidèles à Accueil v5 copy.dc.html.
 */

/* ------------------------------------------------------------- Hero */

.ffh-hero { position: relative; overflow: hidden; background: #3B2F27; }
.ffh-hero__media { position: absolute; inset: 0; pointer-events: none; }
@keyframes ffh-kenburns {
	0% { transform: scale(1.04) translateX(0); }
	100% { transform: scale(1.12) translateX(-1.5%); }
}
.ffh-hero__slide {
	position: absolute; inset: 0;
	background-size: cover; background-position: 50% 30%;
	opacity: 0; transition: opacity 1.6s ease;
}
.ffh-hero__slide.is-cur { opacity: 1; animation: ffh-kenburns 9s ease-out forwards; }
@media (prefers-reduced-motion: reduce) { .ffh-hero__slide.is-cur { animation: none; } }
/* Variante fixe : aucune animation, cadrage centré sur l'étal complet. */
.ffh-hero__slide--static.is-cur { animation: none; transform: none; background-position: center 62%; }

.ffh-hero__scrim {
	position: absolute; inset: 0; pointer-events: none;
	background:
		linear-gradient(85deg, rgba(43,34,38,.82) 0%, rgba(43,34,38,.55) 34%, rgba(43,34,38,.12) 64%, rgba(43,34,38,.2) 100%),
		linear-gradient(to top, rgba(43,34,38,.5), rgba(43,34,38,0) 32%);
}
.ffh-hero__inner {
	position: relative; max-width: calc(var(--measure) + 2 * var(--gut)); margin: 0 auto;
	display: flex; align-items: center; text-align: left;
	padding: clamp(56px, 9vh, 104px) var(--gut) clamp(44px, 7vh, 76px);
	min-height: min(68vh, 620px);
}
.ffh-hero__copy { flex: 0 1 720px; max-width: 720px; }
.ffh-hero__kick {
	display: flex; align-items: center; gap: 14px;
	font: 700 11.5px var(--ff-sans); letter-spacing: .3em; text-transform: uppercase; color: var(--ff-pink-soft);
}
.ffh-hero__kick span { display: inline-block; width: 36px; height: 1.5px; background: var(--ff-pink); flex: none; }
.ffh-hero__h1 {
	margin: 16px 0 0; font: 500 clamp(36px, 4.6vw, 62px)/1.05 var(--ff-serif);
	letter-spacing: -.01em; color: var(--ff-surface); text-shadow: 0 8px 34px rgba(43,34,38,.5);
}
.ffh-hero__h1 em { color: var(--ff-pink-soft); }
.ffh-hero__p { margin: 16px 0 0; max-width: 530px; font: 400 15.5px/1.7 var(--ff-sans); color: rgba(255,253,251,.92); }
.ffh-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 26px; }
.ffh-hero__note { font: 600 21px var(--ff-script); color: var(--ff-pink-soft); transform: rotate(-2deg); }

@keyframes ffh-pulse { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: .85; transform: scale(1.06); } }
.ffh-pulse {
	flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ff-pink);
	box-shadow: 0 0 0 4px rgba(224,147,190,.25); animation: ffh-pulse 2.4s ease-in-out infinite;
}
.ffh-hero__foot {
	position: relative; border-top: 1px solid rgba(255,253,251,.16);
	background: linear-gradient(180deg, rgba(43,34,38,.28), rgba(43,34,38,.5));
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.ffh-hero__foot-in {
	max-width: calc(var(--measure) + 2 * var(--gut)); margin: 0 auto;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 8px clamp(14px, 2.4vw, 26px); padding: 13px var(--gut);
}
.ffh-hero__drop, .ffh-hero__ship { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 11px; min-width: 0; }
.ffh-hero__droplbl { font: 700 9.5px var(--ff-sans); letter-spacing: .22em; text-transform: uppercase; color: rgba(255,253,251,.72); }
.ffh-hero__droptxt { font: 600 14.5px var(--ff-serif); color: var(--ff-surface); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ffh-hero__shipnote { font: 600 16px var(--ff-script); color: var(--ff-pink-soft); }

@media (max-width: 900px) { .ffh-hero__h1 { font-size: clamp(32px, 9.5vw, 44px); } }

/* ---------------------------------------------------------- Bandeau */

@keyframes ffh-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ffh-marquee { background: var(--ff-pink); overflow: hidden; }
.ffh-marquee__track { display: flex; width: max-content; animation: ffh-marquee 30s linear infinite; }
.ffh-marquee__track:hover { animation-play-state: paused; }
.ffh-marquee__set { display: flex; align-items: center; white-space: nowrap; padding: 10px 0; }
.ffh-marquee__set span { padding: 0 22px; font: 700 11px var(--ff-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ff-ink-deep); }
.ffh-marquee__set .ffh-marquee__script { font: 600 19px var(--ff-script); letter-spacing: 0; text-transform: none; }
.ffh-marquee__set i { color: #fff; font-style: normal; }

/* --------------------------------------------------- Nos catégories */

/* ---------------------------------------------- Planche de l'atelier */

.ffh-planche__grid { margin-top: 20px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: rgba(224,147,190,.4); }
@media (max-width: 960px) { .ffh-planche__grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 640px) { .ffh-planche__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.ffh-tile { background: var(--ff-surface); }
.ffh-tile__media { position: relative; display: block; width: 100%; aspect-ratio: 1/1.06; overflow: hidden; }
.ffh-tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ff-ease); }
.ffh-tile:hover .ffh-tile__media img { transform: scale(1.06); }
.ffh-tile__tag {
	position: absolute; top: 9px; left: 9px; padding: 5px 10px; border-radius: var(--ff-r-pill);
	background: var(--ff-white-90); color: var(--ff-plum);
	font: 800 8.5px var(--ff-sans); letter-spacing: .16em; text-transform: uppercase;
}
.ffh-tile__see {
	position: absolute; right: 9px; bottom: 9px; display: flex; align-items: center; gap: 5px;
	padding: 6px 11px; border-radius: var(--ff-r-pill); background: rgba(43,34,38,.82); color: #fff;
	font: 700 9px var(--ff-sans); letter-spacing: .2em; text-transform: uppercase;
	opacity: 0; transform: translateY(4px); transition: all .3s var(--ff-ease);
}
.ffh-tile:hover .ffh-tile__see { opacity: 1; transform: none; }
.ffh-tile__foot { display: flex; align-items: center; gap: 8px; padding: 8px 10px 10px; background: var(--ff-surface); }
.ffh-tile__foot > a:first-child { flex: 1; min-width: 0; display: block; }
.ffh-tile__foot .ffh-tile__add { flex: none; width: 28px; height: 28px; }
.ffh-tile__name { display: block; font: 500 13px/1.2 var(--ff-serif); color: var(--ff-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ffh-tile__price { display: block; margin-top: 2px; font: 800 11px var(--ff-sans); color: var(--ff-plum); font-variant-numeric: tabular-nums; }
.ffh-tile__price .ff-card__from { font-weight: 600; color: var(--ff-ink-55); }
.ffh-tile__add {
	flex: none; display: flex; align-items: center; justify-content: center;
	width: 28px; height: 28px; border-radius: 50%;
	background: var(--ff-veil); color: var(--ff-plum); transition: all .25s;
}
.ffh-tile__add:hover { background: var(--ff-pink); color: var(--ff-ink-deep); }
/* La pastille reste à 28 px, mais la zone atteignable au doigt monte à
   44 px : le halo est étendu par un pseudo-élément transparent. */
.ffh-tile__add { position: relative; }
.ffh-tile__add::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
}
.ffh-center { display: flex; justify-content: center; margin-top: 22px; }

/* ------------------------------------------------- Livre catalogue */

.ffh-book__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 44px clamp(40px, 5vw, 76px); }
.ffh-book__copy { flex: 1 1 320px; max-width: 412px; }
.ffh-book__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ffh-book__tags span {
	font: 600 11.5px var(--ff-sans); color: var(--ff-plum);
	background: var(--ff-veil); border: 1px solid var(--ff-line); border-radius: var(--ff-r-pill); padding: 7px 13px;
}
.ffh-book__side {
	position: relative; flex: 1 1 470px; min-width: min(100%, 300px); max-width: 912px;
	margin-left: auto; margin-right: 0; padding-right: 52px;
	display: flex; flex-direction: column; align-items: flex-end;
}
.ffh-book__col { position: relative; width: min(50%, 430px); min-width: 186px; }
/* ------------------------------------------------ Meilleures ventes */

.ffh-link {
	font: 700 11.5px var(--ff-sans); letter-spacing: .14em; text-transform: uppercase;
	color: var(--ff-plum); border-bottom: 1.5px solid rgba(224,147,190,.5); padding-bottom: 3px; white-space: nowrap;
}
.ffh-best__grid { margin-top: 26px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(12px, 1.6vw, 22px); }
.ffh-best {
	position: relative; display: block; aspect-ratio: 3/3.9; border-radius: 20px; overflow: hidden;
	background: var(--ff-bg-soft); box-shadow: var(--ff-shadow);
	transition: transform .5s var(--ff-ease), box-shadow .5s;
}
.ffh-best:hover { transform: translateY(-8px); box-shadow: 0 26px 50px rgba(58,33,53,.3); }
.ffh-best__photo { position: absolute; inset: 0; background-size: cover; background-position: 60% 55%; }
.ffh-best__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(43,34,38,.72), rgba(43,34,38,.06) 52%, rgba(43,34,38,0)); }
.ffh-best__rank {
	position: absolute; top: 11px; left: 11px; display: flex; align-items: center; justify-content: center;
	min-width: 26px; height: 26px; padding: 0 8px; border-radius: var(--ff-r-pill);
	background: rgba(255,253,251,.92); color: var(--ff-plum); font: 800 11px var(--ff-sans);
}
.ffh-best__foot {
	position: absolute; left: 12px; right: 12px; bottom: 12px;
	display: flex; align-items: flex-end; justify-content: space-between; gap: 8px;
}
.ffh-best__names b { display: block; font: 600 20px/1.25 var(--ff-serif); color: var(--ff-surface); font-weight: 600; }
.ffh-best__foot i {
	flex: none; font: 800 12.5px var(--ff-sans); color: var(--ff-ink); font-style: normal;
	background: rgba(255,253,251,.94); border-radius: var(--ff-r-pill); padding: 7px 12px; white-space: nowrap;
}
.ffh-best__foot i .ff-card__from { font-weight: 600; color: var(--ff-ink-55); }

/* --------------------------------------------------------- Concept */

.ffh-concept__row { display: flex; flex-wrap: wrap; align-items: center; gap: 36px 40px; }
.ffh-concept__copy { flex: 1 1 280px; max-width: 400px; }
.ffh-mobile {
	flex: 1 1 420px; min-width: 0; display: grid;
	grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px;
}
.ffh-mobile__card {
	position: relative; display: block; aspect-ratio: 3/4; border-radius: 14px; overflow: hidden;
	background: var(--ff-clay) center/cover no-repeat;
	box-shadow: var(--ff-shadow-sm); transition: transform .5s var(--ff-ease);
}
.ffh-mobile__card:nth-child(odd) { transform: translateY(12px); }
.ffh-mobile__card:hover { transform: translateY(-4px) !important; }
.ffh-mobile__card span {
	position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 9px 8px;
	background: linear-gradient(to top, rgba(43,34,38,.85), rgba(43,34,38,0));
	font: 600 12px/1.25 var(--ff-serif); color: #fff;
}
@media (max-width: 640px) { .ffh-mobile { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ------------------------------------------------------------ Avis */

.ffh-stars { display: flex; align-items: center; gap: 9px; color: var(--ff-pink-mid); }
.ffh-stars span { display: flex; gap: 2px; }
.ffh-stars b { font: 700 12px var(--ff-sans); color: var(--ff-ink); }
.ffh-avis__grid { margin-top: 26px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.ffh-avis { margin: 0; position: relative; background: var(--ff-surface); border-radius: 20px; padding: 30px 26px 24px; box-shadow: var(--ff-shadow); }
.ffh-avis__quote { position: absolute; top: 14px; right: 20px; font: 600 54px/1 var(--ff-serif); color: rgba(224,147,190,.28); }
.ffh-avis blockquote { margin: 0; font: var(--ff-body); color: var(--ff-ink); }
.ffh-avis figcaption { margin-top: 18px; display: flex; align-items: center; gap: 11px; }
.ffh-avis__ini {
	width: 34px; height: 34px; border-radius: var(--ff-r-pill);
	background: linear-gradient(140deg, var(--ff-pink-soft), var(--ff-pink));
	display: flex; align-items: center; justify-content: center;
	font: 700 12px var(--ff-sans); color: #5F2247;
}
.ffh-avis figcaption b { display: block; font: 600 13.5px var(--ff-serif); color: var(--ff-ink); }
.ffh-avis figcaption i { display: block; margin-top: 2px; font: 700 9.5px var(--ff-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ff-plum); font-style: normal; }

/* ------------------------------------------------------------ Drop */

.ffh-drop { background: linear-gradient(160deg, #33272E, #2B2226 55%, #241C20); }
.ffh-drop::before {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(60% 70% at 82% 20%, rgba(224,147,190,.26), rgba(224,147,190,0) 70%);
}
.ffh-drop__row { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px clamp(32px, 4vw, 72px); }
.ffh-drop__copy { flex: 1 1 320px; max-width: 520px; }
.ffh-drop__kick { display: flex; align-items: center; gap: 11px; font: var(--ff-kick); letter-spacing: var(--ff-track); text-transform: uppercase; color: var(--ff-pink-soft); }
.ffh-drop__count { display: flex; align-items: baseline; gap: 10px; margin-top: 20px; }
.ffh-drop__count span { font: 600 26px var(--ff-serif); color: var(--ff-surface); font-variant-numeric: tabular-nums; }
.ffh-drop__count i { font: 600 19px var(--ff-script); color: var(--ff-pink-soft); font-style: normal; }
.ffh-drop__form { flex: 1 1 320px; max-width: 440px; }
.ffh-drop__form label { display: block; font: 700 10px var(--ff-sans); letter-spacing: .24em; text-transform: uppercase; color: rgba(255,253,251,.66); }
.ffh-drop__fields { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.ffh-drop__fields input {
	flex: 1 1 190px; min-width: 0; height: 52px; border-radius: var(--ff-r-pill);
	border: 1px solid rgba(255,253,251,.28); background: rgba(255,253,251,.08);
	padding: 0 20px; font: 500 13.5px var(--ff-sans); color: var(--ff-surface);
}
.ffh-drop__fields input::placeholder { color: rgba(255,253,251,.4); }
.ffh-drop__fields button {
	flex: none; height: 52px; border: none; border-radius: var(--ff-r-pill); padding: 0 26px;
	background: var(--ff-pink); color: var(--ff-ink-deep);
	font: 700 12px var(--ff-sans); letter-spacing: .14em; text-transform: uppercase;
	cursor: pointer; transition: background .3s;
}
.ffh-drop__fields button:hover { background: var(--ff-pink-soft); }
.ffh-drop__thanks { margin-top: 12px; font: 600 19px var(--ff-script); color: #CBD8C1; }
.ffh-drop__fine { margin-top: 10px; font: 400 11.5px/1.6 var(--ff-sans); color: rgba(255,253,251,.56); }

/* ------------------------------------------------------------- FAQ */

/* ---------------------------------------------- Étal shoppable (05) */

.ffh-etal__row { display: flex; flex-wrap: wrap; align-items: center; gap: 30px clamp(26px, 3vw, 44px); }
.ffh-etal__copy { flex: 1 1 290px; max-width: 420px; }
.ffh-etal__list { margin-top: 18px; display: flex; flex-direction: column; gap: 3px; }
.ffh-etal__list button {
	display: flex; align-items: center; gap: 12px; width: 100%;
	padding: 10px 14px; border: none; border-radius: 12px; background: none; cursor: pointer;
	color: rgba(51,39,46,.6); text-align: left; transition: all .35s var(--ff-ease);
}
.ffh-etal__list button.is-on { background: var(--ff-surface); color: var(--ff-ink); box-shadow: 0 10px 24px rgba(58,33,53,.12); }
.ffh-etal__num { flex: none; font: 600 14px var(--ff-serif); color: rgba(201,103,159,.5); }
.ffh-etal__list button.is-on .ffh-etal__num { color: var(--ff-pink-mid); }
.ffh-etal__name { flex: 1; min-width: 0; font: 600 13.5px var(--ff-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ffh-etal__price { flex: none; font: 800 12.5px var(--ff-sans); color: var(--ff-plum); }
.ffh-etal__price .ff-card__from { font-weight: 600; color: var(--ff-ink-55); }

/* La scène prenait toute la largeur restante (~848 px à 1440), ce qui
   donnait une photo de plus de 630 px de haut en 4/3. Le cadrage est aplati
   partout, et au-delà de 960 px — là où texte et photo tiennent côte à côte —
   la largeur est plafonnée. « margin-left: auto » garde alors le bord droit
   aligné sur les autres sections : la marge gagnée se place entre le texte et
   la photo, jamais à droite. En dessous, la rangée passe en colonne et la
   photo reprend toute la largeur, sans décalage. */
.ffh-etal__stage { flex: 1 1 480px; max-width: none; min-width: 0; }
@media (min-width: 960px) {
	.ffh-etal__stage { max-width: 680px; margin-left: auto; }
}
.ffh-etal__photo {
	position: relative; width: 100%; aspect-ratio: 3/2; border-radius: 20px; overflow: hidden;
	background: var(--ff-clay) center/cover no-repeat; box-shadow: var(--ff-shadow-lg);
}
@keyframes ffh-dotpulse { 0%, 100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.5); opacity: 0; } }
.ffh-etal__dot {
	position: absolute; transform: translate(-50%, -50%); z-index: 3;
	width: 30px; height: 30px; border: none; border-radius: 50%; cursor: pointer;
	background: var(--ff-white-90); color: var(--ff-plum);
	font: 800 11px var(--ff-sans); box-shadow: 0 6px 16px rgba(58,33,53,.3);
	display: flex; align-items: center; justify-content: center;
	transition: all .3s;
}
.ffh-etal__dot i {
	position: absolute; inset: -6px; border-radius: 50%;
	border: 2px solid var(--ff-pink); animation: ffh-dotpulse 2.2s ease-in-out infinite;
}
.ffh-etal__dot.is-on { background: var(--ff-pink); color: var(--ff-ink-deep); }
.ffh-etal__card {
	position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%) translateY(12px); z-index: 4;
	display: flex; align-items: center; gap: 12px;
	width: min(86%, 340px); padding: 10px 12px; border-radius: 16px;
	background: var(--ff-white-90); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	box-shadow: 0 18px 40px rgba(58,33,53,.3);
	opacity: 0; pointer-events: none; transition: all .4s var(--ff-ease);
}
.ffh-etal__card.is-on { opacity: 1; pointer-events: auto; transform: translateX(-50%); }
.ffh-etal__thumb { flex: none; width: 52px; height: 52px; border-radius: 12px; background: var(--ff-clay) center/cover no-repeat; }
.ffh-etal__body { flex: 1; min-width: 0; }
.ffh-etal__body i { display: block; font: 600 14px/1.2 var(--ff-serif); font-style: normal; color: var(--ff-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ffh-etal__body b { display: block; margin-top: 2px; font: 800 12.5px var(--ff-sans); color: var(--ff-plum); }
.ffh-etal__go {
	flex: none; width: 30px; height: 30px; border-radius: 50%;
	background: var(--ff-pink); color: var(--ff-ink-deep);
	display: flex; align-items: center; justify-content: center;
}

/* ------------------------------------------ Composez vos créoles (06) */

.ffh-cf__row { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: stretch; gap: 24px clamp(26px, 3.2vw, 54px); }
.ffh-cf__stage {
	flex: 1 1 440px; min-width: min(100%, 290px); position: relative;
	display: flex; flex-direction: column; border-radius: 26px; overflow: hidden;
	background: linear-gradient(170deg, #FFFFFF, #FDF4F8 58%, #FBEFF5);
	box-shadow: var(--ff-shadow-lg); padding: 26px 22px 16px;
}
.ffh-cf__halo {
	position: absolute; left: 50%; top: 40%; width: 340px; height: 340px; transform: translate(-50%, -50%);
	border-radius: 50%; background: radial-gradient(50% 50%, rgba(224,147,190,.25), rgba(224,147,190,0) 70%);
	pointer-events: none;
}
.ffh-cf__ears { position: relative; display: flex; justify-content: center; gap: clamp(30px, 6vw, 80px); padding: 20px 0 30px; }
@keyframes ffh-sway { 0%, 100% { transform: rotate(-2.4deg); } 50% { transform: rotate(2.4deg); } }
.ffh-cf__ear {
	position: relative; display: flex; flex-direction: column; align-items: center;
	border: none; background: none; cursor: pointer; padding: 10px;
	animation: ffh-sway 5s ease-in-out infinite; transform-origin: 50% 0;
}
.ffh-cf__ear:nth-child(2) { animation-delay: -2.5s; }
.ffh-cf__hoop {
	width: 92px; height: 92px; border-radius: 50%;
	border: 7px solid #D9B36A;
	background: transparent;
	box-shadow: inset 0 0 0 1.5px rgba(232,193,130,.55), 0 10px 22px rgba(169,128,62,.3);
	position: relative;
}
.ffh-cf__hoop::after {
	content: ''; position: absolute; inset: 0; border-radius: 50%;
	background: linear-gradient(140deg, rgba(255,246,232,.5), rgba(255,246,232,0) 46%);
	mix-blend-mode: screen;
}
.ffh-cf__pamp {
	width: 58px; height: 72px; margin-top: -18px; border-radius: 50% 50% 46% 46%;
	background: var(--ff-clay) center/cover no-repeat;
	border: 1.5px solid rgba(232,193,130,.7);
	box-shadow: 0 12px 22px rgba(58,33,53,.22);
	transition: background-image .3s;
}
.ffh-cf__tag {
	position: absolute; top: 4px; right: 4px;
	width: 24px; height: 24px; border-radius: 50%;
	background: rgba(224,147,190,.16); color: var(--ff-plum);
	font: 800 11px/24px var(--ff-sans); text-align: center;
	transition: all .25s;
}
.ffh-cf__ear.is-on .ffh-cf__tag { background: var(--ff-pink); color: var(--ff-ink-deep); box-shadow: 0 0 0 4px rgba(224,147,190,.25); }
.ffh-cf__combo { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 14px; padding-top: 8px; }
.ffh-cf__combo i { display: block; font: 700 9.5px var(--ff-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ff-plum); font-style: normal; }
.ffh-cf__combo b { display: block; margin-top: 3px; font: 600 20px/1.2 var(--ff-serif); color: var(--ff-ink); }
.ffh-cf__total {
	flex: none; font: 800 13px var(--ff-sans); color: var(--ff-ink-deep);
	background: var(--ff-pink); border-radius: var(--ff-r-pill); padding: 7px 13px; white-space: nowrap;
}
.ffh-cf__panel { flex: 1 1 430px; min-width: min(100%, 290px); display: flex; flex-direction: column; justify-content: center; }
.ffh-cf__pamps {
	display: flex; flex-wrap: wrap; gap: 12px 14px; margin-top: 12px; padding-top: 12px;
	border-top: 2px solid; border-image: linear-gradient(90deg, rgba(224,147,190,0), #C9679F 12%, #C9679F 88%, rgba(224,147,190,0)) 1;
}
.ffh-cf__pick {
	position: relative; width: 56px; height: 56px; border-radius: 50%;
	border: 2px solid transparent; padding: 0; cursor: pointer; background: none;
	transition: all .25s;
}
.ffh-cf__pick span {
	display: block; width: 100%; height: 100%; border-radius: 50%;
	background: var(--ff-clay) center/cover no-repeat;
	box-shadow: 0 6px 14px rgba(58,33,53,.15);
}
.ffh-cf__pick.is-l, .ffh-cf__pick.is-r { border-color: var(--ff-pink-mid); }
.ffh-cf__pick::after {
	content: attr(data-ff-side); position: absolute; top: -6px; right: -6px;
	min-width: 20px; height: 20px; border-radius: var(--ff-r-pill);
	background: var(--ff-pink-mid); color: #fff; font: 800 10px/20px var(--ff-sans); text-align: center;
	opacity: 0; transform: scale(.6); transition: all .25s;
}
.ffh-cf__pick.is-l::after, .ffh-cf__pick.is-r::after { opacity: 1; transform: none; }
.ffh-cf__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ffh-cf__chips button {
	border: 1px solid rgba(224,147,190,.5); border-radius: var(--ff-r-pill); background: rgba(224,147,190,.08);
	padding: 9px 15px; cursor: pointer; font: 600 11.5px var(--ff-sans); color: var(--ff-pink-mid); transition: all .25s;
}
.ffh-cf__chips button:hover { background: var(--ff-pink); color: #fff; }
.ffh-cf__bill { margin-top: 16px; border-top: 1px solid rgba(224,147,190,.35); padding-top: 14px; display: flex; flex-direction: column; gap: 7px; }
.ffh-cf__bill > div { display: flex; justify-content: space-between; gap: 12px; font: 500 13px var(--ff-sans); color: var(--ff-ink-70); }
.ffh-cf__billtotal { margin-top: 4px; align-items: baseline; }
.ffh-cf__billtotal span { font: 700 11px var(--ff-sans); letter-spacing: .4em; text-transform: uppercase; color: var(--ff-plum); }
.ffh-cf__billtotal b { font: 600 23px var(--ff-serif); color: var(--ff-ink); }
.ffh-cf__panel .ff-btn { margin-top: 14px; }
.ffh-cf__hint { margin-top: 8px; font: 400 11.5px/1.6 var(--ff-sans); color: var(--ff-ink-55); }

/* ------------------------- Mobile de créations : carrousel 3D (07) */

.ffh-mobile {
	display: block; position: relative;
	height: clamp(300px, 30vw, 346px);
	perspective: 1400px; perspective-origin: 50% 42%;
	cursor: grab; touch-action: pan-y;
}
.ffh-mobile:active { cursor: grabbing; }
.ffh-mobile::before {
	content: ''; position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%) rotateX(74deg);
	width: min(84%, 430px); height: min(84%, 430px); border-radius: 50%;
	background: radial-gradient(closest-side, rgba(224,147,190,.3), rgba(224,147,190,.08) 62%, rgba(224,147,190,0));
	pointer-events: none;
}
.ffh-mobile__ring { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; }
.ffh-mobile__card {
	position: absolute; left: -70px; top: -95px;
	width: 140px; height: 190px; border-radius: 14px; overflow: hidden;
	background: var(--ff-clay) center/cover no-repeat;
	box-shadow: 0 14px 30px rgba(58,33,53,.25);
	border: 1.5px solid rgba(255,255,255,.5);
	backface-visibility: hidden;
}
.ffh-mobile__card span {
	position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 9px 8px;
	background: linear-gradient(to top, rgba(43,34,38,.85), rgba(43,34,38,0));
	font: 600 12px/1.25 var(--ff-serif); color: #fff;
}
.ffh-mobile__card:nth-child(odd), .ffh-mobile__card:hover { transform: none; }

/* ================== Livre catalogue — feuilletage fidèle au design ==================
   Les pages tournent autour de la reliure (origine gauche) ; le verso de la page
   tournée (la fiche) reste lisible à gauche, comme un vrai livre ouvert. */
@keyframes ffh-bookfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.ffh-book { position: relative; width: min(50%, 430px); min-width: 186px; animation: ffh-bookfloat 9s ease-in-out infinite; }
.ffh-book__scene { position: relative; width: 100%; aspect-ratio: 3/3.85; perspective: 1900px; }
.ffh-book__inner { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(-9deg) rotateX(2deg); }
.ffh-book__spine {
	position: absolute; left: -8px; top: 1%; bottom: 1%; width: 16px;
	border-radius: 8px 0 0 8px;
	background: linear-gradient(90deg, #B8548C, #C9679F 52%, #E093BE);
	box-shadow: -6px 10px 22px rgba(58,33,53,.18);
}
.ffh-book__base {
	position: absolute; inset: 0; border-radius: 8px 16px 16px 8px;
	background: linear-gradient(115deg, #FFFDFB, #FDF4F8);
	box-shadow: 0 22px 48px rgba(58,33,53,.14);
	transform: translateZ(-8px);
}

/* Feuille : pivote autour du bord gauche ; le JS pose transform + z-index. */
.ffh-book__leaf {
	position: absolute; inset: 0;
	transform-origin: left center; transform-style: preserve-3d;
	transition: transform .9s cubic-bezier(.32,.75,.3,1);
	will-change: transform;
}
.ffh-leaf__front, .ffh-book__cover {
	position: absolute; inset: 0; display: block;
	border-radius: 8px 14px 14px 6px; overflow: hidden;
	backface-visibility: hidden; -webkit-backface-visibility: hidden;
	background: #FFFDFB; cursor: pointer;
}

/* ---- Une page = une création entière ----------------------------------
   La photo occupait le recto et la fiche le verso : on lisait donc le texte
   d'un produit en face de la photo du suivant. Les deux faces portent
   désormais la page complète — photo en haut, fiche en dessous. */
.ffh-leaf__page {
	display: flex; flex-direction: column;
	background: #FFFDFB;
	overflow: hidden;
}
.ffh-leaf__media {
	position: relative; display: block;
	flex: 0 0 50%; min-height: 0;
	overflow: hidden;
}
.ffh-leaf__img { position: absolute; inset: 0; background: var(--ff-clay) center/cover no-repeat; }
.ffh-leaf__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(43,34,38,.42), rgba(43,34,38,0) 52%); pointer-events: none; }
.ffh-leaf__folio {
	position: absolute; left: 12px; bottom: 9px;
	font: 700 clamp(7px, .78vw, 9.5px) var(--ff-sans);
	letter-spacing: .2em; text-transform: uppercase;
	color: #F6DCE9;
	text-shadow: 0 1px 4px rgba(43, 34, 38, .5);
}
.ffh-leaf__info {
	flex: 1 1 auto; min-height: 0;
	display: flex; flex-direction: column;
	gap: clamp(3px, .8vw, 7px);
	padding: clamp(9px, 1.5vw, 16px) clamp(11px, 1.7vw, 18px) clamp(10px, 1.5vw, 15px);
	background: linear-gradient(160deg, #FFFFFF, #FDF4F8);
	/* Garde-fou : jamais de texte coupé en travers d'une ligne. */
	overflow: hidden;
}

/* La reliure projette une bande d'ombre d'une quinzaine de pixels : on
   écarte le contenu de chaque page du côté du pli pour qu'aucun élément
   (flèche, fin de ligne) ne s'y perde. */
.ffh-leaf__back .ffh-leaf__info { padding-right: clamp(24px, 3vw, 34px); }
.ffh-leaf__front .ffh-leaf__info { padding-left: clamp(20px, 2.4vw, 28px); }

/* Verso : même page, retournée. */
.ffh-leaf__back {
	position: absolute; inset: 0;
	transform: rotateY(180deg);
	backface-visibility: hidden; -webkit-backface-visibility: hidden;
	border-radius: 16px 6px 6px 14px;
	cursor: pointer;
}
.ffh-book__brow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ffh-book__brow i { font: 700 clamp(7.5px, .9vw, 10px) var(--ff-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ff-plum); font-style: normal; }
@keyframes ffh-bkblink { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.16); opacity: .85; } }
.ffh-book__go {
	flex: none; display: flex; align-items: center; justify-content: center;
	width: clamp(22px, 2.2vw, 28px); height: clamp(22px, 2.2vw, 28px); border-radius: 50%;
	background: var(--ff-pink); color: var(--ff-ink-deep);
	animation: ffh-bkblink 1.9s ease-in-out infinite;
}
.ffh-book__bname {
	font: 600 clamp(12.5px, 1.35vw, 17px)/1.2 var(--ff-serif); color: var(--ff-ink); text-wrap: balance;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ffh-book__bprice {
	font: 800 clamp(12px, 1.3vw, 17px) var(--ff-sans); color: var(--ff-plum);
	flex: none; white-space: nowrap;
}
.ffh-book__bprice del { font-weight: 600; font-size: .8em; color: var(--ff-ink-55); }
.ffh-book__bprice ins { text-decoration: none; }
.ffh-book__bline { height: 1px; background: rgba(224,147,190,.45); }
.ffh-book__bdesc {
	font: 400 clamp(9px, .95vw, 11.5px)/1.55 var(--ff-sans); color: var(--ff-ink-70);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	min-height: 0; flex: 0 1 auto;
}
.ffh-book__bcta { align-self: flex-start; margin-top: auto; flex: none; font: 700 clamp(7.5px, .8vw, 9px) var(--ff-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ff-pink-mid); font-style: normal; }

/* Couverture : recto rose, verso papier. */
.ffh-book__cover {
	background: linear-gradient(140deg, #E9AACC, #E093BE 36%, #C9679F 74%, #B8548C);
	display: flex; align-items: center; justify-content: center; text-align: center;
}
.ffh-book__cover > div { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10%; }
.ffh-book__cover b { font: 600 28px var(--ff-serif); letter-spacing: .18em; color: #FFFDFB; }
.ffh-book__cover i { font: italic 500 22px var(--ff-serif); color: #FDF4F8; margin-top: -6px; }
.ffh-book__cover em { margin-top: 12px; font: 700 11px var(--ff-sans); letter-spacing: .3em; text-transform: uppercase; color: rgba(255,253,251,.9); font-style: normal; }
.ffh-book__season { font: 600 24px var(--ff-script); color: #FFFDFB; }
.ffh-book__line { width: 56px; height: 1.5px; background: rgba(255,255,255,.7); }
.ffh-book__coverback {
	position: absolute; inset: 0; transform: rotateY(180deg);
	backface-visibility: hidden; -webkit-backface-visibility: hidden;
	border-radius: 16px 6px 6px 14px;
	background: linear-gradient(160deg, #FFFFFF, #FDF4F8);
}

/* Navigation : flèches rondes + compteur « 3 / 6 » (comme la maquette). */
.ffh-book__nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; width: min(50%, 430px); min-width: 186px; }
.ffh-book__nav > button {
	position: relative; flex: none; z-index: 5;
	width: 44px; height: 44px; border: 1px solid rgba(224,147,190,.6); border-radius: 50%;
	background: rgba(255,255,255,.95); color: var(--ff-plum); cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 8px 18px rgba(58,33,53,.18); transition: all .25s;
}
.ffh-book__nav > button:hover { background: var(--ff-pink); color: #fff; }
.ffh-book__count { min-width: 56px; text-align: center; font: 600 12px var(--ff-sans); color: var(--ff-plum); }

@media (max-width: 900px) {
	.ffh-book__side { padding-right: 0; align-items: center; }
	/* Livre ouvert responsive : une page fait ~42vw, le pli est centré à
	   l'écran — le verso (la fiche) reste donc entièrement visible à gauche
	   et la photo à droite, comme un vrai livre ouvert. */
	.ffh-book { width: min(42vw, 250px); min-width: 150px; }
	.ffh-book__scene { transform: translateX(50%); }
	.ffh-book__inner { transform: rotateY(-6deg) rotateX(1.5deg); }
	.ffh-book__nav { width: auto; margin-top: 24px; }
	.ffh-book__cap b { font-size: 14px; }
	.ffh-book__cap i { font-size: 8.5px; }
}

/* ============ Vitrine (01) — éventail 3D 2×2 fidèle au design ============
   Panneaux 4/4.9 légèrement pivotés (−9°/−3.2°/3.2°/9°) ; au survol le
   panneau se redresse et avance, les autres s'estompent ; plaque et flèche
   flottent en profondeur ; ombre portée + reflet miroir sous chaque panneau. */
.ffh-cats__grid {
	margin-top: 26px; display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr));
	gap: clamp(12px, 1.6vw, 22px);
	perspective: 1500px; perspective-origin: 50% 42%;
	padding-bottom: clamp(26px, 3vw, 44px);
}
@media (max-width: 700px) { .ffh-cats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ffh-cat__slot { position: relative; transform-style: preserve-3d; }
.ffh-cat {
	position: relative; display: block; aspect-ratio: 4/4.6;
	border-radius: 16px; overflow: hidden;
	transform-style: preserve-3d;
	transform: rotateY(var(--ang, 0deg));
	transition: transform .6s cubic-bezier(.24,.86,.3,1), box-shadow .5s ease, opacity .5s ease;
	box-shadow: 0 12px 26px rgba(58,33,53,.16), 0 0 0 1px rgba(224,147,190,.35);
	will-change: transform;
}
.ffh-cats__grid:hover .ffh-cat:not(:hover) { opacity: .86; }
.ffh-cat:hover {
	transform: rotateY(0deg) translateZ(52px) translateY(-8px);
	box-shadow: 0 34px 60px rgba(58,33,53,.3), 0 0 0 1px rgba(224,147,190,.75);
}
.ffh-cat__photo {
	position: absolute; inset: 0;
	background: var(--ff-clay) center/cover no-repeat;
	transition: transform .9s cubic-bezier(.24,.86,.3,1);
}
.ffh-cat:hover .ffh-cat__photo { transform: scale(1.07); }
.ffh-cat__scrim {
	position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(to top, rgba(43,34,38,.5), rgba(43,34,38,.06) 46%, rgba(43,34,38,0));
}
.ffh-cat__sheen {
	position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
	background: linear-gradient(104deg, rgba(255,255,255,0) calc(var(--sx, 32%) - 24%), rgba(255,255,255,.9) var(--sx, 32%), rgba(255,255,255,0) calc(var(--sx, 32%) + 24%));
	opacity: 0; transition: opacity .5s ease;
}
.ffh-cats__grid:hover .ffh-cat__sheen { opacity: 1; }
.ffh-cat__arrow {
	position: absolute; top: clamp(8px, 1vw, 12px); right: clamp(8px, 1vw, 12px); z-index: 3;
	width: 21px; height: 21px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font: 700 10px var(--ff-sans); color: var(--ff-plum);
	background: rgba(255,255,255,.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
	transform: translateZ(16px);
	box-shadow: 0 5px 12px rgba(58,33,53,.16);
	transition: all .45s cubic-bezier(.24,.86,.3,1);
	opacity: 1;
}
.ffh-cat:hover .ffh-cat__arrow { background: var(--ff-pink-mid); color: #fff; transform: translateZ(34px); box-shadow: 0 12px 22px rgba(58,33,53,.3); }
.ffh-cat__plate {
	position: absolute; left: clamp(8px, 1vw, 12px); right: clamp(8px, 1vw, 12px); bottom: clamp(8px, 1vw, 12px);
	padding: clamp(6px, .7vw, 8px) clamp(8px, .9vw, 11px);
	border-radius: 12px; background: rgba(255,255,255,.9);
	backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
	transform: translateZ(14px);
	box-shadow: 0 6px 14px rgba(58,33,53,.14);
	transition: transform .6s cubic-bezier(.24,.86,.3,1), background .4s ease, box-shadow .4s ease;
}
.ffh-cat:hover .ffh-cat__plate { background: rgba(255,255,255,.97); transform: translateZ(30px); box-shadow: 0 14px 26px rgba(58,33,53,.26); }
.ffh-cat__plate b { display: block; font: 500 clamp(15px, 1.35vw, 19px)/1.22 var(--ff-serif); color: var(--ff-ink); }
.ffh-cat__plate i { display: block; margin-top: 4px; font: 700 9.5px var(--ff-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ff-plum); font-style: normal; }
.ffh-cat__cast {
	position: absolute; left: 6%; right: 6%; bottom: -6px; height: 18px; border-radius: 50%;
	background: radial-gradient(50% 50% at 50% 50%, rgba(43,34,38,.4), rgba(43,34,38,0) 72%);
	filter: blur(7px); opacity: .5; transition: opacity .5s ease; pointer-events: none;
}
.ffh-cat__slot:hover .ffh-cat__cast { opacity: 1; }
.ffh-cat__mirror {
	position: absolute; left: 0; right: 0; top: 100%; height: 22%;
	background: center/cover no-repeat;
	transform: scaleY(-1) rotateY(var(--ang, 0deg)); transform-origin: 50% 0%;
	border-radius: 0 0 16px 16px;
	-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,0) 78%);
	mask-image: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,0) 78%);
	pointer-events: none;
}
@media (max-width: 700px) {
	.ffh-cats__grid { perspective: none; }
	.ffh-cat, .ffh-cat__mirror { transform: none; }
}

/* Best : sous-catégorie sous le nom (design). */
.ffh-best__names u { display: block; margin-top: 3px; font: 700 10px var(--ff-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ff-pink-soft); text-decoration: none; }

/* FAQ : progression + compteur (design). */
.ffh-faq__bar { margin-top: 16px; height: 5px; border-radius: var(--ff-r-pill); background: rgba(224,147,190,.2); overflow: hidden; }
.ffh-faq__bar i { display: block; height: 100%; width: 0; border-radius: var(--ff-r-pill); background: linear-gradient(90deg, #E093BE, #C9679F); transition: width .5s cubic-bezier(.22,.9,.26,1); }
.ffh-faq__count { margin-top: 10px; font: 600 18px var(--ff-script); color: var(--ff-plum); }

/* Hero : fine barre de progression « livraison offerte » (design). */
.ffh-hero__ship-track { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,253,251,.14); }
.ffh-hero__ship-track i {
	display: block; height: 100%; width: 0; border-radius: var(--ff-r-pill);
	background: linear-gradient(90deg, #E093BE, #F3CBDD);
	box-shadow: 0 0 12px rgba(224,147,190,.6);
	transition: width .7s cubic-bezier(.22,.9,.26,1);
}
.ffh-hero__ship-track i.is-done { background: linear-gradient(90deg, #A8B79E, #CBD8C1); }

/* Étal : points de navigation sous la photo + parallaxe 3D (design). */
.ffh-etal__nav { display: flex; justify-content: center; gap: 7px; margin-top: 20px; }
.ffh-etal__nav button {
	width: 8px; height: 8px; border-radius: var(--ff-r-pill); border: none; cursor: pointer; padding: 0;
	background: rgba(224,147,190,.35); transition: all .4s;
}
.ffh-etal__nav button.is-on { width: 24px; background: var(--ff-pink); }
.ffh-etal__stage { perspective: 1400px; perspective-origin: 50% 44%; }
.ffh-etal__photo { transition: transform .35s ease; transform-style: preserve-3d; will-change: transform; }

/* Mobile 3D : points de navigation (design). */
.ffh-mobile__dots { display: flex; gap: 7px; margin-top: 22px; }
.ffh-mobile__dots button {
	width: 8px; height: 8px; border-radius: var(--ff-r-pill); border: none; cursor: pointer; padding: 0;
	background: rgba(224,147,190,.35); transition: all .4s;
}
.ffh-mobile__dots button.is-on { width: 24px; background: var(--ff-pink); }

/* Ce fondu masquait autrefois le texte des pages tournées, quand le verso
   ne contenait que la fiche. Depuis qu'une page porte photo ET fiche, il
   visait « .ffh-leaf__back > * », c'est-à-dire la page entière : chaque
   feuille se vidait en fondu pendant le feuilletage, prix et description
   compris. Il n'a plus lieu d'être — la page est découpée par
   « overflow: hidden », rien ne peut déborder. */

@media (max-width: 900px) {
	/* Le bord droit du verso passe sous le pli : on écarte la fiche, pas la
	   face entière — sinon la photo serait rognée elle aussi. */
	.ffh-leaf__back .ffh-leaf__info { padding-right: 17%; }
	.ffh-leaf__front .ffh-leaf__info { padding-left: 14%; }
	/* Page plus courte : on laisse davantage de place à la fiche et on
	   réduit le texte à une ligne pour que rien ne soit coupé. */
	.ffh-leaf__media { flex-basis: 46%; }
	.ffh-book__bname { font-size: 13px; -webkit-line-clamp: 1; }
	.ffh-book__bdesc { -webkit-line-clamp: 1; }
}

/* ---- Cadrage mobile de l'étal ----------------------------------------
   La photo fait 918 × 606 (paysage) ; dans un cadre de 390 × 574, « cover »
   la met à l'échelle sur la hauteur et n'en laisse voir que 45 % de la
   largeur : les bijoux disparaissent hors champ. On raccourcit le hero sur
   téléphone — le cadre devient moins vertical, l'image recule et l'étal se
   lit en entier. Le texte garde sa place, les marges ne bougent pas. */
@media (max-width: 700px) {
	/* La hauteur du hero est imposée par son texte (~610 px), pas par
	   « min-height » : agir dessus ne changeait rien au cadrage. Avec
	   « cover », l'image était donc agrandie à plus de 1000 px de large pour
	   390 visibles — 37 % de la photo. On la fait entrer en entier et on
	   l'ancre en haut ; le fond sombre du hero occupe le reste, et le texte
	   se lit dessus. L'étal est visible d'un bord à l'autre. */
	.ffh-hero__slide--static.is-cur {
		background-size: contain;
		background-position: center top;
		background-repeat: no-repeat;
	}
	/* Le voile s'assombrit vers le bas pour porter le texte sous la photo. */
	/* Sous la photo, il n'y a plus de bande de couleur plate — c'était elle
	   qui tirait sur le mauve. La même photo, agrandie et floutée, prolonge
	   le décor jusqu'en bas : on ne voit donc que l'image. */
	.ffh-hero__media::before {
		content: "";
		position: absolute;
		inset: 0;
		background-image: var(--ff-hero-img);
		background-size: cover;
		background-position: center 62%;
		filter: blur(26px) brightness(.42) saturate(.85);
		transform: scale(1.14);
	}
	/* Voile neutre (presque noir, sans teinte) : il n'assombrit que la zone
	   du texte, la photo nette reste intacte. */
	.ffh-hero__scrim {
		background:
			linear-gradient(to bottom,
				rgba(18,15,16,0) 0%,
				rgba(18,15,16,0) calc(66vw - 46px),
				rgba(18,15,16,.55) calc(66vw + 14px),
				rgba(18,15,16,.78) 100%);
	}
	/* La photo fait 918 × 606 : à pleine largeur elle occupe 100/1.515 = 66vw
	   de haut. Le texte démarre juste en dessous, pour ne rien recouvrir. */
	.ffh-hero__inner {
		padding-top: calc(66vw + 22px);
		padding-bottom: clamp(30px, 5vh, 52px);
		min-height: 0;
	}
}