/* Lecteur vidéo différé : vignette, bouton de lecture et lecteur chargé au clic.
   Le conteneur parent fixe le format 16:9 et le positionnement. */
.video-facade {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    background: var(--color-primary-darkest);
    color: var(--monastery-cream);
    text-decoration: none;
    cursor: pointer;
}
.video-facade img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.82) brightness(.8);
    transition: filter var(--duration-slow) var(--ease-legato), transform var(--duration-slower) var(--ease-legato);
}
/* Voile bas : lisibilité du libellé sur toutes les vignettes. */
.video-facade::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, color-mix(in srgb, var(--monastery-charcoal) 72%, transparent), transparent 48%);
    pointer-events: none;
}
.video-facade-play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: clamp(56px, 6vw, 76px);
    aspect-ratio: 1;
    border: 1px solid var(--monastery-gold);
    border-radius: 50%;
    background: color-mix(in srgb, var(--monastery-charcoal) 45%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transform: translate(-50%, -50%);
    transition: background-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-slow) var(--ease-legato);
}
.video-facade-play::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 54%;
    width: 28%;
    aspect-ratio: 1 / 1.15;
    background: var(--monastery-gold);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    transform: translate(-50%, -50%);
    transition: background-color var(--duration-normal) var(--ease-out);
}
.video-facade-label {
    position: absolute;
    left: clamp(16px, 2.4vw, 28px);
    bottom: clamp(14px, 2vw, 24px);
    z-index: 1;
    font: 500 12px/1 'Inter', sans-serif;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.video-facade:is(:hover, :focus-visible) img { filter: saturate(1) brightness(.92); transform: scale(1.025); }
/* Vidéo plus étroite que le 16:9 : YouTube l’encadre de bandes noires. On masque
   les bandes (--pillarbox, mesuré sur la vignette) et on remplit les côtés d’un
   flou de la même image (--poster), sans rien couper du cadre filmé. */
.video-facade[data-format="pillarbox"] { isolation: isolate; }
.video-facade[data-format="pillarbox"]::before {
    content: '';
    position: absolute;
    inset: -10%;
    background: var(--poster) center / 170% auto no-repeat;
    filter: blur(28px) brightness(.42) saturate(.8);
}
.video-facade[data-format="pillarbox"] img {
    position: relative;
    clip-path: inset(0 var(--pillarbox, 0%));
}
.video-facade:is(:hover, :focus-visible) .video-facade-play {
    background: var(--monastery-gold);
    box-shadow: 0 0 0 10px color-mix(in srgb, var(--monastery-gold) 18%, transparent);
}
.video-facade:is(:hover, :focus-visible) .video-facade-play::before { background: var(--monastery-charcoal); }
/* Le parent coupe ce qui dépasse : le contour se dessine à l’intérieur. */
.video-facade:focus-visible { outline: 2px solid var(--monastery-gold); outline-offset: -4px; }
.video-facade-player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Médias : section vidéos sur fond sombre, cartes et légendes accordées. */
.refined-site[data-page="media"] #videos { border-top: 1px solid color-mix(in srgb, var(--monastery-gold) 18%, transparent); }
.refined-site[data-page="media"] #videos .youtube-video {
    background: color-mix(in srgb, var(--monastery-cream) 4%, transparent);
    border-color: color-mix(in srgb, var(--monastery-gold) 22%, transparent);
}
.refined-site[data-page="media"] #videos :is(.video-card-caption, .edition-video-caption) h3 { color: var(--monastery-cream); }
.refined-site[data-page="media"] #videos :is(.video-card-caption, .edition-video-caption) > p:last-child { color: color-mix(in srgb, var(--monastery-cream) 62%, transparent); }
.refined-site[data-page="media"] #videos .edition-video-caption .edition-page-label { color: var(--monastery-gold); }

/* Médias : légende sous chaque vidéo, dans la typographie du site. */
.refined-site[data-page="media"] .video-card-caption { padding: 1.1rem 1.25rem 1.35rem; }
.refined-site[data-page="media"] .video-card-caption h3 {
    margin: 0 0 .4rem;
    color: var(--monastery-charcoal);
    font: 400 1.15rem/1.4 var(--font-display);
    text-wrap: balance;
}
.refined-site[data-page="media"] .video-card-caption p {
    margin: 0;
    color: var(--monastery-charcoal-soft);
    font: 400 .9rem/1.5 'Inter', sans-serif;
}

/* Médias : la grille se referme quel que soit le nombre de vidéos
   (la vidéo mise en avant occupe toute la première ligne). */
@media (min-width: 769px) {
    .refined-site[data-page="media"] .youtube-videos-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .refined-site[data-page="media"] .youtube-video:not(.edition-video-featured) { grid-column: span 2; }
    .refined-site[data-page="media"] .youtube-video:nth-child(3n+2):nth-last-child(2),
    .refined-site[data-page="media"] .youtube-video:nth-child(3n+2):nth-last-child(2) + .youtube-video { grid-column: span 3; }
    .refined-site[data-page="media"] .youtube-video:nth-child(3n+2):last-child { grid-column: 3 / span 2; }
}
@media (min-width: 481px) and (max-width: 768px) {
    .refined-site[data-page="media"] .youtube-video:nth-child(2n):last-child { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
    .video-facade img { transition: none; }
    .video-facade:is(:hover, :focus-visible) img { transform: none; }
}