/* NOVA — fichier CSS séparé automatiquement à partir de style.css. */

.nova-hero-bg{
  position: relative;
  overflow: hidden !important;
  isolation: isolate;
  z-index: 0;

  background:
    radial-gradient(
      ellipse 100% 100% at 0% 0%,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(255, 255, 255, 0.28) 48%,
      transparent 72%
    ),
    radial-gradient(
      ellipse 75% 100% at 100% 100%,
      rgba(28, 32, 43, 0.07) 0%,
      transparent 62%
    ),
    linear-gradient(
      135deg,
      #f8f9fc 0%,
      #e9ebf1 52%,
      #f4f5f8 100%
    ) !important;
}

.nova-hero-bg::before{
  content: "";
  position: absolute;
  top: -115%;
  left: -35%;
  width: 170%;
  height: 300%;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;

  background: conic-gradient(
    from 215deg at 50% 50%,
    transparent 0deg,
    rgba(255, 255, 255, 0.04) 28deg,
    rgba(255, 255, 255, 0.30) 52deg,
    rgba(255, 255, 255, 0.88) 76deg,
    rgba(255, 255, 255, 0.38) 102deg,
    rgba(255, 255, 255, 0.06) 130deg,
    transparent 158deg,
    transparent 360deg
  );

  filter: blur(40px);

  animation:
    novaHeroSilk 13s
    cubic-bezier(0.45, 0, 0.55, 1)
    infinite alternate;
}

.nova-hero-bg::after{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.26) 0%,
      transparent 34%,
      transparent 76%,
      rgba(255, 255, 255, 0.20) 100%
    ),
    radial-gradient(
      ellipse 95% 85% at 50% 42%,
      transparent 58%,
      rgba(24, 28, 38, 0.035) 100%
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 -1px 0 rgba(24, 28, 38, 0.05);
}

.nova-hero-bg > *{
  position: relative;
  z-index: 2;
}

.nova-fade, .nova-fade *{
    box-sizing: border-box;
  }

.nova-fade{
    --nova-fade-ink: #161616;
    --nova-fade-muted: rgba(22, 22, 22, 0.62);
    --nova-fade-progress: 0%;
    --nova-fade-meter-progress: 0%;
    --nova-fade-progress-number: 0;
    --nova-fade-before-opacity: 1;
    --nova-fade-after-opacity: 1;
    --nova-fade-wash-opacity: 0;
    --nova-fade-line-opacity: 0;
    --nova-fade-interactive-position: 50%;
    position: relative;
    width: 100%;
    height: auto;
    min-height: 0;
    color: var(--nova-fade-ink);
    isolation: isolate;
  }

.nova-fade__sticky{
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0;
  }

.nova-fade__figure{
    width: 100%;
    max-width: none;
    margin: 0;
  }

.nova-fade__frame{
    position: relative;
    width: 100%;
    aspect-ratio: 1086 / 1326;
    overflow: hidden;
    border: 1px solid rgba(22, 22, 22, 0.16);
    border-radius: clamp(20px, 2vw, 30px);
    background: #ededeb;
    box-shadow: 0 28px 80px rgba(22, 22, 22, 0.18), 0 3px 14px rgba(22, 22, 22, 0.08);
    contain: layout paint;
  }

.nova-fade__image, .nova-fade__wash{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

.nova-fade__image{
    display: block;
    max-width: none;
    object-fit: cover;
    object-position: center;
    user-select: none;
    pointer-events: none;
  }

.nova-fade__image--before{
    z-index: 1;
    opacity: var(--nova-fade-before-opacity);
  }

.nova-fade__image--after{
    z-index: 2;
    opacity: 1;
    clip-path: inset(0 0 0 var(--nova-fade-progress));
    filter: saturate(1.02) contrast(1.015);
  }

.nova-fade__wash{
    z-index: 3;
    opacity: var(--nova-fade-wash-opacity);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 28%, transparent 72%, rgba(0, 0, 0, 0.08));
    pointer-events: none;
  }

.nova-fade__film-line{
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--nova-fade-progress);
    z-index: 6;
    width: 2px;
    opacity: var(--nova-fade-line-opacity);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 0 0 1px rgba(22, 22, 22, 0.16), 0 0 16px rgba(255, 255, 255, 0.95), 0 0 38px rgba(255, 255, 255, 0.78);
    transform: translateX(-50%);
    pointer-events: none;
  }

