/* Horizon Outstream Video 1.7.1 - feuille de style du player
   Calque sur le player outstream de lebrief.ma. */

.ho-slot{margin:0;position:relative;transition:min-height .35s ease,margin .35s ease}
/* Aucune marge tant que la publicite n'est pas la. Une fois ouvert, 2rem :
   assez pour que le bouton fermer place au-dessus du cadre ne chevauche rien. */
.ho-slot.is-open{margin:34px 0 14px;min-height:var(--ho-h,0px)}
.ho-slot.is-open.close-inside{margin:14px 0}

/* La ligne anti-CLS : cadre a 0 px et clippe tant que la pub n'a pas demarre.
   Une fois ouvert, on laisse deborder : le bouton fermer vit au-dessus du coin. */
.ho-frame{width:100%;height:0;overflow:hidden;transition:height .32s ease}
.ho-slot.is-open .ho-frame{height:var(--ho-h,0px);overflow:visible}

.ho-holder{position:relative;width:100%;height:100%;background:#000;
  transform-origin:50% 50%;
  transition:transform .35s cubic-bezier(.4,0,1,1),opacity .3s ease}
.ho-content{position:absolute;top:0;left:0;right:0;bottom:0;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
.ho-ad{position:absolute;top:0;left:0;right:0;bottom:0;inset:0;overflow:hidden;background:#000}
.ho-ad iframe,.ho-ad video{width:100% !important;height:100% !important}

/* ---------- Surface de clic vers l'annonceur (mobile) ----------
   Entre la pub (dessous) et nos boutons (dessus). Activee seulement quand le
   SDK confirme l'avoir prise en charge (classe is-clickable). */
.ho-click{position:absolute;top:0;left:0;right:0;bottom:0;inset:0;z-index:3;
  pointer-events:none;cursor:pointer;background:transparent}
.ho-slot.is-clickable .ho-click{pointer-events:auto}

/* ---------- Fermeture : le cadre se referme vers le centre ---------- */
.ho-slot.is-closing{min-height:0 !important;margin:0 !important}
.ho-slot.is-closing .ho-frame{height:0 !important;transition:height .35s ease}
.ho-slot.is-closing .ho-holder{transform:scale(.001);opacity:0;pointer-events:none}
.ho-slot.is-closing .ho-corner{display:none}

/* ---------- Coin haut gauche : "Publicite" et/ou temps restant ---------- */
.ho-corner-left{position:absolute;top:8px;left:10px;z-index:5;display:flex;gap:6px;
  opacity:0;transition:opacity .2s;pointer-events:none}
.ho-slot.is-open .ho-corner-left{opacity:1}
.ho-label,.ho-remaining{display:inline-flex;align-items:center;height:22px;padding:0 8px;
  border-radius:2px;background:rgba(0,0,0,.55);color:#fff;
  font:600 10px/1 system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing:.09em;text-transform:uppercase}
.ho-remaining{font-size:11px;letter-spacing:.02em;text-transform:none;
  font-variant-numeric:tabular-nums}
.ho-remaining:empty{display:none}

/* ---------- Coin haut droit : compte a rebours puis bouton fermer ----------
   Par defaut, AU-DESSUS du coin, comme sur lebrief.ma.
   .ho-slot.close-inside : dans le cadre. */
.ho-corner{position:absolute;top:-34px;right:0;z-index:2147483647;
  display:flex;align-items:center;justify-content:center;width:28px;height:28px}
.ho-slot.close-inside .ho-corner{top:8px;right:8px}

.ho-closetimer,.ho-close{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:28px;height:28px;padding:0;border:0;border-radius:50%;
  color:#111;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.06)}
.ho-closetimer{font:700 12px/1 system-ui,-apple-system,"Segoe UI",sans-serif;
  font-variant-numeric:tabular-nums;pointer-events:none;color:#333}
.ho-close{cursor:pointer;transition:transform .12s ease,background .12s ease}
.ho-close svg{width:12px;height:12px;display:block}
.ho-close svg path{stroke:#111;stroke-width:2.2;stroke-linecap:round;fill:none}
.ho-close:hover{background:#111;transform:scale(1.08)}
.ho-close:hover svg path{stroke:#fff}
.ho-closetimer[hidden],.ho-close[hidden]{display:none}
/* Sur fond video (dedans, onglet haut-droite, mobile) : version sombre translucide. */
.ho-slot.close-inside .ho-close,.ho-slot.close-inside .ho-closetimer,
.ho-slot.sticky-d-tr .ho-close,.ho-slot.sticky-d-tr .ho-closetimer,
.ho-slot.sticky-m-top .ho-close,.ho-slot.sticky-m-top .ho-closetimer,
.ho-slot.sticky-m-bottom .ho-close,.ho-slot.sticky-m-bottom .ho-closetimer,
.ho-slot.is-full .ho-close,.ho-slot.is-full .ho-closetimer{
  background:rgba(20,20,20,.72);color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.ho-slot.close-inside .ho-close svg path,.ho-slot.sticky-d-tr .ho-close svg path,
.ho-slot.sticky-m-top .ho-close svg path,.ho-slot.sticky-m-bottom .ho-close svg path,
.ho-slot.is-full .ho-close svg path{stroke:#fff}

/* ---------- Barre du bas : 50 px, masquee apres inactivite ---------- */
.ho-controls{position:absolute;left:0;right:0;bottom:0;height:50px;z-index:5;
  display:flex;align-items:center;gap:2px;padding:0 6px;
  background:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,.35) 60%,rgba(0,0,0,0));
  opacity:0;transition:opacity .25s;pointer-events:none}
.ho-controls[hidden]{display:none}
.ho-slot.is-controls-visible .ho-controls{opacity:1;pointer-events:auto}
/* Tactile : pas de survol possible -> barre (donc bouton son) toujours visible. */
.ho-slot.is-touch .ho-controls{opacity:1;pointer-events:auto}
.ho-slot.is-touch .ho-btn{width:44px}

.ho-btn{width:40px;height:50px;border:0;background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;color:#fff;
  opacity:.9;transition:opacity .15s}
.ho-btn::before{content:"";position:absolute;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,0);transition:background .15s}
.ho-btn{position:relative}
.ho-btn:hover{opacity:1}
.ho-btn:focus-visible,.ho-close:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ho-btn:hover::before{background:rgba(255,255,255,.16)}
.ho-btn svg{width:22px;height:22px;fill:#fff;display:block;position:relative;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.5))}
.ho-btn .ho-ico-alt{display:none}
.ho-slot.is-playing .ho-play .ho-ico-main{display:none}
.ho-slot.is-playing .ho-play .ho-ico-alt{display:block}
.ho-slot.is-muted .ho-mute .ho-ico-main{display:none}
.ho-slot.is-muted .ho-mute .ho-ico-alt{display:block}
.ho-slot.is-full .ho-full .ho-ico-main{display:none}
.ho-slot.is-full .ho-full .ho-ico-alt{display:block}

.ho-bar-time{flex:1;margin:0 8px;color:#fff;
  font:500 12px/1 system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-variant-numeric:tabular-nums}

/* ---------- Mode collant ---------- */
/* Le slot d'origine garde sa hauteur (min-height ci-dessus) : l'article ne bouge pas. */
.ho-slot.is-sticky .ho-frame{height:var(--ho-h,0px)}
.ho-slot.is-sticky .ho-holder{position:fixed;z-index:2147483647;
  box-shadow:0 6px 26px rgba(0,0,0,.45)}

/* Desktop, onglet bas-droite (lebrief) : le fermer reste au-dessus du coin. */
.ho-slot.sticky-d-br .ho-holder{
  right:var(--ho-sticky-r,5px);bottom:var(--ho-sticky-b,5px);
  width:var(--ho-sticky-w,400px);height:var(--ho-sticky-h,225px)}

/* Desktop, onglet haut-droite : pas de place au-dessus, le fermer passe dedans. */
.ho-slot.sticky-d-tr .ho-holder{
  right:var(--ho-sticky-r,5px);top:var(--ho-sticky-b,5px);
  width:var(--ho-sticky-w,400px);height:var(--ho-sticky-h,225px)}
.ho-slot.sticky-d-tr .ho-corner{top:6px;right:6px}

/* Mobile : bandeau noir pleine largeur, video centree, fermer dans le bandeau. */
.ho-slot.sticky-m-top .ho-holder,
.ho-slot.sticky-m-bottom .ho-holder{
  left:0;right:0;width:100%;height:var(--ho-ms-band,240px);
  box-shadow:0 2px 12px rgba(0,0,0,.35)}
.ho-slot.sticky-m-top .ho-holder{top:var(--ho-ms-top,0px)}
.ho-slot.sticky-m-bottom .ho-holder{bottom:0}
.ho-slot.sticky-m-top .ho-ad,
.ho-slot.sticky-m-bottom .ho-ad{
  inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);
  width:var(--ho-ms-w,82vw);height:var(--ho-ms-h,46vw)}
.ho-slot.sticky-m-top .ho-corner,
.ho-slot.sticky-m-bottom .ho-corner{top:8px;right:10px}
.ho-slot.sticky-m-top .ho-corner-left,
.ho-slot.sticky-m-bottom .ho-corner-left{top:8px;left:10px}
.ho-slot.sticky-m-top .ho-controls,
.ho-slot.sticky-m-bottom .ho-controls{left:50%;right:auto;bottom:calc(50% - var(--ho-ms-h,46vw)/2);
  width:var(--ho-ms-w,82vw);transform:translateX(-50%);
  opacity:1;pointer-events:auto}   /* pas de survol sur mobile : barre toujours visible */
.ho-slot.sticky-m-top .ho-btn,
.ho-slot.sticky-m-bottom .ho-btn{width:44px}

/* Mobile, mini-player flottant (style 20minutes) : pas de bandeau noir,
   ~62 % de large, position au choix, fermer dans le coin haut-gauche. */
.ho-slot.sticky-m-mini .ho-holder{
  width:var(--ho-sticky-w,240px);height:var(--ho-sticky-h,135px);
  box-shadow:0 4px 18px rgba(0,0,0,.4)}
.ho-slot.mini-tc .ho-holder{top:calc(8px + var(--ho-ms-top,0px));left:calc(50% - var(--ho-sticky-w,240px)/2)}
.ho-slot.mini-tr .ho-holder{top:calc(8px + var(--ho-ms-top,0px));right:8px}
.ho-slot.mini-br .ho-holder{bottom:8px;right:8px}
.ho-slot.mini-bc .ho-holder{bottom:8px;left:calc(50% - var(--ho-sticky-w,240px)/2)}
.ho-slot.sticky-m-mini .ho-controls{height:40px}
.ho-slot.sticky-m-mini .ho-bar-time{display:none}
.ho-slot.sticky-m-mini .ho-corner-left{display:none}
/* Fermer : dedans a gauche (20minutes), dedans a droite, ou dehors au-dessus du coin. */
.ho-slot.is-sticky.mini-close-inside-left .ho-corner{top:8px;left:8px;right:auto;width:32px;height:32px}
.ho-slot.is-sticky.mini-close-inside-right .ho-corner{top:8px;right:8px;left:auto;width:32px;height:32px}
.ho-slot.is-sticky.mini-close-outside .ho-corner{top:-34px;right:0;left:auto}
.ho-slot.mini-close-inside-left .ho-close,.ho-slot.mini-close-inside-left .ho-closetimer,
.ho-slot.mini-close-inside-right .ho-close,.ho-slot.mini-close-inside-right .ho-closetimer{
  width:32px;height:32px;background:rgba(30,30,30,.62);color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.28),0 2px 8px rgba(0,0,0,.35);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ho-slot.mini-close-inside-left .ho-close:hover,.ho-slot.mini-close-inside-right .ho-close:hover{background:rgba(0,0,0,.85)}
.ho-slot.mini-close-inside-left .ho-close svg path,.ho-slot.mini-close-inside-right .ho-close svg path{stroke:#fff}

/* RTL : miroir horizontal du player, sans inverser les contrôles de la vidéo. */
.ho-slot[dir="rtl"]{direction:rtl;text-align:right}
.ho-slot[dir="rtl"] .ho-corner-left{left:auto;right:10px}
.ho-slot[dir="rtl"] .ho-corner{left:0;right:auto}
.ho-slot[dir="rtl"].close-inside .ho-corner{left:8px;right:auto}
.ho-slot[dir="rtl"].sticky-d-tr .ho-corner{left:6px;right:auto}
.ho-slot[dir="rtl"].sticky-m-top .ho-corner,
.ho-slot[dir="rtl"].sticky-m-bottom .ho-corner{left:10px;right:auto}
.ho-slot[dir="rtl"].sticky-m-top .ho-corner-left,
.ho-slot[dir="rtl"].sticky-m-bottom .ho-corner-left{left:auto;right:10px}
.ho-slot[dir="rtl"].is-sticky.mini-close-inside-left .ho-corner{left:8px;right:auto}
.ho-slot[dir="rtl"].is-sticky.mini-close-inside-right .ho-corner{right:8px;left:auto}
.ho-slot[dir="rtl"].is-sticky.mini-close-outside .ho-corner{left:0;right:auto}
.ho-slot[dir="rtl"].sticky-d-br .ho-holder,
.ho-slot[dir="rtl"].sticky-d-tr .ho-holder{left:var(--ho-sticky-r,5px);right:auto}
.ho-slot[dir="rtl"].mini-tr .ho-holder,
.ho-slot[dir="rtl"].mini-br .ho-holder{left:8px;right:auto}
.ho-slot[dir="rtl"].is-full .ho-corner{left:8px;right:auto}
.ho-slot[dir="rtl"] .ho-controls{direction:rtl;flex-direction:row}
.ho-slot[dir="rtl"] .ho-bar-time{text-align:start;direction:rtl;unicode-bidi:plaintext;line-height:1.5;letter-spacing:normal}
.ho-slot[dir="rtl"] .ho-label,.ho-slot[dir="rtl"] .ho-remaining{letter-spacing:normal;line-height:1.5}
.ho-bar-time{min-width:0}
.ho-controls{box-sizing:border-box}

/* ---------- Plein ecran ---------- */
.ho-slot.is-full .ho-holder{position:fixed;top:0;left:0;right:0;bottom:0;inset:0;width:100vw;height:100vh;height:100dvh;
  border-radius:0;box-shadow:none;z-index:2147483647}
.ho-slot.is-full .ho-corner{top:8px;right:8px}
.ho-holder:fullscreen{width:100vw;height:100vh}

@media (prefers-reduced-motion:reduce){
  .ho-slot,.ho-frame,.ho-holder,.ho-corner-left,.ho-controls,.ho-btn,.ho-close{transition:none}
}

/* ---------- Elements du site decales au-dessus du player collant ----------
   Les regles ciblant les selecteurs choisis sont generees par PHP
   (dynamic_css) sous body.ho-pin-br / body.ho-pin-mbottom. Ici : la
   transition, pour un deplacement doux. */
body.ho-pinned .ho-lifted{transition:bottom .3s ease,top .3s ease}