/* =====================================================================
   Finesty — bandeaux (hero.css). Conteneur .fy-hero (posé par source-live/appliquer-hero.py) :
   photo en bichromie bleue (.fy-hero-media), voile dégradé + grain (.fy-hero-veil), contenu au-dessus.
   Emblème « F » en SVG animé (.fy-emblem) ; logo de l'accueil avec reflet or (.fy-logo-anim).
   Animations déclenchées par hero.js (classe .is-play) ; sans JS, tout est affiché dans son état final.
   ===================================================================== */

.fy-hero:is(#fyh, .fy-hero) { position: relative; overflow: hidden; isolation: isolate; background-color: #1B3740 !important; background-image: none !important; }
.fy-hero > .e-con-inner, .fy-hero > .elementor-widget, .fy-hero > .fy-hero-sub, .fy-hero > .fy-article-head { position: relative; z-index: 2; }

/* photo : légèrement plus haute que le bandeau (marge pour la parallaxe de motion.js) */
.fy-hero-media { position: absolute; left: 0; right: 0; top: -8%; bottom: -8%; z-index: 0; pointer-events: none; will-change: transform; }
.fy-hero-media img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; max-width: none !important;
  transform-origin: 50% 45%; border-radius: 0 !important;
}
.fy-hero.is-play .fy-hero-media img { animation: fyHeroZoom 2.6s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes fyHeroZoom { from { transform: scale(1.14); opacity: 0; } 30% { opacity: 1; } to { transform: scale(1.02); opacity: 1; } }

/* voile : lisibilité du texte blanc, haut plus sombre (en-tête transparent), lueur or discrète, grain photo */
.fy-hero-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(60% 80% at 88% 8%, rgba(218, 174, 81, 0.20) 0%, rgba(218, 174, 81, 0) 60%),
    radial-gradient(70% 90% at 8% 100%, rgba(47, 87, 101, 0.55) 0%, rgba(47, 87, 101, 0) 70%),
    linear-gradient(180deg, rgba(17, 38, 46, 0.72) 0%, rgba(22, 48, 57, 0.46) 38%, rgba(22, 48, 57, 0.58) 70%, rgba(17, 38, 46, 0.86) 100%);
}
.fy-hero-veil::after {
  content: ""; position: absolute; inset: 0; opacity: .55;
  background: url("/wp-content/finesty/hero/grain.png") repeat; background-size: 140px 140px;   /* grain photo précalculé (léger, sans filtre) */
}
/* fin trait or en bas du bandeau, dessiné au chargement */
.fy-hero-veil::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; transform-origin: left center;
  background: linear-gradient(90deg, rgba(218, 174, 81, 0) 0%, #DAAE51 30%, #DAAE51 70%, rgba(218, 174, 81, 0) 100%); opacity: .85;
}
.fy-hero.is-play .fy-hero-veil::before { animation: fyHeroLine 1.4s cubic-bezier(.65, 0, .35, 1) .5s both; }
@keyframes fyHeroLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------------------------------------------------------------------
   Emblème « F » (SVG) — anneau tracé, F qui monte, trapèze or qui glisse, reflet or qui tourne autour de l'anneau
   --------------------------------------------------------------------- */
