/* corsala.com : pages de contenu (usine de pages). Fichier produit par scripts/site/build-pages.mjs, ne pas modifier à la main. */
  :root{
    --bg:#FAFAF9; --bg-2:#F2F1F0; --card:#FFFEFD; --ink:#111013; --ink-2:#57555A; --ink-3:#8D8B90; --line:#E6E4E3;
    --brand:#2B3BFF; --brand-ink:#2331D9; --brand-soft:#E7E9FF; --cta:#2B3BFF; --cta-hi:#1F2DE6; --on-cta:#FFFEFD;
    --ok:#1E8E5A; --warn:#B7700D; --bad:#C62642;
    --accent:var(--brand-ink); --ink-soft:var(--ink-2); --surface:var(--card); --surface-2:var(--bg-2);
    --sh-1:0 1px 2px rgba(17,16,19,.04),0 10px 30px -14px rgba(17,16,19,.14);
    --sh-2:0 2px 8px rgba(17,16,19,.05),0 40px 80px -36px rgba(17,16,19,.28);
    --r-xl:32px; --r-lg:24px; --r-md:16px; --r-sm:12px;
    --ease:cubic-bezier(.16,1,.3,1);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#0C0C0E; --bg-2:#141417; --card:#18181C; --ink:#F5F4F2; --ink-2:#A9A7AC; --ink-3:#77757A; --line:#29282D;
      --brand:#6B78FF; --brand-ink:#8B95FF; --brand-soft:#1A1D45; --cta:#4D5BFF; --cta-hi:#5F6CFF; --on-cta:#FFFEFD;
      --ok:#4FD08E; --warn:#F0B04B; --bad:#FF6B7D;
      --sh-1:0 1px 2px rgba(0,0,0,.4),0 10px 30px -14px rgba(0,0,0,.6);
      --sh-2:0 2px 8px rgba(0,0,0,.4),0 40px 80px -36px rgba(0,0,0,.8);
    }
  }
  :root[data-theme="dark"]{
    --bg:#0C0C0E; --bg-2:#141417; --card:#18181C; --ink:#F5F4F2; --ink-2:#A9A7AC; --ink-3:#77757A; --line:#29282D;
    --brand:#6B78FF; --brand-ink:#8B95FF; --brand-soft:#1A1D45; --cta:#4D5BFF; --cta-hi:#5F6CFF; --on-cta:#FFFEFD;
    --ok:#4FD08E; --warn:#F0B04B; --bad:#FF6B7D;
    --sh-1:0 1px 2px rgba(0,0,0,.4),0 10px 30px -14px rgba(0,0,0,.6);
    --sh-2:0 2px 8px rgba(0,0,0,.4),0 40px 80px -36px rgba(0,0,0,.8);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0; background:var(--bg); color:var(--ink); font-family:'Geist',ui-sans-serif,-apple-system,system-ui,sans-serif; font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased;}
  h1,h2,h3,h4{margin:0; text-wrap:balance; letter-spacing:-.035em;}
  p{margin:0;}
  a{color:inherit;}
  button{font-family:inherit;}
  :focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:8px;}
  ::selection{background:var(--brand-soft); color:var(--ink);}
  .num{font-variant-numeric:tabular-nums;}
  .sheet{max-width:1180px; margin:0 auto; padding:0 clamp(20px,4vw,40px);}
  section{padding:clamp(72px,10vw,140px) 0;}
  .center{text-align:center;}
  .gray{color:var(--ink-3);}

  .kicker{font-size:15px; font-weight:600; color:var(--brand-ink); margin-bottom:14px; letter-spacing:-.01em;}
  .h-sec{font-size:clamp(34px,5vw,64px); font-weight:700; line-height:1.02;}
  .h-sec .gray{color:var(--ink-3);}
  .sub{font-size:clamp(17px,1.6vw,21px); color:var(--ink-2); max-width:58ch; margin-top:18px; line-height:1.5;}
  .center .sub{margin-left:auto; margin-right:auto;}

  /* NAV */
  nav.top{position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--bg) 78%,transparent); backdrop-filter:saturate(1.6) blur(18px); -webkit-backdrop-filter:saturate(1.6) blur(18px); border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);}
  .top-row{display:flex; align-items:center; justify-content:space-between; gap:20px; height:60px;}
  .lockup{display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink);}
  .lockup .wm{font-size:21px; font-weight:700; letter-spacing:-.045em; line-height:1;}
  .top-links{display:flex; gap:28px; font-size:14px; color:var(--ink-2);}
  .top-links a{text-decoration:none; transition:color .2s;}
  .top-links a:hover{color:var(--ink);}
  @media (max-width:900px){ .top-links{display:none;} }

  .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 24px; border-radius:999px; font-size:15px; font-weight:600; text-decoration:none; cursor:pointer; border:1px solid transparent; transition:transform .5s var(--ease), background-color .3s var(--ease), box-shadow .5s var(--ease), border-color .3s var(--ease), color .3s;}
  .btn:hover{transform:translateY(-2px);}
  .btn:active{transform:translateY(0) scale(.97); transition-duration:.15s;}
  .btn-ink{background:var(--ink); color:var(--bg); box-shadow:var(--sh-1);}
  .btn-brand{background:var(--cta); color:var(--on-cta); box-shadow:var(--sh-1); position:relative; overflow:hidden; isolation:isolate;}
  .btn-brand:hover{background:var(--cta-hi); box-shadow:0 2px 6px rgba(17,16,19,.06), 0 16px 34px -14px color-mix(in srgb,var(--cta) 75%,transparent);}
  .btn-soft{background:var(--card); color:var(--ink); border-color:var(--line);}
  .btn-sm{min-height:36px; padding:0 16px; font-size:13.5px;}
  .btn svg{width:16px; height:16px; transition:transform .35s var(--ease);}
  .btn:hover svg{transform:translateX(3px);}

  /* MARK */
  .mark .heart{transform-box:fill-box; transform-origin:center; animation:beat 2.6s var(--ease) infinite;}
  @keyframes beat{0%,62%,100%{transform:scale(1);} 70%{transform:scale(1.22);} 78%{transform:scale(1);} 86%{transform:scale(1.14);} }

  /* HERO */
  .hero{padding-top:clamp(56px,9vw,120px); padding-bottom:clamp(40px,6vw,80px); position:relative; overflow:hidden;}
  .pill-new{display:inline-flex; align-items:center; gap:10px; padding:6px 8px 6px 14px; border-radius:999px; background:var(--card); border:1px solid var(--line); font-size:13.5px; color:var(--ink-2); box-shadow:var(--sh-1); text-decoration:none;}
  .pill-new b{color:var(--ink); font-weight:600;}
  .pill-new span.t{background:var(--brand-soft); color:var(--brand-ink); font-weight:600; border-radius:999px; padding:2px 10px; font-size:12.5px;}
  .hero h1{font-size:clamp(46px,8vw,112px); font-weight:700; letter-spacing:-.05em; line-height:.96; margin-top:26px;}
  .hero h1 .gray{color:var(--ink-3);}
  .hero .sub{margin-top:26px;}
  .hero-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:34px;}
  .sig{margin-top:22px; font-size:15px; font-weight:600; color:var(--ink-2); letter-spacing:-.01em;}
  .sig b{color:var(--brand-ink);}

  .stage{position:relative; margin-top:clamp(44px,6vw,72px);}
  .glow{position:absolute; inset:8% 14% auto; height:70%; background:radial-gradient(closest-side,color-mix(in srgb,var(--brand) 26%,transparent),transparent); filter:blur(40px); animation:drift 12s ease-in-out infinite alternate; pointer-events:none;}
  @keyframes drift{from{transform:translate(-4%,0) scale(1);} to{transform:translate(4%,4%) scale(1.08);}}
  .scene-card{position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--sh-2); padding:clamp(16px,2.4vw,28px);}
  .scene{position:relative; aspect-ratio:16/8.4; border-radius:var(--r-lg); background:radial-gradient(120% 90% at 50% 50%, var(--bg) 0%, var(--bg-2) 100%);}
  .table{position:absolute; left:27%; right:27%; top:31%; bottom:31%; border-radius:999px; background:var(--card); border:1px solid var(--line); box-shadow:var(--sh-1); display:grid; place-items:center;}
  .dossier{display:flex; align-items:center; gap:12px; padding:10px 16px 10px 12px; border-radius:18px; background:var(--bg); border:1px solid var(--line);}
  .dossier .ic{width:38px; height:38px; border-radius:12px; background:var(--brand-soft); color:var(--brand-ink); display:grid; place-items:center;}
  .dossier .ic svg{width:20px; height:20px;}
  .dossier b{display:block; font-size:15px; letter-spacing:-.02em;}
  .dossier small{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-2);}
  .live{width:7px; height:7px; border-radius:50%; background:var(--ok); position:relative; flex:none;}
  .live::after{content:""; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid var(--ok); animation:ping 2.6s var(--ease) -1s infinite;}
  @keyframes ping{0%{transform:scale(.5); opacity:1;} 80%,100%{transform:scale(1.8); opacity:0;}}
  .seat{position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:8px; animation:seatIn .9s var(--ease) both;}
  .seat .av{width:clamp(40px,5vw,56px); height:clamp(40px,5vw,56px); border-radius:50%; background:var(--card); border:1px solid var(--line); box-shadow:var(--sh-1); display:grid; place-items:center; color:var(--ink); transition:box-shadow .5s var(--ease), transform .5s var(--ease), color .3s;}
  .seat .av svg{width:46%; height:46%;}
  .seat .nm{font-size:12.5px; font-weight:600; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:3px 10px; white-space:nowrap; color:var(--ink-2); transition:color .3s, border-color .3s;}
  .seat.on .av{transform:scale(1.08); color:var(--brand-ink); box-shadow:0 0 0 4px var(--brand-soft), 0 0 0 5px color-mix(in srgb,var(--brand) 55%,transparent), var(--sh-1);}
  .seat.on .nm{color:var(--ink); border-color:color-mix(in srgb,var(--brand) 45%,var(--line));}
  @keyframes seatIn{from{opacity:0; transform:translate(-50%,-38%) scale(.9);} to{opacity:1; transform:translate(-50%,-50%);}}
  .s0{left:38%; top:15%;} .s1{left:62%; top:15%;} .s2{left:12%; top:50%;} .s3{left:88%; top:50%;} .s4{left:38%; top:85%;} .s5{left:62%; top:85%;}
  .ticker{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:16px; min-height:26px; font-size:14px; color:var(--ink-2);}
  .ticker b{color:var(--ink); font-weight:600;}
  .ticker .msg{animation:tick .6s var(--ease) both;}
  @keyframes tick{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
  @media (max-width:640px){
    .scene{aspect-ratio:4/5;}
    .table{left:22%; right:22%; top:38%; bottom:38%;}
    .dossier{padding:8px 10px;} .dossier .ic{display:none;}
    .s0{left:28%; top:13%;} .s1{left:72%; top:13%;} .s2{left:18%; top:50%;} .s3{left:82%; top:50%;} .s4{left:28%; top:87%;} .s5{left:72%; top:87%;}
    .s2 .nm, .s3 .nm{display:none;}
  }

  .facts{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:28px;}
  @media (max-width:760px){ .facts{grid-template-columns:1fr 1fr;} }
  .fact{background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:16px 18px;}
  .fact b{display:block; font-size:26px; font-weight:700; letter-spacing:-.04em; line-height:1.1;}
  .fact span{font-size:13.5px; color:var(--ink-2);}

  /* REVEAL : voir MOUVEMENT en fin de feuille (le contenu reste visible sans JS et avec moins d'animations) */

  /* BENTO */
  .bento{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:44px;}
  @media (max-width:900px){ .bento{grid-template-columns:1fr 1fr;} }
  @media (max-width:560px){ .bento{grid-template-columns:1fr;} }
  .card{position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; overflow:hidden; transition:transform .5s var(--ease), box-shadow .5s var(--ease);}
  .card:hover{transform:translateY(-3px); box-shadow:var(--sh-2);}
  .card::before{content:""; position:absolute; inset:0; background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), color-mix(in srgb,var(--brand) 11%,transparent), transparent 60%); opacity:0; transition:opacity .4s; pointer-events:none;}
  .card:hover::before{opacity:1;}
  .card .n{font-size:24px; font-weight:700; letter-spacing:-.035em;}
  .card .d{font-size:15px; color:var(--ink-2); margin-top:8px;}
  .card .l{display:flex; flex-wrap:wrap; gap:6px; margin-top:18px;}
  .chip{display:inline-flex; align-items:center; font-size:12.5px; font-weight:500; color:var(--ink-2); background:var(--bg-2); border-radius:999px; padding:4px 11px;}

  /* SEGMENTED */
  .seg-wrap{display:flex; justify-content:center; margin-top:36px; overflow-x:auto; scrollbar-width:none; padding:4px;}
  .seg-wrap::-webkit-scrollbar{display:none;}
  .seg{position:relative; display:inline-flex; gap:2px; padding:4px; border-radius:999px; background:var(--bg-2); border:1px solid var(--line);}
  .seg button{position:relative; z-index:1; border:none; background:none; cursor:pointer; padding:0 18px; min-height:40px; border-radius:999px; font-size:14px; font-weight:600; color:var(--ink-2); white-space:nowrap; transition:color .3s;}
  .seg button[aria-selected="true"]{color:var(--ink);}
  .seg .ind{position:absolute; top:4px; bottom:4px; border-radius:999px; background:var(--card); box-shadow:var(--sh-1); transition:left .5s var(--ease), width .5s var(--ease);}

  .role{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(24px,4vw,48px); margin-top:40px; align-items:start;}
  @media (max-width:960px){ .role{grid-template-columns:1fr;} }
  .role-panel{animation:tick .55s var(--ease) both;}
  .role h3{font-size:clamp(26px,3vw,36px); font-weight:700;}
  .role .tag{color:var(--ink-2); margin-top:10px; font-size:17px;}
  .flist{list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:8px;}
  .flist li{background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:13px 16px; font-size:15px; display:flex; flex-direction:column; gap:6px; align-items:flex-start;}
  .flist .chip{background:var(--brand-soft); color:var(--brand-ink);}

  /* SHOT */
  .shot{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-2);}
  .shot-chrome{display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line);}
  .shot-dots{display:flex; gap:6px;}
  .shot-dots i{width:10px; height:10px; border-radius:50%; background:var(--line); display:block;}
  .shot-url{font-size:12px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:var(--bg-2); border-radius:999px; padding:3px 12px;}
  .shot-stage{aspect-ratio:16/10; display:grid; place-items:center; text-align:center; padding:24px; background:radial-gradient(90% 90% at 50% 40%, var(--bg), var(--bg-2));}
  .shot-label{background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:16px 20px; max-width:84%; box-shadow:var(--sh-1);}
  .shot-label .k{font-size:12px; font-weight:600; color:var(--brand-ink);}
  .shot-label .t{font-size:15px; font-weight:600; margin-top:4px; letter-spacing:-.01em;}
  .shot-label .s{font-size:13px; color:var(--ink-2); margin-top:3px;}

  /* SITUATIONS (markup repris) */
  .feat{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:center;}
  .feat + .feat{margin-top:clamp(72px,10vw,140px);}
  .feat.flip > div:first-child{order:2;}
  @media (max-width:960px){ .feat{grid-template-columns:1fr;} .feat.flip > div:first-child{order:0;} }
  .feat h3{font-size:clamp(28px,3.6vw,46px); font-weight:700; line-height:1.04; max-width:18ch;}
  .feat .scen{margin-top:18px; color:var(--ink-2); font-size:17px; max-width:50ch;}
  .feat .scen b{color:var(--ink); font-weight:600;}
  .proofs{display:flex; flex-wrap:wrap; gap:6px; margin-top:22px;}
  .proof{font-size:12.5px; font-weight:500; background:var(--bg-2); color:var(--ink-2); border-radius:999px; padding:5px 12px;}
  .ui{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; box-shadow:var(--sh-1);}
  .ui + .ui{margin-top:14px;}
  .ui-h{font-size:13px; font-weight:600; color:var(--ink-3); margin-bottom:10px; letter-spacing:-.005em;}
  .line{display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--line); font-size:14px;}
  .line:first-of-type{border-top:none;}
  .pill{font-size:11.5px; font-weight:600; padding:3px 10px; border-radius:999px; white-space:nowrap;}
  .p-ok{background:color-mix(in srgb,var(--ok) 13%,transparent); color:var(--ok);}
  .p-warn{background:color-mix(in srgb,var(--warn) 14%,transparent); color:var(--warn);}
  .p-dan{background:color-mix(in srgb,var(--bad) 12%,transparent); color:var(--bad);}
  .p-gold{background:var(--brand-soft); color:var(--brand-ink);}
  .p-mute{background:var(--bg-2); color:var(--ink-2);}
  .qnorm{font-size:13px; color:var(--ink-2); background:var(--bg-2); border-radius:var(--r-sm); padding:12px 14px; margin-top:10px;}

  /* INVENTAIRE */
  .inv{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:44px;}
  @media (max-width:1000px){ .inv{grid-template-columns:1fr 1fr;} }
  @media (max-width:620px){ .inv{grid-template-columns:1fr;} }
  .inv .card h4{font-size:21px; font-weight:700;}
  .inv ul{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:12px;}
  .inv li{font-size:14px;}
  .inv li b{font-weight:600;}
  .inv li span{display:block; color:var(--ink-2); font-size:13px; margin-top:1px;}

  /* DARK BAND */
  .dark{background:#0E0D10; color:#F5F4F2; border-radius:var(--r-xl); padding:clamp(32px,5vw,64px); position:relative; overflow:hidden;}
  .dark .glow2{position:absolute; right:-10%; top:-30%; width:60%; height:120%; background:radial-gradient(closest-side, rgba(43,59,255,.45), transparent); filter:blur(30px); animation:drift 14s ease-in-out infinite alternate;}
  .dark .h-sec{color:#F5F4F2; position:relative;}
  .dark .soft{color:#A9A7AC;}
  .dark .kicker{color:#8B95FF;}
  .net{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,56px); align-items:center; position:relative;}
  @media (max-width:900px){ .net{grid-template-columns:1fr;} }
  .stats{display:flex; gap:clamp(20px,4vw,40px); flex-wrap:wrap; margin-top:30px;}
  .stats b{display:block; font-size:clamp(34px,4vw,48px); font-weight:700; letter-spacing:-.045em; color:#8B95FF; line-height:1;}
  .stats span{font-size:13.5px; color:#A9A7AC;}
  .casc{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:var(--r-lg); overflow:hidden;}
  .casc div{display:flex; align-items:center; gap:12px; padding:15px 18px; font-size:14.5px;}
  .casc div + div{border-top:1px solid rgba(255,255,255,.08);}
  .casc .r{margin-left:auto; color:#8B95FF; font-size:13px;}
  .dark .pill{background:rgba(255,255,255,.1); color:#F5F4F2;}

  /* TARIFS */
  .tiers{display:grid; grid-template-columns:1.15fr 1fr; gap:14px; margin-top:36px; align-items:stretch;}
  @media (max-width:900px){ .tiers{grid-template-columns:1fr;} }
  .t-main{background:var(--ink); color:var(--bg); border-radius:var(--r-xl); padding:clamp(26px,3.6vw,40px); display:flex; flex-direction:column; gap:14px; box-shadow:var(--sh-2); animation:tick .55s var(--ease) both;}
  .t-main .n{font-size:14px; font-weight:600; opacity:.7;}
  .t-main .p{font-size:clamp(46px,6vw,72px); font-weight:700; letter-spacing:-.05em; line-height:1;}
  .t-main .p small{font-size:17px; font-weight:500; letter-spacing:0; opacity:.65;}
  .t-main .d{font-size:16px; opacity:.8; max-width:40ch;}
  .t-main .chip{background:rgba(255,255,255,.12); color:inherit;}
  .t-side{display:flex; flex-direction:column; gap:14px;}
  .t-side .card{display:flex; flex-direction:column; gap:6px; flex:1; justify-content:center;}
  .t-side .rn{font-weight:700; font-size:16px;}
  .t-side .rd{font-size:14px; color:var(--ink-2);}
  .t-side .rp{font-size:28px; font-weight:700; letter-spacing:-.04em;}
  .t-side .rp small{font-size:14px; font-weight:500; color:var(--ink-3); letter-spacing:0;}
  .addons{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; justify-content:center;}
  .addon{background:var(--card); border:1px solid var(--line); border-radius:999px; padding:8px 16px; font-size:13.5px; color:var(--ink-2);}
  .addon b{color:var(--ink); font-weight:600;}

  /* ÉQUIVALENCES */
  .eq-card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(8px,1.6vw,18px) clamp(16px,2.6vw,32px); margin-top:40px; overflow-x:auto;}
  table.eq{width:100%; border-collapse:collapse; font-size:15px; min-width:640px;}
  table.eq th{text-align:left; font-size:13px; font-weight:600; color:var(--ink-3); padding:16px 16px 12px 0;}
  table.eq td{padding:16px 16px 16px 0; border-top:1px solid var(--line); vertical-align:top;}
  table.eq td.tool{font-weight:600; white-space:nowrap;}
  .fine{margin-top:16px; font-size:13px; color:var(--ink-3); max-width:70ch;}

  /* FINAL */
  .final{text-align:center;}
  .final .h-sec{font-size:clamp(40px,6.4vw,88px); letter-spacing:-.05em;}

  footer{padding:56px 0 40px; border-top:1px solid var(--line);}
  .foot{display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:28px;}
  @media (max-width:780px){ .foot{grid-template-columns:1fr 1fr;} }
  .foot h4{font-size:13px; font-weight:600; color:var(--ink); margin:0 0 12px; letter-spacing:-.01em;}
  .foot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:14px;}
  .foot a{text-decoration:none; color:var(--ink-2); transition:color .2s;}
  .foot a:hover{color:var(--ink);}
  .foot-b{margin-top:40px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:13px; color:var(--ink-3);}
  .foot-legal{margin-top:10px; display:flex; flex-wrap:wrap; gap:6px 10px; font-size:12.5px; color:var(--ink-3);}
  .foot-legal a{text-decoration:none; color:var(--ink-3); transition:color .2s;}
  .foot-legal a:hover{color:var(--ink);}

  .up{animation:upIn 1s var(--ease) both;}
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation:none !important; transition:none !important;}
    html{scroll-behavior:auto;}
  }

  .role-tag{display:inline-flex; align-items:center; gap:8px; padding:6px 14px 6px 8px; border-radius:999px; background:var(--card); border:1px solid var(--line); font-size:13.5px; font-weight:600; color:var(--ink-2); box-shadow:var(--sh-1);}
  .role-tag .d{width:22px; height:22px; border-radius:50%; background:var(--brand-soft); color:var(--brand-ink); display:grid; place-items:center;}
  .role-tag .d svg{width:13px; height:13px;}
  .hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,64px); align-items:center; text-align:left;}
  @media (max-width:980px){ .hero-grid{grid-template-columns:1fr;} }
  .hero-grid h1{font-size:clamp(42px,6.2vw,84px); margin-top:22px;}
  .hero-grid .sub{margin-left:0;}
  .hero-grid .hero-cta{justify-content:flex-start;}
  .reassure{display:flex; align-items:center; gap:10px; margin-top:22px; font-size:14px; color:var(--ink-2);}
  .reassure svg{width:18px; height:18px; color:var(--brand-ink); flex:none;}
  .vis{position:relative;}
  .vis .glow{inset:4% 4% auto; height:80%;}
  .vis .ui{position:relative;}
  .phone{position:relative; width:min(330px,100%); margin:0 auto; border-radius:44px; padding:12px; background:var(--ink); box-shadow:var(--sh-2);}
  .phone .screen{border-radius:34px; background:var(--bg); padding:40px 14px 18px; min-height:560px; position:relative; overflow:hidden;}
  .phone .notch{position:absolute; top:12px; left:50%; transform:translateX(-50%); width:96px; height:26px; border-radius:999px; background:var(--ink);}
  .phone .ui{padding:14px;}
  .phone .line{font-size:13px;}

  .story{max-width:780px; margin:0 auto;}
  .story p{font-size:clamp(19px,1.9vw,23px); line-height:1.55; color:var(--ink-2); margin-top:22px; letter-spacing:-.01em;}
  .story p:first-of-type{color:var(--ink);}
  .takeaway{margin-top:34px; padding:22px 26px; border-radius:var(--r-lg); background:var(--brand-soft); color:var(--brand-ink); font-size:clamp(18px,1.8vw,21px); font-weight:600; letter-spacing:-.015em;}

  .ba{margin-top:44px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-1);}
  .ba-head{display:grid; grid-template-columns:1fr 1fr; font-size:13px; font-weight:600; color:var(--ink-3); border-bottom:1px solid var(--line);}
  .ba-head span{padding:16px 26px;}
  .ba-row{display:grid; grid-template-columns:1fr 1fr;}
  .ba-row + .ba-row{border-top:1px solid var(--line);}
  .ba-row div{padding:18px 26px; display:flex; gap:12px; align-items:flex-start; font-size:15.5px;}
  .ba-row .b{color:var(--ink-3);}
  .ba-row .a{color:var(--ink); font-weight:500; background:color-mix(in srgb,var(--brand-soft) 45%,transparent);}
  .ba-row svg{width:18px; height:18px; flex:none; margin-top:3px;}
  .ba-row .b svg{color:var(--ink-3);}
  .ba-row .a svg{color:var(--brand-ink);}
  @media (max-width:700px){ .ba-head{display:none;} .ba-row{grid-template-columns:1fr;} .ba-row .a{border-top:1px dashed var(--line);} }

  .repl{margin-top:40px; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px;}
  .repl .card .tool{font-size:13px; font-weight:600; color:var(--ink-3); text-decoration:line-through; text-decoration-color:color-mix(in srgb,var(--ink-3) 60%,transparent);}
  .repl .card .use{font-size:14px; color:var(--ink-2); margin-top:4px;}
  .repl .card .now{font-size:16px; font-weight:600; margin-top:14px; letter-spacing:-.015em;}

  .faq{max-width:820px; margin:44px auto 0; display:flex; flex-direction:column; gap:10px;}
  .faq details{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); transition:box-shadow .4s var(--ease);}
  .faq details[open]{box-shadow:var(--sh-1);}
  .faq summary{list-style:none; cursor:pointer; padding:20px 24px; font-size:17px; font-weight:600; letter-spacing:-.015em; display:flex; justify-content:space-between; gap:16px; align-items:center;}
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary .pm{width:28px; height:28px; border-radius:50%; background:var(--bg-2); display:grid; place-items:center; flex:none; transition:transform .4s var(--ease), background .3s;}
  .faq details[open] summary .pm{transform:rotate(45deg); background:var(--brand-soft); color:var(--brand-ink);}
  .faq .ans{padding:0 24px 22px; color:var(--ink-2); font-size:16px; line-height:1.6; max-width:68ch;}

  .roles-nav{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}
  .roles-nav a{font-size:13.5px; text-decoration:none; color:var(--ink-2); background:var(--card); border:1px solid var(--line); border-radius:999px; padding:6px 13px; transition:color .2s, border-color .2s;}
  .roles-nav a:hover{color:var(--ink); border-color:var(--ink-3);}
  .roles-nav a.cur{color:var(--brand-ink); border-color:color-mix(in srgb,var(--brand) 40%,var(--line)); background:var(--brand-soft);}
  .note{margin-top:18px; text-align:center; font-size:13.5px; color:var(--ink-3);}

  :root{color-scheme:light;}
  .hero-grid h1{font-size:clamp(38px,4.8vw,66px);}
  .nav-r{display:flex; align-items:center; gap:14px;}
  .login{font-size:14px; font-weight:600; color:var(--ink-2); text-decoration:none;}
  .login:hover{color:var(--ink);}
  @media (max-width:520px){ .login{display:none;} }
  .beta-badge{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--brand-ink); background:var(--brand-soft); border-radius:999px; padding:5px 12px;}
  .tok{display:flex; align-items:baseline; gap:8px;}
  .tok b{font-size:44px; font-weight:700; letter-spacing:-.05em; line-height:1;}
  .packs{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px;}
  .roles-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:40px;}
  @media (max-width:900px){ .roles-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:560px){ .roles-grid{grid-template-columns:1fr;} }
  .roles-grid a.card{text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:10px;}
  .roles-grid .ic{width:44px; height:44px; border-radius:14px; background:var(--brand-soft); color:var(--brand-ink); display:grid; place-items:center;}
  .roles-grid .ic svg{width:22px; height:22px;}
  .roles-grid .t{font-size:20px; font-weight:700; letter-spacing:-.03em;}
  .roles-grid .s{font-size:14.5px; color:var(--ink-2);}
  .roles-grid .go{margin-top:auto; font-size:14px; font-weight:600; color:var(--brand-ink); display:flex; align-items:center; gap:6px;}
  .roles-grid .go svg{width:14px; height:14px; transition:transform .35s var(--ease);}
  .roles-grid a.card:hover .go svg{transform:translateX(3px);}

  /* MOUVEMENT : une seule courbe (--ease), tout glisse, rien ne rebondit.
     Les états d'attente ne s'appliquent que sous .js (posé par le script, jamais si prefers-reduced-motion). */
  :root{interpolate-size:allow-keywords;}
  main{overflow-x:clip;}
  @keyframes upIn{from{opacity:0; translate:0 18px; filter:blur(6px);}}
  .js .up[data-split], .js .vis.up{animation:none;}

  /* Navigation : ombre au défilement, section en cours, progression */
  nav.top{transition:box-shadow .6s var(--ease), border-color .6s var(--ease);}
  nav.top.scrolled{box-shadow:0 14px 34px -28px rgba(17,16,19,.45); border-bottom-color:var(--line);}
  .nav-prog{position:absolute; left:0; bottom:-1px; width:100%; height:2px; background:var(--brand); transform:scaleX(0); transform-origin:0 50%; pointer-events:none;}
  .top-links a{position:relative; transition:color .3s var(--ease);}
  .top-links a::after{content:""; position:absolute; left:0; right:0; bottom:-7px; height:2px; border-radius:2px; background:currentColor; transform:scaleX(0); transform-origin:0 50%; transition:transform .6s var(--ease);}
  .top-links a:hover::after, .top-links a.cur::after{transform:scaleX(1);}
  .top-links a.cur{color:var(--ink);}
  .login{transition:color .3s var(--ease);}

  /* Boutons : ils se soulèvent, la lumière passe une fois */
  .btn-brand::after{content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%); transform:translateX(-120%); pointer-events:none;}
  .btn-brand:hover::after{transform:translateX(120%); transition:transform 1s var(--ease);}
  .btn-soft:hover{border-color:color-mix(in srgb,var(--ink) 20%,var(--line)); box-shadow:var(--sh-1);}
  .hero .beta-badge{position:relative; overflow:hidden; isolation:isolate;}
  .hero .beta-badge::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.8) 50%,transparent 70%); transform:translateX(-130%); animation:sheen 1.6s var(--ease) 1.4s both;}
  @keyframes sheen{to{transform:translateX(130%);}}

  /* Cartes : se soulever, au survol comme au clavier */
  .card:focus-visible{transform:translateY(-3px); box-shadow:var(--sh-2);}
  a.card:active{transform:translateY(-1px) scale(.99); transition-duration:.15s;}
  .roles-grid .ic{transition:background-color .45s var(--ease), color .45s var(--ease);}
  .roles-grid a.card:is(:hover,:focus-visible) .ic{background:var(--brand); color:var(--on-cta);}
  .ui{position:relative;}
  .ui > .line{position:relative;}
  .feat .ui{transition:transform .5s var(--ease), box-shadow .5s var(--ease);}
  @media (hover:hover){ .feat .ui:hover{transform:translateY(-3px); box-shadow:var(--sh-2);} }
  .roles-nav a{transition:color .2s, border-color .2s, transform .5s var(--ease), box-shadow .5s var(--ease);}
  .roles-nav a:hover{transform:translateY(-2px); box-shadow:var(--sh-1);}
  .faq details{transition:box-shadow .4s var(--ease), transform .5s var(--ease);}
  .faq summary:hover .pm{background:color-mix(in srgb,var(--brand-soft) 60%,var(--bg-2));}
  .faq details::details-content{block-size:0; overflow-y:clip; opacity:0; transition:block-size .6s var(--ease), opacity .5s var(--ease), content-visibility .6s allow-discrete;}
  .faq details[open]::details-content{block-size:auto; opacity:1;}

  /* Titres : les mots arrivent l'un après l'autre et font la mise au point */
  .w{display:inline-block; white-space:nowrap;}
  .js [data-rx="words"]:not(.in) .w{opacity:0;}
  .js [data-rx="words"].in .w{animation:wordIn 1s var(--ease) both; animation-delay:calc(var(--d,0ms) + var(--i,0) * var(--ws,34ms));}
  @keyframes wordIn{from{opacity:0; transform:translateY(.36em); filter:blur(.12em);}}
  .rot{display:inline-grid; justify-items:center; align-items:start;}
  .rot > span{grid-area:1/1; transition:opacity .5s var(--ease), translate .6s var(--ease), filter .5s var(--ease), visibility .6s;}
  .rot > span:not(.on){opacity:0; visibility:hidden; translate:0 .45em; filter:blur(.06em);}
  .rot > span.out{translate:0 -.26em;}
  .rot > span.on{transition-duration:.9s, 1s, .9s, 0s; transition-delay:.12s;}
  .js [data-rx="words"]:not(.in) .rot{opacity:0;}
  .js [data-rx="words"].in .rot{animation:wordIn 1s var(--ease) both; animation-delay:calc(var(--d,0ms) + 3 * var(--ws,34ms));}
  .roles-grid a.card{transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .6s var(--ease);}
  .roles-grid a.card.lit{border-color:color-mix(in srgb,var(--brand) 30%,var(--line));}
  .roles-grid a.card.lit .ic{background:var(--brand); color:var(--on-cta);}
  .js [data-rx="sig"]:not(.in) .sw{opacity:0;}
  .js [data-rx="sig"].in .sw{animation:sigIn .9s var(--ease) both; animation-delay:calc(var(--d,0ms) + var(--i,0) * 190ms);}
  @keyframes sigIn{from{opacity:0; filter:blur(4px);}}

  /* Révélations au défilement : chaque type de bloc a son entrée */
  .kicker{--ry:12px;}
  .js :is([data-rx="rise"],[data-rx="fade"],[data-rx="focus"],[data-rx="card"],[data-rx="band"],[data-rx="ui"],[data-rx="phone"],[data-rx="stage"]):not(.in){opacity:0;}
  .js [data-rx].in{animation-duration:1s; animation-timing-function:var(--ease); animation-fill-mode:both; animation-delay:var(--d,0ms);}
  .js [data-rx="rise"].in{animation-name:rxRise;}
  .js [data-rx="fade"].in{animation-name:rxFade;}
  .js [data-rx="focus"].in{animation-name:rxFocus;}
  .js [data-rx="card"].in{animation-name:rxCard;}
  .js [data-rx="band"].in{animation-name:rxBand; animation-duration:1.2s;}
  .js [data-rx="ui"].in{animation-name:rxRight;}
  .js [data-rx="ui"].from-l.in{animation-name:rxLeft;}
  .js [data-rx="phone"].in{animation-name:rxPhone; animation-duration:1.2s;}
  .js [data-rx="stage"].in{animation-name:rxStage; animation-duration:1.3s; transform-origin:50% 100%;}
  .js .t-main:not(.in){animation:none;}
  @keyframes rxRise{from{opacity:0; translate:0 var(--ry,24px);}}
  @keyframes rxFade{from{opacity:0;}}
  @keyframes rxFocus{from{opacity:0; translate:0 .2em; filter:blur(10px);}}
  @keyframes rxCard{from{opacity:0; translate:0 52px; scale:.96;}}
  @keyframes rxBand{from{opacity:0; translate:0 48px; scale:.95;}}
  @keyframes rxRight{from{opacity:0; translate:48px 0;}}
  @keyframes rxLeft{from{opacity:0; translate:-48px 0;}}
  @keyframes rxPhone{from{opacity:0; translate:0 64px; rotate:x 16deg;}}
  @keyframes rxStage{from{opacity:0; transform:perspective(1600px) translateY(56px) rotateX(18deg) scale(.96);} to{opacity:1; transform:perspective(1600px) translateY(0) rotateX(0) scale(1);}}

  /* Écrans du produit : les lignes se remplissent, les pastilles se posent */
  .vis{perspective:1600px;}
  .js :is([data-rx="ui"],[data-rx="phone"]):not(.in) .line{opacity:0;}
  .js :is([data-rx="ui"],[data-rx="phone"]).in .line{animation:lineIn .8s var(--ease) both; animation-delay:calc(var(--d,0ms) + 260ms + var(--li,0) * 75ms);}
  .js :is([data-rx="ui"],[data-rx="phone"]).in .line .pill{animation:pillIn .7s var(--ease) both; animation-delay:calc(var(--d,0ms) + 330ms + var(--li,0) * 75ms);}
  @keyframes lineIn{from{opacity:0; translate:18px 0;}}
  @keyframes pillIn{from{opacity:0; scale:.6;}}
  .ui-hl{position:absolute; left:10px; right:10px; top:0; height:40px; border-radius:12px; background:var(--bg-2); opacity:0; pointer-events:none; transition:transform .9s var(--ease), height .9s var(--ease), opacity .6s var(--ease);}
  .ui-hl.on{opacity:1;}
  .phone .ui-hl{left:6px; right:6px;}

  /* Puces, avant/après, conclusions, outils remplacés */
  .js [data-rx="chips"]:not(.in) > *{opacity:0;}
  .js [data-rx="chips"].in > *{animation:rxPop .6s var(--ease) both; animation-delay:calc(var(--d,0ms) + var(--i,0) * 45ms);}
  @keyframes rxPop{from{opacity:0; scale:.86; translate:0 6px;}}
  .js .ba-row .a{background:none; position:relative; isolation:isolate;}
  .js .ba-row .a::before{content:""; position:absolute; inset:0; z-index:-1; background:color-mix(in srgb,var(--brand-soft) 45%,transparent);}
  .js [data-rx="row"]:not(.in) > div{opacity:0;}
  .js [data-rx="row"]:not(.in) .a::before{clip-path:inset(0 100% 0 0);}
  .js [data-rx="row"].in > .b{animation:rxSlide .8s var(--ease) var(--d,0ms) both;}
  .js [data-rx="row"].in > .a{animation:rxFade .6s var(--ease) calc(var(--d,0ms) + 200ms) both;}
  .js [data-rx="row"].in .a::before{animation:wipe 1s var(--ease) calc(var(--d,0ms) + 220ms) both;}
  @keyframes rxSlide{from{opacity:0; translate:-16px 0;}}
  @keyframes wipe{from{clip-path:inset(0 100% 0 0);}}
  .js .takeaway{background:none; position:relative; isolation:isolate;}
  .js .takeaway::before{content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:var(--brand-soft);}
  .js [data-rx="fill"]:not(.in){color:transparent;}
  .js [data-rx="fill"]:not(.in)::before{clip-path:inset(0 100% 0 0 round 24px);}
  .js [data-rx="fill"].in::before{animation:wipeR 1.1s var(--ease) var(--d,0ms) both;}
  .js [data-rx="fill"].in{animation:inkIn .8s var(--ease) calc(var(--d,0ms) + 380ms) both;}
  @keyframes wipeR{from{clip-path:inset(0 100% 0 0 round 24px);} to{clip-path:inset(0 0 0 0 round 24px);}}
  @keyframes inkIn{from{color:transparent;}}
  .js .repl .card .tool{text-decoration:none;}
  .js .repl .card .st{background-image:linear-gradient(color-mix(in srgb,var(--ink-3) 75%,transparent),color-mix(in srgb,var(--ink-3) 75%,transparent)); background-repeat:no-repeat; background-position:0 60%; background-size:0% 1.5px;}
  .js .repl .card.in .st{animation:strike .9s var(--ease) calc(var(--d,0ms) + 450ms) both;}
  @keyframes strike{to{background-size:100% 1.5px;}}

  /* Pictos et logo : ils se dessinent comme un trait de plan */
  .js .sk.in :is(path,circle,rect,line,polyline,ellipse){animation:sketch 1.1s var(--ease) both; animation-delay:calc(var(--d,0ms) + var(--sd,0ms));}
  @keyframes sketch{to{stroke-dashoffset:0;}}
  .js .mark[data-rx]:not(.in) .heart{opacity:0;}
  .js .mark[data-rx].in .heart{animation:beat 2.6s var(--ease) infinite, heartIn .9s var(--ease) calc(var(--d,0ms) + 780ms) both;}
  @keyframes heartIn{from{scale:0; opacity:0;}}

  /* La table (accueil) : elle se pose, chacun prend place, le dossier circule */
  .scene-card{will-change:transform;}
  .js .stage:not(.seated) .seat{animation-play-state:paused;}
  .js .stage:not(.seated) :is(.table,.dossier){opacity:0;}
  .js .stage.seated .table{animation:tableIn 1.1s var(--ease) both;}
  .js .stage.seated .dossier{--ry:10px; animation:rxRise .9s var(--ease) .3s both;}
  @keyframes tableIn{from{opacity:0; scale:.92;}}
  .scene{isolation:isolate;}
  .links{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none;}
  .links line{stroke:color-mix(in srgb,var(--ink) 15%,transparent); stroke-width:1.25; stroke-linecap:round; transition:stroke .6s var(--ease);}
  .links line.hot{stroke:color-mix(in srgb,var(--brand) 55%,transparent);}
  .pdot{position:absolute; left:0; top:0; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 16%,transparent); opacity:0; pointer-events:none;}
  .ring{position:absolute; border-radius:999px; border:1.5px solid color-mix(in srgb,var(--brand) 45%,transparent); opacity:0; pointer-events:none;}
  .seat.ack .av{box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 13%,transparent), var(--sh-1);}
  .dossier .ic{transition:background-color .5s var(--ease), color .5s var(--ease);}
  .dossier.got .ic{background:var(--brand); color:var(--on-cta);}
  .vn{display:inline-block;}

  /* Le fil des fonctionnalités : la progression se lit au milieu */
  #fonctions > .sheet{position:relative;}
  .thread{position:absolute; top:0; left:50%; width:2px; margin-left:-1px; pointer-events:none; display:none;}
  @media (min-width:961px){ .thread{display:block;} }
  .thread::before{content:""; position:absolute; inset:0; border-radius:2px; background:var(--line);}
  .thread i{position:absolute; inset:0; border-radius:2px; background:var(--brand); transform:scaleY(0); transform-origin:50% 0;}
  .thread b{position:absolute; left:50%; width:11px; height:11px; margin:-5.5px 0 0 -5.5px; border-radius:50%; background:var(--bg); border:1.5px solid var(--line); transition:background-color .6s var(--ease), border-color .6s var(--ease), box-shadow .6s var(--ease);}
  .thread b.on{background:var(--brand); border-color:var(--brand); box-shadow:0 0 0 5px var(--brand-soft);}

  @media (prefers-reduced-motion:reduce){ .faq details::details-content{transition:none !important;} }
  @media print{
    .js [data-rx], .js [data-rx] *{opacity:1 !important; animation:none !important; translate:none !important; filter:none !important;}
    .js [data-rx="fill"]{color:var(--brand-ink) !important;}
    .js .sk *, .js .links line{stroke-dashoffset:0 !important;}
    .nav-prog, .thread{display:none !important;}
  }
  /* Pages du lot W1 : mêmes jetons, mêmes courbes ; fil d'Ariane, trois preuves, lignes de formules. */
  .crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; font-size:13.5px; color:var(--ink-3); margin-bottom:18px;}
  .crumbs a{color:var(--ink-2); text-decoration:none; transition:color .2s;}
  .crumbs a:hover{color:var(--ink);}
  .crumbs [aria-current]{color:var(--ink); font-weight:600;}
  .hero .center-crumbs{justify-content:center;}
  .facts.f3{grid-template-columns:repeat(3,1fr); margin-top:26px;}
  @media (max-width:760px){ .facts.f3{grid-template-columns:1fr;} }
  .facts.f3 .fact span{display:block; margin-top:6px; line-height:1.5;}
  .fact .src{display:block; margin-top:10px; font-size:12.5px; color:var(--ink-3); line-height:1.45;}
  .t-side .card.fp{flex:none; justify-content:flex-start;}
  .dark .stats{margin-top:34px;}
  .dark .stats > div{min-width:200px;}
  .t-side .line{padding:9px 0; font-size:14px;}
  .t-side .line b{font-weight:700; color:var(--ink);}
  .t-side .line .num{color:var(--ink-2); white-space:nowrap;}
  .kick-c{text-align:center;}
  .foot .foot-nav{grid-column:span 3;}
  @media (max-width:780px){ .foot > div:first-child, .foot .foot-nav{grid-column:1 / -1;} }

