/* ShiftCast — site (même direction artistique que l'application) */
@font-face { font-family: "Geist"; src: url("fonts/Geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #000; --s1: #0c0c0c; --s2: #121212; --s3: #1a1a1a;
  --b1: #1c1c1c; --b2: #262626; --b3: #343434;
  --t1: #f2f2f2; --t2: #9a9a9a; --t3: #5e5e5e; --w: #fff;
  --ok: #3ddc84;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --font: "Geist", system-ui, sans-serif; --mono: "Geist Mono", ui-monospace, monospace;
  --max: 1200px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--t1); font: 400 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
::selection { background: #fff; color: #000; }
#bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.dim { color: var(--t3); }
.grow { flex: 1; }

/* ---------- boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 44px; padding: 0 20px; border-radius: 12px; border: 1px solid var(--b2); background: #0e0e0e; font-weight: 550; letter-spacing: -.01em; white-space: nowrap; transition: background .2s, border-color .2s, transform .15s var(--ease), box-shadow .3s; position: relative; overflow: hidden; }
.btn:hover { background: #151515; border-color: var(--b3); }
.btn:active { transform: scale(.97); }
.btn.w { background: var(--w); color: #000; border-color: var(--w); }
.btn.w:hover { background: #e6e6e6; box-shadow: 0 14px 44px -12px rgba(255, 255, 255, .55); }
.btn.ghost { background: transparent; }
.btn.sm { height: 36px; padding: 0 16px; font-size: 14px; border-radius: 10px; }
.btn.lg { height: 54px; padding: 0 26px; font-size: 16px; border-radius: 14px; }
.btn.block { display: flex; width: 100%; }
.btn .ic { width: 18px; height: 18px; }
.rip { position: absolute; border-radius: 50%; background: rgba(128, 128, 128, .35); pointer-events: none; transform: scale(0); }

/* ---------- navigation ---------- */
.nav { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 50; width: min(calc(100% - 28px), 1080px); height: 60px; display: flex; align-items: center; gap: 22px; padding: 0 10px 0 18px; border-radius: 18px; border: 1px solid transparent; transition: background .3s, border-color .3s, backdrop-filter .3s; }
.nav.scrolled { background: rgba(8, 8, 8, .72); border-color: var(--b1); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 18px; letter-spacing: -.03em; }
.brand img { width: 28px; height: 28px; }
.brand em { font-style: normal; color: var(--t2); }
.links { display: flex; gap: 4px; margin-left: auto; }
.links a { padding: 8px 12px; border-radius: 9px; color: var(--t2); font-size: 14.5px; transition: color .2s, background .2s; }
.links a:hover { color: var(--t1); background: #111; }

/* ---------- typographie ---------- */
.kicker { display: inline-flex; align-items: center; gap: 10px; font: 600 12.5px var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--t2); }
.kicker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 12px var(--ok); }
h1, h2, h3 { margin: 0; letter-spacing: -.04em; line-height: 1.02; font-weight: 700; }
h1 { font-size: clamp(46px, 6.2vw, 88px); margin: 22px 0 22px; }
h1 span { display: block; }
h2 { font-size: clamp(34px, 4.4vw, 60px); }
h3 { font-size: 20px; letter-spacing: -.02em; line-height: 1.2; }
.lead { font-size: clamp(17px, 1.5vw, 20px); color: var(--t2); max-width: 560px; margin: 0; }
.lead b { color: var(--t1); font-weight: 600; }
.sub { color: var(--t2); font-size: 18px; max-width: 680px; margin: 22px auto 0; }

/* ---------- sections ---------- */
main { display: block; }
.sec { max-width: var(--max); margin: 0 auto; padding: 130px 24px 20px; }
.sec-h { text-align: center; margin-bottom: 60px; }
.sec-h h2 { margin-top: 16px; }

/* ---------- hero ---------- */
.hero { max-width: var(--max); margin: 0 auto; min-height: 100vh; padding: 130px 24px 60px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 50px; align-items: center; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.plats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--b2); background: rgba(12, 12, 12, .8); font-size: 13.5px; font-weight: 550; color: var(--t2); }
.chip svg { width: 16px; height: 16px; color: var(--t1); }

