/* « La carte achat en vidéo » (Views/Guides/_Video.cshtml, js/video.js).
   Une vidéo sans fichier vidéo : des scènes SVG (tools/illustrations/video.py) dont chaque élément entre à son tour,
   et des sous-titres en HTML. Sans JavaScript, les scènes s'affichent les unes sous les autres, fixes. */

.vplayer { position: relative; background: #fff; border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; box-shadow: 0 18px 40px rgba(27, 37, 56, .08); outline: none; }
.vplayer:focus-visible { box-shadow: 0 0 0 3px rgba(41, 168, 224, .45); }
.vstage { background: linear-gradient(180deg, #f5fbfe 0%, #eaf5fc 100%); }
.vart { display: block; width: 100%; height: auto; font-family: inherit; }
.vart text { font-family: "Nunito Sans", system-ui, sans-serif; }

/* Sous-titres */
.vcap { padding: 22px 26px; }
.vtag { display: block; font-size: 11.5px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--blue-d); font-weight: 700; }
.vcap h3 { margin: 8px 0 10px; font-size: 26px; line-height: 1.18; font-weight: 300; color: var(--navy); }
.vcap h3 b { font-weight: 700; }
.vcap p { margin: 0 0 14px; font-size: 15px; line-height: 1.55; color: var(--ink); }
.vcap .link::after { content: " →"; }
.vcap .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

/* Sans JavaScript : un storyboard, scène et texte côte à côte. */
.vplayer:not(.ready) .vscene { display: grid; grid-template-columns: 40% 60%; align-items: center; border-bottom: 1px solid var(--rule); }
.vplayer:not(.ready) .vbar { display: none; }

/* Le lecteur */
.vplayer.ready .vstage { display: grid; grid-template-columns: 38% 62%; align-items: center; }
.vplayer.ready .vscene { display: contents; }
.vplayer.ready .vcap, .vplayer.ready .vart { grid-row: 1; visibility: hidden; opacity: 0; transition: opacity .35s ease, visibility 0s .35s; }
.vplayer.ready .vcap { grid-column: 1; padding-left: 34px; }
.vplayer.ready .vart { grid-column: 2; padding: 12px 18px 12px 0; box-sizing: border-box; max-height: 100%; }
.vplayer.ready .on > .vcap, .vplayer.ready .on > .vart { visibility: visible; opacity: 1; transition: opacity .35s ease; }

.vbar { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-top: 1px solid var(--rule); background: #fff; }
.vplay { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--navy); cursor: pointer; display: grid; place-items: center; }
.vplay:hover { background: var(--blue-d); }
.vplay svg { width: 16px; height: 16px; fill: #fff; }
.vplay .i-pause, .vplayer.playing .vplay .i-play, .vplay .i-replay, .vplayer.ended .vplay .i-play { display: none; }
.vplayer.playing .vplay .i-pause, .vplayer.ended .vplay .i-replay { display: block; }
.vplayer.ended.playing .vplay .i-pause { display: none; }
.vchaps { display: flex; gap: 6px; flex: 1; list-style: none; margin: 0; padding: 0; min-width: 0; }
.vchaps li { flex: 1; min-width: 0; }
.vchap { width: 100%; background: none; border: 0; padding: 4px 0; cursor: pointer; text-align: left; font: inherit; color: var(--mute); }
.vchap i { display: block; height: 4px; border-radius: 2px; background: var(--rule); overflow: hidden; margin-bottom: 6px; }
.vchap i::before { content: ""; display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--blue); }
.vchap span { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vchap.cur { color: var(--navy); font-weight: 700; }
.vchap:hover span { color: var(--blue-d); }

@media (max-width: 860px) {
    .vplayer.ready .vstage { grid-template-columns: 1fr; grid-template-rows: auto auto; aspect-ratio: auto; }
    .vplayer.ready .vart { grid-row: 1; grid-column: 1; padding: 10px; }
    .vplayer.ready .vcap { grid-row: 2; grid-column: 1; padding: 6px 20px 18px; min-height: 230px; }
    .vplayer:not(.ready) .vscene { grid-template-columns: 1fr; }
    .vcap h3 { font-size: 22px; }
    .vchap span { display: none; }
}

/* ---- Animations : seulement en lecture (motion), jamais si le visiteur a demandé à réduire les animations.
   Chaque élément part de son état d'entrée après son délai (--d) ; sans animation, il est simplement à sa place. ---- */
.vplayer.motion.started .on .a { animation: .7s cubic-bezier(.2, .8, .2, 1) var(--d, 0s) both; transform-box: fill-box; transform-origin: center; }
.vplayer.motion.started .on .a-fade { animation-name: v-fade; }
.vplayer.motion.started .on .a-up { animation-name: v-up; }
.vplayer.motion.started .on .a-left { animation-name: v-left; }
.vplayer.motion.started .on .a-right { animation-name: v-right; }
.vplayer.motion.started .on .a-pop { animation-name: v-pop; animation-duration: .6s; }
.vplayer.motion.started .on .a-drop { animation-name: v-drop; animation-duration: .9s; }
.vplayer.motion.started .on .a-fill { animation-name: v-fill; animation-duration: .5s; transform-origin: left center; }
.vplayer.motion.started .on .a-draw { stroke-dasharray: 1; animation-name: v-draw; animation-duration: .55s; animation-timing-function: ease-in-out; }
.vplayer.motion.started .on .a-ring { animation: v-ring 2.4s ease-out var(--d, 0s) infinite both; }
.vplayer.motion.started .on .a-travel { animation: v-travel var(--t, 6s) linear var(--d, 0s) both; transform-box: view-box; }
.vplayer.motion .on .flow { animation: v-flow .9s linear infinite; }
.vplayer.motion.started .on .vcap > * { animation: v-up .6s cubic-bezier(.2, .8, .2, 1) both; }
.vplayer.motion.started .on .vcap > :nth-child(2) { animation-delay: .12s; }
.vplayer.motion.started .on .vcap > :nth-child(3) { animation-delay: .3s; }
.vplayer.motion.started .on .vcap > :nth-child(4) { animation-delay: .9s; }
.vplayer.paused .vstage *, .vplayer.paused .vstage *::before { animation-play-state: paused !important; }

@keyframes v-fade { from { opacity: 0; } }
@keyframes v-up { from { opacity: 0; transform: translateY(16px); } }
@keyframes v-left { from { opacity: 0; transform: translateX(-34px); } }
@keyframes v-right { from { opacity: 0; transform: translateX(26px); } }
@keyframes v-pop { 0% { opacity: 0; transform: scale(.35); } 65% { opacity: 1; transform: scale(1.1); } }
@keyframes v-drop { 0% { opacity: 0; transform: translate(-50px, -70px) rotate(-16deg); } 70% { opacity: 1; transform: translate(0, 4px) rotate(3deg); } }
@keyframes v-fill { from { transform: scaleX(0); } }
@keyframes v-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes v-ring { 0% { opacity: 0; transform: scale(1); } 15% { opacity: .55; } 70%, 100% { opacity: 0; transform: scale(1.75); } }
@keyframes v-travel { from { transform: translateX(0); } to { transform: translateX(var(--dx, 0)); } }
@keyframes v-flow { to { stroke-dashoffset: -10; } }
.vshare { margin: 14px 0 0; text-align: right; }