/* ============================================================
   OPSOR · v3 CINEMA — responsive (mobile only)
   Toutes les règles sont scope dans @media — desktop intact.
   Breakpoints : 1100, 880, 600, 480.
   ============================================================ */

/* ---------- BURGER (visible <=880px seulement) ---------- */
.nav-burger{
  display:none;
  width:40px;height:40px;border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  position:relative;cursor:pointer;
  transition:background .25s,transform .25s var(--e-spring);
}
.nav-burger:hover{background:rgba(255,255,255,.1);transform:translateY(-1px)}
.nav-burger span{
  position:absolute;left:50%;width:16px;height:1.5px;
  background:var(--ink);border-radius:1px;
  transform:translateX(-50%);transform-origin:center;
  transition:transform .35s var(--e-spring),opacity .2s,top .35s var(--e-spring);
}
.nav-burger span:nth-child(1){top:14px}
.nav-burger span:nth-child(2){top:19px}
.nav-burger span:nth-child(3){top:24px}
.nav-burger.open span:nth-child(1){top:19px;transform:translateX(-50%) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){top:19px;transform:translateX(-50%) rotate(-45deg)}

/* ---------- MOBILE MENU OVERLAY (injecté en body via ui.js)
   Solo visible quand body.nav-open. Au niveau body pour éviter
   le piège du transform translateX du .nav. ---------- */
.nav-mobile{
  position:fixed;inset:0;z-index:100;
  background:rgba(10,10,14,.96);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  display:flex;flex-direction:column;
  padding:84px 24px max(24px,env(safe-area-inset-bottom));
  opacity:0;visibility:hidden;
  transition:opacity .35s var(--e-out),visibility 0s linear .35s;
}
body.nav-open .nav-mobile{
  opacity:1;visibility:visible;
  transition:opacity .35s var(--e-out),visibility 0s linear 0s;
}
.nav-mobile-eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:18px;
  display:flex;align-items:center;gap:8px;
}
.nav-mobile-eyebrow::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:var(--brand-bright);box-shadow:0 0 10px var(--brand-bright);
}
.nav-mobile-links{
  display:flex;flex-direction:column;
  flex:1;overflow-y:auto;overflow-x:hidden;
  list-style:none;margin:0;padding:0;
  /* Hide scrollbar visually */
  scrollbar-width:none;-ms-overflow-style:none;
}
.nav-mobile-links::-webkit-scrollbar{display:none}
.nav-mobile-links a{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-family:'Fraunces',serif;font-weight:400;
  font-size:clamp(26px,6.4vw,40px);letter-spacing:-.018em;line-height:1.1;
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:var(--ink);background:transparent;text-decoration:none;
  text-align:left;
  opacity:0;transform:translateX(-12px);
  transition:opacity .5s var(--e-out),transform .5s var(--e-out),color .25s;
}
.nav-mobile-links a:first-child{padding-top:8px}
.nav-mobile-links a::after{
  content:'↗';
  font-family:'Satoshi',sans-serif;
  font-size:14px;letter-spacing:0;
  color:var(--ink-3);
  transform:translateY(-2px);
  transition:color .25s,transform .35s var(--e-spring);
}
.nav-mobile-links a:hover::after,
.nav-mobile-links a:focus::after,
.nav-mobile-links a.active::after{color:var(--brand-bright);transform:translateY(-2px) translateX(2px)}
.nav-mobile-links a.active{color:var(--brand-bright)}
.nav-mobile-links a em{color:var(--brand-bright);font-style:italic;font-weight:300}
body.nav-open .nav-mobile-links a{opacity:1;transform:translateX(0)}
body.nav-open .nav-mobile-links a:nth-child(1){transition-delay:.06s}
body.nav-open .nav-mobile-links a:nth-child(2){transition-delay:.11s}
body.nav-open .nav-mobile-links a:nth-child(3){transition-delay:.16s}
body.nav-open .nav-mobile-links a:nth-child(4){transition-delay:.21s}
body.nav-open .nav-mobile-links a:nth-child(5){transition-delay:.26s}
body.nav-open .nav-mobile-links a:nth-child(6){transition-delay:.31s}

