/*
 * V4 front — rendu des champs MÉDIAS (image, vidéo, audio, slider générique).
 * Extrait de render.css pour rester sous 300 lignes / fichier.
 */

.em-rubrique__image {
    max-width: 100%;
    height: auto;
}

/* Logo dans un bloc titre (texte + image) : plafonné en mobile pour ne pas
   écraser le titre, comme le title-logo du site. Le max-width prime sur une
   largeur fixe éventuellement posée sur l'image. */
@media (max-width: 760px) {
    .em-rubrique__textimg .em-rubrique__image {
        max-width: min(43vw, 170px);
        height: auto;
    }
}

.em-rubrique__video,
.em-rubrique__audio {
    max-width: 100%;
}

.em-rubrique__audio {
    width: 100%;
}

.em-rubrique__video-embed {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 100%;
    max-width: 560px;
    aspect-ratio: 16/9;
    text-align: left;
}

.em-rubrique__video-embed--tiktok {
    max-width: 325px;
    aspect-ratio: 9/16;
}

.em-rubrique__video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Conteneur du lecteur « Vidéo URL » : porte les scotchs bleus en débord
   (overflow visible) pendant que le cadre interne garde son overflow caché. */
.em-rubrique__videowrap {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 100%;
    max-width: 760px;
    margin-top: 12px;
}

.em-rubrique__videowrap .em-rubrique__videourl {
    width: 100%;
    max-width: none;
    margin: 0;
}

/* Scotch bleu décoratif GÉNÉRIQUE (vidéo, image…), façon site. */
.em-rubrique__tape {
    position: absolute;
    z-index: 12;
    height: 24px;
    width: 112px;
    background: oklch(0.78 0.16 195 / 0.85);
    border: 1px dashed oklch(0.15 0.08 280 / 0.4);
    opacity: .82;
    pointer-events: none;
}

.em-rubrique__tape--left {
    top: -12px;
    left: 24px;
    transform: rotate(-4deg);
}

.em-rubrique__tape--right {
    top: -12px;
    right: 40px;
    transform: rotate(3deg);
}

/* Image avec scotch : conteneur en débord (overflow visible) qui porte le
   scotch, l'image gardant sa taille/recadrage propres. */
.em-rubrique__imgwrap {
    position: relative;
    display: inline-block;
    vertical-align: top;
    max-width: 100%;
    margin-top: 12px;
}

.em-rubrique__imgwrap .em-rubrique__image {
    display: block;
}

/* Lecteur « Vidéo URL » : cadre 16:9 façon site (bordure, radius, ombre portée),
   gros bouton play. Le cadre s'applique au facade (poster) ET à l'embed inséré
   au clic (toplay). */
.em-rubrique__videourl {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    max-width: 760px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 2px solid #100421;
    border-radius: 24px;
    background: #100421;
    box-shadow: 10px 10px 0 #100421;
    text-decoration: none;
}

.em-rubrique__video-toplay {
    cursor: pointer;
}

.em-rubrique__videourl iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Embed inséré au clic (toplay) : remplit le cadre au lieu de garder sa propre
   largeur/ratio. */
.em-rubrique__videourl .em-rubrique__video-embed {
    width: 100%;
    height: 100%;
    max-width: none;
    aspect-ratio: auto;
}

.em-rubrique__video-facade {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.em-rubrique__video-poster {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .82;
}

.em-rubrique__video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border-radius: 999px;
    background: #fff6ea;
    box-shadow: 6px 6px 0 #c13584;
    transition: transform .15s ease;
}

.em-rubrique__video-play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-35%, -50%);
    border-style: solid;
    border-width: 13px 0 13px 22px;
    border-color: transparent transparent transparent #100421;
}

.em-rubrique__videourl:hover .em-rubrique__video-play {
    transform: translate(-50%, -50%) scale(1.06);
}

.em-rubrique__col--center .em-rubrique__slider {
    margin-inline: auto;
}

.em-rubrique__slider {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
}

.em-rubrique__slide {
    flex: 0 0 auto;
    scroll-snap-align: start;
    max-width: 80%;
}

.em-rubrique__slide-img {
    display: block;
    max-height: 320px;
    width: auto;
    border-radius: 8px;
}