/* ==========================================================================
   FAMEEN GROUP — Direction motion « 360° en mouvement »
   --------------------------------------------------------------------------
   Signature : orbites, tracés qui se dessinent, rubans qui défilent,
   typographie cinétique, curseur et interactions magnétiques.

   Règles du système :
   • Durées et courbes centralisées ici (--fgm-*), plus courtes sur mobile.
   • Aucun état caché sans JS (html.fg-js) ni en « réduire les animations ».
     Si fg-motion.js ne démarre pas, un filet affiche tout après 2,5 s.
   • Seuls transform / translate / scale / opacity / clip-path /
     stroke-dashoffset sont animés. Décors aria-hidden, pointer-events:none.
   • Curseur, aimantation et inclinaison 3D : souris uniquement.
   ========================================================================== */

:root{
  --fgm-blue:#28326D;
  --fgm-blue-deep:#141c45;
  --fgm-gold:#E9A124;
  --fgm-gold-2:#F6B93B;

  --fgm-ease-out:cubic-bezier(.16,1,.3,1);       /* entrées : rapide puis très douce */
  --fgm-ease-expo:cubic-bezier(.7,0,.2,1);       /* rideaux, tracés, transitions */
  --fgm-ease-soft:cubic-bezier(.4,0,.2,1);       /* interactions */

  --fgm-dur-xs:.2s;
  --fgm-dur-s:.45s;
  --fgm-dur-m:.9s;
  --fgm-dur-l:1.2s;
  --fgm-stagger:.09s;    /* entre cartes */
  --fgm-word:.05s;       /* entre mots d'un titre */
  --fgm-shift:56px;      /* amplitude d'entrée des cartes */
}
@media (max-width:760px){
  :root{--fgm-dur-m:.7s;--fgm-dur-l:.9s;--fgm-stagger:.06s;--fgm-word:.035s;--fgm-shift:28px}
}

.fgm-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Filet de sécurité (moteur absent) ---------- */
@keyframes fgm-failsafe{to{opacity:1;transform:none;clip-path:none;scale:none}}
@media (prefers-reduced-motion:no-preference){
  .fg-js:not(.fgm-ready) .reveal:not(.in),
  .fg-js:not(.fgm-ready) .section-head.reveal:not(.in) > *,
  .fg-js:not(.fgm-ready) .section-head.reveal:not(.in) > h2::after,
  .fg-js:not(.fgm-ready) .section-head.reveal:not(.in) .eyebrow::before,
  .fg-js:not(.fgm-ready) .section-head.reveal:not(.in) .eyebrow.center::after,
  .fg-js:not(.fgm-ready) .stat.reveal:not(.in) .bar,
  .fg-js:not(.fgm-ready) .fg-rcard:not(.in),
  .fg-js:not(.fgm-ready) .fx-case:not(.in),
  .fg-js:not(.fgm-ready) .final .container::before{animation:fgm-failsafe .01s linear 2.5s forwards}
  .fg-js .fgh-title:not(.fgm-split),.fg-js .page-hero h1:not(.fgm-split){opacity:0;animation:fgm-failsafe .01s linear 1.2s forwards}
}

