/* Vyzoo — section « Comment fonctionnent les tâches ? »
   Feuille autonome, préfixe .vz-tasks : aucune règle ne sort de la section.
   Les variables reprennent les jetons du design system Vyzoo (bleu #0371d0, encre #0c131b, rayons 24 px). */
.vz-tasks{
  --vz-accent:#0371d0; --vz-accent-dark:#0a5ba9; --vz-ink:#0c131b; --vz-text:#253140; --vz-muted:#5f6e80;
  --vz-card:#ffffff; --vz-border:rgba(214,221,230,.9); --vz-radius:24px; --vz-media-radius:16px;
  --vz-shadow:0 8px 32px -8px rgb(17 63 112 / .16); --vz-shadow-hover:0 18px 44px -10px rgb(17 63 112 / .26);
  container-type:inline-size; font-family:inherit; color:var(--vz-ink);
  padding:clamp(56px,8vw,112px) clamp(16px,4vw,48px);
}
.vz-tasks *,.vz-tasks *::before,.vz-tasks *::after{box-sizing:border-box}
.vz-tasks__inner{max-width:1280px;margin:0 auto}
.vz-tasks__head{max-width:720px;margin:0 auto clamp(32px,5vw,56px);text-align:center}
.vz-tasks__title{margin:0;font-size:clamp(30px,4.2vw,48px);line-height:1.1;font-weight:700;letter-spacing:-.025em;color:var(--vz-ink)}
.vz-tasks__subtitle{margin:16px 0 0;font-size:clamp(16px,1.6vw,19px);line-height:1.55;color:var(--vz-muted)}
.vz-tasks__grid{display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:1fr;list-style:none;margin:0;padding:0}
@container (min-width:640px){.vz-tasks__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (min-width:1180px){.vz-tasks__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@supports not (container-type:inline-size){
  @media (min-width:640px){.vz-tasks__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media (min-width:1240px){.vz-tasks__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
}

/* carte */
.vz-card{position:relative;display:flex;flex-direction:column;background:var(--vz-card);border:1px solid var(--vz-border);border-radius:var(--vz-radius);padding:10px 10px 20px;box-shadow:var(--vz-shadow);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.vz-card:hover,.vz-card:focus-within{transform:translateY(-4px);box-shadow:var(--vz-shadow-hover)}
.vz-card__media{container-type:inline-size;position:relative;aspect-ratio:16/9;border-radius:var(--vz-media-radius);overflow:hidden;background:#f2f0ec;isolation:isolate}
.vz-card__media video{display:block;width:100%;height:100%;object-fit:cover;background:#f2f0ec}
.vz-card__body{padding:16px 10px 0}
.vz-card__num{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--vz-accent)}
.vz-card__title{margin:6px 0 0;font-size:19px;line-height:1.25;font-weight:700;letter-spacing:-.015em;color:var(--vz-ink)}
.vz-card__desc{margin:8px 0 0;font-size:15px;line-height:1.5;color:var(--vz-muted)}

/* bouton de lecture : toute la vignette est cliquable, la pastille reste dans un coin pour ne pas masquer le titre */
.vz-card__play{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;justify-content:flex-start;border:0;padding:12px;background:transparent;cursor:pointer;color:#fff;font:inherit}
.vz-card__pill{transition:opacity .2s,transform .25s,background .25s;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 6px;border-radius:999px;background:rgba(12,19,27,.82);box-shadow:0 6px 18px rgba(12,19,27,.22)}
.vz-card__pill i{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--vz-accent)}
.vz-card__pill svg{width:14px;height:14px;margin-left:2px}
.vz-card__pill b{font-size:13px;font-weight:600;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.vz-card__play:hover .vz-card__pill,.vz-card__play:focus-visible .vz-card__pill{transform:translateY(-1px);background:var(--vz-ink)}
.vz-card.is-started:not(.is-ended) .vz-card__pill{opacity:0;transform:scale(.92)}
.vz-card.is-ended .vz-card__pill svg{margin-left:0}
/* sous-titres rendus par la carte, au-dessus de la barre de contrôle */
.vz-card__cap{transition:bottom .25s,opacity .2s;position:absolute;left:10px;right:10px;bottom:12px;z-index:3;text-align:center;pointer-events:none;opacity:0}
.vz-card__cap.is-on{opacity:1}
.vz-card__cap span{display:inline;padding:3px 8px;border-radius:6px;background:rgba(12,19,27,.84);color:#fff;font-size:clamp(11px,4.3cqw,15px);line-height:1.6;font-weight:500;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.vz-card.is-started:hover .vz-card__cap,.vz-card.is-started:has(:focus-visible) .vz-card__cap,.vz-card.is-started.is-ui .vz-card__cap,.vz-card.is-started:not(.is-playing) .vz-card__cap{bottom:54px}

/* barre de contrôle complète : lecture, ±10 s, temps, progression, vitesse, son, sous-titres, plein écran */
.vz-card__bar{position:absolute;left:8px;right:8px;bottom:8px;z-index:3;display:flex;align-items:center;gap:2px;padding:4px;border-radius:12px;background:rgba(12,19,27,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transform:translateY(4px);transition:opacity .25s,transform .25s;font-family:inherit}
.vz-card.is-started:hover .vz-card__bar,.vz-card.is-started:has(:focus-visible) .vz-card__bar,.vz-card.is-started.is-ui .vz-card__bar,.vz-card.is-seeking .vz-card__bar,.vz-card.is-started:not(.is-playing):not(.is-ended) .vz-card__bar{opacity:1;transform:none}
.vz-card.is-ended .vz-card__bar{display:none}
.vz-card__btn{flex:none;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:0;border-radius:9px;background:transparent;color:#fff;cursor:pointer;font:inherit;font-size:12px;font-weight:700}
.vz-card__btn:hover{background:rgba(255,255,255,.14)}
.vz-card__btn svg{width:20px;height:20px}
.vz-card__skip svg{width:22px;height:22px}
.vz-card__speed{width:auto;min-width:40px;padding:0 6px;font-size:13px;font-variant-numeric:tabular-nums}
.vz-card__time{flex:none;padding:0 6px;color:#fff;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;opacity:.92}
.vz-card__btn[aria-pressed="false"].vz-card__cc{opacity:.55}
.vz-card__btn .vz-i-on,.vz-card__btn[aria-pressed="true"] .vz-i-off{display:none}
.vz-card__btn[aria-pressed="true"] .vz-i-on{display:block}
.vz-card__btn.vz-card__toggle .vz-i-pause{display:none}
.is-playing .vz-card__toggle .vz-i-play{display:none}
.is-playing .vz-card__toggle .vz-i-pause{display:block}
/* progression : zone de clic haute, piste fine, curseur visible au survol */
.vz-card__progress{flex:1;min-width:40px;height:32px;margin:0 6px;display:flex;align-items:center;cursor:pointer;touch-action:none;border-radius:6px}
.vz-card__track{position:relative;flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.26);transition:height .15s}
.vz-card__buf,.vz-card__fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px}
.vz-card__buf{background:rgba(255,255,255,.28)}
.vz-card__fill{background:var(--vz-accent-2,#fff)}
.vz-card__thumb{position:absolute;top:50%;left:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.4);transform:scale(0);transition:transform .15s}
.vz-card__progress:hover .vz-card__track,.vz-card__progress:focus-visible .vz-card__track,.is-seeking .vz-card__track{height:6px}
.vz-card__progress:hover .vz-card__thumb,.vz-card__progress:focus-visible .vz-card__thumb,.is-seeking .vz-card__thumb{transform:scale(1)}
.vz-card :focus-visible,.vz-player :focus-visible{outline:2px solid var(--vz-accent,#0371d0);outline-offset:2px}
.vz-card__play:focus-visible{outline-offset:-4px;border-radius:var(--vz-media-radius)}
/* petite vignette : on garde l'essentiel */
@container (max-width:520px){
  .vz-card__time,.vz-card__speed{display:none}
  .vz-card__btn{width:32px;height:32px}
  .vz-card__progress{margin:0 4px}
}
@container (max-width:300px){ .vz-card__cc{display:none} }

/* lecteur simple (film du haut de page) : barre visible au survol, au toucher ou en pause */
.vz-player{container-type:inline-size}
.vz-player .vz-card__bar{left:12px;right:12px;bottom:12px}
.vz-player:hover .vz-card__bar,.vz-player:has(:focus-visible) .vz-card__bar,.vz-player.is-ui .vz-card__bar,.vz-player.is-seeking .vz-card__bar,.vz-player:not(.is-playing) .vz-card__bar{opacity:1;transform:none}

/* plein écran */
.vz-card__media:fullscreen,.vz-player:fullscreen{width:100%;height:100%;max-width:none;aspect-ratio:auto;border-radius:0;border:0;background:#000}
.vz-card__media:-webkit-full-screen,.vz-player:-webkit-full-screen{width:100%;height:100%;max-width:none;aspect-ratio:auto;border-radius:0;border:0;background:#000}
.vz-card__media:fullscreen video,.vz-player:fullscreen video{object-fit:contain;background:#000}
.vz-card__media:-webkit-full-screen video,.vz-player:-webkit-full-screen video{object-fit:contain;background:#000}
.is-full .vz-card__bar{left:24px;right:24px;bottom:24px;max-width:1100px;margin:0 auto}
.is-full .vz-card__cap{bottom:90px!important}
.is-full .vz-card__cap span{font-size:clamp(16px,2.2vw,28px)}
.is-full.is-playing:not(.is-ui):not(.is-seeking) .vz-card__bar{opacity:0}
.is-full.is-playing:not(.is-ui) .vz-card__media,.vz-player.is-full.is-playing:not(.is-ui){cursor:none}

/* mobile : cartes compactes */
@container (max-width:639px){
  .vz-card{padding:8px 8px 16px}
  .vz-card__body{padding:12px 8px 0}
  .vz-card__title{font-size:18px}
}
/* sans animation si l'utilisateur le demande */
@media (prefers-reduced-motion:reduce){
  .vz-card,.vz-card__pill,.vz-card__bar,.vz-card__cap{transition:none}
  .vz-card:hover,.vz-card:focus-within{transform:none}
}
.vz-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}