/* ══════════════════════════════════════════════════════════
   video-studio.css — « 🎬 إعلان فيديو » : studio vidéo du client (.vs-*) — app/views/video.js
   Téléphone d'abord : galerie 9:16 en 2 colonnes, cibles ≥ 44 px, barre d'action collante en bas,
   squelettes, aucun style en ligne (valeurs dynamiques par data-pct → --w). Jetons de ui.css.
   ══════════════════════════════════════════════════════════ */

/* ── Étapes ── */
.vs-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-bottom: var(--space-4); scroll-margin-top: 80px; }
.vs-step { display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: var(--space-2); border: 1.5px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); color: var(--muted); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: all var(--dur-2) var(--ease); }
.vs-step .vs-sn { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); flex: none; font-size: var(--fs-sm); }
.vs-step .vs-sn .ico { width: 15px; height: 15px; }
.vs-step.on { border-color: var(--brand-fill); color: var(--ink); box-shadow: 0 0 0 3px var(--brand-soft); }
.vs-step.on .vs-sn { background: var(--brand-fill); color: var(--brand-ink); }
.vs-step.done { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); }
.vs-step.done .vs-sn { background: var(--ok-soft); color: var(--ok); }
@media (max-width: 420px) { .vs-step:not(.on) .vs-sl { display: none; } }

/* ── Sections ── */
.vs-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); animation: vs-in var(--dur-3) var(--ease); }
@keyframes vs-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.vs-sec { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--space-4); box-shadow: var(--sh-1); }
.vs-h { margin-bottom: var(--space-3); }
.vs-h h2, .vs-h3 { margin: 0; font-size: var(--fs-lg); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.vs-h p { margin: var(--space-1) 0 0; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.6; }
.vs-flash { animation: vs-flash 1.2s var(--ease); }
@keyframes vs-flash { 0%, 60% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn) 55%, transparent); } 100% { box-shadow: none; } }
.req { color: var(--bad); }

/* ── Filtre métier (défile horizontalement) ── */
.vs-biz { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-2); margin: 0 calc(-1 * var(--space-4)) var(--space-2); padding-inline: var(--space-4); scrollbar-width: none; }
.vs-biz::-webkit-scrollbar { display: none; }
.vs-biz .chip { min-height: 44px; padding-inline: var(--space-4); flex: none; }