/* ==========================================================================
   1. APPARITIONS — caché → en entrée (.fgm-anim) → rendu au composant
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .fg-js .reveal:not(.in){opacity:0;transform:translate3d(0,var(--fgm-shift),0)}
  .fg-js .reveal.fgm-anim{
    transition:opacity var(--fgm-dur-m) var(--fgm-ease-out),transform var(--fgm-dur-l) var(--fgm-ease-out);
    transition-delay:calc(var(--fgm-i,0) * var(--fgm-stagger))}
  /* Cartes : montée en perspective, comme une carte qu'on pose sur la table */
  .fg-js .fgm-card.reveal:not(.in){transform:perspective(1000px) translate3d(0,var(--fgm-shift),0) rotateX(14deg) scale(.96);transform-origin:50% 100%}

  /* En-têtes de section : surtitre décodé → mots du titre → trait → intro */
  .fg-js .section-head.reveal{opacity:1;transform:none}
  .fg-js .section-head.reveal > *{transition:opacity var(--fgm-dur-m) var(--fgm-ease-out),transform var(--fgm-dur-m) var(--fgm-ease-out)}
  .fg-js .section-head.reveal:not(.in) > *{opacity:0;transform:translate3d(0,22px,0)}
  .fg-js .section-head.reveal > h2.fgm-split{opacity:1;transform:none}
  .fg-js .section-head.reveal.in > .lead,
  .fg-js .section-head.reveal.in > p:not(.eyebrow){transition-delay:.35s}

  /* Portfolio : la carte monte, un rideau bleu à liseré doré se retire de l'image */
  .fg-js .fg-rcard:not(.in){opacity:0;transform:translate3d(0,var(--fgm-shift),0)}
  .fg-js .fg-rcard.fgm-anim{transition:opacity var(--fgm-dur-m) var(--fgm-ease-out),transform var(--fgm-dur-l) var(--fgm-ease-out);
    transition-delay:calc(var(--fgm-i,0) * var(--fgm-stagger))}
  .fg-js .fx-case:not(.in){opacity:0;transform:translate3d(0,var(--fgm-shift),0)}
  .fg-js .fx-case.fgm-anim{transition:opacity var(--fgm-dur-m) var(--fgm-ease-out),transform var(--fgm-dur-l) var(--fgm-ease-out);
    transition-delay:calc(var(--fgm-i,0) * var(--fgm-stagger))}

  .fg-js .stat .bar{transform-origin:left center;transition:transform var(--fgm-dur-l) var(--fgm-ease-expo) calc(.3s + var(--fgm-i,0) * var(--fgm-stagger))}
  .fg-js .stat.reveal:not(.in) .bar{transform:scaleX(0)}
}

/* Rideau des images (portfolio, études de cas, articles) */
.fgm-curtain{position:absolute;inset:0;z-index:3;pointer-events:none;background:var(--fgm-blue);transform-origin:50% 0;
  box-shadow:inset 0 -4px 0 var(--fgm-gold)}
@media (prefers-reduced-motion:no-preference){
  .fgm-curtain{transition:transform 1s var(--fgm-ease-expo);transition-delay:calc(.15s + var(--fgm-i,0) * var(--fgm-stagger))}
  .in > .fgm-curtain,.in .fgm-curtain{transform:scaleY(0)}
  .fg-js:not(.fgm-ready) .fgm-curtain{animation:fgm-failsafe .01s linear 2.5s forwards}
}
@media (prefers-reduced-motion:reduce){.fgm-curtain{display:none}}
.fg-rthumb,.post-thumb,.fx-case-img{position:relative}
/* Parallaxe de l'image dans son cadre (translate : indépendant du zoom de survol) */
.fgm-px img{scale:1.08;translate:0 var(--fgm-py,0%);transition:transform .6s var(--fgm-ease-out)}

/* ==========================================================================
   2. TYPOGRAPHIE CINÉTIQUE
   ========================================================================== */
/* Masque par clip-path (sans effet sur la mise en page) : seul le bas est coupé, le mot monte de dessous */
.fgm-w{display:inline-block;vertical-align:top;clip-path:inset(-1em -1em -.12em -1em)}
.fgm-wi{display:inline-block;transform-origin:0 100%}
.fgm-done .fgm-w{clip-path:none}
@media (prefers-reduced-motion:no-preference){
  /* Hero et pages internes : jouent au chargement */
  .fgh-title.fgm-split .fgm-wi,.page-hero h1.fgm-split .fgm-wi{
    animation:fgm-word-in 1s var(--fgm-ease-out) both;animation-delay:calc(.08s + var(--fgm-w,0) * var(--fgm-word))}
  /* Titres de section : jouent à l'apparition */
  .section-head > h2.fgm-split .fgm-wi{transition:transform 1s var(--fgm-ease-out);transition-delay:calc(.12s + var(--fgm-w,0) * var(--fgm-word))}
  .fg-js .section-head.reveal:not(.in) > h2.fgm-split .fgm-wi{transform:translate3d(0,115%,0) rotate(7deg)}
}
@keyframes fgm-word-in{from{transform:translate3d(0,115%,0) rotate(7deg)}to{transform:none}}

