/* Étude de cas Qevlar AI (oct. 2026) */
.qv{--qv-navy:#1a1a2e;--qv-blue:#2563eb;--qv-blue-l:#60a5fa;--qv-coral:#d9513d;--qv-coral-l:#e8604c;--qv-muted:#4a4a62;--qv-line:#ece7df;--qv-ease:cubic-bezier(.22,1,.36,1)}
.qv .qv-sec{padding:7rem 0}
.qv .qv-cream{background:#f5f0eb}
.qv .qv-light{background:#faf9f7}
.qv .qv-dark{background:var(--qv-navy);color:#fff;position:relative;overflow:hidden}
.qv .qv-dots{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:24px 24px;pointer-events:none}
.qv .qv-mono{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}
.qv .qv-hand{font-family:'Caveat',cursive;font-weight:600}
.qv .qv-card{background:#fff;border:1px solid var(--qv-line);border-radius:16px;box-shadow:0 18px 40px -30px rgba(26,26,46,.35)}
.qv .h2{margin-bottom:0}
.qv .qv-head{display:flex;flex-direction:column;gap:1.1rem;max-width:760px}
.qv .qv-head .title-section{margin-bottom:0}
.qv .qv-lead{font-family:Fraunces,serif;font-weight:500;font-size:1.35rem;line-height:1.45;color:var(--qv-navy);margin:0}

/* Hero */
.qv-hero{background:#f5f0eb;padding:10rem 0 6rem;overflow:hidden}
.qv-hero-grid{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:56px;align-items:center}
.qv-hero-txt{display:flex;flex-direction:column;gap:1.25rem}
.qv-hero-txt .title-section,.qv-hero-txt .h1{margin-bottom:0}
.qv-hero-sub{color:#5a5a72}
.qv-pills{display:flex;flex-wrap:wrap;gap:10px}
.qv-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:#fff;border:1px solid #e7e1d9;font-size:.875rem;color:var(--qv-navy)}
.qv-pill i{width:8px;height:8px;border-radius:50%;background:#16a34a;display:block}
.qv-pill i.is-coral{background:var(--qv-coral-l)}
.qv-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:.5rem 0 0;padding-top:1.4rem;border-top:1px solid #e3ddd4}
.qv-meta dt{color:#8a8478}
.qv-meta dd{margin:6px 0 0;font-weight:600;color:var(--qv-navy)}
.qv-hero-vis{position:relative}
.qv-stage{position:relative;width:100%;aspect-ratio:500/322;--k:1}
.qv-stage-in{position:absolute;left:0;top:0;width:500px;height:322px;transform:scale(var(--k));transform-origin:0 0}
.qv-hero-note{display:flex;align-items:center;gap:8px;margin-top:28px;margin-left:42%;font-size:1.6rem;color:var(--qv-coral-l);transform:rotate(-3deg)}

/* Animation blueprint (reprise de la vignette Qevlar) */
.qv-stage .A{animation-iteration-count:infinite;animation-fill-mode:both}
.qv-stage .frame{position:absolute;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 30px 50px -24px rgba(0,0,0,.45)}
.qv-stage .full{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
.qv-stage .bpgrid{background-color:#fff;background-image:linear-gradient(rgba(11,143,194,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(11,143,194,.09) 1px,transparent 1px);background-size:12px 12px}
.qv-stage .w{position:absolute;box-sizing:border-box;border:1.5px solid #0B8FC2;background:rgba(42,204,255,.08);border-radius:3px;overflow:hidden;white-space:nowrap}
.qv-stage .scan{position:absolute;left:0;right:0;height:2px;background:#2ACCFF;box-shadow:0 0 14px 3px rgba(42,204,255,.7)}
.qv-stage .qbp{animation:qvbp 5.9s cubic-bezier(.45,0,.2,1) infinite both}
@keyframes qvbp{0%,8.5%{clip-path:inset(0 0 100% 0);opacity:1}23.8%,63.4%{clip-path:inset(0 0 0 0);opacity:1}64.9%,100%{clip-path:inset(0 0 0 0);opacity:0}}
.qv-stage .qaf{animation:qvaf 5.9s cubic-bezier(.45,0,.2,1) infinite both}
@keyframes qvaf{0%,8.5%,48.1%{clip-path:inset(0 0 100% 0);opacity:1}63.4%,93.3%{clip-path:inset(0 0 0 0);opacity:1}99.5%,100%{clip-path:inset(0 0 0 0);opacity:0}}
.qv-stage .qscan{animation:qvscan 5.9s cubic-bezier(.45,0,.2,1) infinite both}
@keyframes qvscan{0%,8%{top:0;opacity:0}8.5%{top:0;opacity:1}23.8%{top:100%;opacity:1}25.2%,46.6%{top:100%;opacity:0}47.4%{top:0;opacity:0}48.1%{top:0;opacity:1}63.4%{top:100%;opacity:1}64.9%,100%{top:100%;opacity:0}}
.qv-stage .qm{animation-duration:5.9s;animation-timing-function:cubic-bezier(.3,0,.1,1)}
.qv-stage .qn{transform-origin:0 50%;animation:qvn 5.9s cubic-bezier(.34,1.3,.64,1) infinite both}
@keyframes qvn{0%,8.5%,34.4%{transform:scaleX(0);opacity:0}35.9%{opacity:1}43.5%,100%{transform:none;opacity:1}}
.qv-stage .qlab{position:absolute;right:10px;bottom:6px;font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.08em;color:#0B8FC2;animation:qvlab 5.9s ease infinite both}
@keyframes qvlab{0%,8.5%,32.9%{opacity:0}37.5%,48.1%{opacity:1}51.2%,100%{opacity:0}}
.qv-stage .q-top{left:0;top:0;width:500px;height:20px;animation-name:qvtop}
@keyframes qvtop{0%,8.5%,25.2%{left:0;top:0;width:500px;height:20px}40.5%,100%{left:0;top:0;width:500px;height:22px}}
.qv-stage .q-ov{left:54px;top:47px;width:27px;height:7px;animation-name:qvov}
@keyframes qvov{0%,8.5%,25.2%{left:54px;top:47px;width:27px;height:7px}40.5%,100%{left:47px;top:135px;width:60px;height:12px}}
.qv-stage .q-k1{left:58px;top:66px;width:61px;height:18px;animation-name:qvk1}
@keyframes qvk1{0%,8.5%,25.2%{left:58px;top:66px;width:61px;height:18px}40.5%,100%{left:100px;top:49px;width:195px;height:11px}}
.qv-stage .q-k2{left:123px;top:66px;width:105px;height:18px;animation-name:qvk2}
@keyframes qvk2{0%,8.5%,25.2%{left:123px;top:66px;width:105px;height:18px}40.5%,100%{left:47px;top:62px;width:231px;height:10px}}
.qv-stage .q-k3{left:255px;top:66px;width:65px;height:18px;animation-name:qvk3}
@keyframes qvk3{0%,8.5%,25.2%{left:255px;top:66px;width:65px;height:18px}40.5%,100%{left:47px;top:77px;width:270px;height:5px}}
.qv-stage .q-k4{left:353px;top:66px;width:47px;height:18px;animation-name:qvk4}
@keyframes qvk4{0%,8.5%,25.2%{left:353px;top:66px;width:47px;height:18px}40.5%,100%{left:47px;top:49px;width:48px;height:11px}}
.qv-stage .q-inc{left:58px;top:105px;width:303px;height:73px;animation-name:qvinc}
@keyframes qvinc{0%,8.5%,25.2%{left:58px;top:105px;width:303px;height:73px}40.5%,100%{left:47px;top:156px;width:199px;height:158px}}
.qv-stage .q-mal{left:58px;top:196px;width:172px;height:53px;animation-name:qvmal}
@keyframes qvmal{0%,8.5%,25.2%{left:58px;top:196px;width:172px;height:53px}40.5%,100%{left:254px;top:156px;width:199px;height:158px}}
.qv-stage .q-safe{left:255px;top:196px;width:182px;height:27px;animation-name:qvsafe}
@keyframes qvsafe{0%,8.5%,25.2%{left:255px;top:196px;width:182px;height:27px}40.5%,100%{left:47px;top:93px;width:406px;height:12px}}
.qv-stage .q-stp{left:54px;top:277px;width:44px;height:7px;animation-name:qvstp}
@keyframes qvstp{0%,8.5%,25.2%{left:54px;top:277px;width:44px;height:7px}40.5%,100%{left:47px;top:327px;width:60px;height:10px}}
.qv-stage .q-row{left:57px;top:303px;width:386px;height:18px;animation-name:qvrow}
@keyframes qvrow{0%,8.5%,25.2%{left:57px;top:303px;width:386px;height:18px}40.5%,100%{left:47px;top:345px;width:406px;height:15px}}
/* pause hors écran ; écran final si mouvement réduit */
.qv-stage:not(.qv-on) *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  .qv-stage .qbp,.qv-stage .scan{display:none}
  .qv-stage .qaf{animation:none;clip-path:none;opacity:1}
}

/* 01 Contexte */
.qv-ctx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:start}
.qv-ctx .qv-head .body+.body{margin-top:-.2rem}
.qv-ctx .qv-lead span{color:var(--qv-blue)}
.qv-symptoms{display:flex;flex-direction:column;gap:14px;padding-top:3.4rem}
.qv-symptoms>.qv-mono{color:#8a8478}
.qv-sym-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
.qv-sym{padding:22px;display:flex;flex-direction:column;gap:12px;font-weight:600;font-size:1.02rem;line-height:1.4;color:var(--qv-navy)}
.qv-ico{width:40px;height:40px;border-radius:10px;background:#fde8e4;display:flex;align-items:center;justify-content:center}
.qv-shot{position:relative;margin:18px 0 0;border-radius:14px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(26,26,46,.4);transform:rotate(-1.5deg);aspect-ratio:16/7}
.qv-shot img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
.qv-tag{position:absolute;top:14px;left:14px;padding:6px 10px;border-radius:6px;background:var(--qv-navy);color:#fff}
.qv-shot .qv-hand{position:absolute;right:16px;bottom:12px;padding:2px 10px;background:#fff;border-radius:6px;font-size:1.4rem;color:var(--qv-coral);transform:rotate(3deg)}

/* 02 Enjeu */
.qv-issue .qv-head{max-width:980px}
.qv-issue .h2{font-size:2.6rem;line-height:1.12}
.qv-issue .body{color:#c7c9dc;max-width:760px}
.qv-musts{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:2.5rem 0 0;padding:0;list-style:none}
.qv-musts li{padding:24px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);display:flex;gap:16px;align-items:flex-start;font-family:Fraunces,serif;font-size:1.3rem;line-height:1.3}
.qv-musts .qv-mono{color:var(--qv-blue-l);font-size:.8rem;margin-top:5px}
.qv-musts li:last-child .qv-mono{color:var(--qv-coral-l)}

/* 03 Ce que j'ai changé */
.qv-steps-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.qv-steps-head .body{max-width:420px}
.qv-path{display:block;width:100%;height:auto;margin-top:2.2rem}
.qv-path .qv-draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s var(--qv-ease)}
.qv-path circle{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4);transition:opacity .4s,transform .5s var(--qv-ease)}
.qv-path.qv-on .qv-draw{stroke-dashoffset:0}
.qv-path.qv-on circle{opacity:1;transform:none}
.qv-path.qv-on circle:nth-of-type(1){transition-delay:.3s}
.qv-path.qv-on circle:nth-of-type(2){transition-delay:.7s}
.qv-path.qv-on circle:nth-of-type(3){transition-delay:1.1s}
.qv-path.qv-on circle:nth-of-type(4){transition-delay:1.5s}
.qv-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:.5rem 0 0;padding:0;list-style:none}
.qv-step{padding:26px;display:flex;flex-direction:column;gap:12px}
.qv-step .qv-mono{color:var(--qv-blue)}
.qv-step h3{margin:0;font-family:Fraunces,serif;font-weight:600;font-size:1.5rem;color:var(--qv-navy)}
.qv-step p{margin:0;font-size:.95rem;line-height:1.6;color:#5a5a72}
.qv-step.is-last{border-color:#f3c4b9}
.qv-step.is-last .qv-mono{color:var(--qv-coral)}

/* 04 Résultats */
.qv-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:2.8rem 0 0;padding:0;list-style:none}
.qv-stat{padding:28px}
.qv-stat strong{display:block;font-family:Fraunces,serif;font-weight:600;font-size:3.6rem;line-height:1;color:var(--qv-blue)}
.qv-stat strong small{font-size:.5em;font-style:italic;font-weight:500}
.qv-stat span{display:block;margin-top:10px;font-size:1rem;line-height:1.45;color:var(--qv-muted)}
.qv-stat.is-dark{background:var(--qv-navy);border-color:var(--qv-navy)}
.qv-stat.is-dark strong{color:var(--qv-coral-l)}
.qv-stat.is-dark span{color:#c7c9dc}
.qv-proof{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;margin-top:24px}
.qv-high{padding:32px;border-radius:16px;background:#eff4ff;display:flex;flex-direction:column;justify-content:center;gap:14px}
.qv-high .qv-mono{color:var(--qv-blue)}
.qv-high p{margin:0;font-family:Fraunces,serif;font-weight:500;font-size:1.35rem;line-height:1.4;color:var(--qv-navy)}
.qv-quote{margin:0;padding:32px;display:flex;gap:24px;align-items:flex-start}
.qv-quote img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex-shrink:0}
.qv-quote blockquote{margin:0;padding:0;border:0;font-family:Fraunces,serif;font-size:1.1rem;line-height:1.55;color:var(--qv-navy)}
.qv-quote figcaption{margin-top:14px;text-align:left;font-size:.9rem;color:#5a5a72}
.qv-quote figcaption strong{display:block;font-size:1rem;color:var(--qv-navy)}

/* 05 Avant / après */
.qv-ba-head{align-items:center;text-align:center;margin:0 auto}
.qv-ba-head .h2{text-align:center}
.qv-ba-list{display:flex;flex-direction:column;gap:5rem;margin-top:4rem}
.qv-ba-row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:56px;align-items:center}
.qv-ba-row.is-rev{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}
.qv-ba-row.is-rev .qv-ba-txt{order:2}
.qv-ba-txt{display:flex;flex-direction:column;gap:20px}
.qv-ba-txt>.qv-mono{color:var(--qv-blue)}
.qv-ba-txt h3{margin:0;font-family:Fraunces,serif;font-weight:600;font-size:2rem;line-height:1.15;color:var(--qv-navy)}
.qv-ba-line{display:flex;gap:12px;align-items:flex-start;margin:0;font-size:1.05rem;line-height:1.55;color:var(--qv-muted)}
.qv-ba-line .qv-mono{flex-shrink:0;margin-top:3px;padding:4px 8px;border-radius:6px;background:var(--qv-navy);color:#fff;font-size:.68rem}
.qv-ba-line.is-after{color:var(--qv-navy);font-weight:500}
.qv-ba-line.is-after .qv-mono{background:var(--qv-blue)}
.qv .qv-ba-row .mi-ba{width:100%;max-width:none;margin:0;min-width:0}
.qv .qv-ba-row .mi-ba-frame{aspect-ratio:16/10.25}

/* 06 Comment j'interviens */
.qv-how{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:72px;align-items:start}
.qv-checks{display:flex;flex-direction:column;gap:14px;margin:.4rem 0 0;padding:0;list-style:none}
.qv-checks li{display:flex;gap:14px;align-items:flex-start;font-size:1.1rem;line-height:1.5;color:var(--qv-navy)}
.qv-checks svg{flex-shrink:0;margin-top:3px}
.qv-offer{margin-top:5rem;padding:32px;border-radius:20px;background:var(--qv-navy);color:#fff;display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden}

.qv-offer-tag{align-self:flex-start;padding:6px 10px;border-radius:999px;background:var(--qv-blue)}
.qv-offer h3{margin:0;font-family:Fraunces,serif;font-weight:600;font-size:1.6rem;line-height:1.2;color:#fff}
.qv-offer h3 em{font-weight:500;color:var(--qv-blue-l)}
.qv-offer p{position:relative;z-index:1;margin:0;font-size:.95rem;line-height:1.6;color:#c7c9dc}
.qv-offer .qv-then{position:relative;z-index:1;display:flex;gap:10px;align-items:flex-start;padding:14px;border-radius:12px;background:rgba(255,255,255,.06);font-size:.875rem;line-height:1.5;color:#e2e4f0}
.qv-offer .qv-then strong{color:#fff}
.qv-offer a{position:relative;z-index:1;color:#93c5fd;font-weight:500;text-decoration:none}
.qv-offer a:hover{color:#fff}

/* Projet suivant + CTA */
.qv-next{display:block;background:#f5f0eb;border-top:1px solid #e7e1d9;text-decoration:none;color:var(--qv-navy)}
.qv-next-in{min-height:100px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:24px;padding-bottom:24px}
.qv-next .qv-mono{color:#8a8478}
.qv-next-t{font-family:Fraunces,serif;font-weight:600;font-size:1.5rem;line-height:1.25;text-align:right}
.qv-next-t span{color:var(--qv-blue);display:inline-block;transition:transform .3s var(--qv-ease)}
.qv-next:hover .qv-next-t span{transform:translateX(6px)}
.qv-cta{padding:7.5rem 0;text-align:center}
.qv-cta .qv-head{align-items:center;margin:0 auto;max-width:820px}
.qv-cta .h2{text-align:center;font-size:2.6rem;line-height:1.15}
.qv-cta .h2 .is-coral{color:var(--qv-coral-l);white-space:nowrap}
.qv-cta .body{text-align:center;max-width:640px}
.qv-cta .button-primary{margin-top:1rem;background:var(--qv-coral)}
.qv-cta .button-primary:hover{background:#c4442f}

/* Responsive */
@media (max-width:991px){
  .qv .qv-sec{padding:5rem 0}
  .qv-hero{padding:8rem 0 4.5rem}
  .qv-hero-grid,.qv-ctx,.qv-how,.qv-proof{grid-template-columns:minmax(0,1fr);gap:40px}
  .qv-hero-txt{text-align:center;align-items:center}
  .qv-hero-txt .body{text-align:center}
  .qv-pills{justify-content:center}
  .qv-meta{width:100%;text-align:left}
  .qv-hero-vis{max-width:600px;margin:0 auto;width:100%}
  .qv-symptoms{padding-top:0}
  .qv-musts,.qv-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qv-musts li:last-child{grid-column:1/-1}
  .qv-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qv-path{display:none}
  .qv-steps-head{flex-direction:column;align-items:flex-start;gap:16px}
  .qv-ba-row,.qv-ba-row.is-rev{grid-template-columns:minmax(0,1fr);gap:28px}
  .qv-ba-row.is-rev .qv-ba-txt{order:0}
  .qv-ba-list{gap:4rem}
  .qv-offer{margin-top:0}
  .qv-issue .h2,.qv-cta .h2{font-size:2.1rem}
}
@media (max-width:767px){
  .qv .qv-sec{padding:4rem 0}
  .qv-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qv-sym-grid,.qv-musts,.qv-steps,.qv-stats{grid-template-columns:minmax(0,1fr)}
  .qv-stat strong{font-size:3rem}
  .qv-quote{flex-direction:column;padding:24px}
  .qv-high{padding:24px}
  .qv-hero-note{font-size:1.35rem}
  .qv-next-in{flex-direction:column;align-items:flex-start;gap:6px}
  .qv-next-t{text-align:left;font-size:1.25rem}
  .qv-issue .h2,.qv-cta .h2{font-size:1.75rem}
  .qv-cta .h2 .is-coral{white-space:normal}
  .qv-cta{padding:5rem 0}
}
.qv .qv-dark .h2.mi-accent .h2---span{color:var(--qv-blue-l)}
.qv .qv-dark .h2.mi-accent .h2---span.is-coral{color:var(--qv-coral-l)}