/* =====================================================================
   visuals.css — chantier « images et hero » (septembre 2026)
   Effets sur les images (survol, voile, anneau or, apparition par masque,
   flottement), profondeur des piliers et des cartes à picto, socle CSS du
   fond animé des bandeaux (hero3d.js). Animé uniquement : transform,
   opacity, clip-path. Tout est visible sans JS (les classes fy-vis-* sont
   posées par visuals.js ; html.fy-vis n'existe qu'avec JS).
   Piloté par : visuals.js, hero3d.js. Chargé après finesty.css.
   ===================================================================== */

:root {
  --fy-vis-ease: cubic-bezier(.22, .61, .36, 1);
  --fy-vis-r: 14px;
}

/* ---------------------------------------------------------------------
   1. Médias enrichis (.fy-vis-media : posée par visuals.js sur le cadre
      immédiat de l'image / vidéo / Lottie)
   --------------------------------------------------------------------- */
.fy-vis-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--fy-vis-r);
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}
.fy-vis-media > img,
.fy-vis-media > picture,
.fy-vis-media > picture > img,
.fy-vis-media > video,
.fy-vis-media > .e-lottie__container,
.fy-vis-media > svg {
  transform-origin: 50% 50%;
  transition: transform .8s var(--fy-vis-ease);
  will-change: auto;
}
/* zoom lent : sur le média lui-même ou sur son hôte (carte entière) */
.fy-vis-media:hover > img,
.fy-vis-media:hover > picture > img,
.fy-vis-media:hover > video,
.fy-vis-media:hover > .e-lottie__container,
.fy-vis-media:hover > svg,
.fy-vis-host:hover .fy-vis-media > img,
.fy-vis-host:hover .fy-vis-media > picture > img,
.fy-vis-host:focus-within .fy-vis-media > img,
.fy-vis-host:focus-within .fy-vis-media > picture > img {
  transform: scale(1.04);
}
/* voile dégradé bleu → or, révélé au survol */
.fy-vis-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(47, 87, 101, .34) 0%, rgba(47, 87, 101, 0) 46%, rgba(218, 174, 81, .28) 100%);
  opacity: 0;
  transition: opacity .8s var(--fy-vis-ease);
}
/* anneau or fin + halo, animé au survol */
.fy-vis-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid rgba(218, 174, 81, .85);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), inset 0 0 28px rgba(218, 174, 81, .18);
  opacity: 0;
  transform: scale(1.015);
  transition: opacity .6s ease, transform .8s var(--fy-vis-ease);
}
.fy-vis-media:hover::after,
.fy-vis-host:hover .fy-vis-media::after,
.fy-vis-host:focus-within .fy-vis-media::after { opacity: 1; }
.fy-vis-media:hover::before,
.fy-vis-host:hover .fy-vis-media::before,
.fy-vis-host:focus-within .fy-vis-media::before {
  opacity: 1;
  transform: scale(1);
  animation: fyVisRing 2.6s ease-in-out .6s infinite;
}
@keyframes fyVisRing {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}
/* le média conserve les éléments positionnés au-dessus du voile (chip de catégorie) */
.fy-vis-media > .fy-chip { z-index: 3; }

/* variante « nue » : illustration transparente (SVG / Lottie / vidéo sur blanc) :
   pas de voile, pas d'anneau, pas de rognage */
.fy-vis-media--plain { overflow: visible; border-radius: 0; }
.fy-vis-media--plain::before,
.fy-vis-media--plain::after { display: none; }
/* zoom un peu plus doux sur une illustration nue */
.fy-vis-media--plain:hover > img,
.fy-vis-media--plain:hover > video,
.fy-vis-media--plain:hover > .e-lottie__container,
.fy-vis-media--plain:hover > svg { transform: scale(1.03); }

/* Particuliers : l'animation « déclaration » est recentrée par translateX(7 %) (finesty.base.css) — le zoom au survol la conserve */
body.page-id-90211 .elementor-element.elementor-element-538bc87 .fy-vis-media--plain:hover > .e-lottie__container { transform: translateX(7%) scale(1.03); }

