/* Homepage hero v2 « Système vivant » (w116, from the w67 mock docs/mocks/2026-10-hero-v2/live.html).
   Above the fold, loaded blocking. Every rule is scoped under .hero-v2: header.css owns the global .btn-primary / .ico.
   No full-viewport centring (the mock had no site header): the copy starts under the header so the CTAs stay above the fold.
   html.hv-still (reduced motion, Save-Data, or the pause button) stops all hero motion. */
.hero-v2{position:relative;padding:48px 0 64px;overflow:hidden;background-color:var(--grey-100);
  background-image:radial-gradient(rgb(23 23 23 / .09) 1px,transparent 1px);background-size:22px 22px}
.hero-v2::before{content:"";position:absolute;right:-20vw;top:-30vh;width:80vw;height:80vw;border-radius:50%;
  background:radial-gradient(closest-side,rgb(255 107 74 / .16),transparent);pointer-events:none}
.hero-v2 .hv-grid{position:relative;width:100%;max-width:1240px;margin:0 auto;padding:0 20px;display:grid;gap:40px;align-items:center}
@media (min-width:768px){.hero-v2 .hv-grid{padding:0 40px}}
@media (min-width:1024px){.hero-v2 .hv-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}}
.hero-v2 .ico{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* copy */
.hero-v2 .hv-kicker{display:inline-flex;align-items:center;gap:10px;padding:6px 12px 6px 8px;border-radius:var(--radius-md);background:var(--white);border:1px solid var(--grey-200);
  font-size:12px;font-weight:600;line-height:1.2;color:var(--grey-600)}
.hero-v2 .hv-live{flex:none;width:8px;height:8px;border-radius:50%;background:var(--orange-500);animation:hv-blink 1.6s ease-in-out infinite}
@keyframes hv-blink{50%{opacity:.25}}
.hero-v2 h1{margin-top:22px;font-size:clamp(42px,6.2vw,88px);line-height:.95;letter-spacing:-.05em;font-weight:800}
.hero-v2 h1 span{display:block;color:var(--orange-500)}
.hero-v2 .hv-lede{margin-top:22px;font-size:clamp(16px,1.5vw,19px);color:var(--grey-600);max-width:42ch}
.hero-v2 .hv-lede b{color:var(--grey-900);font-weight:600}

/* CTAs: WhatsApp then Appeler */
.hero-v2 .hero-cta{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.hero-v2 .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:var(--radius-lg);
  font-size:16px;font-weight:600;line-height:1;text-decoration:none;transition:transform .2s,background-color .2s,color .2s}
.hero-v2 .btn:hover{transform:translateY(-1px)}
.hero-v2 .btn:focus-visible,.hero-v2 .hv-toggle:focus-visible{outline:3px solid var(--orange-500);outline-offset:3px}
.hero-v2 .btn-primary{background:var(--orange-500);color:var(--white);box-shadow:0 10px 30px -10px rgb(255 107 74 / .7)}
.hero-v2 .btn-primary:hover{background:var(--orange-600)}
.hero-v2 .btn-secondary{background:var(--white);color:var(--grey-900);border:1px solid var(--grey-200)}
.hero-v2 .btn-secondary:hover{border-color:var(--grey-900)}

/* rating + Google notice (legal verbatim) */
.hero-v2 .hv-trust{margin-top:24px;display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.45;max-width:46ch;color:var(--grey-600)}
.hero-v2 .hv-trust strong{color:var(--grey-900);font-weight:700}
.hero-v2 .hv-stars{display:inline-flex;gap:2px;color:var(--orange-500);padding-top:2px}
.hero-v2 .hv-stars .ico{width:13px;height:13px;fill:currentColor;stroke:none}

/* illustrative dashboard */
.hero-v2 .hv-stage{perspective:1600px}
.hero-v2 .hv-dash{position:relative;border-radius:var(--radius-2xl);background:var(--white);border:1px solid var(--grey-200);
  box-shadow:0 40px 80px -30px rgb(23 23 23 / .35),0 12px 24px -12px rgb(23 23 23 / .15);overflow:hidden}
@media (min-width:1024px){.hero-v2 .hv-dash{transform:rotateY(-9deg) rotateX(4deg);transform-origin:left center;transition:transform .8s cubic-bezier(.2,.7,.1,1)}
  .hero-v2 .hv-stage:hover .hv-dash{transform:none}}
.hero-v2 .hv-chrome{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--grey-200);background:var(--grey-50)}
.hero-v2 .hv-chrome i{width:10px;height:10px;border-radius:50%;background:var(--grey-200)}
.hero-v2 .hv-title{margin-left:8px;font-size:12px;font-weight:600;color:var(--grey-600);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-v2 .hv-illu{margin-left:auto;flex:none;padding:4px 8px;border-radius:var(--radius-md);background:var(--orange-50);color:var(--orange-600);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.hero-v2 .hv-panes{display:grid}
@media (min-width:640px){.hero-v2 .hv-panes{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}}
.hero-v2 .hv-pane{padding:14px}
.hero-v2 .hv-pane+.hv-pane{border-top:1px solid var(--grey-200)}
@media (min-width:640px){.hero-v2 .hv-pane+.hv-pane{border-top:0;border-left:1px solid var(--grey-200)}}
@media (max-width:639px){.hero-v2 .hv-msgs{display:none}}
.hero-v2 .hv-head{display:flex;justify-content:space-between;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-400);margin-bottom:10px}
.hero-v2 .hv-flow{display:inline-flex;align-items:center;gap:4px}

/* fixed boxes: title on its own line; the status chip fills a fixed column beside the category and keeps its icon slot,
   so a status change never moves anything */
.hero-v2 .hv-feed{list-style:none;display:grid;gap:8px}
.hero-v2 .hv-row{display:grid;grid-template-columns:34px minmax(0,1fr) 92px;gap:4px 10px;align-items:center;padding:10px;border-radius:var(--radius-lg);border:1px solid var(--grey-200);background:var(--white)}
.hero-v2 .hv-row.hv-in{animation:hv-slidein .55s cubic-bezier(.2,.7,.1,1) both}
@keyframes hv-slidein{from{opacity:0;transform:translateY(-14px) scale(.98)}to{opacity:1;transform:none}}
.hero-v2 .hv-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--radius-md);background:var(--grey-100);color:var(--grey-900);grid-row:span 2}
.hero-v2 .hv-ic .ico{width:17px;height:17px}
.hero-v2 .hv-what{grid-column:2/4;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-v2 .hv-who{font-size:11px;color:var(--grey-600);grid-column:2}
.hero-v2 .hv-st{grid-row:2;grid-column:3;display:flex;align-items:center;gap:5px;padding:4px 8px;border-radius:var(--radius-md);font-size:11px;font-weight:600;
  background:var(--grey-100);color:var(--grey-600);transition:background-color .4s,color .4s}
.hero-v2 .hv-st .ico{width:11px;height:11px;visibility:hidden}
.hero-v2 .hv-bar{grid-column:2/4;height:3px;border-radius:var(--radius-md);background:var(--grey-100);overflow:hidden}
.hero-v2 .hv-bar b{display:block;height:100%;width:25%;background:var(--grey-900);border-radius:var(--radius-md);transition:width .9s cubic-bezier(.2,.7,.1,1),background-color .4s}
.hero-v2 .hv-row[data-s="1"] .hv-bar b{width:50%}
.hero-v2 .hv-row[data-s="2"] .hv-bar b{width:75%}
.hero-v2 .hv-row[data-s="3"] .hv-bar b{width:100%;background:var(--orange-500)}
.hero-v2 .hv-row[data-s="3"] .hv-st{background:var(--orange-500);color:var(--white)}
.hero-v2 .hv-row[data-s="3"] .hv-st .ico{visibility:visible}
.hero-v2 .hv-row.hv-flash{animation:hv-flash .9s cubic-bezier(.2,.7,.1,1)}
@keyframes hv-flash{0%{box-shadow:0 0 0 0 rgb(255 107 74 / .5)}100%{box-shadow:0 0 0 10px rgb(255 107 74 / 0)}}

/* message thread (illustrative, wide screens only) */
.hero-v2 .hv-thread{display:grid;gap:8px;font-size:12px;line-height:1.4}
.hero-v2 .hv-bub{max-width:88%;padding:8px 10px;border-radius:var(--radius-xl);animation:hv-pop 12s cubic-bezier(.2,.7,.1,1) infinite both}
.hero-v2 .hv-them{background:var(--grey-100)}
.hero-v2 .hv-us{justify-self:end;background:var(--grey-900);color:var(--white)}
.hero-v2 .hv-us.hv-done{background:var(--orange-500)}
.hero-v2 .hv-bub:nth-child(2){animation-delay:1.5s}
.hero-v2 .hv-bub:nth-child(3){animation-delay:3s}
.hero-v2 .hv-bub:nth-child(4){animation-delay:4.5s}
@keyframes hv-pop{0%{opacity:0;transform:translateY(8px)}6%,90%{opacity:1;transform:none}100%{opacity:0}}
.hero-v2 .hv-typing{display:inline-flex;gap:3px;padding:8px 10px;border-radius:var(--radius-xl);background:var(--grey-100);width:max-content}
.hero-v2 .hv-typing i{width:5px;height:5px;border-radius:50%;background:var(--grey-400);animation:hv-blink 1s infinite}
.hero-v2 .hv-typing i:nth-child(2){animation-delay:.15s}
.hero-v2 .hv-typing i:nth-child(3){animation-delay:.3s}

.hero-v2 .hv-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid var(--grey-200);font-size:11px;color:var(--grey-600)}
/* pause / play (WCAG 2.2.2) */
.hero-v2 .hv-toggle{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border-radius:var(--radius-md);border:1px solid currentColor;
  background:transparent;color:var(--grey-600);font-size:12px;font-weight:600;line-height:1;cursor:pointer}
.hero-v2 .hv-toggle:hover{color:var(--grey-900)}
.hero-v2 .hv-toggle .ico{width:12px;height:12px;fill:currentColor;stroke:none}
.hero-v2 .hv-toggle .hv-play,.hv-still .hero-v2 .hv-toggle .hv-pause{display:none}
.hv-still .hero-v2 .hv-toggle .hv-play{display:inline}

/* motion off */
.hv-still .hero-v2 *,.hv-still .hero-v2 *::before,.hv-still .hero-v2 *::after{animation:none!important;transition:none!important}
.hv-still .hero-v2 .hv-bub{opacity:1}
.hv-still .hero-v2 .hv-typing{display:none}