/* Pages produits /ai/ et /terminal/ : charte de la landing (copie de son <style>) + blocs propres. Généré depuis la maquette du 10 nov. 2026. */
/* Landing V2 (direction « ligne de commande ») : fond pointillé, IBM Plex Mono partout, blocs encadrés, orange terminal. */
:root{
  --bg:#0A0A0A; --surface:#0F0F0F; --surface-2:#1A1A1A; --ink:#F5F5EF; --ink-2:#B3B3AB; --ink-3:#86867F;
  --line:#2A2A2A; --line-2:#1F1F1F; --accent:#FF8A00; --accent-ink:#0A0A0A; --accent-soft:#2E1E0A;
  --up:#3DD598; --down:#FF7A62;
  --f-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--f-mono); font-size:15px; line-height:1.6; margin:0; padding:0; color:var(--ink);
  background-color:var(--bg); background-image:radial-gradient(#1F1F1F 1px,transparent 1px); background-size:24px 24px}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:10; background:var(--bg)}
:lang(ja) body,:lang(ja) button{font-family:'IBM Plex Mono','Hiragino Sans','Noto Sans JP','Yu Gothic',ui-monospace,monospace}
:lang(zh-HK) body,:lang(zh-HK) button{font-family:'IBM Plex Mono','PingFang HK','Noto Sans HK','Microsoft JhengHei',ui-monospace,monospace}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0; list-style:none}
a{color:inherit}
button,select{font:inherit; color:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.w{max-width:1280px; margin-inline:auto; padding-left:max(20px,env(safe-area-inset-left,0px)); padding-right:max(20px,env(safe-area-inset-right,0px))}
@media (min-width:900px){.w{padding-inline:32px}}
.up{color:var(--up)} .down{color:var(--down)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
section[id]{scroll-margin-top:72px}
.sec{padding-block:clamp(40px,5vw,56px)}
.cmd{font-size:13px; color:var(--ink-3); margin-bottom:24px}
.cmd.acc{color:var(--accent)}
.sec h2{font-weight:600; font-size:clamp(1.6rem,3vw,2.4rem); line-height:1.1; letter-spacing:-.02em; max-width:22ch; text-wrap:balance}
.lead{color:var(--ink-2); font-size:clamp(.95rem,1.3vw,1.05rem); line-height:1.7; max-width:60ch; text-wrap:pretty}

/* Boutons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 20px; border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink); font-weight:600; font-size:14px; text-decoration:none; line-height:1.2; border-radius:2px; transition:filter .15s ease}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent; color:var(--accent)}
.btn.line{background:transparent; color:var(--ink); border-color:var(--line)}
.btn.line:hover{border-color:var(--ink-3)}
.btn.sm{padding:9px 14px; font-size:13px}
.btn.block{width:100%}
.btn .pr{opacity:.8}

/* En-tête */
.nav{position:sticky; top:env(safe-area-inset-top,0px); z-index:5; background:rgba(10,10,10,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.nav .w{display:flex; align-items:center; gap:12px 28px; padding-block:12px}
.brand{display:flex; align-items:center; gap:14px; text-decoration:none; margin-right:auto}
.logo-img{display:block; height:28px; width:auto; flex:none}
.links{display:flex; gap:26px; font-size:13px}
.links a{text-decoration:none; color:var(--ink-2)}
.links a:hover{color:var(--ink)}
.links a[aria-current]{color:var(--accent)} .links a[aria-current]::before{content:"> "}
@media (max-width:980px){.links{display:none}}

/* Héros */
.hero{padding-block:clamp(48px,7vw,88px) clamp(40px,6vw,72px)}
.hgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:56px; align-items:center}
.hero .cmd{color:var(--accent); margin-bottom:22px}
.hero h1{font-weight:700; font-size:clamp(2.3rem,4.6vw,4rem); line-height:1.04; letter-spacing:-.03em; text-wrap:balance}
.hero .lead{margin-top:26px; font-size:clamp(1rem,1.4vw,1.1rem); max-width:46ch}
.cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}
.note{margin-top:18px; font-size:12px; color:var(--ink-3)}
.viz{border:1px solid var(--line); background:var(--surface); border-radius:4px; padding:24px 26px; min-width:0}
.viz .vh{display:flex; justify-content:space-between; gap:12px; font-size:11px; letter-spacing:.08em; color:var(--ink-3); margin-bottom:18px}
.viz .vh b{color:var(--accent); font-weight:500}
.cells{display:grid; grid-template-columns:repeat(28,minmax(0,1fr)); gap:4px}
.cells i{display:block; aspect-ratio:1; border-radius:1px}
.viz .vf{display:flex; justify-content:space-between; margin-top:18px; font-size:12px; color:var(--ink-2)}
.viz .vf span:last-child{color:var(--ink)}
@media (max-width:900px){.hgrid{grid-template-columns:minmax(0,1fr); gap:36px}}

/* Bandeau de prix défilant */
.tick{border-block:1px solid var(--line); background:var(--surface); overflow:hidden; white-space:nowrap; padding:14px 0; font-size:13px}
.tick ul{display:inline-flex; animation:qtick 50s linear infinite}
.tick:hover ul{animation-play-state:paused}
.tick li{padding:0 20px; color:var(--ink-2)}
.tick li b{font-weight:500; color:var(--ink); margin-inline:6px}
@keyframes qtick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Étapes 01 / 02 / 03 */
.steps{padding-top:clamp(56px,7vw,112px)}
.stlist{display:flex; flex-direction:column; gap:clamp(40px,5vw,72px)}
.st{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px; align-items:start}
.st .n{grid-column:span 3; font-size:clamp(56px,7vw,96px); font-weight:600; line-height:.9; color:var(--line)}
.st:last-child .n{color:var(--accent)}
.st div{grid-column:span 7}
.st h3{font-weight:600; font-size:clamp(1.3rem,2.4vw,2.1rem); letter-spacing:-.01em; line-height:1.2}
.st p{margin-top:16px; color:var(--ink-2); line-height:1.7}
@media (max-width:760px){.st{grid-template-columns:minmax(0,1fr); gap:10px} .st .n,.st div{grid-column:auto}}

/* Modules */
.mods{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.mod{border:1px solid var(--line); background:var(--surface); border-radius:4px; padding:24px; min-width:0}
.mod .k{font-size:12px; color:var(--accent); display:flex; justify-content:space-between; gap:8px}
.mod h3{margin-top:10px; font-size:18px; font-weight:600}
.mod p{margin-top:10px; color:var(--ink-2); line-height:1.55; font-size:14px}
.mod.big{grid-column:span 2; grid-row:span 2; padding:28px; display:flex; flex-direction:column; gap:18px}
.mod.big h3{font-size:28px; margin-top:12px}
.mod.big>div>p{font-size:15px}
.mod.soon{border-style:dashed; background:var(--bg); grid-column:span 2}
.mod.soon .k{color:var(--ink-3)}
.mod .k em{font-style:normal; border:1px solid var(--accent); padding:0 5px; font-size:11px; letter-spacing:.04em}
.mod.soon .k em{border-color:var(--line)}
@media (max-width:1100px){.mods{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.mods{grid-template-columns:minmax(0,1fr)} .mod.soon{grid-column:auto} .mod.big{grid-column:auto; grid-row:auto; padding:22px} .mod.big h3{font-size:22px}}
.feed{border-top:1px solid var(--line); display:flex; flex-direction:column}
.feed .fh{padding:10px 0 4px; font-size:11px; color:var(--ink-3); display:flex; justify-content:space-between}
.feed .fh b{color:var(--up); font-weight:500}
.tl{display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:14px; align-items:center; padding:11px 0; border-bottom:1px solid var(--line-2); font-size:13px}
.tl time{color:var(--ink-3)}
.tl .tx{display:flex; flex-direction:column; gap:4px; min-width:0}
.tl .src{color:var(--ink-3); font-size:11px}
.tl .src b{color:var(--ink); font-weight:500}
.tl .h{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink); text-decoration:none}
.tl a.h:hover{text-decoration:underline; text-underline-offset:3px}
.tl .im{display:flex; flex-direction:column; align-items:flex-end; gap:5px}
.bars{display:flex; gap:2px}
.bars i{width:8px; height:8px; background:var(--line)}
.bars i.on{background:var(--accent)}
.tone{font-size:11px; color:var(--ink-2)}
.tone.bull{color:var(--up)} .tone.bear{color:var(--down)}
.feed .empty{padding:14px 0; color:var(--ink-3); font-size:13px}

/* Sécurité */
.sgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--line); border-radius:4px; background:var(--surface)}
.sgrid>div{padding:26px 28px; border-left:1px solid var(--line)}
.sgrid>div:first-child{border-left:0}
.sgrid h3{font-size:14px; font-weight:600; color:var(--accent)}
.sgrid p{margin-top:8px; font-size:13.5px; line-height:1.65; color:var(--ink-2)}
.sgrid a{color:var(--ink)}
@media (max-width:820px){.sgrid{grid-template-columns:minmax(0,1fr)} .sgrid>div{border-left:0; border-top:1px solid var(--line)} .sgrid>div:first-child{border-top:0}}

/* Formules */
.seg{display:inline-flex; border:1px solid var(--line); background:var(--surface); margin-top:28px}
.seg button{border:0; background:transparent; padding:9px 16px; font-size:13px; font-weight:600; color:var(--ink-2); display:inline-flex; align-items:center; gap:8px}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--accent-soft); color:var(--accent)}
.seg em{font-style:normal; font-size:11px; font-weight:700; color:var(--accent); background:var(--accent-soft); padding:1px 6px}
.pgrid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:16px}
.perrow{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px}
.promo{display:flex; border:1px solid var(--line); background:var(--surface)}
.promo:focus-within{border-color:var(--accent)}
.promo input{width:200px; min-width:0; border:0; outline:none; background:transparent; color:var(--ink); font:inherit; font-size:13px; padding:9px 14px; text-transform:uppercase; letter-spacing:.04em}
.promo input::placeholder{text-transform:none; letter-spacing:0; color:var(--ink-3)}
.promo button{border:0; border-left:1px solid var(--line); background:transparent; color:var(--accent); font-size:13px; font-weight:600; padding:9px 16px}
.promo button:hover{background:var(--accent-soft)}
.promo.on input{color:var(--accent)}
.pmsg{margin:10px 0 0; min-height:1.4em; font-size:12px; color:var(--ink-3)}
.pmsg.ok{color:var(--up,#3DD598)}
.pmsg.err{color:#FF7A62}
.vh{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
@media (max-width:640px){.perrow{align-items:stretch}.promo{width:100%}.promo input{flex:1;width:auto}}
@media (max-width:1100px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.plan{background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:24px; display:flex; flex-direction:column; gap:14px; min-width:0}
.plan h3{font-size:20px; font-weight:600}
.price{font-size:30px; font-weight:500; letter-spacing:-.01em}
.price small{font-size:13px; color:var(--ink-3); font-weight:400}
.taxn{font-size:12px; color:var(--ink-3); margin-top:-8px}
.plan ul{display:flex; flex-direction:column; gap:9px; font-size:13px; color:var(--ink-2); flex:1; line-height:1.5}
.plan li{display:flex; gap:10px}
.plan li::before{content:"■"; color:var(--accent); flex:none; font-size:10px; margin-top:3px}
.plan .ptag{font-size:13px; line-height:1.5; color:var(--ink-2); margin-top:-6px}
.plan li.pgh{margin-top:6px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink)}
.plan li.pgh::before{content:none}
.pdots{display:none}
.plan .phd{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.plan .tbadge{font-family:var(--mono,inherit); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink); background:var(--accent); padding:4px 8px; border-radius:3px; white-space:nowrap}
.plan .price.trial s{color:var(--ink-3); text-decoration-color:var(--accent); text-decoration-thickness:2px}
.plan .tfree{font-size:14px; font-weight:700; color:var(--accent); margin-top:-8px}
.apsw{display:flex; width:100%; align-items:center; gap:10px; border:1px solid var(--accent); background:var(--accent-soft); color:var(--accent); font:inherit; font-size:13px; font-weight:700; text-align:left; line-height:1.35; padding:10px 12px; cursor:pointer}
.apsw .tr{width:34px; height:18px; border:1px solid var(--accent); position:relative; flex:none}
.apsw .tr::after{content:""; position:absolute; top:3px; left:3px; width:10px; height:10px; background:var(--accent); opacity:.55; transition:left .15s,opacity .15s}
.apsw:hover{background:rgba(255,138,0,.22)}
.apsw em{margin-left:auto; flex:none}
.plan .apsw{margin:0 0 10px}
.plan .apsw:not([aria-checked="true"]),.plan .apsw:not([aria-checked="true"]):hover{background:transparent}
.apsw[aria-checked="true"]{background:var(--accent); color:#0A0A0A}
.apsw[aria-checked="true"] .tr{border-color:#0A0A0A}
.apsw[aria-checked="true"] .tr::after{left:19px; background:#0A0A0A; opacity:1}
.apsw[aria-checked="true"] em{background:#0A0A0A}
.apsw em,.pkhd em{font-style:normal; font-size:10px; font-weight:700; color:var(--accent); background:var(--accent-soft); padding:1px 6px; letter-spacing:.04em}
.plan.plus{border-color:var(--accent)}
.btn.dis{opacity:.55; cursor:default; pointer-events:none}
.packs{margin-top:28px; border:1px solid var(--line); background:var(--surface); border-radius:4px; padding:24px}
.pkhd h3{font-size:18px; font-weight:600; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.pkhd p,.pknote{font-size:13px; line-height:1.5; color:var(--ink-2); margin-top:6px}
.pknote{color:var(--ink-3); font-size:12px; margin-top:14px}
.pkgift{margin-top:14px; padding:10px 12px; border-radius:10px; background:rgba(255,140,0,.1); border:1px solid rgba(255,140,0,.35); font-size:13px; line-height:1.5; color:var(--ink)}
.pkgift+.pknote{margin-top:8px}
.pkgrid{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-top:16px}
.pk{border:1px solid var(--line); padding:14px; display:flex; flex-direction:column; gap:4px; min-width:0}
.pk b{font-size:15px; font-weight:600}
.pk .pkp{font-size:20px; font-weight:500; color:var(--accent)}
.pk .pktx{font-size:11px; color:var(--ink-3); margin-top:-2px}
.pk .pkl{font-size:12px; color:var(--ink-3); line-height:1.4}
@media (max-width:900px){.pkgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.packs{padding:18px}}
@media (max-width:640px){
  .pgrid{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; margin-inline:-20px; padding:4px 20px 8px; scroll-padding-inline:20px; scrollbar-width:none}
  .pgrid::-webkit-scrollbar{display:none}
  .pgrid .plan{flex:0 0 84%; scroll-snap-align:start}
  .pdots{display:flex; justify-content:center; gap:4px; margin-top:6px}
  .pdots button{width:28px; height:28px; border:0; background:transparent; padding:0; display:grid; place-items:center}
  .pdots button::before{content:""; width:8px; height:8px; background:var(--line)}
  .pdots button[aria-current="true"]::before{background:var(--accent)}
}

/* Appel final */
.final{border:1px solid var(--accent); background:var(--bg); border-radius:4px; padding:clamp(28px,4vw,48px); display:flex; align-items:center; justify-content:space-between; gap:24px 40px; flex-wrap:wrap}
.final .cmd{color:var(--accent); margin-bottom:12px}
.final h2{font-weight:700; font-size:clamp(1.6rem,3.4vw,2.6rem); line-height:1.1; letter-spacing:-.02em; max-width:24ch}

/* FAQ : une seule question ouverte à la fois */
.faq{border:1px solid var(--line); border-radius:4px; background:var(--surface)}
.faq details+details{border-top:1px solid var(--line)}
.faq summary{cursor:pointer; list-style:none; padding:20px 24px; font-size:15px; font-weight:600; display:flex; gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"?"; color:var(--accent)}
.faq details[open] summary::before{content:">"}
.faq details p{padding:0 24px 22px 50px; font-size:14px; line-height:1.7; color:var(--ink-2); max-width:90ch}
.faqsec{padding-bottom:clamp(56px,7vw,112px)}

/* Pied de page */
footer.site{border-top:1px solid var(--line); background:var(--bg); padding-block:40px 28px; font-size:13px; color:var(--ink-3)}
.fgrid{display:grid; gap:28px; grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:28px}
@media (min-width:980px){.fgrid{grid-template-columns:1.6fr 1fr 1fr 1fr 1fr}}
.fbrand{grid-column:1/-1}
@media (min-width:980px){.fbrand{grid-column:auto}}
.fbrand p{color:var(--ink-2); margin-top:14px; max-width:34ch; line-height:1.6}
footer.site h3{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-bottom:12px; font-weight:500}
footer.site ul{display:grid; gap:9px}
footer.site a{color:var(--ink-2); text-decoration:none}
footer.site a:hover{color:var(--accent)}
.linkbtn{background:none; border:0; padding:0; color:var(--ink-2); font-size:inherit; text-align:left}
.linkbtn:hover{color:var(--accent)}
.fmeta{display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:16px 40px; padding-top:20px; border-top:1px solid var(--line)}
.ftext{flex:1 1 520px; min-width:0}
.fprefs{display:flex; flex-wrap:wrap; align-items:center; gap:10px; flex:none}
.frisk,.freg{font-size:12px; line-height:1.6; color:var(--ink-3); max-width:110ch}
.freg{margin-top:12px}
.fbar{display:flex; flex-wrap:wrap; gap:10px 24px; align-items:center; justify-content:space-between; margin-top:20px; padding-top:18px; border-top:1px solid var(--line)}
.fbar .stat b{color:var(--up); font-weight:500}
.ccysel{background:var(--surface); border:1px solid var(--line); padding:6px 8px; font-size:12px; color:var(--ink); height:34px}
.lm{position:relative}
.lm-btn{display:inline-flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line); padding:7px 10px; font-size:12px; color:var(--ink)}
.lm-btn:hover{border-color:var(--accent)}
.lm-caret{color:var(--ink-3)}
.flag{display:inline-flex; width:20px; height:14px; overflow:hidden; flex:none}
.flag svg{width:100%; height:100%; display:block}
.lm-list{position:absolute; left:0; bottom:calc(100% + 6px); z-index:9; min-width:100%; margin:0; padding:4px; background:var(--surface); border:1px solid var(--line); box-shadow:0 14px 34px -12px rgba(0,0,0,.5)}
.lm-list li{display:flex; align-items:center; gap:10px; padding:8px 10px; font-size:12px; cursor:pointer; white-space:nowrap}
.lm-list li:hover,.lm-list li:focus{background:var(--surface-2); outline:none}
.lm-list li[aria-selected="true"]{color:var(--accent)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto} .tick ul{animation:none}}

/* Pages produits (maquette) : reprend landing.css, ajoute les blocs propres à Qubo AI et Qubo Terminal */
.hero .tag{display:inline-block; font-size:11px; letter-spacing:.08em; color:var(--accent); border:1px solid var(--accent); padding:2px 8px; margin-bottom:20px}
.panel{border:1px solid var(--line); background:var(--surface); border-radius:4px; min-width:0; overflow:hidden}
.panel .ph{display:flex; justify-content:space-between; gap:12px; padding:10px 16px; border-bottom:1px solid var(--line); font-size:11px; letter-spacing:.08em; color:var(--ink-3)}
.panel .ph b{color:var(--accent); font-weight:500}
/* Fil Qubo AI */
.chat{padding:18px 18px 20px; display:flex; flex-direction:column; gap:14px; font-size:13px}
.ask{border:1px dashed var(--accent); padding:12px 14px; color:var(--ink)}
.ask::before{content:"> "; color:var(--accent)}
.meta{font-size:11px; color:var(--ink-3); display:flex; gap:14px}
.meta b{color:var(--accent); font-weight:500}
.res{width:100%; border-collapse:collapse; font-size:12.5px}
.res th{font-weight:500; color:var(--ink-3); text-align:left; font-size:11px; padding:6px 0; border-bottom:1px solid var(--line)}
.res td{padding:8px 0; border-bottom:1px solid var(--line-2)}
.res td:not(:first-child),.res th:not(:first-child){text-align:right}
.res .sym{color:var(--ink); font-weight:600}
.res .nm{color:var(--ink-3); font-size:11px; margin-left:8px}
.read{border-left:2px solid var(--accent); padding:2px 0 2px 14px; color:var(--ink-2); line-height:1.65}
.read b{color:var(--ink); font-weight:500}
.srcs{display:flex; flex-wrap:wrap; gap:6px}
.srcs span{font-size:11px; border:1px solid var(--line); padding:2px 8px; color:var(--ink-2)}
.ill{font-size:11px; color:var(--ink-3)}
/* Cartes d'exemples */
.ex{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.ex .mod q{display:block; margin-top:14px; color:var(--ink); quotes:none; border-left:2px solid var(--accent); padding-left:12px; font-size:14px; line-height:1.55}
.ex .mod q+q{margin-top:10px}
@media (max-width:900px){.ex{grid-template-columns:minmax(0,1fr)}}
/* Tokens */
.tok{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--line); background:var(--surface); border-radius:4px; margin-top:28px}
.tok>div{padding:22px 24px; border-left:1px solid var(--line)}
.tok>div:first-child{border-left:0}
.tok h3{font-size:13px; font-weight:600; color:var(--ink-2)}
.tok .v{margin-top:8px; font-size:30px; font-weight:500}
.tok .v small{font-size:12px; color:var(--ink-3); font-weight:400}
.tok .off .v{color:var(--ink-3); font-size:18px; padding-top:8px}
.tok .hi .v{color:var(--accent)}
@media (max-width:820px){.tok{grid-template-columns:repeat(2,minmax(0,1fr))} .tok>div:nth-child(3){border-left:0} .tok>div:nth-child(n+3){border-top:1px solid var(--line)}}
.fine{margin-top:16px; font-size:12.5px; color:var(--ink-3); max-width:80ch; line-height:1.65}
.fine b{color:var(--ink-2); font-weight:500}
.final{border:1px solid var(--line); background:var(--surface); border-radius:4px; padding:clamp(28px,4vw,48px); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px}
.final h2{max-width:28ch}
/* Écran Terminal */
.term{font-size:12px}
.tbar{display:flex; align-items:center; gap:16px; padding:10px 14px; border-bottom:1px solid var(--line); white-space:nowrap; overflow:hidden; color:var(--ink-2)}
.tbar .q{width:16px; height:16px; background:var(--accent); flex:none}
.tbar .on{color:var(--accent)}
.tbar .ai{margin-left:auto; color:var(--accent); border:1px dashed var(--accent); padding:2px 8px}
.tgrid{display:grid; grid-template-columns:1.1fr 1fr; gap:1px; background:var(--line)}
.tgrid>div{background:var(--surface); padding:14px}
.tgrid h4{margin:0 0 10px; font-size:10.5px; letter-spacing:.08em; font-weight:500; color:var(--ink-3)}
.pv{font-size:26px; font-weight:500; letter-spacing:-.01em}
.pv small{font-size:12px; margin-left:8px}
.spark{display:flex; align-items:flex-end; gap:3px; height:44px; margin-top:12px}
.spark i{flex:1; background:var(--line)}
.spark i.a{background:var(--accent)}
.wl{display:grid; grid-template-columns:1fr auto auto; gap:6px 14px; font-size:12px}
.wl b{color:var(--ink); font-weight:500}
.wl span{text-align:right; color:var(--ink-2)}
.nl{display:flex; flex-direction:column}
.nl p{display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:10px; align-items:center; padding:7px 0; border-bottom:1px solid var(--line-2)}
.nl p:last-child{border-bottom:0}
.nl time{color:var(--ink-3)}
.nl em{font-style:normal; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink)}
.rg{display:flex; gap:3px; margin-top:6px}
.rg i{width:14px; height:14px; background:var(--line)}
.rg i.a{background:var(--accent)}
.tgrid .span{grid-column:1/-1}
/* Tiroirs */
.drw{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.drw .mod ul{margin-top:12px; display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--ink-2)}
.drw .mod li::before{content:"> "; color:var(--accent)}
.drw .mod.ai{border-style:dashed; border-color:var(--accent)}
@media (max-width:1100px){.drw{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.drw{grid-template-columns:minmax(0,1fr)} .tgrid{grid-template-columns:minmax(0,1fr)}}
.plmini{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:28px}
.plmini .plan .price{font-size:24px}
@media (max-width:1100px){.plmini{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.plmini{grid-template-columns:minmax(0,1fr)}}
.sec>.w>h2+.lead{margin-top:16px}
/* Aperçu fidèle du fil Qubo AI du Terminal (mêmes règles que app/index.html : .saiu, .saia, .saifx, .saisrc, .saicmp) */
.qai{--f-body:'IBM Plex Sans',system-ui,sans-serif}
.qai .saithr{padding:18px 18px 8px; display:flex; flex-direction:column; gap:14px}
.saiu{display:flex; justify-content:flex-end}
.saiu .bub{max-width:72%; background:#1C1C1C; border:1px solid #2A2A2A; border-radius:14px 14px 4px 14px; padding:9px 13px}
.saiu .bub p{margin:0; color:var(--ink); font-family:var(--f-body); font-size:14.5px; line-height:1.5}
.saia{display:flex; gap:10px; align-items:flex-start}
.saia .av{flex:none; width:24px; height:24px; border-radius:6px; background:var(--accent); color:#0A0A0A; font-weight:700; font-size:12px; display:grid; place-items:center; margin-top:1px}
.saia .msg{flex:1; min-width:0; display:flex; flex-direction:column; gap:6px}
.saia .msg b{color:var(--ink); font-weight:600; font-size:14.5px}
.saia .msg>p{margin:0; color:var(--ink-2); font-family:var(--f-body); font-size:14px; line-height:1.6}
.saifh{display:block; margin:10px 0 2px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.saifx{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--line); border-radius:8px; overflow:hidden; gap:1px; background:var(--line)}
.saifx>div{display:flex; flex-direction:column; gap:3px; padding:9px 11px; background:var(--surface); min-width:0}
.saifx span{font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); line-height:1.3}
.saifx b{font-size:14.5px; font-weight:600; color:var(--ink)}
.saifx b.down{color:var(--down)}
.saifx i{font-style:normal; font-size:11px; color:var(--ink-3)}
.saisrc{display:flex; flex-direction:column; gap:4px}
.saisrc li{display:flex; align-items:baseline; gap:8px; min-width:0; font-size:13px}
.saisrc a{color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; font-family:var(--f-body)}
.saisrc a span{font-family:var(--f-mono); font-size:11px; color:var(--accent); margin-right:8px; text-transform:uppercase; letter-spacing:.04em}
.saisrc small{flex:none; color:var(--ink-3); font-size:11px; margin-left:auto}
.saia .act{display:flex; align-items:center; gap:4px; margin-top:4px}
.saia .act small{color:var(--ink-3); font-size:11.5px; margin-right:auto}
.saia .act button{background:none; border:1px solid var(--line); color:var(--ink-3); font-size:12px; padding:4px 8px; border-radius:6px}
.qai .saicmp{padding:4px 18px 16px}
.saicmp .box{display:flex; align-items:center; gap:8px; background:#111; border:1px solid var(--line); border-radius:14px; padding:6px 6px 6px 14px}
.saicmp .tx{flex:1; color:var(--ink-3); font-family:var(--f-body); font-size:14px}
.saicmp .cost{font-size:10.5px; letter-spacing:.04em; color:var(--accent); border:1px solid #3A2A12; background:#140F07; border-radius:999px; padding:3px 8px}
.saicmp .go{width:32px; height:32px; border-radius:10px; background:var(--accent); color:#0A0A0A; display:grid; place-items:center; font-weight:700}
[hidden]{display:none!important}

.cap{margin-top:10px; font-size:11px; color:var(--ink-3); text-align:right}

/* Menu « Products » de l'en-tête public : tiroir au survol (et au focus clavier), style des tiroirs du Terminal. */
nav .pdd{position:relative;display:flex;align-items:center}
nav .pdd .pdt{display:inline-flex;align-items:center;gap:6px;padding:0;margin:0;border:0;background:none;font:inherit;color:#B3B3AB;cursor:pointer;line-height:inherit}
nav .pdd .pdt::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
nav .pdd.on .pdt{color:#FF8A00}nav .pdd.on .pdt::before{content:"> "}
nav .pdd:hover .pdt,nav .pdd:focus-within .pdt{color:#F5F5EF}nav .pdd.on:hover .pdt,nav .pdd.on:focus-within .pdt{color:#FF8A00}
nav .pdd:hover .pdt::after,nav .pdd:focus-within .pdt::after,nav .pdd.open .pdt::after{transform:translateY(1px) rotate(-135deg)}
nav .pdd .pdt:focus-visible{outline:2px solid #FF8A00;outline-offset:3px}
nav .pdd .pdm{position:absolute;top:100%;left:-16px;padding-top:14px;display:none;z-index:40}
nav .pdd:hover .pdm,nav .pdd:focus-within .pdm,nav .pdd.open .pdm{display:block}
nav .pdd .pdi{min-width:340px;background:#0F0F0F;border:1px solid #2A2A2A;border-top:2px solid #FF8A00;box-shadow:0 18px 40px rgba(0,0,0,.6);padding:4px 0}
nav .pdd .pdm a{display:block;padding:10px 16px;border-left:2px solid transparent;text-decoration:none;color:#F5F5EF;font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;line-height:1.4}
nav .pdd .pdm a small{display:block;white-space:nowrap;margin-top:3px;font-size:11.5px;font-weight:400;letter-spacing:0;text-transform:none;color:#86867F}
nav .pdd .pdm a:hover,nav .pdd .pdm a:focus-visible{background:#1A1206;border-left-color:#FF8A00;outline:0;color:#F5F5EF}
nav .pdd .pdm a[aria-current]{color:#FF8A00}nav .pdd .pdm a[aria-current]::before{content:none}

/* Menu hamburger mobile (≤ 980 px) : bouton ☰ à gauche du logo, panneau plein écran sous l'en-tête, Products toujours déplié. */
header .mbtn{display:none;flex:none;width:44px;height:44px;align-items:center;justify-content:center;padding:0;margin:0;background:transparent;border:1px solid #2A2A2A;border-radius:2px;color:#F5F5EF;cursor:pointer}
header .mbtn svg{display:block}header .mbtn .mx{display:none}
header.mopen .mbtn{border-color:#FF8A00;color:#FF8A00}header.mopen .mbtn .mb{display:none}header.mopen .mbtn .mx{display:block}
header .mbtn:focus-visible{outline:2px solid #FF8A00;outline-offset:2px}
header .mnav{display:none}
@media(max-width:980px){
  header .mbtn{display:inline-flex}
  header.mopen .mnav{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;height:calc(100vh - 100%);height:calc(100dvh - 100%);overflow-y:auto;z-index:50;background:#0A0A0A;border-top:1px solid #2A2A2A;padding:8px 0 24px;box-sizing:border-box;font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;text-align:left}
}
header .mnav .mcmd{margin:0;padding:14px 20px 10px;font-size:11px;color:#86867F}
header .mnav .mrow{display:flex;align-items:center;justify-content:flex-start;min-height:56px;padding:0 20px;border-bottom:1px solid #1F1F1F;text-decoration:none;color:#F5F5EF;font-size:16px;font-weight:400;line-height:1.3}
header .mnav .mrow span{margin-left:auto;padding-left:12px;color:#86867F;font-size:13px}
header .mnav a.mrow[aria-current]{color:#FF8A00}header .mnav a.mrow[aria-current]::before{content:">\00a0"}
header .btn,header .qbtn{white-space:nowrap}
header .mnav .mlab{margin:0;display:flex;align-items:center;min-height:48px;padding:0 20px;color:#F5F5EF;font-size:16px}
header .mnav .msub{background:#0F0F0F;border-bottom:1px solid #1F1F1F;border-left:2px solid #FF8A00;display:flex;flex-direction:column;padding:4px 0}
header .mnav .msub a{display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:60px;padding:8px 20px 8px 30px;text-decoration:none;color:#F5F5EF;font-size:13px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;line-height:1.3}
header .mnav .msub a small{font-size:12px;font-weight:400;letter-spacing:0;text-transform:none;color:#86867F}
header .mnav .msub a[aria-current]{color:#FF8A00}
header .mnav a.mrow:active,header .mnav .msub a:active{background:#1A1206}
header .mnav .mtag{margin:auto 0 0;padding:24px 20px 0;text-align:center;font-size:11px;color:#86867F}