.sv { --sv-vert: #00E676; --sv-jaune: #FFFC00; --sv-encre: #141821; --sv-champ: #F1F1F1; --sv-inactif: #A6A6A6; }
.sv-marque { display: flex; align-items: center; gap: 6px; text-decoration: none; color: inherit; }
.sv-pastille { font-size: 11px; font-weight: 800; background: var(--sv-jaune); color: var(--sv-encre); border-radius: 999px; padding: 3px 8px; white-space: nowrap; }
.sv .es-cx-vue { gap: 16px; padding-top: 28px; }
.sv-h1 { font-size: 30px; }
.sv-h1 em { color: var(--es-noir); background: var(--sv-vert); border-radius: 8px; padding: 0 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.sv-tel { background: var(--sv-champ); border-color: var(--sv-champ); }
.sv-tel input { background: transparent; }
.sv-tel[data-ok="1"] { border-color: var(--sv-vert); }
.sv-btn { background: var(--es-noir); color: #fff; }
.sv-btn i { color: var(--sv-vert); }
.sv-btn[aria-disabled="true"] { opacity: 1; background: var(--sv-inactif); color: #fff; }
.sv-bascule { margin: -4px 0 0; color: var(--es-noir); }
.sv-bascule button { color: var(--es-noir); }

.sv-film-bande { display: flex; align-items: center; gap: 14px; width: 100%; padding: 6px 12px 6px 6px; border-radius: 16px; background: var(--sv-vert); color: var(--es-noir);
  text-align: left; font: inherit; font-size: 17px; cursor: pointer; }
.sv-film-bande b { flex: 1; font-weight: 900; letter-spacing: -0.02em; }
.sv-film-mini { width: 48px; height: 96px; border-radius: 10px; overflow: hidden; background: #000; border: 3px solid #000; flex: none; }
.sv-film-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-film-play { width: 34px; height: 34px; border-radius: 50%; background: #000; display: flex; align-items: center; justify-content: center; flex: none; }

.sv-kicker { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--es-2); }
.sv-moyens { border: 1px solid var(--es-filet); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.sv-reseaux { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sv-reseau { border: 1px solid var(--es-filet); border-radius: 12px; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.sv-reseau b { font-size: 14px; font-weight: 800; }
.sv-reseau small { font-size: 11.5px; color: var(--es-2); }
.sv-pastilles { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 4px; }
.sv-moyen { font-size: 11px; font-weight: 800; border-radius: 999px; padding: 2px 8px; }
.sv-moyen--cash { background: #00E676; color: #000; }
.sv-moyen--cb { background: #0A84FF; color: #fff; }
.sv-moyen--vir { background: #141821; color: #fff; }
.sv > .es-cx-vue > .sv-kicker { text-align: center; }
.sv-canaux { display: flex; justify-content: center; gap: 10px; }
.sv-canaux img { width: 36px; height: 36px; border-radius: 10px; display: block; }
.sv-accord { margin-top: 4px; padding-bottom: 8px; }
.sv-accord a { color: var(--es-noir); text-decoration: underline; }
.sv-autre { align-self: center; margin-bottom: 30px; font-size: 13px; font-weight: 700; color: var(--es-2); text-decoration: underline; text-underline-offset: 3px; text-align: center; }

.sv-otp span { background: var(--sv-champ); border-color: var(--sv-champ); }
.sv-otp span[data-cur="1"] { border-color: var(--sv-vert); background: #fff; }
.sv-renvoyer { color: var(--es-noir); }

.sv-film { position: fixed; inset: 0; z-index: 50; background: var(--sv-vert, #00E676); display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: max(16px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)); box-sizing: border-box; }
.sv-film[hidden] { display: none; }
body.sv-film-ouvert { overflow: hidden; }
.sv-film-tete { width: 100%; max-width: 390px; display: flex; align-items: center; gap: 8px; }
.sv-film-tete b { flex: 1; font-size: 20px; font-weight: 900; letter-spacing: -0.02em; color: #000; }
.sv-film-son, .sv-film-x { height: 40px; border-radius: 999px; background: #000; color: var(--sv-vert, #00E676); font: inherit; font-size: 14px; font-weight: 800; padding: 0 14px; border: 0; cursor: pointer; white-space: nowrap; }
.sv-film-x { color: #fff; }
.sv-film-cadre { position: relative; flex: 1; min-height: 0; aspect-ratio: 9 / 16; max-width: 100%; border-radius: 34px; border: 8px solid #000; overflow: hidden; background: #000; }
.sv-film-cadre video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-film-lancer { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(0,0,0,.35); color: #fff; border: 0; font: inherit; font-weight: 800; cursor: pointer; }
.sv-film-lancer[hidden] { display: none; }
.sv-film-lancer span { width: 72px; height: 72px; border-radius: 50%; background: var(--sv-vert, #00E676); display: flex; align-items: center; justify-content: center; }
.sv-film-ouvrir { max-width: 390px; flex: none; }