/* Surtitre « décodé » : chiffres et lettres de même chasse pendant le décodage */
.fgm-scramble{font-variant-numeric:tabular-nums}

/* Paragraphe éclairé par la lecture */
.fgm-lit{color:var(--fgm-blue)!important;font-size:clamp(1.12rem,1.55vw,1.38rem)!important;line-height:1.55!important;font-weight:500;max-width:780px!important}
.fgm-lit .fgm-lw{transition:opacity .25s linear;opacity:clamp(.14,calc(var(--fgm-lit,999) - var(--i)),1)}

/* ==========================================================================
   3. TRAITS, TIRETS ET POINTILLÉS
   ========================================================================== */
.section-head > h2::after{
  content:"";display:block;width:84px;height:3px;margin:16px auto 0;border-radius:3px;
  background:linear-gradient(90deg,var(--fgm-gold) 0 44px,transparent 44px 52px,var(--fgm-gold) 52px 59px,transparent 59px 65px,var(--fgm-gold) 65px 72px,transparent 72px 78px,var(--fgm-gold) 78px 84px)}
.section-head .eyebrow::before,.section-head .eyebrow.center::after{
  content:"";display:inline-block;vertical-align:middle;width:26px;height:2px;margin:0 12px 2px 0;
  background:repeating-linear-gradient(90deg,currentColor 0 6px,transparent 6px 10px)}
.section-head .eyebrow.center::after{margin:0 0 2px 12px}
.page-hero h1::after{content:"";display:block;width:96px;height:4px;margin-top:16px;border-radius:4px;
  background:linear-gradient(90deg,var(--fgm-gold) 0 56px,transparent 56px 64px,var(--fgm-gold) 64px 72px,transparent 72px 80px,var(--fgm-gold) 80px 88px)}
.final .container{position:relative}
.final .container::before{content:"";position:absolute;inset:12px;border:2px dashed rgba(40,50,109,.26);border-radius:18px;pointer-events:none}

