/* -------------------------------------------------------------------------- */
/* Lecteur vidéo : barre de commandes maison (js/player.js) — 28/09/2026       */
/* -------------------------------------------------------------------------- */
/* Barre bordeaux sous la vidéo, commandes crème, progression orange : lisible  */
/* sur l'accueil (fond bordeaux) comme sur la page Vidéo (cadre bordeaux).      */
/* -------------------------------------------------------------------------- */

.ad-player {
  --ad-p-bg: var(--wp--preset--color--tertiary, #751441);
  --ad-p-fg: var(--wp--preset--color--contrast, #F4E7D6);
  --ad-p-accent: var(--wp--preset--color--secondary, #F7A600);
  display: flex;
  flex-direction: column;
  margin: 0;
}
.ad-player video {
  display: block;
  width: 100%;
  height: auto;
  cursor: pointer;
}
.ad-player__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  box-sizing: border-box;
  background: var(--ad-p-bg);
  color: var(--ad-p-fg);
  font-family: var(--wp--preset--font-family--elza-round, sans-serif);
  font-size: 14px;
  line-height: 1;
}
.ad-player__bar * { box-sizing: border-box; }

/* --- Boutons ---------------------------------------------------------------- */
.ad-player__btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  transition: background-color .2s ease-out, transform .2s cubic-bezier(.16, 1, .3, 1);
}
.ad-player__btn svg { width: 22px; height: 22px; fill: currentColor; display: block; }
.ad-player__btn:hover,
.ad-player__btn:focus-visible { background: rgba(244, 231, 214, .18); transform: scale(1.08); }
.ad-player__btn:focus-visible { outline: 2px solid var(--ad-p-accent); outline-offset: 2px; }

/* --- Temps ------------------------------------------------------------------ */
.ad-player__time {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  opacity: .92;
}

/* --- Barre de position ------------------------------------------------------ */
.ad-player__seek {
  --ad-progress: 0%;
  flex: 1 1 auto;
  min-width: 48px;
  height: 20px;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}
.ad-player__seek::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--ad-p-accent) 0 var(--ad-progress), rgba(244, 231, 214, .32) var(--ad-progress) 100%);
}
.ad-player__seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -5px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--ad-p-accent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  transition: transform .15s ease-out;
}
.ad-player__seek:hover::-webkit-slider-thumb,
.ad-player__seek:active::-webkit-slider-thumb { transform: scale(1.2); }
.ad-player__seek::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(244, 231, 214, .32); }
.ad-player__seek::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--ad-p-accent); }
.ad-player__seek::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--ad-p-accent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
.ad-player__seek:focus-visible { outline: 2px solid var(--ad-p-accent); outline-offset: 4px; border-radius: 3px; }

/* --- Plein écran ------------------------------------------------------------ */
.ad-player.is-fullscreen {
  background: #000;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.ad-player.is-fullscreen video { max-height: calc(100vh - 58px); object-fit: contain; }

/* --- Téléphone -------------------------------------------------------------- */
@media (max-width: 480px) {
  .ad-player__bar { gap: 4px; padding: 8px 8px; font-size: 13px; }
  .ad-player__btn { width: 34px; height: 34px; }
  .ad-player__btn svg { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .ad-player__btn, .ad-player__seek::-webkit-slider-thumb { transition: none; }
}

/* --- Accueil : l'image du produit remontait sur la barre (28/09/2026) -------- */
/* Le bloc .ariane_group (z-index 100 dans le thème) porte l'image du produit
   avec une marge haute de -13vh : sur un écran de 1400 px de haut elle remonte
   de 182 px et recouvre toute la barre sur la moitié gauche (à 900 px elle
   s'arrête 26 px sous le lecteur). Le lecteur passe au-dessus, et la remontée
   est plafonnée à 5,1rem (l'écart bas de barre → haut d'image vaut 83 px :
   51 px d'espacement + 32 px de marge interne de colonne, animations neutralisées) : l'image vient toucher la barre, jamais la couvrir. */
.ad-player {
  position: relative;
  z-index: 101;
}
.ariane_group figure.wp-block-image[style*="-13vh"] {
  margin-top: max(-13vh, -5.1rem) !important;
}