/* spend.rip : la même grille que l'app, posée à plat sur une page. Une colonne de lecture,
   des bandes pleine largeur pour les listes, le verre uniquement sur ce qui se touche. */
@font-face{font-family:"Instrument Sans";src:url(/fonts/instrument-sans.woff2) format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/fonts/geist-mono.woff2) format("woff2");font-weight:400 500;font-display:swap}

:root{
  --g:#fff;--side:#f7f7f8;--t:#17181b;--t2:#6b6e76;--line:#e8e8eb;--fill:#f1f1f3;--fill2:#e3e3e7;--solid:#fff;
  --acc:#d4222d;--ok:#17a65a;--rim:rgba(255,255,255,.9);--kn:#fff;
  --shadow:0 14px 40px rgba(20,22,28,.14),0 1px 3px rgba(20,22,28,.08);
  --body:"Instrument Sans",ui-sans-serif,"Segoe UI",system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,Consolas,monospace;
  --sp:linear(0,.009,.035 2.1%,.141,.281 6.7%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.974 53.8%,.975 57.1%,.997 69.8%,1.003 76.9%,1.004 83.8%,1);
  --sp2:linear(0,.02,.08 3.4%,.31 8.5%,.62 15%,.84 22%,.97 30%,1.03 38%,1.05 45%,1.03 58%,1.005 72%,1);
  --wrap:1080px;--gx:max(20px,env(safe-area-inset-left,0px));--gxr:max(20px,env(safe-area-inset-right,0px));
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --g:#111214;--side:#16171a;--t:#ededf0;--t2:#8d9098;--line:#25262b;--fill:#1d1e22;--fill2:#2c2d33;--solid:#1a1b1f;
    --acc:#f0564c;--ok:#3fce85;--rim:rgba(255,255,255,.42);--kn:#ededf0;
    --shadow:0 14px 40px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --g:#111214;--side:#16171a;--t:#ededf0;--t2:#8d9098;--line:#25262b;--fill:#1d1e22;--fill2:#2c2d33;--solid:#1a1b1f;
  --acc:#f0564c;--ok:#3fce85;--rim:rgba(255,255,255,.42);--kn:#ededf0;
  --shadow:0 14px 40px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.4);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--g);color:var(--t);font:400 16px/1.5 var(--body);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p,figure,ol,ul{margin:0}
h1,h2,h3{text-wrap:balance;letter-spacing:-.02em;font-weight:600}
h1{font-size:clamp(34px,5.2vw,56px);line-height:1.04}
h2{font-size:clamp(26px,3.4vw,36px);line-height:1.1}
h3{font-size:17px;line-height:1.3}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:default}
.btn,.links a,.lang,.qa summary,.seg button{cursor:pointer}
kbd{font:500 12px var(--mono);padding:2px 7px;border:1px solid var(--line);border-radius:5px;background:var(--side);color:var(--t);display:inline-block;min-width:28px;text-align:center}
:focus-visible{outline:2px solid color-mix(in srgb,var(--t) 38%,transparent);outline-offset:2px;border-radius:6px}
.i{display:inline-block;vertical-align:-2px;flex:none}
.skip{position:absolute;left:-999px;top:8px;padding:8px 12px;background:var(--t);color:var(--g);border-radius:7px;z-index:100}
.skip:focus{left:12px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-left:var(--gx);padding-right:var(--gxr)}
.wrap.narrow{max-width:720px}
.brand{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.mark{display:block;flex:none;color:var(--t)}
.wordmark em{font-style:normal;color:var(--acc)}

/* Barre de navigation : opaque en haut, verre dès qu'elle passe sur le contenu */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--g);transition:background .25s,box-shadow .25s}
.nav-in{display:flex;align-items:center;gap:18px;height:60px}
.nav.glass{background:color-mix(in srgb,var(--solid) 62%,transparent);box-shadow:0 1px 0 var(--line)}
.links{display:flex;gap:4px;margin-left:8px}
.links a{padding:6px 10px;border-radius:7px;color:var(--t2);font-size:14px;font-weight:500;transition:background .12s,color .12s}
.links a:hover{background:var(--fill);color:var(--t)}
.nav-r{margin-left:auto;display:flex;align-items:center;gap:10px}
.lang{font:500 12px var(--mono);color:var(--t2);padding:6px 8px;border-radius:7px}
.lang:hover{color:var(--t);background:var(--fill)}
@media (max-width:720px){.links{display:none}.nav-in{height:56px}}

