.video-embed {
  max-width: 100%;
  margin: 3em auto;
  text-align: center;
  font-weight: bold !important
}

.video-thumbnail {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 4em 0;
  cursor: pointer;
  /*border-radius: 12px;*/
  /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);*/
}

.video-thumbnail img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* ===== Limiter la largeur des vidéos YouTube à 400px ===== */

/* Cas 1 : iframe YouTube insérée directement dans le contenu */
.prose iframe[src*="youtube.com"],
.prose iframe[src*="youtu.be"] {
  max-width: 800px !important;   /* largeur max */
  width: 100% !important;         /* responsive sous 400px */
  height: auto !important;
  aspect-ratio: 16 / 9;           /* garde le ratio */
  display: block;
  margin: 4rem 0;            
  border-radius: 10px;
}

/* Cas 2 : bloc Gutenberg “Intégration” (wrapper figure/div) */
.prose figure.wp-block-embed,
.prose .wp-block-embed__wrapper,
.prose .wp-has-aspect-ratio {
  max-width: 800px !important;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
}
.prose .wp-block-embed iframe {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
}


.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
}

.play-button::before {
  content: '';
  position: absolute;
  left: 24px;
  top: 18px;
  width: 0;
  height: 0;
  border-left: 18px solid #fff;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}

.play-button:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* Petit <small> sous la vidéo */
.video-embed small {
  display: block;
  font-size: 0.85rem;
  margin-top: 0.5em;
  color: #666;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}


/* Vidéo “click-to-play” */
.prose .video-embed{ margin: 4em 0; font-size: 0.7em; }
.prose .video-embed p{     
    font-size: 14px !important;
    text-align: left;
    width: 720px !important;
    margin: 0 auto;
    opacity: 0.7;
}
.prose .video-embed .video-thumbnail{
  position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:var(--radius); box-shadow:var(--shadow); cursor:pointer; margin-bottom: 8px;
}
.prose .video-embed .video-thumbnail img{width:100%; height:100%; object-fit:cover; margin:0; box-shadow:none; border-radius:0}
.prose .video-embed .play-button{
  position:absolute; inset:0; margin:auto; width:74px; height:74px; border:0; border-radius:50%;
  background:rgba(0,0,0,.5); backdrop-filter:saturate(120%) blur(2px); cursor:pointer;
}
.prose .video-embed .play-button::before{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-40%,-50%);
  border-left:18px solid #fff; border-top:12px solid transparent; border-bottom:12px solid transparent; width:0; height:0;
}
.prose .video-embed caption,
.prose .video-embed figcaption{display:block; font-size:.95em; color:var(--muted); margin-top:.5em}