/* --- Bouton "Voir le teaser" style pilule --- */
.teaser-btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.6rem 1.1rem; border:2px solid #fff; background:transparent; color:#fff;
  border-radius:9999px; cursor:pointer; line-height:1; font:inherit;
}
.teaser-btn .icon-play{display:inline-flex}
.teaser-btn svg{display:block}
.teaser-btn:hover{background:#fff; color:#000}

/* --- Modal --- */
.yt-modal{position:fixed; inset:0; display:none; z-index:99999}
.yt-modal.active{display:block}
.yt-backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.yt-dialog{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(90vw, 960px); aspect-ratio:16/9; background:#000;
  border-radius:12px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.yt-video, .yt-video iframe{width:100%; height:100%}
.yt-video iframe{border:0}

.yt-close{
  position:absolute; top:8px; right:8px; width:40px; height:40px;
  background:rgba(0,0,0,.6); color:#fff; border:none; border-radius:999px;
  font-size:22px; line-height:1; cursor:pointer;
}
.yt-close:hover{background:rgba(0,0,0,.8)}