/* ======= Bunny Preview - CSS minimal ======= */

/* Contrainte 16:9 + conteneur */
.bp-wrap{
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #000;
  border-radius: 5px;
}

/* Aspect-ratio moderne */
@supports (aspect-ratio: 16 / 9) {
  .bp-wrap { aspect-ratio: 16 / 9; height: auto; }
}

/* Fallback padding hack si pas de aspect-ratio */
@supports not (aspect-ratio: 16 / 9) {
  .bp-wrap::before{
    content: "";
    display: block;
    padding-top: 56.25%; /* 16:9 */
  }
  .bp-wrap > *{
    position: absolute;
    inset: 0;
  }
}

/* Poster plein cadre */
.bp-poster{
  position: absolute;
  inset: 0;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: opacity .18s ease;
}

/* Vidéo : couvre tout, cachée par défaut (gérée en JS) */
.bp-wrap video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .18s ease;
  display: block;
}

/* Effet hover léger (optionnel) */
.bp-wrap:hover .bp-poster{
  filter: brightness(0.92);
}

/* ======= Barre de préchargement (façon PH) ======= */
.bp-preload{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;               /* épaisseur de la barre */
  background: rgba(255,255,255,0.12);   /* piste */
  overflow: hidden;
  opacity: 0;                 /* rendue visible par le JS pendant le chargement */
  transition: opacity .18s ease;
  pointer-events: none;
}

/* La vraie barre de progression */
.bp-preload-bar{
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: #E9406F;        /* jaune/orangé type PH */
  /* petit dégradé pour relief */
  background-image: linear-gradient(to bottom, rgba(255,255,255,.35), rgba(255,255,255,0));
  transition: width .15s linear;
}

/* Option : petit arrondi si tu veux */
.bp-preload, .bp-preload-bar{
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* Accessibilité focus (si la carte est focusable) */
.bp-wrap:focus-visible{
  outline: 2px solid #E9406F;
  outline-offset: 2px;
}