/* ── Galerie de modèles : cartes 9:16 ── */
.vs-gallery { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .vs-gallery { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); } }
.vs-card { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); border: 2px solid var(--line); display: flex; flex-direction: column;
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.vs-card.on { border-color: var(--brand-fill); box-shadow: 0 0 0 3px var(--brand-soft), var(--sh-2); }
.vs-card-media { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; border: 0; padding: 0; cursor: pointer; overflow: hidden;
  background: linear-gradient(165deg, color-mix(in srgb, var(--brand) 70%, #000) 0%, color-mix(in srgb, var(--accent) 55%, #000) 100%); }
.vs-card.auto .vs-card-media { background: linear-gradient(160deg, var(--brand-fill), #7b3fe4 55%, var(--accent)); }
.vs-card-media video, .vs-soon-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vs-missing video, .vs-noposter:not(.playing) video { opacity: 0; }
.vs-ph { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--space-2); color: #fff; text-align: center; padding: var(--space-3);
  pointer-events: none; transition: opacity var(--dur-2) var(--ease); }
.vs-ph .ico { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: rgba(255, 255, 255, .16); backdrop-filter: blur(6px); }
.vs-ph b { font-size: var(--fs-md); line-height: 1.3; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.vs-card-media.playing .vs-ph, .vs-card-media.vs-hasposter:not(.vs-missing) .vs-ph, .vs-soon-card.playing .vs-ph, .vs-soon-card.vs-hasposter:not(.vs-missing) .vs-ph { opacity: 0; }
.vs-card-x { position: absolute; top: var(--space-2); inset-inline-end: var(--space-2); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: rgba(0, 0, 0, .38); backdrop-filter: blur(6px); }
.vs-card-x .ico { width: 18px; height: 18px; }
.vs-card-b { display: flex; align-items: flex-start; gap: var(--space-2); width: 100%; min-height: 64px; padding: var(--space-3); border: 0; background: transparent; color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.vs-card-b b { display: block; font-size: var(--fs-sm); line-height: 1.35; }
.vs-card-b small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); font-size: var(--fs-xs); line-height: 1.5; margin-top: 2px; }
.vs-tick { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line-strong); display: grid; place-items: center; flex: none; color: transparent; transition: all var(--dur-2) var(--ease); }
.vs-tick .ico { width: 15px; height: 15px; }
.vs-card.on .vs-tick { background: var(--brand-fill); border-color: var(--brand-fill); color: var(--brand-ink); transform: scale(1.06); }

/* ── Durée / format : segments ── */
.vs-opts { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .vs-opts { grid-template-columns: 1fr 1fr; } }
.vs-seg { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.vs-seg button { min-height: 64px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; display: grid; justify-items: center; align-content: center; gap: 2px;
  padding: var(--space-2); transition: all var(--dur-1) var(--ease); }
.vs-seg button small { color: var(--muted); font-size: var(--fs-xs); }
.vs-seg button.on { border-color: var(--brand-fill); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand-fill); }
.vs-seg button.on small { color: var(--brand); }
.vs-ratio { display: block; border: 2px solid currentColor; border-radius: 4px; opacity: .75; }
.vs-ratio.r916 { width: 12px; height: 21px; } .vs-ratio.r45 { width: 16px; height: 20px; }

/* ── Photos / vidéos : tuiles ── */
.vs-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: var(--space-2); }
.vs-tile { position: relative; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); border: 1.5px solid var(--line); animation: vs-in var(--dur-2) var(--ease); }
.vs-tile.vid { aspect-ratio: 3 / 4; }
.vs-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vs-tile.up img { opacity: .55; filter: saturate(.6); }
.vs-tile.warn { border-color: var(--warn); }
.vs-tile-ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); }
.vs-tile-ph .ico { width: 28px; height: 28px; }
.vs-add { display: grid; place-content: center; justify-items: center; gap: var(--space-1); cursor: pointer; color: var(--brand); font-size: var(--fs-sm); font-weight: 600; border-style: dashed; border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); background: var(--brand-soft); text-align: center; padding: var(--space-2); }
.vs-add:hover { border-color: var(--brand); }
.vs-add .ico { width: 26px; height: 26px; }
.vs-add:focus-within { outline: 3px solid var(--brand); outline-offset: 2px; }
.vs-x { position: absolute; top: 0; inset-inline-end: 0; width: 44px; height: 44px; border: 0; padding: 0; cursor: pointer; color: #fff; display: grid; place-items: center;
  background: radial-gradient(circle at center, rgba(0, 0, 0, .62) 0 13px, transparent 14px); }
.vs-x .ico { width: 14px; height: 14px; }
.vs-q { position: absolute; bottom: 4px; inset-inline-start: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--warn-solid); color: #fff; display: grid; place-items: center; }
.vs-q .ico { width: 14px; height: 14px; }
.vs-first { position: absolute; bottom: 4px; inset-inline-end: 4px; font-size: 11px; font-weight: 700; color: #fff; background: rgba(0, 0, 0, .55); padding: 1px 6px; border-radius: var(--r-pill); }
.vs-dur { position: absolute; bottom: 4px; inset-inline-start: 4px; font-size: 11px; font-weight: 700; color: #fff; background: rgba(0, 0, 0, .6); padding: 1px 6px; border-radius: var(--r-pill); }
.vs-spin { position: absolute; inset: 0; margin: auto; width: 28px; height: 28px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--brand) 25%, transparent); border-top-color: var(--brand); animation: spin .8s linear infinite; }
.vs-spin.sm { position: relative; display: inline-block; width: 18px; height: 18px; border-width: 2px; vertical-align: middle; }
.vs-ring { --w: 0%; position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .6) 78%, transparent 80% 100%), conic-gradient(var(--brand-hi) var(--w), rgba(255, 255, 255, .25) 0); }
.vs-note { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--fs-sm); margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-3); border-radius: var(--r-md); line-height: 1.6; }
.vs-note .ico { flex: none; margin-top: 3px; }
.vs-note.warn { background: var(--warn-soft); color: var(--warn); }
.vs-note.info { background: var(--brand-soft); color: var(--brand); }
.vs-note.ok { background: var(--ok-soft); color: var(--ok); }