.nav-mobile-cta{
  margin-top:20px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 8px 12px 22px;border-radius:999px;
  background:var(--ink);color:#000;
  font-size:14px;font-weight:500;text-decoration:none;
  opacity:0;transform:translateY(20px);
  transition:opacity .55s var(--e-out) .4s,transform .55s var(--e-out) .4s;
}
.nav-mobile-cta .nav-cta-circle{
  width:26px;height:26px;border-radius:50%;
  background:#000;color:#fff;
  display:grid;place-items:center;font-size:12px;
}
body.nav-open .nav-mobile-cta{opacity:1;transform:translateY(0)}

@media(max-height:640px){
  .nav-mobile{padding:72px 22px max(20px,env(safe-area-inset-bottom))}
  .nav-mobile-links a{font-size:clamp(22px,5.5vw,32px);padding:11px 0}
  .nav-mobile-eyebrow{margin-bottom:12px}
}

/* ============================================================
   <= 1100px — tablette
   ============================================================ */
@media(max-width:1100px){
  /* Nav devient 3-col plus serré */
  .nav-links{gap:2px}
  .nav-links a{padding:7px 11px;font-size:13px}
}

/* ============================================================
   <= 880px — mobile (point bascule majeur)
   ============================================================ */
@media(max-width:880px){
  :root{--gutter:20px}

  /* ---------- NAV ---------- */
  .nav{
    grid-template-columns:auto auto !important;
    gap:8px;
    width:calc(100vw - 20px);
    padding:6px 6px 6px 16px;
  }
  /* Mobile shrink on scroll — bar passes ~60% width, brand text disappears */
  .nav.scrolled{
    width:max(60vw,260px);
    padding:5px 5px 5px 12px;
  }
  .nav.scrolled .brand-name{
    max-width:0;opacity:0;overflow:hidden;
    margin-left:-4px;letter-spacing:-1em;
  }
  .nav.scrolled .nav-brand{gap:0}
  .nav.scrolled .brand-mark{width:22px;height:22px}
  .nav.scrolled .nav-burger{
    width:36px;height:36px;
  }
  .nav-brand,.brand-name,.brand-mark{
    transition:
      transform .35s var(--e-spring),
      max-width .55s cubic-bezier(.32,.72,.16,1),
      opacity .45s cubic-bezier(.32,.72,.16,1),
      letter-spacing .55s cubic-bezier(.32,.72,.16,1),
      width .55s cubic-bezier(.32,.72,.16,1),
      height .55s cubic-bezier(.32,.72,.16,1),
      gap .55s cubic-bezier(.32,.72,.16,1),
      margin-left .55s cubic-bezier(.32,.72,.16,1);
  }
  .nav-burger{
    transition:
      background .25s,transform .25s var(--e-spring),
      width .55s cubic-bezier(.32,.72,.16,1),
      height .55s cubic-bezier(.32,.72,.16,1);
  }
  .nav-burger{display:block;position:relative;z-index:2}
  .nav-cta{display:none}
  /* When menu open: keep nav (and its burger) above the overlay so it stays clickable */
  body.nav-open .nav{z-index:101}
  body.nav-open .nav-burger{
    background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);
  }
  .nav-brand{font-size:15px}
  .brand-mark{width:22px;height:22px}

  /* Mobile menu overlay — injected at body level via ui.js
     (avoids being trapped by .nav's translateX which breaks position:fixed) */
  body.nav-open{overflow:hidden}
  body.nav-open .nav-links{display:none !important}

  /* ---------- Typographie globale ---------- */
  .big-title{
    font-size:clamp(40px,9vw,80px);
    letter-spacing:-.025em;max-width:100%;
  }
  .big-sub{font-size:15px;line-height:1.55;margin-top:20px}
  .constat-eyebrow{margin-bottom:18px}

  .page-hero{padding:104px 20px 48px}
  .page-hero-h{
    font-size:clamp(44px,11vw,88px);
    letter-spacing:-.035em;
    max-width:100%;
  }
  .page-hero-sub{font-size:16px;line-height:1.5;margin-top:24px;max-width:100%}
  .page-hero-eyebrow{margin-bottom:24px}
  .page-hero-eyebrow .crumb{font-size:10px;letter-spacing:.14em}

  /* ---------- HERO conversational ---------- */
  .hero-conv{padding:90px 14px 0;gap:24px;perspective:none}
  .hero-conv-head{min-height:auto;padding:32px 0;gap:24px}
  .hero-conv-tagline{
    font-size:clamp(48px,13.5vw,96px);
    line-height:.95;letter-spacing:-.04em;
  }
  .hero-conv-baseline{font-size:clamp(15px,3.6vw,18px);line-height:1.4;max-width:100%}

  .hero-conv-card{
    aspect-ratio:auto;min-height:480px;
    width:100%;max-width:100%;
    border-radius:18px;
    /* Disable 3D tilt on mobile — it can shift the card horizontally */
    transform:none !important;
  }
  .hero-conv-top{padding:11px 14px;gap:8px}
  .hero-conv-brand{gap:6px}
  .hero-conv-brand-name{font-size:12.5px}
  .hero-conv-brand-status{display:none}
  .hero-conv-skills-btn{font-size:9.5px;padding:5px 10px 5px 7px;letter-spacing:.06em}
  .hero-conv-skills-btn svg{width:11px;height:11px}

  .hero-conv-stream{padding:18px 14px;gap:12px}
  .hero-conv-msg-user{max-width:88%;font-size:13px;padding:8px 12px}
  .hero-conv-msg-agent{gap:9px}
  .hero-conv-avatar{width:22px;height:22px}
  .hero-conv-avatar svg{width:11px;height:11px}
  .hero-conv-text{font-size:13px;line-height:1.5}
  .hero-conv-chip{font-size:10.5px}
  .hero-conv-chip-logo{width:14px;height:14px}

  .hero-conv-composer{margin:0 10px 10px;padding:8px 10px}
  .hero-conv-input{font-size:12.5px}

  .hero-conv-cap-pop{
    width:calc(100% - 24px);
    right:12px;left:12px;top:56px;
    padding:14px;
  }
  .hero-conv-cap-pop-title{font-size:13px}
  .hero-conv-cap-grid{gap:5px}
  .hero-conv-cap-card{padding:8px}
  .hero-conv-cap-name{font-size:10.5px}

  .hero-conv-launched{font-size:9.5px;padding:4px 10px}
  .hero-conv-foot{flex-direction:column;gap:14px}
  .hero-conv-stars{align-items:center;text-align:center}

  /* ---------- DIRECTIONAL MARQUEE ---------- */
  .dir-marquee{padding:18px 0}
  .dir-marquee-track{gap:24px;font-size:clamp(28px,7.5vw,52px)}

  /* ---------- CONSTAT ---------- */
  .constat{padding:80px 0 48px}
  .constat-intro{margin-bottom:48px;padding:0 20px}
  .constat-split{padding:0 20px;gap:32px;grid-template-columns:1fr}
  .constat-split-right .stack-panel{padding:48px 0}
  .constat-split-right .stack-num{font-size:48px;margin-bottom:18px}
  .constat-split-right .stack-title{font-size:clamp(32px,8vw,48px)}
  .constat-split-right .stack-text{font-size:14.5px;margin-top:18px}

  /* ---------- AGENTS pinned (kept) ---------- */
  .agents{padding:90px 0 0}
  .agents-intro{margin-bottom:64px;padding:0 20px}
  .agent-panel{padding:24px 6vw 28px}
  .agent-panel-meta{font-size:10.5px}
  .agent-panel-glyph{
    width:60px !important;height:60px !important;
    border-radius:14px !important;
  }
  .agent-panel-glyph svg{width:55%;height:55%}
  .agent-panel-title{
    font-size:clamp(40px,11vw,84px) !important;
    letter-spacing:-.035em;margin-bottom:14px;
  }
  .agent-panel-text{font-size:14px !important;line-height:1.45;margin-bottom:14px}
  .agent-panel-skills{gap:6px}
  .agent-panel-skills li{font-size:10px;padding:4px 9px}
  .agent-demo{font-size:12px;padding:7px 16px 7px 7px}
  .agent-demo-ic{width:26px;height:26px;font-size:10px}
  .agent-demo-row{margin:14px 0 16px}

  /* ---------- OPS blocks ---------- */
  .ops{padding:80px 0 48px}
  .ops-intro{margin-bottom:64px;padding:0 20px}
  .ops-block,.ops-block.reverse{
    grid-template-columns:1fr;gap:24px;padding:32px 20px;
  }
  .ops-h{font-size:clamp(34px,8.5vw,60px);margin-bottom:20px}
  .ops-p{font-size:15px;margin-bottom:24px;max-width:100%}
  .ops-points{gap:14px}
  .ops-points p{font-size:14px;line-height:1.5}
  .ops-figure{border-radius:18px}

  /* ---------- SCENARIOS pinned (kept) ---------- */
  .scenarios{padding:80px 0 0}
  .scenarios-intro{margin-bottom:48px;padding:0 20px}
  .scen-pin-track{height:90vh}
  .scen-pin-row{gap:18px;padding:0 6vw}
  .scen-card{
    flex:0 0 86vw;height:74vh;max-height:560px;
    padding:30px 24px;border-radius:24px;gap:18px;
  }
  .scen-h{font-size:clamp(28px,7.5vw,44px);line-height:1}
  .scen-msg{padding:18px;border-radius:14px}
  .scen-msg p{font-size:14px}
  .scen-tools{gap:6px}
  .tool-tile{font-size:11px;padding:6px 10px}
  .tool-tile img{width:14px;height:14px}

  /* ---------- CONNEXIONS ---------- */
  .conn{padding:32px 0 64px}
  .conn-intro{margin-bottom:32px;padding:0 20px}
  .conn-orbit{width:min(360px,86vw)}
  .conn-cats{gap:10px;margin-top:32px;font-size:11px}

  /* ---------- MID-CTA ---------- */
  .mid-cta{padding:100px 20px}
  .mid-cta-h{font-size:clamp(56px,15vw,140px);margin-bottom:32px}
  .mid-cta-eyebrow{margin-bottom:22px;font-size:10px}

  /* ---------- STEPS ---------- */
  .steps{padding:80px 20px}
  .steps-intro{margin-bottom:48px}
  .steps-grid{grid-template-columns:1fr}
  .step{padding:32px 24px}
  .step-num{font-size:54px}
  .step-h{font-size:22px}
  .step-p{font-size:14.5px}

  /* ---------- PRICING ---------- */
  .pricing{padding:80px 20px}
  .pricing-intro{margin-bottom:48px}
  .pricing-grid{grid-template-columns:1fr;gap:16px}
  .plan{padding:32px 24px;border-radius:24px;gap:24px}
  .plan-name{font-size:28px}
  .plan-price .display{font-size:60px}
  .plan-cur{font-size:20px}
  .plan-feats{gap:12px;font-size:14.5px}
  .plan-flag{top:18px;right:18px;font-size:10px}

  .compare{padding:0 20px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .compare-table{min-width:560px}
  .compare-table thead th,.compare-table tbody td{padding:14px 16px;font-size:13px}
  .compare-table thead th{font-size:18px}

  /* ---------- TRUST ---------- */
  .trust{padding:64px 20px}
  .trust-row{flex-direction:column;gap:24px}
  .trust-line{display:none}
  .trust-num{font-size:clamp(40px,9vw,60px)}

  /* ---------- FAQ ---------- */
  .faq{padding:80px 20px}
  .faq-intro{margin-bottom:48px}
  .faq-i summary{
    grid-template-columns:30px 1fr 24px;gap:14px;
    font-size:clamp(16px,4vw,22px);padding:18px 0;line-height:1.25;
  }
  .faq-a{padding:0 12px 26px 44px;font-size:14.5px;line-height:1.6}

  /* ---------- FINAL CTA card ---------- */
  .final{padding:80px 20px}
  .final-card{padding:56px 26px;border-radius:32px}
  .final-h{font-size:clamp(44px,11.5vw,96px);margin-bottom:18px}
  .final-p{font-size:15.5px;margin-bottom:30px}

  /* ---------- FOOTER ---------- */
  .footer{padding:64px 20px 28px}
  .footer-grid{grid-template-columns:1fr;gap:36px;margin-bottom:48px}
  .footer-cols{grid-template-columns:repeat(2,1fr);gap:22px}
  .footer-cols a{font-size:13.5px}
  .footer-end{font-size:10px;flex-direction:column;align-items:flex-start;gap:6px}
  .footer-logo{width:48px;height:48px}
  .footer-brand .display{font-size:22px}
  .footer-tag{font-size:13.5px}

  /* ---------- SECTION generic ---------- */
  .section{padding:64px 0}
  .section-head{
    grid-template-columns:1fr;gap:18px;margin-bottom:36px;padding:0 20px;
  }
  .section-head .big-title{font-size:clamp(36px,8.5vw,64px)}
  .section-head-r{font-size:15px;line-height:1.5}

  /* ---------- AGENTS PROFILE (page agents.html) ---------- */
  .agent-prof{
    grid-template-columns:1fr;gap:32px;
    padding:56px 20px;
  }
  .agent-prof-tag .num{font-size:36px}
  .agent-prof-tag .lbl{font-size:10px}
  .agent-prof-h{font-size:clamp(40px,9.5vw,68px);line-height:1}
  .agent-prof-p{font-size:15.5px;line-height:1.5;max-width:100%}

  /* Caps list */
  .cap{
    grid-template-columns:auto 1fr;gap:14px;
    padding:18px 0;
  }
  .cap-num{font-size:11px}
  .cap-name{font-size:18px}
  .cap-tools{grid-column:1 / -1;padding-left:0;margin-top:-4px;gap:4px}
  .cap-tool{font-size:10px;padding:3px 9px 3px 3px}
  .cap-tool img{width:13px;height:13px}
  .cap-arr{display:none}

  /* ---------- INTEGRATIONS ---------- */
  .intg-grid{grid-template-columns:repeat(2,1fr)}
  .intg-tile{padding:24px 16px}
  .intg-tile-logo{width:42px;height:42px}
  .intg-tile-name{font-size:15px}
  .intg-tile-cat{font-size:9px}
  .intg-tile-status{font-size:8px;top:14px;right:14px}

  /* ---------- FCARD ---------- */
  .fgrid,.fgrid-2,.fgrid-4{grid-template-columns:1fr}
  .fcard{padding:32px 24px;gap:16px}
  .fcard-h{font-size:22px}
  .fcard-p{font-size:14px}
  .fcard-list li{font-size:12.5px}
  .fcard-glyph{width:48px;height:48px;border-radius:14px}
  .fcard-glyph svg{width:20px;height:20px}

  /* ---------- PILLARS (security) ---------- */
  .pillars{grid-template-columns:1fr;gap:14px;padding:0 20px}
  .pillar{padding:32px 26px;border-radius:24px;gap:16px}
  .pillar-glyph{width:56px;height:56px}
  .pillar-glyph svg{width:24px;height:24px}
  .pillar-h{font-size:24px}
  .pillar-p{font-size:14px}

  /* ---------- SPEC TABLE ---------- */
  .spec{padding:0 20px}
  .spec-row{
    grid-template-columns:1fr;gap:6px;padding:18px 0;
  }
  .spec-key{font-size:10.5px}
  .spec-val{font-size:17px}
  .spec-tag{justify-self:start;font-size:9px;padding:3px 9px}

  /* ---------- TIMELINE ---------- */
  .tl{
    grid-template-columns:1fr;gap:0;padding:0 20px;
  }
  .tl::before{display:none}
  .tl-step{padding:28px 0;border-top:1px solid var(--line)}
  .tl-step:first-child{border-top:0;padding-top:0}
  .tl-dot{margin:0}
  .tl-h{font-size:22px}
  .tl-p{font-size:13.5px;max-width:100%}

  /* ---------- METIER stack ---------- */
  .metier-stack{grid-template-columns:1fr}
  .metier-row{padding:36px 24px;gap:12px}
  .metier-row-num{font-size:42px}
  .metier-row-h{font-size:24px}
  .metier-row-p{font-size:14.5px}

  /* ---------- METIER HUB — vert-catalog ---------- */
  .vert-catalog{grid-template-columns:1fr;gap:14px;padding:0 20px}
  .vert-card{padding:30px 24px;border-radius:24px;min-height:240px}
  .vert-card-h{font-size:30px}
  .vert-card-num{font-size:46px}
  .vert-card-p{font-size:14px;max-width:100%}
  .vert-card-status{top:16px;right:18px;font-size:8.5px}

  /* ---------- METIER ENERGIES — cap-grid ---------- */
  .cap-grid{grid-template-columns:1fr}
  .cap-card{padding:26px 22px}
  .cap-card-num{font-size:28px}
  .cap-card-h{font-size:19px}
  .cap-card-p{font-size:13.5px}

  /* ---------- USE CASES ---------- */
  .uc-grid{grid-template-columns:1fr;gap:14px;padding:0 20px}
  .uc{padding:30px 24px;min-height:auto;border-radius:24px;gap:14px}
  .uc-h{font-size:clamp(24px,7vw,38px);line-height:1.05}
  .uc-p{font-size:14.5px}
  .uc-out{padding:14px 16px;font-size:12.5px}
  .uc-tag{font-size:9.5px}

  /* ---------- ABOUT manifesto ---------- */
  .manifesto{
    padding:48px 20px;
    font-size:clamp(20px,4.6vw,32px);line-height:1.25;letter-spacing:-.01em;
  }
  .manifesto p{margin-bottom:24px}
  .values{grid-template-columns:1fr;gap:1px}
  .value{padding:32px 24px;gap:14px}
  .value-num{font-size:48px}
  .value-h{font-size:22px}
  .value-p{font-size:14px}

  /* ---------- CONTACT ---------- */
  .contact{
    grid-template-columns:1fr;gap:32px;padding:32px 20px 80px;
  }
  .contact-l-h{font-size:clamp(34px,9vw,60px);line-height:1}
  .contact-l-p{font-size:15.5px;max-width:100%}
  .contact-channel{
    grid-template-columns:42px 1fr auto;gap:14px;padding:18px 0;
  }
  .contact-channel-ic{width:38px;height:38px}
  .contact-channel-text .val{font-size:15px}
  .contact-form{padding:26px 22px;border-radius:24px}
  .contact-form-head{font-size:22px}
  .field-row{grid-template-columns:1fr;gap:8px}
  .field input,.field textarea,.field select{padding:13px 14px;font-size:14px}

  /* ---------- CTA-BAND ---------- */
  .cta-band{
    grid-template-columns:1fr;gap:28px;padding:64px 20px;
  }
  .cta-band-h{font-size:clamp(34px,8.5vw,60px);line-height:1}
  .cta-band-r{max-width:100%}
  .cta-band-r p{font-size:14.5px}

  /* ---------- RUNTIME (operations) ---------- */
  .runtime-grid{grid-template-columns:1fr;gap:16px;padding:0 20px}
  .runtime-card{padding:28px 22px;border-radius:22px;gap:14px}
  .runtime-card.tall{grid-row:auto}
  .runtime-card-h{font-size:22px}
  .runtime-card-p{font-size:13.5px}
  .clk-time{font-size:clamp(48px,12vw,80px)}
  .sched-row{
    grid-template-columns:64px 1fr auto;gap:10px;padding:10px 12px;
  }
  .sched-time{font-size:10.5px}
  .sched-task{font-size:13px}

  /* ---------- LEGAL ---------- */
  .legal{
    padding:56px 20px 80px;font-size:14.5px;line-height:1.7;
    max-width:100%;
  }
  .legal h2{font-size:24px;margin:42px 0 14px;line-height:1.15}
  .legal h2:first-child{margin-top:0}
  .legal h3{font-size:17px;margin:28px 0 10px}
  .legal-meta{
    flex-direction:column;align-items:flex-start;gap:4px;
    font-size:10px;letter-spacing:.14em;
    padding-bottom:24px;margin-bottom:48px;
  }

  /* ---------- COMING-SOON ---------- */
  .cs-stage{padding:104px 20px 56px;gap:22px}
  .cs-h{font-size:clamp(56px,15vw,110px);max-width:100%}
  .cs-p{font-size:clamp(16px,3.8vw,20px);max-width:100%}
  .cs-form{flex-direction:column;width:100%}
  .cs-form input{min-width:0;width:100%}
  .cs-form button{width:100%;justify-content:center}
  .cs-foot{font-size:10px;gap:12px}
  .cs-note{font-size:9px}

  /* ---------- BUTTONS ---------- */
  .btn-pill{padding:12px 6px 12px 18px;font-size:13.5px}
  .btn-pill .btn-pill-arrow{width:30px;height:30px;font-size:13px}
  .btn-line{padding:12px 20px;font-size:13.5px}

  /* ---------- VIDEO MODAL ---------- */
  .vmodal-frame{width:calc(100vw - 24px);border-radius:18px}
  .vmodal-frame video{aspect-ratio:16/11}

  /* ---------- ORBS smaller — moins de blur ---------- */
  .orb{filter:blur(60px);opacity:.22}
  .orb-a{width:300px;height:300px}
  .orb-b{width:240px;height:240px}
}

