/* miniatures */
.yt-stories-rail{    
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 10px 8px 4px;
    min-height: 120px;
    position: relative;
    align-items: center;
    padding-left: 1rem;
    margin-top: -1rem;
}
.yt-stories-chip{flex:0 0 auto;width:80px;height:80px;border-radius:50%;overflow:hidden;border:0;padding:0;cursor:pointer;background:transparent;}
.yt-stories-chip__thumb{border-radius:50%;overflow:hidden;}
.yt-stories-chip__img{width:100%;height:100%;object-fit:cover;border-radius:50%;transform: scale(1.8);} 
.yt-stories-chip__label{display:none!important;}

/* popup */
.yt-stories{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9999;display:flex;align-items:center;justify-content:center;}
.yt-stories__track{position:relative;width:min(90vw,52vh);height:calc(min(90vw,52vh)*16/9);max-height:100vh;border-radius:16px;background:#000;overflow:visible;z-index:2;}
.yt-stories__stage{position:absolute;inset:0;z-index:1;border-radius:16px;overflow:hidden;}
.yt-stories__slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.98);transition:.25s;}
.yt-stories__slide.is-active{opacity:1;transform:scale(1);}
.yt-stories__player{position:absolute;inset:0;width:100%;height:100%;}

/* progress */
.yt-stories__progress{position:absolute;top:8px;left:8px;right:8px;height:4px;display:flex;gap:6px;z-index:3;}
.yt-stories__seg{flex:1;background:rgba(255,255,255,.25);border-radius:2px;overflow:hidden;position:relative;cursor:pointer;}
.yt-stories__seg>i{position:absolute;left:0;top:0;bottom:0;width:0%;background:#fff;transition:none !important;}

/* boutons */
.yt-stories__btn{border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:#fff;z-index:4;}
.yt-stories__topbtns{position:absolute;top:60px;right:18px;display:flex;flex-direction:column;gap:20px;z-index:4;align-items:flex-end;}
.yt-stories__btn--close,.yt-stories__btn--pp,.yt-stories__btn--mute{width:40px;height:40px;border-radius:999px;background:#0000004d;font-size:18px;}
button.yt-stories__btn.yt-stories__btn--pp{padding-bottom:3px;padding-left:7px;}
.yt-stories__btn--prev,.yt-stories__btn--next{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:999px;background:rgba(0,0,0,.35);font-size:40px;}
.yt-stories__btn--prev{left:-54px;padding-left:5px;}
.yt-stories__btn--next{right:-54px;padding-left:10px;}



.yt-stories-chip {
    flex: 0 0 auto;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: visible;
    border: 0;
    padding: 3px;
    box-sizing: border-box;
    cursor: pointer;
    background: var(--blue);
    position: relative;
}

.yt-stories-rail .yt-stories-chip:first-child::before, 
.yt-stories-rail .yt-stories-chip:first-child::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    animation: yt-pulseShadow 2s linear infinite;
}

@keyframes yt-pulseShadow {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--blue) 45%, transparent); }
  60%  { box-shadow: 0 0 0 14px color-mix(in srgb, var(--blue) 0%, transparent); }
  100% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--blue) 0%, transparent); }
}

 
.yt-stories-rail .yt-stories-chip:first-child::after{
  animation-delay:1s;
}

.yt-stories-chip__thumb {
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    display: inline-block;
    /* border-radius: 50%; */
    overflow: hidden;
    width: 100%;
    height: 100%;
    border: 3px solid #ffffff;
    box-sizing: border-box;
    z-index: 1;
}


.yt-stories-chip__thumb:hover::before {
    background-color: rgba(0, 0, 0, 0);
}
.yt-stories-chip__thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .15), rgba(0, 0, 0, .05));
    z-index: 1;
   /* background-color: rgba(0, 0, 0, .25);*/
    mix-blend-mode: multiply;
    transition: background-color .3s ease;
}
/* logo play */
.yt-stories-chip__thumb::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%) scale(1);
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat center/contain;
  z-index: 2;
  opacity: .9;
  pointer-events: none;
  transition: transform .3s ease, background .3s ease;
}

 
.yt-stories-chip__thumb:hover::after {
  transform: translate(-50%, -50%) scale(1.2);
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10' fill='rgba(0,0,0,.6)'/%3E%3Cpath fill='white' d='M9 7v10l8-5z'/%3E%3C/svg%3E") no-repeat center/contain;
}