/* =========================================================
   NovaFolio – Hero (Cover-like)
   Layers: image (absolute) + overlay (absolute) + inner content
   ========================================================= */

.nvf-hero {
  position: relative;
  width: 100%;
  display: flex;
  /* permet les alignements verticaux via classes */
  color: var(--wp--preset--color--foreground);
  overflow: clip;
  /* évite scrollbars quand image/parallax */
  isolation: isolate;
  /* empilement propre des calques */
}

/* Background image layer */
.nvf-hero__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  transform: translateZ(0);
  z-index: 0;
}

/* Parallax (desktop-friendly fallback) */
.nvf-hero--parallax .nvf-hero__image {
  background-attachment: fixed;
}

@media (prefers-reduced-motion: reduce) {
  .nvf-hero--parallax .nvf-hero__image {
    background-attachment: scroll;
  }
}

/* Overlay layer */
.nvf-hero__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  /* la couleur/gradient + opacité viennent du inline style (editor + PHP) */
}

.nvf-hero__inner-container {
  position: relative;
  width: 100%;
  max-width: var(--nvf-layout-hero-width, 1600px);
  margin-inline: auto;
  padding-top: var(--nvf-space-7);
  padding-bottom: var(--nvf-space-7);
  padding-left: clamp(1rem, 4vw, 3rem);
  padding-right: clamp(1rem, 4vw, 3rem);
  z-index: 2;
  /* IMPORTANT pour InnerBlocks */
  display: flex;
  flex-direction: column;

  /* defaults */
  justify-content: center;
  /* vertical */
  /* IMPORTANT: ne pas fixer l’alignement horizontal ici,
     il doit être piloté uniquement par nvf-hero--h-* */

}

.nvf-hero--content .nvf-hero__inner-container {
  max-width: var(--nvf-content-size, 1080px);
}

/* Split + "Content" width: le conteneur doit loger texte ET image côte à côte.
   Override la limite 1080px → image (~520px) + gap + texte (~560px min). */
.nvf-hero--split.nvf-hero--content .nvf-hero__inner-container {
  max-width: min(
    calc(var(--nvf-hero-media-size, 520px) + 640px),
    var(--nvf-wide-size, 1440px)
  );
}

/* Legacy content wrapper (si fallback PHP sans InnerBlocks) */
.nvf-hero__content {
  width: 100%;
  max-width: 72ch;
}

/* Vertical align = justify-content */
.nvf-hero--v-top .nvf-hero__inner-container {
  justify-content: flex-start;
}

.nvf-hero--v-center .nvf-hero__inner-container {
  justify-content: center;
}

.nvf-hero--v-bottom .nvf-hero__inner-container {
  justify-content: flex-end;
}

/* Horizontal align = align-items + text-align */
.nvf-hero--h-left .nvf-hero__inner-container {
  align-items: flex-start;
  text-align: left;
}

.nvf-hero--h-center .nvf-hero__inner-container {
  align-items: center;
  text-align: center;
}

.nvf-hero--h-right .nvf-hero__inner-container {
  align-items: flex-end;
  text-align: right;
}

/* Buttons alignment (Core Buttons) */
.nvf-hero--h-left .nvf-hero__inner-container .wp-block-buttons {
  justify-content: flex-start;
}

.nvf-hero--h-center .nvf-hero__inner-container .wp-block-buttons {
  justify-content: center;
}

.nvf-hero--h-right .nvf-hero__inner-container .wp-block-buttons {
  justify-content: flex-end;
}

.nvf-hero--h-center .nvf-hero__content {
  margin-inline: auto;
  text-align: center;
}

.nvf-hero--h-right .nvf-hero__content {
  margin-left: auto;
  text-align: right;
}

/* =========================================================
   Legacy typography (fallback PHP sans InnerBlocks)
   ========================================================= */

.nvf-hero__title {
  margin: 0 0 var(--nvf-space-3);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: var(--nvf-hero-title-ls, -0.02em);
  text-transform: var(--nvf-hero-title-transform, none);
  text-shadow: var(--nvf-hero-title-shadow, none);
}

.nvf-hero__subtitle {
  margin: 0 0 var(--nvf-space-5);
  line-height: 1.7;
  letter-spacing: var(--nvf-hero-subtitle-ls, normal);
  text-transform: var(--nvf-hero-subtitle-transform, none);
  opacity: 0.95;
  text-shadow: var(--nvf-hero-subtitle-shadow, none);
}

/* =========================================================
   Premium stack + spacing + presets (Nova Hero)
   ========================================================= */
.nvf-hero__stack {
  display: flex;
  flex-direction: column;
  align-items: inherit;
  /* suit hAlign */
}

/* Empêche la stack de prendre 100% de largeur -> l’alignement devient visible */
.nvf-hero__stack {
  width: auto;
  max-width: min(72ch, 100%);
}

/* Optionnel: si tu veux une largeur plus “premium” pour le hero */
.nvf-hero--wide .nvf-hero__stack {
  max-width: 100%;
}

.nvf-hero__stack {
  flex: 0 1 auto;
  justify-self: start;
}


.nvf-space-tight {
  gap: var(--nvf-hero-gap-tight,  8px);
}

