/**
 * 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-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}}