@media (prefers-reduced-motion:no-preference){
  .fg-js .section-head > h2::after{transition:clip-path var(--fgm-dur-l) var(--fgm-ease-expo) .7s}
  .fg-js .section-head.reveal:not(.in) > h2::after{clip-path:inset(0 100% 0 0)}
  .fg-js .section-head .eyebrow::before,.fg-js .section-head .eyebrow.center::after{transition:transform var(--fgm-dur-m) var(--fgm-ease-expo) .1s}
  .fg-js .section-head .eyebrow::before{transform-origin:right center}
  .fg-js .section-head .eyebrow.center::after{transform-origin:left center}
  .fg-js .section-head.reveal:not(.in) .eyebrow::before,
  .fg-js .section-head.reveal:not(.in) .eyebrow.center::after{transform:scaleX(0)}
  .fg-js .page-hero h1::after{animation:fgm-draw-x var(--fgm-dur-l) var(--fgm-ease-expo) .7s both}
  .fg-js .final .container::before{transition:clip-path 1.8s var(--fgm-ease-expo) .2s}
  .fg-js .final:not(.fgm-in) .container::before{clip-path:inset(0 100% 100% 0)}
}
@keyframes fgm-draw-x{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* Liaisons pointillées entre étapes */
.steps{position:relative}
.fgm-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.fgm-links path{fill:none;stroke:var(--fgm-gold);stroke-width:2;stroke-linecap:round;stroke-dasharray:2 6}
.fgm-links circle{fill:var(--fgm-gold)}
@media (prefers-reduced-motion:no-preference){
  .fgm-links .fgm-seg{transition:clip-path .8s var(--fgm-ease-expo);transition-delay:calc(.4s + var(--fgm-i,0) * .2s)}
  .fgm-links:not(.fgm-in) .fgm-seg{clip-path:inset(0 100% 0 0)}
}

/* Ligne de progression de lecture */
.fgm-progress{position:fixed;left:0;top:0;right:0;height:3px;z-index:1001;pointer-events:none;
  background:linear-gradient(90deg,var(--fgm-gold),var(--fgm-gold-2));transform-origin:0 50%;transform:scaleX(var(--fgm-page,0))}

/* Formes décoratives des marges (parallaxe), écrans larges uniquement */
.fgm-has-decor{position:relative}
.fgm-decor{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.fgm-decor > *{position:absolute;width:var(--s,64px);translate:0 var(--fgm-dy,0px)}
.fgm-decor svg{display:block;width:100%;height:auto;overflow:visible}
.fgm-has-decor > .container{position:relative;z-index:1}
@media (max-width:1240px){.fgm-decor{display:none}}
@media (prefers-reduced-motion:no-preference){
  .fgm-decor .fgm-spin svg{animation:fgm-rot 40s linear infinite}
}

/* ==========================================================================
   4. HERO D'ACCUEIL : orbite 360°, titre cinétique, sceau tournant
   ========================================================================== */
.fgh-stage{isolation:isolate}
.fgm-orbit{position:absolute;left:50%;top:50%;width:min(640px,118%);aspect-ratio:1;translate:-50% -50%;z-index:0;pointer-events:none;
  rotate:calc(var(--fgm-hp,0) * 60deg)}
.fgm-orbit svg{width:100%;height:100%;overflow:visible}
.fgm-orbit .fgm-o1{fill:none;stroke:rgba(40,50,109,.2);stroke-width:1.2;stroke-dasharray:2 9}
.fgm-orbit .fgm-o2{fill:none;stroke:var(--fgm-gold);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:420 900;opacity:.8}
.fgm-orbit .fgm-o3{fill:none;stroke:rgba(40,50,109,.14);stroke-width:1;stroke-dasharray:1 6}
.fgm-orbit .fgm-o4{fill:none;stroke:rgba(233,161,36,.35);stroke-width:1;stroke-dasharray:24 14}
.fgm-orbit .fgm-sat{fill:var(--fgm-gold)}
.fgm-orbit .fgm-sat2{fill:var(--fgm-blue)}
.fgm-orbit g{transform-box:view-box;transform-origin:50% 50%}
@media (max-width:640px){.fgm-orbit{display:none}}

.fgm-mark{position:relative;display:inline-block;white-space:nowrap}
.fgm-mark svg{position:absolute;left:-3%;bottom:-.24em;width:106%;height:.4em;overflow:visible;pointer-events:none}
.fgm-mark path{fill:none;stroke:var(--fgm-gold);stroke-width:4.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.fgh-sub .fgh-kw{position:relative;white-space:nowrap}
.fgh-sub .fgh-kw::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--fgm-gold) 0 2px,transparent 2px 5px)}

/* Sceau tournant (texte circulaire) */
.fgm-seal{position:relative;display:inline-grid;place-items:center;width:var(--seal,104px);height:var(--seal,104px);flex:none;color:var(--fgm-blue);pointer-events:none}
.fgm-seal svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fgm-seal text{font:700 9.6px 'Sora','Sora Fallback','Sora Fallback R',system-ui,sans-serif;letter-spacing:.06em;fill:currentColor;text-transform:uppercase}
.fgm-seal-core{width:46%;height:46%;border-radius:50%;display:grid;place-items:center;background:var(--fgm-gold);color:var(--fgm-blue);
  font:800 clamp(.8rem,1.1vw,.95rem)/1 'Sora','Sora Fallback','Sora Fallback R',system-ui,sans-serif;box-shadow:0 10px 26px -10px rgba(233,161,36,.8)}
/* Sceau du hero : dans la rangée des boutons, dont la hauteur est réservée dès le premier
   affichage (rien ne bouge à l'insertion) ; fg-motion.js le masque s'il devait passer à la ligne. */
.fgh-cta .fgm-seal{--seal:88px;margin-left:0;align-self:center}
@media (min-width:1200px){.fg-js .fgh-cta{min-height:88px;align-items:center}}
@media (max-width:1199px){.fgh-cta .fgm-seal{display:none}}
.final .fgm-seal{position:absolute;right:clamp(20px,3vw,40px);bottom:clamp(20px,3vw,34px);--seal:118px;color:var(--fgm-blue)}
.final .fgm-seal .fgm-seal-core{background:var(--fgm-blue);color:var(--fgm-gold)}
@media (max-width:900px){.final .fgm-seal{display:none}}


