/* =========================================================
   NovaFolio – HERO SLIDER (Bloc Gutenberg)
   Version clean + robuste (sans casser l’existant)
   - Supprime les doublons typo (font-family/weight) au milieu
   - Garde les variables + overrides typo (fallback)
   - Rend la durée de transition pilotable via --nvf-transition-ms
   - Scoping léger sur :hover des dots (évite fuites)
   ========================================================= */

/* ===================================
   CONTENT ANIMATIONS (fade-in + slide-up)
   =================================== */

@keyframes nvf-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===================================
   WRAPPER GENERAL + PALETTE HERO
   =================================== */

.nvf-hero-slider {
    position: relative;
    width: 100%;
    overflow: hidden;

    /* Preset levers (safe) */
    --nvf-hero-content-max-width: min(880px, 80vw);
    --nvf-hero-overlay-mult: 1;

    /* Palette locale (n'affecte pas le reste du thème) — token-driven */
    --nvf-hero-title-color: var(--nvf-color-white);
    --nvf-hero-subtitle-color: var(--nvf-color-white, #FFFFFF);

    --nvf-hero-btn-bg: var(--nvf-color-white);
    --nvf-hero-btn-text: var(--nvf-color-ink-deep);

    --nvf-hero-btn-border: transparent;
    --nvf-hero-btn-border-hover: transparent;

    --nvf-hero-btn-bg-hover: var(--nvf-color-ink-deep);
    --nvf-hero-btn-text-hover: var(--nvf-color-white);


    /* CTA sizing (Design System friendly) */
    --nvf-hero-btn-py: var(--nvf-space-xs, 8px);
    --nvf-hero-btn-px: var(--nvf-space-m, 22px);
    --nvf-hero-btn-font-size: 0.9rem;
    --nvf-hero-btn-min-width: auto;
    --nvf-hero-btn-width: auto;
    --nvf-hero-btn-max-width: none;

    /* Border radius CTA (harmonized with global button token) */
    --nvf-hero-btn-radius: var(--nvf-btn-radius, 999px);

    /* Focus ring (keyboard accessibility) */
    --nvf-hero-focus-ring: color-mix(in srgb, var(--nvf-color-white) 55%, transparent);
    --nvf-hero-focus-ring-outer: var(--nvf-overlay-dark-soft);

    /* Variante carte claire */
    --nvf-hero-card-title-color: var(--nvf-color-headings, #0f172a);
    --nvf-hero-card-subtitle-color: var(--nvf-color-slate-dark, #4b5563);

    /* Durée de transition (pilotable via JS: --nvf-transition-ms) */
    --nvf-transition-ms: 450ms;

    /* Step 4: scene/motion multipliers */
    --nvf-scene-mult: 1;
    --nvf-motion-amp: 1;

    /* Durées dérivées (utilisées par les scènes premium) */
    --nvf-transition-dur-base: var(--nvf-transition-ms, 650ms);
    --nvf-transition-dur: calc(var(--nvf-transition-dur-base) * var(--nvf-scene-mult, 1));

    --nvf-modern-shift-y: 0px;
}

/* Motion direction (set by JS via data-motion on slider) */
.nvf-hero-slider[data-motion="fade"] {
    --nvf-modern-shift-x: 0px;
    --nvf-modern-shift-y: 0px;
}

.nvf-hero-slider[data-motion="left"] {
    --nvf-modern-shift-x: -24px;
    --nvf-modern-shift-y: 0px;
}

.nvf-hero-slider[data-motion="right"] {
    --nvf-modern-shift-x: 24px;
    --nvf-modern-shift-y: 0px;
}

.nvf-hero-slider[data-motion="up"] {
    --nvf-modern-shift-x: 0px;
    --nvf-modern-shift-y: -18px;
}


/* Layout FULL = texte clair sur visuel sombre */
.nvf-hero-slider.nvf-hero-layout-full {
    --nvf-hero-title-color: var(--nvf-color-white);
    --nvf-hero-subtitle-color: var(--nvf-color-border);
}

/* Layout CARD = texte plus foncé sur carte claire */
.nvf-hero-slider.nvf-hero-layout-card {
    --nvf-hero-title-color: var(--nvf-hero-card-title-color);
    --nvf-hero-subtitle-color: var(--nvf-hero-card-subtitle-color);
}

/* ===================================
   LAYOUTS / HAUTEUR
   =================================== */

/* Layout "carte" centrée */
.nvf-hero-slider.nvf-hero-layout-card {
    max-width: 1360px;
    margin: clamp(48px, 7vw, 96px) auto;
    border-radius: var(--nvf-radius-l);
    background: var(--nvf-color-surface);
    box-shadow: var(--nvf-shadow-m);
}

/* Layout plein écran */
.nvf-hero-slider.nvf-hero-layout-full {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 0;
    margin-bottom: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--nvf-color-black);
}

.nvf-hero-slider--small .nvf-hero-slider-inner {
    min-height: clamp(320px, 46vh, 520px);
}

.nvf-hero-slider--medium .nvf-hero-slider-inner {
    min-height: clamp(420px, 62vh, 720px);
}

.nvf-hero-slider--large .nvf-hero-slider-inner {
    min-height: clamp(520px, 78vh, 880px);
}

.nvf-hero-slider--fullscreen .nvf-hero-slider-inner {
    /*
     * Subtract header + topbar + admin-bar so dots / scroll / play-pause stay visible.
     * --nvf-header-height and --nvf-topbar-height are set by the theme on :root.
     * --nvf-adminbar-h is set by header.js when logged in (32 px desktop, 46 px mobile).
     * When the header is transparent/overlay these vars may be 0 → slider fills 100%.
     */
    min-height: calc(100vh - var(--nvf-header-height, 0px) - var(--nvf-topbar-height, 0px) - var(--nvf-adminbar-h, 0px));
    min-height: calc(100dvh - var(--nvf-header-height, 0px) - var(--nvf-topbar-height, 0px) - var(--nvf-adminbar-h, 0px));
}

.nvf-hero-slider:not([class*="slider--small"]):not([class*="slider--medium"]):not([class*="slider--large"]):not([class*="slider--fullscreen"])[style*="min-height"] > .nvf-hero-slider-inner {
    min-height: inherit;
}

.nvf-hero-slider-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

/* ===================================
   SLIDES
   =================================== */

.nvf-hero-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transform: scale(1.08) translateY(12px);
    transition:
        opacity var(--nvf-transition-ms, 450ms) cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform var(--nvf-transition-ms, 450ms) cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
}

.nvf-hero-slide.is-active {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1) translateY(0);
}

.nvf-hero-slide-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    position: relative;
}

.nvf-hero-slide-media {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

/* Image par défaut = cover */
.nvf-hero-slide-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* --------- TAILLE D'IMAGE (imageSize) --------- */

.nvf-hero-img-cover .nvf-hero-slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.nvf-hero-img-contain .nvf-hero-slide-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background-color: var(--nvf-color-black);
}

/* Mode "auto" : image centrée, taille intrinsèque */
.nvf-hero-img-auto .nvf-hero-slide-media {
    display: flex;
    align-items: center;
    justify-content: center;
}

.nvf-hero-img-auto .nvf-hero-slide-img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* --------- POSITION VERTICALE (imagePosition) --------- */

.nvf-hero-image-pos-top .nvf-hero-slide-img {
    object-position: top center;
}

.nvf-hero-image-pos-center .nvf-hero-slide-img {
    object-position: center center;
}

.nvf-hero-image-pos-bottom .nvf-hero-slide-img {
    object-position: bottom center;
}

/* ===================================
   OVERLAY IMAGE
   =================================== */