.nova-fade__film-line::before{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 30px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    filter: blur(7px);
    transform: translateX(-50%);
  }

.nova-fade__film-line span{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border: 1px solid rgba(255, 255, 255, 0.98);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.15), 0 0 18px rgba(255, 255, 255, 0.98);
    transform: translate(-50%, -50%);
    pointer-events: none;
  }

.nova-fade__label{
    position: absolute;
    top: 22px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 114px;
    padding: 11px 13px 12px;
    border: 1px solid rgba(255, 255, 255, 0.48);
    border-radius: 14px;
    color: #fff;
    background: rgba(22, 22, 22, 0.68);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    line-height: 1.12;
    pointer-events: none;
  }

.nova-fade__label--before{
    left: 22px;
    opacity: clamp(0, calc(1 - var(--nova-fade-progress-number) * 3.2), 1);
  }

.nova-fade__label--after{
    right: 22px;
    text-align: right;
    opacity: clamp(0, calc((var(--nova-fade-progress-number) - 0.47) * 3.2), 1);
  }

.nova-fade__label span{
    font-size: 9px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    opacity: 0.72;
  }

.nova-fade__label strong{
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
  }

.nova-fade__progress{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
    padding: 0;
    gap: 10px;
    margin-top: 19px;
    margin-left: 0;
    color: var(--nova-fade-muted);
    font-size: 12px;
    letter-spacing: 0.01em;
  }

.nova-fade__controls{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
  }

.nova-fade__button{
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 25px;
    margin: 0;
    padding: 4px 7px;
    border: 1px solid var(--nova-fade-ink);
    border-radius: 5px;
    color: var(--nova-fade-ink);
    background: transparent;
    font: inherit;
    font-size: 10px;
    line-height: 1.2;
    cursor: pointer;
    transition: color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
  }

.nova-fade__button:hover, .nova-fade__button:focus-visible, .nova-fade__button.is-active{
    color: #fff;
    background: var(--nova-fade-ink);
  }

.nova-fade__button:hover{
    box-shadow: 0 4px 10px rgba(22, 22, 22, 0.14);
    transform: translateY(-1px);
  }

.nova-fade__button:focus-visible{
    outline: 2px solid rgba(22, 22, 22, 0.28);
    outline-offset: 2px;
  }

.nova-fade__progress-line{
    position: relative;
    display: block;
    width: 64px;
    height: 2px;
    overflow: visible;
    border-radius: 999px;
    background: rgba(22, 22, 22, 0.13);
  }

.nova-fade__progress-line i{
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: var(--nova-fade-meter-progress);
    height: 100%;
    border-radius: inherit;
    background: var(--nova-fade-ink);
  }

@media (prefers-reduced-motion: reduce){
    .nova-fade__button {
      transition: none;
    }
  }

/*
 * Stabilisation du héros comparateur.
 * Le premier visuel reste disponible immédiatement ; seul le second révèle
 * un fondu très court lorsqu'il est décodé par le navigateur.
 */
.nova-fade.nova-fade--stable .nova-fade__image,
.nova-fade.nova-fade--stable .nova-fade__wash,
.nova-fade.nova-fade--stable .nova-fade__film-line{
  transition: none !important;
}

.nova-fade.nova-fade--stable:not(.is-ready) .nova-fade__image--after,
.nova-fade.nova-fade--stable:not(.is-ready) .nova-fade__film-line,
.nova-fade.nova-fade--stable:not(.is-ready) .nova-fade__label,
.nova-fade.nova-fade--stable:not(.is-ready) .nova-fade__progress{
  opacity: 0 !important;
}

.nova-fade.nova-fade--stable.is-ready .nova-fade__image--after{
  opacity: 1 !important;
  transition: opacity 180ms ease-out !important;
}

.nova-fade.nova-fade--stable.is-ready .nova-fade__film-line,
.nova-fade.nova-fade--stable.is-ready .nova-fade__label,
.nova-fade.nova-fade--stable.is-ready .nova-fade__progress{
  transition: opacity 140ms ease-out !important;
}

@media (prefers-reduced-motion: reduce){
  .nova-fade.nova-fade--stable.is-ready .nova-fade__image--after,
  .nova-fade.nova-fade--stable.is-ready .nova-fade__film-line,
  .nova-fade.nova-fade--stable.is-ready .nova-fade__label,
  .nova-fade.nova-fade--stable.is-ready .nova-fade__progress{
    transition: none !important;
  }
}