/* cadre créé par visuals.js autour d'un média isolé (sections illustration + texte, accueil) */
.fy-vis-wrap { display: block; width: 100%; max-width: 100%; margin: 0 auto; }
.fy-vis-wrap > img, .fy-vis-wrap > video, .fy-vis-wrap > .e-lottie__container { max-width: 100% !important; }

/* cartes du blog : le cadre suit les coins hauts de la carte (le corps blanc reste collé au bas) */
.fy-post-card__media.fy-vis-media { --fy-vis-r: 14px 14px 0 0; border-radius: 14px 14px 0 0; }
/* la carte entière est l'hôte du survol ; le zoom déjà prévu par article.css est repris ici (0,8 s) */
.fy-vis-host.fy-post-card .fy-post-card__media img { transition: transform .8s var(--fy-vis-ease); }
/* photo de l'équipe : l'ombre existante est conservée, halo or discret au survol */
.fy-about-person__photo.fy-vis-media { transition: box-shadow .6s ease; }
.fy-about-person__photo.fy-vis-media:hover { box-shadow: 0 10px 30px rgba(47, 87, 101, .10), 0 0 0 4px rgba(218, 174, 81, .18); }

/* ---------------------------------------------------------------------
   2. Effet « tilt » 3D léger (JS : perspective + rotation ≤ 6°, souris seule)
   --------------------------------------------------------------------- */
html.fy-vis .fy-vis-tilt {
  transform-style: preserve-3d;
  will-change: auto;
}
html.fy-vis .fy-vis-tilt.is-tilting {
  transition: transform .12s ease-out, box-shadow .25s ease;
  will-change: transform;
}
html.fy-vis .fy-vis-tilt.is-tilt-leaving { transition: transform .7s var(--fy-vis-ease), box-shadow .5s ease; }

/* ---------------------------------------------------------------------
   3. Apparition par masque au défilement (clip-path inset → 0)
      Le masque n'est appliqué qu'avec JS (html.fy-vis) : sans JS tout est visible.
   --------------------------------------------------------------------- */
html.fy-vis .fy-vis-media[data-fy-vis-reveal] {
  transition: clip-path 1s var(--fy-vis-ease), opacity .7s ease;
}
html.fy-vis .fy-vis-media[data-fy-vis-reveal]:not(.is-in) {
  clip-path: inset(16% 12% 16% 12% round var(--fy-vis-r));
  opacity: 0;
}
html.fy-vis .fy-vis-media[data-fy-vis-reveal].is-in {
  clip-path: inset(0 round var(--fy-vis-r));
  opacity: 1;
}
html.fy-vis .fy-vis-media--plain[data-fy-vis-reveal]:not(.is-in) { clip-path: inset(16% 12% 16% 12%); }
html.fy-vis .fy-vis-media--plain[data-fy-vis-reveal].is-in { clip-path: inset(0); }
/* une fois révélé et la transition terminée, le masque est retiré (JS : classe is-settled) */
html.fy-vis .fy-vis-media[data-fy-vis-reveal].is-settled { clip-path: none; transition: none; }

/* ---------------------------------------------------------------------
   4. Flottement doux des illustrations SVG / Lottie / vidéo (±6 px, 6 s)
   --------------------------------------------------------------------- */
@keyframes fyVisFloat {
  0%, 100% { transform: translateY(6px); }
  50% { transform: translateY(-6px); }
}
html.fy-vis .fy-vis-float.is-in {
  animation: fyVisFloat 6s ease-in-out infinite;
}
/* arrêt hors écran (JS : is-offscreen) et onglet caché */
html.fy-vis .fy-vis-float.is-offscreen { animation-play-state: paused; }
html.fy-vis-hidden .fy-vis-float { animation-play-state: paused; }

/* ---------------------------------------------------------------------
   5. Sections « Contactez-nous » sur image de fond : l'image est déplacée par
      visuals.js sur un calque .fy-vis-bg (zoom lent au survol, voile) sous le
      voile Elementor (::before) et le contenu
   --------------------------------------------------------------------- */
