/* ──────────────────────────────────────────────────────────────────────────
   Vidéos par format : vitrine de /agence (FR, EN, DE), pages /agence-ugc-geneve
   et /video-corporate-geneve. Le balisage est écrit par
   outils/agence/poser_agence_videos.py : modifier le générateur, pas les pages.
   Le mur de vignettes lui-même vient de wanda-actualites.css (.wz-actu-*).
   S'appuie sur les jetons de wanda-scene.css (--rouge, --lin, --gris-n, --filet-n).
   Animations : transform et opacity seulement.
   ────────────────────────────────────────────────────────────────────────── */

/* Vitrine de /agence */
.wz-agv{padding:110px 6vw 100px;max-width:1360px;margin:0 auto}
.wz-agv .cas-head{margin-bottom:46px}
.wz-agv-formats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 10px}
.wz-agv-carte{display:flex;flex-direction:column;gap:10px;padding:24px 24px 26px;border-radius:18px;
  border:1px solid var(--filet-n,rgba(255,255,255,.1));background:#0b0b0c;color:var(--lin,#F2EFEA)}
.wz-agv-carte h3{margin:0;font-size:22px;line-height:1.2;font-weight:600;letter-spacing:-.02em}
.wz-agv-carte p{margin:0;font-size:15px;line-height:1.55;color:var(--gris-n,#A8A29A)}
.wz-agv-carte a{margin-top:auto;padding-top:8px;color:var(--rouge,#FF2A1A);font-weight:600;text-decoration:none}
.wz-agv-carte a:hover,.wz-agv-carte a:focus-visible{text-decoration:underline}
.wz-agv-note{margin:22px 0 0;font-size:14px;color:var(--gris-n,#A8A29A)}
.wz-agv-note a{color:var(--rouge,#FF2A1A)}
.wz-agv-lien-corpo{margin:18px 0 0;font-size:15px}
.wz-agv-lien-corpo a{color:var(--rouge,#FF2A1A);font-weight:600;text-decoration:none}
.wz-agv-lien-corpo a:hover{text-decoration:underline}

/* Pages UGC et corporate : cartes, étapes, FAQ */
.wz-agv-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:40px}
.wz-agv-texte{max-width:760px;font-size:17px;line-height:1.65;color:var(--gris-n,#A8A29A)}
.wz-agv-texte p{margin:0 0 16px}
.wz-agv-texte a,.wz-agv-faq a,.wz-agv-liens a{color:var(--rouge,#FF2A1A)}
.wz-agv-etapes{list-style:none;margin:40px 0 0;padding:0;counter-reset:etape;border-top:1px solid var(--filet-n,rgba(255,255,255,.1))}
.wz-agv-etapes li{counter-increment:etape;display:grid;grid-template-columns:70px minmax(0,1fr);gap:20px;padding:22px 0;
  border-bottom:1px solid var(--filet-n,rgba(255,255,255,.1))}
.wz-agv-etapes li::before{content:counter(etape,decimal-leading-zero);font-size:14px;font-weight:600;color:var(--rouge,#FF2A1A);padding-top:3px}
.wz-agv-etapes h3{margin:0 0 6px;font-size:19px;font-weight:600;letter-spacing:-.015em;color:var(--lin,#F2EFEA)}
.wz-agv-etapes p{margin:0;font-size:15px;line-height:1.55;color:var(--gris-n,#A8A29A)}
.wz-agv-carte .wz-agv-prix{font-size:21px;font-weight:700;letter-spacing:-.03em;color:var(--lin,#F2EFEA);margin:0}
.wz-agv-faq details{border-bottom:1px solid var(--filet-n,rgba(255,255,255,.1));padding:18px 0}
.wz-agv-faq summary{cursor:pointer;font-weight:600;font-size:17px;color:var(--lin,#F2EFEA)}
.wz-agv-faq details p{margin:12px 0 0;color:var(--gris-n,#A8A29A);line-height:1.6}
.wz-agv-liens{margin:30px 0 0;font-size:15px;line-height:1.9;color:var(--gris-n,#A8A29A)}

/* Films de la page corporate : affiche légère, la vidéo ne se charge qu'au clic */
.wz-cfs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:40px;align-items:start}
.wz-cf{margin:0;display:flex;flex-direction:column;gap:12px}
.wz-cf-cadre{position:relative;border-radius:18px;overflow:hidden;background:#111;aspect-ratio:16/9}
.wz-cf-vertical .wz-cf-cadre{aspect-ratio:9/16;max-width:360px}
.wz-cf-cadre img,.wz-cf-cadre video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.wz-cf-cadre img{height:100%}
.wz-cf-cadre video{background:#000;object-fit:contain}
.wz-cf-cadre video[hidden],.wz-cf-lire[hidden]{display:none}
.wz-cf-lire{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:flex-start;padding:18px;border:0;cursor:pointer;
  background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.45));color:#fff;font:inherit}
.wz-cf-lire span{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:999px;font-size:15px;font-weight:600;
  background:var(--rouge,#FF2A1A);color:#111;white-space:nowrap;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.wz-cf-lire:hover span,.wz-cf-lire:focus-visible span{transform:scale(1.05)}
.wz-cf-lire:focus-visible{outline:2px solid var(--rouge,#FF2A1A);outline-offset:-2px}
.wz-cf figcaption{display:flex;flex-direction:column;gap:4px}
.wz-cf figcaption b{font-size:18px;font-weight:600;color:var(--lin,#F2EFEA)}
.wz-cf figcaption span{font-size:14px;color:var(--gris-n,#A8A29A)}
.wz-cf figcaption a{font-size:14px;color:var(--rouge,#FF2A1A);text-decoration:none;font-weight:600}
.wz-cfs-verticaux{display:flex;gap:18px;flex-wrap:wrap}
.wz-cfs-verticaux .wz-cf{width:min(300px,100%)}

@media (max-width:980px){
  .wz-agv-formats{grid-template-columns:minmax(0,1fr)}
  .wz-agv{padding:80px 22px 70px}
}
@media (max-width:760px){
  .wz-agv-grille,.wz-cfs{grid-template-columns:minmax(0,1fr)}
  .wz-agv-etapes li{grid-template-columns:44px minmax(0,1fr);gap:12px}
  .wz-cfs-verticaux .wz-cf{width:calc(50% - 9px)}
  .wz-cf-lire{padding:12px}
  .wz-cf-lire span{font-size:13px;padding:9px 14px;gap:6px}
}
@media (prefers-reduced-motion:reduce){
  .wz-cf-lire span{transition:none}
}