@media (prefers-reduced-motion:no-preference){
  .fgm-ready .fgh-hero .fgh-title.fgm-split{animation:none;opacity:1;transform:none}
  .fgm-mark path{stroke-dasharray:1;stroke-dashoffset:1;animation:fgm-stroke .9s var(--fgm-ease-expo) var(--fgm-mark-delay,1.4s) forwards}
  .fgh-sub .fgh-kw::after{transform:scaleX(0);transform-origin:left center;animation:fgm-scale-x .6s var(--fgm-ease-expo) forwards;animation-delay:calc(1s + var(--fgm-k,0) * .07s)}
  .fgm-ready .fgh-hero .fgh-d3{animation-delay:.55s}
  .fgm-ready .fgh-hero .fgh-d4{animation-delay:.7s}
  .fgm-ready .fgh-hero .fgh-d5{animation-delay:.85s}
  .fgm-orbit{animation:fgm-pop 1.4s var(--fgm-ease-out) .2s both}
  .fgm-orbit .fgm-g1{animation:fgm-rot 160s linear infinite}
  .fgm-orbit .fgm-g2{animation:fgm-rot 70s linear infinite reverse}
  .fgm-orbit .fgm-g3{animation:fgm-rot 48s linear infinite}
  .fgm-orbit .fgm-g4{animation:fgm-rot 110s linear infinite reverse}
  .fgm-seal svg{animation:fgm-rot 30s linear infinite}
}
@keyframes fgm-pop{from{opacity:0;scale:.7}to{opacity:1;scale:1}}
@keyframes fgm-rot{to{transform:rotate(360deg)}}
@keyframes fgm-stroke{to{stroke-dashoffset:0}}
@keyframes fgm-scale-x{to{transform:scaleX(1)}}

/* ==========================================================================
   5. RUBANS CROISÉS (expertises) ET BANDEAU D'APPEL
   ========================================================================== */