.fy-vis-bghost {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-image: none !important;
}
.fy-vis-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(1.001);
  transform-origin: 50% 50%;
  transition: transform 1.4s var(--fy-vis-ease);
}
.fy-vis-bghost:hover .fy-vis-bg { transform: scale(1.04); }
.fy-vis-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(36, 69, 79, .45) 0%, rgba(36, 69, 79, 0) 55%, rgba(218, 174, 81, .22) 100%);
  opacity: 0;
  transition: opacity 1s var(--fy-vis-ease);
}
.fy-vis-bghost:hover .fy-vis-bg::after { opacity: 1; }
/* apparition : le calque image se dévoile depuis le centre */
html.fy-vis .fy-vis-bg[data-fy-vis-reveal] { transition: transform 1.4s var(--fy-vis-ease), clip-path 1.1s var(--fy-vis-ease), opacity .8s ease; }
html.fy-vis .fy-vis-bg[data-fy-vis-reveal]:not(.is-in) { clip-path: inset(18% 10%); opacity: 0; }
html.fy-vis .fy-vis-bg[data-fy-vis-reveal].is-in { clip-path: inset(0); opacity: 1; }
html.fy-vis .fy-vis-bg[data-fy-vis-reveal].is-settled { clip-path: none; }

/* ---------------------------------------------------------------------
   6. Piliers (Pour entreprises) et cartes à picto (Salaires, etc.) : profondeur
      au survol, picto qui réagit
   --------------------------------------------------------------------- */
.fy-pillars__shaft { transition: transform .35s var(--fy-vis-ease), box-shadow .35s ease; }
.fy-pillars__icon { transition: transform .4s var(--fy-vis-ease), box-shadow .4s ease; }
.fy-pillars__icon img, .fy-pillars__icon .fy-pillars__fa { transition: transform .4s var(--fy-vis-ease); }
html.fy-vis .fy-pillars__pillar:hover .fy-pillars__shaft {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(47, 87, 101, .16);
}
html.fy-vis .fy-pillars__pillar--accent:hover .fy-pillars__shaft {
  box-shadow: 0 22px 44px rgba(218, 174, 81, .40);
}
html.fy-vis .fy-pillars__pillar:hover .fy-pillars__icon {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 0 0 5px rgba(218, 174, 81, .22), 0 10px 22px rgba(47, 87, 101, .16);
}
html.fy-vis .fy-pillars__pillar--accent:hover .fy-pillars__icon {
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .35), 0 10px 22px rgba(160, 120, 30, .30);
}
html.fy-vis .fy-pillars__pillar:hover .fy-pillars__icon img,
html.fy-vis .fy-pillars__pillar:hover .fy-pillars__icon .fy-pillars__fa { transform: rotate(-6deg) scale(1.08); }

