/* ==========================================================================
   VSOLUTION : animations de détail (validées le 23/09/2026)
   Principes : uniquement transform / opacity / clip-path (pas de décalage de
   mise en page), courbe expo douce, amplitudes faibles. Tout est gardé par des
   classes posées en JS : sans JS ou avec « réduire les animations », le site
   reste strictement identique à aujourd'hui.
   ========================================================================== */
:root{--vx-ease:cubic-bezier(.16,1,.3,1);--vx-ease-io:cubic-bezier(.65,0,.35,1)}

/* 1. Barre de progression de lecture */
.vx-progress{position:fixed;top:0;left:0;width:100%;height:2px;z-index:1000;pointer-events:none;
  transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--acc),#7fbfff)}

/* 5. Halo qui suit le curseur sur les cartes (sous le texte, jamais par-dessus) */
.vx-spot{position:relative;isolation:isolate}
.vx-spot::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;border-radius:inherit;
  transition:opacity .45s ease;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(59,158,255,.15),transparent 65%)}
.vx-spot:hover::after{opacity:1}
html[data-theme="day"] .vx-spot::after{background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(0,0,128,.07),transparent 65%)}
html[data-theme="day"] .sectors .vx-spot::after{background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(127,191,255,.16),transparent 65%)}

/* 6. Profondeur des bandes photo : le zoom au survol passe sur la propriété `scale`
   pour ne pas se battre avec le décalage de parallaxe, porté par `translate`. */
.vx-px .sector-bg .sbg{transform:none!important;scale:1.12;transition:scale .8s var(--vx-ease);will-change:translate}
.vx-px .team-band-link:hover .sbg,.vx-px .team-band-link:focus-visible .sbg,.vx-px .rd-block .sector-bg:hover .sbg{scale:1.17}
.vx-px #prestations .bg-photo img{will-change:translate}

/* 8. Onde au clic sur les boutons */
.vx-rh{position:relative;overflow:hidden}
.vx-ripple{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.22;
  transform:scale(0);animation:vx-ripple .7s var(--vx-ease) forwards}
@keyframes vx-ripple{to{transform:scale(1);opacity:0}}



/* 9. Liens texte : on voit tout de suite ce qui se clique.
   Pur CSS, actif même sans JS : soulignement qui se déroule depuis la gauche,
   changement de couleur net, léger enfoncement au clic. */
.ft-col a,.ft-bottom a,.breadcrumb a,.faq-a a,.faq a,main p a:not([class]),main li a:not([class]),.pole-prose a{
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;
  transition:color .25s ease,background-size .35s var(--vx-ease)}
.ft-col a:hover,.ft-bottom a:hover,.breadcrumb a:hover,.faq-a a:hover,.faq a:hover,main p a:not([class]):hover,main li a:not([class]):hover,.pole-prose a:hover,
.ft-col a:focus-visible,.ft-bottom a:focus-visible,.breadcrumb a:focus-visible,main p a:not([class]):focus-visible{color:var(--acc);background-size:100% 1px}
.pole-prose a{text-decoration:none}
html[data-theme="day"] .ft-col a:hover,html[data-theme="day"] .ft-bottom a:hover,html[data-theme="day"] .breadcrumb a:hover{color:var(--acc)}
.ft-col a{display:inline-block;transition:color .25s ease,background-size .35s var(--vx-ease),translate .25s var(--vx-ease)}
.ft-col a:hover{translate:3px 0}

/* Menu : la couleur accompagne le trait déjà présent */
.nav-links a:hover,.nav-links a:focus-visible{color:var(--acc)}
.nav-links .sub-menu a{transition:color .2s ease,background-color .2s ease,padding-left .25s var(--vx-ease)}
.nav-links .sub-menu a:hover,.nav-links .sub-menu a:focus-visible{color:var(--acc);padding-left:24px}

/* « Découvrir … → » : la flèche avance, le texte se souligne */
.teaser-more:not(.tb-cta){background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:2px;
  transition:gap .3s var(--vx-ease),background-size .35s var(--vx-ease),color .25s ease}
.teaser-more:not(.tb-cta):hover,.teaser-more:not(.tb-cta):focus-visible{background-size:100% 1px}

/* Cartes cliquables : le titre prend la couleur d'accent */
a.svc h3,a.svc h4{transition:color .25s ease}
a.svc:hover h3,a.svc:hover h4,a.svc:focus-visible h3{color:var(--acc)}

/* Enfoncement au clic (propriété `scale`, indépendante des transform existants) */
.btn:active,.nav-cta:active,.chip-link:active,.teaser-more:active,.tb-cta:active,a.svc:active,.teaser-preview:active,.contact-socials a:active,.ft-col a:active{scale:.97}
main p a:not([class]):active,.breadcrumb a:active,.ft-bottom a:active,.nav-links a:active{opacity:.7}

@media (prefers-reduced-motion: reduce){
  .ft-col a:hover{translate:none}
  .btn:active,.nav-cta:active,.chip-link:active,.teaser-more:active,.tb-cta:active,a.svc:active,.teaser-preview:active,.contact-socials a:active,.ft-col a:active{scale:1}
}