/* ===== Média — showreel (migration fidèle de video) ===== */
.video { position: relative; background-color: var(--bleu-celeste); color: var(--bleu-cobalt); padding: 5rem 4rem; overflow: hidden; isolation: isolate; }
.video__monogram { position: absolute; bottom: -17rem; left: -9rem; transform: translateY(-50%); width: clamp(20rem, 40vw, 36rem); height: auto; pointer-events: none; z-index: 0; user-select: none; opacity: 0.5; }

.video__inner { position: relative; margin: 0 auto; z-index: 1; display: grid; grid-template-columns: 1fr auto; gap: 3rem; justify-content: center; max-width: 70vw; align-items: center; }
.video__text { display: flex; flex-direction: column; gap: 1.5rem; }
.video__title { font-family: var(--font-titre); color: var(--noir-onyx); font-size: clamp(2rem, 4vw, 3rem); line-height: 1; font-weight: 400; margin-top: 0; }
.video__title-mark { color: var(--bleu-cobalt); font-weight: 400; }
.video__desc { color: var(--noir-onyx); max-width: 480px; }
.video__cta { align-self: flex-start; margin-top: 0.5rem; }

.video__player { position: relative; height: 80vh; max-width: 100%; aspect-ratio: 9 / 16; }
.video__player::before { content: ''; position: absolute; inset: 0; border-radius: 32px; border: 2px solid var(--bleu-cobalt); transform: translate(1.25rem, 1.25rem); z-index: 0; transition: transform 0.5s cubic-bezier(0.22,1,0.36,1); pointer-events: none; }
.video__player:hover::before { transform: translate(0.5rem, 0.5rem); }

.video__poster, .video__embed { border-radius: 32px; overflow: hidden; position: relative; z-index: 1; }
.video__poster { position: relative; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: var(--cursor-link); display: block; }
.video__poster-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(0.22,1,0.36,1); }
.video__poster:hover .video__poster-img { transform: scale(1.04); }
.video__poster-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.7) 100%); transition: opacity 0.3s ease; }

.video__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 110px; height: 110px; display: inline-flex; align-items: center; justify-content: center; }
.video__play-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(254,253,246,0.5); }
.video__play-btn { position: relative; width: 80px; height: 80px; border-radius: 50%; background-color: var(--jaune-safran); color: var(--noir-onyx); display: inline-flex; align-items: center; justify-content: center; transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), background-color 0.3s ease; box-shadow: 0 10px 30px rgba(244,179,63,0.4); }
.video__poster:hover .video__play-btn { transform: scale(1.1); background-color: var(--blanc-ivoire); }
.video__play-btn svg { width: 32px; height: 32px; margin-left: 4px; }

.video__player.is-playing .video__poster { display: none; }
.video__embed { position: absolute; inset: 0; }
.video__embed iframe, .video__embed video { width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }
.video__embed--image { position: relative; }
.video__embed--image img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1024px) {
    .video { padding: 5rem 2rem; }
    .video__inner { grid-template-columns: 1fr; gap: 3rem; align-items: start; max-width: 100%; }
    .video__player { height: auto; max-width: 480px; margin: 0 auto; width: 100%; }
}
@media (max-width: 640px) {
    .video { padding: 4rem 1.25rem; }
    .video__player { border-radius: 20px; }
    .video__play { width: 80px; height: 80px; }
    .video__play-btn { width: 60px; height: 60px; }
    .video__play-btn svg { width: 24px; height: 24px; }
}