/* Loveen — effets « vitrine » (accueil et partenaires). Actifs seulement sous html.fx-vitrine. */

/* Les deux fils de lumière, au-dessus du fond animé, derrière le texte */
.fx-fils { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: block; }

/* Premier écran : entrée (le téléphone monte en perspective) */
html.fx-vitrine .fx-entree .stage { animation: fx-monte .9s cubic-bezier(.16, 1, .3, 1) .1s both; transform-origin: 50% 100%; }
@keyframes fx-monte { from { opacity: 0; transform: perspective(1200px) translate3d(0, 90px, 0) rotateX(16deg) scale(.94); } to { opacity: 1; transform: none; } }

/* Manifeste. Sans animation : trois phrases l'une sous l'autre. */
.manifeste { background: var(--night); color: var(--night-ink); position: relative; }
.manifeste .m-scene { position: relative; isolation: isolate; overflow: hidden; padding: 96px 0; display: grid; gap: 40px; justify-items: center; text-align: center; }
.manifeste .m-phrase { margin: 0; padding-inline: 20px; max-width: 18ch; font-family: var(--f-display); font-weight: 800; letter-spacing: -0.045em; line-height: 1.02; font-size: clamp(2.1rem, 6.4vw, 5.6rem); }
.manifeste .m-phrase .serif { color: var(--rose); font-weight: 400; letter-spacing: -0.02em; }
.manifeste .m3 { display: grid; gap: 18px; justify-items: center; max-width: 26ch; }
.manifeste .m-logo { font-family: var(--f-display); font-weight: 800; font-size: clamp(3.2rem, 11vw, 9rem); letter-spacing: -0.06em; line-height: .9;
  background: linear-gradient(90deg, #f2789c, #e7734e 55%, #f4b740); -webkit-background-clip: text; background-clip: text; color: transparent; }
.manifeste .m-sous { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: clamp(1.3rem, 2.8vw, 2.2rem); letter-spacing: -0.01em; line-height: 1.2; color: var(--night-ink); }

/* Manifeste animé : la scène reste à l'écran pendant qu'on fait défiler */
html.fx-vitrine .manifeste.m-on { height: 230vh; }
html.fx-vitrine .manifeste.m-on .m-scene { position: sticky; top: 0; height: 100vh; height: 100svh; padding: 0; display: block; }
html.fx-vitrine .manifeste.m-on .m-phrase { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92vw, 18ch); }
html.fx-vitrine .manifeste.m-on .m3 { top: 64%; width: min(92vw, 26ch); }
.manifeste .mw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.manifeste .mwi { display: inline-block; will-change: transform, opacity; }
.manifeste .m-logo { perspective: 600px; }
.manifeste .ml { display: inline-block; will-change: transform, opacity; transform-origin: 50% 100%; background: inherit; -webkit-background-clip: text; background-clip: text; }
html.fx-vitrine .manifeste.m-on .m-logo { background: none; color: inherit; }
html.fx-vitrine .manifeste.m-on .ml { background: linear-gradient(90deg, #f2789c, #f4b740); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Symbole Loveen du manifeste (accueil) */
.manifeste .m-symbole { width: clamp(84px, 10vw, 136px); height: auto; filter: drop-shadow(0 0 40px rgba(242, 120, 156, .35)); }
html.fx-vitrine .manifeste.m-on .m-symbole { position: absolute; left: 50%; top: 31%; opacity: 0; transform: translate(-50%, -50%); will-change: transform, opacity; }

/* Paragraphe qui s'éclaire mot à mot à la lecture */
.lw { display: inline; }
.lwi { display: inline; }

/* Feuille qui glisse sur la section sombre précédente */
html.fx-vitrine .fx-feuille { position: relative; z-index: 1; margin-top: -56px; padding-top: calc(104px + 56px); background: var(--bg);
  clip-path: inset(0 var(--fx-m, 0%) 0 var(--fx-m, 0%) round var(--fx-r, 0px) var(--fx-r, 0px) 0 0); }
html.fx-vitrine .band.alt.fx-feuille { background: var(--bg-alt); }

/* Parcours : ligne lumineuse */
.j-ligne { position: absolute; left: 24px; right: 24px; top: -22px; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; pointer-events: none; }
.j-ligne i { position: absolute; inset: 0; background: linear-gradient(90deg, #f2789c, #f4b740); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); box-shadow: 0 0 12px rgba(242, 120, 156, .6); }
html.fx-vitrine .journey li { transition: border-color .5s ease, box-shadow .5s ease, transform .25s ease; }
html.fx-vitrine .journey li .ico { transition: box-shadow .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1); }
html.fx-vitrine .journey li.lit { border-color: color-mix(in srgb, var(--rose) 55%, var(--line)); box-shadow: 0 18px 40px -24px rgba(242, 120, 156, .55); }
html.fx-vitrine .journey li.lit .ico { box-shadow: 0 0 0 6px rgba(242, 120, 156, .14); transform: scale(1.06); }
@media (max-width: 960px) { .j-ligne { display: none; } }

/* « Ne fera jamais » : un trait qui raye chaque promesse */
html.fx-vitrine .fx-raye h3 { position: relative; display: inline-block; justify-self: start; }
html.fx-vitrine .fx-raye h3::after { content: ""; position: absolute; left: -4px; right: -4px; top: 54%; height: 3px; border-radius: 3px; background: var(--rose);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s cubic-bezier(.65, 0, .35, 1); transition-delay: calc(var(--i, 0) * 160ms + .55s); }
html.fx-vitrine .fx-raye.in h3::after { transform: scaleX(1); }

/* Cartes en relief au survol, avec un reflet qui suit la souris */
html.fx-vitrine .fx-relief { position: relative; background-image: radial-gradient(420px circle at var(--sx, 50%) var(--sy, 50%), rgba(242, 120, 156, 0), transparent 62%); }
html.fx-vitrine .fx-relief.fx-survol { background-image: radial-gradient(420px circle at var(--sx, 50%) var(--sy, 50%), rgba(242, 120, 156, .13), transparent 62%); }
html.fx-vitrine .fx-relief.in, html.fx-vitrine .fx-relief:not(.fx-up) { transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); }
html.fx-vitrine .fx-relief.fx-survol { transition: transform .18s ease-out, border-color .5s ease, box-shadow .5s ease; }

/* Appareil peu puissant : on garde l'essentiel */
html.fx-lite .fx-float { translate: none !important; }

@media (prefers-reduced-motion: reduce) {
  .fx-fils { display: none; }
  html.fx-vitrine .manifeste.m-on { height: auto; }
}

/* Formules : arrivée en cascade */
html.fx-vitrine .fx-cascade .plan { opacity: 0; transform: translate3d(0, 70px, 0) rotate(calc((var(--n, 1) - 1) * 2deg)); transition: opacity .9s ease, transform 1.1s cubic-bezier(.16, 1, .3, 1); }
html.fx-vitrine .fx-cascade .plan:nth-child(1) { --n: 0; transition-delay: 0s; }
html.fx-vitrine .fx-cascade .plan:nth-child(2) { --n: 1; transition-delay: .12s; }
html.fx-vitrine .fx-cascade .plan:nth-child(3) { --n: 2; transition-delay: .24s; }
html.fx-vitrine .fx-cascade.in .plan { opacity: 1; transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); }
html.fx-vitrine .fx-cascade.in .plan.fx-survol { transition: transform .18s ease-out; transition-delay: 0s; }

@media (max-width: 720px) {
  .manifeste .m-phrase { font-size: clamp(2.3rem, 10vw, 3.4rem); }
  .manifeste .m-logo { font-size: clamp(3.8rem, 18vw, 6rem); }
  html.fx-vitrine .manifeste.m-on .m3 { top: 60%; }
}