/* ── Barre de défilement fine, sur toutes les surfaces ──────────────────
   Les règles ::-webkit-scrollbar ne concernent que Chrome/Safari : Firefox ne
   les lit pas et dessine sa barre native, large. Ces deux propriétés-ci sont
   celles qu'il comprend. Placées EN TÊTE et sur `*` (spécificité 0) : toute
   règle plus précise ou plus bas dans la feuille continue de gagner. */
* { scrollbar-width: thin; }
html { scrollbar-color: rgba(100,116,139,.35) transparent; }

/* ══════════ RESET + TOKENS (charte Stripe validée) ══════════ */
  *{box-sizing:border-box;margin:0;padding:0}
  :root{
    --ink:#0a2540; --ink-soft:#425466; --muted:#6b7c93;
    --bg:#f6f9fc; --white:#fff; --border:#dbe4ef; --border-soft:#e4eaf1;
    --violet:#635bff; --violet-dark:#5348e0; --green:#00b67a; --cyan:#00d4ff; --orange:#ff7a59;
    --radius:16px;
    font-family:"Inter","Suisse Int'l","Aptos","Helvetica Neue",Arial,sans-serif;
  }
  html{scroll-behavior:smooth;overscroll-behavior-y:none}
  body{background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5;min-width:320px;overscroll-behavior-y:none}
  /* Logos de marque IA (data-ai-logo / GLL.aiLogo) : glyphe monochrome plein cadre */
  [data-ai-logo] svg,.ai-card .ic svg,.mk-ia .ic svg,.a-chip-lg svg{width:100%;height:100%;display:block}
  .ai-card .ic svg,.mk-ia .ic svg{width:60%;height:60%}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  ::selection{color:#fff;background:var(--violet)}
  .wrap{max-width:1180px;margin:0 auto;padding:0 20px}
  @media(min-width:1024px){.wrap{padding:0 24px}}

  /* boutons */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;border-radius:999px;transition:all .18s ease;cursor:pointer;border:0;white-space:nowrap;font-family:inherit}
  .btn-dark{background:var(--ink);color:#fff;height:44px;padding:0 24px;font-size:15px;box-shadow:0 8px 16px rgba(10,37,64,.14)}
  .btn-dark:hover{background:#1c3553;box-shadow:0 8px 20px rgba(10,37,64,.22)}
  .btn-dark.sm{height:36px;padding:0 16px;font-size:14px}
  .btn-link{color:var(--violet);font-size:15px;font-weight:600;display:inline-flex;align-items:center;gap:8px}
  .btn-link:hover{color:var(--ink)}
  .arr{width:16px;height:16px;transition:transform .18s}
  .btn:hover .arr{transform:translateX(2px)}

  /*KPI cliquables*/
  .comp-badge{
      text-decoration: none;
      color: inherit;
      cursor: pointer;
      transition: transform .2s ease, box-shadow .2s ease;
  }

  .comp-badge:hover{
      text-decoration: none;
  }

  /* charte titres */
  .kicker{color:var(--violet);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
  .h2{color:var(--ink);font-size:clamp(36px,5vw,56px);font-weight:520;letter-spacing:-.05em;line-height:1.05}

  /* ══════════ HEADER ══════════ */
  header.nav{position:fixed;inset:0 0 auto 0;z-index:70;transition:background .3s,box-shadow .3s}
  header.nav.scrolled{background:rgba(255,255,255,.9);backdrop-filter:blur(20px);box-shadow:0 1px 0 rgba(10,37,64,.06)}
  body.mm-open header.nav{background:#fff;box-shadow:0 1px 0 rgba(10,37,64,.06)}
  .nav-inner{display:flex;height:60px;align-items:center;justify-content:space-between}
  .nav-brand{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;letter-spacing:-.02em}
  .nav-brand img{width:24px;height:24px;object-fit:contain}
  .nav-links{display:none;align-items:center;gap:32px}
  @media(min-width:900px){.nav-links{display:flex}}
  .nav-links a{position:relative;font-size:14px;font-weight:500;color:var(--ink-soft);transition:color .18s}
  .nav-links a:hover{color:var(--ink)}
  .nav-links a::after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:0;background:var(--violet);transition:width .2s}
  .nav-links a:hover::after{width:100%}
  .nav-right{display:flex;align-items:center;gap:12px}
  .nav-login{font-size:14px;font-weight:500;color:var(--ink-soft)}
  .nav-login:hover{color:var(--ink)}
  @media(max-width:899px){.nav-inner .nav-right>a{display:none}} /* mobile : header = logo + hamburger uniquement */
  .lang{display:flex;gap:2px;align-items:center;font-size:12.5px;font-weight:600;color:var(--muted)}
  .lang button{background:none;border:0;cursor:pointer;color:var(--muted);font:inherit;font-size:12.5px;font-weight:600;padding:3px 5px;border-radius:6px}
  .lang button.on{color:var(--ink);background:rgba(10,37,64,.06)}
  /* hamburger animé ↔ croix (même bouton, reste dans le header fixe) */
  .burger{display:flex;align-items:center;justify-content:center;width:42px;height:42px;margin-right:-9px;background:none;border:0;cursor:pointer;padding:0;color:var(--ink)}
  @media(min-width:900px){.burger{display:none}}
  .burger-box{position:relative;width:22px;height:16px}
  .burger-bar{position:absolute;left:0;width:22px;height:2px;border-radius:2px;background:currentColor;transition:transform .32s cubic-bezier(.4,0,.2,1),opacity .18s ease}
  .burger-bar:nth-child(1){top:0}
  .burger-bar:nth-child(2){top:7px}
  .burger-bar:nth-child(3){top:14px}
  body.mm-open .burger-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.mm-open .burger-bar:nth-child(2){opacity:0;transform:scaleX(.3)}
  body.mm-open .burger-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  /* ══════════ Menu mobile plein écran ══════════
     La hauteur du header n'est plus SUPPOSÉE (60px en dur) mais MESURÉE et
     publiée dans `--nav-h` par golynk-landing.js : elle change avec la langue,
     la taille de police du système et l'état « scrolled ». */
  .mobmenu{display:none;position:fixed;inset:0;z-index:60;background:#fff;flex-direction:column;padding-top:var(--nav-h,60px)}
  /* `dvh` suit la zone RÉELLEMENT visible : la barre d'URL qui apparaît sur
     mobile rognait le bas du menu. Les navigateurs qui l'ignorent retombent
     sur `inset:0` — aucune régression. */
  @supports (height:100dvh){.mobmenu{height:100dvh}}
  .mobmenu.open{display:flex}
  body.mm-open{overflow:hidden}
  /* 🔴 Une colonne centrée qui déborde, déborde des DEUX côtés.
     Avec `justify-content:center` et rien qui défile, le premier lien passait
     sous l'en-tête (mesuré à top:-17px sur un écran de 640px) et le dernier
     sous le pied — donc hors d'atteinte.
     Les marges automatiques centrent QUAND le contenu tient, et se réduisent à
     zéro quand l'espace libre devient négatif (règle du modèle flexible) : le
     défilement prend alors le relais, sans jamais rogner le haut. */
  .mobmenu-list{flex:1;min-height:0;display:flex;flex-direction:column;padding:8px 20px;
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  /* 🔴 `a` ET `.mob-open` — les DEUX. Les entrées qui ouvrent un sous-menu
     (Produits, Solutions, IA, Ressources) sont des <button> et non des <a> :
     elles n'emmènent nulle part. Tant que ces règles ne visaient que `a`, ces
     quatre entrées n'avaient ni taille de texte, ni séparateur… et surtout
     leur chevron n'avait AUCUNE dimension : un SVG sans width/height prend sa
     taille par défaut et s'étalait sur presque toute la hauteur de l'écran.
     C'est ce qu'on voyait sur mobile. Toute nouvelle entrée de ce type doit
     être ajoutée ici, sans quoi le même défaut revient. */
  .mobmenu-list a,
  .mobmenu-list .mob-open{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:min(2.6vh,22px) 2px;font-size:min(6.4vw,26px);font-weight:600;letter-spacing:-.02em;color:var(--ink);border-bottom:1px solid var(--border);flex-shrink:0}
  .mobmenu-list>:first-child{border-top:1px solid var(--border);margin-top:auto}
  .mobmenu-list>:last-child{margin-bottom:auto}
  .mobmenu-list a .chev,
  .mobmenu-list .mob-open .chev{width:24px;height:24px;color:var(--muted);flex-shrink:0}
  .mobmenu-list a:active,
  .mobmenu-list .mob-open:active{color:var(--violet)}
  .mobmenu-foot{flex-shrink:0;padding:20px 20px calc(20px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--border);background:var(--bg)}
  .mobmenu-foot .btn-dark{height:50px;font-size:16px;width:100%}
  .mobmenu-foot .mm-link{text-align:center;font-size:15.5px;font-weight:600;color:var(--ink);padding:8px}
  .mobmenu-foot .mm-contact{color:var(--violet)}
  /* Sur un écran court, le pied prenait près d'un tiers de la hauteur. */
  @media(max-height:700px){
    .mobmenu-foot{padding:12px 20px calc(12px + env(safe-area-inset-bottom));gap:6px}
    .mobmenu-foot .btn-dark{height:46px}
    .mobmenu-foot .mm-link{padding:5px;font-size:15px}
  }

  /* ══════════ Sélecteur de langue (drapeaux SVG + modale façon Booking) ══════════ */
  .flag{display:inline-block;width:22px;height:22px;border-radius:50%;overflow:hidden;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(10,37,64,.14)}
  .flag svg{display:block;width:100%;height:100%}
  .lang-btn{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#fff;border-radius:999px;padding:7px 14px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;transition:background .15s}
  .lang-btn:hover{background:rgba(255,255,255,.12)}
  .lang-btn .chev{width:14px;height:14px;opacity:.7;flex-shrink:0}
  .lang-modal{position:fixed;inset:0;z-index:200;display:none}
  .lang-modal.open{display:block}
  .lang-modal-bg{position:absolute;inset:0;background:rgba(10,37,64,.5);backdrop-filter:blur(2px)}
  .lang-modal-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(920px,92vw);max-height:86vh;overflow-y:auto;background:#fff;border-radius:18px;box-shadow:0 40px 90px -20px rgba(10,37,64,.45);padding:26px 26px 30px}
  .lang-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
  .lang-modal-head h3{font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
  .lang-modal-close{width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:#fff;cursor:pointer;font-size:22px;color:var(--ink-soft);display:flex;align-items:center;justify-content:center;line-height:1}
  .lang-modal-close:hover{background:var(--bg)}
  .lang-grid{display:grid;grid-template-columns:1fr;gap:6px}
  @media(min-width:560px){.lang-grid{grid-template-columns:1fr 1fr}}
  @media(min-width:820px){.lang-grid{grid-template-columns:1fr 1fr 1fr}}
  .lang-opt{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;border:1px solid transparent;background:none;cursor:pointer;font:inherit;text-align:left;color:var(--ink);transition:background .15s,border-color .15s}
  .lang-opt:hover{background:var(--bg)}
  .lang-opt.on{background:rgba(99,91,255,.06);border-color:rgba(99,91,255,.32)}
  .lang-opt .nm{flex:1;display:flex;flex-direction:column;line-height:1.25}
  .lang-opt .nm b{font-size:15px;font-weight:600}
  .lang-opt .nm span{font-size:12px;color:var(--muted)}
  .lang-opt .ck{width:18px;height:18px;color:var(--violet);opacity:0;flex-shrink:0}
  .lang-opt.on .ck{opacity:1}

  /* ══════════ HERO ══════════ */
  .hero{position:relative;overflow:hidden;background:var(--bg);padding-top:80px}
  .stripe-mesh{position:absolute;inset:-160px -120px auto -120px;height:720px;
    background:
      radial-gradient(circle at 18% 24%, rgba(255,196,87,.92) 0 11%, transparent 27%),
      radial-gradient(circle at 42% 18%, rgba(255,122,89,.9) 0 12%, transparent 30%),
      radial-gradient(circle at 68% 14%, rgba(99,91,255,.88) 0 13%, transparent 31%),
      radial-gradient(circle at 88% 26%, rgba(0,212,255,.75) 0 11%, transparent 30%),
      linear-gradient(110deg,#fff7db 0%,#ffe2df 22%,#e6e2ff 46%,#cdefff 72%,#f6f9fc 100%);
    filter:saturate(1.05);transform:skewY(-10deg);transform-origin:top left;animation:mesh-drift 18s ease-in-out infinite alternate}
  .stripe-mesh::after{content:"";position:absolute;inset:0;
    background-image:linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(0deg,rgba(255,255,255,.18) 1px,transparent 1px);
    background-size:80px 80px;mix-blend-mode:overlay;opacity:.45}
  @keyframes mesh-drift{0%{background-position:0 0,0 0,0 0,0 0,0 0}100%{background-position:70px -30px,-40px 50px,50px 70px,-60px -40px,0 0}}
  .ribbons{position:absolute;inset:64px 0 auto 0;height:680px;overflow:hidden}
  .ribbons-inner{position:absolute;inset:0;transform:skewY(-10deg);transform-origin:top left}
  .ribbon{position:absolute;height:88px;width:520px;border-radius:999px;opacity:.48;animation:ribbon-float 12s ease-in-out infinite}
  .ribbon.a{left:48%;top:138px;background:linear-gradient(90deg,rgba(255,255,255,.55),rgba(99,91,255,.7))}
  .ribbon.b{left:62%;top:248px;width:360px;background:linear-gradient(90deg,rgba(0,212,255,.52),rgba(255,255,255,.2));animation-delay:-3s}
  .ribbon.c{left:4%;top:424px;width:420px;background:linear-gradient(90deg,rgba(255,122,89,.5),rgba(255,196,87,.4));animation-delay:-6s}
  .ribbon.d{right:4%;top:498px;width:300px;background:linear-gradient(90deg,rgba(99,91,255,.35),rgba(0,182,122,.35));animation-delay:-9s}
  @keyframes ribbon-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(28px,-18px,0)}}
  .hero-cut{position:absolute;inset:640px 0 auto 0;height:320px;transform:skewY(-4deg);background:#fff;box-shadow:0 -1px 0 rgba(10,37,64,.06)}
  /* 🔴 Le padding est REPRIS EN ENTIER, marges latérales comprises.
     Cet élément porte aussi la classe `.wrap` (padding:0 20px). Le raccourci
     `padding` d'ici écrasait donc les 20px latéraux et remettait la marge à
     ZÉRO : sur mobile, titre et carte touchaient le bord de l'écran et se
     faisaient rogner. Ne pas revenir à `padding:56px 0 112px`. */
  .hero-grid{position:relative;z-index:10;display:grid;gap:64px;align-items:start;padding:56px 20px 112px}
  /* Sans min-width:0, un élément de grille refuse de descendre sous la taille
     intrinsèque de son contenu — et fait déborder toute la colonne. */
  .hero-grid > *{min-width:0}
  @media(min-width:1024px){.hero-grid{grid-template-columns:1fr 1fr;gap:32px;padding:80px 24px 144px}}

  /* ── Hero pleine hauteur (accueil uniquement : .hero sert aussi à
     carriere.html et client-portal.html, qui n'ont pas à changer) ──
     `svh` plutôt que `vh` : sur mobile, `vh` compte la barre d'URL comme si
     elle était masquée, ce qui pousse le bas du hero hors de l'écran. */
  .hero-full{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
  .hero-full .hero-grid{flex:1;align-content:center}
  /* La bande blanche en biais suit le bas du hero au lieu d'être clouée à
     640px du haut — sinon elle se retrouverait au milieu d'un hero plus haut. */
  .hero-full .hero-cut{top:auto;bottom:-84px}
  .hero h1{font-size:46px;font-weight:600;line-height:.98;letter-spacing:-.055em;max-width:560px}
  @media(min-width:640px){.hero h1{font-size:60px}}
  @media(min-width:1024px){.hero h1{font-size:70px}}
  .hero .lead{margin-top:28px;max-width:520px;font-size:17px;line-height:1.65;color:var(--ink-soft)}
  .hero-cta{margin-top:32px;display:flex;flex-direction:column;gap:12px}
  @media(min-width:640px){.hero-cta{flex-direction:row}}
  .hero-trust{margin-top:32px;display:flex;flex-wrap:wrap;gap:8px 24px;font-size:13px;font-weight:500;color:var(--ink-soft)}
  .hero-trust span{display:flex;align-items:center;gap:6px}
  .chk{width:16px;height:16px;color:var(--green);flex-shrink:0}

  /* Hero showcase (aperçu facture) */
  /* `min(560px,100%)` et pas `560px` : sans le `100%`, la carte gardait sa
     largeur intrinsèque (435px) dans une colonne de 335px et débordait. */
  .showcase{position:relative;max-width:min(560px,100%);margin:0 auto}
  .sc-card{overflow:hidden;border-radius:16px;border:1px solid #d6deea;background:#fff;box-shadow:0 24px 64px -20px rgba(10,37,64,.35)}
  .sc-chrome{display:flex;height:40px;align-items:center;gap:12px;border-bottom:1px solid var(--border);background:var(--bg);padding:0 12px}
  .sc-dots{display:flex;gap:6px}
  .sc-dots i{width:10px;height:10px;border-radius:50%;display:block}
  .sc-url{display:flex;align-items:center;gap:8px;flex:1;font-size:11px;font-family:ui-monospace,monospace;color:var(--muted)}
  .sc-live{display:none;align-items:center;gap:4px;font-size:10px;font-weight:500;color:var(--green)}
  @media(min-width:640px){.sc-live{display:flex}}
  .sc-body{padding:20px}
  .sc-head{display:flex;align-items:center;gap:10px;margin-bottom:16px}
  .sc-ico{width:36px;height:36px;border-radius:9px;background:rgba(99,91,255,.12);color:var(--violet);display:flex;align-items:center;justify-content:center}
  .sc-head p.t{font-size:15px;font-weight:600}
  .sc-head p.s{font-size:12px;color:var(--muted)}
  .sc-lbl{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:6px}
  .sc-field{height:40px;width:100%;border-radius:8px;border:1px solid var(--border);background:#fff;padding:0 12px;font-size:13.5px;color:var(--ink);display:flex;align-items:center;margin-bottom:16px}
  .sc-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
  .sc-row .l{flex:1;height:36px;border:1px solid var(--border);border-radius:7px;display:flex;align-items:center;padding:0 10px;font-size:12.5px}
  .sc-row .q{width:44px;height:36px;border:1px solid var(--border);border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:12.5px}
  .sc-row .p{width:88px;height:36px;border:1px solid var(--border);border-radius:7px;display:flex;align-items:center;justify-content:flex-end;padding:0 10px;font-size:12.5px;font-variant-numeric:tabular-nums}
  .sc-tot{margin-top:16px;border-top:1px solid var(--border);padding-top:12px;font-size:12.5px}
  .sc-tot div{display:flex;justify-content:space-between;padding:2px 0}
  .sc-tot .grand{font-size:14px;font-weight:700;padding-top:4px}
  .sc-tot .num{font-variant-numeric:tabular-nums;font-family:ui-monospace,monospace}
  .sc-qrbill{margin-top:16px;display:grid;grid-template-columns:1fr 1.4fr;border-top:1px dashed var(--ink)}
  .sc-qrbill>div{padding:12px}
  .sc-qrbill .rec{border-right:1px dashed var(--ink)}
  .sc-qrbill p.b{font-size:8px;font-weight:700;margin-top:6px}
  .sc-qrbill p.v{font-size:7.5px;line-height:1.35;color:#1a1a1a}
  .sc-qr{position:relative;width:92px;height:92px;flex-shrink:0}
  .sc-qr svg{width:100%;height:100%}
  /* Croix suisse norme SIX : croix blanche sur carré noir (contour noir), cadre blanc. */
  .sc-qr .cross{position:absolute;left:50%;top:50%;width:17px;height:17px;transform:translate(-50%,-50%)}
  .sc-qr .cross svg{width:100%;height:100%;display:block}
  .sc-note{margin-top:12px;text-align:center;font-size:12px;color:var(--muted)}
  /* ── Aperçu facture interactif (édition + génération) ── */
  .sc-stage{min-height:420px}
  .sc-input{height:40px;width:100%;box-sizing:border-box;border-radius:8px;border:1px solid var(--border);background:#fff;padding:0 12px;font:500 13.5px/1 Inter,sans-serif;color:var(--ink);outline:none;margin-bottom:16px;transition:border-color .15s,box-shadow .15s}
  .sc-input:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(99,91,255,.12)}
  .sc-irow{display:flex;align-items:center;gap:8px;margin-bottom:8px}
  .sc-irow input{height:36px;box-sizing:border-box;border:1px solid var(--border);border-radius:7px;font:500 12.5px/1 Inter,sans-serif;color:var(--ink);outline:none;background:#fff;transition:border-color .15s}
  .sc-irow input:focus{border-color:var(--violet)}
  .sc-irow .l{flex:1;min-width:0;padding:0 10px}
  .sc-irow .q{width:44px;text-align:center}
  .sc-irow .pw{position:relative;width:88px;flex:none}
  .sc-irow .pw input{width:100%;padding:0 32px 0 10px;text-align:right;font-variant-numeric:tabular-nums}
  .sc-irow .pw span{position:absolute;right:9px;top:50%;transform:translateY(-50%);font-size:10px;color:#94a3b8;pointer-events:none}
  .sc-irow .rm{width:28px;height:36px;flex:none;border:0;background:none;color:#cbd6e4;cursor:pointer;border-radius:7px;display:flex;align-items:center;justify-content:center;transition:all .15s}
  .sc-irow .rm:hover{background:#fdf2f0;color:#d9603f}
  .sc-irow .rm svg{width:14px;height:14px}
  .sc-add{margin-top:8px;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;color:var(--violet);background:none;border:0;cursor:pointer;padding:0;font-family:inherit;transition:color .15s}
  .sc-add:hover{color:var(--ink)}
  /* ── Resserrement sous 480px ──
     La ligne d'article tient quatre éléments côte à côte. À 375px, les
     gouttières et les largeurs fixes ne laissent plus rien au libellé. */
  @media(max-width:479px){
    .sc-body{padding:16px}
    .sc-irow{gap:6px}
    .sc-irow .q{width:38px}
    .sc-irow .pw{width:74px}
    .sc-irow .pw input{padding:0 28px 0 8px}
    /* L'URL de démonstration est en chasse fixe et ne se coupe pas : on la
       tronque proprement plutôt que de la laisser pousser la carte. */
    .sc-url{font-size:10px;min-width:0;overflow:hidden}
    .sc-url span,.sc-url code{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  }
  .sc-add svg{width:14px;height:14px}
  .sc-demo{margin-top:14px;font-size:10.5px;line-height:1.5;color:#94a3b8}
  .sc-generate{margin-top:12px;width:100%;height:44px;border:0;border-radius:9px;background:var(--ink);color:#fff;font:600 14px/1 Inter,sans-serif;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background .15s}
  .sc-generate:hover{background:#1c3553}
  .sc-generate .arr{width:16px;height:16px}
  /* Bill view */
  .sc-billbar{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);padding:12px 20px}
  .sc-modify{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--violet);background:none;border:0;cursor:pointer;padding:0;font-family:inherit;transition:color .15s}
  .sc-modify:hover{color:var(--ink)}
  .sc-modify svg{width:14px;height:14px}
  .sc-created{display:inline-flex;align-items:center;gap:6px;border-radius:999px;background:#d7f7ea;color:#00875a;font-size:11px;font-weight:600;padding:4px 10px}
  .sc-created svg{width:12px;height:12px}
  .sc-paperwrap{background:#e8edf3;padding:16px}
  .sc-paper{position:relative;max-width:440px;margin:0 auto;background:#fff;border-radius:4px;box-shadow:0 10px 30px -8px rgba(10,37,64,.28);padding:22px 24px 0;color:#1a1a1a}
  /* Filigrane SPECIMEN : la facture de démonstration n'a aucune valeur légale. */
  .sc-specimen{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;pointer-events:none;overflow:hidden}
  .sc-specimen span{font-family:'Outfit',Inter,sans-serif;font-weight:800;font-size:58px;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:rgba(213,43,30,.14);transform:rotate(-30deg);white-space:nowrap}
  .sc-paper .sc-sender{font-size:9px;line-height:1.4;color:#5b6675}
  .sc-recip{margin-top:22px;text-align:right;font-size:11px;line-height:1.55}
  .sc-recip .nm{font-weight:600}
  .sc-invhead{margin-top:26px;display:flex;align-items:baseline;justify-content:space-between}
  .sc-invhead h3{font-size:19px;font-weight:700;letter-spacing:-.01em}
  .sc-invhead p{font-size:10px;color:#5b6675}
  .sc-invtable{margin-top:18px;width:100%;border-collapse:collapse;font-size:10.5px}
  .sc-invtable th{border-bottom:1px solid #1a1a1a;padding-bottom:6px;font-size:9px;text-transform:uppercase;letter-spacing:.04em;color:#5b6675;font-weight:600;text-align:left}
  .sc-invtable th.n,.sc-invtable td.n{text-align:right;font-variant-numeric:tabular-nums}
  .sc-invtable td{border-bottom:1px solid #ededed;padding:6px 0}
  .sc-invtable td:not(.n){padding-right:8px}
  .sc-invtot{margin:12px 0 0 auto;width:58%;font-size:10.5px}
  .sc-invtot div{display:flex;justify-content:space-between;padding:1px 0}
  .sc-invtot div span:first-child{color:#5b6675}
  .sc-invtot div span:last-child{font-variant-numeric:tabular-nums}
  .sc-invtot .g{border-top:2px solid #1a1a1a;padding-top:4px;margin-top:2px;font-weight:700}
  .sc-invtot .g span{color:#1a1a1a}
  .sc-invnote{margin-top:20px;font-size:9px;line-height:1.5;color:#5b6675}
  /* Animation de génération (avant l'aperçu) */
  .sc-loading{min-height:420px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:40px 24px;text-align:center}
  .sc-load-ic{width:56px;height:56px;border-radius:16px;background:rgba(99,91,255,.1);color:var(--violet);display:flex;align-items:center;justify-content:center;position:relative}
  .sc-load-ic svg{width:26px;height:26px}
  /* `border-radius:20px` sur une boîte de 66px donnait un CARRÉ ARRONDI qui
     tournait, pas un anneau. 50% en fait un vrai cercle. Un seul côté coloré
     (au lieu de deux) rend la rotation lisible plutôt que symétrique. */
  .sc-load-ic::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(99,91,255,.18);border-top-color:var(--violet);animation:scSpin .7s linear infinite}
  @keyframes scSpin{to{transform:rotate(360deg)}}
  .sc-load-t{font-size:15px;font-weight:600;color:var(--ink)}
  .sc-load-bar{width:220px;max-width:80%;height:6px;border-radius:999px;background:var(--border);overflow:hidden}
  .sc-load-bar span{display:block;height:100%;width:6%;border-radius:999px;background:var(--ink);animation:scFill 1.35s cubic-bezier(.4,0,.2,1) forwards}
  @keyframes scFill{0%{width:6%}30%{width:44%}70%{width:78%}100%{width:100%}}
  .sc-load-step{font-size:12.5px;color:var(--muted);min-height:16px;transition:opacity .2s}

  /* ══════════ MARQUEE ══════════ */
  .marquee-sec{position:relative;overflow:hidden;background:#fff;padding:64px 0;border-top:1px solid var(--border)}
  .marquee-title{text-align:center;font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
  .marquee-board{margin-top:32px;border-radius:18px;background:var(--bg);padding:24px;box-shadow:0 10px 30px -18px rgba(10,37,64,.16);box-shadow:0 10px 30px -18px rgba(10,37,64,.16),0 0 0 1px var(--border)}
  .marquee-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
  @media(min-width:640px){.marquee-grid{grid-template-columns:repeat(3,1fr)}}
  @media(min-width:1024px){.marquee-grid{grid-template-columns:repeat(7,1fr)}}
  .marquee-grid .cell{position:relative;height:64px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--border-soft);transition:transform .18s,box-shadow .18s}
  .soon-badge{font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--violet);background:rgba(99,91,255,.1);border-radius:999px;padding:2px 6px;line-height:1;white-space:nowrap}
  .marquee-grid .cell .soon-badge{position:absolute;top:7px;right:7px}
  .chip .soon-badge{margin-left:2px}
  .marquee-grid .cell:hover{transform:translateY(-2px);box-shadow:0 10px 20px -12px rgba(10,37,64,.14)}
  .marquee-grid .cell span{font-size:15px;font-weight:600;letter-spacing:-.01em}
  .marquee-grid .cell .mq-flag{display:flex;flex-direction:column;align-items:center;gap:5px}
  .marquee-grid .cell .mq-flag img{border-radius:3px}
  .marquee-grid .cell .mq-flag .mq-cap{font-size:10px;font-weight:600;letter-spacing:0;color:var(--ink-soft)}
  .marquee-track-wrap{position:relative;margin-top:24px;overflow:hidden}
  .marquee-track-wrap::before,.marquee-track-wrap::after{content:"";position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none}
  .marquee-track-wrap::before{left:0;background:linear-gradient(90deg,#fff,transparent)}
  .marquee-track-wrap::after{right:0;background:linear-gradient(270deg,#fff,transparent)}
  .marquee-track{display:flex;gap:16px;padding:8px 0;width:max-content;animation:marquee 34s linear infinite}
  @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-33.33%)}}
  .chip{display:inline-flex;flex-shrink:0;align-items:center;gap:8px;border-radius:999px;padding:8px 14px;font-size:13px;font-weight:500;white-space:nowrap}
  .chip.box{background:#fff;box-shadow:0 0 0 1px var(--border)}
  .chip i{width:6px;height:6px;border-radius:50%;display:block}

  /* ══════════ PRODUIT (ServicesOverview) ══════════ */
  .produit{background:#fff;padding:112px 0}
  .pr-intro{max-width:760px}
  .pr-intro .h2{margin-top:12px}
  .pr-intro p{margin-top:20px;font-size:17px;line-height:1.65;color:var(--ink-soft)}
  .pr-rows{margin-top:64px;display:flex;flex-direction:column;gap:64px}
  .pr-row{display:grid;gap:40px;align-items:center}
  @media(min-width:1024px){.pr-row{grid-template-columns:.92fr 1.08fr}.pr-row.rev .pr-shot{order:2}}
  .pr-shot-inner{position:relative;overflow:hidden;border-radius:18px;background:var(--bg);padding:12px;box-shadow:0 24px 60px -24px rgba(10,37,64,.22),0 0 0 1px var(--border)}
  .pr-shot-bar{display:flex;align-items:center;gap:8px;padding:8px 8px 12px}
  .pr-shot-bar i{width:10px;height:10px;border-radius:50%;display:block}
  .pr-shot-bar .lbl{margin-left:12px;font-size:11px;font-family:ui-monospace,monospace;color:var(--muted)}
  .pr-shot img{width:100%;border-radius:12px;box-shadow:0 8px 24px -10px rgba(10,37,64,.18);object-fit:cover}
  .pr-badge{display:inline-flex;align-items:center;gap:8px;border-radius:999px;background:var(--bg);padding:6px 12px;box-shadow:0 0 0 1px var(--border);margin-bottom:16px}
  .pr-badge i{width:8px;height:8px;border-radius:50%;display:block}
  .pr-badge span{font-size:12.5px;font-weight:600;color:var(--ink-soft)}
  .pr-text h3{max-width:520px;font-size:34px;font-weight:520;line-height:1.1;letter-spacing:-.04em;color:var(--ink)}
  .pr-text p{margin-top:16px;max-width:560px;font-size:16px;line-height:1.65;color:var(--ink-soft)}
  .pr-tags{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px}
  .pr-tags span{border-radius:999px;background:#fff;padding:4px 12px;font-size:12px;font-weight:500;color:var(--ink-soft);box-shadow:0 0 0 1px var(--border)}

  /* Mockups d'interface GoLynk (remplacent les captures) */
  .mock{display:flex;height:340px;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 8px 24px -10px rgba(10,37,64,.18);font-size:11px;line-height:1.4;color:var(--ink)}
  .mk-side{width:126px;flex-shrink:0;border-right:1px solid var(--border);padding:12px 10px;display:none;background:#fff}
  @media(min-width:520px){.mk-side{display:block}}
  .mk-side .lg{display:flex;align-items:center;gap:7px;font-weight:600;font-size:12px;margin-bottom:14px}
  .mk-side .lg img{width:16px;height:16px}
  .mk-nav{display:flex;flex-direction:column;gap:1px}
  .mk-nav a{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:7px;color:var(--muted);font-size:11px}
  .mk-nav a.on{background:rgba(99,91,255,.1);color:var(--violet);font-weight:600}
  .mk-nav .dot{width:6px;height:6px;border-radius:2px;background:currentColor;flex-shrink:0;opacity:.65}
  .mk-main{flex:1;padding:14px 15px;background:var(--bg);overflow:hidden}
  .mk-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}
  .mk-h .t{font-size:13px;font-weight:600}
  .mk-h .d{font-size:10px;color:var(--muted)}
  .mk-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:11px}
  .mk-kpi{background:#fff;border-radius:9px;padding:8px;box-shadow:0 0 0 1px var(--border)}
  .mk-kpi .k{font-size:8.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
  .mk-kpi .v{font-size:13px;font-weight:700;margin-top:3px;font-variant-numeric:tabular-nums}
  .mk-kpi .c{font-size:8.5px;font-weight:600;color:var(--green);margin-top:1px}
  .mk-card{background:#fff;border-radius:9px;padding:10px 11px;box-shadow:0 0 0 1px var(--border)}
  .mk-cap{font-size:9.5px;font-weight:600;color:var(--muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:.04em}
  .mk-bars{display:flex;align-items:flex-end;gap:7px;height:72px}
  .mk-bars .b{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(180deg,#635bff,#b7b3ff)}
  .mk-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--border)}
  .mk-row:first-child{border-top:0}
  .mk-chk{width:13px;height:13px;border-radius:4px;box-shadow:inset 0 0 0 1.5px var(--violet);flex-shrink:0;position:relative}
  .mk-chk.on{background:var(--violet);box-shadow:none}
  .mk-chk.on::after{content:"";position:absolute;left:4px;top:1.5px;width:3px;height:6px;border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
  .mk-row .lbl{flex:1;font-size:10.5px}
  .mk-row .rt{font-size:10px;color:var(--muted)}
  .mk-table{width:100%;background:#fff;border-radius:9px;box-shadow:0 0 0 1px var(--border);overflow:hidden}
  .mk-tr{display:grid;grid-template-columns:48px 1fr 58px 58px;gap:6px;padding:7px 10px;font-size:10px;border-top:1px solid var(--border)}
  .mk-tr.hd{border-top:0;color:var(--muted);font-weight:600;text-transform:uppercase;font-size:8px;letter-spacing:.04em}
  .mk-tr .num{text-align:right;font-variant-numeric:tabular-nums}
  .mk-ia{display:flex;flex-direction:column;gap:8px}
  .mk-ia .it{display:flex;align-items:center;gap:10px;background:#fff;border-radius:9px;padding:9px 10px;box-shadow:0 0 0 1px var(--border)}
  .mk-ia .ic{width:26px;height:26px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:11px}
  .mk-ia .nm{flex:1;font-weight:600;font-size:11.5px}
  .mk-ia .bt{font-size:9.5px;font-weight:600;padding:4px 10px;border-radius:6px;background:var(--ink);color:#fff}
  .mk-ia .bt.done{background:rgba(0,182,122,.12);color:var(--green)}
  .mk-field{background:#fff;border:1px solid var(--border);border-radius:7px;padding:7px 9px;font-size:11px;margin-bottom:7px}
  .mk-field.lbl{border:0;background:transparent;padding:0 0 3px;font-size:8.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
  .mk-tot{display:flex;justify-content:space-between;align-items:center;background:#fff;border-radius:9px;padding:9px 11px;box-shadow:0 0 0 1px var(--border);margin-top:8px}
  .mk-tot .big{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
  .mk-send{background:var(--ink);color:#fff;font-size:10px;font-weight:600;padding:6px 12px;border-radius:7px}

  /* ══════════ ÉCOSYSTÈME (diagramme radial) ══════════ */
  .eco{background:var(--bg);padding:112px 0;overflow:hidden}
  .eco-head{text-align:center;max-width:640px;margin:0 auto 56px}
  .eco-head .h2{margin-top:12px}
  .eco-grid{display:grid;gap:48px;align-items:center}
  @media(min-width:900px){.eco-grid{grid-template-columns:1fr 1fr;gap:56px}}
  .eco-diagram{position:relative;width:100%;max-width:476px;margin:0 auto;aspect-ratio:1}
  .eco-lines{position:absolute;inset:0;width:100%;height:100%;z-index:0}
  .eco-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:94px;height:94px;border-radius:50%;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;z-index:3;box-shadow:0 12px 30px -8px rgba(10,37,64,.5)}
  .eco-center img{width:22px;height:22px;filter:brightness(0) invert(1)}
  .eco-center span{font-size:11px;font-weight:600;color:#fff}
  /* Satellites = cartes autonomes (icône + libellé ensemble → jamais de texte qui déborde). */
  .eco-node{position:absolute;transform:translate(-50%,-50%);box-sizing:border-box;width:98px;display:flex;flex-direction:column;align-items:center;gap:9px;padding:14px 8px 13px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--border),0 8px 20px -14px rgba(10,37,64,.3);cursor:pointer;border:0;z-index:2;transition:transform .35s cubic-bezier(.19,1,.22,1),box-shadow .3s}
  .eco-node .ic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .3s,color .3s}
  .eco-node .ic svg{width:20px;height:20px}
  .eco-node .nm{font-size:12px;font-weight:600;line-height:1.2;color:var(--ink-soft);text-align:center;transition:color .3s}
  .eco-node:hover{transform:translate(-50%,-50%) translateY(-3px);box-shadow:0 0 0 1px var(--border),0 14px 26px -14px rgba(10,37,64,.35)}
  .eco-node.on{box-shadow:0 0 0 1.5px var(--eco-c,#635bff),0 16px 34px -14px var(--eco-c,#635bff)}
  /* Sous 900 px : plus de radial (trop serré) → grille 2 colonnes de cartes lisibles. */
  @media(max-width:899px){
    .eco-diagram{aspect-ratio:auto;max-width:460px;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
    .eco-lines,.eco-center{display:none}
    .eco-node{position:static!important;transform:none!important;left:auto!important;top:auto!important;width:auto;flex-direction:row;justify-content:flex-start;gap:12px;padding:13px 14px}
    .eco-node .nm{text-align:left}
    .eco-node:hover{transform:none!important}
  }
  .eco-info{min-height:236px}
  .eco-prog{display:flex;gap:6px;margin-bottom:26px}
  .eco-prog span{height:3px;flex:1;border-radius:999px;background:var(--border);transition:background .45s}
  .eco-count{font-size:11px;font-family:ui-monospace,monospace;text-transform:uppercase;letter-spacing:.16em;margin-bottom:12px}
  .eco-info h3{font-size:26px;font-weight:600;letter-spacing:-.03em;line-height:1.15;color:var(--ink);margin-bottom:14px}
  .eco-info p{font-size:15.5px;line-height:1.7;color:var(--ink-soft);max-width:470px}

  /* ══════════ INDÉPENDANTS — services détaillés (scroll + visuel sticky) ══════════ */
  .isv{background:#fff;border-top:1px solid var(--border)}
  .isv-grid{display:grid;gap:48px}
  @media(min-width:1024px){.isv-grid{grid-template-columns:1fr 1fr;gap:64px}}
  /* 🔴 `min-width:0` sur les éléments de grille — sinon débordement mobile.
     Un élément de grille vaut `min-width:auto` par défaut : il REFUSE de
     descendre sous la taille de son contenu. Le rectangle ajouté à `.isv-block`
     (padding 22px × 2) portait sa largeur de contenu à 334+44 = 378 px, la
     colonne s'y calait, et la page débordait de 23 px sur mobile — d'où le
     blanc à droite et le menu décalé (signalé par Mathis, 27.08.2026).
     Mesuré : scrollWidth 398 → 375 après ce correctif. */
  .isv-grid > *, .isv-left, .isv-block { min-width: 0; }
  /* La carte visuelle ne dépasse jamais son conteneur, quelle que soit sa
     largeur intrinsèque. */
  .isv-mobvis, .isv-mobvis .vis { max-width: 100%; }
  .isv-left{padding:80px 0}
  @media(max-width:1023px){.isv-left{padding:56px 0}}
  /* ══ RECTANGLE ═══════════════════════════════════════════════════════════
     Chaque bloc est une CARTE à dimensions bornées, plutôt qu'un contenu qui
     s'étire sur toute la largeur disponible. Décision Mathis, 26.08.2026 :
     « mettre la partie dans un rectangle pour être sûr des dimensions ».

     Ce que ça règle à la racine : plus rien ici ne dépend de la largeur exacte
     du viewport. Le trait, les paragraphes et les détails sont bornés par le
     padding de la carte — le défaut « le trait file jusqu'au bord » ne peut
     plus réapparaître à une largeur qu'on n'aurait pas prévue.

     `max-width:760px` : au-delà, une ligne de texte devient trop longue à
     lire. `margin-bottom` et NON `padding-bottom` pour l'écart entre blocs —
     un padding gonflerait le fond de la carte au lieu de séparer les cartes.
     Le fond et le filet de bordure reprennent ceux de `.vis` (l.551) pour que
     la colonne de gauche réponde visuellement à la carte de droite. */
  .isv-block{scroll-margin-top:96px;max-width:760px;padding:32px;border-radius:var(--radius);background:var(--bg);box-shadow:0 0 0 1px var(--border)}
  .isv-block:not(:last-child){margin-bottom:32px}
  .isv-numline{display:flex;align-items:center;gap:12px;margin-bottom:22px}
  .isv-num{font-size:13px;font-family:ui-monospace,monospace;color:var(--violet);background:#e6e2ff;padding:3px 9px;border-radius:6px}
  .isv-numline .hr{height:1px;flex:1;background:var(--border)}
  .isv-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:18px}
  .isv-ico{width:56px;height:56px;border-radius:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff}
  .isv-ico svg{width:26px;height:26px}
  .isv-head h3{font-size:32px;font-weight:520;line-height:1.08;letter-spacing:-.04em;color:var(--ink);max-width:540px}
  .isv-desc{font-size:16px;line-height:1.7;color:var(--ink-soft);max-width:600px;margin-bottom:28px}
  .isv-details{display:grid;gap:18px}
  .isv-det{display:flex;gap:14px}
  .isv-det .db{width:40px;height:40px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border:1px solid}
  .isv-det .db svg{width:19px;height:19px}
  .isv-det h4{font-size:15px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:8px}
  .isv-det p{margin-top:3px;font-size:14px;line-height:1.55;color:var(--ink-soft)}
  .isv-soon{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--violet);background:rgba(99,91,255,.1);border-radius:999px;padding:2px 6px;line-height:1}
  .isv-mobvis{margin-bottom:32px;display:block}
  @media(min-width:1024px){.isv-mobvis{display:none}}
  .isv-right{display:none}
  @media(min-width:1024px){.isv-right{display:block;padding:80px 0}}
  /* ── Visuel collant, centré verticalement ──
     `position:sticky` ne colle qu'à UN bord : `top:50vh` + `translateY(-50%)`
     centrerait bien, mais l'élément déborderait alors en haut et en bas de sa
     colonne au départ et à l'arrêt. On colle donc une BOÎTE de la hauteur de
     l'écran, et on centre le visuel DEDANS : les limites sont celles de
     `.isv-right`, donc le visuel ne sort jamais de sa section — il démarre et
     s'arrête exactement avec elle. */
  .isv-sticky{position:sticky;top:var(--nav-h,80px);height:calc(100svh - var(--nav-h,80px));display:flex;flex-direction:column;justify-content:center}
  /* Repli si le visuel devient plus haut que l'écran : on redonne la main à la
     hauteur naturelle plutôt que de couper le contenu. */
  @media(max-height:620px){.isv-sticky{height:auto;justify-content:flex-start}}
  /* 🔴 HAUTEUR STABLE DU PANNEAU [2026-08-23]
   Les quatre maquettes se superposent dans UNE SEULE case de grille
   (`grid-area:1/1`) : la piste prend alors la hauteur de la PLUS HAUTE, et le
   panneau garde la même taille de la section 1 à la 4.
   Avant, l'inactive était en `position:absolute` et l'active en `relative` :
   la hauteur suivait la maquette affichée, donc le bloc grandissait puis
   rétrécissait à chaque changement de section pendant le défilement.
   `height:100%` sur la carte fait que les quatre ont la MÊME taille — on lit
   quatre écrans du même logiciel, et non quatre dessins de tailles diverses. */
.isv-visuals{display:grid}
.isv-vis{grid-area:1/1}
.isv-vis>.vis{height:100%}
  .isv-vis{transition:opacity .45s cubic-bezier(.19,1,.22,1),transform .45s cubic-bezier(.19,1,.22,1)}
  .isv-vis.off{opacity:0;transform:translateY(8px);pointer-events:none;z-index:0}
  .isv-vis.on{opacity:1;transform:none;z-index:1}
@media (prefers-reduced-motion:reduce){.isv-vis{transition:none}.isv-vis.off{transform:none}}
  .isv-dots{margin-top:20px;display:flex;align-items:center;justify-content:center;gap:6px}
  .isv-dots button{height:6px;border-radius:999px;background:#cbd6e4;border:0;padding:0;cursor:pointer;transition:width .4s,background .4s;width:6px}
  .isv-dots button.on{width:28px}

  /* ══ UNE SEULE COLONNE (< 1024 px) ═══════════════════════════════════════
     🔴 LA BORNE DU TRAITEMENT NE SUIVAIT PAS LA BORNE DE LA MISE EN PAGE.
     `.isv-grid` ne passe à deux colonnes qu'à `min-width:1024px` (l.460), et
     `.isv-right` ne s'affiche qu'à partir de là (l.484) — mais le bloc mobile
     ci-dessous s'arrête à 639 px. Entre 640 et 1023 px la section était donc
     mono-colonne avec l'habillage prévu pour deux colonnes.

     Le trait est le seul élément que ça rendait faux : sur deux colonnes il
     sépare le titre du visuel de droite ; sur une seule il ne sépare rien et
     laisse le bloc « ouvert » à droite. Il doit donc disparaître dès que la
     deuxième colonne disparaît, pas 384 px plus bas.

     MESURÉ sur golynk.ch (Firefox, profil neuf), trait visible AVANT :
       640 px → 554 px · 932 px → 831 px · 1023 px → 922 px · APRÈS → masqué
     À 1024 px il reste affiché (403 px) : là il sépare vraiment.

     Les tailles (icône 56 px, titre 32 px, en-tête en ligne) restent, elles,
     jusqu'à 639 px : entre 640 et 1023 px il y a la place, et un titre à
     26 px sur 1000 px de large ferait maigre. Décision Mathis, 26.08.2026. */
  @media(max-width:1023px){
    .isv-numline .hr{display:none}
  }

  /* ══ MOBILE ══════════════════════════════════════════════════════════════
     🔴 CE BLOC ÉTAIT PLACÉ PLUS HAUT, AVANT LES RÈGLES DE BASE — donc mort.
     À spécificité égale (une classe contre une classe), c'est la dernière
     déclaration qui gagne : `.isv-ico{width:56px}` écrasait le `48px` du
     média. Mesuré sur la page en 375 px : l'icône faisait bien 56 px et le
     titre 32 px, jamais les valeurs mobiles prévues. Remis ICI, après tout
     ce qu'il doit surcharger.

     Ce qui est retravaillé, en plus de rendre l'existant effectif :
     • le trait de la ligne de numéro : traité par le palier 1023 px ci-dessus,
       il n'est plus redéclaré ici (une même règle à deux endroits finit
       toujours par diverger).
     • l'icône empilée au-dessus du titre faisait un gros carré flottant :
       ramenée à 44 px, elle redevient un repère et non un objet.
     • le bloc mesurait 1430 px de haut ; les respirations pensées pour le
       bureau (88 px entre blocs, 56 px d'icône) sont resserrées. */
  @media(max-width:639px){
    .isv-numline{gap:10px;margin-bottom:16px}
    .isv-head{flex-direction:column;gap:12px;margin-bottom:14px}
    .isv-ico{width:44px;height:44px;border-radius:12px}
    .isv-ico svg{width:20px;height:20px}
    .isv-head h3{font-size:26px;letter-spacing:-.03em}
    .isv-desc{font-size:15.5px;line-height:1.65;margin-bottom:22px}
    .isv-details{gap:14px}
    .isv-det{gap:12px}
    .isv-det .db{width:34px;height:34px;border-radius:8px}
    .isv-det .db svg{width:16px;height:16px}
    .isv-block{padding:22px}
    .isv-block:not(:last-child){margin-bottom:22px}
    .isv-mobvis{margin-bottom:24px}
    .isv-left{padding:40px 0}
  }
  /* visuels (cartes) */
  .vis{border-radius:14px;background:var(--bg);padding:22px;box-shadow:0 0 0 1px var(--border)}
  .vis-h{display:flex;align-items:center;gap:12px;margin-bottom:18px}
  .vis-h .ic{width:40px;height:40px;border-radius:9px;display:flex;align-items:center;justify-content:center}
  .vis-h .ic svg{width:20px;height:20px}
  .vis-h .t{font-size:15px;font-weight:600;color:var(--ink)}
  .vis-h .s{font-size:12px;color:var(--muted)}
  .vis-h .bdg{margin-left:auto;font-size:10px;font-family:ui-monospace,monospace;padding:2px 8px;border-radius:5px}
  .vis-line{display:flex;align-items:center;justify-content:space-between;padding:8px 11px;border-radius:7px;background:#fff;box-shadow:0 0 0 1px var(--border);font-size:12px;margin-bottom:8px}
  .vis-line .num{font-variant-numeric:tabular-nums;font-family:ui-monospace,monospace;color:var(--ink-soft)}
  .vis-tot{border-top:1px solid var(--border);padding-top:12px;display:flex;justify-content:space-between;font-size:13px}
  .vis-tot b{font-weight:700;color:var(--ink)}
  .vis-tr{display:grid;grid-template-columns:44px 1fr 1fr 62px;gap:6px;padding:6px 0;font-size:11px;border-bottom:1px solid var(--border)}
  .vis-tr.hd{color:var(--muted);text-transform:uppercase;font-size:8.5px;letter-spacing:.04em;font-family:ui-monospace,monospace}
  .vis-tr .r{text-align:right;font-variant-numeric:tabular-nums;font-family:ui-monospace,monospace}
  .vis-pos{color:var(--green)}.vis-neg{color:var(--orange)}
  .vis-txn{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--border);font-size:12px}
  .vis-txn .tag{font-size:9.5px;font-family:ui-monospace,monospace;padding:1px 6px;border-radius:5px;background:#fff;box-shadow:0 0 0 1px var(--border);color:var(--muted)}
  .vis-dark{margin-top:16px;border-radius:9px;background:var(--ink);color:#fff;padding:12px 14px}
  .vis-dark .row{display:flex;align-items:center;justify-content:space-between;font-size:12px}
  .vis-dark .soft{color:#a3b6cc}
  .vis-bar{margin-top:9px;height:8px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
  .vis-bar i{display:block;height:100%;border-radius:999px;background:var(--cyan);width:68%}
  .vis-kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
  .vis-kpi{background:#fff;border-radius:9px;padding:13px;box-shadow:0 0 0 1px var(--border)}
  .vis-kpi .k{font-size:11px;color:var(--muted)}
  .vis-kpi .v{font-size:22px;font-weight:600;margin-top:3px;font-variant-numeric:tabular-nums}
  .vis-pipe{background:#fff;border-radius:9px;padding:14px;box-shadow:0 0 0 1px var(--border)}
  .vis-pipe .lbl{font-size:11px;font-weight:600;color:var(--ink);margin-bottom:10px}
  .vis-pipe .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
  .vis-pipe .col{background:var(--bg);border-radius:7px;padding:9px 6px}
  .vis-pipe .col .n{font-size:11px;color:var(--muted)}
  .vis-pipe .col .c{font-size:18px;font-weight:700;color:var(--ink)}

  /* ══════════ ASSISTANT IA ══════════ */
  .ai{background:#fff;border-top:1px solid var(--border);padding:112px 0;overflow:hidden}
  .ai-head{max-width:760px}
  .ai-head h2{font-size:44px;font-weight:520;line-height:1.06;letter-spacing:-.045em;color:var(--ink);margin-top:12px;max-width:700px}
  @media(max-width:640px){.ai-head h2{font-size:32px}}
  .ai-head p{margin-top:24px;font-size:17px;line-height:1.65;color:var(--ink-soft);max-width:620px}
  .ai-showcase{margin-top:48px;border-radius:18px;background:var(--bg);padding:12px;box-shadow:0 24px 60px -24px rgba(10,37,64,.22),0 0 0 1px var(--border)}
  .ai-shbar{display:flex;align-items:center;gap:8px;padding:8px 8px 12px}
  .ai-shbar i{width:10px;height:10px;border-radius:50%;display:block}
  .ai-shbar .lbl{margin-left:12px;font-size:11px;font-family:ui-monospace,monospace;color:var(--muted)}
  .ai-panel{background:#fff;border-radius:12px;padding:22px;box-shadow:0 8px 24px -10px rgba(10,37,64,.14)}
  .ai-panel-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:8px}
  .ai-panel-h .t{font-size:16px;font-weight:600;color:var(--ink)}
  .ai-panel-h .s{font-size:12.5px;color:var(--muted)}
  .ai-cards{display:grid;grid-template-columns:1fr;gap:10px}
  @media(min-width:640px){.ai-cards{grid-template-columns:1fr 1fr}}
  @media(min-width:900px){.ai-cards{grid-template-columns:repeat(4,1fr)}}
  .ai-card{position:relative;border-radius:12px;background:var(--bg);padding:16px;box-shadow:0 0 0 1px var(--border);text-align:center}
  .ai-card.rec{box-shadow:0 0 0 1.5px var(--violet);background:rgba(99,91,255,.04)}
  .ai-card .rbadge{position:absolute;top:-9px;left:50%;transform:translateX(-50%);font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#fff;background:var(--violet);border-radius:999px;padding:3px 9px;white-space:nowrap}
  .ai-card .ic{width:38px;height:38px;border-radius:10px;margin:2px auto 10px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:16px}
  .ai-card .nm{font-size:14px;font-weight:600;color:var(--ink)}
  .ai-card .org{font-size:11.5px;color:var(--muted);margin-top:1px}
  .ai-card .bt{margin-top:12px;display:inline-block;font-size:11px;font-weight:600;padding:5px 12px;border-radius:7px;background:var(--ink);color:#fff}
  .ai-card .bt.done{background:rgba(0,182,122,.12);color:var(--green)}
  /* démo interactive : Connecter → chargement → Connecté (et retour) */
  .ai-card .bt{cursor:pointer;user-select:none;transition:background .2s ease,color .2s ease}
  .ai-card .bt:hover{opacity:.88}
  .ai-card .bt.busy{background:rgba(10,37,64,.08);color:var(--muted);cursor:default}
  .ai-card .bt .spin{display:inline-block;width:9px;height:9px;margin-right:6px;vertical-align:-1px;
    border:1.5px solid currentColor;border-top-color:transparent;border-radius:50%;
    animation:aiSpin .6s linear infinite}
  @keyframes aiSpin{to{transform:rotate(360deg)}}
  /* la coche vit en CSS : elle survit au changement de langue (qui réécrit le texte) */
  .ai-card .bt.done::before{content:"\2713 ";font-weight:700}
  .ai-grid2{margin-top:64px;display:grid;gap:48px}
  @media(min-width:1024px){.ai-grid2{grid-template-columns:1fr 1fr;gap:56px}}
  /* une seule colonne quand le bloc « Fonctionne avec » n'est plus là (doublon des
     logos déjà présents dans le panneau au-dessus) */
  .ai-grid2.one{max-width:760px}
  @media(min-width:1024px){.ai-grid2.one{grid-template-columns:1fr}}
  /* le lien « Voir comment configurer » suit désormais le panneau de connexion */
  .ai-showcase .ai-more{margin-top:20px}
  .ai-sublbl{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:20px}
  .ai-works{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .ai-work{display:flex;align-items:center;gap:12px;border-radius:10px;background:var(--bg);padding:16px;box-shadow:0 0 0 1px var(--border);transition:transform .15s,box-shadow .15s}
  .ai-work:hover{transform:translateY(-2px);box-shadow:0 8px 20px -10px rgba(10,37,64,.14)}
  .ai-work .ic{width:36px;height:36px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff}
  .ai-work .ic svg{width:17px;height:17px}
  .ai-work .nm{font-size:15px;font-weight:600;color:var(--ink)}
  .ai-work .org{font-size:12px;color:var(--muted)}
  .ai-more{margin-top:24px}
  .ai-uses{display:flex;flex-direction:column;gap:14px}
  .ai-use{border-radius:12px;background:var(--bg);padding:18px;box-shadow:0 0 0 1px var(--border)}
  .ai-use .row{display:flex;align-items:flex-start;gap:12px}
  .ai-use .n{width:28px;height:28px;border-radius:50%;flex-shrink:0;background:var(--ink);color:#fff;font-size:11px;font-weight:600;font-family:ui-monospace,monospace;display:flex;align-items:center;justify-content:center}
  .ai-use .prompt{font-size:14px;font-family:ui-monospace,monospace;color:var(--violet);line-height:1.4}
  .ai-use .res{margin-top:8px;font-size:14px;line-height:1.55;color:var(--ink-soft)}

  /* ══════════ INDÉPENDANTS (bandeau sombre) ══════════ */
  .indep-hero{position:relative;overflow:hidden;background:var(--ink);color:#fff;padding:96px 0}
  .indep-hero .blob{position:absolute;border-radius:50%;filter:blur(120px);pointer-events:none}
  .indep-hero .blob1{right:-160px;top:-160px;width:500px;height:500px;background:rgba(0,212,255,.08)}
  .indep-hero .blob2{left:-160px;bottom:-160px;width:500px;height:500px;background:rgba(99,91,255,.12)}
  .indep-hero .inner{position:relative}
  .indep-hero .kick{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--cyan);margin-bottom:24px}
  .indep-hero h2{font-size:44px;font-weight:520;line-height:1.06;letter-spacing:-.045em;max-width:800px}
  @media(max-width:640px){.indep-hero h2{font-size:32px}}
  .indep-hero .sub{margin-top:24px;font-size:17px;line-height:1.65;color:#a3b6cc;max-width:680px}
  .indep-hero .feats{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px 24px;font-size:14px;color:#a3b6cc}
  .indep-hero .feats span{display:flex;align-items:center;gap:8px}
  .indep-hero .feats svg{width:16px;height:16px;color:var(--cyan);flex-shrink:0}
  .indep-hero .acts{margin-top:36px;display:flex;flex-direction:column;gap:12px}
  @media(min-width:640px){.indep-hero .acts{flex-direction:row}}

  /* ══════════ CONFORMITÉ ══════════ */
  .comp{position:relative;overflow:hidden;background:#fff;padding:112px 0}
  .comp-halo{position:absolute;top:-128px;left:50%;transform:translateX(-50%);width:820px;height:420px;max-width:100%;border-radius:50%;opacity:.5;pointer-events:none;background:radial-gradient(circle,rgba(99,91,255,.08),rgba(0,182,122,.05) 40%,transparent 70%)}
  .comp-head{position:relative;max-width:760px;margin:0 auto;text-align:center}
  .comp-head .h2{margin-top:12px}
  .comp-hl{position:relative;display:inline-block;z-index:0}
  .comp-hl::after{content:"";position:absolute;left:0;bottom:2px;height:8px;width:100%;border-radius:999px;background:rgba(99,91,255,.22);z-index:-1}
  .comp-head p{margin:20px auto 0;max-width:600px;font-size:17px;line-height:1.65;color:var(--ink-soft)}
  .comp-badges{position:relative;margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px}
  .comp-badge{display:inline-flex;align-items:center;gap:8px;border-radius:999px;background:#fff;padding:7px 14px;font-size:12.5px;font-weight:600;color:var(--ink);box-shadow:0 1px 2px rgba(10,37,64,.04),0 0 0 1px var(--border);transition:transform .15s}
  .comp-badge:hover{transform:translateY(-2px)}
  .comp-badge i{width:6px;height:6px;border-radius:50%;display:block}
  .comp-pillars{position:relative;margin-top:72px;display:grid;gap:20px}
  @media(min-width:900px){.comp-pillars{grid-template-columns:repeat(3,1fr)}}
  .comp-pillar{position:relative;overflow:hidden;height:100%;border-radius:16px;background:var(--bg);padding:28px;box-shadow:0 0 0 1px var(--border);transition:transform .2s,box-shadow .2s}
  .comp-pillar:hover{transform:translateY(-4px);box-shadow:0 14px 40px -16px rgba(10,37,64,.18),0 0 0 1px #cbd6e4}
  .comp-pico{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 8px 20px -6px rgba(10,37,64,.25)}
  .comp-pico svg{width:21px;height:21px}
  .comp-pillar h3{margin-top:24px;font-size:20px;font-weight:560;letter-spacing:-.02em;color:var(--ink)}
  .comp-pillar p{margin-top:12px;font-size:14.5px;line-height:1.7;color:var(--ink-soft)}
  .comp-tag{margin-top:20px;display:inline-flex;align-items:center;gap:8px;border-radius:999px;background:#fff;padding:5px 12px;font-size:11px;font-family:ui-monospace,monospace;text-transform:uppercase;letter-spacing:.03em;color:var(--ink);box-shadow:0 0 0 1px var(--border)}
  .comp-tag svg{width:12px;height:12px;flex-shrink:0}
  .comp-stats{position:relative;margin-top:48px;border-radius:16px;background:linear-gradient(135deg,#0a2540,#1c3553);padding:32px;color:#fff;box-shadow:0 24px 60px -30px rgba(10,37,64,.5)}
  .comp-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
  @media(min-width:768px){.comp-stats-grid{grid-template-columns:repeat(4,1fr)}}
  .comp-stat{text-align:center}
  @media(min-width:768px){.comp-stat{text-align:left;border-left:1px solid rgba(255,255,255,.1);padding-left:24px}.comp-stat:first-child{border-left:0;padding-left:0}}
  .comp-stat .big{font-size:29px;font-weight:560;letter-spacing:-.03em}
  .comp-stat .lbl{margin-top:4px;font-size:12.5px;line-height:1.4;color:#a3b6cc}
  .comp-legal{position:relative;margin-top:30px;text-align:center;font-size:12.5px;color:var(--muted)}
  .comp-legal a{color:var(--violet);font-weight:500}

  /* ══════════ FIDUCIAIRES (bandeau sombre) ══════════ */
  .fid{position:relative;overflow:hidden;background:var(--ink);color:#fff;padding:112px 0}
  .fid .blob{position:absolute;border-radius:50%;filter:blur(120px);pointer-events:none}
  .fid .blob1{right:-160px;top:-160px;width:500px;height:500px;background:rgba(0,212,255,.08)}
  .fid .blob2{left:-160px;bottom:-160px;width:500px;height:500px;background:rgba(99,91,255,.12)}
  .fid-grid{position:relative;display:grid;gap:48px}
  @media(min-width:1024px){.fid-grid{grid-template-columns:.9fr 1.1fr;gap:56px}}
  .fid .kick{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--cyan);margin-bottom:12px}
  .fid h2{font-size:42px;font-weight:520;line-height:1.06;letter-spacing:-.045em}
  @media(max-width:640px){.fid h2{font-size:31px}}
  .fid .sub{margin-top:20px;font-size:17px;line-height:1.65;color:#a3b6cc}
  .fid .more{margin-top:28px;color:var(--cyan)}
  .fid .more:hover{color:#fff}
  .fid-cards{display:grid;gap:12px}
  @media(min-width:560px){.fid-cards{grid-template-columns:1fr 1fr}}
  .fid-card{border-radius:12px;background:rgba(255,255,255,.05);padding:22px;border:1px solid rgba(255,255,255,.08);transition:background .15s}
  .fid-card:hover{background:rgba(255,255,255,.08)}
  .fid-card>svg{width:24px;height:24px;color:var(--cyan);margin-bottom:14px}
  .fid-card .t{font-weight:600;font-size:15px;display:flex;align-items:center;gap:8px}
  .fid-card .x{margin-top:4px;font-size:13px;color:#a3b6cc}

  /* ══════════ FOOTER ══════════ */
  footer.ft{background:var(--ink);color:#fff}
  .ft-top{border-bottom:1px solid rgba(255,255,255,.08)}
  .ft-top .wrap{display:flex;flex-direction:column;gap:32px;align-items:flex-start;justify-content:space-between;padding:56px 20px}
  @media(min-width:1024px){.ft-top .wrap{flex-direction:row;align-items:center;padding:56px 24px}}
  .ft-top h3{font-size:28px;font-weight:520;letter-spacing:-.03em;line-height:1.2}
  .ft-top p{margin-top:8px;font-size:15px;color:#a3b6cc}
  .ft-top .acts{display:flex;gap:12px}
  .btn-white{background:#fff;color:var(--ink);height:40px;padding:0 20px;font-size:14px}
  .btn-white:hover{background:var(--bg)}
  .btn-outline{background:none;color:#fff;height:40px;padding:0 20px;font-size:14px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
  .btn-outline:hover{background:rgba(255,255,255,.06)}
  .ft-main{padding:56px 20px 32px}
  @media(min-width:1024px){.ft-main{padding:56px 24px 32px}}
  .ft-cols{display:flex;flex-direction:column;gap:40px}
  @media(min-width:1024px){.ft-cols{flex-direction:row;align-items:flex-start;justify-content:space-between}}
  .ft-brand{max-width:280px}
  .ft-brand .b{display:flex;align-items:center;gap:10px;margin-bottom:16px;font-size:17px;font-weight:600}
  .ft-brand .b img{width:24px;height:24px;filter:brightness(0) invert(1)}
  .ft-brand p{font-size:13.5px;line-height:1.55;color:#a3b6cc}
  .ft-social{display:flex;gap:10px;margin-top:18px}
  .ft-social a{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#a3b6cc;background:rgba(255,255,255,.06);transition:color .15s,background .15s,transform .15s}
  .ft-social a:hover{color:#fff;background:rgba(255,255,255,.12);transform:translateY(-1px)}
  .ft-social a svg{width:17px;height:17px}
  .ft-links{display:grid;grid-template-columns:repeat(2,1fr);gap:40px}
  @media(min-width:640px){.ft-links{grid-template-columns:repeat(4,1fr);gap:56px}}
  .ft-links h4{margin-bottom:16px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
  .ft-links li{list-style:none;margin-bottom:12px}
  .ft-links a{font-size:14px;color:#a3b6cc;transition:color .15s}
  .ft-links a:hover{color:#fff}
  .ft-bottom{margin-top:48px;display:flex;flex-direction:column;gap:16px;align-items:center;border-top:1px solid rgba(255,255,255,.08);padding-top:32px;font-size:12.5px;color:var(--muted)}
  @media(min-width:640px){.ft-bottom{flex-direction:row;justify-content:space-between}}
  .ft-bottom .legal{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
  /* Les deux mentions voyagent ensemble, alignées à droite. Elles s'empilent
     sous 640 px comme le reste du pied. */
  .ft-bottom .ft-mentions{display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center}
  @media(min-width:640px){.ft-bottom .ft-mentions{align-items:flex-end;text-align:right}}
  .ft-bottom .ft-mentions p{margin:0}
  .ft-bottom a:hover{color:#fff}
  /* Badge d'empreinte carbone — dans la teinte menthe du badge officiel
     (#00ffbc) pour rester reconnaissable au premier coup d'œil. */
  .ft-carbon{display:inline-flex;align-items:center;gap:6px;color:#00ffbc;text-decoration:none;white-space:nowrap;transition:opacity .15s}
  .ft-carbon:hover{opacity:.75;color:#00ffbc}
  .ft-carbon svg{flex:none;opacity:.85}

  @media(max-width:900px){.stripe-mesh{height:640px;left:-220px;right:-220px}}

  /* ══════════ HOME — FAQ (.hpf) ══════════ */
  .hpf{background:var(--bg);padding:96px 0}
  .hpf-head{max-width:640px;margin:0 auto 40px;text-align:center}
  .hpf-head .kick{display:block;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--violet);margin-bottom:12px}
  .hpf-head .h2{font-size:clamp(30px,4vw,44px)}
  .hpf-list{max-width:760px;margin:0 auto;border-top:1px solid var(--border)}
  .hpf-q{border-bottom:1px solid var(--border)}
  .hpf-q summary{list-style:none;cursor:pointer;padding:20px 4px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:16.5px;font-weight:600;color:var(--ink)}
  .hpf-q summary::-webkit-details-marker{display:none}
  .hpf-q summary .ic{flex-shrink:0;width:20px;height:20px;position:relative;transition:transform .2s}
  .hpf-q summary .ic::before,.hpf-q summary .ic::after{content:"";position:absolute;background:var(--violet);border-radius:2px}
  .hpf-q summary .ic::before{top:9px;left:2px;right:2px;height:2px}
  .hpf-q summary .ic::after{left:9px;top:2px;bottom:2px;width:2px;transition:transform .2s}
  .hpf-q[open] summary .ic::after{transform:scaleY(0)}
  .hpf-q .a{padding:0 4px 22px;font-size:15px;line-height:1.65;color:var(--ink-soft);max-width:660px}
  /* Fermé par défaut. `display:none` reste le repli SANS JavaScript ; quand le
     script anime, il garde l'attribut `open` jusqu'à la fin de la fermeture,
     donc cette règle ne coupe jamais une animation en cours. */
  .hpf-q:not([open]) .a{display:none}
  .hpf-q .a{overflow:hidden;transition:height .32s cubic-bezier(.19,1,.22,1),opacity .24s ease}
  .hpf-q summary .ic{transition:transform .32s cubic-bezier(.19,1,.22,1)}
  /* 🔴 rotate(90deg) ANNULAIT le « moins ».
     `.ic::after{transform:scaleY(0)}` masque la barre VERTICALE : il reste la
     barre horizontale, donc un « − ». Puis cette rotation de 90° la remettait
     debout — l'icône ouverte redevenait une barre verticale, ce qui ne veut
     rien dire. Les deux règles se contredisaient.
     180° garde le mouvement (un demi-tour) et laisse le moins horizontal. */
  .hpf-q[open] summary .ic{transform:rotate(180deg)}
  @media(prefers-reduced-motion:reduce){
    .hpf-q .a,.hpf-q summary .ic,.hpf-q summary .ic::after{transition:none}
  }

/* ══════════ MÉGA-MENUS (mm-*) ══════════════════════════════════════════════
   L'ordre et les entrées de la nav sont INCHANGÉS : on ne fait qu'ouvrir un
   panneau sous certaines d'entre elles. Une entrée sans sous-menu (Accueil,
   Tarifs, Contact) reste un lien simple.
   Fond blanc translucide + flou, comme la barre au défilement — le panneau
   appartient visuellement à la nav, il ne flotte pas au-dessus.            */
.nav-links .mm-trigger{display:inline-flex;align-items:center;gap:5px;cursor:pointer;background:none;border:0;padding:0;
  font-size:14px;font-weight:500;color:var(--ink-soft);font-family:inherit;transition:color .18s}
.nav-links .mm-trigger:hover,.nav-links .mm-trigger[aria-expanded="true"]{color:var(--ink)}
.nav-links .mm-trigger svg{width:12px;height:12px;transition:transform .22s}
.nav-links .mm-trigger[aria-expanded="true"] svg{transform:rotate(180deg)}
.mm-item{position:relative}

/* 🔴 UNE SCÈNE, PAS QUATRE PANNEAUX INDÉPENDANTS.
   Passer d'un sous-menu à l'autre fermait puis rouvrait : deux animations qui
   se contrarient, et un clignotement. Les panneaux vivent maintenant dans une
   scène commune dont la HAUTEUR s'anime ; à l'intérieur, l'ancien sort et le
   nouveau entre par le côté, dans le sens du déplacement.
   Ils sont superposés (`position:absolute`) : la scène ne peut pas sauter,
   c'est son style `height` qui commande. */
.mm-stage{position:fixed;left:0;right:0;top:60px;z-index:69;
  /* Blanc PLEIN, comme l'en-tête quand le menu est ouvert (`body.mm-open`).
     À .92 d'opacité on lisait le titre de la page au travers : le panneau
     et la page se disputaient le regard. Opaque, le menu forme un seul
     bloc avec la barre — c'est ce qui le fait paraître solide. */
  background:#fff;
  border-top:1px solid var(--border-soft);box-shadow:0 20px 44px -26px rgba(10,37,64,.28);
  /* 🔴 `display:grid` + `grid-area:1/1` sur les panneaux, PAS de position
     absolue. Avec `absolute`, les panneaux sortent du flux : la scène retombe
     à zéro pixel de haut et `overflow:hidden` masque tout — le menu devient
     invisible. Empilés dans une même case de grille, ils se superposent ET la
     scène prend leur hauteur, sans qu'on ait à la calculer. */
  display:grid;opacity:0;visibility:hidden;
  transition:opacity .2s,visibility 0s linear .2s}
.mm-stage.on{opacity:1;visibility:visible;transition:opacity .2s,visibility 0s}
.mm-panel{grid-area:1/1;opacity:0;pointer-events:none;
  transform:translateX(var(--mm-dir,14px));
  transition:opacity .26s cubic-bezier(.19,1,.22,1),transform .26s cubic-bezier(.19,1,.22,1)}
.mm-panel.on{opacity:1;pointer-events:auto;transform:none}
@media(prefers-reduced-motion:reduce){.mm-stage,.mm-panel{transition-duration:.01ms}}
/* 🔴 TOUS LES PANNEAUX À LA MÊME HAUTEUR.
   Quatre menus de 8, 8, 4 et 8 entrées donnaient quatre hauteurs : le panneau
   grandissait et rétrécissait d'un menu à l'autre. Une hauteur fixe règle ça —
   et surtout, l'animation n'a alors PLUS DE HAUTEUR À ANIMER : le passage
   devient un fondu pur, sans le moindre saut.
   🔴 ALIGNEMENT EN HAUT, hauteur inchangée [2026-08-25].
   Le contenu était centré verticalement dans le panneau. Sur les menus courts
   ça ouvrait un vide au-dessus qui se lisait mal : mesuré à 105 px pour le
   menu IA (4 liens), 76 px pour ceux à 6, 46 px même pour celui à 8. Les
   entrées semblaient flotter au milieu de nulle part.
   `align-items:start` colle tout en haut. La hauteur commune ne bouge PAS —
   c'est `min-height` qui la tient, et c'est elle qui évite au panneau de
   grandir et rétrécir d'un menu à l'autre, donc à l'animation d'avoir une
   hauteur à animer. Le vide passe simplement de dessus à dessous, où il ne
   se remarque plus. */
.mm-in{display:grid;gap:26px;padding:30px 0 34px;min-height:318px;align-items:start}
@media(min-width:1024px){.mm-in{grid-template-columns:1fr 1fr 300px;gap:40px}}
.mm-col h4{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:14px}
.mm-links{display:grid;gap:2px}
/* Chaque entrée occupe exactement la même place : une hauteur fixe et une
   description sur UNE ligne, coupée si besoin. Sans ça, une description qui
   passe à la ligne décale toute la colonne d'en face, et l'œil le voit. */
.mm-link{display:flex;align-items:center;gap:12px;padding:9px 10px;min-height:56px;
  border-radius:10px;transition:background .15s}
.mm-link:hover{background:rgba(99,91,255,.06)}
.mm-link .mi{flex-shrink:0;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  background:#e6e2ff;color:var(--violet)}
.mm-link .mi svg{width:16px;height:16px}
.mm-link>span:last-child{display:block;min-width:0}
/* `display:block` : ce sont des <span>, donc en flux inline par défaut —
   sans ça le titre et la description se collent sur la même ligne. */
.mm-link .t{display:block;font-size:14px;font-weight:600;color:var(--ink);line-height:1.3}
.mm-link .d{display:block;margin-top:2px;font-size:12.5px;line-height:1.45;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm-link .soon{margin-left:6px;padding:1px 6px;border-radius:999px;background:rgba(255,122,89,.15);color:#c2410c;
  font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;vertical-align:middle}

/* Colonne de droite — une ILLUSTRATION, pas un encart de texte.
   Deux tentatives précédentes ont été refusées : l'encart promotionnel violet
   (le format vu partout) puis le faux écran de logiciel. Le point commun :
   toutes deux INVENTAIENT du contenu pour occuper la place. Une illustration
   assume d'être décorative — c'est ce que fait Hostinger, et ça ne prétend
   rien. Dessinée en SVG : nette partout, aux couleurs de la marque, aucun
   fichier à gérer. */
.mm-card{display:none;border-radius:14px;overflow:hidden;background:#fff;
  box-shadow:0 0 0 1px var(--border-soft);transition:box-shadow .18s,transform .18s}
@media(min-width:1024px){.mm-card{display:block}}
.mm-card:hover{box-shadow:0 0 0 1px #c9d4e4,0 14px 30px -18px rgba(10,37,64,.35);transform:translateY(-2px)}
.mm-card .art{background:linear-gradient(150deg,#eef1fb,#f6f9fc);padding:14px 18px 8px}
.mm-card .art svg{display:block;width:100%;height:auto}
.mm-card .body{padding:14px 18px 18px}
.mm-card .k{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--violet)}
.mm-card h5{margin-top:7px;font-size:16px;font-weight:600;line-height:1.28;letter-spacing:-.02em;color:var(--ink)}
.mm-card p{margin-top:6px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.mm-card .cta{display:inline-block;margin-top:11px;font-size:12.5px;font-weight:600;color:var(--violet)}
.mm-card .foot b{font-size:12.5px;font-weight:600;color:var(--violet)}

/* ── Petits écrans : le panneau ne s'ouvre jamais, tout passe par le drawer ── */
@media(max-width:1023px){.mm-stage{display:none}}

/* Drawer mobile — niveau 2 qui glisse par-dessus le niveau 1. */
/* 🔴 Le haut du panneau part de `--nav-h`, PAS de 0. Le bloc conteneur d'un
   élément en position absolue est la boîte de PADDING de son ancêtre : avec
   `inset:0`, le panneau démarrait donc au-dessus du `padding-top` qui réserve
   la place de l'en-tête, et son bouton « retour » se retrouvait dessous
   (mesuré : retour à 8px, bas de l'en-tête à 60px). Le niveau 1, lui, est un
   enfant en flux normal — il respectait ce padding, d'où la différence. */
.mob-sub{position:absolute;inset:var(--nav-h,60px) 0 0 0;background:#fff;transform:translateX(100%);transition:transform .28s cubic-bezier(.19,1,.22,1);
  overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 0 24px}
.mob-sub.on{transform:none}
.mob-back{display:flex;align-items:center;gap:9px;width:100%;background:none;border:0;padding:14px 20px;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:600;color:var(--muted)}
.mob-back svg{width:15px;height:15px}
.mob-sub .mm-link{margin:0 12px;padding:11px 10px}
.mob-sub h4{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);
  margin:14px 22px 8px}

/* 🔴 NE PAS remettre `.mobmenu{position:relative}` ici. Cette règle existait
   pour « faire du drawer le conteneur de référence du niveau 2 » — mais
   `position:fixed`, posé plus haut, joue DÉJÀ ce rôle : tout élément positionné
   établit un bloc conteneur pour ses descendants absolus. En écrasant `fixed`
   par `relative`, elle remettait le tiroir DANS LE FLUX du document : sur
   mobile il s'affichait collé en haut de page, sur quelques dizaines de pixels,
   au lieu de couvrir l'écran. Signalé par Mathis, capture à l'appui. */
/* ⚠ Cette règle vient APRÈS celle du haut de fiche, à spécificité égale : elle
   gagne. `border:0` y effaçait donc le séparateur que l'autre venait de poser
   (un <button> a des bordures par défaut aux quatre côtés, d'où ce reset). Le
   bas est reposé ici même, sinon les entrées à sous-menu n'ont plus de trait. */
.mobmenu-list .mob-open{display:flex;align-items:center;justify-content:space-between;width:100%;
  background:none;border:0;border-bottom:1px solid var(--border);cursor:pointer;font-family:inherit;text-align:left}

/* ══════════ COMPARATEUR DE COÛTS (cc-*) ═══════════════════════════════════
   🔴 RÈGLE ABSOLUE DE CE BLOC : chaque prix affiché a été RELEVÉ sur une page
   publique, et porte sa date de relevé ainsi qu'un lien vers la source. La
   publicité comparative est licite en Suisse, mais l'art. 3 al. 1 let. e LCD
   interdit les comparaisons inexactes. Un prix inventé ou périmé nous expose.
   ⚠ Les tarifs bougent : ces chiffres sont à revérifier périodiquement, et la
   date affichée doit être mise à jour EN MÊME TEMPS que le chiffre. */
.cc{background:#fff;border-top:1px solid var(--border);padding:88px 0}
.cc-head{max-width:660px;margin:0 auto 44px;text-align:center}
.cc-head .kicker{font-size:13px;font-weight:600;color:var(--violet);margin-bottom:12px}
.cc-head h2{font-size:34px;font-weight:600;line-height:1.1;letter-spacing:-.04em;color:var(--ink)}
@media(min-width:768px){.cc-head h2{font-size:40px}}
.cc-head p{margin-top:14px;font-size:16.5px;line-height:1.6;color:var(--ink-soft)}

.cc-grid{display:grid;gap:14px;max-width:940px;margin:0 auto}
@media(min-width:760px){.cc-grid{grid-template-columns:1fr 1fr}}
.cc-card{background:var(--bg);border:1px solid var(--border-soft);border-radius:var(--radius);padding:20px 22px}
.cc-card.us{background:linear-gradient(150deg,#eef1fb,#f6f9fc);border-color:#c9d2f5}
.cc-top{display:flex;align-items:flex-start;gap:12px}
.cc-name{font-size:16.5px;font-weight:600;color:var(--ink);line-height:1.25}
.cc-scope{margin-top:3px;font-size:12.5px;color:var(--muted)}
.cc-price{margin-left:auto;text-align:right;white-space:nowrap}
.cc-price b{display:block;font-size:19px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.cc-price span{font-size:11.5px;color:var(--muted)}
.cc-note{margin-top:14px;padding-top:12px;border-top:1px solid var(--border-soft);font-size:13px;line-height:1.55;color:var(--ink-soft)}

/* Bulle d'information : la date du relevé et la source, au survol comme au
   clavier. `:focus-within` n'est pas décoratif — sans lui l'information est
   inaccessible à qui n'utilise pas de souris. */
.cc-i{position:relative;display:inline-flex;margin-left:6px;vertical-align:middle}
.cc-i>button{width:16px;height:16px;border-radius:999px;border:0;padding:0;cursor:pointer;
  background:#c9d4e4;color:#fff;font:700 11px/16px Inter,sans-serif;font-style:normal}
.cc-i>button:hover{background:var(--violet)}
.cc-i .bulle{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) translateY(4px);
  width:236px;padding:10px 12px;border-radius:10px;background:var(--ink);color:#fff;
  font-size:12px;line-height:1.5;font-weight:400;text-align:left;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s,transform .16s,visibility 0s linear .16s;z-index:20}
.cc-i:hover .bulle,.cc-i:focus-within .bulle{opacity:1;visibility:visible;transform:translateX(-50%);pointer-events:auto;transition:opacity .16s,transform .16s,visibility 0s}
.cc-i .bulle a{color:#8ab4ff;text-decoration:underline}
.cc-i .bulle b{display:block;margin-bottom:3px;color:#fff}

.cc-honest{max-width:940px;margin:28px auto 0;padding:18px 22px;background:#fff;
  border:1px solid var(--border-soft);border-radius:var(--radius);font-size:14px;line-height:1.65;color:var(--ink-soft)}
.cc-honest b{color:var(--ink)}

/* ── Équivalent en devise locale, sous le montant en francs ────────────────
   Discret À DESSEIN : le franc reste le prix, ceci n'est qu'un repère. Rendu
   en bloc pour passer sous le montant, et masqué s'il est vide (marché suisse,
   ou taux indisponible — cf. GLFx dans golynk-landing.js). */
/* 🔴 `display:block` NE SUFFIT PAS : dans un conteneur de prix en `flex`, un
   enfant devient un flex item — il se plaçait donc À DROITE du montant, pas
   dessous. Il faut occuper toute la largeur ET autoriser le parent à passer
   à la ligne — `nowrap` est la valeur par défaut, elle empêchait le retour. */
[data-chf]{flex-wrap:wrap}
.gl-fx{flex:0 0 100%;width:100%;display:block;margin-top:4px;font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0;white-space:nowrap}
.gl-fx:empty{display:none}

   /*GOLYNK — REFONTE DE L'ACCUEIL (v3)
   Ajouté en fin de feuille. Le fond du héro (dégradé, rubans, bande blanche)
   n'est volontairement pas modifié.
   ═══════════════════════════════════════════════════════════════════════ */

/* ============ HÉRO — composition « template » centrée ============
   Message + appels à l'action centrés ; grande capture produit en dessous,
   avec deux vignettes flottantes (chiffres du tableau de bord GoLynk). */
.hero .hero-grid{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  width:100%;max-width:none;margin:0;
  padding:10px 20px clamp(110px,13vh,150px);
}
@media(min-width:1024px){.hero .hero-grid{padding:16px 24px clamp(110px,13vh,150px)}}
.hero-grid>.hero-copy,.hero-grid>.hero-stage{margin-left:auto;margin-right:auto}
.hero-copy{width:min(880px,100%)}
.hero h1{
  font-size:clamp(40px,6vw,68px);
  font-weight:650;
  line-height:1.03;
  letter-spacing:-.048em;
  max-width:840px;
  margin-left:auto;
  margin-right:auto;
}
.hero h1 .mark{color:var(--violet);position:relative;white-space:nowrap;padding:0 .08em .1em}
/* trait « feutre » sous la promesse — dessiné à la main, pas géométrique */
.hero h1 .mark::after{
  content:"";position:absolute;left:-.03em;right:-.03em;bottom:-.02em;height:.16em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 16' preserveAspectRatio='none'%3E%3Cpath d='M5 11 C 46 3 90 14 134 8 C 178 3 222 13 264 8 C 302 4 340 11 375 6' fill='none' stroke='%23f2a93b' stroke-width='5.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 0 100%/100% 100%;
  pointer-events:none;opacity:.95}
.hero .lead{
  margin:22px auto 0;
  max-width:620px;
  font-size:18px;
  line-height:1.6;
}
.hero-cta{margin-top:28px;justify-content:center}

/* — la capture produit — */
.hero-stage{position:relative;width:min(940px,100%);margin:44px auto 0}
.hwin{
  position:relative;
  width:min(820px,96%);
  margin:0 auto;
  background:#fff;
  border-radius:18px;
  border:1px solid #d5deea;
  overflow:hidden;
  box-shadow:0 40px 90px -40px rgba(10,37,64,.5),0 3px 10px rgba(10,37,64,.08);
}
.hwin-top{display:flex;align-items:center;gap:12px;height:50px;padding:0 18px;
  background:linear-gradient(#fff,#fafbfd);border-bottom:1px solid #e8edf4}
.hw-dots{display:flex;gap:7px;flex:none}
.hw-dots i{width:11px;height:11px;border-radius:50%;display:block}
.hw-dots i:nth-child(1){background:#ff5f57}
.hw-dots i:nth-child(2){background:#febc2e}
.hw-dots i:nth-child(3){background:#28c840}
.hw-crumb{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink)}
.hw-logo{width:20px;height:20px;border-radius:6px;background:var(--violet);color:#fff;
  font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.hw-ver{margin-left:auto;font-size:12px;color:var(--muted);font-weight:500}
.hwin .mock{width:100%;height:auto;min-height:380px;border-radius:0;box-shadow:none}
/* app « sales » adaptée à la fenêtre large */
.hwin .mk-side{width:172px;padding:18px 12px}
.hwin .mk-side .lg{font-size:14px;margin-bottom:20px}
.hwin .mk-side .lg img{width:18px;height:18px}
.hwin .mk-nav{gap:3px}
.hwin .mk-nav a{font-size:12.5px;padding:8px 10px;border-radius:8px}
.hwin .mk-main{padding:24px 24px 28px}
.hwin .mk-h .t{font-size:17px}
.hwin .mk-field{font-size:13.5px;padding:11px 12px;border-radius:9px;margin-bottom:9px}
.hwin .mk-field.lbl{font-size:10px;padding-bottom:4px}
.hwin .mk-tot{padding:13px 14px;border-radius:10px;margin-top:12px}
.hwin .mk-tot .big{font-size:19px}
.hwin .mk-send{font-size:12px;padding:9px 16px;border-radius:8px}
.hwin .mk-card .mk-row{padding:10px 12px!important}

/* — vignettes flottantes (données réelles du dashboard GoLynk) — */
.hf{
  position:absolute;z-index:3;background:#fff;border:1px solid #dfe6ef;border-radius:14px;
  box-shadow:0 18px 40px -18px rgba(10,37,64,.35);
  display:flex;align-items:center;gap:10px;padding:11px 14px;
}
.hf b{display:block;font-size:13px;font-weight:650;color:var(--ink);line-height:1.2}
.hf i{font-style:normal;font-size:11px;color:var(--muted);white-space:nowrap;display:block;margin-top:1px}
.hf-kpi{left:-2%;top:-8%;transform:rotate(-2deg)}
.hf-kpi .hf-ic{width:32px;height:32px;border-radius:9px;flex:none;color:#fff;background:var(--green);
  display:flex;align-items:center;justify-content:center}
.hf-kpi .hf-ic svg{width:17px;height:17px}
.hf-kpi em{font-style:normal;font-weight:700;font-size:15px;color:var(--ink);
  font-variant-numeric:tabular-nums}
.hf-inv{right:-2%;bottom:-7%;transform:rotate(1.6deg)}
.hf-inv .ok{width:22px;height:22px;flex:none;color:#fff;background:var(--violet);border-radius:50%;
  padding:4px;box-sizing:border-box}
@media(max-width:1023px){
  .hf-kpi{left:2%}
  .hf-inv{right:2%}
}
@media(max-width:560px){
  .hf-kpi{top:-6%}
  .hf-inv{bottom:-5%}
  .hf i{display:none}
}

/* centrer les blocs de texte hérités (boutons en colonne sur mobile) */
@media(max-width:640px){
  .hero-copy .hero-cta{align-items:center}
}

/* ============ « LE LOGICIEL » — des chapitres aérés et réguliers ============
   Intro centrée, puis chaque fonction sur une ligne équilibrée qui occupe
   l'écran sans vides disproportionnés. */
.produit{padding:0}
.pr-intro{
  max-width:800px;margin:0 auto;text-align:center;
  padding:clamp(90px,13vh,150px) 0 clamp(30px,5vh,54px);
}
.pr-intro .kicker{margin-top:0}
.pr-intro .h2{margin:14px auto 0;max-width:640px}
.pr-intro p{margin:20px auto 0;max-width:640px;font-size:17px;line-height:1.65;color:var(--ink-soft)}
.pr-rows{margin-top:0;display:flex;flex-direction:column;gap:0}
.pr-row{
  position:relative;
  min-height:min(100svh,1040px);
  display:grid;gap:clamp(36px,5vw,84px);align-items:center;
  padding-block:clamp(70px,10vh,128px);
  box-sizing:border-box;
}
.pr-row + .pr-row{border-top:1px solid var(--border-soft)}
@media(min-width:1024px){
  .pr-row{grid-template-columns:minmax(0,1fr) minmax(0,1.06fr)}
  .pr-row.rev .pr-shot{order:2}
}
.pr-shot-inner{
  border-radius:22px;padding:clamp(10px,1.4vw,18px);
  box-shadow:0 30px 70px -34px rgba(10,37,64,.35),0 0 0 1px var(--border);
}
.pr-shot-inner .mock{height:clamp(340px,42vh,470px)}
.pr-text{max-width:560px}
.pr-text h3{font-size:clamp(27px,3vw,38px);line-height:1.12;letter-spacing:-.045em}
/* numérotation discrète des chapitres */
.pr-rows{counter-reset:pr}
.pr-row{counter-increment:pr}
.pr-text h3::before{
  content:"0" counter(pr);
  display:inline-block;vertical-align:middle;margin-right:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;font-weight:700;color:var(--violet);
  letter-spacing:.06em;transform:translateY(-4px);
}
@media(max-width:1023px){
  .pr-row{min-height:auto}
}

/* ============ FIDUCIAIRES — un seul espace, grille propre ============ */
.fid{padding-block:clamp(110px,15vh,170px)}
.fid .wrap{position:relative;z-index:2}
.fid-grid{align-items:center;gap:clamp(40px,5vw,72px)}
.fid-left .fid-eyebrow{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:20px}
.fid-left .kick{margin-bottom:0}
.fid-chip{
  font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--ink);
  background:#fff;border-radius:999px;padding:5px 14px;
  box-shadow:0 8px 20px -12px rgba(0,0,0,.5);
}
.fid-left h2{font-size:clamp(32px,3.6vw,46px);line-height:1.06;max-width:640px}
.fid-left .sub{max-width:560px}
.fid-roles{display:flex;flex-direction:column;gap:10px;margin:26px 0 6px;max-width:560px}
.fid-roles .role{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-size:14.5px;line-height:1.5;color:#a9bbd2;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:12px;padding:12px 14px;
}
.fid-roles b{color:#fff;font-weight:650;font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;flex:none}
.fid-roles i{font-style:normal}
.fid-cards{display:grid;gap:14px}
@media(min-width:560px){.fid-cards{grid-template-columns:1fr 1fr}}
.fid-card{
  border-radius:16px;background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.1);
  padding:22px 20px;min-height:148px;box-sizing:border-box;
  display:flex;flex-direction:column;justify-content:flex-start;
  transition:background .15s,border-color .15s,transform .15s;
}
.fid-card:hover{background:rgba(255,255,255,.09)}
.fid-card>svg{width:24px;height:24px;color:var(--cyan);margin-bottom:14px;flex:none}
.fid-card .t{font-weight:650;font-size:15.5px;display:flex;align-items:center;gap:8px}
.fid-card .x{margin-top:6px;font-size:13.5px;line-height:1.45;color:#a9bbd2}
.fid-card .t .isv-soon{margin-left:auto}
.fid .more{margin-top:26px}
@media(max-width:760px){
  .fid-cards{grid-template-columns:1fr}
  .fid-card{min-height:0}
}

/* ancres propres avec le header fixe */
#produit,.eco,#ia,#conformite,#fiduciaires,#independants,#faq{scroll-margin-top:76px}

@media(prefers-reduced-motion:reduce){
  .hero h1 .mark::after,.hf{animation:none}
}
/* ═══════════════════════════════════════════════════════════════════════
   GO LYNK — REFONTE ACCUEIL (v4)
   • Héro deux colonnes façon template : texte à gauche, image à droite.
   • Nettoyage : textes supprimés, sous-titres « services » masqués.
   Le fond coloré du héro n'est pas touché.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Héro : grille 2 colonnes (texte / visuel) ── */
.hero .hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(40px,6vw,88px);
  align-items:center;
  max-width:1280px;
  margin:0 auto;
  padding-top:clamp(18px,4vh,40px);
  padding-bottom:clamp(150px,19vh,210px);
}
.hero .hero-copy{text-align:left}
.hero h1{
  font-size:clamp(38px,5vw,60px);
  font-weight:650;
  line-height:1.04;
  letter-spacing:-.05em;
  margin-left:0;margin-right:0;
}
.hero .lead{margin:24px 0 0;max-width:540px;text-align:left;font-size:18px;line-height:1.65}
.hero .hero-cta{margin:32px 0 0;justify-content:flex-start}

/* ── Colonne visuel : image fournie par l'équipe ── */
.hero-art{position:relative;margin:0}
.hero-art img{
  display:block;width:100%;height:auto;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 34px 80px -32px rgba(10,37,64,.5),0 4px 14px rgba(10,37,64,.06);
}
/* tant que landing-page-picture-1.png n'est pas à côté d'index.html */
/* — sous 1000 px : empilé, texte puis image — */
@media(max-width:1000px){
  .hero .hero-grid{grid-template-columns:minmax(0,1fr);gap:40px;padding-bottom:clamp(120px,16vh,170px)}
  .hero h1{font-size:clamp(36px,9vw,52px)}
  .hero-art{max-width:640px;margin:0 auto;width:100%}
}

/* sections dont le petit titre a été retiré : on ré-équilibre les en-têtes */
.eco>.wrap{margin-top:0}
.eco-head+.eco-grid{margin-top:0}
.pr-intro{text-align:center}
@media(min-width:1024px){
  .comp-head .h2{margin-top:2px}
}
/* ═══════════════════════════════════════════════════════════════════════
   GO LYNK — ACCUEIL (v5)
   • Héro « template » : texte à gauche, image fournie à droite (fond intact).
   • Section écosystème : épinglée, les 8 services se succèdent au scroll.
   • Section tarifs supprimée (HTML).
   ═══════════════════════════════════════════════════════════════════════ */

/* ============================ HÉRO (v5) ============================ */
.hero .hero-grid{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(44px,6vw,96px);
  align-items:center;
  max-width:1280px;
  width:100%;
  margin:0 auto;
  padding:30px 24px clamp(90px,11vh,150px);
}
.hero .hero-copy{width:100%;min-width:0;max-width:640px;margin:0}
.hero h1{
  font-size:clamp(40px,5.1vw,64px);
  line-height:1.04;
  letter-spacing:-.05em;
  max-width:660px;
}
.hero .lead{margin:24px 0 0;max-width:560px}
.hero .hero-cta{margin:34px 0 0;gap:14px}

/* boutons façon template : primaire sombre + secondaire discret */
.btn-hero{
  height:52px;padding:0 26px;font-size:16px;font-weight:600;
  border-radius:999px;background:var(--ink);color:#fff;gap:10px;
  box-shadow:0 14px 28px -14px rgba(10,37,64,.45);
  transition:transform .16s ease,background .16s ease,box-shadow .16s ease;
}
.btn-hero:hover{background:#1c3553;box-shadow:0 18px 34px -16px rgba(10,37,64,.5)}
.btn-hero .arr{width:17px;height:17px}
.btn-heroghost{
  height:52px;padding:0 24px;font-size:15.5px;font-weight:600;color:var(--ink);
  border-radius:999px;background:rgba(255,255,255,.6);
  box-shadow:inset 0 0 0 1.5px rgba(10,37,64,.16);
  transition:background .16s ease,box-shadow .16s ease;
}
.btn-heroghost:hover{background:#fff;box-shadow:inset 0 0 0 1.5px rgba(10,37,64,.3)}

/* visuel à droite (image fournie : landing-page-picture-1.png) */
.hero-art{align-self:center;width:100%;max-width:640px;margin:0}
.hero-art img{
  display:block;width:100%;height:auto;border-radius:22px;
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 40px 90px -34px rgba(10,37,64,.5),0 6px 18px rgba(10,37,64,.06);
}
@media(max-width:1000px){
  .hero .hero-grid{grid-template-columns:minmax(0,1fr);gap:34px;padding-bottom:clamp(90px,12vh,140px)}
  .hero h1{font-size:clamp(36px,9vw,54px)}
  .hero-art{max-width:600px;margin:8px auto 0}
  .hero .btn-hero,.hero .btn-heroghost{height:48px;font-size:15px}
}

/* ================== ÉCOSYSTÈME — 8 services au scroll ================== */
.eco{background:var(--bg);padding:0;overflow:visible}
.eco-pin{
  position:sticky;top:0;
  height:100svh;min-height:620px;
  display:flex;flex-direction:column;justify-content:center;
  box-sizing:border-box;
  padding:calc(var(--nav-h,60px) + 12px) 0 40px;
}
.eco-pin .eco-grid{width:100%;align-items:center}
.eco-pin .eco-diagram{width:min(500px,44vw,calc(100svh - 150px));max-width:540px}
.eco-pin .eco-info{max-width:440px;min-height:0}
.eco-bigic{display:none}
.eco-info{transition:opacity .22s ease}
.eco-info.eco-fading{opacity:0}

/* distance de défilement : chaque service ≈ 44vh */
.eco-travel{height:calc(8 * 44vh)}

/* tablette / mobile : MÊME ÉPINGLAGE que sur PC — arrivée sur l'écosystème,
   la page se fige et les 8 services se succèdent pendant le défilement.
   Sans radial (trop étroit < 1000 px) : une grande icône de l'étape + son
   texte, centrés sur l'écran. */
@media(max-width:999px){
  .eco-pin{position:sticky;top:0;height:100svh;min-height:460px;
    display:flex;flex-direction:column;justify-content:center;
    box-sizing:border-box;
    padding:calc(var(--nav-h,60px) + 10px) 22px 34px}
  .eco-pin .eco-grid{grid-template-columns:minmax(0,1fr);gap:0;width:100%;max-width:440px;margin:0 auto}
  .eco-pin .eco-diagram{display:none}
  .eco-pin .eco-info{max-width:440px;width:100%;margin:0 auto;text-align:left}
  .eco-bigic{display:flex;width:62px;height:62px;border-radius:18px;flex:none;
    align-items:center;justify-content:center;margin:0 0 18px}
  .eco-bigic svg{width:30px;height:30px}
  .eco-pin .eco-info h3{font-size:clamp(23px,6.6vw,30px);max-width:440px}
  .eco-pin .eco-info p{font-size:15px;max-width:440px}
  .eco-travel{height:calc(8 * 46vh)}
}
/* très petits écrans hauteur (raccourcis navigateurs) : on dé-épingle */
@media(max-height:640px) and (min-width:1000px){
  .eco-pin{position:static;height:auto;min-height:0;padding:70px 0 80px}
  .eco-travel{display:none}
}

/* ══════════ ISV — cartes de la colonne gauche SANS FOND sur grand écran ══════════
   Sur PC (>= 1024 px), les 4 blocs de gauche (« QR-factures suisses en 30 secondes »…)
   perdent leur fond de carte : le texte respire directement sur le fond blanc de la
   section. Sur mobile et tablette (< 1024 px) le fond de carte est CONSERVÉ — les
   règles de base ci-dessus continuent de s'appliquer. La colonne de droite (visuel)
   garde son propre habillage. */
@media(min-width:1024px){
  .isv-left .isv-block{background:transparent;box-shadow:none;padding:0 0 46px;border-radius:0}
  .isv-left .isv-block:not(:last-child){margin-bottom:0}
  .isv-left .isv-numline{margin-bottom:20px}
}

/* ══════════ HÉRO — les 2 CTA strictement identiques (PC & mobile) ══════════
   Même hauteur, même graisse de texte, même padding ET même largeur : les deux
   boutons « Créer mon espace gratuit » / « Découvrir le logiciel » partagent la
   largeur disponible (flex:1 1 0) → ils ont exactement la même taille. */
.hero .hero-cta{
  display:flex;flex-wrap:wrap;align-items:stretch;
  gap:12px;width:100%;max-width:560px;
}
.hero .hero-cta .btn-hero,
.hero .hero-cta .btn-heroghost{
  flex:1 1 0;min-width:min(220px,100%);
  width:100%;max-width:none;box-sizing:border-box;
  height:52px;padding:0 20px;
  font-size:16px;justify-content:center;white-space:nowrap;
}
@media(max-width:640px){
  .hero .hero-cta{flex-direction:column}
  .hero .hero-cta .btn-hero,
  .hero .hero-cta .btn-heroghost{flex:none;min-width:0;width:100%;height:50px}
}
@media(max-width:1000px){
  .hero .hero-cta .btn-hero,
  .hero .hero-cta .btn-heroghost{height:50px;font-size:15px;padding:0 16px}
}

/* ══════════ FAQ — section pleine hauteur d'écran ══════════
   La zone FAQ occupe au minimum TOUT le viewport : en arrivant dessus au
   défilement, elle remplit l'écran (contenu centré verticalement) avant le
   pied de page. `min-height` et non `height` : si le contenu dépasse un
   écran (mobile, réponses ouvertes), la section grandit naturellement,
   rien n'est rogné. */
.hpf{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  box-sizing:border-box;
  padding:clamp(88px,13vh,150px) 0;
}
.hpf .wrap{width:100%}

/* ══════════ HERO-ART (v7) — grande capture « pleine colonne » façon Lemon Squeezy ══════════
   L'image est la pièce maîtresse du hero : elle occupe la quasi-totalité de la
   moitié droite (≈60 %) et descend plus bas que la colonne de texte, comme une
   capture produit pleine page. Pas de cadre ni de fond qui la « surélève » :
   aucun border, coins légèrement arrondis et une ombre uniquement portée au
   sol, douce et diffuse, pour qu'elle semble posée sur le fond du hero. */
@media(min-width:1000px){
  .hero .hero-grid{
    grid-template-columns:minmax(0,40fr) minmax(0,60fr);
    gap:clamp(40px,5vw,80px);
    max-width:1360px;
    padding:26px 24px clamp(8px,1.5vh,20px);
  }
  .hero .hero-copy{max-width:600px;padding-bottom:clamp(30px,5vh,70px)}
  .hero .hero-copy h1{font-size:clamp(40px,4.6vw,60px)}
  .hero-art{max-width:none;width:100%;margin:0 0 -6px;align-self:end}
  /* AUCUNE ombre, AUCUN fond, AUCUN relief : la capture transparente est posée
     à plat, directement sur le fond du hero. */
  .hero-art img{display:block;width:100%;height:auto;border-radius:0;border:0;box-shadow:none;background:none}
}
@media(max-width:999px){
  .hero .hero-grid{grid-template-columns:minmax(0,1fr);gap:26px;padding:14px 20px clamp(20px,4vh,44px)}
  .hero .hero-copy{padding-bottom:0}
  .hero-art{max-width:none;width:100%;margin:0 auto;align-self:auto}
  .hero-art img{width:100%;height:auto;border-radius:0;border:0;box-shadow:none;background:none}
}

/* ══════════ v10 — HERO : tablette plus grande + centrée en hauteur ══════════
   La colonne visuelle passe à 62 % et l'image est centrée verticalement dans
   l'écran du hero (milieu en hauteur), toujours à plat, sans ombre ni relief. */
@media(min-width:1000px){
  .hero .hero-grid{
    grid-template-columns:minmax(0,38fr) minmax(0,62fr);
    gap:clamp(36px,4.5vw,70px);
    max-width:1400px;
    align-items:center;
    padding:clamp(16px,2vh,24px) 28px 0;
  }
  .hero .hero-copy{max-width:620px;padding-bottom:0}
  .hero .hero-copy h1{font-size:clamp(38px,4.3vw,56px)}
  .hero-art{width:100%;margin:0;align-self:center}
  .hero-art img{display:block;width:100%;height:auto}
}

/* ══════════ v10 — FIDUCIAIRES : la grille de cases devient une image ══════════
   Remplace les 4 cartes « Mandants illimités / Journal / Échéances / IA » par la
   capture fournie. Intégration à plat comme l'image du hero : pas de cadre ni
   d'ombre portée, coins légèrement arrondis. */
.fid-visual{margin:0;line-height:0}
.fid-visual img{
  display:block;width:100%;height:auto;
  border:0;border-radius:18px;box-shadow:none;background:none;
}
@media(max-width:1023px){
  .fid-visual{max-width:620px}
  .fid .fid-visual{margin-inline:auto}
}

/* ══════════ v10 — PRODUIT : visuels remplacés par de vraies captures ══════════
   Chapitres « Créer une vente » et « CRM » : l'ancien KPI/mock est remplacé par
   l'image fournie (même langage visuel que le hero, sans relief superflu). */
.pr-shot.pr-img{margin:0}
.pr-shot.pr-img img{
  display:block;width:100%;height:auto;
  border:0;border-radius:16px;box-shadow:none;background:none;object-fit:contain;
}
.pr-shot.pr-img.tall{
  display:flex;justify-content:center;align-items:center;
}
.pr-shot.pr-img.tall img{
  width:auto;max-width:100%;
  max-height:clamp(380px,66vh,720px);
}

/* centrage vertical réel : la zone utile commence sous le header (60px),
   on remonte le contenu pour équilibrer les blancs au-dessus/en dessous. */
.hero.hero-full{padding-top:60px}

/* finition : recentrage de ±9px pour égaliser les marges autour de la tablette */

@media(min-width:1000px){.hero .hero-art{transform:translateY(-64px)}}

/* calage fin selon largeur : le bas de la tablette suit la ligne « …votre activité »
   (mesuré sur 1024→1920 ; l'écart restant reste < 4px dans chaque palier) */
@media(min-width:1340px){.hero .hero-art{transform:translateY(-64px)}}
@media(min-width:1260px) and (max-width:1339px){.hero .hero-art{transform:translateY(-78px)}}
@media(min-width:1100px) and (max-width:1259px){.hero .hero-art{transform:translateY(-70px)}}
@media(min-width:1024px) and (max-width:1099px){.hero .hero-art{transform:translateY(-50px)}}


/* ══════════ v13 — OMBRE « immersion » sous les visuels ══════════
   On utilise filter:drop-shadow (et non box-shadow) : l'ombre suit la forme
   réelle des pixels opaques de chaque capture. Les PNG ont des coins/marges
   transparents ; une box-shadow dessinerait un rectangle en relief — c'est ce
   relief qu'on avait supprimé. drop-shadow donne l'effet « l'image repose sur
   la page », avec un léger adouci vers le bas. */
.hero-art img{
  filter:drop-shadow(0 24px 32px rgba(10,37,64,.20)) drop-shadow(0 6px 12px rgba(10,37,64,.07));
}
.pr-shot.pr-img img{
  filter:drop-shadow(0 30px 40px rgba(10,37,64,.20)) drop-shadow(0 8px 16px rgba(10,37,64,.07));
}
.fid-visual img{
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.38)) drop-shadow(0 8px 14px rgba(0,0,0,.18));
}