/* ======================================================================
   PAGES DE CONTENU (usine de pages) : guides, glossaire, métiers,
   fonctionnalités par métier et leurs sommaires. Même feuille que le reste
   du site (ci-dessus, reprise telle quelle), mêmes jetons, mêmes courbes :
   rien n'y est redéfini, seuls les blocs propres aux pages longues sont
   ajoutés ici.
   ====================================================================== */
.ext{color:var(--brand-ink); font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-color:color-mix(in srgb,var(--brand) 35%,transparent); transition:text-decoration-color .3s var(--ease);}
.ext:hover{text-decoration-color:var(--brand);}

/* Héros : titre, métadonnées, boutons, et « En bref » à droite */
.hero-doc{padding-bottom:clamp(20px,3vw,40px);}
.hero-doc .hero-grid{align-items:start; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);}
@media (max-width:980px){ .hero-doc .hero-grid{grid-template-columns:minmax(0,1fr);} }
.hero-doc .hero-grid h1{font-size:clamp(32px,3.9vw,54px); line-height:1.04; margin-top:20px; max-width:22ch;}
@media (max-width:980px){ .hero-doc .hero-grid h1{max-width:none;} }
/* Badge « facture électronique » (09/10/2026) : texte réel, jamais une image ; le lien mène à la section de la page Facturation. */
.efact-row{display:flex; justify-content:center; margin-top:22px;}
.hero-grid .efact-row{justify-content:flex-start;}
.efact{display:inline-flex; align-items:center; gap:12px; max-width:100%; padding:9px 18px 9px 10px; border-radius:18px; background:var(--card); border:1px solid var(--line); box-shadow:var(--sh-1); color:var(--ink); text-align:left; text-decoration:none; transition:border-color .2s var(--ease);}
.efact:hover{border-color:color-mix(in srgb,var(--ok) 55%,var(--line));}
.efact .ck{width:34px; height:34px; border-radius:50%; background:color-mix(in srgb,var(--ok) 14%,var(--card)); color:var(--ok); display:grid; place-items:center; flex:none;}
.efact .ck svg{width:19px; height:19px;}
.efact .tx{display:block; min-width:0;}
.efact .tx b{display:block; font-size:15px; font-weight:700; letter-spacing:-.01em; line-height:1.25;}
.efact .tx i{display:block; font-style:normal; font-size:13.5px; color:var(--ink-2); line-height:1.3; margin-top:1px;}
.efact-mini{display:flex; align-items:flex-start; gap:8px; margin-top:12px; font-size:13.5px; line-height:1.4; color:var(--ink-2); text-decoration:none;}
.efact-mini svg{width:16px; height:16px; color:var(--ok); flex:none; margin-top:2px;}
.efact-mini:hover span{color:var(--ink); text-decoration:underline;}
.doc-meta{display:flex; flex-wrap:wrap; gap:4px 0; margin-top:18px; font-size:14.5px; color:var(--ink-3);}
.doc-meta span + span::before{content:"·"; margin:0 12px; color:var(--ink-3);}
.doc-meta time{color:var(--ink-2); font-weight:500;}
.hero-doc .hero-cta{margin-top:26px;}
.enbref{padding:clamp(20px,2.4vw,28px); border-top:3px solid var(--brand);}
.enbref .ui-h{color:var(--brand-ink); font-size:13.5px; margin-bottom:8px;}
.enbref p{font-size:clamp(17px,1.5vw,19px); line-height:1.55; letter-spacing:-.012em; color:var(--ink);}
.hero-doc .vis .ui + .ui{margin-top:14px;}