/* Bouton : le seul plein de la page */
.btn{position:relative;display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 20px;border-radius:12px;background:var(--t);color:var(--g);font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;transition:scale .45s var(--sp),box-shadow .2s}
.btn:hover{box-shadow:0 10px 28px color-mix(in srgb,var(--t) 22%,transparent)}
.btn:active{scale:1.04}
.btn.small{height:34px;padding:0 13px;font-size:13px;border-radius:9px}
.btn .bloom{position:absolute;width:160px;height:160px;margin:-80px 0 0 -80px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.38),transparent 66%);pointer-events:none;animation:bloom .55s ease-out forwards}
@keyframes bloom{from{opacity:1;scale:.25}to{opacity:0;scale:1.25}}
.cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cta.center{justify-content:center}
.cta-sub{font:400 13px var(--mono);color:var(--t2)}
.fine{display:flex;align-items:center;gap:8px;color:var(--t2);font-size:13px}

/* Hero : le texte, et à côté la vraie pastille de l'app qui garde un clip */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:center;padding-block:56px 72px}
.hero-t{display:grid;gap:22px;max-width:52ch}
.lead{font-size:18px;color:var(--t2);max-width:48ch}
@media (max-width:860px){.hero{grid-template-columns:1fr;gap:40px;padding-block:36px 56px}}

.demo{position:relative;border:1px solid var(--line);border-radius:14px;background:var(--g);box-shadow:var(--shadow);padding:14px 16px 18px;display:grid;gap:14px;overflow:hidden;font-size:13px;user-select:none}
.demo-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;height:34px}
.demo-ttl{font-weight:600;font-size:14px}
.demo-ttl i{font-style:normal;font-weight:400;color:var(--t2);margin-left:6px}
.pill{position:relative;height:30px;min-width:124px;border-radius:15px;background:var(--fill);overflow:hidden;transition:background .25s,min-width .55s var(--sp)}
.pill-head{display:flex;align-items:center;gap:8px;height:30px;padding:0 13px;white-space:nowrap;font:400 12px var(--mono);transition:opacity .15s}
.pill-head b{font-weight:500}
.pill-head span{color:var(--t2)}
.led{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 20%,transparent);transition:background .2s}
.pill-note{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 14px;white-space:nowrap;font-weight:500;opacity:0;pointer-events:none;transition:opacity .15s}
.pill.island{background:var(--t);color:var(--g);min-width:228px}
.pill.island .pill-head{opacity:0}
.pill.island .pill-note{opacity:1;transition-delay:.08s}
.demo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.clip{min-width:0;transition:opacity .4s,translate .6s var(--sp)}
.clip.ghost{opacity:0;translate:0 10px}
.clip.ghost.in{opacity:1;translate:0 0}
.clip-img{position:relative;aspect-ratio:16/9;border-radius:7px;overflow:hidden;background:linear-gradient(135deg,hsl(var(--a) 62% 58%),hsl(var(--b) 58% 30%))}
.dur{position:absolute;right:6px;bottom:6px;font:500 11px var(--mono);padding:0 4px;border-radius:4px;background:rgba(10,12,16,.74);color:#fff}
.clip figcaption{display:grid;gap:1px;padding-top:6px}
.clip b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}
.clip small{font:400 10.5px/1.4 var(--mono);color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-key{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--t2);font-size:13px;padding-top:4px}
.keycap{font:500 13px var(--mono);min-width:38px;padding:5px 9px;border-radius:7px;background:var(--side);border:1px solid var(--line);box-shadow:0 2px 0 var(--line);translate:0 0;transition:translate .1s,box-shadow .1s}
.keycap.down{translate:0 2px;box-shadow:0 0 0 var(--line);border-color:var(--acc);color:var(--acc)}
@media (max-width:480px){.demo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.clip:nth-child(3){display:none}}

/* Bandes */
.band{background:var(--side);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:64px}
.band + .band{border-top:0}
.band h2,.needs-s h2,.mem-t h2{margin-bottom:28px}
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.step{display:grid;gap:8px;align-content:start;padding-top:14px;border-top:1px solid var(--line)}
.step-n{font:500 12px var(--mono);color:var(--t2)}
.step p{color:var(--t2);font-size:15px;max-width:38ch}
@media (max-width:720px){.steps{grid-template-columns:1fr;gap:20px}}

