@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); } }

/* ------------------------------------------------- Hero : l'automne */

/*
 * Plein cadre : la scène d'automne — table, plateau de créations,
 * citrouille — occupe toute la bannière. Son côté droit est un flou de
 * profondeur, vide par construction : c'est là que vivent les mots du
 * site et le médaillon des nouveautés, sans jamais recouvrir une
 * création. Sur mobile, la scène passe en bandeau au-dessus d'un panneau
 * plein — la mise en page validée.
 */
.ffh-automne { position: relative; min-height: clamp(520px, 64vh, 650px); background: #22110A; overflow: hidden; }

.ffh-automne__scene {
	position: absolute; inset: 0;
	background-image: url('../img/hero-automne.jpg');
	background-size: cover; background-position: left 42%;
}
/* Le voile ne sert qu'à la lecture : dense sous les mots, absent sur la
   moitié gauche où la scène se montre telle quelle. */
.ffh-automne__scene::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(270deg, rgba(30,16,8,.66) 0%, rgba(30,16,8,.5) 30%, rgba(30,16,8,.16) 52%, transparent 64%);
}

.ffh-automne__panneau {
	position: relative; z-index: 1;
	margin-left: auto; width: min(620px, 46%);
	min-height: inherit;
	display: flex; flex-direction: column; justify-content: center;
	padding: clamp(30px, 4vw, 54px) clamp(22px, 3vw, 56px) clamp(30px, 4vw, 54px) 0;
}