/* Page longue : sommaire collant à gauche, texte à droite */
.doc-sec{padding:clamp(20px,3.4vw,44px) 0 clamp(48px,7vw,96px);}
.doc{display:grid; grid-template-columns:minmax(0,250px) minmax(0,1fr); gap:clamp(36px,6vw,88px); align-items:start;}
.toc-wrap{position:sticky; top:84px; display:flex; flex-direction:column; gap:16px; max-height:calc(100vh - 104px); overflow-y:auto; scrollbar-width:thin; padding-bottom:4px;}
.toc-h{font-size:13px; font-weight:600; color:var(--ink-3); margin-bottom:8px; letter-spacing:-.005em;}
.toc ol{list-style:none; margin:0; padding:0;}
.toc li a{display:block; padding:7px 0 7px 14px; border-left:2px solid var(--line); font-size:14px; line-height:1.35; color:var(--ink-2); text-decoration:none; transition:color .25s var(--ease), border-color .25s var(--ease);}
.toc li a:hover{color:var(--ink);}
.toc li a.cur{color:var(--ink); border-left-color:var(--brand); font-weight:600;}
.side-cta{display:flex; flex-direction:column; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px; box-shadow:var(--sh-1);}
.side-cta b{font-size:16px; letter-spacing:-.02em; line-height:1.3;}
.side-cta p{font-size:14px; color:var(--ink-2); line-height:1.5;}
.side-demo{font-size:14px; font-weight:600; color:var(--brand-ink); text-decoration:none; text-align:center; padding:4px 0;}
.side-demo:hover{text-decoration:underline; text-underline-offset:3px;}
.toc-m{display:none; flex-wrap:nowrap; overflow-x:auto; margin:0 0 28px; padding:2px 2px 8px; scrollbar-width:none;}
.toc-m::-webkit-scrollbar{display:none;}
.toc-m a{flex:none; white-space:nowrap;}
/* Après les règles de base : sur mobile, le sommaire collant cède la place à la rangée de puces. */
@media (max-width:960px){ .doc{grid-template-columns:minmax(0,1fr);} .toc-wrap{display:none;} .toc-m{display:flex;} }

