/* ===== 01 — Hero (sobre) ===== */
.s-hero{padding-top:clamp(112px,13vh,140px);padding-bottom:clamp(56px,8vw,96px)}
.s-hero__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,6vw,80px);align-items:center}
.s-hero__eyebrow{margin-bottom:18px}

.s-hero__title{font-size:clamp(40px,5vw,72px);line-height:1.04;letter-spacing:-.035em;font-weight:800;color:var(--ink);max-width:14ch}
.s-hero__vue{color:var(--blue)}
.s-hero__l2{display:block;color:var(--ink-3)}
.s-hero__lue{position:relative;display:inline-block}
.s-hero__lue::after{content:"";position:absolute;left:-2%;right:-2%;top:55%;height:max(2px,.05em);background:var(--ink-3);transform-origin:left center}

.s-hero__sub{margin-top:24px;font-size:clamp(17px,1.4vw,19px);color:var(--ink-2);max-width:500px}
.s-hero__punch{margin-top:10px;font-family:var(--font-display);font-weight:700;font-size:clamp(18px,1.5vw,20px);letter-spacing:-.015em;color:var(--ink)}
.s-hero__punch span{color:var(--blue)}
.s-hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.s-hero__chips{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14.5px;font-weight:500;color:var(--ink-2)}
.s-hero__chips li{display:inline-flex;align-items:center;gap:7px}
.s-hero__chips svg{width:16px;height:16px;fill:none;stroke:var(--blue);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* téléphone : cadre fin, ombre légère */
.s-hero__visual{display:flex;justify-content:center}
.s-hero__phone{width:min(290px,100%);aspect-ratio:9/19;padding:6px;border-radius:40px;background:#fff;border:1px solid #d6dae1;box-shadow:var(--shadow);overflow:hidden}
.s-hero__video{width:100%;height:100%;object-fit:cover;border-radius:34px;background:var(--bg-2)}

.s-hero a:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* entrée : filet de sécurité si le JS ne démarre pas */
@media (scripting:enabled){
  .s-hero [data-h]{opacity:0;animation:sHeroSafe .01s 2s forwards}
  .s-hero.is-go [data-h]{animation:none}
}
@keyframes sHeroSafe{to{opacity:1}}

@media (max-width:760px){
  .s-hero{padding-top:92px;padding-bottom:56px}
  .s-hero__grid{grid-template-columns:1fr;gap:40px}
  .s-hero__title{font-size:clamp(36px,10.5vw,44px)}
  .s-hero__sub{margin-top:18px;font-size:17px}
  .s-hero__ctas{flex-direction:column;align-items:stretch;margin-top:24px}
  .s-hero__ctas .cm-btn{justify-content:center}
  .s-hero__chips{gap:8px 16px;font-size:14px}
  .s-hero__phone{width:min(220px,60vw);border-radius:34px;padding:5px}
  .s-hero__video{border-radius:29px}
}