/* ==========================================================================
   FABARA — animations de défilement de la page d'accueil
   Même signature de mouvement que le film : entrée « expo-out », masques,
   rideaux, parallaxe. Uniquement transform / opacity / clip-path (fluide sur
   mobile d'entrée de gamme). Tout est conditionné à html.fx : sans JS ou si
   l'appareil demande moins d'animations, la page s'affiche normalement.
   ========================================================================== */

:root {
  --fx-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --fx-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- Barre de progression dorée ---------- */
.fx-progress {
  position: fixed; top: 0; left: 0; z-index: 10001;
  width: 100%; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, var(--gold), #FFD54F);
  transform-origin: 0 50%; transform: scaleX(0);
}

/* ---------- Mots qui montent derrière un masque ---------- */
.fx .fx-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.fx .fx-w > span {
  display: inline-block; transform: translate3d(0, 110%, 0);
  transition: transform 1.1s var(--fx-ease);
  transition-delay: calc(var(--i, 0) * 55ms + var(--d, 0ms));
}
.fx .is-in .fx-w > span, .fx .is-in.fx-w > span { transform: none; }

/* ---------- Hero ---------- */
.fx .hero-badge, .fx .hero-content > p, .fx .hero-btns {
  opacity: 0; transform: translate3d(0, 24px, 0);
  transition: opacity 0.9s var(--fx-ease), transform 1.1s var(--fx-ease);
}
.fx .hero-content.is-in .hero-badge { opacity: 1; transform: none; }
.fx .hero-content.is-in > p { opacity: 1; transform: none; transition-delay: 0.45s; }
.fx .hero-content.is-in .hero-btns { opacity: 1; transform: none; transition-delay: 0.6s; }
.fx .hero-pattern, .fx .hero-content, .fx .hero-cards { will-change: transform; }

/* ---------- Titres de section : le trait se dessine, les mots montent ---------- */
.fx .section-tag::before { transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.9s var(--fx-ease); }
.fx .section-tag { opacity: 0; transition: opacity 0.6s ease; }
.fx .is-in .section-tag, .fx .section-tag.is-in { opacity: 1; }
.fx .is-in .section-tag::before, .fx .section-tag.is-in::before { transform: scaleX(1); }
.fx .section-sub, .fx [data-fx="rise"] {
  opacity: 0; transform: translate3d(0, 28px, 0);
  transition: opacity 0.9s var(--fx-ease), transform 1.1s var(--fx-ease);
  transition-delay: calc(var(--i, 0) * 90ms + var(--d, 0ms));
}
.fx .is-in .section-sub, .fx .section-sub.is-in, .fx [data-fx="rise"].is-in { opacity: 1; transform: none; }

/* ---------- Produits : rideau qui s'ouvre + léger dézoom ---------- */
.fx .product-card {
  opacity: 0; transform: translate3d(0, 40px, 0);
  transition: opacity 0.8s var(--fx-ease), transform 1.1s var(--fx-ease), box-shadow 0.3s;
  transition-delay: calc(var(--i, 0) * 110ms);
}
.fx .product-card .product-img-wrap {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.2s var(--fx-ease-io);
  transition-delay: calc(var(--i, 0) * 110ms + 80ms);
}
.fx .product-card .product-img { transform: scale(1.25); transition: transform 1.6s var(--fx-ease); transition-delay: calc(var(--i, 0) * 110ms + 80ms); }
.fx .product-card.is-in { opacity: 1; transform: none; }
.fx .product-card.is-in .product-img-wrap { clip-path: inset(0 0 0 0); }
.fx .product-card.is-in .product-img { transform: scale(1); }
.fx .product-card.is-in:hover { transform: translate3d(0, -4px, 0); transition-delay: 0s; }
.fx .product-card.is-in:hover .product-img { transform: scale(1.05); transition: transform 0.4s; }

/* ---------- Catégories : tuiles qui s'ouvrent + parallaxe dans la tuile ---------- */
/* Le masque est sur l'image et non sur la tuile : un élément entièrement masqué
   n'est jamais signalé comme visible par IntersectionObserver. */
.fx .cat-card .cat-img-wrap {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s var(--fx-ease-io);
  transition-delay: calc(var(--i, 0) * 120ms);
}
.fx .cat-card.is-in .cat-img-wrap { clip-path: inset(0 0 0 0); }
.fx .cat-card .cat-info { opacity: 0; transform: translate3d(0, 20px, 0); transition: opacity 0.8s var(--fx-ease), transform 1s var(--fx-ease); transition-delay: calc(var(--i, 0) * 120ms + 450ms); }
.fx .cat-card.is-in .cat-info { opacity: 1; transform: none; }
.fx .cat-img {
  height: 120%; margin-top: -10%;
  transform: translate3d(0, var(--py, 0px), 0) scale(var(--sc, 1));
  transition: transform 0.18s linear;
}
.fx .cat-card:hover .cat-img { --sc: 1.05; transform: translate3d(0, var(--py, 0px), 0) scale(var(--sc)); }

/* ---------- Comment ça marche : ligne dorée qui relie les étapes ---------- */
.fx .steps-grid { position: relative; }
.fx-steps-line { position: absolute; z-index: 0; background: var(--green-pale); border-radius: 2px; pointer-events: none; }
.fx-steps-line > span { position: absolute; inset: 0; background: linear-gradient(90deg, var(--green-main), var(--gold)); border-radius: 2px; transform-origin: 0 0; }
@media (min-width: 993px) {
  .fx-steps-line { top: -22px; left: 2rem; right: 2rem; height: 3px; }
  .fx-steps-line > span { transform: scaleX(var(--p, 0)); }
}
@media (max-width: 992px) {
  .fx-steps-line { top: 1.5rem; bottom: 1.5rem; left: -12px; width: 3px; }
  .fx-steps-line > span { background: linear-gradient(180deg, var(--green-main), var(--gold)); transform: scaleY(var(--p, 0)); }
}
.fx .step-card { position: relative; z-index: 1; opacity: 0; transform: translate3d(0, 36px, 0); transition: opacity 0.8s var(--fx-ease), transform 1s var(--fx-ease), box-shadow 0.4s, border-color 0.4s; transition-delay: calc(var(--i, 0) * 140ms); }
.fx .step-card.is-in { opacity: 1; transform: none; }
.fx .step-card .step-num { transition: color 0.6s ease; }
.fx .step-card .step-icon { transition: background 0.6s ease, transform 0.6s var(--fx-ease); }
.fx .step-card.is-active { border-color: var(--green-main); box-shadow: 0 18px 40px rgba(27, 94, 32, 0.12); }
.fx .step-card.is-active .step-num { color: var(--gold); }
.fx .step-card.is-active .step-icon { background: var(--green-pale); transform: scale(1.08); }

/* ---------- Vendeurs, témoignages, FAQ, Gestion, contact ---------- */
.fx .artisan-card { opacity: 0; transform: translate3d(0, 30px, 0) scale(0.94); transition: opacity 0.8s var(--fx-ease), transform 1s var(--fx-ease), box-shadow 0.3s; transition-delay: calc(var(--i, 0) * 100ms); }
.fx .artisan-card.is-in { opacity: 1; transform: none; }
.fx .artisan-card .artisan-avatar { transform: scale(0.6) rotate(-12deg); transition: transform 1s var(--fx-ease); transition-delay: calc(var(--i, 0) * 100ms + 250ms); }
.fx .artisan-card.is-in .artisan-avatar { transform: none; }

.fx .gestion-promo { clip-path: inset(8% 6% 8% 6% round 28px); opacity: 0.4; transition: clip-path 1.3s var(--fx-ease-io), opacity 1s ease; }
.fx .gestion-promo.is-in { clip-path: inset(0 0 0 0 round 0px); opacity: 1; }

/* ---------- Boutons magnétiques (souris uniquement) ---------- */
@media (hover: hover) and (pointer: fine) {
  .fx .fx-magnet { transition: transform 0.5s var(--fx-ease); will-change: transform; }
  .fx .fx-magnet.is-pulling { transition: transform 0.15s linear; }
}

/* ---------- Accessibilité : rien ne bouge si l'appareil le demande ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx-progress { display: none; }
}