/* Texte courant */
.prose{min-width:0; max-width:74ch; font-size:18px; line-height:1.72; color:var(--ink-2);}
.prose > :first-child{margin-top:0;}
.prose h2{font-size:clamp(26px,3vw,38px); font-weight:700; letter-spacing:-.04em; line-height:1.08; color:var(--ink); margin:clamp(44px,6vw,68px) 0 16px; scroll-margin-top:92px; text-wrap:balance;}
.prose > nav + h2, .prose > h2:first-child{margin-top:0;}
.prose h3{font-size:clamp(20px,2vw,25px); font-weight:700; letter-spacing:-.03em; line-height:1.2; color:var(--ink); margin:36px 0 10px; scroll-margin-top:92px;}
.prose p{margin:0 0 18px;}
.prose strong{color:var(--ink); font-weight:600;}
.prose em{font-style:italic;}
.prose a{color:var(--brand-ink); text-decoration:underline; text-underline-offset:3px; text-decoration-color:color-mix(in srgb,var(--brand) 35%,transparent); transition:text-decoration-color .3s var(--ease);}
.prose a:hover{text-decoration-color:var(--brand);}
.prose ul, .prose ol{margin:0 0 22px; padding-left:1.35em;}
.prose li{margin:8px 0; padding-left:.25em;}
.prose li > ul, .prose li > ol{margin:8px 0 4px;}
.prose li::marker{color:var(--brand-ink); font-weight:600;}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em; background:var(--bg-2); border-radius:6px; padding:2px 6px;}
.prose hr{border:none; border-top:1px solid var(--line); margin:40px 0;}
.prose .takeaway{margin:30px 0; padding:20px 24px; font-size:clamp(17px,1.5vw,19px); line-height:1.5;}
.prose .takeaway b{font-weight:700;}
.tbl{overflow-x:auto; margin:26px 0 30px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--card); box-shadow:var(--sh-1); -webkit-overflow-scrolling:touch;}
.tbl table{width:100%; border-collapse:collapse; font-size:15.5px; line-height:1.5; text-align:left; min-width:520px;}
.tbl th, .tbl td{padding:13px 18px; vertical-align:top; border-top:1px solid var(--line); color:var(--ink-2);}
.tbl thead th{border-top:none; background:var(--bg-2); font-size:13px; font-weight:600; color:var(--ink-2);}
.tbl tbody td:first-child{font-weight:600; color:var(--ink);}
@media (max-width:640px){
  .tbl table{min-width:0; display:block;}
  .tbl thead{display:none;}
  .tbl tbody{display:block;}
  .tbl tr{display:block; padding:14px 16px; border-top:1px solid var(--line);}
  .tbl tbody tr:first-child{border-top:none;}
  .tbl td{display:block; border:none; padding:4px 0;}
  .tbl td::before{content:attr(data-label); display:block; font-size:12px; font-weight:600; color:var(--ink-3);}
  .tbl td:first-child{padding-bottom:6px; font-size:16.5px;}
  .tbl td:first-child::before{display:none;}
}
@media (max-width:560px){ .prose{font-size:17px;} }