/* Conseils photo */
.vs-tips { margin-top: var(--space-3); border-radius: var(--r-md); background: var(--surface-2); }
.vs-tips summary { min-height: 44px; display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); cursor: pointer; font-weight: 600; color: var(--brand); list-style: none; }
.vs-tips summary::-webkit-details-marker { display: none; }
.vs-tips ul { margin: 0; padding: 0 var(--space-5) var(--space-3); display: grid; gap: var(--space-2); font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-2); }

.vs-logo-sec { display: flex; align-items: center; gap: var(--space-3); }
.vs-logo { position: relative; width: 72px; height: 72px; border-radius: var(--r-md); overflow: hidden; border: 1.5px solid var(--line); background: var(--surface-2); flex: none; }
.vs-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.vs-consent { align-items: center; min-height: 64px; }
.vs-consent input { width: 24px; height: 24px; margin: 0; }

/* ── Écran 3 ── */
.vs-inrow { display: flex; gap: var(--space-2); align-items: center; }
.vs-inrow .input { flex: 1; min-width: 0; }
.vs-inrow .btn { flex: none; min-height: 44px; }
.vs-toggles { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-1) 0 var(--space-3); }
.vs-tog { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 48px; padding: 0 var(--space-3); border: 1.5px solid var(--line); border-radius: var(--r-pill); cursor: pointer; font-size: var(--fs-sm); font-weight: 600; background: var(--surface); transition: all var(--dur-1) var(--ease); }
.vs-tog input { width: 20px; height: 20px; margin: 0; accent-color: var(--brand); }
.vs-tog .ico { width: 20px; height: 20px; color: var(--muted); }
.vs-tog.on { border-color: var(--ok); background: var(--ok-soft); }
.vs-tog.on .ico { color: var(--ok); }
.vs-audio { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-2); }
.vs-aud { display: grid; justify-items: center; text-align: center; gap: 2px; min-height: 104px; padding: var(--space-3) var(--space-2); border: 1.5px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; transition: all var(--dur-2) var(--ease); }
.vs-aud small { color: var(--muted); font-size: var(--fs-xs); }
.vs-aud-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); margin-bottom: var(--space-1); transition: all var(--dur-2) var(--ease); }
.vs-aud-ic .ico { width: 22px; height: 22px; }
.vs-aud.on { border-color: var(--brand-fill); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand-fill); }
.vs-aud.on .vs-aud-ic { background: var(--brand-fill); color: var(--brand-ink); }
.vs-aud[data-audio="studio"].on { border-color: #7b3fe4; background: color-mix(in srgb, #7b3fe4 10%, var(--surface)); box-shadow: inset 0 0 0 1px #7b3fe4; }
.vs-aud[data-audio="studio"].on .vs-aud-ic { background: linear-gradient(140deg, #7b3fe4, var(--accent)); color: #fff; }
.vs-audio-b { margin-top: var(--space-3); animation: vs-in var(--dur-2) var(--ease); }
.vs-rec { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--r-lg); background: var(--surface-2); flex-wrap: wrap; }
.vs-rec audio { width: 100%; }
.vs-recbtn { width: 68px; height: 68px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, var(--accent), var(--accent-hi)); box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 35%, transparent); flex: none; position: relative; }
.vs-recbtn .ico { width: 28px; height: 28px; }
.vs-recbtn.live { background: var(--bad-solid); animation: vs-pulse 1.2s ease-in-out infinite; }
.vs-recbtn .vs-rec-t { position: absolute; bottom: -22px; color: var(--bad); font-weight: 700; font-size: var(--fs-sm); }
@keyframes vs-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bad) 45%, transparent); } 50% { box-shadow: 0 0 0 14px transparent; } }
.vs-rec-ok, .vs-rec-up { display: flex; align-items: center; gap: var(--space-2); width: 100%; font-weight: 600; }
.vs-rec-ok > .ico { color: var(--ok); }
.vs-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--brand); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* Récapitulatif */
.vs-sum-h { display: flex; gap: var(--space-3); align-items: center; padding-bottom: var(--space-3); border-bottom: 1px dashed var(--line); }
.vs-sum-h > .ico { width: 40px; height: 40px; padding: 10px; border-radius: var(--r-md); background: var(--brand-soft); color: var(--brand); flex: none; }
.vs-bill { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-3); margin: var(--space-3) 0; }
.vs-bill dt { color: var(--ink-2); } .vs-bill dd { margin: 0; text-align: end; font-weight: 600; }
.vs-bill .tot { padding-top: var(--space-2); border-top: 1px solid var(--line); font-size: var(--fs-lg); color: var(--ink); font-weight: 700; }
.vs-bill dd.tot .a2-amt { color: var(--brand); }
.vs-fine { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-2); font-size: var(--fs-sm); color: var(--ink-2); }
.vs-fine li { display: flex; gap: var(--space-2); align-items: center; }
.vs-fine .ico { width: 16px; height: 16px; color: var(--muted); flex: none; }
.vs-confirm { display: flex; gap: var(--space-3); align-items: center; }
.vs-confirm > .ico { width: 40px; height: 40px; padding: 10px; border-radius: var(--r-md); background: var(--brand-soft); color: var(--brand); }