.fy-hero .elementor-widget-image .elementor-widget-container { line-height: 0; }
.fy-emblem { display: block; width: 96px; height: 96px; margin: 0 auto; overflow: visible; }
.fy-emblem__ring { fill: none; stroke: #FFFFFF; stroke-width: 13; stroke-dasharray: 1; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 125px 125px; }
.fy-emblem__orbit { fill: none; stroke: #F4C01A; stroke-width: 13; stroke-linecap: round; stroke-dasharray: 7 93; opacity: 0; transform-origin: 125px 125px; }
.fy-emblem__f { fill: #FFFFFF; transform-box: fill-box; transform-origin: 50% 100%; }
.fy-emblem__gold { fill: #F4C01A; transform-box: fill-box; transform-origin: 0% 100%; }
.fy-emblem.is-play .fy-emblem__ring { animation: fyRing 1.3s cubic-bezier(.65, 0, .35, 1) .15s both; }
.fy-emblem.is-play .fy-emblem__f { animation: fyF .8s cubic-bezier(.22, .61, .36, 1) .7s both; }
.fy-emblem.is-play .fy-emblem__gold { animation: fyGold .75s cubic-bezier(.34, 1.56, .64, 1) 1.1s both; }
.fy-emblem.is-play .fy-emblem__orbit { animation: fyOrbitIn .6s ease 1.7s forwards, fyOrbit 9s linear 1.7s infinite; }
@keyframes fyRing { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fyF { from { opacity: 0; transform: translateY(18px) scaleY(.6); } to { opacity: 1; transform: none; } }
@keyframes fyGold { from { opacity: 0; transform: translateX(-34px) skewX(-8deg); } to { opacity: 1; transform: none; } }
@keyframes fyOrbitIn { to { opacity: .95; } }
@keyframes fyOrbit { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
.fy-hero.is-paused .fy-emblem__orbit, .fy-hero.is-paused .fy-logo-anim__shine { animation-play-state: paused !important; }
@media (max-width: 767px) { .fy-emblem { width: 72px; height: 72px; } }

/* ---------------------------------------------------------------------
   Logo de l'accueil : reflet or qui balaie le logo toutes les 7 s
   --------------------------------------------------------------------- */
.fy-logo-anim { position: relative; display: block; line-height: 0; max-width: 100%; margin: 0 auto; width: 25%; }
.fy-logo-anim > img { display: block; width: 100% !important; height: auto; }
@media (max-width: 767px) { .fy-logo-anim { width: 50%; } }
.fy-logo-anim__shine {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, rgba(244, 192, 26, 0) 38%, rgba(255, 226, 150, 0.95) 50%, rgba(244, 192, 26, 0) 62%) no-repeat;
  background-size: 260% 100%; background-position: 130% 0;
  -webkit-mask: url("/wp-content/uploads/2024/08/logo-finesty-white.webp") center / 100% 100% no-repeat;
          mask: url("/wp-content/uploads/2024/08/logo-finesty-white.webp") center / 100% 100% no-repeat;
}
.fy-logo-anim.is-play .fy-logo-anim__shine { animation: fyShine 7s cubic-bezier(.45, 0, .2, 1) 1.2s infinite; }
@keyframes fyShine { 0% { background-position: 130% 0; } 28%, 100% { background-position: -30% 0; } }

/* Accueil : le bandeau plein écran reçoit la photo ; la section est déjà centrée */
body.home .fy-hero:is(#fyh, .fy-hero) { background-color: #1B3740 !important; }

/* FAQ : la barre de catégories prolonge le bandeau (même bleu nuit que le bas du voile) */
.fy-faq-chips { background: #152F37 !important; }

/* ---------------------------------------------------------------------
   Bandes d'appel (.fy-cta-band--img, appliquer-bandes.py) : photo en position fixe vue à travers le cadre arrondi
   (le cadre défile, la photo reste immobile), voile bleu nuit, lueur or d'origine supprimée.
   clip-path découpe aussi les descendants en position fixe (contrairement à overflow).
   --------------------------------------------------------------------- */
.fy-cta-band.fy-cta-band--img:is(#fyc, .fy-cta-band) {
  position: relative; isolation: isolate; overflow: visible; background: #16313A !important;
  -webkit-clip-path: inset(0); clip-path: inset(0); border-radius: 0 !important; box-shadow: none !important;
  padding-top: clamp(72px, 9vw, 128px); padding-bottom: clamp(72px, 9vw, 128px);
  /* pleine largeur d'écran, bord à bord, quel que soit le conteneur parent ; le contenu reste centré */
  width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
  padding-left: max(20px, calc((100vw - 1200px) / 2)) !important; padding-right: max(20px, calc((100vw - 1200px) / 2)) !important;
  align-self: center;
}
html, body { overflow-x: clip; }
.fy-cta-band.fy-cta-band--img::before, .fy-cta-band.fy-cta-band--img::after { display: none !important; content: none !important; }
.fy-cta-band__media { position: fixed; inset: 0; z-index: -2; pointer-events: none; }
.fy-cta-band__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; max-width: none !important; border-radius: 0 !important; }
/* Le voile déborde de 2 px en haut et en bas : la bande a une hauteur fractionnaire et son clip-path lisse le
   dernier rang de pixels. Avec un voile calé sur le même bord, ce rang ne recevait qu'une fraction du voile et
   laissait passer la photo — un trait clair d'un bord à l'autre, juste au-dessus du bloc de contact. Le
   débordement est redécoupé par le clip-path de la bande : rien ne dépasse. */
.fy-cta-band__veil {
  position: absolute; inset: -2px 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(90% 120% at 50% 110%, rgba(13, 32, 39, 0.55) 0%, rgba(13, 32, 39, 0) 60%),
    linear-gradient(180deg, rgba(18, 41, 49, 0.70) 0%, rgba(22, 48, 57, 0.55) 50%, rgba(15, 35, 42, 0.82) 100%);
}
.fy-cta-band__veil::after {      /* grain photo, fin liseré intérieur */
  content: ""; position: absolute; inset: 0; opacity: .5;
  background: url("/wp-content/finesty/hero/grain.png") repeat; background-size: 140px 140px;
}
.fy-cta-band--img .fy-cta-band__title { font-size: clamp(26px, 3vw, 40px) !important; line-height: 1.15; letter-spacing: -.01em; }
.fy-cta-band--img .fy-cta-band__text { color: rgba(255, 255, 255, 0.86) !important; max-width: 640px; margin-left: auto; margin-right: auto; }
.fy-cta-band--row.fy-cta-band--img .fy-cta-band__text { margin-left: 0; }
@media (max-width: 767px) {
  .fy-cta-band.fy-cta-band--img:is(#fyc, .fy-cta-band) { padding-top: 64px; padding-bottom: 64px; padding-left: 22px !important; padding-right: 22px !important; }
}

/* ---------------------------------------------------------------------
   Mouvement réduit : aucune animation, tout dans l'état final
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fy-hero.is-play .fy-hero-media img, .fy-hero.is-play .fy-hero-veil::before,
  .fy-emblem.is-play .fy-emblem__ring, .fy-emblem.is-play .fy-emblem__f, .fy-emblem.is-play .fy-emblem__gold,
  .fy-emblem.is-play .fy-emblem__orbit, .fy-logo-anim.is-play .fy-logo-anim__shine { animation: none !important; }
  .fy-emblem__orbit { opacity: 0 !important; }
}

/* ---------------------------------------------------------------------
   Bande d'appel en version or (.fy-cta-band--gold, appliquer-bandes.py → GOLD) : la photo reste visible, teintée or
   (fusion « produit » sur le fond or), textes foncés, boutons foncés pour garder le contraste.
   --------------------------------------------------------------------- */
.fy-cta-band.fy-cta-band--gold:is(#fyc, .fy-cta-band) { background: #D9AC4E !important; }
.fy-cta-band--gold .fy-cta-band__media img { filter: grayscale(1) contrast(1.15) brightness(1.05); mix-blend-mode: multiply; opacity: .5; }
.fy-cta-band--gold .fy-cta-band__veil {
  background: radial-gradient(80% 110% at 50% 50%, rgba(232, 193, 106, 0.55) 0%, rgba(232, 193, 106, 0) 70%),
              linear-gradient(180deg, rgba(222, 178, 86, 0.55) 0%, rgba(214, 168, 72, 0.35) 50%, rgba(201, 154, 58, 0.6) 100%) !important;
}
.fy-cta-band--gold .fy-cta-band__veil::after { opacity: .3; mix-blend-mode: multiply; }
.fy-cta-band--gold, .fy-cta-band--gold .fy-cta-band__title, .fy-cta-band--gold h2, .fy-cta-band--gold h3 { color: #1F2A2E !important; }
.fy-cta-band--gold .fy-cta-band__title .fy-gold, .fy-cta-band--gold .fy-gold { color: #FFFFFF !important; }
.fy-cta-band--gold .fy-cta-band__text, .fy-cta-band--gold p { color: rgba(31, 42, 46, 0.86) !important; }
.fy-cta-band--gold a:not(.fy-b) { color: #1F2A2E !important; text-decoration-color: rgba(31, 42, 46, 0.5) !important; }
.fy-cta-band--gold { --acc-a: #1F2A2E; --acc-b: #FFFFFF; }
/* boutons : plein bleu nuit (survol blanc) et contour foncé (survol bleu nuit) */
.fy-cta-band--gold .fy-b:is(#fyb, .fy-b).fy-b--gold, .fy-cta-band--gold .fy-b:is(#fyb, .fy-b).fy-b--dark {
  --b-bg: #1F3A43; --b-fg: #FFFFFF; --b-chip: #DAAE51; --b-chip-fg: #1F2A2E; --b-fill: #FFFFFF; --b-fg-h: #1F3A43; --b-shadow-h: 0 14px 30px rgba(31, 42, 46, 0.3); --b-focus: #1F2A2E;
}
.fy-cta-band--gold .fy-b:is(#fyb, .fy-b).fy-b--line-light, .fy-cta-band--gold .fy-b:is(#fyb, .fy-b).fy-b--line {
  --b-bg: transparent; --b-fg: #1F2A2E; --b-ring: inset 0 0 0 2px #1F2A2E; --b-chip: #1F2A2E; --b-chip-fg: #FFFFFF; --b-fill: #1F2A2E; --b-fg-h: #FFFFFF; --b-shadow-h: 0 0 0 0 transparent; --b-focus: #1F2A2E;
}
.fy-cta-band--gold .fy-b:is(#fyb, .fy-b):is(:hover, :focus-visible).fy-b--gold, .fy-cta-band--gold .fy-b:is(#fyb, .fy-b):is(:hover, :focus-visible).fy-b--dark { --b-chip: #1F3A43; --b-chip-fg: #DAAE51; }
.fy-cta-band--gold .fy-b:is(#fyb, .fy-b):is(:hover, :focus-visible).fy-b--line-light, .fy-cta-band--gold .fy-b:is(#fyb, .fy-b):is(:hover, :focus-visible).fy-b--line { --b-ring: inset 0 0 0 2px #1F2A2E; --b-chip: #DAAE51; --b-chip-fg: #1F2A2E; }

/* Accueil : logo + titre centrés sur tout l'écran (l'en-tête est transparent au-dessus de la photo : on ne réserve
   plus sa hauteur en haut), avec un léger décalage vers le haut (centre optique). Ordinateur et mobile. */
body.home .elementor-element.elementor-element-d038335.fy-hero:is(#fyh, .fy-hero) { padding-top: 0 !important; --padding-top: 0px !important; }
body.home .elementor-element.elementor-element-d038335.fy-hero > .e-con-inner { padding-bottom: clamp(32px, 6vh, 64px) !important; }
@media (max-width: 767px) { body.home .elementor-element.elementor-element-d038335.fy-hero > .e-con-inner { padding-bottom: 112px !important; } }
.fy-cta-band--gold .fy-cta-band__media { mix-blend-mode: multiply; }
.fy-cta-band--gold .fy-cta-band__media img { mix-blend-mode: normal; opacity: .55; }
/* bande or : le bas du voile a la même teinte que le haut de l'introduction fusionnée (raccord invisible) */
.fy-cta-band--gold .fy-cta-band__veil { background: radial-gradient(80% 110% at 50% 50%, rgba(232, 193, 106, 0.4) 0%, rgba(232, 193, 106, 0) 70%), linear-gradient(180deg, rgba(222, 178, 86, 0.5) 0%, rgba(214, 168, 72, 0.38) 50%, rgba(222, 178, 86, 0.5) 100%) !important; }
.fy-cta-band--gold .fy-cta-band__veil::after { display: none; }

/* FAQ : bandeau plus haut, vrai bouton sous l'introduction (appliquer-faq-hero.py) */
.fy-hero:is(#fyh, .fy-hero):has(.fy-hero-actions--faq) { min-height: clamp(460px, 62vh, 620px); padding-top: clamp(150px, 16vh, 190px) !important; padding-bottom: clamp(80px, 11vh, 120px) !important; }
.fy-hero .fy-hero-actions--faq { position: relative; z-index: 2; display: flex; justify-content: center; margin-top: 32px; }
@media (max-width: 767px) { .fy-hero:is(#fyh, .fy-hero):has(.fy-hero-actions--faq) { min-height: 0; padding-top: 130px !important; padding-bottom: 64px !important; } .fy-hero .fy-hero-actions--faq { margin-top: 24px; } }

/* =====================================================================
   Accueil — entrée du logo et du titre (inspiration ReactBits : BlurText / ShinyText)
   Logo : « tracé lumineux » — une lueur or balaie le logo de gauche à droite et le peint au passage
   (masque dégradé animé sur l'image + reflet or synchronisé sur le bord du dévoilement), halo or qui se résorbe,
   léger zoom qui se pose. Puis reflet or toutes les 7 s.
   Titre : chaque mot monte, flou → net, en cascade ; « allié » reçoit un reflet or en boucle lente.
   Sans JS : tout est dans l'état final.
   ===================================================================== */
body.home .fy-hero .fy-logo-anim { filter: drop-shadow(0 18px 40px rgba(8, 24, 30, 0.45)); }
body.home .fy-hero .fy-logo-anim > img {
  -webkit-mask: linear-gradient(90deg, #000 0%, #000 42%, rgba(0,0,0,0) 58%) no-repeat; mask: linear-gradient(90deg, #000 0%, #000 42%, rgba(0,0,0,0) 58%) no-repeat;
  -webkit-mask-size: 250% 100%; mask-size: 250% 100%; -webkit-mask-position: 0 0; mask-position: 0 0;
}
body.home .fy-hero.is-play .fy-logo-anim { animation: fyLogoHalo 2.4s cubic-bezier(.16, 1, .3, 1) .1s both; }
body.home .fy-hero.is-play .fy-logo-anim > img { animation: fyLogoPaint 1.6s cubic-bezier(.6, 0, .25, 1) .1s both, fyLogoSettle 1.9s cubic-bezier(.16, 1, .3, 1) .1s both; }
/* bord lumineux du tracé (pseudo-élément masqué par le logo) : même position que le masque de l'image,
   le pic du dégradé est sur le bord du dévoilement ; le reflet discret périodique (.fy-logo-anim__shine) reste inchangé */
body.home .fy-logo-anim::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(255, 226, 150, 0) 36%, rgba(255, 236, 190, 1) 48%, rgba(244, 192, 26, .95) 52%, rgba(244, 192, 26, 0) 62%) no-repeat;
  background-size: 250% 100%; background-position: 100% 0;
  -webkit-mask: url("/wp-content/uploads/2024/08/logo-finesty-white.webp") center / 100% 100% no-repeat;
          mask: url("/wp-content/uploads/2024/08/logo-finesty-white.webp") center / 100% 100% no-repeat;
}
body.home .fy-hero.is-play .fy-logo-anim::after { animation: fyLogoEdge 1.6s cubic-bezier(.6, 0, .25, 1) .1s both; }
body.home .fy-logo-anim.is-play .fy-logo-anim__shine { animation: fyShine 7s cubic-bezier(.45, 0, .2, 1) 3.4s infinite; }
@keyframes fyLogoPaint { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes fyLogoEdge  { from { opacity: 1; background-position: 100% 0; } 85% { opacity: 1; } to { opacity: 0; background-position: -40% 0; } }
@keyframes fyLogoSettle { from { transform: scale(1.1) translateY(10px); } to { transform: none; } }
@keyframes fyLogoHalo {
  from { filter: drop-shadow(0 0 0 rgba(244, 192, 26, 0)); }
  45%  { filter: drop-shadow(0 0 28px rgba(244, 192, 26, .55)); }
  to   { filter: drop-shadow(0 18px 40px rgba(8, 24, 30, 0.45)); }
}

/* titre découpé en mots */
body.home .fy-hero .elementor-element-29d5fd2 > .elementor-widget-container { margin-top: 30px; }
body.home .fy-hero h1.elementor-heading-title { letter-spacing: -.012em; text-wrap: balance; }
body.home .fy-hero .fy-w { display: inline-block; white-space: pre; will-change: transform, filter, opacity; }
body.home .fy-hero.fy-split-ready:not(.is-play) .fy-w, body.home .fy-hero.fy-split-ready:not(.is-play) .fy-logo-anim { opacity: 0; }
body.home .fy-hero.is-play .fy-w { animation: fyWordIn 1s cubic-bezier(.16, 1, .3, 1) calc(1.15s + var(--i, 0) * .11s) both; }
@keyframes fyWordIn {
  from { opacity: 0; transform: translateY(.55em) rotate(1.5deg); filter: blur(12px); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
/* mot clé : reflet or (ShinyText) — première passe après l'entrée puis en boucle lente */
body.home .fy-hero .fy-w--key { position: relative; }
body.home .fy-hero .fy-w--key .fy-w__shine {
  position: absolute; inset: 0; pointer-events: none; color: transparent;
  background: linear-gradient(105deg, rgba(255, 226, 150, 0) 40%, rgba(255, 226, 150, .95) 50%, rgba(255, 226, 150, 0) 60%) no-repeat;
  background-size: 250% 100%; background-position: 130% 0;
  -webkit-background-clip: text; background-clip: text;
}
body.home .fy-hero .fy-w--key .fy-w__shine::before { content: attr(data-w); }
body.home .fy-hero.is-play .fy-w--key .fy-w__shine { animation: fyShine 7s cubic-bezier(.45, 0, .2, 1) 2.6s infinite; }
body.home .fy-hero.is-paused .fy-w__shine { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  body.home .fy-hero.is-play .fy-logo-anim, body.home .fy-hero.is-play .fy-logo-anim > img, body.home .fy-hero.is-play .fy-logo-anim::after,
  body.home .fy-hero.is-play .fy-w, body.home .fy-hero.is-play .fy-w--key .fy-w__shine { animation: none !important; }
  body.home .fy-hero .fy-w { opacity: 1 !important; }
}

/* Signature (15.09.2026) — pages intérieures uniquement (l'accueil garde son bandeau d'origine) : voile sans lueur or */
body:not(.home) .fy-hero-veil {
  background:
    radial-gradient(70% 90% at 8% 100%, rgba(47, 87, 101, 0.55) 0%, rgba(47, 87, 101, 0) 70%),
    linear-gradient(180deg, rgba(17, 38, 46, 0.72) 0%, rgba(22, 48, 57, 0.46) 38%, rgba(22, 48, 57, 0.58) 70%, rgba(17, 38, 46, 0.86) 100%);
}

/* Accueil, mobile : centrage vertical réel du logo + titre.
   Elementor pose 50 px de marge au-dessus du logo (style en ligne, ≤767 px) : cet espace vide compte
   dans le bloc centré et décalait l'ensemble de 25 px vers le bas. On l'annule, le duo logo/titre
   retrouve le centre exact du bandeau plein écran. */
@media (max-width: 767px) {
  body.home .fy-hero .elementor-element-5824a10 > .elementor-widget-container { margin-top: 0 !important; }
}