.nvf-space-normal {
  gap: var(--nvf-hero-gap-normal, 24px);
}

.nvf-space-loose {
  gap: var(--nvf-hero-gap-loose,  56px);
}

/* Title/subtitle presets used by PHP + Editor classes */
.nvf-hero__title {
  margin: 0;
  line-height: 1.05;
  letter-spacing: var(--nvf-hero-title-ls, -0.02em);
  text-transform: var(--nvf-hero-title-transform, none);
  text-wrap: balance;
  overflow-wrap: break-word;
  word-break: break-word;
}

.nvf-hero__subtitle {
  margin: 0;
  line-height: 1.7;
  letter-spacing: var(--nvf-hero-subtitle-ls, normal);
  text-transform: var(--nvf-hero-subtitle-transform, none);
  opacity: .95;
  max-width: 70ch;
}

.nvf-hero-title-sm {
  font-size: clamp(1.8rem, 3vw, var(--nvf-hero-title-max, 2.6rem));
}

.nvf-hero-title-md {
  font-size: clamp(2.1rem, 4vw, var(--nvf-hero-title-max, 3.2rem));
}

.nvf-hero-title-lg {
  font-size: clamp(2.4rem, 5vw, var(--nvf-hero-title-max, 4.0rem));
}

.nvf-hero-title-xl {
  font-size: clamp(2.8rem, 6vw, var(--nvf-hero-title-max, 4.8rem));
}

.nvf-hero-subtitle-sm {
  font-size: clamp(0.95rem, 1.2vw, var(--nvf-hero-subtitle-max, 1.05rem));
}

.nvf-hero-subtitle-md {
  font-size: clamp(1.05rem, 1.5vw, var(--nvf-hero-subtitle-max, 1.25rem));
}

.nvf-hero-subtitle-lg {
  font-size: clamp(1.15rem, 1.8vw, var(--nvf-hero-subtitle-max, 1.45rem));
}

/* Buttons */
.nvf-hero__actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--nvf-space-3, 12px);
  flex-wrap: wrap;
}

/* When 2 buttons: disable the full-width forced by nvf-hero-btn-full */
.nvf-hero .nvf-hero__actions--pair .nvf-hero__button,
.nvf-hero .nvf-hero__actions--pair a.nvf-hero__button {
  width: auto !important;
  min-width: 0 !important;
  flex: 0 1 auto;
}

.nvf-hero__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: var(--nvf-hero-btn-ls, normal);
  text-transform: var(--nvf-hero-btn-transform, none);
  border-radius: var(--nvf-radius-pill, 999px);
  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