/* ── Barre d'action collante ── */
.vs-cta { position: sticky; bottom: var(--space-3); z-index: var(--z-sticky); margin-top: var(--space-4); }
.vs-cta-in { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--r-lg); border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(12px); box-shadow: var(--sh-3); }
.vs-cta-t { min-width: 0; display: grid; line-height: 1.3; }
.vs-cta-t b { font-size: var(--fs-lg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-why { font-size: var(--fs-xs); color: var(--warn); font-weight: 600; margin-top: 2px; }
.vs-cta .btn.lg { min-width: 132px; }
.vs-cta .btn.is-blocked { opacity: .6; box-shadow: none; }
@media (max-width: 960px) { .vs-cta { bottom: calc(var(--tabbar-h) + var(--space-3) + env(safe-area-inset-bottom)); } }

/* ── Aperçu plein écran ── */
.vs-full { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #000; color: #fff; }
.vs-full::backdrop { background: rgba(0, 0, 0, .9); }
.vs-full-in { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.vs-full video { max-width: 100%; max-height: 100%; aspect-ratio: 9 / 16; height: 100%; object-fit: contain; background: #000; }
.vs-full-ph { opacity: 0; }
.vs-full.vs-missing .vs-full-ph { opacity: 1; background: linear-gradient(165deg, color-mix(in srgb, #0a5ce6 70%, #000), color-mix(in srgb, #d62a66 55%, #000)); }
.vs-full.vs-missing video { opacity: 0; }
.vs-full-ph small { opacity: .8; }
.vs-full-x { position: absolute; top: calc(var(--space-3) + env(safe-area-inset-top)); inset-inline-end: var(--space-3); width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer; color: #fff; background: rgba(0, 0, 0, .5); display: grid; place-items: center; z-index: 2; }
.vs-full-b { position: absolute; inset-inline: 0; bottom: 0; padding: var(--space-6) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(0, 0, 0, .85) 40%); display: grid; gap: var(--space-2); max-width: 560px; margin: 0 auto; }
.vs-full-b b { font-size: var(--fs-xl); } .vs-full-b p { margin: 0 0 var(--space-2); opacity: .85; line-height: 1.6; }

/* ── « قريبا » ── */
.vs-soon { display: grid; gap: var(--space-5); align-items: center; padding: var(--space-5); border-radius: var(--r-xl); background: radial-gradient(120% 120% at 100% 0%, var(--brand-soft), transparent 60%), radial-gradient(100% 100% at 0% 100%, var(--accent-soft), transparent 60%), var(--surface); border: 1px solid var(--line); }
@media (min-width: 760px) { .vs-soon { grid-template-columns: 1.2fr 1fr; } }
.vs-soon-t h2 { font-size: var(--fs-2xl); line-height: 1.3; margin: var(--space-3) 0; }
.vs-soon-t p { color: var(--ink-2); line-height: 1.7; }
.vs-soon-price { font-size: var(--fs-3xl); font-weight: 800; color: var(--brand); margin: var(--space-3) 0 var(--space-4); }
.vs-soon-price small { font-size: var(--fs-sm); color: var(--muted); font-weight: 500; }
.vs-soon-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.vs-soon-card { position: relative; aspect-ratio: 9 / 16; border-radius: var(--r-lg); overflow: hidden; background: linear-gradient(165deg, color-mix(in srgb, var(--brand) 70%, #000), color-mix(in srgb, var(--accent) 55%, #000)); box-shadow: var(--sh-2); }
.vs-soon-card:nth-child(2) { transform: translateY(24px); }

/* ── Page d'une commande ── */
.vs-job { display: grid; gap: var(--space-4); }
@media (min-width: 900px) { .vs-job { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } }
.vs-job-main { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: var(--space-4); }
.vs-status { display: grid; gap: var(--space-3); }
.vs-tl { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; }
.vs-tl li { flex: 1; position: relative; display: grid; justify-items: center; gap: var(--space-1); text-align: center; font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.vs-tl li::before { content: ""; position: absolute; top: 13px; inset-inline-start: 50%; width: 100%; height: 3px; background: var(--line); z-index: 0; }
.vs-tl li:last-child::before { display: none; }
.vs-tl li.done::before { background: var(--ok); }
.vs-tl-d { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 2px solid var(--line); color: #fff; }
.vs-tl-d .ico { width: 15px; height: 15px; }
.vs-tl li.done { color: var(--ok); } .vs-tl li.done .vs-tl-d { background: var(--ok-solid); border-color: var(--ok-solid); }
.vs-tl li.on { color: var(--ink); } .vs-tl li.on .vs-tl-d { border-color: var(--brand-fill); background: var(--brand-soft); box-shadow: 0 0 0 4px var(--brand-soft); animation: vs-pulse-b 1.6s ease-in-out infinite; }
@keyframes vs-pulse-b { 50% { box-shadow: 0 0 0 8px transparent; } }
.vs-eta { margin: 0; display: flex; gap: var(--space-2); align-items: flex-start; line-height: 1.7; font-size: var(--fs-sm); color: var(--ink-2); background: var(--surface-2); padding: var(--space-3); border-radius: var(--r-md); }
.vs-eta > .ico { flex: none; margin-top: 4px; color: var(--brand); }
.vs-prog { display: grid; gap: var(--space-2); }
.vs-prog .bar { height: 10px; }
.vs-prog .bar.live > i { background: linear-gradient(90deg, var(--brand-fill), var(--accent), var(--brand-fill)); background-size: 200% 100%; animation: vs-flow 1.6s linear infinite; }
@keyframes vs-flow { to { background-position: -200% 0; } }
.vs-player { display: grid; justify-items: center; }
.vs-player video { width: 100%; max-width: 340px; aspect-ratio: 9 / 16; border-radius: var(--r-lg); background: #000; box-shadow: var(--sh-3); }
.vs-player.r45 video, .vs-player-skel.r45 { aspect-ratio: 4 / 5; max-width: 420px; }
.vs-player.dim video { opacity: .6; }
.vs-player-skel { position: relative; width: 100%; max-width: 340px; aspect-ratio: 9 / 16; margin: 0 auto; border-radius: var(--r-lg); overflow: hidden; }
.vs-player-skel .skel { position: absolute; inset: 0; height: 100%; border-radius: 0; }
.vs-player-skel > span { position: absolute; inset: 0; display: grid; place-items: center; color: var(--brand); }
.vs-player-skel > span .ico { width: 40px; height: 40px; animation: vs-float 2.4s ease-in-out infinite; }
@keyframes vs-float { 50% { transform: translateY(-8px) rotate(8deg); } }
.vs-actions { display: grid; gap: var(--space-2); }
@media (min-width: 640px) { .vs-actions { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }
.vs-det summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.vs-revise .chip { min-height: 44px; }

/* ── فيديوهاتي ── */
.vs-mine { display: grid; gap: var(--space-3); }
.vs-mitem { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); color: inherit; text-decoration: none; transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease); }
.vs-mitem:hover { box-shadow: var(--sh-2); }
.vs-mthumb { width: 56px; aspect-ratio: 9 / 16; border-radius: var(--r-sm); overflow: hidden; flex: none; display: grid; place-items: center; color: #fff; background: linear-gradient(165deg, color-mix(in srgb, var(--brand) 70%, #000), color-mix(in srgb, var(--accent) 55%, #000)); }
.vs-mthumb.r45 { aspect-ratio: 4 / 5; }
.vs-mthumb img { width: 100%; height: 100%; object-fit: cover; }
.vs-mtxt { display: grid; gap: var(--space-1); min-width: 0; }
.vs-mtxt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-mini { display: block; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.vs-mini > i { --w: 0%; display: block; height: 100%; width: var(--w); background: var(--brand-fill); }
.vs-go { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .vs-body, .vs-tile, .vs-audio-b, .vs-spin, .vs-recbtn.live, .vs-tl li.on .vs-tl-d, .vs-prog .bar.live > i, .vs-player-skel > span .ico, .vs-flash { animation: none; }
}
/* Vignette neutre (exemple pas encore livré) : une teinte par modèle (data-hue → --h) */
.vs-card-media[data-hue], .vs-soon-card[data-hue] { background: linear-gradient(165deg, hsl(var(--h, 215) 72% 52%), hsl(calc(var(--h, 215) + 48) 70% 32%)); }
.vs-card.auto .vs-card-media[data-hue] { background: linear-gradient(160deg, var(--brand-fill), #7b3fe4 55%, var(--accent)); }
.vs-inrow .btn[hidden] { display: none; }
.vs-cta .btn.lg { min-width: 0; white-space: nowrap; }
.vs-cta [data-next], .vs-cta a.btn { min-width: 132px; }
.vs-cta [data-back] { width: 52px; padding: 0; flex: none; }.vs-eta, .vs-note { display: block; }
.vs-eta > .ico, .vs-note > .ico { display: inline-block; vertical-align: -3px; margin-inline-end: 6px; margin-top: 0; }
/* Conseil « meilleur résultat » en tête de l'écran médias : liste qui se coche (jamais bloquante) */
.vs-goal { display: grid; gap: var(--space-2); background: var(--brand-soft, var(--surface-2)); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: var(--space-3) var(--space-4); }
.vs-goal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.vs-goal-list li { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; color: var(--ink-2); }
.vs-goal-list li.ok { color: var(--ok, #1a7f4b); }
.vs-goal-list li svg { width: 18px; height: 18px; }
.vs-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); display: inline-block; }

/* Description du produit (écran texte) : exemples à toucher ; repliée quand une voix-off raconte */
.vs-ex { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.vs-ex .chip { min-height: 44px; max-width: 100%; white-space: normal; text-align: start; }
/* « كل ما تفسّر أكثر، الفيديو يخرج أحسن » : conseil au-dessus de la description */
.vs-desc-tip { display: flex; align-items: flex-start; gap: var(--space-2); margin: var(--space-3) 0 var(--space-2); padding: var(--space-3); border-radius: var(--r-md); background: var(--sun-soft); color: var(--ink); font-size: var(--fs-sm); line-height: 1.6; }
.vs-desc-tip .ico { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--sun-text); }
.vs-desc-opt { margin: var(--space-3) 0; border-radius: var(--r-md); background: var(--surface-2); }
.vs-desc-opt summary { min-height: 44px; display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); cursor: pointer; font-weight: 600; color: var(--ink-2); list-style: none; }
.vs-desc-opt summary::-webkit-details-marker { display: none; }
.vs-desc-opt .vs-desc { padding: 0 var(--space-3) var(--space-3); }

/* Voix du client : texte suggéré à lire (gros caractères, modifiable) + minuteur mm:ss */
.vs-tele-box { display: grid; gap: var(--space-2); margin-bottom: var(--space-3); padding: var(--space-3); border-radius: var(--r-lg); border: 1.5px dashed var(--line); background: var(--surface); }
.vs-tele-box .row { align-items: center; gap: var(--space-2); }
.vs-tele { font-size: 1.25rem; line-height: 1.9; min-height: 9.5em; resize: vertical; }
.vs-timer { display: inline-block; margin-inline-start: var(--space-2); padding: 2px 10px; border-radius: 999px; background: var(--surface); color: var(--muted); font-weight: 700; font-size: var(--fs-sm); direction: ltr; unicode-bidi: isolate; }
.vs-timer.live { background: var(--bad-solid); color: #fff; }
/* Voix studio : détails pour l'équipe */
.vs-studio-d { display: grid; gap: var(--space-2); }
.vs-studio-d .f { margin: 0; }
/* Exemples : 4 vignettes — 2×2 sur téléphone, 4 en ligne sur grand écran (bande de l'écran 1) ; page « قريبا » : 2×2 */
.vs-soon-cards.vs-n4 .vs-soon-card:nth-child(2) { transform: none; }
@media (min-width: 640px) { .vs-samples .vs-soon-cards.vs-n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Prix AVANT la commande (écran 1) : prix vidéo, ce qui est compris, option voix studio en 3 étapes */
.vs-price { display: grid; gap: var(--space-3); border: 1.5px solid color-mix(in srgb, var(--brand) 35%, var(--line)); }
.vs-price-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); }
.vs-price-h h2 { margin: 0; font-size: var(--fs-xl); display: inline-flex; align-items: baseline; gap: var(--space-2); }
.vs-price-h h2 .a2-amt { color: var(--brand); font-weight: 800; }
.vs-usd { font-size: var(--fs-xs); }
.vs-inc { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1) var(--space-4); font-size: var(--fs-sm); color: var(--ink-2); }
@media (min-width: 640px) { .vs-inc { grid-template-columns: 1fr 1fr; } }
.vs-inc li { display: flex; gap: var(--space-2); align-items: center; min-width: 0; }
.vs-inc .ico { width: 16px; height: 16px; color: var(--ok); flex: none; }
.vs-vo-info { display: grid; gap: var(--space-2); padding: var(--space-3); border-radius: var(--r-md); background: var(--brand-soft); font-size: var(--fs-sm); line-height: 1.6; }
.vs-vo-info > p > .ico { width: 18px; height: 18px; vertical-align: -4px; color: var(--brand); }
.vs-vo-info .vs-plus { color: var(--brand); white-space: nowrap; }
.vs-vo-steps { margin: 0; padding-inline-start: var(--space-5); display: grid; gap: var(--space-1); color: var(--ink-2); }
.vs-vo-steps li::marker { font-weight: 700; color: var(--brand); }
.vs-sample-l { position: absolute; inset-inline-start: var(--space-2); bottom: var(--space-2); z-index: 1; padding: 2px var(--space-2); border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; color: #fff; background: rgba(0, 0, 0, .55); backdrop-filter: blur(4px); }

/* « خيارات أخرى » : durée et format repliés (le choix conseillé est déjà fait) */
.vs-opts-d > summary { min-height: 48px; display: flex; align-items: center; gap: var(--space-2); cursor: pointer; font-weight: 700; color: var(--ink-2); list-style: none; }
.vs-opts-d > summary::-webkit-details-marker { display: none; }
.vs-opts-d > summary .ico { width: 18px; height: 18px; }
.vs-opts-d[open] > summary { margin-bottom: var(--space-3); color: var(--ink); }

/* « 🎁 أوّل فيديو إعلان مجاني » : bandeau honnête (seulement si le serveur dit que le client y a droit) */
.vs-free { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3);
  border-radius: var(--r-lg); background: var(--ok-soft); color: var(--ink); border: 1.5px solid color-mix(in srgb, var(--ok) 40%, var(--line)); }
.vs-free b { display: block; line-height: 1.5; }
.vs-free small { color: var(--ink-2); line-height: 1.6; }
.vs-free-ic { font-size: 28px; line-height: 1; flex: none; }
.vs-free-p { color: var(--ok); }
/* sans page active : la condition + bouton « ربط صفحتك » */
.vs-free .vs-free-go { margin-top: var(--space-2); }