.fgm-band{position:relative;height:clamp(130px,24vw,360px);overflow:hidden;background:#fff;isolation:isolate}
.fgm-tape{position:absolute;left:-6vw;width:112vw;top:50%;padding:.32em 0;overflow:hidden;white-space:nowrap;
  font:800 clamp(1.5rem,4.4vw,4rem)/1 'Sora','Sora Fallback','Sora Fallback R',system-ui,sans-serif;letter-spacing:-.02em;text-transform:uppercase}
.fgm-tape--navy{z-index:2;background:var(--fgm-blue);color:#fff;transform:translateY(-92%) rotate(-3.2deg);box-shadow:0 20px 50px -20px rgba(20,28,69,.6)}
.fgm-tape--gold{z-index:1;background:var(--fgm-gold);color:var(--fgm-blue);transform:translateY(-8%) rotate(2.6deg)}
.fgm-track{display:inline-flex;align-items:center;gap:.55em;padding-right:.55em;will-change:transform;
  transform:translate3d(var(--fgm-x,0px),0,0) skewX(var(--fgm-skew,0deg))}
.fgm-item.is-outline{--fgm-fill:var(--fgm-blue);--fgm-stroke:#fff;color:var(--fgm-fill);-webkit-text-stroke:2.6px var(--fgm-stroke);paint-order:stroke fill}
.fgm-tape--gold .fgm-item.is-outline{--fgm-fill:var(--fgm-gold);--fgm-stroke:var(--fgm-blue)}
.fgm-star{display:inline-block;color:var(--fgm-gold);font-size:.7em}
.fgm-tape--gold .fgm-star{color:#fff}

.fgm-cta-band{display:block;position:relative;overflow:hidden;background:var(--fgm-gold);color:var(--fgm-blue);text-decoration:none;
  padding:clamp(18px,3vw,34px) 0;white-space:nowrap;font:800 clamp(1.7rem,5.4vw,4.8rem)/1 'Sora','Sora Fallback','Sora Fallback R',system-ui,sans-serif;letter-spacing:-.025em;
  transition:background .5s var(--fgm-ease-soft),color .5s var(--fgm-ease-soft)}
.fgm-cta-band .fgm-star{color:#fff}
.fgm-cta-band .fgm-item.is-outline{--fgm-fill:var(--fgm-gold);--fgm-stroke:var(--fgm-blue);transition:color .5s var(--fgm-ease-soft)}
.fgm-cta-band:hover,.fgm-cta-band:focus-visible{background:var(--fgm-blue);color:var(--fgm-gold)}
.fgm-cta-band:hover .fgm-item.is-outline,.fgm-cta-band:focus-visible .fgm-item.is-outline{--fgm-fill:var(--fgm-blue);--fgm-stroke:var(--fgm-gold)}
.fgm-cta-band:hover .fgm-star,.fgm-cta-band:focus-visible .fgm-star{color:var(--fgm-gold)}
.fgm-cta-band:focus-visible{outline:3px solid var(--fgm-blue);outline-offset:-6px}
.fgm-arrow{display:inline-block;transition:transform .4s var(--fgm-ease-out)}
.fgm-cta-band:hover .fgm-arrow{transform:translateX(.18em) rotate(-45deg)}

/* Filigrane « 360° » de la section chiffres */
.stats{position:relative;overflow:hidden}
.stats > .container{position:relative;z-index:1}
.fgm-wm{position:absolute;left:50%;top:50%;z-index:0;pointer-events:none;white-space:nowrap;
  font:800 clamp(9rem,26vw,24rem)/1 'Sora','Sora Fallback','Sora Fallback R',system-ui,sans-serif;letter-spacing:-.05em;color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.07);translate:calc(-50% + var(--fgm-wx,0px)) -50%}

/* ==========================================================================
   6. HERO DES PAGES INTERNES
   ========================================================================== */
.fgm-ph-deco{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.fgm-ph-deco path,.fgm-ph-deco .fgm-ring{fill:none;stroke-linecap:round}
.fgm-ph-deco .fgm-p1{stroke:rgba(255,255,255,.14);stroke-width:1.5;stroke-dasharray:2 8}
.fgm-ph-deco .fgm-p2{stroke:rgba(233,161,36,.7);stroke-width:2}
.fgm-ph-deco .fgm-p3{stroke:rgba(255,255,255,.12);stroke-width:1}
.fgm-ph-deco .fgm-ring{stroke:rgba(233,161,36,.35);stroke-width:1.2;stroke-dasharray:3 9}
.fgm-ph-deco .fgm-dot{fill:var(--fgm-gold)}
.fgm-ph-deco g{transform-box:fill-box;transform-origin:50% 50%}
@media (max-width:640px){.fgm-ph-deco .fgm-p1,.fgm-ph-deco .fgm-p3,.fgm-ph-deco .fgm-ring,.fgm-ph-deco .fgm-dot{display:none}}
@media (prefers-reduced-motion:no-preference){
  .fgm-ready .page-hero h1.fgm-split{animation:none;opacity:1}
  .fg-js .page-hero .breadcrumb,.fg-js .page-hero .eyebrow,.fg-js .page-hero .ph-sub,.fg-js .page-hero .cta-row{animation:fgm-rise var(--fgm-dur-m) var(--fgm-ease-out) both}
  .fg-js .page-hero .ph-sub{animation-delay:.4s}
  .fg-js .page-hero .cta-row{animation-delay:.52s}
  .fgm-ph-deco .fgm-p1{animation:fgm-dash 46s linear infinite}
  .fgm-ph-deco .fgm-p2{stroke-dasharray:1;stroke-dashoffset:1;animation:fgm-stroke 1.6s var(--fgm-ease-expo) .4s forwards}
  .fgm-ph-deco .fgm-p3{stroke-dasharray:1;stroke-dashoffset:1;animation:fgm-stroke 2.2s var(--fgm-ease-expo) .6s forwards}
  .fgm-ph-deco .fgm-spin{animation:fgm-rot 60s linear infinite}
}
@keyframes fgm-rise{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
@keyframes fgm-dash{to{stroke-dashoffset:-240}}

/* ==========================================================================
   7. INTERACTIONS : cartes, portfolio, boutons
   ========================================================================== */
.card:focus-within::before,.why-card:focus-within::before,.step:focus-within::before,.sol-card:focus-within::before{width:100%}
.more [data-ico="arrow"],.post-link [data-ico="arrow"]{display:inline-flex;transition:transform var(--fgm-dur-xs) var(--fgm-ease-soft)}
.more:hover [data-ico="arrow"],.more:focus-visible [data-ico="arrow"],.post-link:hover [data-ico="arrow"],.post-link:focus-visible [data-ico="arrow"],.card:hover .more [data-ico="arrow"]{transform:translateX(6px)}
.card .ic,.feature .ic,.why-card .ic,.sol-card .ic{transition:transform var(--fgm-dur-s) var(--fgm-ease-out),background .3s}
.card:focus-within,.feature:focus-within,.why-card:focus-within,.sol-card:focus-within,.post:focus-within{transform:translateY(-6px);box-shadow:0 26px 60px rgba(27,35,80,.14)}

/* Inclinaison 3D + halo doré qui suit la souris */
.fgm-tilt{position:relative;isolation:isolate}
.fgm-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .4s var(--fgm-ease-soft);
  background:radial-gradient(380px circle at var(--fgm-mx,50%) var(--fgm-my,50%),rgba(233,161,36,.2),transparent 48%)}
.fgm-tilt.is-tilting .fgm-glare{opacity:1}
.fgm-ready .fgm-tilt.is-tilting{
  transform:perspective(900px) rotateX(var(--fgm-rx,0deg)) rotateY(var(--fgm-ry,0deg)) translate3d(0,-8px,0);
  transition:transform .14s linear,box-shadow .3s;box-shadow:0 34px 70px -24px rgba(27,35,80,.32)}
.fgm-tilt.is-tilting .ic{transform:translate3d(0,-4px,30px) rotate(-6deg)}

/* Portfolio */
.fg-rcard h3{align-self:flex-start;padding-bottom:3px;background:linear-gradient(var(--fgm-gold),var(--fgm-gold)) 0 100%/0 2px no-repeat;transition:background-size var(--fgm-dur-s) var(--fgm-ease-out)}
.fg-rcard:hover h3,.fg-rcard:focus-visible h3{background-size:100% 2px}
.fg-rtag{transition:transform var(--fgm-dur-s) var(--fgm-ease-out),background .3s}
.fg-rcard:hover .fg-rtag,.fg-rcard:focus-visible .fg-rtag{transform:translateY(-2px);background:rgba(233,161,36,.22)}
.fg-rcard:focus-visible .fg-rthumb img{transform:scale(1.07)}
.fg-rcard:focus-visible .fg-rthumb::after{opacity:1}
.fg-rcard:focus-visible .fg-rzoom{transform:scale(1);opacity:1}

/* Boutons : reflet, aimantation (propriété translate indépendante) */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;inset:-2px;z-index:-1;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);transform:translateX(-120%)}
@media (hover:hover){
  .btn:hover{transform:translateY(-2px)}
  .btn:hover::after{transform:translateX(120%);transition:transform .75s var(--fgm-ease-soft)}
}
.btn:focus-visible::after{transform:translateX(120%);transition:transform .75s var(--fgm-ease-soft)}
.btn:active{transform:translateY(0) scale(.97);transition-duration:.1s}
.fgm-magnet{transition:transform .25s,background .25s,color .25s,border-color .25s,box-shadow .25s,translate .5s var(--fgm-ease-out)!important}
.fgm-magnet.is-pulled{transition:transform .25s,background .25s,color .25s,border-color .25s,box-shadow .25s,translate .12s linear!important}
.btn:focus-visible,.fgh-btn:focus-visible,.fg-rcard:focus-visible,.more:focus-visible,.post-link:focus-visible{outline:3px solid var(--fgm-gold);outline-offset:3px}
.fgh-btn:focus-visible{transform:translateY(-2px)}
@media (hover:none){
  .card:active,.feature:active,.why-card:active,.sol-card:active,.post:active,.fg-rcard:active{transform:scale(.985);transition-duration:.12s}
}

/* ==========================================================================
   8. CURSEUR CRÉATIF (souris uniquement)
   ========================================================================== */
.fgm-cursor{position:fixed;left:0;top:0;z-index:2147483000;pointer-events:none}
.fgm-cursor-dot,.fgm-cursor-ring{position:fixed;left:0;top:0;border-radius:50%;will-change:transform}
.fgm-cursor-dot{width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--fgm-gold);transition:opacity .2s}
.fgm-cursor-ring{width:42px;height:42px;margin:-21px 0 0 -21px;border:1.5px solid rgba(40,50,109,.55);display:grid;place-items:center;
  transition:width .35s var(--fgm-ease-out),height .35s var(--fgm-ease-out),margin .35s var(--fgm-ease-out),background .3s,border-color .3s,opacity .3s}
.fgm-cursor-label{font:800 12px/1 'Sora','Sora Fallback','Sora Fallback R',system-ui,sans-serif;letter-spacing:.04em;color:var(--fgm-blue);opacity:0;transform:scale(.6);transition:opacity .25s,transform .35s var(--fgm-ease-out)}
.fgm-cursor.is-dark .fgm-cursor-ring{border-color:rgba(255,255,255,.65)}
.fgm-cursor.is-link .fgm-cursor-ring{width:66px;height:66px;margin:-33px 0 0 -33px;background:rgba(233,161,36,.16);border-color:var(--fgm-gold)}
.fgm-cursor.is-view .fgm-cursor-ring{width:96px;height:96px;margin:-48px 0 0 -48px;background:var(--fgm-gold);border-color:var(--fgm-gold)}
.fgm-cursor.is-view .fgm-cursor-label{opacity:1;transform:none}
.fgm-cursor.is-view .fgm-cursor-dot,.fgm-cursor.is-link .fgm-cursor-dot{opacity:0}
.fgm-cursor.is-hidden .fgm-cursor-ring,.fgm-cursor.is-hidden .fgm-cursor-dot{opacity:0}
.fgm-cursor.is-down .fgm-cursor-ring{width:30px;height:30px;margin:-15px 0 0 -15px}
html.fgm-cursor-on,html.fgm-cursor-on body,html.fgm-cursor-on a,html.fgm-cursor-on button,html.fgm-cursor-on [role="button"],html.fgm-cursor-on label{cursor:none}
html.fgm-cursor-on input,html.fgm-cursor-on textarea,html.fgm-cursor-on select,html.fgm-cursor-on iframe{cursor:auto}

/* ==========================================================================
   9. MOUVEMENTS PERMANENTS : suspendus hors écran
   ========================================================================== */
.fgm-paused,.fgm-paused *,.fgm-paused::before,.fgm-paused::after{animation-play-state:paused!important}

/* ==========================================================================
   10. TRANSITION ENTRE PAGES : la page suivante s'ouvre en cercle depuis le clic
       (navigateurs compatibles ; navigation native conservée)
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:fgm-vt-out .65s var(--fgm-ease-expo) both}
  ::view-transition-new(root){animation:fgm-vt-in .65s var(--fgm-ease-expo) both}
}
@keyframes fgm-vt-out{to{opacity:.4;transform:scale(.97)}}
@keyframes fgm-vt-in{from{clip-path:circle(0 at var(--fgm-vx,50%) var(--fgm-vy,40%))}to{clip-path:circle(150vmax at var(--fgm-vx,50%) var(--fgm-vy,40%))}}

/* ==========================================================================
   11. RÉDUCTION DES ANIMATIONS : tout est visible, tracé et immobile
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .btn::after,.fgm-ph-deco,.fgm-orbit,.fgm-decor,.fgm-wm,.fgm-progress{display:none}
  .fgm-track{transform:none!important}
  .btn:hover,.btn:active,.card:focus-within,.feature:focus-within,.why-card:focus-within,.sol-card:focus-within,.post:focus-within{transform:none}
  .fgm-lit .fgm-lw{opacity:1}
  .fgm-px img{scale:1;translate:none}
  .fg-rcard h3,.fg-rtag,.more [data-ico="arrow"],.post-link [data-ico="arrow"]{transition:none}
}