.fy-card--icon { transition: transform .3s var(--fy-vis-ease), box-shadow .3s ease; }
.fy-card--icon .fy-card__icon { transition: transform .4s var(--fy-vis-ease), background-color .4s ease, color .4s ease, box-shadow .4s ease; }
.fy-card--icon .fy-card__icon i, .fy-card--icon .fy-card__icon img, .fy-card--icon .fy-card__icon svg { transition: transform .4s var(--fy-vis-ease); }
html.fy-vis .fy-card--icon:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 44px rgba(31, 42, 46, .18);
}
html.fy-vis .fy-card--icon:hover .fy-card__icon {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 0 0 5px rgba(218, 174, 81, .18);
}
html.fy-vis .fy-card--icon:hover .fy-card__icon i,
html.fy-vis .fy-card--icon:hover .fy-card__icon img,
html.fy-vis .fy-card--icon:hover .fy-card__icon svg { transform: rotate(-6deg) scale(1.1); }
/* sur fond bleu (Salaires), le picto passe à l'or au survol */
html.fy-vis .fy-section--blue .fy-card--icon:hover .fy-card__icon { background: rgba(218, 174, 81, .16); color: #C1963E; }

/* ---------------------------------------------------------------------
   7. Bandeaux (heros) : socle du fond animé (hero3d.js)
      Le conteneur reçoit .fy-hero3d-host ; le canvas est absolu, sous le contenu.
   --------------------------------------------------------------------- */
.fy-hero3d-host {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.fy-hero3d-host > .e-con-inner,
.fy-hero3d-host > .fy-hero-sub,
.fy-hero3d-host > .elementor-widget { position: relative; z-index: 2; }
.fy-hero3d-canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease;
  display: block;
}
.fy-hero3d-canvas.is-ready { opacity: 1; }
/* lueurs douces (toujours présentes : ambiance de base + repli sans WebGL) : deux halos
   radiaux déplacés par transform, très lentement */
.fy-hero3d-glow {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  width: 62vw; height: 62vw;
  max-width: 900px; max-height: 900px;
  min-width: 360px; min-height: 360px;
  left: -14%; top: -40%;
  background: radial-gradient(circle at 50% 50%, rgba(218, 174, 81, .16) 0%, rgba(218, 174, 81, .06) 32%, rgba(218, 174, 81, 0) 66%);
  animation: fyHeroGlowA 34s ease-in-out infinite alternate;
}
.fy-hero3d-glow--b {
  left: auto; right: -18%; top: auto; bottom: -55%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .05) 34%, rgba(255, 255, 255, 0) 66%);
  animation: fyHeroGlowB 42s ease-in-out infinite alternate;
}
@keyframes fyHeroGlowA {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(14vw, 10vh, 0) scale(1.18); }
}
@keyframes fyHeroGlowB {
  0% { transform: translate3d(0, 0, 0) scale(1.1); }
  100% { transform: translate3d(-12vw, -14vh, 0) scale(.92); }
}
/* repli sans WebGL / données économisées : les lueurs sont un peu plus marquées */
.fy-hero3d-host.fy-hero3d--css .fy-hero3d-glow { opacity: 1.35; }
/* onglet caché : pause */
html.fy-vis-hidden .fy-hero3d-glow { animation-play-state: paused; }

/* ---------------------------------------------------------------------
   8. Mouvement réduit : tout visible, aucune animation
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fy-vis-media > img, .fy-vis-media > picture > img, .fy-vis-media > video, .fy-vis-media > .e-lottie__container, .fy-vis-media > svg,
  .fy-vis-media::before, .fy-vis-media::after, .fy-vis-bg, .fy-vis-bg::after,
  .fy-pillars__shaft, .fy-pillars__icon, .fy-pillars__icon img, .fy-pillars__icon .fy-pillars__fa,
  .fy-card--icon, .fy-card--icon .fy-card__icon, .fy-card--icon .fy-card__icon i,
  .fy-hero3d-canvas, .fy-about-person__photo.fy-vis-media { transition: none !important; animation: none !important; }
  .fy-vis-media:hover > img, .fy-vis-media:hover > picture > img, .fy-vis-media:hover > video, .fy-vis-media:hover > .e-lottie__container, .fy-vis-media:hover > svg,
  .fy-vis-host:hover .fy-vis-media > img, .fy-vis-host:hover .fy-vis-media > picture > img,
  .fy-vis-bghost:hover .fy-vis-bg,
  html.fy-vis .fy-pillars__pillar:hover .fy-pillars__shaft, html.fy-vis .fy-pillars__pillar:hover .fy-pillars__icon,
  html.fy-vis .fy-pillars__pillar:hover .fy-pillars__icon img, html.fy-vis .fy-pillars__pillar:hover .fy-pillars__icon .fy-pillars__fa,
  html.fy-vis .fy-card--icon:hover, html.fy-vis .fy-card--icon:hover .fy-card__icon, html.fy-vis .fy-card--icon:hover .fy-card__icon i { transform: none !important; }
  html.fy-vis .fy-vis-media[data-fy-vis-reveal], html.fy-vis .fy-vis-bg[data-fy-vis-reveal] { clip-path: none !important; opacity: 1 !important; transition: none !important; }
  html.fy-vis .fy-vis-float.is-in { animation: none !important; }
  .fy-hero3d-glow { animation: none !important; }
  .fy-hero3d-canvas { display: none !important; }
}