.ffh-hero--automne .ffh-hero__kick { color: #F2B370; }
.ffh-hero--automne .ffh-hero__kick span { background: #D9822B; }
.ffh-hero--automne .ffh-hero__h1 { color: #FFF6EC; text-shadow: 0 3px 18px rgba(20,10,4,.65); font-size: clamp(30px, 3.3vw, 46px); }
.ffh-hero--automne .ffh-hero__h1 em { color: #F2B370; }
.ffh-hero--automne .ffh-hero__p { color: rgba(255,246,235,.94); text-shadow: 0 2px 10px rgba(20,10,4,.55); }
.ffh-hero--automne .ffh-hero__note { color: #F2B370; }

.ffh-saison {
	margin-bottom: 10px;
	font: 600 clamp(19px, 2vw, 25px) var(--ff-script); color: #F2B370;
	text-shadow: 0 2px 10px rgba(20,10,4,.6);
	transform: rotate(-1.2deg); transform-origin: left center;
}
.ffh-saison i { font-style: normal; }

/* --- Le médaillon des nouveautés : photos pleines, en boucle. ---------- */
.ffh-carrousel {
	display: flex; align-items: center; gap: 16px;
	margin-top: clamp(18px, 2.4vh, 28px); padding: 10px;
	border-radius: 18px;
	background: rgba(24,12,6,.35);
	border: 1px solid rgba(255,246,235,.14);
	backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
	transition: background .3s, border-color .3s;
}
.ffh-carrousel:hover { background: rgba(24,12,6,.5); border-color: rgba(242,179,112,.45); }
.ffh-carrousel__cadre {
	position: relative; flex: none;
	width: clamp(112px, 10.5vw, 152px); aspect-ratio: 1;
	border-radius: 13px; overflow: hidden;
	box-shadow: 0 10px 26px rgba(0,0,0,.45);
}
.ffh-carrousel__photo {
	position: absolute; inset: 0;
	background-size: cover; background-position: center;
	opacity: 0; transition: opacity 1.1s ease;
}
.ffh-carrousel__photo.is-cur { opacity: 1; }
.ffh-carrousel__badge {
	position: absolute; top: 7px; left: 7px; z-index: 2;
	padding: 4px 9px; border-radius: var(--ff-r-pill);
	background: #D9822B; color: #FFF6EC;
	font: 800 8px var(--ff-sans); letter-spacing: .16em; text-transform: uppercase;
}
.ffh-carrousel__infos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ffh-carrousel__infos b {
	font: 500 clamp(16px, 1.5vw, 19px) var(--ff-serif); color: #FFF6EC;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ffh-carrousel__infos u {
	text-decoration: none;
	font: 700 10.5px var(--ff-sans); letter-spacing: .12em; text-transform: uppercase;
	color: #F2B370; border-bottom: 1px solid rgba(242,179,112,.45); align-self: flex-start; padding-bottom: 2px;
}
.ffh-carrousel__points { display: flex; gap: 6px; margin-top: 2px; }
.ffh-carrousel__points i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,246,235,.35); transition: background .3s, transform .3s; }
.ffh-carrousel__points i.is-cur { background: #F2B370; transform: scale(1.25); }

/* --- Guirlande guinguette ---------------------------------------------- */
.ffh-guirlande { position: absolute; inset: 0 0 auto 0; height: 150px; pointer-events: none; z-index: 2; }
.ffh-guirlande svg { position: absolute; inset: 0; width: 100%; height: 100%; }
@keyframes ffh-lueur {
	0%, 100% { opacity: .55; box-shadow: 0 0 6px 2px rgba(255,196,110,.45); }
	50% { opacity: 1; box-shadow: 0 0 14px 5px rgba(255,196,110,.75); }
}
.ffh-ampoule {
	position: absolute; left: var(--ax); top: var(--ay);
	width: 9px; height: 9px; border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #FFF3D6, #F5B454 65%, #D9822B);
	animation: ffh-lueur 2.6s ease-in-out infinite;
	animation-delay: var(--ad);
}
@media (prefers-reduced-motion: reduce) { .ffh-ampoule { animation: none; opacity: .9; } }

/* --- Feuilles ----------------------------------------------------------- */
.ffh-feuilles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
@keyframes ffh-chute {
	0% { transform: translateY(-8%) rotate(0deg) translateX(0); opacity: 0; }
	8% { opacity: .9; }
	50% { transform: translateY(46vh) rotate(160deg) translateX(26px); }
	92% { opacity: .85; }
	100% { transform: translateY(96vh) rotate(320deg) translateX(-14px); opacity: 0; }
}
.ffh-feuille {
	position: absolute; top: -30px; left: var(--fx);
	animation: ffh-chute var(--ft) linear infinite;
	animation-delay: var(--fd);
	opacity: 0;
	filter: drop-shadow(0 3px 4px rgba(40,20,8,.3));
}
@media (prefers-reduced-motion: reduce) { .ffh-feuille { display: none; } }

/* --- Mobile : la scène en bandeau, le panneau plein en dessous. --------- */
@media (max-width: 860px) {
	.ffh-automne { min-height: 0; }
	.ffh-automne__scene {
		position: relative; inset: auto; width: 100%;
		aspect-ratio: 850 / 520;
		background-image: url('../img/hero-automne.jpg');
		background-position: center 42%;
	}
	.ffh-automne__scene::after { background: linear-gradient(to bottom, transparent 55%, rgba(34,17,10,.85) 96%); }
	.ffh-automne__panneau {
		margin: 0; width: 100%; min-height: 0;
		padding: 24px var(--gut) 30px;
		/* Panneau mobile allégé : les bruns d'origine (#33190D/#22110A)
		   assombrissaient trop le fond du texte. Teintes plus douces, avec
		   une chaleur ambrée qui reste dans la palette d'automne — les
		   lettres crème gardent tout leur contraste. */
		background:
			radial-gradient(120% 100% at 100% 0%, rgba(217,130,43,.18), transparent 58%),
			linear-gradient(160deg, #5A3320, #402415 72%);
	}
	.ffh-carrousel__cadre { width: 100px; }
	.ffh-guirlande { height: 100px; }
	.ffh-ampoule { width: 7px; height: 7px; }
	.ffh-feuille { display: none; }
}

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

@keyframes ffh-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* ---------------------------------------------- Hero : slider photo */
/*
 * Le hero reprend la photo d'automne de la cliente en fond plein cadre
 * (paysage sur desktop, carrée sur mobile). Le texte — accroche + H1 —
 * vit sur une carte en verre dépoli alignée à gauche sur la trame du
 * site : lecture nette garantie, la photo et les créations restent
 * pleinement visibles autour, sans voile diffus qui délave l'image.
 */
.ffh-hero--slider { background: #EFE6DA; }
.ffh-slider {
	position: relative; overflow: hidden;
	min-height: clamp(460px, 62vh, 620px);
	background: #EFE6DA url('../img/hero-slider.jpg') center/cover no-repeat;
}
/* Un léger flou (verre dépoli discret) sous le texte, estompé vers la
   droite : l'écriture devient nette, la photo et les créations restent
   visibles — juste un tout petit peu adoucies derrière les mots. */
.ffh-slider__scrim {
	position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(90deg, rgba(248,242,233,.42) 0%, rgba(248,242,233,.22) 30%, rgba(248,242,233,0) 56%);
	backdrop-filter: blur(3.5px); -webkit-backdrop-filter: blur(3.5px);
	-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 32%, transparent 60%);
	        mask-image: linear-gradient(90deg, #000 0%, #000 32%, transparent 60%);
}
.ffh-slider__in {
	position: relative; z-index: 1; min-height: inherit;
	max-width: calc(var(--measure) + 2 * var(--gut)); margin: 0 auto;
	display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
	padding: clamp(56px, 9vh, 104px) var(--gut) clamp(48px, 8vh, 88px);
}
.ffh-hero--slider .ffh-saison {
	margin: 0 0 12px; color: #9E4E28;
	text-shadow: 0 1px 2px rgba(255,252,247,.95), 0 2px 12px rgba(255,252,247,.7);
	transform: rotate(-1.2deg); transform-origin: left center;
}
.ffh-hero--slider .ffh-hero__h1 {
	margin: 0; max-width: 16ch; color: var(--ff-ink);
	text-shadow: 0 1px 2px rgba(255,252,247,.96), 0 2px 18px rgba(255,252,247,.78);
	font: 500 clamp(34px, 4.6vw, 60px)/1.06 var(--ff-serif); letter-spacing: -.01em;
}
.ffh-hero--slider .ffh-hero__h1 em { color: #9E4E28; font-style: italic; white-space: nowrap; }
.ffh-hero--slider .ffh-hero__cta { margin-top: 26px; }
.ffh-hero--slider .ffh-hero__note {
	color: #6B4529; text-shadow: 0 1px 2px rgba(255,252,247,.96), 0 1px 10px rgba(255,252,247,.8);
}
@media (max-width: 760px) {
	.ffh-slider {
		min-height: clamp(500px, 78vh, 640px);
		background-image: url('../img/hero-slider-mobile.jpg'); background-position: center 30%;
	}
	.ffh-slider__scrim {
		background: linear-gradient(180deg, rgba(248,242,233,.55) 0%, rgba(248,242,233,.34) 40%, rgba(248,242,233,0) 66%);
		-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 44%, transparent 72%);
		        mask-image: linear-gradient(180deg, #000 0%, #000 44%, transparent 72%);
	}
	.ffh-slider__in { justify-content: flex-start; padding-top: clamp(34px, 7vh, 60px); }
	.ffh-hero--slider .ffh-hero__h1 { max-width: 13ch; }
}

.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;
}
/* Carrousel horizontal sur tous les écrans : vignettes réduites, on fait
   défiler pour voir le reste des pièces vedettes. */
.ffh-best__grid {
  margin-top: 26px; display: flex; gap: clamp(12px, 1.4vw, 20px);
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 12px;
}
.ffh-best__grid::-webkit-scrollbar { display: none; }
@media (max-width: 900px) {
  .ffh-best { flex-basis: 72vw !important; max-width: 280px; }
  .ffh-best__names b { font-size: 19px; -webkit-line-clamp: 3; }
}
.ffh-best {
	flex: 0 0 clamp(165px, 20vw, 210px); scroll-snap-align: start;
	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,.80), rgba(43,34,38,.10) 44%, rgba(43,34,38,0) 70%); }
.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; flex-direction: column; align-items: flex-start; gap: 8px;
}
.ffh-best__names b {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	font: 600 15px/1.22 var(--ff-serif); color: var(--ff-surface);
}
/* Prix en pastille compacte, sous le nom : placement toujours constant, jamais superposé. */
.ffh-best__foot i {
	align-self: flex-start; order: 3; font: 800 12px var(--ff-sans); color: var(--ff-ink); font-style: normal;
	background: rgba(255,253,251,.95); border-radius: var(--ff-r-pill); padding: 6px 11px; white-space: nowrap;
	box-shadow: 0 3px 10px rgba(43,34,38,.22);
}
.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;
}

/* -------------------- Les pampilles : fiche créoles + carrousel simple */
.ffh-pamp { background: #FBF6EF; overflow: clip; padding-bottom: clamp(44px, 5vw, 76px); }
.ffh-pamp__top {
	display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(34px, 5vw, 76px); align-items: center;
	padding-bottom: clamp(34px, 4vw, 56px);
}
.ffh-pamp__intro { min-width: 0; }
.ffh-pamp__intro .ff-h2 { margin-top: 12px; }
.ffh-pamp__lead { margin: 18px 0 0; max-width: 26ch; font: 500 clamp(20px, 2.1vw, 27px)/1.28 var(--ff-serif); color: var(--ff-plum); }
.ffh-pamp__p { margin: 16px 0 0; max-width: 50ch; font: 400 15.5px/1.8 var(--ff-sans); color: var(--ff-ink-70); }

/* La fiche des créoles, en principal */
.ffh-pamp__hero {
	position: relative; display: block; border-radius: var(--ff-r-lg, 22px); overflow: hidden;
	background: var(--ff-surface); box-shadow: 0 16px 40px rgba(58,33,53,.14);
	transition: transform .5s var(--ff-ease), box-shadow .5s var(--ff-ease);
}
.ffh-pamp__hero:hover { transform: translateY(-6px); box-shadow: 0 26px 54px rgba(58,33,53,.22); }
.ffh-pamp__hero:focus-visible { outline: 2px solid var(--ff-pink-deep); outline-offset: 3px; }
.ffh-pamp__badge {
	position: absolute; top: 14px; left: 14px; z-index: 2; padding: 6px 13px; border-radius: var(--ff-r-pill);
	background: rgba(255,255,255,.94); color: var(--ff-plum);
	font: 800 9.5px var(--ff-sans); letter-spacing: .14em; text-transform: uppercase; box-shadow: var(--ff-shadow-sm);
}
.ffh-pamp__heroimg { display: block; aspect-ratio: 4 / 3.4; background-size: cover; background-position: center; transition: transform .7s var(--ff-ease); }
.ffh-pamp__hero:hover .ffh-pamp__heroimg { transform: scale(1.05); }
.ffh-pamp__herobody { display: flex; flex-direction: column; gap: 6px; padding: 17px 19px 19px; }
.ffh-pamp__herobody b { font: 500 21px/1.2 var(--ff-serif); color: var(--ff-ink); }
.ffh-pamp__price { font: 700 15px var(--ff-sans); color: var(--ff-ink); }
.ffh-pamp__cta { margin-top: 4px; display: inline-flex; align-items: center; gap: 7px; font: 700 11px var(--ff-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ff-pink-deep); }
.ffh-pamp__cta i { font-style: normal; transition: transform .3s var(--ff-ease); }
.ffh-pamp__hero:hover .ffh-pamp__cta i { transform: translateX(5px); }

/* Carrousel des pampilles : ruban plein largeur, boucle sans couture. */
.ffh-pamp__marquee {
	position: relative; margin: 0; margin-top: clamp(8px, 1vw, 14px);
	width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.ffh-pamp__track { display: flex; width: max-content; padding: 8px 0; animation: ffh-pamp-loop 60s linear infinite; will-change: transform; }
.ffh-pamp__marquee:hover .ffh-pamp__track,
.ffh-pamp__marquee:focus-within .ffh-pamp__track { animation-play-state: paused; }
@keyframes ffh-pamp-loop { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.ffh-pamp__cell { flex: 0 0 auto; width: clamp(158px, 15vw, 208px); margin-right: clamp(14px, 1.6vw, 22px); display: flex; flex-direction: column; gap: 10px; }
.ffh-pamp__photo {
	display: block; aspect-ratio: 1 / 1; border-radius: 18px; overflow: hidden;
	background-size: cover; background-position: center; box-shadow: 0 8px 20px rgba(58,33,53,.1);
	transition: transform .55s var(--ff-ease), box-shadow .55s var(--ff-ease);
}
.ffh-pamp__cell:hover .ffh-pamp__photo { transform: translateY(-6px) scale(1.02); box-shadow: 0 20px 38px rgba(58,33,53,.22); }
.ffh-pamp__meta { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0 4px; }
.ffh-pamp__name { font: 500 12.5px/1.3 var(--ff-sans); color: var(--ff-ink-70); text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ffh-pamp__cprice { font: 700 13.5px var(--ff-sans); color: var(--ff-ink); }
.ffh-pamp__cprice .amount, .ffh-pamp__cprice bdi { font: inherit; color: inherit; }
.ffh-pamp__cell:focus-visible { outline: 2px solid var(--ff-pink-deep); outline-offset: 3px; }

@media (max-width: 860px) {
	.ffh-pamp__top { grid-template-columns: 1fr; }
	.ffh-pamp__hero { max-width: 460px; }
}
@media (prefers-reduced-motion: reduce) {
	.ffh-pamp__marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
	.ffh-pamp__track { animation: none; }
	.ffh-pamp__cell[aria-hidden="true"] { display: none; }
}

/* ------------------------- 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. */
/* Lien « Voir toutes les catégories » → page-hub /categorie. */
.ff-note--link { color: var(--ff-plum); transition: color .25s, transform .25s var(--ff-ease); }
.ff-note--link:hover { color: var(--ff-plum-deep); transform: translateX(2px); }

.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 bottom, rgba(43,34,38,.34), rgba(43,34,38,.04) 44%, 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; bottom: 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); top: clamp(8px, 1vw, 12px);
	display: flex; align-items: baseline; gap: 8px;
	padding: 5px 12px; border-radius: var(--ff-r-pill, 999px);
	background: rgba(255,255,255,.6);
	backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
	transform: translateZ(14px);
	box-shadow: 0 5px 12px rgba(58,33,53,.12);
	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,.82); transform: translateZ(30px); box-shadow: 0 12px 22px rgba(58,33,53,.22); }
.ffh-cat__plate b { flex: 1 1 auto; min-width: 0; font: 500 clamp(13px, 1.1vw, 16px)/1.15 var(--ff-serif); color: var(--ff-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ffh-cat__plate i { flex: none; font: 700 8.5px var(--ff-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ff-plum); font-style: normal; white-space: nowrap; }
.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;
	}
}