/* ==========================================================================
   PRO-IA QUANT — design system « Obsidian Gold »
   Tokens partages landing + app. Vanilla CSS, zero dependance.
   ========================================================================== */
:root{
  --bg:#0B0E14; --s1:#131722; --s2:#1C2230; --bord:#2A3142;
  --gold:#E8B339; --gold2:#F6D07E; --gold-dark:#B4831F;
  --txt:#E6E9EF; --dim:#8A93A6; --faint:#5B6373;
  --up:#26C281; --dn:#F6465D; --cyan:#22D3EE; --viol:#8B5CF6;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px;
  --sp-1:8px; --sp-2:14px; --sp-3:22px; --sp-4:34px; --sp-5:56px; --sp-6:80px;
  --shadow:0 24px 64px rgba(0,0,0,.5);
  --glow:0 0 32px rgba(232,179,57,.28);
  --font:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--txt);font:15px/1.6 var(--font);
     -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,canvas{max-width:100%;display:block}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
         clip:rect(0 0 0 0);white-space:nowrap;border:0}

.wrap{max-width:1240px;margin:0 auto;padding:0 24px}

/* ── marque ───────────────────────────────────────────────────────────── */
.logo{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.05em}
.logo .pa{width:32px;height:32px;flex:none;border-radius:9px;
          background:radial-gradient(circle at 32% 28%,var(--s2),var(--bg));
          border:1px solid var(--gold);display:grid;place-items:center;
          color:var(--gold);font-size:12px;font-weight:800;box-shadow:var(--glow)}
.logo b{color:var(--gold2)} .logo span{color:var(--dim);font-weight:400}

/* ── boutons ──────────────────────────────────────────────────────────── */
.btn{display:inline-block;background:linear-gradient(135deg,var(--gold-dark),var(--gold));
     color:#0B0E14;font-weight:700;padding:11px 22px;border-radius:var(--r-md);
     font-size:14px;box-shadow:0 6px 22px rgba(232,179,57,.32);transition:.2s}
.btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.btn-ghost{display:inline-block;border:1px solid var(--bord);padding:11px 22px;
           border-radius:var(--r-md);font-size:14px;color:var(--dim);transition:.2s}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold2)}

/* ── surfaces ─────────────────────────────────────────────────────────── */
.card{background:var(--s1);border:1px solid var(--bord);border-radius:var(--r-md);padding:14px 16px}
/* Titre de carte : flex et NON float — un float qui deborde du titre repousse
   les conteneurs grid/flex suivants (ils refusent de chevaucher un float), ce qui
   ecrasait la grille des greeks a 144 px au lieu de 266. */
.card > h3{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
           font-size:10px;letter-spacing:.2em;color:var(--gold);font-weight:700;
           margin-bottom:10px;text-transform:uppercase}
.card > h3 .r{color:var(--faint);letter-spacing:.02em;font-weight:400;text-transform:none;
              text-align:right;flex:0 1 auto;min-width:0}

/* ── nav ──────────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:50;background:rgba(11,14,20,.88);
     backdrop-filter:blur(12px);border-bottom:1px solid rgba(42,49,66,.5)}
.nav .wrap{display:flex;align-items:center;gap:24px;height:62px}
.nav .links{margin-left:auto;display:flex;gap:20px;font-size:13.5px;color:var(--dim)}
.nav .links a{transition:.2s}
.nav .links a:hover{color:var(--gold2)}
.nav .burger{display:none;margin-left:auto;font-size:22px;color:var(--gold2);padding:6px 10px}

/* ── sections ─────────────────────────────────────────────────────────── */
section{padding:var(--sp-6) 0}
.sec-head{text-align:center;max-width:720px;margin:0 auto var(--sp-4)}
.sec-head .k{color:var(--gold);letter-spacing:.24em;font-size:11px;font-weight:700}
.sec-head h2{font-size:clamp(22px,3.2vw,30px);margin:10px 0;line-height:1.25}
.sec-head h2 .g{color:var(--gold)}
.sec-head p{color:var(--dim)}
.tint{background:linear-gradient(180deg,transparent,rgba(19,23,34,.55),transparent)}

/* ── grilles ──────────────────────────────────────────────────────────── */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}

.feat{background:var(--s1);border:1px solid var(--bord);border-radius:var(--r-lg);
      padding:22px;transition:.25s}
