/* ==========================================================================
   Maxelik, page fille « Création de contenu vidéo » (classes vd-), sur le socle contenus.css du silo
   ========================================================================== */

/* ---------- bouton lecture, commun ---------- */
.vd-pl-b{position:relative;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 0 0 10px rgba(255,255,255,.18);animation:vd-pulse 2.4s ease-in-out infinite}
.vd-pl-b::after{content:"";margin-left:5px;border-left:18px solid var(--blue);border-top:11px solid transparent;border-bottom:11px solid transparent}
@keyframes vd-pulse{50%{box-shadow:0 0 0 18px rgba(255,255,255,.06)}}

/* ---------- hero : lecteur horizontal et format vertical ---------- */
.vd-hv{position:relative;height:clamp(380px,54vh,460px)}
.vd-pl{position:absolute;left:0;top:8%;width:76%;border-radius:var(--r);background:#0f1a22;box-shadow:0 50px 90px -50px rgba(10,20,30,.8);overflow:clip}
.vd-pl-s{position:relative;display:grid;place-items:center;aspect-ratio:16/9;background:radial-gradient(70% 90% at 30% 20%,#2b6cb0,#0f2a44 60%,#0b1620)}
.vd-pl-s p{position:absolute;left:16px;bottom:12px;font-size:.78rem;font-weight:800;color:#fff}
.vd-pl-t{height:4px;background:rgba(255,255,255,.15)}
.vd-pl-t i{display:block;width:var(--p);height:100%;background:var(--grad)}
.vd-pl-c{list-style:none;margin:0;padding:10px 32% 12px 14px;display:grid;grid-template-columns:1fr;gap:4px}
.vd-pl-c li{display:flex;gap:8px;font-size:.74rem;font-weight:700;color:#c8d3d9}
.vd-pl-c b{font-weight:900;color:#7fd8ff}
.vd-ph{position:absolute;right:2%;bottom:0;width:min(210px,36%);aspect-ratio:9/16;padding:8px;border-radius:26px;background:#0f1a22;box-shadow:0 40px 80px -30px rgba(10,20,30,.8)}
.vd-ph img{width:100%;height:100%;object-fit:cover;border-radius:20px}
.vd-ph-r{position:absolute;left:20px;top:20px;display:flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;background:rgba(15,26,34,.7);font-size:.66rem;font-weight:900;letter-spacing:.08em;color:#fff}
.vd-ph-r i{width:8px;height:8px;border-radius:50%;background:#e5484d;animation:vd-rec 1.2s steps(1) infinite}
@keyframes vd-rec{50%{opacity:.2}}
.vd-ph-st{position:absolute;left:18px;right:18px;bottom:40px;padding:6px 8px;border-radius:6px;background:rgba(0,0,0,.65);font-size:.74rem;font-weight:800;line-height:1.3;text-align:center;color:#fff}
.vd-ph-f{position:absolute;right:20px;top:20px;padding:4px 8px;border-radius:999px;background:var(--grad);font-size:.66rem;font-weight:900;color:#fff}

/* ---------- où la vidéo travaille ---------- */
.vd-wh{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.vd-wh li{display:flex;flex-direction:column;gap:10px;padding:clamp(24px,2.6vw,30px);border-radius:var(--r);background:var(--soft);transition:transform .4s var(--ease),background .4s}
.vd-wh li:hover{transform:translateY(-6px);background:#e6f1fc}
.vd-wh-i{display:grid;place-items:center;width:52px;height:52px;margin-bottom:4px;border-radius:50%;background:#fff}
.vd-wh-i .ico{width:30px;height:30px}
.vd-wh h3{font-size:1.1rem}
.vd-wh p{font-size:.93rem;line-height:1.6;color:var(--ink-2)}

/* ---------- formats ---------- */
.vd-fo-s{position:relative;overflow:clip;isolation:isolate;background:radial-gradient(60% 80% at 100% 0%,rgba(0,131,255,.24),transparent 70%),#0f1a22}
.vd-fo-s::after{content:"";position:absolute;z-index:-1;left:-110px;bottom:-120px;width:420px;aspect-ratio:1;background:url("img/maxelik-symbole.svg") no-repeat center/contain;opacity:.05;filter:brightness(3)}
.vd-fo-top{margin-bottom:clamp(36px,4vw,56px)}
.vd-fo-top .cn-ek{color:#7fd8ff}
.vd-fo-lead{font-size:1.06rem;line-height:1.7;color:#c8d3d9}
.vd-fo{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,18px)}
.vd-fo li{position:relative;display:flex;flex-direction:column;gap:10px;padding:clamp(24px,2.6vw,32px);border-radius:var(--r);background:rgba(255,255,255,.05);transition:transform .4s var(--ease),background .4s}
.vd-fo li:hover{transform:translateY(-6px);background:rgba(0,131,255,.14)}
.vd-fr{position:relative;display:grid;place-items:center;width:128px;height:72px;margin-bottom:6px;border-radius:8px;background:radial-gradient(80% 100% at 30% 20%,#2b6cb0,#0f2a44 70%);align-self:flex-start}
.vd-fr::after{content:"";margin-left:3px;border-left:12px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;transition:transform .3s}
.vd-fr.m{background:linear-gradient(135deg,#7a5cf0,#0083ff)}
.vd-fo li:hover .vd-fr::after{transform:scale(1.3)}
.vd-fo-m{display:flex;flex-wrap:wrap;gap:6px}
.vd-fo-m em{padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.1);font-style:normal;font-size:.74rem;font-weight:800;color:#7fd8ff}
.vd-fo h3{font-size:1.2rem;color:#fff}
.vd-fo li>p:not(.vd-fo-m){font-size:.94rem;line-height:1.6;color:#b8c5cc}

/* ---------- vidéo et référencement ---------- */
.vd-seo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.vd-yt{position:relative;margin:0;padding:16px;border-radius:var(--r);background:#fff;box-shadow:0 50px 90px -60px rgba(10,40,80,.6)}
.vd-yt-v{position:relative;display:grid;place-items:center;aspect-ratio:16/9;border-radius:6px;background:radial-gradient(70% 90% at 30% 20%,#3a7bc8,#123250 60%,#0b1620)}
.vd-yt-v em{position:absolute;right:10px;bottom:10px;padding:2px 6px;border-radius:4px;background:rgba(0,0,0,.75);font-style:normal;font-size:.72rem;font-weight:800;color:#fff}
.vd-yt-t{margin-top:12px;font-size:1.02rem;font-weight:900;line-height:1.35;color:var(--slate)}
.vd-yt-m{margin-top:4px;font-size:.78rem;color:#7b8a94}
.vd-yt-d{margin-top:12px;padding:12px 14px;border-radius:6px;background:#f2f5f8;font-size:.82rem;line-height:1.5;color:var(--ink-2)}
.vd-yt-d ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:3px}
.vd-yt-d li{display:flex;gap:8px;font-weight:700}
.vd-yt-d b{color:var(--blue)}
.vd-yt figcaption{position:absolute;right:16px;top:-26px;font-size:.74rem;color:#7b8a94}
.vd-seo-t{display:grid;gap:16px}
.vd-seo-t>p:not(.cn-ek){font-size:1.04rem;line-height:1.7;color:var(--ink-2)}
.vd-seo-l{list-style:none;margin:0;padding:0;display:grid;gap:6px;counter-reset:vs}
.vd-seo-l li{position:relative;display:grid;gap:2px;padding:12px 14px 12px 52px;border-radius:var(--r);background:#fff;font-size:.92rem;line-height:1.5;color:var(--ink-2);counter-increment:vs}
.vd-seo-l li::before{content:counter(vs);position:absolute;left:12px;top:12px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--grad);font-size:.82rem;font-weight:900;color:#fff}
.vd-seo-l b{font-size:1rem;color:var(--slate)}

/* ---------- demi-journée de tournage ---------- */
.vd-jt{position:relative;list-style:none;margin:clamp(48px,6vw,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.6vw,18px)}
.vd-jt::before{content:"";position:absolute;left:0;right:0;top:15px;height:3px;border-radius:2px;background:linear-gradient(90deg,#0083ff,#00baff)}
.vd-jt li{position:relative;display:flex;flex-direction:column;gap:8px;padding-top:44px}
.vd-jt li::before{content:"";position:absolute;left:0;top:6px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px #0083ff;transition:transform .3s}
.vd-jt li:hover::before{transform:scale(1.25)}
.vd-jt time{font-size:1.5rem;font-weight:900;line-height:1;letter-spacing:-.02em;color:var(--blue)}
.vd-jt h3{font-size:1.06rem}
.vd-jt p{font-size:.92rem;line-height:1.6;color:var(--ink-2)}
.vd-jt-n{margin-top:22px;font-size:.8rem;color:#7b8a94}

/* ---------- encart partenaire ---------- */
.vd-pa{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(18px,2.4vw,32px);margin-top:clamp(32px,4vw,48px);padding:clamp(22px,2.6vw,30px);border-radius:var(--r);background:var(--soft)}
.vd-pa img{width:82px;height:auto;padding:12px;box-sizing:content-box;border-radius:var(--r);background:#fff}
.vd-pa-k{margin-bottom:4px;font-size:.74rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.vd-pa p:not(.vd-pa-k){font-size:.96rem;line-height:1.65;color:var(--ink-2)}
.vd-pa b{color:var(--slate)}
.vd-pa-a{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--blue);text-decoration:none;white-space:nowrap}
.vd-pa-a svg{width:16px;height:16px}
.cn-def a{font-weight:800;color:var(--blue)}

/* ---------- méthode ---------- */
.vd-me{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,18px)}
.vd-me li{display:flex;flex-direction:column;gap:10px;padding:26px 24px;border-radius:var(--r);background:#fff;box-shadow:0 26px 54px -46px rgba(10,40,80,.5)}
.vd-me span{font-size:2.2rem;font-weight:900;line-height:1;letter-spacing:-.04em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.vd-me h3{font-size:1.08rem}
.vd-me p{font-size:.92rem;line-height:1.6;color:var(--ink-2)}
.vd-me em{align-self:flex-start;margin-top:auto;padding:6px 14px;border-radius:999px;background:var(--soft);font-style:normal;font-size:.78rem;font-weight:800;color:var(--blue)}

/* ---------- responsive ---------- */
@media (max-width:1100px){.vd-wh{grid-template-columns:repeat(2,minmax(0,1fr))}.vd-fo,.vd-me{grid-template-columns:repeat(2,minmax(0,1fr))}.vd-jt{grid-template-columns:repeat(3,minmax(0,1fr))}.vd-jt::before{display:none}}
@media (max-width:1000px){.vd-hv{display:none}.vd-seo{grid-template-columns:1fr}.vd-pa{grid-template-columns:auto minmax(0,1fr)}.vd-pa-a{grid-column:2}}
@media (max-width:700px){.vd-wh,.vd-fo,.vd-me,.vd-jt,.vd-pa{grid-template-columns:1fr}.vd-pa-a{grid-column:auto}}
@media (prefers-reduced-motion:reduce){.vd-pl-b,.vd-ph-r i{animation:none}.vd-wh li,.vd-fo li{transition:none}}