@media (min-width: 1560px) { .hero { max-width: 1440px; grid-template-columns: 1fr 680px; } }

/* fenêtre de démo (copie du tableau de bord de l'app) */
.demo { perspective: 1600px; }
/* scène 3D : la fenêtre au premier plan, des « images passées » derrière (le tampon de délai) */
.scene { position: relative; transform-style: preserve-3d; will-change: transform; }
.ghosts { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.ghosts i { position: absolute; inset: 0; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .09); background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .008)); }
.ghosts i:nth-child(1) { transform: translate3d(0, -14px, -70px); opacity: .85; }
.ghosts i:nth-child(2) { transform: translate3d(0, -28px, -140px); opacity: .55; }
.ghosts i:nth-child(3) { transform: translate3d(0, -42px, -210px); opacity: .3; }
.win { position: relative; border-radius: 22px; border: 1px solid var(--b2); background: linear-gradient(180deg, #0b0b0b, #060606); box-shadow: 0 60px 140px -40px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .02), 0 0 120px rgba(255, 255, 255, .05); overflow: hidden; transform-style: preserve-3d; will-change: transform; display: flex; }
.win::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, 0) 30%); }
/* barre latérale de l'app : icônes seules sur petit écran, avec les noms sur grand écran */
.w-side { width: 56px; flex: none; display: flex; flex-direction: column; padding: 16px 8px 12px; background: #070707; border-right: 1px solid var(--b1); }
.w-logo { display: flex; align-items: center; gap: 10px; padding: 1px 6px 22px; font-weight: 650; font-size: 16px; letter-spacing: -.4px; white-space: nowrap; }
.w-logo img { width: 26px; height: 26px; flex: none; }
.w-logo span { display: none; }
.w-logo em { font-style: normal; color: #8a8a8a; }
.w-nav { display: flex; align-items: center; gap: 11px; height: 38px; padding: 0 11px; border-radius: 10px; color: #bdbdbd; font-size: 13.5px; white-space: nowrap; cursor: default; transition: background .2s, color .2s; }
.w-nav + .w-nav { margin-top: 3px; }
.w-nav:hover { background: #101010; color: var(--t1); }
.w-nav.on { background: #151515; color: var(--t1); box-shadow: inset 0 0 0 1px #242424; }
.w-nav svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.w-nav span, .w-nav em { display: none; }
.w-nav em { margin-left: auto; font: 500 10px var(--mono); font-style: normal; color: var(--t3); }
.w-foot { margin-top: auto; display: flex; flex-direction: column; gap: 3px; }
.w-obs { display: flex; align-items: center; gap: 9px; height: 30px; padding: 0 14px; margin-bottom: 4px; font-size: 12px; color: var(--t2); white-space: nowrap; }
.w-obs i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.w-obs span { display: none; }
.w-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
@media (min-width: 1560px) {
  .w-side { width: 192px; }
  .w-logo span, .w-nav span, .w-nav em, .w-obs span { display: inline; }
}
@media (max-width: 1000px) { .w-side { display: none; } }
/* boutons de fenêtre (réduire, agrandir, fermer) comme dans l'app */
.wctl { display: flex; gap: 2px; margin-left: 6px; padding-left: 8px; border-left: 1px solid var(--b1); }
.wctl i { width: 30px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--t2); transition: background .15s, color .15s; cursor: default; }
.wctl i:hover { background: #1a1a1a; color: var(--t1); }
.wctl i.x:hover { background: #e5332a; color: #fff; }
.wctl svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }
.win-bar { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 10px 0 16px; border-bottom: 1px solid var(--b1); background: rgba(5, 5, 5, .7); }
.win-bar .stat { font: 500 11px var(--mono); color: var(--t3); padding: 5px 9px; border: 1px solid var(--b1); border-radius: 8px; white-space: nowrap; }
.win-bar .stat b { color: var(--t1); font-weight: 600; margin-left: 4px; }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 13px; white-space: nowrap; border-radius: 99px; border: 1px solid #2a2a2a; background: #0b0b0b; font: 600 11.5px var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--t1); transition: background .3s, color .3s; }
.pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.pill.delayed { background: #fff; color: #000; border-color: #fff; }
.pill.delayed i { background: #000; box-shadow: none; animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.win-body { position: relative; padding: 30px 28px 26px; display: flex; flex-direction: column; align-items: center; }
.seg { display: inline-flex; padding: 4px; border-radius: 99px; border: 1px solid var(--b2); background: rgba(12, 12, 12, .9); position: relative; }
.seg button { position: relative; z-index: 1; height: 32px; padding: 0 16px; border-radius: 99px; color: var(--t2); font-weight: 550; font-size: 13.5px; transition: color .25s; }
.seg button.on { color: #000; }
.seg .thumb { position: absolute; top: 4px; bottom: 4px; left: 0; border-radius: 99px; background: var(--w); }
.lbl { margin-top: 24px; font: 600 11.5px var(--font); letter-spacing: .3em; text-transform: uppercase; color: var(--t2); }
.big { position: relative; display: flex; align-items: flex-end; justify-content: center; margin: 4px 0 20px; }
.big .u { font: 600 30px var(--font); color: var(--t2); margin: 0 0 16px 6px; }
.odo { display: flex; --fs: 132px; }
.odo .dg { height: var(--fs); overflow: hidden; }
.odo .strip { display: flex; flex-direction: column; }
.odo .strip i { font-style: normal; display: block; height: var(--fs); line-height: var(--fs); font-size: var(--fs); font-weight: 700; letter-spacing: -.05em; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #fff 35%, #a5a5a5); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wave { position: absolute; left: 50%; top: 50%; width: 130px; height: 130px; margin: -65px 0 0 -65px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .7); pointer-events: none; }
.tiles { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; width: 100%; }
.tile { position: relative; z-index: 1; height: 62px; border-radius: 13px; border: 1px solid var(--b2); background: rgba(14, 14, 14, .9); display: flex; flex-direction: column; align-items: center; justify-content: center; transition: color .25s, transform .15s; }
.tile b { font: 650 17px var(--font); }
.tile small { font: 500 9.5px var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--t3); transition: color .25s; }
.tile.on { color: #000; background: transparent; border-color: transparent; }
.tile.on small { color: #555; }
.tile:active { transform: scale(.95); }
.tthumb { position: absolute; left: 0; top: 0; border-radius: 13px; background: #fff; box-shadow: 0 10px 40px -12px rgba(255, 255, 255, .5); z-index: 0; }
.go { margin-top: 10px; width: 100%; height: 54px; border-radius: 14px; background: #fff; color: #000; font-weight: 650; font-size: 15.5px; position: relative; overflow: hidden; transition: background .25s, color .25s, box-shadow .3s; }
.go.off { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px var(--b3); }
.hint { margin-top: 14px; font-size: 12.5px; color: var(--t3); text-align: center; }

/* ---------- bandeau défilant ---------- */
.marquee { overflow: hidden; border-block: 1px solid var(--b1); padding: 18px 0; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.mq-track { display: flex; gap: 46px; width: max-content; }
.mq-track span { display: inline-flex; align-items: center; gap: 12px; font-weight: 650; font-size: 22px; color: var(--t2); letter-spacing: -.02em; }
.mq-track svg { width: 24px; height: 24px; color: var(--t1); }
.mq-track .sep { color: var(--t3); }

/* ---------- cartes ---------- */
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { position: relative; padding: 30px 28px; border-radius: 22px; border: 1px solid var(--b1); background: linear-gradient(180deg, rgba(18, 18, 18, .9), rgba(8, 8, 8, .9)); overflow: hidden; transition: border-color .3s; }
.card:hover { border-color: var(--b3); }
.card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .07), transparent 60%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.card:hover::before { opacity: 1; }
/* reflet qui suit la souris + inclinaison 3D légère (cartes, étapes, chiffres, tarif) */
.step, .num, .price { position: relative; }
.step::before, .num::before, .price::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .07), transparent 60%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.step:hover::before, .num:hover::before, .price:hover::before { opacity: 1; }
.tilt { transform-style: preserve-3d; }
.card p { color: var(--t2); margin: 12px 0 0; font-size: 15.5px; }
.cic { width: 46px; height: 46px; border-radius: 13px; border: 1px solid var(--b2); display: grid; place-items: center; margin-bottom: 22px; background: #0e0e0e; }
.cic svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- schéma du flux ---------- */
.flow { border-radius: 24px; border: 1px solid var(--b1); background: rgba(8, 8, 8, .85); padding: 26px 26px 20px; }
.flow canvas { width: 100%; height: 300px; display: block; }
.flow-ctl { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.flow-ctl .k { font: 600 12px var(--mono); letter-spacing: .2em; color: var(--t2); text-transform: uppercase; }
.flow-ctl b { font: 700 20px var(--font); min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
input[type=range] { flex: 1; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #fff var(--p, 25%), #262626 var(--p, 25%)); outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(255, 255, 255, .12); cursor: pointer; }
input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; cursor: pointer; }
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.step { padding: 26px 26px; border-radius: 20px; border: 1px solid var(--b1); background: rgba(10, 10, 10, .85); }
.step .n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--b3); font: 700 13px var(--mono); margin-bottom: 18px; }
.step p { color: var(--t2); margin: 10px 0 0; font-size: 15px; }

/* ---------- vitrine de l'application ---------- */
.sc-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 50px; }
.sc-steps { display: flex; flex-direction: column; }
.sc-step { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; opacity: .28; transition: opacity .5s; }
.sc-step.on { opacity: 1; }
.sc-step .k { font: 600 12px var(--mono); letter-spacing: .22em; color: var(--t2); }
.sc-step h3 { font-size: clamp(26px, 2.6vw, 38px); letter-spacing: -.035em; margin: 14px 0 14px; }
.sc-step p { color: var(--t2); font-size: 16.5px; margin: 0; max-width: 440px; }
.sc-step .shot-m { display: none; }
.sc-stage { position: sticky; top: 110px; align-self: start; }
/* grand écran : la fenêtre de l'app déborde un peu à droite, les textes restent alignés avec le reste de la page */
@media (min-width: 1400px) { .sc-wrap { grid-template-columns: .68fr 1.32fr; gap: 56px; } .sc-stage { margin-right: -70px; } }
@media (min-width: 1700px) { .sc-stage { margin-right: -150px; } }
.sc-frame { position: relative; width: 100%; aspect-ratio: 1280 / 820; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .14); overflow: hidden; background: #050505; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 70px 140px -40px rgba(0, 0, 0, .95), 0 28px 60px -30px rgba(0, 0, 0, .8), 0 0 120px rgba(255, 255, 255, .06); }
.sc-frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; background: linear-gradient(118deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 34%); }
.sc-zoom { position: absolute; inset: 0; transform-origin: 0 0; }
.sc-zoom img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.sc-focus { position: absolute; z-index: 2; border-radius: 14px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .92), 0 0 34px 2px rgba(255, 255, 255, .16), 0 0 0 9999px rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; }

/* ---------- chiffres ---------- */
.nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.num { padding: 30px 26px; border-radius: 20px; border: 1px solid var(--b1); background: rgba(10, 10, 10, .85); }
.num b { display: block; font-size: 58px; font-weight: 750; letter-spacing: -.05em; line-height: 1; }
.num > span { display: block; margin-top: 12px; font-weight: 600; }
.num b span { display: inline; }
.num small { color: var(--t3); font-size: 13.5px; }

/* ---------- vidéo ---------- */
.video { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid var(--b2); box-shadow: 0 60px 140px -40px rgba(0, 0, 0, .95); background: #000; }
.video video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.play { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; background: #fff; color: #000; display: grid; place-items: center; box-shadow: 0 0 0 14px rgba(255, 255, 255, .12), 0 20px 60px rgba(0, 0, 0, .6); transition: transform .25s var(--ease); }
.play:hover { transform: scale(1.07); }
.play svg { width: 34px; height: 34px; margin-left: 5px; }

/* ---------- tarif ---------- */
.price-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.price { position: relative; padding: 34px; border-radius: 26px; border: 1px solid var(--b3); background: linear-gradient(180deg, #111, #080808); box-shadow: 0 0 0 1px rgba(255, 255, 255, .03), 0 40px 120px -40px rgba(255, 255, 255, .12); overflow: hidden; }
.price::after { content: ""; position: absolute; inset: -1px; border-radius: 26px; padding: 1px; background: linear-gradient(135deg, rgba(255, 255, 255, .5), transparent 40%, transparent 60%, rgba(255, 255, 255, .25)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.p-top { display: flex; align-items: center; gap: 14px; }
.p-top img { width: 46px; height: 46px; }
.p-top b { display: block; font-size: 20px; letter-spacing: -.02em; }
.p-top small { color: var(--t3); }
.badge { margin-left: auto; font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; padding: 6px 10px; border-radius: 99px; background: #fff; color: #000; }
.p-amount { display: flex; align-items: baseline; gap: 10px; margin: 30px 0 22px; }
.p-amount b { font-size: 68px; font-weight: 750; letter-spacing: -.05em; line-height: 1; }
.p-amount span { color: var(--t2); font-size: 18px; }
.p-list { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 12px; }
.p-list li { position: relative; padding-left: 32px; color: #d8d8d8; font-size: 15.5px; }
.p-list li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat; }
.price .btn + .btn { margin-top: 10px; }
.p-note { color: var(--t3); font-size: 13px; text-align: center; margin: 14px 0 0; }
.after { padding: 34px; border-radius: 26px; border: 1px solid var(--b1); background: rgba(10, 10, 10, .85); display: flex; flex-direction: column; }
.after h3 { font-size: 24px; }
.after ol { margin: 20px 0 24px; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 14px; }
.after li { counter-increment: s; position: relative; padding-left: 44px; color: var(--t2); font-size: 15.5px; }
.after li b { color: var(--t1); font-weight: 600; }
.after li::before { content: counter(s); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--b3); display: grid; place-items: center; font: 700 13px var(--mono); color: var(--t1); }
.appwin { margin: auto auto 0; width: 100%; max-width: 460px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .14); background: #060606; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 40px 80px -30px rgba(0, 0, 0, .9); }
.aw-bar { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 6px 0 12px; border-bottom: 1px solid var(--b1); background: #080808; font: 600 12px var(--font); color: var(--t2); }
.aw-bar img { width: 16px; height: 16px; }
.aw-bar .wctl { margin-left: auto; border-left: 0; padding-left: 0; }
.aw-bar .wctl i { width: 28px; height: 24px; }
.lockshot { display: block; width: 100%; height: auto; }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; margin: 0 auto; display: grid; gap: 10px; }
.qa { border-radius: 18px; border: 1px solid var(--b1); background: rgba(10, 10, 10, .85); overflow: hidden; transition: border-color .3s; }
.qa.open { border-color: var(--b3); }
.qa button { width: 100%; display: flex; align-items: center; gap: 16px; padding: 22px 24px; text-align: left; font-weight: 600; font-size: 17px; letter-spacing: -.01em; }
.qa button i { margin-left: auto; width: 26px; height: 26px; flex: none; border-radius: 50%; border: 1px solid var(--b3); position: relative; transition: transform .35s var(--ease), background .3s; }
.qa button i::before, .qa button i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; margin: -.75px 0 0 -5px; background: currentColor; }
.qa button i::after { transform: rotate(90deg); transition: transform .35s var(--ease); }
.qa.open button i { background: #fff; color: #000; transform: rotate(180deg); }
.qa.open button i::after { transform: rotate(0); }
.qa .ans { height: 0; overflow: hidden; }
.qa .ans p { margin: 0; padding: 0 24px 22px; color: var(--t2); font-size: 15.5px; }

/* ---------- fin + pied ---------- */
.final { text-align: center; padding: 160px 24px 140px; }
.final img { width: 84px; height: 84px; margin: 0 auto 30px; filter: drop-shadow(0 20px 60px rgba(255, 255, 255, .2)); }
.final h2 { font-size: clamp(44px, 6vw, 84px); margin-bottom: 36px; }
.foot { max-width: var(--max); margin: 0 auto; padding: 40px 24px 50px; border-top: 1px solid var(--b1); display: grid; grid-template-columns: auto 1fr auto; gap: 10px 30px; align-items: center; color: var(--t2); font-size: 14px; }
.foot p { margin: 0; }
.foot p b { color: var(--t1); }
.foot nav { display: flex; gap: 18px; }
.foot nav a:hover { color: var(--t1); }
.foot small { grid-column: 1 / -1; color: var(--t3); font-size: 12.5px; }

.toast { position: fixed; left: 50%; bottom: 30px; transform: translate(-50%, 30px); z-index: 80; padding: 14px 20px; border-radius: 14px; background: #111; border: 1px solid var(--b3); box-shadow: 0 20px 60px rgba(0, 0, 0, .7); font-size: 14.5px; opacity: 0; pointer-events: none; max-width: calc(100% - 32px); }

/* ---------- apparition au défilement ---------- */
.js .reveal { opacity: 0; transform: translateY(34px); filter: blur(8px); }

/* ---------- mobile ---------- */
@media (max-width: 1000px) {
  .ghosts { display: none; }
  .links { display: none; }
  .nav .btn { margin-left: auto; }
  .hero { grid-template-columns: 1fr; padding-top: 120px; }
  .cards3, .steps3 { grid-template-columns: 1fr; }
  .nums { grid-template-columns: 1fr 1fr; }
  .price-wrap { grid-template-columns: 1fr; }
  .sc-wrap { grid-template-columns: 1fr; }
  .sc-stage { display: none; }
  .sc-step { min-height: 0; opacity: 1; padding: 30px 0; }
  .sc-step .shot-m { display: block; margin-top: 20px; border-radius: 14px; border: 1px solid var(--b2); }
  .foot { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  body { font-size: 15px; }
  .sec { padding-top: 90px; }
  .odo { --fs: 96px; }
  .tile b { font-size: 14px; }
  .tile small { display: none; }
  .tile { height: 50px; }
  .win-bar .stat { display: none; }
  .nums { grid-template-columns: 1fr; }
  .price, .after { padding: 24px; }
  .p-amount b { font-size: 54px; }
  .flow canvas { height: 240px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- pages légales ---------- */
.legal { max-width: 780px; margin: 0 auto; padding: 140px 24px 80px; }
.legal h1 { font-size: clamp(38px, 5vw, 56px); margin: 16px 0 12px; }
.legal h2 { font-size: 22px; letter-spacing: -.02em; margin: 44px 0 12px; }
.legal p, .legal li { color: var(--t2); font-size: 15.5px; }
.legal b { color: var(--t1); font-weight: 600; }
.legal .todo { background: #fff; color: #000; padding: 1px 6px; border-radius: 5px; font-weight: 600; }
.legal .upd { color: var(--t3); font-size: 13.5px; }
.legal a { text-decoration: underline; text-underline-offset: 3px; }
.legal ol.st { list-style: none; counter-reset: st; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.legal ol.st li { counter-increment: st; position: relative; padding: 14px 18px 14px 58px; border: 1px solid var(--b1); border-radius: 14px; background: rgba(255, 255, 255, .02); }
.legal ol.st li::before { content: counter(st); position: absolute; left: 16px; top: 14px; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: #000; font: 700 14px var(--font); display: grid; place-items: center; }
.legal .box { border: 1px solid var(--b2); border-radius: 14px; padding: 16px 18px; background: #0a0a0a; margin-top: 14px; }
.legal code { font: 500 13px var(--mono); color: #fff; word-break: break-all; }

/* lien « Mon compte » dans la barre */
.nav .acc-link { margin-left: 10px; }
@media (max-width: 1000px) { .nav .acc-link { margin-left: auto; } .nav .acc-link + .btn { margin-left: 8px; } }
@media (max-width: 420px) { .nav .acc-link { padding: 0 10px; } }


/* ---------- page continue : les rubriques s'enchaînent, le menu suit le défilement ---------- */
html { scroll-padding-top: 96px; }
.qa { scroll-margin-top: 120px; }
main { overflow-x: clip; }
.links { position: relative; }
.links a { position: relative; z-index: 1; }
.links a.on { color: var(--t1); }
.links .ind { position: absolute; z-index: 0; left: 0; top: 0; width: 0; height: 0; border-radius: 9px; background: #151515; border: 1px solid var(--b2); pointer-events: none; opacity: 0; }
/* entrée douce des pages du site */
main { animation: pgIn .55s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes pgIn { from { opacity: 0; transform: translateY(10px); } }
.tabbar { display: none; }
@media (max-width: 1000px) {
  /* téléphone : la barre d'onglets passe en bas de l'écran */
  .tabbar { display: flex; position: fixed; z-index: 60; left: 12px; right: 12px; bottom: 12px; padding: 6px; gap: 2px; border-radius: 18px; border: 1px solid var(--b2); background: rgba(10, 10, 10, .86); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
  .tabbar a { position: relative; z-index: 1; flex: 1; text-align: center; padding: 10px 2px; font-size: 0; color: var(--t2); }
  .tabbar a::after { content: attr(data-s); font-size: 12.5px; font-weight: 550; }
  .tabbar a.on { color: var(--t1); }
  .tabbar .ind { position: absolute; z-index: 0; left: 0; top: 0; width: 0; height: 0; border-radius: 13px; background: #1a1a1a; border: 1px solid var(--b3); pointer-events: none; opacity: 0; }
  body { padding-bottom: 84px; }
}

.nav .lang-btn { min-width: 44px; padding: 0 10px; margin-left: 8px; font-weight: 650; letter-spacing: .04em; }

/* petit téléphone : l'en-tête tient sur une ligne sans écraser « Mon compte » */
@media (max-width: 430px) {
  .nav { gap: 8px; padding: 0 8px 0 12px; }
  .brand { font-size: 16px; gap: 7px; }
  .brand img { width: 24px; height: 24px; }
  .nav .btn.sm { padding: 0 10px; font-size: 13px; }
  .nav .lang-btn { min-width: 38px; margin-left: 0; padding: 0 8px; }
  .nav .acc-link { margin-left: auto; }
}
@media (max-width: 375px) { .brand span { display: none; } }

/* tablette paysage : le menu tient sur une ligne */
.links a { white-space: nowrap; }
@media (min-width: 1001px) and (max-width: 1150px) {
  .nav { gap: 12px; }
  .links a { padding: 8px 8px; font-size: 14px; }
  .nav .btn.sm { padding: 0 12px; }
}