.feat:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:var(--shadow)}
.feat .ic{width:40px;height:40px;border-radius:11px;background:rgba(232,179,57,.12);
          border:1px solid rgba(232,179,57,.4);display:grid;place-items:center;
          color:var(--gold);font-size:18px;margin-bottom:14px}
.feat h3{font-size:15.5px;margin-bottom:7px}
.feat p{font-size:13px;color:var(--dim)}

/* ── chart vitrine ────────────────────────────────────────────────────── */
.chart-frame{background:var(--s1);border:1px solid var(--bord);border-radius:var(--r-lg);
             padding:12px;box-shadow:var(--shadow),0 0 40px rgba(232,179,57,.06);text-align:left}
.chart-frame .top{display:flex;gap:8px;align-items:center;padding:2px 8px 10px;
                  font-size:12px;color:var(--faint);flex-wrap:wrap}
.chart-frame .top .dot{width:9px;height:9px;border-radius:50%;flex:none}
.chart-frame .top .right{margin-left:auto}
/* Un <canvas> sans largeur CSS vaut 300 px (attribut par defaut) : la vitrine
   doit occuper toute la carte des le premier frame. */
.chart-frame canvas{width:100%}

/* ── tableau comparatif ───────────────────────────────────────────────── */
.cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.cmp{width:100%;max-width:880px;margin:0 auto;border-collapse:collapse;font-size:13.5px;min-width:560px}
table.cmp th,table.cmp td{padding:12px 14px;text-align:center;border-bottom:1px solid rgba(42,49,66,.5)}
table.cmp th{color:var(--dim);font-size:12px;letter-spacing:.08em;font-weight:600}
table.cmp th.us{color:var(--gold2)}
table.cmp td:first-child,table.cmp th:first-child{text-align:left;color:var(--dim)}
table.cmp .y{color:var(--up);font-weight:700}
table.cmp .n{color:var(--dn)}
table.cmp tr.hl td{background:rgba(232,179,57,.05)}

/* ── tarifs ───────────────────────────────────────────────────────────── */
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1000px;margin:0 auto}
.price{background:var(--s1);border:1px solid var(--bord);border-radius:var(--r-lg);
       padding:28px;text-align:center;position:relative}
.price.star{border-color:var(--gold);box-shadow:0 0 44px rgba(232,179,57,.13)}
.price .ribbon{position:absolute;top:-11px;left:50%;transform:translateX(-50%);
               background:var(--gold);color:#0B0E14;font-size:10px;font-weight:800;
               letter-spacing:.1em;padding:4px 13px;border-radius:20px;white-space:nowrap}
.price h3{font-size:13px;letter-spacing:.14em;color:var(--dim)}
.price .amt{font-size:34px;font-weight:800;color:var(--gold2);margin:12px 0 2px}
.price .amt small{font-size:13px;color:var(--faint);font-weight:400}
.price ul{list-style:none;margin:18px 0 22px;font-size:13px;color:var(--dim);text-align:left}
.price li{padding:6px 0 6px 20px;position:relative}
.price li::before{content:"◆";position:absolute;left:2px;top:9px;color:var(--gold);font-size:9px}
.price li b{color:var(--txt)}

/* ── footer ───────────────────────────────────────────────────────────── */
footer{border-top:1px solid rgba(42,49,66,.5);padding:32px 0 56px;
       color:var(--faint);font-size:12.5px;text-align:center}
footer .warn{max-width:880px;margin:16px auto 0;font-size:10.5px;line-height:1.55}

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  section{padding:var(--sp-5) 0}
  .wrap{padding:0 18px}
  .hide-sm{display:none}
  .nav .wrap{gap:12px}
  .nav .btn{padding:9px 14px;font-size:12.5px;white-space:nowrap}
  .nav .links{display:none}
  .nav .links.open{display:flex;position:absolute;top:62px;left:0;right:0;flex-direction:column;
                   gap:0;background:var(--s1);border-bottom:1px solid var(--bord);padding:8px 18px}
  .nav .links.open a{padding:12px 0;border-bottom:1px solid rgba(42,49,66,.4)}
  .nav .burger{display:block}
  .grid-4,.grid-3,.grid-2,.prices{grid-template-columns:1fr}
  .price.star{order:-1}
}