/* =========================================================
   Nuxerya — main_mobile.css
   Interface mobile premium / tech / épurée
   Chargé uniquement en <= 900px
========================================================= */

@media (max-width: 900px){

  :root{
    --nav-h:68px;
    --anchor-offset:86px;
    --mobile-x:20px;
    --mobile-radius:24px;
  }

  html,
  body{
    width:100%;
    min-height:100%;
    overflow-x:hidden;
  }

  body{
    padding-top:var(--nav-h);

    background:
      radial-gradient(720px 420px at 12% -4%, rgba(26,81,166,.22), transparent 62%),
      radial-gradient(700px 440px at 95% 0%, rgba(106,51,216,.18), transparent 64%),
      radial-gradient(520px 320px at 50% 18%, rgba(88,241,211,.055), transparent 70%),
      linear-gradient(180deg, #0b111e 0%, #080d18 100%);
  }

  body.nav-is-open{
    overflow:hidden;
  }

  body::before{
    inset:0;
    opacity:.20;
    filter:none;
    animation:none !important;
  }

  body::after{
    opacity:.28;
    animation:none !important;
  }

  #bgFx{
    opacity:.36 !important;
  }

  .container{
    width:min(100% - calc(var(--mobile-x) * 2), 620px);
  }

  section{
    scroll-margin-top:var(--anchor-offset);
  }

  .section{
    padding:58px 0 !important;
  }

  .reveal{
    transform:translate3d(0, 14px, 0);
  }

  /* =========================
     Nettoyage anciennes structures scrolly
  ========================= */

  #sbIntro,
  #wipeFx,
  #sbFocusOverlay{
    display:none !important;
  }

  #scrollyWrap,
  #scrollyStage{
    height:auto !important;
    position:relative !important;
    top:auto !important;
    overflow:visible !important;
  }

  #scrollyStage .sb-section[data-sb],
  #scrollyStage .sb-sticky,
  #scrollyStage .hero__sticky,
  [data-parallax],
  [data-scroll-fx]{
    position:relative !important;
    inset:auto !important;
    min-height:auto !important;
    height:auto !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
    filter:none !important;
  }

  /* =========================
     Header mobile
  ========================= */

  .site-header,
  .navbar{
    display:flex !important;
    align-items:center;

    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:9999;

    height:var(--nav-h);

    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;

    overflow:visible;
    isolation:isolate;
  }

  .site-header::after,
  .navbar::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;

    background:
      radial-gradient(520px 160px at 16% 0%, rgba(26,81,166,.18), transparent 62%),
      radial-gradient(520px 180px at 88% 0%, rgba(106,51,216,.16), transparent 64%),
      linear-gradient(180deg, rgba(7,11,20,.96), rgba(7,11,20,.88));

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }

  .site-header::before,
  .navbar::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:2;

    height:1px;

    background:linear-gradient(
      90deg,
      transparent,
      rgba(88,241,211,.30),
      rgba(26,81,166,.22),
      rgba(106,51,216,.24),
      transparent
    );

    pointer-events:none;
  }

  .site-header__inner,
  .navbar__inner{
    position:relative;
    z-index:3;

    width:min(100% - 28px, 620px);
    height:var(--nav-h);
    margin-inline:auto;
    padding:0;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }

  .site-header__brand,
  .logo{
    display:inline-flex !important;
    align-items:center;
    gap:10px;
    min-width:0;

    color:var(--text-strong);
    text-decoration:none;
  }

  .site-header__mark{
    width:40px;
    height:40px;
    flex:0 0 auto;

    border-radius:14px;
    border:1px solid rgba(255,255,255,.10);

    display:grid;
    place-items:center;

    background:
      radial-gradient(90px 60px at 28% 18%, rgba(88,241,211,.11), transparent 58%),
      radial-gradient(90px 70px at 78% 18%, rgba(106,51,216,.14), transparent 62%),
      rgba(255,255,255,.035);

    box-shadow:
      0 14px 34px rgba(0,0,0,.24),
      inset 0 1px 0 rgba(255,255,255,.075);

    overflow:hidden;
  }

  .site-header__mark img,
  .profile-pic{
    width:26px !important;
    height:26px !important;
    max-width:26px !important;
    object-fit:contain;
  }

  .site-header__brandText{
    display:grid !important;
    gap:1px;
  }

  .site-header__brandText strong{
    display:block;
    color:var(--text-strong);
    font-size:14px;
    font-weight:700;
    line-height:1;
    letter-spacing:-.025em;
  }

  .site-header__brandText small{
    display:none;
  }

  .promo-banner{
    display:none !important;
  }

  .nav-toggle{
    position:relative;
    isolation:isolate;

    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;

    width:46px;
    height:46px;
    flex:0 0 auto;

    border-radius:16px;
    border:1px solid rgba(255,255,255,.105);

    color:var(--text-strong);
    background:
      radial-gradient(90px 60px at 24% 12%, rgba(88,241,211,.08), transparent 58%),
      radial-gradient(90px 70px at 86% 20%, rgba(106,51,216,.12), transparent 62%),
      rgba(255,255,255,.035);

    box-shadow:
      0 14px 34px rgba(0,0,0,.24),
      inset 0 1px 0 rgba(255,255,255,.075);

    cursor:pointer;

    transition:
      transform .18s ease,
      border-color .18s ease,
      background .18s ease,
      box-shadow .18s ease;
  }

  .nav-toggle:active{
    transform:translateY(1px);
  }

  .nav-toggle span{
    display:block;

    width:18px;
    height:1.5px;
    border-radius:999px;

    background:currentColor;

    transition:
      transform .22s ease,
      opacity .18s ease;
  }

  .nav-toggle[aria-expanded="true"]{
    border-color:rgba(88,241,211,.24);
    box-shadow:
      0 16px 40px rgba(0,0,0,.28),
      0 0 28px rgba(88,241,211,.08),
      inset 0 1px 0 rgba(255,255,255,.09);
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(1){
    transform:translateY(6.5px) rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(2){
    opacity:0;
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(3){
    transform:translateY(-6.5px) rotate(-45deg);
  }

  /* =========================
     Menu mobile plein écran
  ========================= */

  #navMenu{
    display:block !important;

    position:fixed !important;
    top:var(--nav-h) !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    z-index:9998 !important;

    width:100vw !important;
    height:calc(100dvh - var(--nav-h)) !important;
    min-height:calc(100dvh - var(--nav-h)) !important;
    max-height:none !important;

    margin:0 !important;
    padding:0 var(--mobile-x) calc(24px + env(safe-area-inset-bottom)) !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translateY(-8px) !important;

    background:
      radial-gradient(720px 420px at 14% 0%, rgba(26,81,166,.20), transparent 62%),
      radial-gradient(720px 460px at 92% 4%, rgba(106,51,216,.18), transparent 64%),
      radial-gradient(520px 320px at 50% 88%, rgba(88,241,211,.055), transparent 66%),
      linear-gradient(180deg, rgba(7,11,20,.98), rgba(8,13,24,.98));

    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);

    clip:auto !important;
    clip-path:none !important;
    contain:none !important;

    transition:
      opacity .24s ease,
      visibility .24s ease,
      transform .24s ease;
  }

  #navMenu.open,
  #navMenu.is-open,
  body.nav-is-open #navMenu{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateY(0) !important;
  }

  body:not(.nav-is-open) #navMenu,
  body:not(.nav-is-open) #navMenu *,
  body:not(.nav-is-open) #navMenu::before,
  body:not(.nav-is-open) #navMenu::after{
    pointer-events:none !important;
    visibility:hidden !important;
  }

  body.nav-is-open #navMenu,
  body.nav-is-open #navMenu *{
    pointer-events:auto !important;
    visibility:visible !important;
  }

  #navMenu::before{
    content:"";
    position:fixed;
    inset:var(--nav-h) 0 0;
    z-index:0;
    pointer-events:none;

    background:
      linear-gradient(rgba(88,241,211,.018) 1px, transparent 1px),
      linear-gradient(90deg, rgba(88,241,211,.014) 1px, transparent 1px);
    background-size:56px 56px;

    mask-image:linear-gradient(to bottom, rgba(0,0,0,.7), transparent 82%);
    -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.7), transparent 82%);

    opacity:.55;
  }

  #navMenu ul{
    position:relative !important;
    z-index:2 !important;

    width:min(100%, 620px) !important;
    height:auto !important;

    margin:0 auto !important;
    padding:24px 0 0 !important;

    display:grid !important;
    grid-template-columns:1fr !important;
    gap:0 !important;

    list-style:none !important;
    counter-reset:nav-item;
  }

  #navMenu ul::before{
    content:"Navigation";
    display:block;

    margin:0 0 18px;
    padding:0 2px 16px;
    border-bottom:1px solid rgba(88,241,211,.11);

    color:rgba(88,241,211,.88);

    font-size:11px;
    font-weight:750;
    line-height:1;
    letter-spacing:.18em;
    text-transform:uppercase;
  }

  #navMenu li{
    display:block !important;
    position:relative !important;

    width:100% !important;
    margin:0 !important;
    padding:0 !important;

    opacity:1 !important;
    visibility:visible !important;

    counter-increment:nav-item;
  }

  #navMenu li + li{
    border-top:1px solid rgba(88,241,211,.075);
  }

  #navMenu a{
    position:relative !important;
    isolation:isolate;

    width:100% !important;
    min-height:62px !important;

    margin:0 !important;
    padding:0 18px 0 46px !important;
    border:0 !important;
    border-radius:0;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;

    color:rgba(231,236,243,.82);
    background:transparent !important;
    box-shadow:none !important;
    text-decoration:none;

    font-size:20px;
    font-weight:560;
    letter-spacing:-.045em;
    line-height:1;

    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;

    transform:none !important;

    transition:
      color .18s ease,
      background .18s ease;
  }

  #navMenu a::before{
    content:"0" counter(nav-item);

    position:absolute;
    left:2px;
    top:50%;
    transform:translateY(-50%);

    width:26px;
    height:26px;
    border-radius:999px;

    display:grid;
    place-items:center;

    color:rgba(88,241,211,.70);
    background:rgba(88,241,211,.045);
    border:1px solid rgba(88,241,211,.11);

    font-size:10px;
    font-weight:780;
    letter-spacing:-.03em;
  }

  #navMenu a::after,
  #navMenu a:hover::after,
  #navMenu a:focus-visible::after,
  #navMenu a.active::after,
  #navMenu a.is-current::after,
  #navMenu a[aria-current="location"]::after{
    display:none !important;
    content:none !important;
  }

  #navMenu a:hover,
  #navMenu a:focus-visible{
    color:var(--text-strong);
    background:linear-gradient(90deg, rgba(88,241,211,.04), transparent 48%) !important;
  }

  #navMenu a.active,
  #navMenu a.is-current,
  #navMenu a[aria-current="location"]{
    color:var(--text-strong);
    background:transparent !important;
  }

  #navMenu a:hover::before,
  #navMenu a:focus-visible::before,
  #navMenu a.active::before,
  #navMenu a.is-current::before,
  #navMenu a[aria-current="location"]::before{
    color:rgba(88,241,211,.96);
    border-color:rgba(88,241,211,.24);
    background:rgba(88,241,211,.07);
    box-shadow:0 0 18px rgba(88,241,211,.08);
  }

  #navMenu li:last-child{
    border-top:0;
    margin-top:18px !important;
  }

  #navMenu li:last-child a{
    min-height:54px !important;
    padding:0 18px !important;
    border-radius:999px;

    justify-content:center !important;

    color:#fff;
    background:var(--gradient-main) !important;

    font-size:14px;
    font-weight:700;
    letter-spacing:-.01em;

    box-shadow:
      0 16px 38px rgba(26,81,166,.24),
      0 0 0 1px rgba(88,241,211,.08) inset !important;
  }

  #navMenu li:last-child a::before,
  #navMenu li:last-child a::after{
    display:none !important;
  }

  #navMenu.open li,
  #navMenu.is-open li{
    animation:mobileNavItemIn .34s ease both;
  }

  #navMenu.open li:nth-child(1),
  #navMenu.is-open li:nth-child(1){ animation-delay:.02s; }

  #navMenu.open li:nth-child(2),
  #navMenu.is-open li:nth-child(2){ animation-delay:.04s; }

  #navMenu.open li:nth-child(3),
  #navMenu.is-open li:nth-child(3){ animation-delay:.06s; }

  #navMenu.open li:nth-child(4),
  #navMenu.is-open li:nth-child(4){ animation-delay:.08s; }

  #navMenu.open li:nth-child(5),
  #navMenu.is-open li:nth-child(5){ animation-delay:.10s; }

  #navMenu.open li:nth-child(6),
  #navMenu.is-open li:nth-child(6){ animation-delay:.12s; }

  #navMenu.open li:nth-child(7),
  #navMenu.is-open li:nth-child(7){ animation-delay:.14s; }

  @keyframes mobileNavItemIn{
    from{
      opacity:0;
      transform:translateY(10px);
    }

    to{
      opacity:1;
      transform:translateY(0);
    }
  }

  /* =========================
     Typographie mobile
     Par défaut : sections centrées.
     Exceptions : FAQ + Contact à gauche.
  ========================= */

  .eyebrow{
    margin-bottom:12px;
    font-size:10.5px;
    letter-spacing:.17em;
  }

  .section__title{
    max-width:none;

    font-size:clamp(28px, 8.1vw, 40px);
    line-height:1.08;
    letter-spacing:-.055em;
  }

  .section__desc{
    max-width:none;
    margin-top:14px;

    color:rgba(218,231,242,.72);
    font-size:15.5px;
    line-height:1.72;
  }

  .section-head{
    margin-bottom:26px;
  }

  .centered,
  .origin-card,
  .sticky-story__left,
  .process-v3__intro,
  .work-intent__copy,
  .pricing-v2 .section-head{
    text-align:center;
  }

  .centered .section__title,
  .centered .section__desc,
  .origin-card .section__title,
  .origin-card .section__desc,
  .sticky-story__left .section__title,
  .sticky-story__left .section__desc,
  .process-v3__intro .section__title,
  .process-v3__intro .section__desc,
  .work-intent__copy .section__title,
  .work-intent__copy .section__desc,
  .pricing-v2 .section-head .section__title,
  .pricing-v2 .section-head .section__desc{
    margin-inline:auto;
  }

  .faq-v2__intro,
  .contact-v2__copy{
    text-align:left;
  }

  .faq-v2__intro .section__title,
  .faq-v2__intro .section__desc,
  .contact-v2__copy .section__title,
  .contact-v2__copy .section__desc{
    margin-inline:0;
  }

  .btn{
    min-height:50px;
    padding:0 18px;
    border-radius:999px;
    font-size:14px;
  }

  .btn--primary{
    box-shadow:
      0 14px 36px rgba(26,81,166,.28),
      0 0 0 1px rgba(88,241,211,.08) inset;
  }

  /* =========================
     Hero mobile
  ========================= */

  .hero-v2{
    min-height:auto !important;
    padding:46px 0 58px !important;
    overflow:visible;
  }

  .hero-v2 .container,
  .hero-v2__single{
    width:min(100% - calc(var(--mobile-x) * 2), 620px);
  }

  .hero-panel{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;

    width:100%;
    padding:26px 0 0;
    border-radius:0;
  }

  .hero-panel::before{
    left:9%;
    right:9%;
  }

  .hero-panel::after{
    width:min(520px, 112vw);
    opacity:.72;
  }

  .hero-panel__badge{
    order:1;
    margin:0 auto 18px;
    padding:7px 10px;
    gap:8px;

    font-size:10px;
    letter-spacing:.10em;
  }

  .hero-panel__badge img{
    width:19px;
    height:19px;
  }

  .hero-v2__title{
    order:2;

    max-width:11ch;
    margin:0 auto;

    font-size:clamp(42px, 13.6vw, 64px);
    line-height:.93;
    letter-spacing:-.082em;
  }

  .hero-v2__lead{
    order:3;

    max-width:35ch;
    margin:20px auto 0;

    color:rgba(231,236,243,.74);
    font-size:15.8px;
    line-height:1.72;
  }

  .hero-panel__signals{
    order:4;

    width:100%;
    margin:18px 0 18px;

    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:6px;
  }

  .hero-panel__signals span{
    min-height:0 !important;
    height:auto !important;
    flex:0 0 auto;

    padding:3px 7px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.055);

    color:rgba(244,250,255,.62);
    background:rgba(255,255,255,.03);

    font-size:8.8px;
    line-height:1;
    font-weight:700;
    white-space:nowrap;

    box-shadow:none !important;
  }

  .hero-v2__actions{
    order:5;

    width:100%;
    margin:0;

    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }

  .hero-v2__actions .btn{
    width:100%;
    min-height:52px;
  }

  .hero-panel__line{
    order:6;
    width:72%;
    margin-top:22px;
  }

  /* =========================
     Origine mobile
  ========================= */

  .origin-section{
    padding-top:48px !important;
  }

  .origin-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:20px;
  }

  .origin-card{
    padding:0;
  }

  .origin-copy{
    position:relative;

    padding:18px 0 0;
    border-left:0;
    border-top:1px solid rgba(88,241,211,.16);
  }

  .origin-copy::before{
    content:"";
    position:absolute;
    left:50%;
    top:-1px;

    width:82px;
    height:1px;

    background:var(--gradient-line);
    transform:translateX(-50%);
  }

  .origin-copy p{
    color:rgba(231,236,243,.75);
    font-size:15px;
    line-height:1.78;
    text-align:center;
  }

  .origin-copy p + p{
    margin-top:14px;
  }

  /* =========================
     Services mobile
  ========================= */

  .services-v2{
    padding-top:58px !important;
    padding-bottom:58px !important;
  }

  .sticky-story{
    overflow:visible;
  }

  .sticky-story__grid{
    display:grid;
    grid-template-columns:1fr;
    gap:30px;
  }

  .sticky-story__left{
    position:relative;
    top:auto;

    min-height:0;
    padding:0;

    display:flex;
    flex-direction:column;
    align-items:center;
  }

  .sticky-story__left .eyebrow,
  .sticky-story__left .section__title,
  .sticky-story__left .section__desc{
    text-align:center;
    margin-inline:auto;
  }

  .sticky-story__left .section__title{
    max-width:13ch;
  }

  .sticky-story__left .section__desc{
    max-width:34ch;
  }

  .sticky-story__actions{
    width:100%;
    max-width:360px;

    display:grid;
    grid-template-columns:1fr;
    gap:10px;

    margin-top:24px;
  }

  .sticky-story__actions .btn{
    width:100%;
  }

  .story-progress,
  .story-kicker{
    display:none !important;
  }

  .sticky-story__right{
    display:grid;
    gap:0;
    padding:0;
  }

  .story-card{
    position:relative;

    min-height:0;
    padding:30px 0;
    border:0;
    border-radius:0;

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;

    text-align:center;

    background:transparent;
    box-shadow:none;

    opacity:1 !important;
    transform:none !important;
  }

  .story-card:not(:last-child)::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;

    width:min(220px, 72%);
    height:1px;

    background:linear-gradient(
      90deg,
      transparent,
      rgba(88,241,211,.32),
      rgba(26,81,166,.22),
      rgba(106,51,216,.24),
      transparent
    );

    transform:translateX(-50%);
  }

  .story-card::before{
    display:none !important;
  }

  .story-card__head{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;

    width:100%;
  }

  .story-card__topline{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
  }

  .story-card__icon{
    width:42px;
    height:42px;
    border-radius:14px;

    font-size:12px;
    font-weight:750;

    background:
      radial-gradient(80px 58px at 30% 15%, rgba(88,241,211,.12), transparent 58%),
      radial-gradient(80px 70px at 80% 20%, rgba(26,81,166,.16), transparent 62%),
      rgba(20,25,36,.44);
  }

  .story-card__eyebrow{
    margin:0 0 8px;

    font-size:10px;
    letter-spacing:.13em;
    text-align:center;
  }

  .story-card h3{
    max-width:18ch;
    margin-inline:auto;

    font-size:clamp(22px, 6.4vw, 30px);
    line-height:1.08;
    letter-spacing:-.048em;
    text-align:center;
  }

  .story-card p{
    max-width:34ch;
    margin-inline:auto;

    color:rgba(231,236,243,.72);
    font-size:14.8px;
    line-height:1.72;
    text-align:center;
  }

  .check-list{
    width:100%;
    max-width:360px;

    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;

    margin:2px auto 0;
    padding:0;

    list-style:none;
  }

  .check-list li{
    min-height:38px;
    padding:8px 9px 8px 27px;
    border-radius:999px;

    display:flex;
    align-items:center;
    justify-content:flex-start;

    background:rgba(244,250,255,.026);
    border:1px solid rgba(88,241,211,.075);

    color:rgba(231,236,243,.78);

    font-size:11.5px;
    font-weight:550;
    line-height:1.15;
    text-align:left;
  }

  .check-list li::before{
    left:11px;

    width:8px;
    height:5px;

    border-left:2px solid var(--accent);
    border-bottom:2px solid var(--accent);
  }

  /* =========================
     Méthode mobile
  ========================= */

  .process-v3{
    padding-block:58px !important;

    background:
      linear-gradient(
        180deg,
        transparent 0%,
        rgba(20,25,36,.22) 18%,
        rgba(20,25,36,.18) 82%,
        transparent 100%
      );
  }

  .process-v3__grid{
    display:grid;
    grid-template-columns:1fr;
    gap:26px;
  }

  .process-v3__intro{
    position:relative;
    top:auto;

    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
  }

  .process-v3__intro .eyebrow,
  .process-v3__intro .section__title,
  .process-v3__intro .section__desc{
    text-align:center;
    margin-inline:auto;
  }

  .process-v3__intro .section__title{
    max-width:11ch;
  }

  .process-v3__intro .section__desc{
    max-width:34ch;
  }

  .process-board{
    --process-translate:0%;

    position:relative;
    width:100%;
    max-width:480px;
    margin:14px auto 0;
    padding:0 42px 34px;
    gap:18px;

    overflow:hidden;
  }

  .process-board::before,
  .process-step-v3::before,
  .process-step-v3::after{
    display:none !important;
  }

  .process-steps-viewport{
    width:100%;
    overflow:hidden;
  }

  .process-steps-v3{
    border-top:0;

    display:flex;
    width:100%;
    gap:0;

    overflow:visible;
    transform:translate3d(var(--process-translate), 0, 0);
    transition:transform .34s cubic-bezier(.2,.8,.2,1);
    will-change:transform;

    touch-action:pan-y;
    cursor:grab;
  }

  .process-board.is-dragging .process-steps-v3{
    cursor:grabbing;
  }

  .process-board:has(.process-step-v3:nth-child(1).is-active){
    --process-translate:0%;
  }

  .process-board:has(.process-step-v3:nth-child(2).is-active){
    --process-translate:-100%;
  }

  .process-board:has(.process-step-v3:nth-child(3).is-active){
    --process-translate:-200%;
  }

  .process-board:has(.process-step-v3:nth-child(4).is-active){
    --process-translate:-300%;
  }

  .process-step-v3{
    flex:0 0 100%;
    min-width:100%;

    display:grid;
    grid-template-columns:auto minmax(0, 1fr);
    column-gap:10px;
    row-gap:14px;
    align-items:start;
    justify-items:center;

    padding:8px 0 0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;

    text-align:center;
  }

  .process-step-v3.is-active{
    animation:processMobileSoftIn .28s ease both;
  }

  .process-step-v3 > div{
    display:contents;
  }

  .process-step-v3__num{
    grid-column:1;
    grid-row:1;

    align-self:start;
    justify-self:end;

    width:max-content;
    margin:4px 0 0;
    padding:6px 10px;
    border-radius:999px;
    border:1px solid rgba(88,241,211,.16);

    color:rgba(88,241,211,.92);
    background:rgba(88,241,211,.045);

    font-size:10px;
    font-weight:800;
    letter-spacing:.16em;
  }

  .process-step-v3 h3{
    grid-column:2;
    grid-row:1;

    max-width:16ch;
    margin:0;

    color:var(--text-strong);
    font-size:clamp(24px, 6.8vw, 32px);
    line-height:1.06;
    letter-spacing:-.055em;
    text-align:left;
    justify-self:start;
  }

  .process-step-v3 p{
    grid-column:1 / -1;
    grid-row:2;

    max-width:32ch;
    margin:0 auto;

    color:rgba(231,236,243,.72);
    font-size:14.8px;
    line-height:1.72;
    text-align:center;
  }

  .process-step-v3 ul{
    grid-column:1 / -1;
    grid-row:3;

    width:calc(100% + 56px);
    max-width:390px;
    margin:18px auto 0;
    margin-left:50%;
    transform:translateX(-50%);

    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:7px;
  }

  .process-step-v3 li{
    flex:0 1 auto;
    white-space:nowrap;

    padding:6px 9px;
    border-color:rgba(88,241,211,.12);
    background:rgba(88,241,211,.04);
    font-size:11.5px;
  }

  .process-mobile-count{
    position:static;
    min-height:auto;
    margin-top:18px;

    display:block;
    border:0;
    background:transparent;

    color:rgba(231,236,243,.42);

    font-size:10px;
    font-weight:800;
    letter-spacing:.18em;
    text-align:center;
    text-transform:uppercase;

    transform:none;
  }

  .process-mobile-count::before{
    display:none;
  }

  .process-mobile-nav{
    position:static;

    display:block;
    margin-top:18px;

    pointer-events:none;
  }

  .process-mobile-arrow{
    position:absolute;
    top:42%;
    z-index:4;

    width:38px;
    height:38px;
    padding:0;
    border:0;

    display:grid;
    place-items:center;

    color:rgba(88,241,211,.92);
    background:transparent;

    box-shadow:none;

    font-size:24px;
    line-height:1;
    cursor:pointer;

    pointer-events:auto;

    transform:translateY(-50%);

    transition:
      transform .18s ease,
      opacity .18s ease,
      color .18s ease;
  }

  .process-mobile-arrow--prev{
    left:0;
  }

  .process-mobile-arrow--next{
    right:0;
  }

  .process-mobile-arrow:active{
    transform:translateY(-50%) scale(.96);
  }

  .process-mobile-arrow:hover{
    color:rgba(88,241,211,.92);
  }

  .process-mobile-arrow:disabled{
    opacity:.34;
    cursor:default;
  }

  .process-mobile-arrow:focus-visible{
    outline:none;
  }

  @keyframes processMobileSoftIn{
    from{
      opacity:0;
      transform:translateY(8px);
    }

    to{
      opacity:1;
      transform:none;
    }
  }

  /* =========================
    Réalisations mobile
    Version compacte sans scrollytelling ni maquette
  ========================= */

  .section.work-intent{
    min-height:auto !important;
    padding:54px 0 !important;
    overflow:hidden;
  }

  .work-intent::before{
    inset:8% -55% auto -55%;
    height:320px;
    opacity:.52;
    filter:blur(28px);
  }

  .work-intent__grid{
    position:relative !important;
    top:auto !important;

    min-height:auto !important;
    padding:0 !important;

    display:block;
  }

  .work-intent__copy{
    position:relative;
    text-align:center;
  }

  .work-intent__copy .eyebrow,
  .work-intent__copy .section__title,
  .work-intent__copy .section__desc{
    text-align:center;
    margin-inline:auto;
  }

  .work-intent__copy .section__title{
    max-width:13ch;
    font-size:clamp(28px, 8vw, 39px);
  }

  .work-intent__copy .section__desc{
    max-width:34ch;
  }

  .work-intent__signals{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:7px;

    margin-top:20px;
  }

  .work-intent__signals span{
    padding:5px 9px;
    border-radius:999px;
    border:1px solid rgba(88,241,211,.12);

    color:rgba(244,250,255,.74);
    background:rgba(88,241,211,.04);

    font-size:11px;
    font-weight:650;
  }

  .work-intent__signals .btn,
  .work-intent__signals a.btn{
    flex:1 1 100%;
    width:100%;
    margin-top:10px;
  }

  /* On retire complètement la maquette sur mobile */
  .work-intent__stage,
  .work-canvas,
  .work-canvas__viewport,
  .work-page,
  .work-polish{
    display:none !important;
  }

  /* =========================
     Tarifs mobile
  ========================= */

  .pricing-v2 .section-head{
    text-align:center;
  }

  .pricing-v2 .section-head .section__title,
  .pricing-v2 .section-head .section__desc{
    margin-inline:auto;
  }

  .pricing-v2__grid{
    display:grid;
    grid-template-columns:1fr !important;
    gap:14px;
  }

  .price-card-v2{
    padding:21px;
    border-radius:24px;

    background:
      radial-gradient(420px 180px at 10% 0%, rgba(88,241,211,.045), transparent 58%),
      linear-gradient(180deg, rgba(20,25,36,.54), rgba(20,25,36,.27)),
      rgba(11,17,30,.42);
  }

  .price-card-v2--featured{
    border-color:rgba(88,241,211,.26);

    box-shadow:
      0 18px 46px rgba(0,0,0,.20),
      0 0 0 1px rgba(88,241,211,.05) inset;
  }

  .price-card-v2__badge{
    position:static;
    width:max-content;
    margin-bottom:-2px;
  }

  .price-card-v2 h3{
    font-size:24px;
  }

  .price-card-v2__price{
    font-size:28px;
  }

  .price-card-v2 p{
    font-size:14.6px;
    line-height:1.64;
  }

  .price-card-v2 .btn{
    width:100%;
    margin-top:4px;
  }

  .pricing-addons{
    grid-template-columns:1fr;
    gap:0;

    margin-top:18px;
  }

  .pricing-addons div{
    padding:16px 0;
  }

  .pricing-notes p{
    font-size:12px;
    line-height:1.5;
  }

  .pricing-notes sup{
    font-size:10px;
  }

  /* =========================
     FAQ mobile
  ========================= */

  .faq-v2__grid{
    display:grid;
    grid-template-columns:1fr;
    gap:24px;
  }

  .faq-v2__intro{
    position:relative;
    top:auto;
    text-align:left;
  }

  .faq-v2__intro .section__title,
  .faq-v2__intro .section__desc{
    margin-inline:0;
  }

  .faq{
    border-top:1px solid rgba(88,241,211,.10);
  }

  .faq__item{
    border-radius:0;
    border-bottom:1px solid rgba(88,241,211,.08);
    background:transparent;
  }

  .faq__q{
    padding:17px 38px 17px 0;

    font-size:14px;
    line-height:1.32;
  }

  .faq__q::after{
    right:4px;
  }

  .faq__a{
    padding:0 0 18px;
  }

  .faq__a p{
    font-size:14.3px;
    line-height:1.66;
  }

  /* =========================
     Contact mobile
  ========================= */

  .contact-v2{
    padding-bottom:64px !important;
  }

  .contact-v2__grid{
    display:grid;
    grid-template-columns:1fr;
    gap:26px;
  }

  .contact-v2__copy{
    position:relative;
    top:auto;
    text-align:left;
  }

  .contact-v2__copy .section__title,
  .contact-v2__copy .section__desc{
    margin-inline:0;
  }

  .contact-proof{
    gap:7px 10px;
    margin-top:18px;
  }

  .contact-proof span{
    font-size:12.5px;
  }

  .contact-v2__main{
    display:grid;
    gap:18px;
  }

  .contact-v2__panel,
  .calendar-card{
    border-radius:24px;

    background:
      radial-gradient(460px 180px at 10% 0%, rgba(88,241,211,.045), transparent 58%),
      linear-gradient(180deg, rgba(20,25,36,.54), rgba(20,25,36,.27)),
      rgba(11,17,30,.42);
  }

  .contact-v2__panel{
    padding:20px;
  }

  .contact-form{
    grid-template-columns:1fr;
    gap:12px;
  }

  .form__row,
  .form__row--full,
  .contact-form button{
    grid-column:auto;
  }

  .contact-form input,
  .contact-form textarea{
    border-radius:15px;
    background:rgba(11,17,30,.72);
  }

  .contact-form input{
    height:52px;
  }

  .contact-form textarea{
    min-height:150px;
  }

  .contact-form button{
    width:100%;
    min-height:52px;
  }

  .form-hint{
    font-size:12.8px;
    line-height:1.55;
  }

  .calendar-block{
    margin-top:0;
  }

  .calendar-card__head{
    padding:18px 18px 12px;
  }

  .calendar-card__title{
    font-size:20px;
  }

  .calendar-card__desc{
    font-size:14.2px;
  }

  .calendar-embed .calendly-inline-widget{
    min-width:0 !important;
    height:650px !important;
  }

  .calendar-card__hint{
    padding:13px 18px 16px;
  }

  .calendar-card{
    --calendly-height:600px;
  }

  .calendar-embed .calendly-inline-widget{
    width:100% !important;
    min-width:0 !important;
    height:var(--calendly-height) !important;
  }
}

