.hob-preloader{
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
  opacity: 1;

  /* Effet "rideau arrondi" via clip-path */
  -webkit-clip-path: ellipse(150% 150% at 50% 100%);
  clip-path: ellipse(150% 150% at 50% 100%);
  transition: clip-path 900ms cubic-bezier(.2,.9,.2,1), opacity 900ms cubic-bezier(.2,.9,.2,1);
  will-change: clip-path, opacity;
}

.hob-preloader__content{
  width: min(600px, calc(100vw - 48px));
  display: grid;
  place-items: center;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 500ms ease, transform 500ms ease;
}

.hob-preloader__video{
  width: 100%;
  max-width: 360px;
  height: auto;
  display: block;
}

/* Phase de disparition */
.hob-preloader.is-hiding{
  opacity: 0;
  -webkit-clip-path: ellipse(150% 0.01% at 50% 100%);
  clip-path: ellipse(150% 0.01% at 50% 100%);
  pointer-events: none;
}

.hob-preloader.is-hiding .hob-preloader__content{
  opacity: 0;
  transform: translateY(-8px);
}

/* Fallback si clip-path pas supporté */
@supports not (clip-path: ellipse(10% 10% at 50% 50%)){
  .hob-preloader{
    transform: translateY(0);
    transition: transform 800ms cubic-bezier(.2,.9,.2,1), opacity 800ms cubic-bezier(.2,.9,.2,1);
  }
  .hob-preloader.is-hiding{
    transform: translateY(-110%);
  }
}

/* Empêche le scroll pendant le preloader */
body.hob-preloader-lock{
  overflow: hidden;
}