/* MMG Vidéo — player look: the Wistia embeds we ran (blue #2949e5 rounded play button, «Click for sound» pill, no playbar). */
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
#mv { position: relative; width: 100%; height: 100%; background-color: #000; overflow: hidden; -webkit-tap-highlight-color: transparent;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; user-select: none; }
#mv video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: transparent; cursor: pointer; }
#mv video.mn { opacity: 0; }
#mv video.mn.on { opacity: 1; }
#mv button { border: 0; padding: 0; background: none; color: #fff; cursor: pointer; font: inherit; }
#mv svg { width: 100%; height: 100%; fill: currentColor; display: block; }

/* «Click for sound» — centred pill over the muted 5 s thumbnail */
.cfs { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center;
  gap: .35em; padding: .9em 1.3em; border-radius: .6em; background: color-mix(in srgb, var(--c) 88%, transparent); color: #fff;
  font-size: clamp(12px, 2.6vw, 19px); font-weight: 600; cursor: pointer; box-shadow: 0 6px 24px rgba(0,0,0,.35);
  animation: cfsPulse 2.4s ease-in-out infinite; }
#mv .cfs svg { width: 2.1em; height: 2.1em; }
@keyframes cfsPulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.05); } }

/* big play / replay — the Wistia rounded rectangle in the player colour */
.big { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: clamp(64px, 14vw, 125px); aspect-ratio: 1.6;
  border-radius: 10px; background: var(--c) !important; display: none !important; align-items: center; justify-content: center;
  box-shadow: 0 6px 24px rgba(0,0,0,.35); }
#mv .big svg { width: 42%; height: 62%; }
.big.on { display: flex !important; }

/* the only control: fullscreen, bottom-right (Abdou 15/10) — no playbar */
.bar { position: absolute; right: 0; bottom: 0; display: flex; gap: 2px; padding: 8px; opacity: 0; transition: opacity .25s; pointer-events: none; }
#mv.ctl .bar { opacity: 1; pointer-events: auto; }
.bar .b { width: clamp(30px, 5vw, 40px); height: clamp(30px, 5vw, 40px); padding: 6px !important; border-radius: 6px;
  background: rgba(0,0,0,.45) !important; }
.bar .b:hover { background: var(--c) !important; }