.nvf-hero-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    /* Overlay engine aligned with Nova Hero tokens */
    background: var(--nvf-hero-overlay-bg,
            linear-gradient(
                var(--nvf-hero-overlay-direction, 45deg),
                var(--nvf-hero-overlay-color, var(--nvf-hero-overlay-color-default, #000000)),
                var(--nvf-hero-overlay-color, var(--nvf-hero-overlay-color-default, #000000))
            ));
    opacity: calc(var(--nvf-hero-overlay-opacity, var(--nvf-hero-overlay-opacity-default, 0)) * var(--nvf-hero-overlay-mult, 1));
    transition: opacity 250ms ease-out;
}

/* NONE */
.nvf-hero-overlay-none .nvf-hero-slide::before {
    --nvf-hero-overlay-opacity-default: 0;
    --nvf-hero-overlay-bg: none;
}

/* LIGHT */
.nvf-hero-overlay-light .nvf-hero-slide::before {
    --nvf-hero-overlay-opacity-default: 0.45;
    --nvf-hero-overlay-color-default: #000000;
}

/* STRONG */
.nvf-hero-overlay-strong .nvf-hero-slide::before {
    --nvf-hero-overlay-opacity-default: 0.68;
    --nvf-hero-overlay-color-default: #000000;
}


/* ===================================
   CONTENU (TITRE / SOUS-TITRE / CTA)
   =================================== */

/* Bandeau bas par défaut */
.nvf-hero-slide-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    padding: var(--nvf-space-m, 22px) var(--nvf-space-l, 34px) var(--nvf-space-l, 34px);
    z-index: 2;
    color: var(--nvf-hero-title-color);
    text-align: left;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: var(--nvf-hero-content-gap, 1rem);
}


/* Layout FULL : bloc centré verticalement */
.nvf-hero-slider.nvf-hero-layout-full .nvf-hero-slide-content {
    left: 0;
    right: 0;
    width: 100%;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    background: none;
    max-width: var(--nvf-hero-content-max-width);
    margin: 0 auto;
    /* Clear the nav arrows on each side (arrow width + arrow offset + gap) */
    padding-left: calc(var(--nvf-space-l, 34px) + 54px);
    padding-right: calc(var(--nvf-space-l, 34px) + 54px);
}


/* Layout "carte centrée" : bloc au centre */
.nvf-hero-slider.nvf-hero-layout-card .nvf-hero-slide-content {
    position: absolute;
    left: 50%;
    top: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);

    max-width: min(560px, 80%);
    padding: var(--nvf-space-m, 22px) var(--nvf-space-l, 34px);
    border-radius: var(--nvf-radius-card, 16px);

    display: flex;
    flex-direction: column;

    background: none !important;
    /* neutralise un éventuel dégradé */
}

/* Alignements globaux */
.nvf-hero-align-center .nvf-hero-slide-content {
    text-align: center;
    align-items: center;
}

.nvf-hero-align-left .nvf-hero-slide-content {
    text-align: left;
    align-items: flex-start;
}

.nvf-hero-align-right .nvf-hero-slide-content {
    text-align: right;
    align-items: flex-end;
}

/* Titres (clean: pas de font-family/weight ici -> géré plus bas en overrides) */
.nvf-hero-slide-title {
    margin: 0;
    letter-spacing: var(--nvf-hero-title-ls, -0.01em);
    text-transform: var(--nvf-hero-title-transform, none);
    line-height: 1.15;
    color: var(--nvf-hero-title-color);
}

/* Animate title on active slide (only if content animation enabled) */
.nvf-hero-slider[data-enable-content-animation="true"] .nvf-hero-slide.is-active .nvf-hero-slide-title {
    opacity: 0;
    animation: nvf-fade-in-up 0.6s ease-out 0.15s forwards;
}

/* Sous-titres (clean: pas de font-family/weight ici -> géré plus bas en overrides) */
.nvf-hero-slide-subtitle {
    margin: 0;
    color: var(--nvf-hero-subtitle-color);
    letter-spacing: var(--nvf-hero-subtitle-ls, normal);
    text-transform: var(--nvf-hero-subtitle-transform, none);
    line-height: 1.5;
}

/* Animate subtitle on active slide (only if content animation enabled) */
.nvf-hero-slider[data-enable-content-animation="true"] .nvf-hero-slide.is-active .nvf-hero-slide-subtitle {
    opacity: 0;
    animation: nvf-fade-in-up 0.6s ease-out 0.3s forwards;
}

/* FULL : petit ajustement de couleur */
.nvf-hero-slider.nvf-hero-layout-full .nvf-hero-slide-subtitle {
    color: var(--nvf-hero-subtitle-color);
}

/* CTA */
.nvf-hero-cta-wrapper {
    display: block;
    margin: 0;
}

.nvf-hero-cta-inner {
    display: inline-flex;
}

.nvf-hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;

    padding: var(--nvf-hero-btn-py) var(--nvf-hero-btn-px);

    font-size: clamp(var(--nvf-hero-btn-min, 0.78rem),
            calc(var(--nvf-hero-btn-fs, var(--nvf-hero-btn-font-size, 0.92rem)) + var(--nvf-hero-btn-fluid, 0.4vw)),
            var(--nvf-hero-btn-max, 0.98rem)) !important;

    min-width: var(--nvf-hero-btn-min-width);
    width: var(--nvf-hero-btn-width);
    max-width: var(--nvf-hero-btn-max-width);

    border-radius: var(--nvf-hero-btn-radius, var(--nvf-btn-radius, 999px));
    font-weight: 500;
    letter-spacing: var(--nvf-hero-btn-ls, 0.06em);
    text-transform: var(--nvf-hero-btn-transform, uppercase);
    text-decoration: none;

    transform: translateY(-1px);
    box-shadow: var(--nvf-shadow-m);
    background-color: var(--nvf-hero-btn-bg);
    color: var(--nvf-hero-btn-color, var(--nvf-hero-btn-text));
    border: 1px solid var(--nvf-hero-btn-border, transparent);
    will-change: transform;
    transition: transform .18s ease, box-shadow .18s ease;
}

/* Animate CTA on active slide (only if content animation enabled) */
.nvf-hero-slider[data-enable-content-animation="true"] .nvf-hero-slide.is-active .nvf-hero-cta {
    opacity: 0;
    animation: nvf-fade-in-up 0.6s ease-out 0.45s forwards;
}



/* Ne montrer le contenu que pour la slide active */
.nvf-hero-slide:not(.is-active):not(.is-leaving) .nvf-hero-slide-content {
    display: none;
}

/* Hover + focus clavier uniquement sur la slide active */
.nvf-hero-slide.is-active .nvf-hero-cta:hover,
.nvf-hero-slide.is-active .nvf-hero-cta:focus-visible {
    background-color: var(--nvf-hero-btn-hover-bg, var(--nvf-hero-btn-bg-hover, var(--nvf-hero-btn-bg)));
    color: var(--nvf-hero-btn-hover-color, var(--nvf-hero-btn-text-hover, var(--nvf-hero-btn-color, var(--nvf-hero-btn-text))));
    border-color: var(--nvf-hero-btn-hover-border, var(--nvf-hero-btn-border-hover, var(--nvf-hero-btn-border, transparent)));

}

.nvf-hero-cta:active {
    transform: translateY(-1px);
    box-shadow: var(--nvf-shadow-m);
}

/* ===================================
   BOUTON – HOVER EFFECTS (lift / glow / underline)
   Déclenché via classe sur le wrapper: .nvf-btn-hover-*
   =================================== */

/* LIFT */
.nvf-hero-slider.nvf-btn-hover-lift .nvf-hero-slide.is-active .nvf-hero-cta:hover,
.nvf-hero-slider.nvf-btn-hover-lift .nvf-hero-slide.is-active .nvf-hero-cta:focus-visible {
    transform: translateY(-6px);
    box-shadow: var(--nvf-shadow-m);
}

/* GLOW */
.nvf-hero-slider.nvf-btn-hover-glow .nvf-hero-slide.is-active .nvf-hero-cta {
    --nvf-glow-color: var(--nvf-hero-btn-bg, rgba(255, 255, 255, .6));
}

.nvf-hero-slider.nvf-btn-hover-glow .nvf-hero-slide.is-active .nvf-hero-cta:hover,
.nvf-hero-slider.nvf-btn-hover-glow .nvf-hero-slide.is-active .nvf-hero-cta:focus-visible {
    box-shadow:
        0 10px 28px rgba(0, 0, 0, .25),
        0 0 36px color-mix(in srgb, var(--nvf-glow-color) 70%, transparent);
}

