@charset "UTF-8";
/**
 * Notre concept — fidèle à « Notre concept.dc.html » :
 * hero photo d'étal + facettes, barre des facettes, piliers, tunnel 3D.
 */

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

.ffcc-hero { position: relative; overflow: hidden; background: var(--ff-bg-deep); }
.ffcc-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.ffcc-hero__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(100deg, rgba(255,255,255,.93) 0%, rgba(255,255,255,.86) 34%, rgba(253,244,248,.42) 54%, rgba(249,220,233,.08) 74%, rgba(249,220,233,.04) 100%);
}
.ffcc-hero__inner {
	position: relative;
	max-width: calc(var(--measure) + 2 * var(--gut)); margin: 0 auto;
	padding: clamp(38px, 5vw, 68px) var(--gut) clamp(44px, 6vw, 76px);
}
.ffcc-hero__inner > div { max-width: 640px; }
.ffcc-hero__h1 { margin: 12px 0 0; font: 500 clamp(34px, 4.4vw, 58px)/1.05 var(--ff-serif); color: var(--ff-ink); }
.ffcc-hero__h1 em { color: var(--ff-plum); }
.ffcc-hero__p { margin: 14px 0 0; max-width: 560px; font: var(--ff-body); color: rgba(51,39,46,.82); }
.ffcc-hero__sign { margin-top: 20px; font: 600 22px var(--ff-script); color: var(--ff-plum); transform: rotate(-1.5deg); }