/* Button Styles (solid/outline/ghost/gradient) */
/* Solid (default) */
.nvf-hero__button[data-button-style="solid"],
.nvf-hero__button:not([data-button-style]) {
  background: var(--nvf-hero-btn-bg, var(--nvf-color-accent, #4F46E5));
  color: var(--nvf-hero-btn-color, #ffffff);
  border-color: var(--nvf-hero-btn-border, transparent);
}

/* Outline */
.nvf-hero__button[data-button-style="outline"] {
  background: transparent;
  color: var(--nvf-hero-btn-bg, var(--nvf-color-accent, #4F46E5));
  border: 2px solid var(--nvf-hero-btn-bg, var(--nvf-color-accent, #4F46E5));
}

/* Ghost */
.nvf-hero__button[data-button-style="ghost"] {
  background: rgba(0, 0, 0, 0.15);
  color: var(--nvf-hero-btn-color, #ffffff);
  border-color: transparent;
}

/* Gradient */
.nvf-hero__button[data-button-style="gradient"] {
  background: linear-gradient(135deg, var(--nvf-hero-btn-bg, var(--nvf-color-accent, #4F46E5)), var(--nvf-color-accent, #4F46E5));
  color: var(--nvf-hero-btn-color, #ffffff);
  border-color: transparent;
}

/* Hover effects */
.nvf-btn-hover-none:hover {
  transform: none;
  box-shadow: none;
  filter: brightness(0.88);
}

.nvf-btn-hover-lift:hover {
  transform: translateY(-2px);
}

.nvf-btn-hover-glow:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}

.nvf-btn-hover-underline {
  position: relative;
}

.nvf-btn-hover-underline::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: .45em;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
}

.nvf-btn-hover-underline:hover::after {
  opacity: .65;
  transform: translateY(0);
}

.nvf-hero--h-left .nvf-hero__stack {
  align-items: flex-start;
}

.nvf-hero--h-center .nvf-hero__stack {
  align-items: center;
}

.nvf-hero--h-right .nvf-hero__stack {
  align-items: flex-end;
}

.nvf-hero--h-left .nvf-hero__actions {
  justify-content: flex-start;
}

.nvf-hero--h-center .nvf-hero__actions {
  justify-content: center;
}

.nvf-hero--h-right .nvf-hero__actions {
  justify-content: flex-end;
}


/* ===============================
   Responsive Improvements (Breakpoints)
   =============================== */

/* Hero pleine largeur : ajustements mobile */
@media (max-width: 768px) {
  /* Mobile inset for content only (keeps full-bleed background) */
  .nvf-hero__content {
    padding-left: clamp(12px, 3.5vw, 20px);
    padding-right: clamp(12px, 3.5vw, 20px);
    box-sizing: border-box;
  }

  /* Stack responsive: cap width for readability on mobile */
  .nvf-hero__stack {
    max-width: min(72ch, 92vw);
  }

  /* Centrer le contenu sur mobile quelque soit l'alignement horizontal choisi */
  .nvf-hero--h-left .nvf-hero__stack,
  .nvf-hero--h-right .nvf-hero__stack {
    align-items: center;
  }

  .nvf-hero--h-left .nvf-hero__actions,
  .nvf-hero--h-right .nvf-hero__actions {
    justify-content: center;
  }

  .nvf-hero--h-left .nvf-hero__title,
  .nvf-hero--h-right .nvf-hero__title,
  .nvf-hero--h-left .nvf-hero__subtitle,
  .nvf-hero--h-right .nvf-hero__subtitle {
    text-align: center;
  }
}

/* 1024px : réduit légèrement le fluid des preset classes */
@media (max-width: 1024px) {
  .nvf-hero.nvf-hero .nvf-hero__title,
  .nvf-hero.nvf-hero [class*="nvf-hero-title-"] {
    font-size: clamp(1.8rem, 5.5vw, var(--nvf-hero-title-max, 3.6rem));
    margin-bottom: clamp(10px, 1.8vw, 18px);
  }

  .nvf-hero.nvf-hero .nvf-hero__subtitle,
  .nvf-hero.nvf-hero [class*="nvf-hero-subtitle-"] {
    font-size: clamp(0.95rem, 2.5vw, var(--nvf-hero-subtitle-max, 1.3rem)) !important;
    margin-bottom: clamp(14px, 2.5vw, 24px);
  }
}

/* 768px : mobile tablet */
@media (max-width: 768px) {
  .nvf-hero.nvf-hero .nvf-hero__title,
  .nvf-hero.nvf-hero [class*="nvf-hero-title-"] {
    font-size: clamp(1.5rem, 6vw, var(--nvf-hero-title-mobile, var(--nvf-hero-title-max, 2.8rem)));
    margin-bottom: clamp(8px, 1.5vw, 14px);
  }

  .nvf-hero.nvf-hero .nvf-hero__subtitle,
  .nvf-hero.nvf-hero [class*="nvf-hero-subtitle-"] {
    font-size: clamp(0.875rem, 3vw, var(--nvf-hero-subtitle-mobile, var(--nvf-hero-subtitle-max, 1.15rem))) !important;
    margin-bottom: clamp(12px, 2.5vw, 20px);
  }

  /* Bouton mobile : ciblage direct de l'élément (les variables héritées ne peuvent pas
     écraser une variable définie sur l'élément lui-même par la classe) */
  .nvf-hero .nvf-hero__button {
    font-size: var(--nvf-hero-btn-fs-mobile, clamp(0.78rem, 2vw, 0.88rem)) !important;
    padding: clamp(6px, 1.3vw, 9px) clamp(11px, 2vw, 16px) !important;
  }
}

/* 540px : mobile étroit */
@media (max-width: 540px) {
  .nvf-hero.nvf-hero .nvf-hero__title,
  .nvf-hero.nvf-hero [class*="nvf-hero-title-"] {
    font-size: var(--nvf-hero-title-fs-narrow, clamp(1.3rem, 5.5vw, var(--nvf-hero-title-mobile, var(--nvf-hero-title-max, 2rem))));
    margin-bottom: clamp(6px, 1.2vw, 10px);
  }

  .nvf-hero.nvf-hero .nvf-hero__subtitle,
  .nvf-hero.nvf-hero [class*="nvf-hero-subtitle-"] {
    font-size: var(--nvf-hero-subtitle-fs-mobile, clamp(0.8rem, 2.5vw, var(--nvf-hero-subtitle-mobile, var(--nvf-hero-subtitle-max, 1rem)))) !important;
    margin-bottom: clamp(10px, 2vw, 14px);
    max-width: 90vw;
  }

  /* Bouton mobile étroit : ciblage direct */
  .nvf-hero .nvf-hero__button {
    font-size: var(--nvf-hero-btn-fs-narrow, var(--nvf-hero-btn-fs, 0.76rem)) !important;
    padding: 6px 11px !important;
  }
}


/* ===============================
   Premium Split Layout (Nova Hero)
   =============================== */

.nvf-hero__split {
  display: block;
}

.nvf-hero__media {
  display: none;
}

.nvf-hero--split .nvf-hero__split {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(var(--nvf-space-4, 16px), 2.4vw, var(--nvf-space-8, 3rem));
}

.nvf-hero--split.nvf-hero--media-left .nvf-hero__split {
  flex-direction: row-reverse;
}

.nvf-hero--split .nvf-hero__content {
  flex: 1 1 0;
  min-width: clamp(260px, 42%, 560px); /* protection anti-écrasement */
  max-width: none;
}

.nvf-hero--split.nvf-hero--content .nvf-hero__content {
  max-width: min(72ch, 100%);
}

.nvf-hero--split .nvf-hero__content .nvf-hero__stack {
  width: 100%;
}

.nvf-hero--split.nvf-hero--h-left .nvf-hero__content {
  text-align: left;
}

.nvf-hero--split.nvf-hero--h-center .nvf-hero__content {
  text-align: center;
}

.nvf-hero--split.nvf-hero--h-right .nvf-hero__content {
  text-align: right;
}

.nvf-hero--split .nvf-hero__media {
  display: block;
  flex: 0 0 auto;
  width: clamp(240px, 32vw, var(--nvf-hero-media-size, 520px));
  max-width: 100%;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  overflow: hidden;
  position: relative;
  background-position: 50% 50%;
}

.nvf-hero--split.nvf-hero--media-right .nvf-hero__media {
  margin-left: auto;
}

.nvf-hero--split.nvf-hero--media-left .nvf-hero__media {
  margin-right: auto;
}

@media (max-width: 1200px) {
  .nvf-hero--split .nvf-hero__split {
    gap: clamp(var(--nvf-space-3, 12px), 1.8vw, var(--nvf-space-6, 24px));
    padding-left: clamp(12px, 3vw, 24px);
    padding-right: clamp(12px, 3vw, 24px);
  }
}

.nvf-hero--split.nvf-hero--media-shadow .nvf-hero__media {
  box-shadow: var(--nvf-shadow-m, 0 20px 60px rgba(0, 0, 0, .35));
}

.nvf-hero--split.nvf-hero--media-glow .nvf-hero__media::before {
  content: "";
  position: absolute;
  inset: -35%;
  background: radial-gradient(circle at 30% 30%,
      var(--nvf-color-accent-soft, rgba(99, 102, 241, .35)),
      transparent 60%);
  filter: blur(26px);
  opacity: 0.9;
  pointer-events: none;
}

.nvf-hero__media--circle {
  border-radius: 50%;
}

.nvf-hero__media--rounded {
  border-radius: var(--nvf-radius-l, 16px);
}

.nvf-hero__media--blob {
  border-radius: 42% 58% 55% 45% / 45% 40% 60% 55%;
}

@media (max-width: 860px) {
  .nvf-hero--split .nvf-hero__split {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--nvf-space-6, 2rem);
  }

  .nvf-hero--split .nvf-hero__content {
    width: 100%;
    max-width: min(72ch, 100%);
    padding-left: clamp(12px, 3.5vw, 20px);
    padding-right: clamp(12px, 3.5vw, 20px);
    box-sizing: border-box;
  }

  .nvf-hero--split.nvf-hero--media-left .nvf-hero__split {
    flex-direction: column;
  }

  .nvf-hero--split .nvf-hero__media {
    width: 80vw;
    max-width: 80vw;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 600px) {
  .nvf-hero--split .nvf-hero__media {
    width: 80vw;
    max-width: 80vw;
  }
}


/* === Premium overrides to resist theme button styles === */
.nvf-hero.nvf-hero .nvf-hero__title {
  color: var(--nvf-hero-title-color, inherit);
}

/* Hero button colors (front) */
.wp-block-novafolio-hero .nvf-hero__button.wp-element-button {
  background-color: var(--nvf-hero-btn-bg, var(--nvf-color-accent, #4F46E5)) !important;
  color: var(--nvf-hero-btn-color, #fff) !important;
  border-color: var(--nvf-hero-btn-border, transparent) !important;
  background-image: none !important;
}

.nvf-hero--parallax .nvf-hero__image {
  background-attachment: fixed;
}

.nvf-hero__media {
  background-image: var(--nvf-hero-media-url);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* =========================================================
   FIX Parallax (background-attachment: fixed)
   - "transform" sur un parent/enfant casse souvent le fixed
   - overflow: clip peut empêcher l'effet selon navigateurs
   ========================================================= */

.nvf-hero--parallax {
  overflow: hidden;
  /* au lieu de clip pour éviter bugs fixed */
}

.nvf-hero--parallax .nvf-hero__image {
  transform: none !important;
  /* IMPORTANT */
  will-change: auto !important;
  background-attachment: fixed;
}

/* ─── Lenis absent (scroll natif) ─────────────────────────────────────────
   Lenis applique un transform CSS sur <html>, ce qui a pour effet de bord
   de neutraliser background-attachment:fixed (comportement browser standard).
   Sans Lenis (scroll natif), le fixed est restauré et le background du Hero
   déborde visuellement dans les sections voisines.
   Solution : désactiver le parallax quand Lenis n'a pas initialisé sa classe.
   Lenis ajoute la classe `.lenis` sur <html> dès son init.
   ─────────────────────────────────────────────────────────────────────── */
html:not(.lenis) .nvf-hero--parallax .nvf-hero__image {
  background-attachment: scroll !important;
}

.nvf-hero__button {
  background: var(--nvf-hero-btn-bg, var(--nvf-color-accent));
  color: var(--nvf-hero-btn-color, #fff);
  border: 1px solid var(--nvf-hero-btn-border, transparent);
}

.nvf-hero__button:hover {
  background: var(--nvf-hero-btn-hover-bg, var(--nvf-hero-btn-bg, var(--nvf-color-accent)));
  color: var(--nvf-hero-btn-hover-color, var(--nvf-hero-btn-color, #fff));
  border-color: var(--nvf-hero-btn-hover-border, var(--nvf-hero-btn-border, transparent));
  filter: brightness(0.88);
}

/* Sécurité accessibilité */
@media (prefers-reduced-motion: reduce) {
  .nvf-hero--parallax .nvf-hero__image {
    background-attachment: scroll;
  }
}

@media (max-width: 900px) {
  .nvf-hero:not(.nvf-hero--split) .nvf-hero__media {
    width: min(var(--nvf-hero-media-size, 520px), 80vw);
    max-width: 80vw;
    margin: 24px auto 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .nvf-hero.nvf-hero .nvf-hero__title {
    font-size: var(--nvf-hero-title-fs-tablet, clamp(36px, 7vw, 58px));
  }
}

@media (max-width: 600px) {
  .nvf-hero:not(.nvf-hero--split) .nvf-hero__media {
    width: 80vw;
    max-width: 80vw;
  }
}

@media (max-width: 480px) {
  .nvf-hero:not(.nvf-hero--split) .nvf-hero__media {
    width: 80vw;
    max-width: 80vw;
  }
}

/* =========================================================
   Presets — force front (résiste aux styles du thème)
   ========================================================= */

/* TITRES */
.nvf-hero .nvf-hero__title.nvf-hero-title-sm {
  font-size: var(--nvf-hero-title-fs, clamp(1.8rem, 3vw, var(--nvf-hero-title-max, 2.6rem))) !important;
}

.nvf-hero .nvf-hero__title.nvf-hero-title-md {
  font-size: var(--nvf-hero-title-fs, clamp(2.1rem, 4vw, var(--nvf-hero-title-max, 3.2rem))) !important;
}

.nvf-hero .nvf-hero__title.nvf-hero-title-lg {
  font-size: var(--nvf-hero-title-fs, clamp(2.4rem, 5vw, var(--nvf-hero-title-max, 4.0rem))) !important;
}

.nvf-hero .nvf-hero__title.nvf-hero-title-xl {
  font-size: var(--nvf-hero-title-fs, clamp(2.8rem, 6vw, var(--nvf-hero-title-max, 4.8rem))) !important;
}

/* SOUS-TITRES */
/* SOUS-TITRES */
.nvf-hero p.nvf-hero__subtitle.nvf-hero-subtitle-sm {
  font-size: var(--nvf-hero-subtitle-fs, clamp(0.95rem, 1.2vw, var(--nvf-hero-subtitle-max, 1.05rem))) !important;
}

.nvf-hero p.nvf-hero__subtitle.nvf-hero-subtitle-md {
  font-size: var(--nvf-hero-subtitle-fs, clamp(1.05rem, 1.5vw, var(--nvf-hero-subtitle-max, 1.25rem))) !important;
}

.nvf-hero p.nvf-hero__subtitle.nvf-hero-subtitle-lg {
  font-size: var(--nvf-hero-subtitle-fs, clamp(1.15rem, 1.8vw, var(--nvf-hero-subtitle-max, 1.45rem))) !important;
}

/* BOUTONS (tailles + padding) */
.nvf-hero a.nvf-hero__button.nvf-hero-btn-sm {
  padding: var(--nvf-hero-btn-py, .65em) var(--nvf-hero-btn-px, 1.1em) !important;
  font-size: var(--nvf-hero-btn-fs, .92rem) !important;
}

.nvf-hero a.nvf-hero__button.nvf-hero-btn-md {
  padding: var(--nvf-hero-btn-py, .85em) var(--nvf-hero-btn-px, 1.35em) !important;
  font-size: var(--nvf-hero-btn-fs, 1rem) !important;
}

.nvf-hero a.nvf-hero__button.nvf-hero-btn-lg {
  padding: var(--nvf-hero-btn-py, 1.05em) var(--nvf-hero-btn-px, 1.65em) !important;
  font-size: var(--nvf-hero-btn-fs, 1.05rem) !important;
}

.nvf-hero a.nvf-hero__button.nvf-hero-btn-full {
  padding: var(--nvf-hero-btn-py, .95em) var(--nvf-hero-btn-px, 1.5em) !important;
  width: min(420px, 100%) !important;
}

/* Quand 2 boutons sont présents : annuler la largeur forcée de btn-full.
   Spécificité (0,4,1) > (0,3,1) de la règle ci-dessus — doit rester APRÈS. */
.nvf-hero .nvf-hero__actions--pair a.nvf-hero__button.nvf-hero-btn-full,
.nvf-hero .nvf-hero__actions--pair a.nvf-hero__button {
  width: auto !important;
  min-width: 0 !important;
}

/* =========================================================
   HERO BUTTON PRESETS (scopés uniquement au bloc Hero)
   Neutralisés : le système de variables + clamp() gère tout
   ========================================================= */
/* (règles en dur supprimées — géré par .nvf-hero-btn-* variables) */

/* =========================================================
   NVF Hero Contract — preset engine (safe add-on)
   Works for: .nvf-hero AND .nvf-hero-slider (if you add class)
   ========================================================= */

/* 1) Final rules consume variables (single source of truth) */
.nvf-hero.nvf-hero .nvf-hero__title {
  color: var(--nvf-hero-title-color, inherit);
  font-size: var(--nvf-hero-title-fs, inherit);
  font-family: var(--nvf-hero-title-ff, inherit);
  font-weight: var(--nvf-hero-title-fw, inherit);
}

.nvf-hero.nvf-hero .nvf-hero__subtitle {
  color: var(--nvf-hero-subtitle-color, inherit);
  font-size: var(--nvf-hero-subtitle-fs, inherit) !important;
  font-family: var(--nvf-hero-subtitle-ff, inherit) !important;
  font-weight: var(--nvf-hero-subtitle-fw, inherit);
  line-height: var(--nvf-hero-subtitle-lh, inherit) !important;
}

/* Bouton : consomme toutes les variables en un seul bloc */
.nvf-hero .nvf-hero__button {
  font-family:    var(--nvf-hero-btn-ff, inherit);
  font-weight:    var(--nvf-hero-btn-fw, inherit);
  font-size:      var(--nvf-hero-btn-fs, 1rem);
  border-radius:  var(--nvf-hero-btn-radius, 999px);
  padding-top:    var(--nvf-hero-btn-py, .85em);
  padding-bottom: var(--nvf-hero-btn-py, .85em);
  padding-left:   var(--nvf-hero-btn-px, 1.35em);
  padding-right:  var(--nvf-hero-btn-px, 1.35em);
  min-width:      var(--nvf-hero-btn-minw, auto);
}

/* 2) Size classes -> set RESPONSIVE variables via clamp() */
.nvf-hero-title-sm {
  --nvf-hero-title-fs: clamp(1.8rem, 3vw, var(--nvf-hero-title-max, 2.6rem));
}

.nvf-hero-title-md {
  --nvf-hero-title-fs: clamp(2.1rem, 4vw, var(--nvf-hero-title-max, 3.2rem));
}

.nvf-hero-title-lg {
  --nvf-hero-title-fs: clamp(2.4rem, 5vw, var(--nvf-hero-title-max, 4.0rem));
}

.nvf-hero-title-xl {
  --nvf-hero-title-fs: clamp(2.8rem, 6vw, var(--nvf-hero-title-max, 4.8rem));
}

.nvf-hero-subtitle-sm {
  --nvf-hero-subtitle-fs: clamp(0.95rem, 1.2vw, var(--nvf-hero-subtitle-max, 1.05rem));
}

.nvf-hero-subtitle-md {
  --nvf-hero-subtitle-fs: clamp(1.05rem, 1.5vw, var(--nvf-hero-subtitle-max, 1.25rem));
}

.nvf-hero-subtitle-lg {
  --nvf-hero-subtitle-fs: clamp(1.15rem, 1.8vw, var(--nvf-hero-subtitle-max, 1.45rem));
}

/* Button size classes -> responsive via clamp() */
/* btn-* classes : --nvf-hero-btn-fs-max / py-max / px-max sont posées par PHP sur le wrapper
   → consommées ici comme borne max du clamp (pattern identique à title-max / subtitle-max) */
.nvf-hero-btn-sm {
  --nvf-hero-btn-fs: clamp(0.82rem, 1.2vw, var(--nvf-hero-btn-fs-max, 0.95rem));
  --nvf-hero-btn-py: clamp(.5em, .8vw, var(--nvf-hero-btn-py-max, .65em));
  --nvf-hero-btn-px: clamp(.9em, 1.1vw, var(--nvf-hero-btn-px-max, 1.1em));
}

.nvf-hero-btn-md {
  --nvf-hero-btn-fs: clamp(0.9rem, 1.3vw, var(--nvf-hero-btn-fs-max, 1.05rem));
  --nvf-hero-btn-py: clamp(.65em, .9vw, var(--nvf-hero-btn-py-max, .85em));
  --nvf-hero-btn-px: clamp(1.1em, 1.4vw, var(--nvf-hero-btn-px-max, 1.35em));
}

.nvf-hero-btn-lg {
  --nvf-hero-btn-fs: clamp(0.95rem, 1.5vw, var(--nvf-hero-btn-fs-max, 1.12rem));
  --nvf-hero-btn-py: clamp(.8em, 1.0vw, var(--nvf-hero-btn-py-max, 1.05em));
  --nvf-hero-btn-px: clamp(1.3em, 1.7vw, var(--nvf-hero-btn-px-max, 1.65em));
}

.nvf-hero-btn-full {
  --nvf-hero-btn-minw: min(420px, 100%);
}

/* 3) Style presets — class-based (PHP outputs .nvf-hero--preset-*) */
.nvf-hero--preset-editorial {
  --nvf-hero-title-fs: clamp(44px, 6vw, 78px);
  --nvf-hero-subtitle-fs: clamp(18px, 2.2vw, 38px);
  --nvf-hero-btn-fs: 1rem;
  --nvf-hero-btn-py: .85em;
  --nvf-hero-btn-px: 1.35em;
}

.nvf-hero--preset-gallery {
  --nvf-hero-title-fs: clamp(36px, 5vw, 64px);
  --nvf-hero-subtitle-fs: clamp(16px, 1.8vw, 26px);
  --nvf-hero-btn-fs: .98rem;
  --nvf-hero-btn-py: .8em;
  --nvf-hero-btn-px: 1.25em;
}

.nvf-hero--preset-bold {
  --nvf-hero-title-fs: clamp(52px, 7vw, 92px);
  --nvf-hero-subtitle-fs: clamp(18px, 2.4vw, 42px);
  --nvf-hero-btn-fs: 1.05rem;
  --nvf-hero-btn-py: .95em;
  --nvf-hero-btn-px: 1.45em;
}

/* =========================================================
   Responsive overrides — AFTER presets (source-order wins
   at equal specificity + !important)
   ========================================================= */
@media (max-width: 1024px) {
  .nvf-hero .nvf-hero__title[class*="nvf-hero-title-"] {
    font-size: clamp(2rem, 5vw, var(--nvf-hero-title-max, 3.6rem)) !important;
  }
  .nvf-hero p.nvf-hero__subtitle[class*="nvf-hero-subtitle-"] {
    font-size: clamp(1.05rem, 2.2vw, var(--nvf-hero-subtitle-max, 1.3rem)) !important;
  }
}

@media (max-width: 768px) {
  .nvf-hero .nvf-hero__title[class*="nvf-hero-title-"] {
    font-size: clamp(1.75rem, 5.5vw, var(--nvf-hero-title-mobile, var(--nvf-hero-title-max, 2.8rem))) !important;
  }
  .nvf-hero p.nvf-hero__subtitle[class*="nvf-hero-subtitle-"] {
    font-size: clamp(1rem, 2.8vw, var(--nvf-hero-subtitle-mobile, var(--nvf-hero-subtitle-max, 1.15rem))) !important;
  }
}

@media (max-width: 540px) {
  .nvf-hero .nvf-hero__title[class*="nvf-hero-title-"] {
    font-size: clamp(1.65rem, 7vw, var(--nvf-hero-title-mobile, var(--nvf-hero-title-max, 2.4rem))) !important;
  }
  .nvf-hero p.nvf-hero__subtitle[class*="nvf-hero-subtitle-"] {
    font-size: clamp(0.95rem, 3.5vw, var(--nvf-hero-subtitle-mobile, var(--nvf-hero-subtitle-max, 1.05rem))) !important;
  }
}

/* -----------------------------------------
   Video background
----------------------------------------- */
.nvf-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Quand une vidéo est active, on masque l'image statique */
.nvf-hero--has-video .nvf-hero__image {
  display: none;
}

/* =========================================================
   Full-screen Hero — suppress #nova-content padding
   When a full-width hero is present, the container padding
   (top AND bottom) is unnecessary and creates visible gaps.
   ========================================================= */
body:not(.blog):not(.archive):not(.category):not(.tag):not(.search) #nova-content:has(.wp-block-novafolio-hero.alignfull),
body:not(.blog):not(.archive):not(.category):not(.tag):not(.search) #nova-content:has(.wp-block-novafolio-section .wp-block-novafolio-hero.alignfull),
body:not(.blog):not(.archive):not(.category):not(.tag):not(.search) #nova-content:has(.entry-content > .wp-block-novafolio-hero),
body:not(.blog):not(.archive):not(.category):not(.tag):not(.search) #nova-content:has(.entry-content > .wp-block-novafolio-section .wp-block-novafolio-hero) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

@media (max-width: 768px) {
  body:not(.blog):not(.archive):not(.category):not(.tag):not(.search) #nova-content:has(.wp-block-novafolio-hero.alignfull),
  body:not(.blog):not(.archive):not(.category):not(.tag):not(.search) #nova-content:has(.wp-block-novafolio-section .wp-block-novafolio-hero.alignfull),
  body:not(.blog):not(.archive):not(.category):not(.tag):not(.search) #nova-content:has(.entry-content > .wp-block-novafolio-hero),
  body:not(.blog):not(.archive):not(.category):not(.tag):not(.search) #nova-content:has(.entry-content > .wp-block-novafolio-section .wp-block-novafolio-hero) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* =========================================================
   Entry Animations — Nova Hero
   Triggered by IntersectionObserver adding .nvf-hero--anim-played
   ========================================================= */

@keyframes nvf-fade-in {
  from { opacity: 0 }
  to   { opacity: 1 }
}

@keyframes nvf-slide-up {
  from { opacity: 0; transform: translateY(32px) }
  to   { opacity: 1; transform: translateY(0) }
}

@keyframes nvf-slide-left {
  from { opacity: 0; transform: translateX(-32px) }
  to   { opacity: 1; transform: translateX(0) }
}

@keyframes nvf-zoom-in {
  from { opacity: 0; transform: scale(0.92) }
  to   { opacity: 1; transform: scale(1) }
}

/* Before animation plays: hide children */
.nvf-hero[data-entry-anim]:not(.nvf-hero--anim-played) .nvf-hero__stack > * {
  opacity: 0;
  will-change: opacity, transform;
}

/* Editor: IntersectionObserver doesn't run → keep content visible */
.block-editor-block-list__layout .nvf-hero[data-entry-anim] .nvf-hero__stack > *,
.block-editor-block-list__layout .nvf-hero[data-entry-anim]:not(.nvf-hero--anim-played) .nvf-hero__stack > * {
  opacity: 1 !important;
  animation: none !important;
}

/* After animation plays: apply the right keyframe */
.nvf-hero--anim-played[data-entry-anim="fade"] .nvf-hero__stack > * {
  animation: nvf-fade-in 0.85s cubic-bezier(.16, 1, .3, 1) both;
}

.nvf-hero--anim-played[data-entry-anim="slide-up"] .nvf-hero__stack > * {
  animation: nvf-slide-up 0.85s cubic-bezier(.16, 1, .3, 1) both;
}

.nvf-hero--anim-played[data-entry-anim="slide-left"] .nvf-hero__stack > * {
  animation: nvf-slide-left 0.85s cubic-bezier(.16, 1, .3, 1) both;
}

.nvf-hero--anim-played[data-entry-anim="zoom"] .nvf-hero__stack > * {
  animation: nvf-zoom-in 0.7s cubic-bezier(.16, 1, .3, 1) both;
}

/* Stagger: each child slightly delayed */
.nvf-hero--anim-played[data-entry-anim] .nvf-hero__stack > *:nth-child(1) { animation-delay: 0ms }
.nvf-hero--anim-played[data-entry-anim] .nvf-hero__stack > *:nth-child(2) { animation-delay: 150ms }
.nvf-hero--anim-played[data-entry-anim] .nvf-hero__stack > *:nth-child(3) { animation-delay: 300ms }
.nvf-hero--anim-played[data-entry-anim] .nvf-hero__stack > *:nth-child(n+4) { animation-delay: 450ms }

/* Accessibility: disable animations if user prefers */
@media (prefers-reduced-motion: reduce) {
  .nvf-hero[data-entry-anim] .nvf-hero__stack > * {
    opacity: 1 !important;
    animation: none !important;
  }
}

/* =========================================================
   Secondary button — full parity with primary
   Colors driven by CSS vars set inline on the element.
   wp-element-button !important is overridden here.
   ========================================================= */

/* Solid (mirrors primary, just with its own --nvf-hero-btn-bg) */
.wp-block-novafolio-hero .nvf-hero__button--secondary[data-button-style="solid"],
.wp-block-novafolio-hero .nvf-hero__button--secondary:not([data-button-style]) {
  background-color: var(--nvf-hero-btn-bg, var(--nvf-color-accent, #4F46E5)) !important;
  background-image: none !important;
  color: var(--nvf-hero-btn-color, #fff) !important;
  border-color: var(--nvf-hero-btn-border, transparent) !important;
}

/* Outline: transparent bg, border + text in --nvf-hero-btn-bg */
.wp-block-novafolio-hero .nvf-hero__button--secondary[data-button-style="outline"] {
  background-color: transparent !important;
  background-image: none !important;
  border: 2px solid var(--nvf-hero-btn-bg, var(--nvf-color-accent, #4F46E5)) !important;
  color: var(--nvf-hero-btn-bg, var(--nvf-color-accent, #4F46E5)) !important;
}

/* Ghost */
.wp-block-novafolio-hero .nvf-hero__button--secondary[data-button-style="ghost"] {
  background-color: rgba(0, 0, 0, 0.15) !important;
  background-image: none !important;
  border-color: transparent !important;
  color: var(--nvf-hero-btn-color, #fff) !important;
}

/* Gradient */
.wp-block-novafolio-hero .nvf-hero__button--secondary[data-button-style="gradient"] {
  background: linear-gradient(135deg, var(--nvf-hero-btn-bg, var(--nvf-color-accent, #4F46E5)), var(--nvf-color-accent, #4F46E5)) !important;
  background-image: none !important;
  color: var(--nvf-hero-btn-color, #fff) !important;
  border-color: transparent !important;
}

/* Hover: all styles — color transition via CSS vars */
.wp-block-novafolio-hero .nvf-hero__button--secondary:hover {
  background-color: var(--nvf-hero-btn-hover-bg, var(--nvf-hero-btn-bg, var(--nvf-color-accent, #4F46E5))) !important;
  color: var(--nvf-hero-btn-hover-color, var(--nvf-hero-btn-color, #fff)) !important;
  border-color: var(--nvf-hero-btn-hover-border, var(--nvf-hero-btn-border, transparent)) !important;
}

/* Outline hover: keep transparent bg + darken border */
.wp-block-novafolio-hero .nvf-hero__button--secondary[data-button-style="outline"]:hover {
  background-color: var(--nvf-hero-btn-bg, var(--nvf-color-accent, #4F46E5)) !important;
  color: var(--nvf-hero-btn-color, #fff) !important;
  border-color: var(--nvf-hero-btn-bg, var(--nvf-color-accent, #4F46E5)) !important;
}

/* Ghost hover */
.wp-block-novafolio-hero .nvf-hero__button--secondary[data-button-style="ghost"]:hover {
  background-color: rgba(0, 0, 0, 0.3) !important;
}