/* ============================================================
   <= 600px — phone serré
   ============================================================ */
@media(max-width:600px){
  :root{--gutter:16px}
  .hero-conv-card{min-height:440px}
  .hero-conv-tagline{font-size:clamp(44px,12.5vw,68px)}
  .agent-panel-title{font-size:clamp(36px,11vw,72px) !important}
  .scen-card{flex:0 0 88vw;padding:26px 22px}
}

/* ============================================================
   <= 480px — phones étroits
   ============================================================ */
@media(max-width:480px){
  .hero-conv-tagline{font-size:clamp(40px,12vw,56px);letter-spacing:-.035em}
  .page-hero-h{font-size:clamp(40px,11.5vw,72px)}
  .big-title{font-size:clamp(34px,9.5vw,60px)}
  .final-h{font-size:clamp(40px,11.5vw,80px)}
  .mid-cta-h{font-size:clamp(50px,14vw,100px)}
  .agent-panel-title{font-size:clamp(34px,11vw,60px) !important}
  .agent-prof-h{font-size:clamp(34px,9.5vw,56px)}
  .scen-h{font-size:clamp(24px,7vw,38px)}
  .uc-h{font-size:clamp(22px,6.5vw,32px)}
  .cs-h{font-size:clamp(48px,14vw,84px)}
}