/* =========================================================
   Petits mobiles
========================================================= */

@media (max-width: 420px){

  :root{
    --mobile-x:16px;
  }

  .site-header__inner,
  .navbar__inner{
    width:min(100% - 24px, 620px);
  }

  .site-header__mark{
    width:38px;
    height:38px;
    border-radius:13px;
  }

  .site-header__brandText strong{
    font-size:13.5px;
  }

  .nav-toggle{
    width:44px;
    height:44px;
    border-radius:15px;
  }

  #navMenu{
    padding:0 16px calc(18px + env(safe-area-inset-bottom)) !important;
  }

  #navMenu ul{
    padding-top:18px !important;
  }

  #navMenu ul::before{
    margin-bottom:14px;
    padding-bottom:14px;
  }

  #navMenu a{
    min-height:58px !important;
    padding:0 16px 0 44px !important;

    font-size:18px;
    letter-spacing:-.04em;
  }

  #navMenu a::before{
    width:24px;
    height:24px;
    font-size:9.5px;
  }

  #navMenu li:last-child a{
    min-height:52px !important;
    padding:0 16px !important;
    font-size:14px;
  }

  .section{
    padding:50px 0 !important;
  }

  .section__title{
    font-size:clamp(26px, 8.3vw, 34px);
  }

  .hero-v2{
    padding:38px 0 52px !important;
  }

  .hero-v2__title{
    font-size:clamp(39px, 13.2vw, 56px);
  }

  .hero-v2__lead{
    font-size:15.2px;
  }

  .hero-panel__signals{
    gap:5px;
    margin-bottom:16px;
  }

  .hero-panel__signals span{
    padding:3px 6px;
    font-size:8.4px;
  }

  .story-card{
    padding-left:18px;
  }

  .story-card__icon{
    width:34px;
    height:34px;
    border-radius:12px;
    font-size:11px;
  }

  .process-board{
    padding-inline:34px;
  }

  .process-mobile-arrow{
    width:34px;
    height:34px;
    font-size:22px;
  }

  .process-step-v3{
    column-gap:8px;
  }

  .process-step-v3__num{
    padding:5px 8px;
    font-size:9.5px;
  }

  .process-step-v3 h3{
    max-width:15ch;
  }

  .process-step-v3 ul{
    width:calc(100% + 44px);
  }

  .work-canvas{
    min-height:500px;
    border-radius:24px;
  }

  .work-page--mockup .work-page__sheet{
    padding:15px;
    gap:13px;
  }

  .mockup-copy h3{
    font-size:clamp(23px, 7.2vw, 30px);
  }

  .mockup-copy p{
    font-size:12px;
  }

  .mockup-visual{
    min-height:150px;
  }

  .mockup-glass{
    min-width:86px;
    padding:8px;
  }

  .mockup-glass--one{
    left:12px;
    bottom:12px;
  }

  .mockup-glass--two{
    right:12px;
    top:12px;
  }

  .mockup-cards{
    gap:6px;
  }

  .mockup-cards div{
    min-height:52px;
    padding:9px 7px;
    border-radius:14px;
  }

  .mockup-cards strong{
    font-size:10px;
  }

  .price-card-v2,
  .contact-v2__panel{
    padding:18px;
  }

  .pricing-notes p{
    font-size:11.5px;
  }

  .pricing-notes sup{
    font-size:9.5px;
  }

  .faq__q{
    font-size:13.5px;
  }

  .calendar-embed .calendly-inline-widget{
    height:610px !important;
  }
}


/* Mobile — supprimer le séparateur entre header et hero */

@media (max-width: 900px){
  .site-header::before,
  .navbar::before{
    display:none !important;
  }
}

@media (max-width: 900px){
  .page-home .hero-panel::before{
    display:none !important;
  }
}

/* Pager méthode : uniquement utile sur mobile */
.process-mobile-nav{
  display:none;
}

@media (max-width: 900px){
  .process-mobile-nav{
    display:block;
  }
}