/* UNDERLINE */
.nvf-hero-slider.nvf-btn-hover-underline .nvf-hero-slide.is-active .nvf-hero-cta:hover,
.nvf-hero-slider.nvf-btn-hover-underline .nvf-hero-slide.is-active .nvf-hero-cta:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.25em;
    text-decoration-thickness: 2px;
}

/* ===================================
   FLECHES
   =================================== */

.nvf-hero-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: var(--nvf-radius-pill, 999px);
    border: 1px solid color-mix(in srgb, var(--nvf-color-white) 40%, transparent);
    background: color-mix(in srgb, var(--nvf-color-ink-deep) 18%, transparent);
    backdrop-filter: blur(14px);

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    color: var(--nvf-color-surface);

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        transform 0.18s ease,
        box-shadow 0.25s ease;
    z-index: 3;
}

.nvf-hero-nav--prev {
    left: var(--nvf-space-l, 34px);
}

.nvf-hero-nav--next {
    right: var(--nvf-space-l, 34px);
}


.nvf-hero-nav:hover {
    background: var(--nvf-color-white);
    border-color: rgba(255, 255, 255, 0.95);
    color: var(--nvf-color-ink-deep);
    transform: translateY(calc(-50% - 2px));
    box-shadow: var(--nvf-shadow-m);
}

.nvf-hero-nav:active {
    transform: translateY(-50%);
    box-shadow: var(--nvf-shadow-s);
}

/* ===================================
   ACCESSIBILITY – FOCUS STATES
   =================================== */

.nvf-hero-slider .nvf-hero-nav:focus-visible,
.nvf-hero-slider .nvf-hero-dot:focus-visible,
.nvf-hero-slider .nvf-hero-cta:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px var(--nvf-hero-focus-ring),
        0 0 0 6px var(--nvf-hero-focus-ring-outer);
}

.nvf-hero-slider .nvf-hero-dot:focus-visible {
    transform: scale(1.6);
}

/* Make dots a bit easier to hit without changing the visual */
.nvf-hero-slider .nvf-hero-dot {
    width: 8px;
    height: 8px;
}

/* (scoped) */
.nvf-hero-slider .nvf-hero-dot:hover {
    background: color-mix(in srgb, var(--nvf-color-white) 70%, transparent);
    transform: scale(1.3);
}

/* Layout card : flèches légèrement rapprochées du bloc */
.nvf-hero-slider.nvf-hero-layout-card .nvf-hero-nav--prev {
    left: var(--nvf-space-m, 22px);
}

.nvf-hero-slider.nvf-hero-layout-card .nvf-hero-nav--next {
    right: var(--nvf-space-m, 22px);
}

/* ===================================
   DOTS
   =================================== */

.nvf-hero-dots {
    position: absolute;
    left: 50%;
    bottom: var(--nvf-space-s, 14px);
    transform: translateX(-50%);
    display: flex;
    gap: var(--nvf-space-xs, 8px);
    z-index: 10;
    /* un peu plus haut */
    pointer-events: auto;
}

.nvf-hero-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--nvf-color-white) 35%, transparent);
    border: 0;
    padding: 0;
    cursor: pointer;
    pointer-events: auto;
    transform: scale(1);
    transition:
        background-color 0.22s ease,
        transform 0.22s ease,
        box-shadow 0.22s ease;
}

.nvf-hero-dot.is-active {
    background: var(--nvf-color-white);
    transform: scale(1.6);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
}

/* Play/Pause Button */
.nvf-hero-play-pause {
    position: absolute;
    bottom: 22px;
    right: 22px;
    z-index: 25;

    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #000000;
    opacity: 0.7;
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: white;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0;
    margin: 0;

    transition: all 0.3s ease;
}

.nvf-hero-play-pause:hover {
    opacity: 0.85;
    border-color: rgba(255, 255, 255, 0.8);
    transform: scale(1.1);
}

.nvf-hero-play-pause:active {
    transform: scale(0.95);
}

/* Show/Hide icons based on state */
.nvf-hero-play-pause .nvf-icon-pause,
.nvf-hero-play-pause .nvf-icon-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    color: white !important;
    line-height: 1;
}

.nvf-hero-play-pause .nvf-icon-pause svg,
.nvf-hero-play-pause .nvf-icon-play svg {
    display: block;
    fill: white;
}

.nvf-hero-play-pause[data-state="playing"] .nvf-icon-pause {
    opacity: 1;
}

.nvf-hero-play-pause[data-state="paused"] .nvf-icon-play {
    opacity: 1;
}

.nvf-hero-slider {
    position: relative;
}

.nvf-hero-nav,
.nvf-hero-dots {
    z-index: 20;
}

/* ===================================
   RESPONSIVE
   =================================== */