/* Mémoire : le sélecteur de l'app, en verre quand on le tient */
.mem{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;padding-block:72px}
.mem-t p{color:var(--t2);font-size:17px;max-width:46ch}
.mem-c{border:1px solid var(--line);border-radius:14px;padding:22px 24px 24px;display:grid;gap:16px;background:var(--g)}
.mem-l{font-size:13px;font-weight:500;color:var(--t2)}
.fig{display:flex;align-items:baseline;gap:10px;padding-top:6px}
.fig b{font-size:40px;font-weight:600;letter-spacing:-.03em;line-height:1}
.fig span{color:var(--t2)}
.fig-d{font:400 12px var(--mono);color:var(--t2);margin-top:-8px}
.bars{display:grid;gap:8px;padding-top:4px}
.bar{display:flex;align-items:center;gap:10px;font:400 12px var(--mono);color:var(--t2);white-space:nowrap}
.bar i{display:block;height:8px;border-radius:4px;background:var(--t);width:var(--w,1%);min-width:3px;transition:width .6s var(--sp2)}
.bar.raw i{background:var(--fill2);width:62%}
@media (max-width:860px){.mem{grid-template-columns:1fr;gap:28px;padding-block:56px}}

.seg{--n:4;--pad:2px;position:relative;display:grid;grid-template-columns:repeat(var(--n),1fr);height:36px;background:var(--fill);border-radius:10px;isolation:isolate;touch-action:none}
.seg button{position:relative;font-size:13px;font-weight:500;color:var(--t2);transition:color .15s;white-space:nowrap;border-radius:8px}
.seg button[aria-checked="true"]{color:var(--t)}
.seg-s,.seg-g{position:absolute;top:var(--pad);bottom:var(--pad);left:var(--pad);width:calc((100% - 2*var(--pad))/var(--n));border-radius:8px;pointer-events:none}
.seg-s{background:var(--g);box-shadow:0 0 0 .5px var(--line),0 1px 3px rgba(0,0,0,.12);z-index:-1}
:root[data-theme="dark"] .seg-s{background:var(--fill2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .seg-s{background:var(--fill2)}}
.seg-g{z-index:2;opacity:0;box-shadow:0 8px 22px rgba(0,0,0,.24),0 1px 3px rgba(0,0,0,.18)}

/* Fonctionnalités : une grille, des filets, pas de cartes */
.feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 36px}
.feat{display:grid;gap:8px;align-content:start;padding:20px 0 24px;border-top:1px solid var(--line)}
.feat p{color:var(--t2);font-size:15px;max-width:36ch}
@media (max-width:860px){.feats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.feats{grid-template-columns:1fr}}

.needs-s{padding-block:64px}
.needs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.need{display:grid;gap:4px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;font-size:15px}
.need b{font-weight:600}
.need span{color:var(--t2)}
@media (max-width:720px){.needs{grid-template-columns:1fr}}

/* Questions : des filets, un plus qui tourne */
.faqs{display:grid}
.qa{border-top:1px solid var(--line)}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;font-weight:500;font-size:16px;cursor:default}
.qa summary::-webkit-details-marker{display:none}
.qa-x{position:relative;width:14px;height:14px;flex:none;color:var(--t2)}
.qa-x::before,.qa-x::after{content:"";position:absolute;left:0;top:6px;width:14px;height:2px;border-radius:1px;background:currentColor;transition:rotate .45s var(--sp)}
.qa-x::after{rotate:90deg}
.qa[open] .qa-x::after{rotate:0deg}
.qa p{color:var(--t2);padding:0 0 18px;max-width:62ch;font-size:15px}
.qa summary:hover{color:var(--t)}

.bottom{display:grid;justify-items:center;text-align:center;gap:16px;padding-block:88px 72px}
.bottom p{color:var(--t2);max-width:44ch}
.bottom .fine{justify-content:center;text-align:center}
.foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding-block:22px 34px;color:var(--t2);font:400 12px var(--mono)}
.foot .brand{font-size:13px;color:var(--t)}

/* Entrée en douceur, seulement pour ce qui est sous le pli au chargement */
.pre{opacity:0;translate:0 10px}
.pre.in{opacity:1;translate:0 0;transition:opacity .5s,translate .7s var(--sp2)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}.pre{opacity:1;translate:none}}