/* Formule conseillée */
.plans3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:40px; align-items:stretch;}
@media (max-width:900px){ .plans3{grid-template-columns:minmax(0,1fr);} }
.plan{display:flex; flex-direction:column; gap:10px; padding:26px;}
.plan .n{font-size:15px; font-weight:600; color:var(--ink-2);}
.plan .pr{font-size:clamp(34px,3.4vw,44px); font-weight:700; letter-spacing:-.045em; line-height:1;}
.plan .pr small{font-size:15px; font-weight:500; color:var(--ink-3); letter-spacing:0;}
.plan .d{font-size:14.5px; color:var(--ink-2); line-height:1.5;}
.plan .chip{align-self:flex-start; background:var(--brand-soft); color:var(--brand-ink);}
.plan .chip.chip-muted{background:var(--bg-2); color:var(--ink-3);}
.plan .btn{margin-top:auto; align-self:flex-start;}
.plan.reco{border-color:color-mix(in srgb,var(--brand) 40%,var(--line)); background:linear-gradient(160deg, color-mix(in srgb,var(--brand-soft) 70%,var(--card)), var(--card) 62%); box-shadow:var(--sh-2);}

/* Sommaires (métiers, guides, glossaire) */
.hub-sec{padding:clamp(20px,3.4vw,44px) 0 clamp(40px,6vw,80px);}
.hub-intro{max-width:74ch;}
.hub-h{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:clamp(22px,2.4vw,30px); font-weight:700; letter-spacing:-.035em; line-height:1.15; margin:clamp(44px,6vw,64px) 0 0; scroll-margin-top:92px;}
.hub-h small{font-size:14px; font-weight:500; color:var(--ink-3); letter-spacing:0;}
.hub-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:22px;}
@media (max-width:980px){ .hub-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:620px){ .hub-grid{grid-template-columns:minmax(0,1fr);} }
.hub-grid a.card{display:flex; flex-direction:column; gap:8px; padding:22px; text-decoration:none; color:inherit;}
.hub-grid .ic{width:44px; height:44px; border-radius:14px; background:var(--brand-soft); color:var(--brand-ink); display:grid; place-items:center; flex:none; transition:background-color .45s var(--ease), color .45s var(--ease);}
.hub-grid .ic svg{width:22px; height:22px;}
.hub-grid a.card:is(:hover,:focus-visible) .ic{background:var(--brand); color:var(--on-cta);}
.hub-grid .t{font-size:18px; font-weight:700; letter-spacing:-.025em; line-height:1.25;}
.hub-grid .s{font-size:14.5px; color:var(--ink-2); line-height:1.5;}
.hub-grid .go{margin-top:auto; padding-top:6px; display:flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--brand-ink);}
.hub-grid .go svg{width:14px; height:14px; transition:transform .35s var(--ease);}
.hub-grid a.card:hover .go svg{transform:translateX(3px);}
.chips-l{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px;}
.chips-l a{display:inline-flex; align-items:center; min-height:36px; font-size:14px; font-weight:500; color:var(--ink); text-decoration:none; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:5px 14px; transition:border-color .3s var(--ease), color .3s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);}
.chips-l a:hover{color:var(--brand-ink); border-color:color-mix(in srgb,var(--brand) 40%,var(--line)); transform:translateY(-2px); box-shadow:var(--sh-1);}
.az{display:flex; flex-wrap:wrap; gap:6px; margin-top:26px;}
.az a, .az span{display:inline-grid; place-items:center; width:38px; height:38px; border-radius:12px; font-size:14px; font-weight:600; text-decoration:none;}
.az a{background:var(--card); border:1px solid var(--line); color:var(--ink); transition:border-color .3s var(--ease), color .3s var(--ease), transform .5s var(--ease);}
.az a:hover{color:var(--brand-ink); border-color:color-mix(in srgb,var(--brand) 40%,var(--line)); transform:translateY(-2px);}
.az span{color:var(--ink-3); opacity:.5;}
.terms{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 28px; margin-top:18px;}
@media (max-width:760px){ .terms{grid-template-columns:minmax(0,1fr);} }
.terms a{display:flex; flex-direction:column; gap:3px; padding:14px 18px; text-decoration:none; color:inherit; background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); transition:border-color .3s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);}
.terms a:hover{border-color:color-mix(in srgb,var(--brand) 40%,var(--line)); transform:translateY(-2px); box-shadow:var(--sh-1);}
.terms b{font-size:16px; letter-spacing:-.015em;}
.terms span{font-size:14px; color:var(--ink-2); line-height:1.45;}
.hub-more{margin-top:30px; font-size:15px; color:var(--ink-2);}
.hub-more a{color:var(--brand-ink); font-weight:600;}
@media print{ .toc-wrap, .side-cta, .toc-m{display:none !important;} }