/* ==========================================================================
   Vidéo « L'esprit Maison Barnes » (page La Résidence)
   Vidéo verticale muette en boucle + lecteur plein écran avec le son
   ========================================================================== */

.rv-grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 90px; align-items: center;
}
.rv-text .section-eyebrow { margin-bottom: 20px; }
.rv-text .content-body { margin-bottom: 8px; }

/* Cadre vidéo avec filet doré décalé */
.rv-media { position: relative; justify-self: center; width: 100%; max-width: 380px; }
.rv-media::before {
  content: ''; position: absolute; inset: 22px -22px -22px 22px;
  border: 1px solid var(--gold); opacity: .55; pointer-events: none;
}
.rv-frame {
  position: relative; aspect-ratio: 9 / 16; overflow: hidden;
  background: var(--dark) center / cover no-repeat;
  box-shadow: 0 30px 60px -30px rgba(20, 42, 42, .55);
}
.rv-frame video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.rv-frame::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(20,42,42,.55) 0%, rgba(20,42,42,0) 45%);
}

/* Bouton « Regarder le film » sur la vidéo */
.rv-play {
  position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 2;
  display: inline-flex; align-items: center; gap: 14px;
  padding: 0; background: none; border: 0; cursor: pointer;
  color: #fff; font-family: var(--font-sans); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; white-space: nowrap;
}
.rv-play-icon {
  width: 54px; height: 54px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.7); background: rgba(20,42,42,.25);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: background .35s ease, border-color .35s ease, transform .35s ease;
}
.rv-play-icon svg { width: 16px; height: 16px; margin-left: 3px; fill: currentColor; }
.rv-play:hover .rv-play-icon,
.rv-play:focus-visible .rv-play-icon { background: var(--gold); border-color: var(--gold); transform: scale(1.06); }
.rv-play:focus-visible { outline: none; }

/* Lien texte sous le paragraphe */
.rv-link {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 28px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-sans); font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--dark);
}
.rv-link::before { content: ''; width: 28px; height: 1px; background: var(--gold); transition: width .35s ease; }
.rv-link:hover::before, .rv-link:focus-visible::before { width: 44px; }

/* Lecteur plein écran */
.rv-modal {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center; padding: 4vh 16px;
  background: rgba(20, 42, 42, .94);
  opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s ease;
}
.rv-modal.is-open { opacity: 1; visibility: visible; }
.rv-modal-inner {
  position: relative; height: 100%; max-height: 92vh; aspect-ratio: 9 / 16; max-width: 100%;
  transform: translateY(16px); transition: transform .5s ease;
}
.rv-modal.is-open .rv-modal-inner { transform: none; }
.rv-modal video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.rv-close {
  position: absolute; top: 20px; right: 20px; z-index: 2;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: #fff;
  background: transparent; border: 1px solid rgba(255,255,255,.35);
  transition: color .3s, border-color .3s, background .3s;
}
.rv-close svg { width: 16px; height: 16px; stroke: currentColor; }
.rv-close:hover, .rv-close:focus-visible { color: var(--gold); border-color: var(--gold); background: rgba(178,150,120,.12); outline: none; }
body.rv-lock { overflow: hidden; }

@media (max-width: 1024px) {
  .rv-grid { gap: 60px; }
}
@media (max-width: 768px) {
  .rv-grid { grid-template-columns: 1fr; gap: 56px; }
  .rv-media { max-width: 300px; }
  .rv-media::before { inset: 14px -14px -14px 14px; }
  .rv-modal { padding: 0; }
  .rv-modal-inner { max-height: 100vh; height: 100%; }
  .rv-close { top: 14px; right: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .rv-modal, .rv-modal-inner, .rv-play-icon, .rv-link::before { transition: none; }
}