/* Facettes interactives. */
.ffcc-faces { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.ffcc-face {
	display: flex; align-items: center; gap: 9px;
	padding: 6px 13px 6px 6px; border-radius: var(--ff-r-pill); cursor: pointer;
	border: 1px solid rgba(224,147,190,.45); background: rgba(255,255,255,.72);
	box-shadow: 0 4px 12px rgba(58,33,53,.08); transition: all .35s ease;
}
.ffcc-face.is-on {
	border-color: var(--ff-pink); background: var(--ff-pink);
	box-shadow: 0 10px 22px rgba(224,147,190,.45);
}
.ffcc-face__thumb {
	display: block; width: 32px; height: 32px; border-radius: 50%; flex: none;
	background: var(--ff-clay) 66% 58%/220% no-repeat;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
}
.ffcc-face__lbl { font: 500 13.5px var(--ff-serif); color: var(--ff-ink); white-space: nowrap; transition: color .35s; }
.ffcc-face.is-on .ffcc-face__lbl { color: #fff; }

/* Barre des facettes. */
.ffcc-hero__bar { position: relative; border-top: 1px solid rgba(224,147,190,.4); }
.ffcc-hero__bar-in {
	max-width: calc(var(--measure) + 2 * var(--gut)); margin: 0 auto;
	padding: 15px var(--gut);
	display: flex; flex-wrap: wrap; gap: 10px 28px;
}
.ffcc-bar__item { display: flex; align-items: baseline; gap: 8px; opacity: .5; transition: opacity .5s; }
.ffcc-bar__item.is-on { opacity: 1; }
.ffcc-bar__dot {
	width: 5px; height: 5px; border-radius: 50%; align-self: center;
	background: rgba(201,103,159,.35); transition: all .5s;
}
.ffcc-bar__item.is-on .ffcc-bar__dot { background: var(--ff-pink-mid); box-shadow: 0 0 0 4px rgba(224,147,190,.22); }
.ffcc-bar__k { font: 700 9px var(--ff-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ff-plum); }
.ffcc-bar__t { font: 500 14px var(--ff-serif); color: var(--ff-ink); white-space: nowrap; }

/* ---------------------------------------------------------- Piliers */

.ffcc-pillars { background: linear-gradient(180deg, #FFFFFF, #FDF4F8 60%, #FBEFF5); }
.ffcc-pillars__grid { margin-top: 26px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 26px; }
.ffcc-pillars__grid article {
	background: #fff; border: 1px solid rgba(224,147,190,.3); border-radius: 20px;
	padding: 30px 26px; box-shadow: var(--ff-shadow);
}
.ffcc-ico {
	display: flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 50%;
	background: rgba(224,147,190,.16); color: var(--ff-plum);
}
.ffcc-pillars__grid h3 { margin: 16px 0 0; font: 600 20px/1.25 var(--ff-serif); color: var(--ff-ink); }
.ffcc-pillars__grid p { margin: 10px 0 0; font: var(--ff-body); color: var(--ff-ink-70); }

/* ------------------------------------------ Tunnel 3D des étapes */

.ffcc-tunnel { background: linear-gradient(180deg, #FDF4F8, #FFFFFF 42%, #FFFFFF); overflow: hidden; }
.ffcc-tunnel::before {
	content: ''; position: absolute; inset: 0;
	background: radial-gradient(70% 60% at 22% 40%, rgba(224,147,190,.14), rgba(224,147,190,0) 70%);
	pointer-events: none;
}
.ffcc-tunnel__row { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 32px clamp(30px, 4vw, 60px); }
.ffcc-tunnel__copy { flex: 1 1 340px; min-width: min(100%, 280px); max-width: 480px; }
.ffcc-tunnel__list { margin-top: 22px; display: flex; flex-direction: column; gap: 3px; }
.ffcc-tunnel__item {
	display: flex; align-items: center; gap: 12px; width: 100%;
	padding: 11px 14px; border-radius: 12px; cursor: pointer; border: none; background: none;
	color: rgba(51,39,46,.6); transition: all .38s ease; text-align: left;
}
.ffcc-tunnel__item.is-on { background: rgba(255,255,255,.9); color: var(--ff-ink); box-shadow: 0 10px 24px rgba(58,33,53,.12); }
.ffcc-tunnel__num { flex: none; font: 600 15px var(--ff-serif); color: rgba(201,103,159,.5); transition: color .38s; }
.ffcc-tunnel__item.is-on .ffcc-tunnel__num { color: var(--ff-pink-mid); }
.ffcc-tunnel__lbl { flex: 1; min-width: 0; font: 500 15px var(--ff-serif); }
.ffcc-tunnel__bar { flex: none; width: 10px; height: 2px; border-radius: 2px; background: rgba(224,147,190,.35); transition: all .38s; }
.ffcc-tunnel__item.is-on .ffcc-tunnel__bar { width: 26px; background: var(--ff-pink); }

.ffcc-tunnel__side { flex: 1 1 420px; min-width: min(100%, 280px); }
.ffcc-stage { height: clamp(300px, 30vw, 352px); perspective: 1500px; perspective-origin: 50% 46%; position: relative; }
.ffcc-stage__ring { position: absolute; inset: 0; transform-style: preserve-3d; }
.ffcc-card {
	position: absolute; left: 50%; top: 50%;
	width: min(300px, 78vw); height: 320px;
	margin-left: max(-150px, -39vw); margin-top: -160px;
	border-radius: 20px; overflow: hidden;
	background: var(--ff-ink); border: 2px solid rgba(255,255,255,.18);
	box-shadow: 0 16px 34px rgba(0,0,0,.4);
	filter: brightness(.62) saturate(.8);
	opacity: 0; pointer-events: none;
	transition: transform 1s cubic-bezier(.32,.75,.28,1), opacity .7s ease, filter .8s ease, border-color .8s;
}
.ffcc-card.is-cur { border-color: var(--ff-pink); box-shadow: 0 30px 60px rgba(0,0,0,.5); filter: none; opacity: 1; pointer-events: auto; z-index: 10; }
.ffcc-card.is-near { opacity: 1; pointer-events: auto; z-index: 5; }
.ffcc-card__img { position: absolute; inset: 0; background-size: cover; background-position: 60% 55%; }
.ffcc-card__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(43,34,38,.9), rgba(43,34,38,.15) 58%); }
.ffcc-card__txt { position: absolute; left: 20px; right: 20px; bottom: 18px; text-align: left; }
.ffcc-card__txt b { display: block; font: 600 32px/1 var(--ff-serif); color: var(--ff-pink-mid); }
.ffcc-card__txt i { display: block; margin-top: 6px; font: 700 11px var(--ff-sans); letter-spacing: .18em; text-transform: uppercase; color: #fff; font-style: normal; }
.ffcc-card__txt p { margin: 7px 0 0; font: 400 12.5px/1.6 var(--ff-sans); color: rgba(255,248,251,.82); }

.ffcc-tunnel__nav { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 10px; }
.ffcc-tunnel__nav > button {
	width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(224,147,190,.6);
	background: rgba(255,255,255,.85); color: var(--ff-plum); cursor: pointer;
	display: flex; align-items: center; justify-content: center; transition: all .25s;
}
.ffcc-tunnel__nav > button:hover { background: var(--ff-pink); color: #fff; }
.ffcc-tunnel__dots { display: flex; gap: 7px; }
.ffcc-tunnel__dots button {
	width: 8px; height: 8px; border-radius: var(--ff-r-pill); border: none; cursor: pointer;
	background: rgba(224,147,190,.35); transition: all .4s; padding: 0;
}
.ffcc-tunnel__dots button.is-on { width: 24px; background: var(--ff-pink); }
.ffcc-tunnel__cta { text-align: center; margin-top: 18px; }

@media (max-width: 700px) {
	.ffcc-hero__bar-in { gap: 8px 18px; }
	.ffcc-bar__t { display: none; }
}

/* Confort tactile : l'espacement d'origine des puces (7 px) est conservé.
   On étend seulement la hauteur atteignable ; la largeur reste limitée par
   le pas de 15 px, sinon les puces voisines se recouvriraient. */
@media (max-width: 760px) {
	.ffcc-tunnel__dots button { position: relative; }
	.ffcc-tunnel__dots button::after {
		content: "";
		position: absolute;
		inset: -16px -3px;
	}
}