/* Finesty — motion.css (chantier « mouvement »)
   Système d'animation GSAP (motion.js) : masque pré-JS, formes du bandeau, couche parallaxe,
   barre de lecture, micro-interactions. Chargé après finesty.css sur toutes les pages.
   - html.fy-motion     : posée par un script inline dans <head>, retirée par motion.js dès que GSAP
                          a pris la main (ou après 3 s par sécurité) → masque les éléments animés
                          avant le premier rendu, sans jamais pouvoir les laisser invisibles.
   - html.fy-motion-on  : GSAP actif (jamais posée en prefers-reduced-motion).
   Seuls transform / translate / opacity / box-shadow sont animés : aucun décalage de mise en page. */

/* ---------- 1. Masque avant JS (uniquement si l'utilisateur accepte le mouvement) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.fy-motion body.finesty-inner [data-elementor-type="wp-page"] > .e-con.e-parent:first-child :is(.elementor-widget-image, .elementor-widget-heading, .fy-hero-sub, .fy-article-head__meta, .fy-article-head__lead, .elementor-widget-tp-button),
  html.fy-motion body.finesty-inner [data-elementor-type="wp-page"] > .e-con.e-parent:not(:first-child) :is(.elementor-widget-heading, .elementor-widget-text-editor, .elementor-widget-icon-list, .elementor-widget-icon-box, .elementor-widget-image-box, .elementor-widget-image, .elementor-widget-video, .elementor-widget-lottie, .elementor-widget-tp-button, .elementor-divider-separator),
  html.fy-motion body.finesty-inner :is(.fy-title, .fy-lead, .fy-eyebrow, .fy-subtitle, .fy-bar, .fy-actions, .fy-grid > *, .fy-card, .fy-steps__item, .fy-post-card, .fy-pillars__pillar, .fy-accordion__item, .fy-note, .fy-cta-band, .fy-table-wrap, .fy-faq-group__title, .fy-article__cover, .fy-toc, .fy-article__body > *, .fy-author, .fy-related > *),
  html.fy-motion body.home .tp-page-scroll-wrapper .section :is(.elementor-widget-heading, .elementor-widget-text-editor, .elementor-widget-image, .fy-home-actions, .elementor-widget-tp-button, .fy-post-card, .elementor-widget-icon-box, .elementor-widget-divider, .elementor-widget-social-icons) {
    opacity: 0;
  }
}

/* ---------- 2. Éléments pilotés par GSAP : aucune transition CSS sur transform/opacity ---------- */
html.fy-motion-on [data-fy-m] {
  transition: translate .25s cubic-bezier(.22, .61, .36, 1), box-shadow .25s, background-color .2s, color .2s, border-color .2s;
}
/* l'ancien système data-fy-reveal (components.js) est désactivé par motion.js (attribut retiré, is-visible posé) ;
   filet de sécurité si l'attribut subsiste */
html.fy-motion-on [data-fy-reveal], html.fy-motion-on [data-fy-reveal] > * { opacity: 1; transform: none; transition: none; }
/* Accueil : les animations d'entrée Elementor (fadeIn / slideInLeft rejouées par The Plus) sont remplacées par GSAP */
html.fy-motion-on body.home .tp-page-scroll-wrapper .elementor-invisible { visibility: visible !important; }
html.fy-motion-on body.home .tp-page-scroll-wrapper .elementor-widget.animated { animation: none !important; }