@media (max-width: 1024px) {

    .nvf-hero-slider.nvf-hero-layout-card {
        border-radius: var(--nvf-radius-card, 16px);
        margin: 32px auto 60px;
    }

    .nvf-hero-slider--small .nvf-hero-slider-inner,
    .nvf-hero-slider--medium .nvf-hero-slider-inner,
    .nvf-hero-slider--large .nvf-hero-slider-inner {
        min-height: clamp(320px, 58vh, 560px);
    }

    .nvf-hero-slide-content {
        padding: var(--nvf-space-s, 14px) var(--nvf-space-m, 22px) var(--nvf-space-m, 22px);
    }

    .nvf-hero-nav {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .nvf-hero-nav--prev {
        left: var(--nvf-space-s, 14px);
    }

    .nvf-hero-nav--next {
        right: var(--nvf-space-s, 14px);
    }

    /* Full layout: clear arrows on tablet */
    .nvf-hero-slider.nvf-hero-layout-full .nvf-hero-slide-content {
        padding-left: calc(var(--nvf-space-s, 14px) + 50px);
        padding-right: calc(var(--nvf-space-s, 14px) + 50px);
    }

    .nvf-hero-dots {
        bottom: var(--nvf-space-s, 14px);
    }

    .nvf-hero-play-pause {
        width: 44px;
        height: 44px;
        font-size: 18px;
        bottom: 16px;
        right: 16px;
    }

    .nvf-hero-cta {
        padding: var(--nvf-hero-btn-py, 8px) calc(var(--nvf-hero-btn-px, 22px) * 0.85);
        /* Use CSS vars so .nvf-btn-sm/md/lg/full presets still apply at this breakpoint */
        font-size: clamp(var(--nvf-hero-btn-min, 0.75rem), 2vw, var(--nvf-hero-btn-max, 0.9rem)) !important;
    }
}

@media (max-width: 640px) {

    .nvf-hero-slider.nvf-hero-layout-card {
        border-radius: var(--nvf-radius-card-md, 12px);
        margin: 24px auto 40px;
    }

    .nvf-hero-slider--small .nvf-hero-slider-inner,
    .nvf-hero-slider--medium .nvf-hero-slider-inner,
    .nvf-hero-slider--large .nvf-hero-slider-inner {
        min-height: clamp(280px, 60vh, 480px);
    }

    .nvf-hero-slide-content {
        padding: var(--nvf-space-s, 14px) var(--nvf-space-s, 14px) var(--nvf-space-m, 22px);
    }

    .nvf-hero-nav {
        width: 32px;
        height: 32px;
    }

    .nvf-hero-nav--prev {
        left: var(--nvf-space-s, 14px);
    }

    .nvf-hero-nav--next {
        right: var(--nvf-space-s, 14px);
    }

    /* Full layout: clear arrows on mobile */
    .nvf-hero-slider.nvf-hero-layout-full .nvf-hero-slide-content {
        padding-left: calc(var(--nvf-space-s, 14px) + 46px);
        padding-right: calc(var(--nvf-space-s, 14px) + 46px);
    }

    .nvf-hero-play-pause {
        width: 40px;
        height: 40px;
        font-size: 16px;
        bottom: 12px;
        right: 12px;
    }

    .nvf-hero-cta {
        padding: calc(var(--nvf-hero-btn-py, 8px) * 0.85) calc(var(--nvf-hero-btn-px, 22px) * 0.7);
        /* Use CSS vars so .nvf-btn-sm/md/lg/full presets still apply at this breakpoint */
        font-size: clamp(var(--nvf-hero-btn-min, 0.7rem), 1.8vw, var(--nvf-hero-btn-max, 0.85rem)) !important;
    }
}

/* ===================================
   TYPO SCALE — Nova Hero (SINGLE SOURCE OF TRUTH)
   =================================== */

.nvf-hero-slider {
    /* === TITLE guardrails === */
    --nvf-hero-title-min: 1.9rem;
    --nvf-hero-title-fluid: 5.8vw;

    /* === SUBTITLE guardrails === */
    --nvf-hero-subtitle-min: 1rem;
    --nvf-hero-subtitle-fluid: 2.1vw;

    /* === DEFAULT sizes === */
    --nvf-hero-title-fs: clamp(2.4rem, 5vw, 4.8rem);
    --nvf-hero-subtitle-fs: clamp(1.05rem, 1.6vw, 1.35rem);

    /* === BUTTON base === */
    --nvf-hero-btn-font-size: 0.92rem;
    --nvf-hero-btn-py: 10px;
    --nvf-hero-btn-px: 20px;

    /* === BUTTON responsive guardrails === */
    --nvf-hero-btn-min: 0.78rem;
    --nvf-hero-btn-max: 0.95rem;
    --nvf-hero-btn-fluid: 1vw;
}

/* ===================================
   SIZE PRESETS (frontend only)
   Driven by wrapper classes already emitted by PHP:
   .nvf-title-* / .nvf-subtitle-* / .nvf-btn-*
   =================================== */

.nvf-hero-slider.nvf-title-sm {
    --nvf-hero-title-min: 1.55rem;
    --nvf-hero-title-fluid: 3.6vw;
    --nvf-hero-title-fs: 2.35rem;
}

.nvf-hero-slider.nvf-title-md {
    --nvf-hero-title-min: 1.8rem;
    --nvf-hero-title-fluid: 4.4vw;
    --nvf-hero-title-fs: 3.1rem;
}

.nvf-hero-slider.nvf-title-lg {
    --nvf-hero-title-min: 2.05rem;
    --nvf-hero-title-fluid: 5.1vw;
    --nvf-hero-title-fs: 3.95rem;
}

.nvf-hero-slider.nvf-title-xl {
    --nvf-hero-title-min: 1.9rem;
    --nvf-hero-title-fluid: 5.8vw;
    --nvf-hero-title-fs: 4.8rem;
}

.nvf-hero-slider.nvf-subtitle-sm {
    --nvf-hero-subtitle-min: 0.95rem;
    --nvf-hero-subtitle-fluid: 1.7vw;
    --nvf-hero-subtitle-fs: 1.2rem;
}

.nvf-hero-slider.nvf-subtitle-md {
    --nvf-hero-subtitle-min: 1rem;
    --nvf-hero-subtitle-fluid: 2.1vw;
    --nvf-hero-subtitle-fs: 1.35rem;
}

.nvf-hero-slider.nvf-subtitle-lg {
    --nvf-hero-subtitle-min: 1.15rem;
    --nvf-hero-subtitle-fluid: 2.5vw;
    --nvf-hero-subtitle-fs: 1.7rem;
}

.nvf-hero-slider.nvf-btn-sm {
    --nvf-hero-btn-min: 0.76rem;
    --nvf-hero-btn-max: 0.88rem;
    --nvf-hero-btn-fluid: 0.7vw;
    --nvf-hero-btn-font-size: 0.84rem;
    --nvf-hero-btn-py: 8px;
    --nvf-hero-btn-px: 16px;
    --nvf-hero-btn-width: auto;
    --nvf-hero-btn-max-width: none;
}

.nvf-hero-slider.nvf-btn-md {
    --nvf-hero-btn-min: 0.78rem;
    --nvf-hero-btn-max: 0.95rem;
    --nvf-hero-btn-fluid: 1vw;
    --nvf-hero-btn-font-size: 0.92rem;
    --nvf-hero-btn-py: 10px;
    --nvf-hero-btn-px: 20px;
    --nvf-hero-btn-width: auto;
    --nvf-hero-btn-max-width: none;
}

.nvf-hero-slider.nvf-btn-lg {
    --nvf-hero-btn-min: 0.9rem;
    --nvf-hero-btn-max: 1.08rem;
    --nvf-hero-btn-fluid: 1.15vw;
    --nvf-hero-btn-font-size: 1rem;
    --nvf-hero-btn-py: 12px;
    --nvf-hero-btn-px: 24px;
    --nvf-hero-btn-width: auto;
    --nvf-hero-btn-max-width: none;
}

.nvf-hero-slider.nvf-btn-full {
    --nvf-hero-btn-min: 0.92rem;
    --nvf-hero-btn-max: 1.08rem;
    --nvf-hero-btn-fluid: 1vw;
    --nvf-hero-btn-font-size: 1rem;
    --nvf-hero-btn-py: 12px;
    --nvf-hero-btn-px: 24px;
    --nvf-hero-btn-min-width: min(280px, 100%);
    --nvf-hero-btn-width: 100%;
    --nvf-hero-btn-max-width: min(420px, 100%);
}


/* ===================================
   ESPACEMENTS VERTICAUX (Titre / Sous-titre / Bouton)
   =================================== */

/* Reset des marges pour forcer notre système */
.nvf-hero-slider .nvf-hero-slide-title,
.nvf-hero-slider .nvf-hero-slide-subtitle {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.nvf-hero-slider .nvf-hero-cta-wrapper {
    display: block;
    margin: 0 !important;
}

/* Les marges sont gérées par le gap (voir .nvf-hero-slide-content ci-dessous)
   — pas de margin-bottom avec des variables non-définies (--nvf-gap-title-sub,
   --nvf-gap-sub-btn ont été supprimés car jamais définis). */

/* =====================================
   Hero Slider – Vertical spacing (GAP)
   Single source of truth
===================================== */

/* GAP is the only spacing system */
.nvf-hero-slider .nvf-hero-slide-content {
    gap: var(--nvf-hero-content-gap, 1rem);
}

/* Remove margins that would cumulate with gap */
.nvf-hero-slider .nvf-hero-slide-title,
.nvf-hero-slider .nvf-hero-slide-subtitle,
.nvf-hero-slider .nvf-hero-cta-wrapper,
.nvf-hero-slider .nvf-hero-cta {
    margin: 0 !important;
}

/* Presets */
.nvf-hero-slider.nvf-space-tight {
    --nvf-hero-content-gap: 0.9rem;
    /* ~14px */
}

.nvf-hero-slider.nvf-space-normal {
    --nvf-hero-content-gap: 2rem;
    /* ~32px */
}


.nvf-hero-slider.nvf-space-loose {
    --nvf-hero-content-gap: clamp(2.8rem, 3.6vw, 4.4rem);
}

@media (max-width: 768px) {
    .nvf-hero-slider.nvf-space-loose {
        --nvf-hero-content-gap: 2.4rem;
    }
}

/* ============================
   Editor only – Hero Slide cards
   (safe: scoped to Gutenberg only)
   ============================ */
.editor-styles-wrapper .nvf-hero-manual-slides {
    margin-top: var(--nvf-space-s, 14px);
}

.editor-styles-wrapper .nvf-hero-slide-editor {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--nvf-space-s, 14px);

    padding: var(--nvf-space-s, 14px);

    border: 1px solid var(--nvf-color-border, #e5e7eb);
    border-radius: var(--nvf-radius-s, 10px);

    background: var(--nvf-color-white, #fff);
    color: var(--nvf-color-ink, #111827);
}

.editor-styles-wrapper .nvf-hero-slide-editor__media {
    min-width: 0;
}

.editor-styles-wrapper .nvf-hero-slide-editor__thumb {
    border-radius: var(--nvf-radius-s, 10px);
    overflow: hidden;

    background: var(--nvf-color-soft, #f3f4f6);

    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.editor-styles-wrapper .nvf-hero-slide-editor__thumb img {
    width: 100%;
    height: auto;
    display: block;
}

.editor-styles-wrapper .nvf-hero-slide-editor__thumb.is-empty {
    padding: var(--nvf-space-s, 14px);
    text-align: center;
    color: var(--nvf-color-slate-dark, #4b5563);
    opacity: 0.85;
}

.editor-styles-wrapper .nvf-hero-slide-editor__media-actions {
    margin-top: var(--nvf-space-xs, 8px);
}

.editor-styles-wrapper .nvf-hero-slide-editor__content {
    min-width: 0;
}

.editor-styles-wrapper .nvf-hero-slide-editor__title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 var(--nvf-space-xs, 8px);
}

.editor-styles-wrapper .nvf-hero-slide-editor__subtitle {
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    color: var(--nvf-color-slate, #6b7280);
}

.editor-styles-wrapper .nvf-hero-slide-editor__hint {
    margin-top: var(--nvf-space-xs, 8px);
    font-size: 12px;
    color: var(--nvf-color-slate, #6b7280);
    opacity: 0.9;
}

@media (max-width: 700px) {
    .editor-styles-wrapper .nvf-hero-slide-editor {
        grid-template-columns: 1fr;
    }
}


/* ===================================
   Reduced motion
   =================================== */
@media (prefers-reduced-motion: reduce) {

    .nvf-hero-slider .nvf-hero-slide,
    .nvf-hero-slider .nvf-hero-nav,
    .nvf-hero-slider .nvf-hero-dot,
    .nvf-hero-slider .nvf-hero-cta {
        transition: none !important;
    }

    .nvf-hero-slider .nvf-hero-slide {
        transform: none !important;
    }

    .nvf-hero-slider .nvf-hero-nav:hover,
    .nvf-hero-slider .nvf-hero-cta:hover,
    .nvf-hero-slider .nvf-hero-dot:hover {
        transform: none !important;
    }
}

/* ===================================
   TYPOGRAPHY OVERRIDES (Global + per-slide)
   - Slide vars override global vars
   - Global vars override defaults
   - Must beat theme styles (!important)
   =================================== */

.nvf-hero-slider .nvf-hero-slide .nvf-hero-slide-content h2.nvf-hero-slide-title {
    font-family: var(--nvf-slide-title-ff,
            var(--nvf-hero-title-ff, var(--nvf-headings-font-family, system-ui, sans-serif))) !important;

    font-weight: var(--nvf-slide-title-fw, var(--nvf-hero-title-fw, 700)) !important;

    font-size: clamp(var(--nvf-hero-title-min, 2.1rem),
            var(--nvf-hero-title-fluid, 6.2vw),
            var(--nvf-slide-title-max,
                var(--nvf-hero-title-max,
                    /* fallback: si pas de max custom, on garde ton système actuel */
                    var(--nvf-slide-title-fs, var(--nvf-hero-title-fs, clamp(2.4rem, 5vw, 4.8rem)))))) !important;

    line-height: 1.05 !important;
}

@media (max-width: 768px) {
    .nvf-hero-slider .nvf-hero-slide .nvf-hero-slide-content h2.nvf-hero-slide-title {
        font-size: min(48px, clamp(1.95rem,
                6.3vw,
                var(--nvf-slide-title-max,
                    var(--nvf-hero-title-max,
                        var(--nvf-slide-title-fs, var(--nvf-hero-title-fs, 3.4rem)))))) !important;
    }
}

@media (max-width: 540px) {
    .nvf-hero-slider .nvf-hero-slide .nvf-hero-slide-content h2.nvf-hero-slide-title {
        font-size: min(40px, clamp(1.8rem,
                7.4vw,
                var(--nvf-slide-title-max,
                    var(--nvf-hero-title-max,
                        var(--nvf-slide-title-fs, var(--nvf-hero-title-fs, 3rem)))))) !important;
    }
}

.nvf-hero-slider .nvf-hero-slide .nvf-hero-slide-content p.nvf-hero-slide-subtitle {
    font-family: var(--nvf-slide-subtitle-ff,
            var(--nvf-hero-subtitle-ff, var(--nvf-body-font, system-ui, sans-serif))) !important;

    font-weight: var(--nvf-slide-subtitle-fw, var(--nvf-hero-subtitle-fw, 400)) !important;

    font-size: clamp(var(--nvf-hero-subtitle-min, 1rem),
            var(--nvf-hero-subtitle-fluid, 2.1vw),
            var(--nvf-slide-subtitle-max,
                var(--nvf-hero-subtitle-max,
                    var(--nvf-slide-subtitle-fs, var(--nvf-hero-subtitle-fs, clamp(1.05rem, 1.6vw, 1.35rem)))))) !important;

    line-height: 1.35 !important;
}

@media (max-width: 768px) {
    .nvf-hero-slider .nvf-hero-slide .nvf-hero-slide-content p.nvf-hero-slide-subtitle {
        font-size: min(24px, clamp(0.95rem,
                3.2vw,
                var(--nvf-slide-subtitle-max,
                    var(--nvf-hero-subtitle-max,
                        var(--nvf-slide-subtitle-fs, var(--nvf-hero-subtitle-fs, 1.35rem)))))) !important;
    }
}

@media (max-width: 540px) {
    .nvf-hero-slider .nvf-hero-slide .nvf-hero-slide-content p.nvf-hero-slide-subtitle {
        font-size: min(20px, clamp(0.85rem,
                3.6vw,
                var(--nvf-slide-subtitle-max,
                    var(--nvf-hero-subtitle-max,
                        var(--nvf-slide-subtitle-fs, var(--nvf-hero-subtitle-fs, 1.15rem)))))) !important;
    }
}

/* CTA typography (font only) */
.nvf-hero-slider .nvf-hero-cta {
    font-family: var(--nvf-slide-btn-ff,
            var(--nvf-hero-btn-ff, var(--nvf-body-font, system-ui, sans-serif))) !important;
    font-weight: var(--nvf-slide-btn-fw, var(--nvf-hero-btn-fw, 500)) !important;
}

/* -------------------------
   NovaFolio – HERO SLIDER
   Transitions (cinematic / modern) + anti-claquer (is-leaving)
   - Dépend de hero-slider.js:
     - ajoute .is-leaving pendant la sortie
     - pose --nvf-transition-ms sur le slider
   - Ne touche pas au layout / couleurs / typo
   ------------------------- */

.nvf-hero-slider {
    /* fallback si JS absent */
    --nvf-transition-ms: 650ms;

    /* easings */
    --nvf-ease-cinematic: cubic-bezier(.15, 1, .18, 1);
    --nvf-ease-modern: cubic-bezier(.2, .9, .2, 1);

    /* amplitudes */
    --nvf-cine-scale-in: 1.012;
    --nvf-cine-scale-out: 1.02;
    --nvf-cine-shift-y: 2px;

    --nvf-modern-shift-x: 18px;
    --nvf-blur-modern: 2px;

    /* content reveal */
    --nvf-content-shift-y: 10px;
    --nvf-content-d1: 140ms;
    --nvf-content-d2: 240ms;
    --nvf-content-d3: 340ms;
}

/* -------------------------
   IMPORTANT: anti "snap" du contenu
   (ne pas display:none pendant la sortie)
   ------------------------- */
.nvf-hero-slide:not(.is-active):not(.is-leaving) .nvf-hero-slide-content {
    display: none;
}

/* -------------------------
   Base commune (slides)
   - on ne force PAS transform ici pour éviter les conflits
   - on pose seulement les transitions
   ------------------------- */
.nvf-hero-slider .nvf-hero-slide {
    will-change: transform, opacity, filter;
    transition:
        opacity var(--nvf-transition-dur) linear,
        transform calc(var(--nvf-transition-dur) * 1.6) var(--nvf-ease-cinematic),
        filter var(--nvf-transition-dur) var(--nvf-ease-cinematic);
}

/* Stacking (évite flicker / flash) */
.nvf-hero-slider .nvf-hero-slide {
    z-index: 0;
}

.nvf-hero-slider .nvf-hero-slide.is-active {
    z-index: 2;
}

.nvf-hero-slider .nvf-hero-slide.is-leaving {
    z-index: 3;
}

/* -------------------------
   CINEMATIC (doux)
   ------------------------- */
.nvf-hero-slider.nvf-transition-cinematic .nvf-hero-slide {
    transform: scale(var(--nvf-cine-scale-in)) translateY(var(--nvf-cine-shift-y));
    filter: none;
}

.nvf-hero-slider.nvf-transition-cinematic .nvf-hero-slide.is-active {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1) translateY(0);
}

/* Sortie velours (anti-claquer) */
.nvf-hero-slider.nvf-transition-cinematic .nvf-hero-slide.is-leaving {
    opacity: 0;
    pointer-events: none;
    transform: scale(var(--nvf-cine-scale-out)) translateY(calc(var(--nvf-cine-shift-y) * -1));
    transition:
        opacity calc(var(--nvf-transition-dur) * 1.6) linear,
        transform calc(var(--nvf-transition-dur) * 2.2) var(--nvf-ease-cinematic);
}

/* -------------------------
   MODERN (net + micro slide + blur léger)
   ------------------------- */
.nvf-hero-slider.nvf-transition-modern .nvf-hero-slide {
    transform: translate3d(calc(var(--nvf-modern-shift-x) * var(--nvf-motion-amp)), calc(var(--nvf-modern-shift-y) * var(--nvf-motion-amp)), 0);
    filter: blur(var(--nvf-blur-modern));
    transition-timing-function: var(--nvf-ease-modern);
}

.nvf-hero-slider.nvf-transition-modern .nvf-hero-slide.is-active {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    filter: blur(0);
}

.nvf-hero-slider.nvf-transition-modern .nvf-hero-slide.is-leaving {
    opacity: 0;
    pointer-events: none;
    transform: translateX(calc(var(--nvf-modern-shift-x) * -1));
    filter: blur(var(--nvf-blur-modern));
    transition:
        opacity calc(var(--nvf-transition-dur) * 1.2) linear,
        transform calc(var(--nvf-transition-dur) * 1.6) var(--nvf-ease-modern),
        filter calc(var(--nvf-transition-dur) * 1.2) var(--nvf-ease-modern);
}

/* -------------------------
   Content reveal (titre / subtitle / CTA)
   NB: ces transitions sont désactivées quand data-enable-content-animation="true"
   car les keyframes nvf-fade-in-up prennent le contrôle d'opacity + transform.
   ------------------------- */
.nvf-hero-slider:not([data-enable-content-animation="true"]) .nvf-hero-slide-content>* {
    opacity: 0;
    transform: translateY(var(--nvf-content-shift-y));
    will-change: transform, opacity;
    transition:
        opacity calc(var(--nvf-transition-dur) * 0.9) linear,
        transform calc(var(--nvf-transition-dur) * 1.2) var(--nvf-ease-cinematic);
}

.nvf-hero-slider:not([data-enable-content-animation="true"]) .nvf-hero-slide.is-active .nvf-hero-slide-content>* {
    opacity: 1;
    transform: translateY(0);
}

/* sortie texte (évite snap) — actif même quand content-animation est activé :
   la sortie est gérée par transition (pas d'animation keyframe sur la sortie) */
.nvf-hero-slider .nvf-hero-slide.is-leaving .nvf-hero-slide-content>* {
    opacity: 0;
    transform: translateY(calc(var(--nvf-content-shift-y) * 0.6));
    transition:
        opacity calc(var(--nvf-transition-dur) * 1.1) linear,
        transform calc(var(--nvf-transition-dur) * 1.1) var(--nvf-ease-cinematic);
}

/* stagger */
.nvf-hero-slider .nvf-hero-slide.is-active .nvf-hero-slide-title {
    transition-delay: var(--nvf-content-d1);
}

.nvf-hero-slider .nvf-hero-slide.is-active .nvf-hero-slide-subtitle {
    transition-delay: var(--nvf-content-d2);
}

.nvf-hero-slider .nvf-hero-slide.is-active .nvf-hero-cta-wrapper {
    transition-delay: var(--nvf-content-d3);
}

/* Modern: easing du contenu */
.nvf-hero-slider.nvf-transition-modern .nvf-hero-slide-content>* {
    transition-timing-function: var(--nvf-ease-modern);
}

/* -------------------------
   Ken Burns (optionnel)
   - uniquement sur l'image, pas sur .nvf-hero-slide (évite conflits)
   - Supporte scale + pan dynamique via CSS variables
   - Duration définie par data-kb-duration
   ------------------------- */
@keyframes nvf-kenburns-base {
    from {
        transform: scale(1) translate(0, 0);
    }

    to {
        transform: scale(var(--nvf-kb-scale, 1.05)) translate(var(--nvf-kb-pan-x, 0), var(--nvf-kb-pan-y, 0));
    }
}

/* =========================================================
   KEN BURNS – NEW CONTROL SYSTEM (depuis éditeur)
   Utilise data-kenburns-enabled, duration, scale, pan-x, pan-y
   Animation appliquée par JavaScript (applyKenBurnsAnimation)
   qui lit les data-attributes et applique dynamiquement la durée
   ========================================================= */

/* Optionnel: styles de support pour Ken Burns */
.nvf-hero-slider[data-kenburns-enabled="true"] .nvf-hero-slide.is-active .nvf-hero-slide-img {
    /* Animation appliquée par JS (durée dynamique) */
    transform-origin: center center;
    will-change: transform;
}

/* Appliquer Ken Burns sur images actives (ancienne méthode - si data-kenburns="true") */
.nvf-hero-slider .nvf-hero-slide[data-kenburns="true"].is-active .nvf-hero-slide-img {
    animation: nvf-kenburns-base var(--nvf-kb-duration, 6s) ease-out both;
    transform-origin: center center;
}

/* Fallback: cinematic sans Ken Burns explicite (deprecated mais gardé pour compatibilité) */
.nvf-hero-slider.nvf-transition-cinematic:not([data-kenburns-enabled="true"]) .nvf-hero-slide.is-active .nvf-hero-slide-img {
    animation: nvf-kenburns-base 7s ease-out both;
    --nvf-kb-scale: 1.06;
}

.nvf-hero-slider .nvf-hero-slide.is-leaving .nvf-hero-slide-img {
    animation: none;
}

/* -------------------------
   Reduced motion
   ------------------------- */
@media (prefers-reduced-motion: reduce) {

    .nvf-hero-slider .nvf-hero-slide,
    .nvf-hero-slider .nvf-hero-slide-content>* {
        transition: none !important;
        transform: none !important;
        filter: none !important;
    }

    .nvf-hero-slider .nvf-hero-slide-img {
        animation: none !important;
        transform: none !important;
    }
}

/* ===========================
   PROGRESS BAR (autoplay)
   Thin bar at the bottom, fills left→right over
   --nvf-progress-duration (set by JS). Resets on slide change.
   =========================== */

.nvf-hero-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 25;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.18);
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Show only when autoplay is active and slider is ready */
.nvf-hero-slider.is-ready[data-autoplay="true"] .nvf-hero-progress {
    opacity: 1;
}

/* Paused: dim but keep visible */
.nvf-hero-slider.is-ready[data-autoplay="true"].nvf-progress-paused .nvf-hero-progress {
    opacity: 0.4;
}

.nvf-hero-progress__bar {
    height: 100%;
    width: 0;
    background: var(--nvf-hero-btn-bg, rgba(255, 255, 255, 0.85));
    border-radius: 0 2px 2px 0;
    will-change: width;
}

/* Running state: animate left→right */
.nvf-hero-progress__bar.is-running {
    width: 100%;
    transition: width var(--nvf-progress-duration, 5000ms) linear;
}

/* Card layout: bar inside the rounded card */
.nvf-hero-slider.nvf-hero-layout-card .nvf-hero-progress {
    border-radius: 0 0 var(--nvf-radius-card, 16px) var(--nvf-radius-card, 16px);
}

@media (prefers-reduced-motion: reduce) {
    .nvf-hero-progress {
        display: none !important;
    }
}

/* ===========================
   Presets — NovaFolio Hero (STYLE ONLY)
   - No spacing changes (spacing is user-controlled via nvf-space-*)
   - No behavior changes (no autoplay/transition forcing)
   - Only visual variables
   =========================== */

.nvf-hero-slider {
    /* Defaults premium (fallback) */
    --nvf-hero-content-max-width: clamp(46ch, 62vw, 78ch);
    --nvf-hero-overlay-mult: 1;

    /* micro “premium feel” levers */
    --nvf-hero-ui-opacity: 0.85;
    --nvf-hero-ui-blur: 14px;
    --nvf-hero-title-tracking: -0.01em;
    --nvf-hero-title-weight: 600;
}

/* Consume tokens (safe, non intrusive) */
.nvf-hero-slider .nvf-hero-slide-title {
    letter-spacing: var(--nvf-hero-title-ls, var(--nvf-hero-title-tracking));
    font-weight: var(--nvf-hero-title-weight);
}

.nvf-hero-slider .nvf-hero-nav,
.nvf-hero-slider .nvf-hero-dots {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.nvf-hero-slider .nvf-hero-nav {
    backdrop-filter: blur(var(--nvf-hero-ui-blur));
}

/* Show Navigation UI on hover */
.nvf-hero-slider:hover .nvf-hero-nav,
.nvf-hero-slider:hover .nvf-hero-dots {
    opacity: var(--nvf-hero-ui-opacity);
}

/* Force visible if toggle enabled */
.nvf-hero-slider[data-show-nav-arrows="true"] .nvf-hero-nav {
    opacity: var(--nvf-hero-ui-opacity);
}

.nvf-hero-slider[data-show-dots="true"] .nvf-hero-dots {
    opacity: var(--nvf-hero-ui-opacity);
}

/* ===========================
   Presets (STYLE ONLY)
   - No width here (layout controls width)
   =========================== */

/* Editorial */
.nvf-hero-slider.nvf-hero-preset-editorial {
    --nvf-hero-overlay-mult: 1;
    --nvf-hero-title-tracking: -0.015em;
    --nvf-hero-title-weight: 600;
    --nvf-hero-ui-opacity: 0.82;
}

/* Minimal */
.nvf-hero-slider.nvf-hero-preset-minimal {
    --nvf-hero-overlay-mult: 0.75;
    --nvf-hero-title-tracking: -0.005em;
    --nvf-hero-title-weight: 500;
    --nvf-hero-ui-opacity: 0.68;
    --nvf-hero-ui-blur: 10px;
}

/* Bold */
.nvf-hero-slider.nvf-hero-preset-bold {
    --nvf-hero-overlay-mult: 1.15;
    --nvf-hero-title-tracking: -0.02em;
    --nvf-hero-title-weight: 700;
    --nvf-hero-ui-opacity: 0.9;
}

/* Cinematic — style only (no width constraint) */
.nvf-hero-slider.nvf-hero-preset-cinematic {
    --nvf-hero-overlay-mult: 1.05;
    --nvf-hero-title-tracking: -0.02em;
    --nvf-hero-title-weight: 650;
    --nvf-hero-ui-opacity: 0.78;
    --nvf-hero-ui-blur: 16px;
}

/* Cinematic narrow ONLY when NOT full */
.nvf-hero-slider.nvf-hero-preset-cinematic:not(.nvf-hero-layout-full) {
    --nvf-hero-content-max-width: clamp(42ch, 56vw, 68ch);
}

/* Width token driven by layout */
.nvf-hero-slider.nvf-hero-layout-full {
    --nvf-hero-content-max-width: min(1800px, 95vw);
}

.nvf-hero-slider.nvf-hero-layout-card {
    --nvf-hero-content-max-width: min(760px, 92vw);
}


/* =========================================
   Hero Slider – Editor Preview (portfolio)
   (Editor-only safe)
========================================= */

.editor-styles-wrapper .nvf-hero-preview {
    position: relative;
    overflow: hidden;
    border-radius: var(--nvf-radius-m, 14px);
    background: var(--nvf-color-soft, #f3f4f6);
    padding: var(--nvf-space-m, 22px);
}

.editor-styles-wrapper .nvf-hero-preview-track {
    display: flex;
    gap: var(--nvf-space-m, 22px);
    align-items: stretch;
}

.editor-styles-wrapper .nvf-hero-preview-slide {
    flex: 0 0 72%;
    height: 230px;
    border-radius: var(--nvf-radius-m, 14px);

    /* ✅ VSCode-friendly: fallbacks explicites */
    background: linear-gradient(135deg,
            var(--nvf-color-border, #e5e7eb),
            var(--nvf-color-soft, #f3f4f6));

    position: relative;
}

.editor-styles-wrapper .nvf-hero-preview-slide.is-active {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
}

.editor-styles-wrapper .nvf-hero-preview-media {
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.editor-styles-wrapper .nvf-hero-preview-caption {
    position: absolute;
    left: 18px;
    bottom: 18px;
    color: var(--nvf-color-ink, #111827);
}

.editor-styles-wrapper .nvf-hero-preview-kicker {
    display: inline-block;
    font-size: 12px;
    opacity: 0.7;
    margin-bottom: 6px;
    color: var(--nvf-color-slate, #6b7280);
}

.editor-styles-wrapper .nvf-hero-preview-title {
    display: block;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--nvf-color-ink, #111827);
}

.editor-styles-wrapper .nvf-hero-preview-arrows {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.editor-styles-wrapper .nvf-hero-preview-arrows span {
    position: absolute;
    top: 50%;
    width: 34px;
    height: 34px;
    border-radius: var(--nvf-radius-pill, 999px);
    transform: translateY(-50%);

    background: rgba(17, 24, 39, 0.10);
    /* ink, mais doux */
}

.editor-styles-wrapper .nvf-hero-preview-arrows span:first-child {
    left: 12px;
}

.editor-styles-wrapper .nvf-hero-preview-arrows span:last-child {
    right: 12px;
}

.editor-styles-wrapper .nvf-preview-note {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--nvf-color-slate, #6b7280);
    opacity: 0.9;
}

/* ===================================
   100vh fullscreen — suppression du padding parent
   =================================== */
#nova-content:has(> .nvf-hero-slider--fullscreen:first-child) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
@media (max-width: 768px) {
    #nova-content:has(> .nvf-hero-slider--fullscreen:first-child) {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* ===================================
   CURTAIN / WIPE TRANSITION
   Clip-path reveal: the entering slide is unveiled
   via an animated inset() from right to left.
   =================================== */

.nvf-hero-slider.nvf-transition-curtain .nvf-hero-slide {
    transform: none;
    filter: none;
    clip-path: inset(0 100% 0 0);
    transition:
        opacity 0ms linear,
        clip-path calc(var(--nvf-transition-dur) * 1.8) cubic-bezier(.77, 0, .18, 1);
}

.nvf-hero-slider.nvf-transition-curtain .nvf-hero-slide.is-active {
    opacity: 1;
    pointer-events: auto;
    clip-path: inset(0 0 0 0);
}

.nvf-hero-slider.nvf-transition-curtain .nvf-hero-slide.is-leaving {
    opacity: 1;
    pointer-events: none;
    clip-path: inset(0 0 0 0);
    z-index: 1;
    transition:
        opacity calc(var(--nvf-transition-dur) * 2.4) linear calc(var(--nvf-transition-dur) * 1.6),
        clip-path 0ms linear calc(var(--nvf-transition-dur) * 2.4);
}

/* Content stagger for curtain */
.nvf-hero-slider.nvf-transition-curtain .nvf-hero-slide.is-active .nvf-hero-slide-title {
    transition-delay: calc(var(--nvf-transition-dur) * 0.6);
}

.nvf-hero-slider.nvf-transition-curtain .nvf-hero-slide.is-active .nvf-hero-slide-subtitle {
    transition-delay: calc(var(--nvf-transition-dur) * 0.8);
}

.nvf-hero-slider.nvf-transition-curtain .nvf-hero-slide.is-active .nvf-hero-cta-wrapper {
    transition-delay: calc(var(--nvf-transition-dur) * 1.0);
}

/* ===================================
   SPLIT-TEXT REVEAL
   Each .nvf-split-word gets a clip + translateY per word.
   Activated by data-split-text="true" on the slider.
   =================================== */

@keyframes nvf-split-word-in {
    from {
        opacity: 0;
        transform: translateY(100%);
        clip-path: inset(0 0 100% 0);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        clip-path: inset(0 0 0 0);
    }
}

.nvf-hero-slider[data-split-text="true"] .nvf-hero-slide-title {
    overflow: visible;
}

.nvf-split-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
}

.nvf-split-word-inner {
    display: inline-block;
    opacity: 0;
    transform: translateY(100%);
    will-change: transform, opacity;
}

/* Active slide: animate each word in with stagger via --nvf-sw-i */
.nvf-hero-slide.is-active .nvf-split-word-inner {
    animation: nvf-split-word-in 0.7s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: calc(0.08s * var(--nvf-sw-i, 0) + 0.15s);
}

/* Leaving slide: fade out quickly (no per-word stagger on exit) */
.nvf-hero-slide.is-leaving .nvf-split-word-inner {
    animation: none;
    opacity: 0;
    transform: translateY(-30%);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Reset when not active/leaving (ensures re-animation on return) */
.nvf-hero-slide:not(.is-active):not(.is-leaving) .nvf-split-word-inner {
    animation: none;
    opacity: 0;
    transform: translateY(100%);
}

/* Disable split-text animation if content-animation is also enabled (avoid conflict) */
.nvf-hero-slider[data-enable-content-animation="true"][data-split-text="true"] .nvf-hero-slide.is-active .nvf-hero-slide-title {
    animation: none;
    opacity: 1;
}

/* ===================================
   SCROLL-DOWN INDICATOR
   Animated line/chevron at the bottom of fullscreen heroes.
   =================================== */

.nvf-hero-scroll-indicator {
    position: absolute;
    bottom: clamp(24px, 4vh, 48px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease 1s;
}

.nvf-hero-slider.is-ready .nvf-hero-scroll-indicator {
    opacity: 1;
}

.nvf-hero-scroll-indicator__label {
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

.nvf-hero-scroll-indicator__line {
    width: 24px;
    height: 40px;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    border-radius: 12px;
    position: relative;
}

.nvf-hero-scroll-indicator__line::after {
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 3px;
    height: 8px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.85);
    will-change: transform, opacity;
    animation: nvf-scroll-dot 2s cubic-bezier(.4, 0, .6, 1) infinite;
}

@keyframes nvf-scroll-dot {
    0%   { transform: translate(-50%, 0); opacity: 1; }
    50%  { transform: translate(-50%, 16px); opacity: 0.3; }
    100% { transform: translate(-50%, 0); opacity: 1; }
}

/* Hide on short hero heights (not needed) */
.nvf-hero-slider--small .nvf-hero-scroll-indicator,
.nvf-hero-slider--medium .nvf-hero-scroll-indicator {
    display: none;
}

/* ===================================
   FRACTIONAL COUNTER (01 / 04)
   Replaces dots with editorial-style numeric counter.
   =================================== */

.nvf-hero-counter {
    position: absolute;
    bottom: var(--nvf-space-m, 22px);
    left: var(--nvf-space-l, 34px);
    z-index: 20;
    display: flex;
    align-items: baseline;
    gap: 0;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.85);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.nvf-hero-slider.is-ready .nvf-hero-counter {
    opacity: 1;
}

.nvf-hero-counter__current {
    font-size: clamp(2rem, 3vw, 3.2rem);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.02em;
    min-width: 1.6em;
}

.nvf-hero-counter__separator {
    font-size: 0.85rem;
    opacity: 0.4;
    margin: 0 6px;
    font-weight: 300;
}

.nvf-hero-counter__total {
    font-size: 0.9rem;
    opacity: 0.5;
    font-weight: 400;
}

/* Layout card: reposition counter */
.nvf-hero-slider.nvf-hero-layout-card .nvf-hero-counter {
    bottom: var(--nvf-space-s, 14px);
    left: var(--nvf-space-m, 22px);
}

/* ===================================
   PARALLAX HERO ON SCROLL
   True fixed-position background via JS-created <div> appended
   to <body>.  A clip-path (updated on scroll via rAF) restricts
   visibility to the slider's viewport bounds.

   WHY NOT background-attachment:fixed?
   It breaks when ANY ancestor has a CSS transform, and Chrome has
   compositing bugs that make it intermittent even with !important
   overrides.  This approach is immune because the fixed <div>
   lives directly on <body>, outside the slider DOM entirely.

   JS adds .nvf-parallax-active on the slider when the fixed layer
   is ready.  Without JS the images show normally (graceful fallback).
   =================================== */

/* 1) Force opacity-only crossfade — clean look with fixed bg */
.nvf-hero-slider[data-parallax="true"] .nvf-hero-slide {
    transform: none !important;
    will-change: auto !important;
    filter: none !important;
    clip-path: none !important;
    transition: opacity var(--nvf-transition-ms, 450ms) ease !important;
}

.nvf-hero-slider[data-parallax="true"] .nvf-hero-slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

.nvf-hero-slider[data-parallax="true"] .nvf-hero-slide.is-leaving {
    opacity: 0;
    pointer-events: none;
    transition: opacity calc(var(--nvf-transition-ms, 450ms) * 1.5) ease !important;
}

/* 2) When JS has created the fixed layer, hide in-slide imagery */
.nvf-hero-slider[data-parallax="true"].nvf-parallax-active {
    background: transparent !important;
}

.nvf-hero-slider[data-parallax="true"].nvf-parallax-active .nvf-hero-slide-media {
    background-image: none !important;
}

.nvf-hero-slider[data-parallax="true"].nvf-parallax-active .nvf-hero-slide-img {
    opacity: 0 !important;
    position: absolute !important;
    pointer-events: none;
}

/* 3) The fixed parallax container (appended to <body> by JS) */
.nvf-hero-parallax-fixed {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    will-change: clip-path;
}

.nvf-hero-parallax-fixed__img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.nvf-hero-parallax-fixed__img.is-active {
    opacity: 1;
}

/* ===================================
   ZOOM ON HOVER (image only)
   Subtle scale on hover (not during Ken Burns).
   =================================== */

.nvf-hero-slider[data-hover-zoom="true"] .nvf-hero-slide.is-active .nvf-hero-slide-img {
    transition: transform 0.8s cubic-bezier(.22, 1, .36, 1);
}

@media (hover: hover) {
    .nvf-hero-slider[data-hover-zoom="true"] .nvf-hero-slide.is-active:hover .nvf-hero-slide-img {
        transform: scale(1.04);
    }
}

/* ===================================
   REDUCED MOTION — NEW FEATURES
   =================================== */

@media (prefers-reduced-motion: reduce) {
    .nvf-hero-slider.nvf-transition-curtain .nvf-hero-slide {
        clip-path: none !important;
        transition: none !important;
    }

    .nvf-split-word-inner {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .nvf-hero-scroll-indicator__line::after {
        animation: none !important;
    }

    .nvf-hero-parallax-fixed {
        display: none !important;
    }

    .nvf-hero-slider[data-parallax="true"] .nvf-hero-slide-img {
        opacity: 1 !important;
        position: static !important;
    }

    .nvf-hero-slider[data-hover-zoom="true"] .nvf-hero-slide-img {
        transition: none !important;
        transform: none !important;
    }
}