/* Vidéo « mon parcours » — bouton hero, badge portrait, modal <dialog>. Aucun style inline. */
.btn--video { cursor: pointer; font: inherit; background: rgba(201, 168, 106, 0.08); color: var(--gold-bright); border-color: var(--gold); }
.btn--video:hover, .btn--video:focus-visible { background: rgba(201, 168, 106, 0.18); color: var(--ink); }
.btn--video__icon { font-size: 0.85em; }
.btn--video__dur { color: var(--muted); font-weight: 500; }

.portrait-play {
  position: absolute; z-index: 3; right: 14px; bottom: 14px;
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--gold); background: rgba(8, 11, 10, 0.72); color: var(--gold-bright);
  font-size: 18px; line-height: 1; padding: 0 0 0 3px; cursor: pointer;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.9);
  transition: transform 0.2s ease, background 0.2s ease;
}
.portrait-play:hover, .portrait-play:focus-visible { background: rgba(201, 168, 106, 0.9); color: #0b0f0d; transform: scale(1.06); }
.btn--video:focus-visible, .portrait-play:focus-visible, .video-modal__close:focus-visible { outline: 2px solid var(--emerald-bright); outline-offset: 3px; }

.video-modal { width: min(1100px, 94vw); max-width: none; max-height: 94vh; padding: 0; border: 0; background: transparent; color: var(--ink); overflow: visible; }
.video-modal::backdrop { background: rgba(4, 6, 5, 0.86); backdrop-filter: blur(4px); }
.video-modal[open] { animation: videoModalIn 0.22s ease-out; }
.video-modal__inner { position: relative; padding-top: 48px; }
.video-modal__title { position: absolute; top: 8px; left: 0; margin: 0; font-size: 15px; font-weight: 600; color: var(--ink-soft); letter-spacing: 0.02em; }
.video-modal__close {
  position: absolute; top: 0; right: 0; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: rgba(16, 24, 20, 0.9); color: var(--ink);
  font-size: 18px; line-height: 1; cursor: pointer;
}
.video-modal__close:hover { border-color: var(--gold); color: var(--gold-bright); }
.video-modal__frame { aspect-ratio: 16 / 9; width: 100%; max-height: calc(94vh - 48px); background: #000; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-strong); box-shadow: var(--shadow); }
.video-modal__video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
html.video-modal-open { overflow: hidden; }

@keyframes videoModalIn { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }

@media (max-width: 640px) {
  .video-modal { width: 100vw; }
  .video-modal__frame { border-radius: 0; border-left: 0; border-right: 0; }
  .video-modal__title { left: 12px; }
  .video-modal__close { right: 10px; }
  .portrait-play { width: 44px; height: 44px; font-size: 15px; right: 10px; bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .video-modal[open], .portrait-play, .btn--video { animation: none; transition: none; }
  .portrait-play:hover, .portrait-play:focus-visible { transform: none; }
}