/* ---------- 3. Bandeau des pages intérieures : dégradé discret + formes flat qui dérivent ---------- */
html.fy-motion-on body.finesty-inner [data-elementor-type="wp-page"] > .e-con.e-parent:first-child {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-image: linear-gradient(160deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 38%, rgba(36, 69, 79, .55) 100%);
}
html.fy-motion-on body.finesty-inner [data-elementor-type="wp-page"] > .e-con.e-parent:first-child > .e-con-inner { position: relative; z-index: 1; }
.fy-motion-shapes { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.fy-motion-shape { position: absolute; border-radius: 50%; will-change: transform; }
.fy-motion-shape--1 { width: 460px; height: 460px; left: -160px; top: -200px; background: rgba(218, 174, 81, .13); }
.fy-motion-shape--2 { width: 560px; height: 560px; right: -220px; bottom: -300px; background: rgba(255, 255, 255, .05); }
.fy-motion-shape--3 { width: 170px; height: 170px; right: 16%; top: 22%; background: rgba(193, 150, 62, .14); }
.fy-motion-shape--4 { width: 90px; height: 90px; left: 18%; bottom: 14%; border: 2px solid rgba(218, 174, 81, .35); background: transparent; }
@media (max-width: 767px) {
  .fy-motion-shape--1 { width: 260px; height: 260px; left: -120px; top: -120px; }
  .fy-motion-shape--2 { width: 300px; height: 300px; right: -150px; bottom: -170px; }
  .fy-motion-shape--3 { width: 90px; height: 90px; right: 8%; top: 18%; }
  .fy-motion-shape--4 { display: none; }
}

/* ---------- 4. Sections sur image de fond (« Contactez-nous ») : couche parallaxe ---------- */
.fy-motion-bgp { position: relative; overflow: hidden; isolation: isolate; background-image: none !important; }
.fy-motion-bgp > .fy-motion-bg { position: absolute; left: 0; right: 0; top: -12%; bottom: -12%; z-index: -1; background-repeat: no-repeat; background-size: cover; background-position: center center; will-change: transform; pointer-events: none; }

/* ---------- 5. Barre de progression de lecture (articles) ---------- */
.fy-motion-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 100000; background: #DAAE51; transform: scaleX(0); transform-origin: left center; pointer-events: none; }

/* ---------- 6. Micro-interactions (survol) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.fy-motion-on .fy-btn { transition: translate .22s cubic-bezier(.22, .61, .36, 1), box-shadow .22s, background-color .18s, color .18s, border-color .18s, transform .18s cubic-bezier(.22, .61, .36, 1); }
  html.fy-motion-on .fy-btn:hover, html.fy-motion-on .fy-btn:focus-visible { translate: 0 -2px; box-shadow: 0 10px 24px rgba(31, 42, 46, .18); }
  html.fy-motion-on .fy-btn--gold:hover, html.fy-motion-on .fy-btn--gold:focus-visible,
  html.fy-motion-on .fy-btn--gold-ink:hover, html.fy-motion-on .fy-btn--gold-ink:focus-visible { box-shadow: 0 12px 26px rgba(218, 174, 81, .38); }
  html.fy-motion-on .fy-btn--outline:hover, html.fy-motion-on .fy-btn--outline-blue:hover, html.fy-motion-on .fy-btn--link:hover { box-shadow: none; }
  html.fy-motion-on .fy-btn--link:hover { translate: 2px 0; }
  html.fy-motion-on .fy-btn[data-fy-magnet] { will-change: transform; }
  /* boutons The Plus (a.button-link-wrap) */
  html.fy-motion-on a.button-link-wrap { transition: translate .22s cubic-bezier(.22, .61, .36, 1), box-shadow .22s, background-color .18s, color .18s, border-color .18s; }
  html.fy-motion-on a.button-link-wrap:hover, html.fy-motion-on a.button-link-wrap:focus-visible { translate: 0 -2px; box-shadow: 0 10px 24px rgba(0, 0, 0, .20); }
  /* cartes */
  html.fy-motion-on .fy-card { transition: translate .25s cubic-bezier(.22, .61, .36, 1), box-shadow .25s, background-color .2s, color .2s, border-color .2s; }
  html.fy-motion-on .fy-card:hover { translate: 0 -4px; box-shadow: 0 16px 36px rgba(47, 87, 101, .16); }
  html.fy-motion-on .fy-card--flat:hover { box-shadow: 0 10px 24px rgba(47, 87, 101, .10); }
  html.fy-motion-on .fy-post-card { transition: translate .25s cubic-bezier(.22, .61, .36, 1), box-shadow .25s; }
  html.fy-motion-on .fy-post-card:hover { translate: 0 -4px; box-shadow: 0 16px 36px rgba(47, 87, 101, .16); }
  /* liens du pied de page : soulignement or qui se dessine */
  html.fy-motion-on .fy-footer__list a { position: relative; }
  html.fy-motion-on .fy-footer__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 1px; background: #DAAE51; transform: scaleX(0); transform-origin: left center; transition: transform .28s cubic-bezier(.22, .61, .36, 1); }
  html.fy-motion-on .fy-footer__list a:hover::after, html.fy-motion-on .fy-footer__list a:focus-visible::after { transform: scaleX(1); }
  html.fy-motion-on .fy-footer__legal a { position: relative; }
  html.fy-motion-on .fy-footer__legal a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: #DAAE51; transform: scaleX(0); transform-origin: left center; transition: transform .28s cubic-bezier(.22, .61, .36, 1); }
  html.fy-motion-on .fy-footer__legal a:hover::after { transform: scaleX(1); }
}

/* ---------- 7. Mouvement réduit : rien ne bouge, tout est visible ---------- */
@media (prefers-reduced-motion: reduce) {
  .fy-motion-shape, .fy-motion-bg, .fy-motion-progress { display: none !important; }
  [data-fy-m] { opacity: 1 !important; transform: none !important; }
}