/**
 * WeFrame Shared CSS v7.0
 * Keyframes + structural rules shared across all element instances.
 * Loaded once, cached by browser — replaces per-instance @keyframes.
 */

/* ── Infinite scroll (logo-slider, image-slider, testimonial-slider, marquee-text) ── */
@keyframes wf-scroll-fwd { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes wf-scroll-rev { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ── Universal animations ── */
@keyframes wf-spin      { to { transform: rotate(360deg); } }
@keyframes wf-pulse     { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes wf-sep-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(.55); } }
@keyframes wf-blink     { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes wf-fade-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes wf-fade-up   { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes wf-fade-down { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes wf-shake     { 10%,90%{transform:translateX(-1px)} 20%,80%{transform:translateX(2px)} 30%,50%,70%{transform:translateX(-4px)} 40%,60%{transform:translateX(4px)} }
@keyframes wf-bounce    { 0%,20%,50%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-8px)} 60%{transform:translateY(-4px)} }
@keyframes wf-ring-pulse{ 0%{box-shadow:0 0 0 0 rgba(234,92,28,.5)} 70%{box-shadow:0 0 0 12px rgba(234,92,28,0)} 100%{box-shadow:0 0 0 0 rgba(234,92,28,0)} }
@keyframes wf-flame     { 0%,100%{transform:scale(1) rotate(-2deg)} 50%{transform:scale(1.1) rotate(2deg)} }

/* Re-usable helper classes */
.wf-spin      { animation: wf-spin      1s linear infinite; }
.wf-pulse     { animation: wf-pulse     1.2s ease-in-out infinite; }
.wf-blink     { animation: wf-blink     0.75s step-end infinite; }
.wf-fade-in   { animation: wf-fade-in   0.4s ease both; }
.wf-fade-up   { animation: wf-fade-up   0.5s cubic-bezier(.22,.9,.32,1) both; }
.wf-ring-pulse{ animation: wf-ring-pulse 1.8s ease-out infinite; }
.wf-flame     { animation: wf-flame     1.3s ease-in-out infinite; display:inline-block; transform-origin:50% 90%; }

/* ── Accessibility: respect reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .wf-spin, .wf-pulse, .wf-blink, .wf-fade-in, .wf-fade-up,
    .wf-ring-pulse, .wf-flame,
    [class*="wf-scroll"], [class*="wfmq_"] {
        animation: none !important;
        transition: none !important;
    }
    *[style*="wf-scroll-fwd"], *[style*="wf-scroll-rev"] {
        animation: none !important;
    }
}

/* ── Utility — focus ring for a11y on interactive WF buttons ── */
.wf-btn:focus-visible,
[class^="wf-"] button:focus-visible,
[class^="wf-"] a:focus-visible {
    outline: 2px solid #EA5C1C;
    outline-offset: 2px;
}

/* ──────────────────────────────────────────────────────────────
 * Baseline UX (règles WeFrame appliquées partout, scopées "wf-")
 * — focus visible élargi, cursor, cibles tactiles ≥44px (mobile-first).
 * Ne touche ni le thème ni le desktop (min-height uniquement en tactile).
 * ────────────────────────────────────────────────────────────── */
[class*="wf-"] :focus-visible {
    outline: 2px solid #EA5C1C;
    outline-offset: 2px;
    border-radius: 4px;
}
[class*="wf-"] button,
[class*="wf-"] a[class*="btn"],
[class*="wf-"] a[class*="cta"],
[class*="wf-"] [role="button"] {
    cursor: pointer;
}
@media (pointer: coarse) {
    [class*="wf-"] button,
    [class*="wf-"] a[class*="btn"],
    [class*="wf-"] a[class*="cta"],
    [class*="wf-"] [role="button"],
    [class*="wf-"] input[type="submit"],
    [class*="wf-"] input[type="button"] {
        min-height: 44px;
    }
}

/* ──────────────────────────────────────────────────────────────
 * Reduced motion — filet global pour TOUS les éléments WeFrame.
 * Couvre les animations/transitions CSS de chaque élément, même
 * ceux dont le template n'a pas sa propre règle.
 * Durée quasi nulle (et non "none") pour ne pas casser le JS qui
 * attend un animationend/transitionend.
 * ────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    [class*="wf-"],
    [class*="wf-"] *,
    [class*="wf-"] *::before,
    [class*="wf-"] *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0ms !important;
        transition-duration: 1ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }
}

/* ------------------------------------------------------------------
   Sections WeFrame : fonds animés et animations au défilement.
   Ces @keyframes sont ici et pas dans le champ CSS d'une section :
   le préfixeur de YOOtheme préfixe aussi l'intérieur des règles
   imbriquées, ce qui transformerait « from » en « #id from ».
   ------------------------------------------------------------------ */
@keyframes wf-sec-pan{from{background-position:0% 50%}to{background-position:100% 50%}}
@keyframes wf-sec-breathe{from{transform:scale(1);opacity:.75}to{transform:scale(1.12);opacity:1}}
@keyframes wf-sec-drift{from{background-position:0 0}to{background-position:60px 60px}}
@keyframes wf-sec-rings{from{background-size:100% 100%}to{background-size:170% 170%}}

/* Pilotées par la position de la section à l'écran (animation-timeline: view()).
   --wf-amt : amplitude, écrite par la section. */
@keyframes wf-view-up{
    from{opacity:0;transform:translateY(calc(60px * var(--wf-amt,1)))}
    to{opacity:1;transform:none}
}
@keyframes wf-view-zoom{
    from{opacity:0;transform:scale(calc(1 - .12 * var(--wf-amt,1)))}
    to{opacity:1;transform:none}
}
@keyframes wf-view-fade{from{opacity:0}to{opacity:1}}
@keyframes wf-view-blur{
    from{opacity:0;filter:blur(calc(12px * var(--wf-amt,1)))}
    to{opacity:1;filter:blur(0)}
}
@keyframes wf-view-slide{
    from{opacity:0;transform:translateX(calc(var(--wf-slide-x,-80px) * var(--wf-amt,1)))}
    to{opacity:1;transform:none}
}
@keyframes wf-view-tilt{
    from{opacity:0;transform:perspective(1200px) rotateX(calc(8deg * var(--wf-amt,1)))}
    to{opacity:1;transform:none}
}
@keyframes wf-view-parallax{
    from{transform:translateY(calc(-40px * var(--wf-amt,1)))}
    to{transform:translateY(calc(40px * var(--wf-amt,1)))}
}
@keyframes wf-sec-living{0%{background-position:0% 20%}35%{background-position:80% 0%}70%{background-position:25% 100%}100%{background-position:100% 65%}}
.wf-sfx-interactive{position:relative;isolation:isolate}.wf-sfx-interactive>.wf-sfx-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}.wf-sfx-interactive::before{opacity:0!important}
@keyframes wf-sec-liquid{0%{background-position:0 0;filter:skewX(-2deg)}50%{background-position:50% 0;filter:skewX(2deg)}100%{background-position:100% 0;filter:skewX(-1deg)}}
@keyframes wf-sec-morph{0%{background-size:115% 82%;background-position:50% 100%}50%{background-size:145% 118%;background-position:35% 100%}100%{background-size:125% 92%;background-position:65% 100%}}
@keyframes wf-sec-divider-drift{from{background-position:0 0,0 100%}to{background-position:-360px 0,360px 100%}}

/* Défilement horizontal de Section. Le script ne l'active qu'au-dessus du
   breakpoint choisi ; en dessous, le DOM est remis exactement à sa place. */
.wf-sfx-horizontal{position:relative}
.wf-sfx-horizontal.is-wf-horizontal-fullscreen{padding-top:0!important;padding-bottom:0!important}
.wf-sfx-hscroll-viewport{position:sticky;top:0;width:100%;overflow:hidden;isolation:isolate}
.wf-sfx-hscroll-track{display:flex;width:max-content;height:100%;will-change:transform}
.wf-sfx-hscroll-track>.wf-hscroll-panel{box-sizing:border-box;flex:0 0 100%;width:100%;height:100%;max-width:none;margin:0!important;min-width:0;overflow:auto}
.wf-sfx-hscroll-track.is-wf-hscroll-stack{display:block;position:relative;width:100%}
.wf-sfx-hscroll-track.is-wf-hscroll-stack>.wf-hscroll-panel{position:absolute;inset:0;width:100%!important;max-width:none;box-shadow:0 0 40px rgba(0,0,0,.12)}
.wf-sfx-hscroll-nav{position:absolute;z-index:50;right:clamp(12px,3vw,42px);bottom:clamp(12px,3vw,36px);display:flex;gap:8px}
.wf-sfx-hscroll-nav button{display:grid;place-items:center;width:42px;height:42px;border:1px solid color-mix(in srgb,currentColor 22%,transparent);border-radius:999px;background:rgba(255,255,255,.88);color:#111;box-shadow:0 7px 22px rgba(0,0,0,.12);font:700 24px/1 sans-serif;cursor:pointer;transition:transform .2s ease,opacity .2s ease}
.wf-sfx-hscroll-nav button:hover:not(:disabled){transform:translateY(-2px)}.wf-sfx-hscroll-nav button:disabled{opacity:.35;cursor:default}
@media (prefers-reduced-motion:reduce){.wf-sfx-hscroll-viewport{position:relative}.wf-sfx-hscroll-track{transform:none!important}}
/* Typo ++ : mots en couleur (tous les elements) - classes posees par modules/wf-typo-plus.php ; le prefixe de l element Highlighter est a eviter */
.wf-mot{-webkit-text-fill-color:currentColor}
.wf-mot--italic{font-style:italic}
.wf-mot--marker{background-image:linear-gradient(transparent 58%,color-mix(in srgb,currentColor 24%,transparent) 58%,color-mix(in srgb,currentColor 24%,transparent) 94%,transparent 94%);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .06em}
.wf-mot--underline{text-decoration-line:underline;text-decoration-thickness:max(2px,.07em);text-underline-offset:.15em;text-decoration-skip-ink:none}
.wf-mot--outline{-webkit-text-fill-color:transparent;-webkit-text-stroke:max(1px,.03em) currentColor}
.wf-mot--gradient{background-image:linear-gradient(90deg,currentColor,var(--wf-mot-to,color-mix(in srgb,currentColor 45%,#fff)));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
@supports not (color:color-mix(in srgb,red 50%,blue)){.wf-mot--gradient{background-image:none;-webkit-text-fill-color:currentColor}}
/* Effet au survol de l'Image : --wf-ihz pilote a la fois le zoom et le rognage (modules/wf-image-hover.php) */
@property --wf-ihz{syntax:"<number>";inherits:false;initial-value:1}
/* Décorations dessinées des mots en couleur (6.203.0, modules/wf-typo-plus.php) : tracés d'Annotated Text, componentry.dev (MIT). Tracé animé : assets/js/wf-componentry.js pose .is-in. */
.wf-deco{position:relative;display:inline-block;white-space:nowrap;isolation:isolate;--wf-deco-t:650ms;--wf-deco-d:0ms}
.wf-deco-k{position:absolute;pointer-events:none;overflow:visible}
.wf-deco--wavy .wf-deco-k{bottom:-.4em;left:-2%;width:104%;height:.7em}
.wf-deco--underline .wf-deco-k{bottom:-.32em;left:-1%;width:102%;height:.5em}
.wf-deco--double .wf-deco-k{bottom:-.5em;left:-1%;width:102%;height:.7em}
.wf-deco--dotted .wf-deco-k{bottom:-.35em;left:-1%;width:102%;height:.55em;background:radial-gradient(circle,currentColor 1.5px,transparent 1.6px) 0 100%/.5em 100% repeat-x}
.wf-deco--line .wf-deco-k{bottom:-.18em;left:-1%;width:102%;height:2px;border-radius:9px;background:currentColor}
.wf-deco--arrow .wf-deco-k{bottom:-.45em;left:-1%;width:106%;height:.8em}
.wf-deco--highlight .wf-deco-k{bottom:-.08em;left:-4%;width:108%;height:1.15em;z-index:-1;opacity:.4}
.wf-deco--circle{padding:0 .25rem}
.wf-deco--circle .wf-deco-k{top:-.6em;left:-.55em;width:calc(100% + 1.1em);height:calc(100% + 1.2em)}
.wf-deco--box{padding:0 .4em}
.wf-deco--box .wf-deco-k{top:-.4em;left:-.4em;width:calc(100% + .8em);height:calc(100% + .8em)}
.wf-deco--bracket{padding:0 .35em}
.wf-deco--bracket .wf-deco-k{top:-.25em;left:-.15em;width:calc(100% + .3em);height:calc(100% + .5em)}
.wf-deco--strike .wf-deco-k{top:50%;left:-1%;width:102%;height:.5em;transform:translateY(-50%)}
.wf-deco--cross .wf-deco-k{top:50%;left:-2%;width:104%;height:1.4em;transform:translateY(-50%)}
@media (scripting:enabled){
.wf-deco--draw .wf-deco-k path:not(.wf-deco-f){stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.wf-deco--draw .wf-deco-f,.wf-deco--draw .wf-deco-css{clip-path:inset(0 100% 0 0)}
.wf-deco--draw.is-in .wf-deco-k path:not(.wf-deco-f){animation:wf-deco-trace var(--wf-deco-t) cubic-bezier(.22,.61,.36,1) calc(var(--wf-deco-d) + var(--i,0) * 160ms) both}
.wf-deco--draw.is-in .wf-deco-f,.wf-deco--draw.is-in .wf-deco-css{animation:wf-deco-wipe var(--wf-deco-t) cubic-bezier(.22,.61,.36,1) var(--wf-deco-d) both}
}
@keyframes wf-deco-trace{0%{stroke-dashoffset:1;opacity:0}.1%{opacity:1}to{stroke-dashoffset:0;opacity:1}}
@keyframes wf-deco-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){.wf-deco--draw .wf-deco-k path,.wf-deco--draw .wf-deco-f,.wf-deco--draw .wf-deco-css{animation:none!important;stroke-dashoffset:0!important;opacity:1!important;clip-path:none!important}}
/* Lettres repoussées et mot qui bascule (Texte / Titre natifs, 6.203.0, modules/wf-native-text-motion.php) */
.wf-tp-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}
.wf-tp-wd{white-space:nowrap}
.wf-tp-l{display:inline-block;white-space:pre;will-change:transform}
.wf-tp-on{cursor:default}
.wf-tp-mesure .wf-tp-l,.wf-tp-mesure .wf-tp-c{transform:none!important}
.wf-tp-swap{display:inline-grid;vertical-align:baseline;cursor:pointer;border-radius:.08em;-webkit-tap-highlight-color:transparent;outline:0;grid-template-columns:minmax(0,1fr);transition:width .6s cubic-bezier(.65,0,.35,1)}
.wf-tp-swap:focus-visible{outline:2px solid currentColor;outline-offset:.12em}
.wf-tp-sw{grid-area:1/1;display:inline-grid;grid-template-columns:minmax(0,1fr);perspective:800px;clip-path:inset(-.3em -50vw)}
.wf-tp-sw>span{grid-area:1/1;display:inline-flex;justify-content:center;align-items:baseline;white-space:pre;gap:.012em}
.wf-tp-c{display:inline-block;white-space:pre;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition-property:transform,opacity;transition-duration:.4s}
.wf-tp-a .wf-tp-c{transform-origin:50% 0}
.wf-tp-b .wf-tp-c{transform-origin:50% 100%;transform:rotateX(-82deg);opacity:0}
.wf-tp-swap.is-on .wf-tp-a .wf-tp-c{transform:rotateX(82deg);opacity:0}
.wf-tp-swap.is-on .wf-tp-b .wf-tp-c{transform:none;opacity:1}