/* en_site.css — Dark Quant marketing site v1.00 (25/09/2026) */
:root {
  color-scheme: dark;
  --page:#000; --surface-1:#0e0e0e; --surface-2:#161616; --surface-3:#1e1e1e;
  --text:#f4f4f2; --text-2:#c9c9c9; --muted:#8e8e8e;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --gold:#f7b404; --gold-2:#ffd34a; --gold-soft:rgba(247,180,4,.12); --on-gold:#0b0b0b;
  --pos:#3987e5; --neg:#e66767;
  --radius:14px;
}
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--page); color:var(--text); font:16px/1.6 Inter,system-ui,-apple-system,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
img { max-width:100%; height:auto; display:block; }
a { color:var(--gold); text-decoration:none; }
a:hover { text-decoration:underline; }
:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.container { max-width:1160px; margin:0 auto; padding:0 20px; }

/* ---- header ---- */
.top { position:sticky; top:0; z-index:20; background:rgba(0,0,0,.86); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.top::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg,transparent,var(--gold) 25%,var(--gold) 75%,transparent); opacity:.45; }
.top-in { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 20px; max-width:1160px; margin:0 auto; }
.top-in .logo img { height:40px; width:auto; }
.nav { display:flex; gap:4px; align-items:center; flex-wrap:wrap; }
.nav a { color:var(--text-2); font-size:14px; font-weight:600; padding:8px 12px; border-radius:8px; }
.nav a:hover { color:var(--text); background:var(--surface-2); text-decoration:none; }
.nav a.cta { color:var(--on-gold); background:var(--gold); margin-left:6px; }
.nav a.cta:hover { background:var(--gold-2); }

/* ---- buttons ---- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font:inherit; font-size:15px; font-weight:650; padding:12px 20px; border-radius:10px; border:1px solid var(--line-2); color:var(--text); background:transparent; cursor:pointer; }
.btn:hover { text-decoration:none; background:var(--surface-2); }
.btn.gold { background:var(--gold); color:var(--on-gold); border-color:transparent; }
.btn.gold:hover { background:var(--gold-2); }
.btn.block { width:100%; }

/* ---- sections ---- */
section { padding:84px 0; border-top:1px solid var(--line); }
section.hero { border-top:0; padding:88px 0 72px; }
.eyebrow { font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin:0 0 12px; }
h1 { font-size:clamp(34px,5.4vw,58px); line-height:1.08; letter-spacing:-.02em; margin:0 0 20px; font-weight:750; }
h2 { font-size:clamp(26px,3.4vw,38px); line-height:1.15; letter-spacing:-.015em; margin:0 0 14px; font-weight:720; }
h3 { font-size:18px; margin:0 0 6px; font-weight:680; }
.lead { font-size:clamp(17px,1.6vw,19px); color:var(--text-2); max-width:660px; margin:0 0 30px; }
.sec-head { max-width:720px; margin-bottom:40px; }
.sec-head p { color:var(--text-2); margin:0; }
.gold-text { color:var(--gold); }
.silver-text { background:linear-gradient(180deg,#fff,#a9a9a9); -webkit-background-clip:text; background-clip:text; color:transparent; }

.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.hero-note { margin-top:18px; font-size:13px; color:var(--muted); }
.shot { border:1px solid var(--line-2); border-radius:var(--radius); overflow:hidden; background:var(--surface-1); box-shadow:0 30px 80px -30px rgba(247,180,4,.18), 0 20px 50px -20px rgba(0,0,0,.9); }
.shot-cap { font-size:12px; color:var(--muted); margin-top:10px; }
.stack { position:relative; }
.stack .shot + .shot { margin-top:-40px; margin-left:12%; position:relative; }

/* ---- steps / features ---- */
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.card { background:var(--surface-1); border:1px solid var(--line); border-radius:var(--radius); padding:24px; }
.card p { color:var(--text-2); margin:0; font-size:15px; }
.num { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:14px; color:var(--gold); border:1px solid rgba(247,180,4,.45); background:var(--gold-soft); margin-bottom:14px; }
.icon { width:36px; height:36px; margin-bottom:14px; color:var(--gold); }
.two { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.checks { list-style:none; padding:0; margin:18px 0 0; display:grid; gap:10px; }
.checks li { padding-left:28px; position:relative; color:var(--text-2); }
.checks li::before { content:""; position:absolute; left:2px; top:.45em; width:14px; height:8px; border-left:2px solid var(--gold); border-bottom:2px solid var(--gold); transform:rotate(-45deg); }
.dash-shots { display:grid; gap:18px; margin-top:34px; }
.dash-shots .row2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; }

/* ---- library ---- */
.lib { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.rp { background:var(--surface-1); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; }
.rp .pic { aspect-ratio:1500/858; background:var(--surface-2); border-bottom:1px solid var(--line); overflow:hidden; }
.rp .pic img { width:100%; height:100%; object-fit:cover; }
.rp .pic.none { display:grid; place-items:center; color:var(--muted); font-size:13px; }
.rp .body { padding:20px 20px 22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.rp p { color:var(--text-2); font-size:14.5px; margin:0; flex:1; }
.tags { display:flex; flex-wrap:wrap; gap:6px; }
.tag { font-size:11.5px; font-weight:650; color:var(--text-2); border:1px solid var(--line-2); border-radius:999px; padding:3px 9px; }
.tag.gold { color:var(--gold); border-color:rgba(247,180,4,.45); }
.rp .foot { display:flex; justify-content:space-between; align-items:center; margin-top:4px; }
.price-sm { font-weight:750; font-size:20px; }

/* ---- pricing ---- */
.plans { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; }
.plan { background:var(--surface-1); border:1px solid var(--line); border-radius:var(--radius); padding:28px 24px; display:flex; flex-direction:column; }
.plan.featured { border-color:rgba(247,180,4,.55); background:linear-gradient(180deg,rgba(247,180,4,.07),var(--surface-1) 40%); }
.plan .kicker { font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.plan.featured .kicker { color:var(--gold); }
.plan h3 { font-size:22px; margin:8px 0 4px; }
.plan .price { font-size:40px; font-weight:780; letter-spacing:-.02em; margin:14px 0 2px; }
.plan .price small { font-size:15px; font-weight:600; color:var(--muted); letter-spacing:0; }
.plan .sub { color:var(--muted); font-size:14px; margin:0 0 18px; }
.plan ul { list-style:none; padding:0; margin:0 0 24px; display:grid; gap:9px; flex:1; align-content:start; }
.plan li { padding-left:24px; position:relative; color:var(--text-2); font-size:14.5px; }
.plan li::before { content:""; position:absolute; left:2px; top:.5em; width:11px; height:6px; border-left:2px solid var(--gold); border-bottom:2px solid var(--gold); transform:rotate(-45deg); }
.tiers { display:grid; gap:10px; margin:6px 0 22px; flex:1; align-content:start; }
.tier { border:1px solid var(--line); border-radius:10px; padding:12px 14px; background:var(--surface-2); }
.tier .t { display:flex; justify-content:space-between; font-weight:700; }
.tier .t span:last-child { color:var(--gold); }
.tier p { margin:4px 0 0; font-size:13.5px; color:var(--text-2); }
.toggle { display:inline-flex; border:1px solid var(--line-2); border-radius:999px; padding:3px; margin:10px 0 4px; }
.toggle button { font:inherit; font-size:13px; font-weight:650; color:var(--text-2); background:transparent; border:0; border-radius:999px; padding:5px 12px; cursor:pointer; }
.toggle button[aria-pressed="true"] { background:var(--gold); color:var(--on-gold); }
.pricing-note { margin-top:22px; font-size:13px; color:var(--muted); }

/* ---- faq ---- */
.faq { display:grid; gap:10px; max-width:860px; }
.faq details { background:var(--surface-1); border:1px solid var(--line); border-radius:12px; padding:0 20px; }
.faq summary { cursor:pointer; list-style:none; padding:18px 0; font-weight:650; display:flex; justify-content:space-between; gap:16px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--gold); font-size:22px; line-height:1; }
.faq details[open] summary::after { content:"–"; }
.faq details p { margin:0 0 18px; color:var(--text-2); }

/* ---- form ---- */
.form-wrap { display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:start; }
form.contact { background:var(--surface-1); border:1px solid var(--line); border-radius:var(--radius); padding:26px; display:grid; gap:14px; }
.frow { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
label.f { display:grid; gap:6px; font-size:13px; font-weight:600; color:var(--text-2); }
input,select,textarea { font:inherit; font-weight:400; font-size:15px; color:var(--text); background:var(--page); border:1px solid var(--line-2); border-radius:9px; padding:11px 12px; width:100%; }
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft); }
textarea { min-height:110px; resize:vertical; }
.consent { display:flex; font-weight:400; gap:10px; align-items:flex-start; font-size:13px; color:var(--muted); }
.consent input { width:auto; margin-top:3px; accent-color:var(--gold); }
.hp { position:absolute; left:-9999px; }

/* ---- footer ---- */
footer { border-top:1px solid var(--line); padding:44px 0 56px; color:var(--muted); font-size:13px; }
.foot-grid { display:grid; grid-template-columns:1fr 2fr; gap:36px; }
footer img { height:34px; width:auto; margin-bottom:12px; }
footer p { margin:0 0 10px; }
footer a { color:var(--text-2); }
.risk { border-left:2px solid var(--gold); padding-left:14px; }

/* ---- legal pages ---- */
.doc { max-width:780px; padding:64px 20px 80px; margin:0 auto; }
.doc h1 { font-size:38px; }
.doc h2 { font-size:22px; margin-top:36px; }
.doc p, .doc li { color:var(--text-2); }
.todo { background:rgba(247,180,4,.1); border:1px dashed rgba(247,180,4,.6); color:var(--gold); padding:1px 6px; border-radius:5px; font-size:14px; }

@media (max-width:980px) {
  .hero-grid, .two, .form-wrap { grid-template-columns:1fr; gap:36px; }
  .grid4 { grid-template-columns:1fr 1fr; }
  .lib, .plans { grid-template-columns:1fr 1fr; }
  .plans .plan.featured { order:-1; grid-column:1 / -1; }
  .foot-grid { grid-template-columns:1fr; gap:20px; }
}
@media (max-width:640px) {
  section { padding:60px 0; }
  section.hero { padding:48px 0 52px; }
  .container { padding:0 16px; }
  .top-in { padding:10px 16px; }
  .top-in .logo img { height:30px; }
  .nav a:not(.cta) { display:none; }
  .grid3, .grid4, .lib, .plans, .dash-shots .row2, .frow { grid-template-columns:1fr; }
  .stack .shot + .shot { margin-left:6%; margin-top:-24px; }
  .plan .price { font-size:34px; }
}

/* v1.01 — brief et pièces jointes */
.brief { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.brief em { color:var(--text); font-style:normal; font-weight:650; }
ul.mini { list-style:none; padding:0; margin:10px 0 0; display:grid; gap:6px; }
ul.mini li { color:var(--text-2); font-size:14.5px; padding-left:16px; position:relative; }
ul.mini li::before { content:""; position:absolute; left:2px; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--gold); }
.receive { display:grid; grid-template-columns:1.25fr 1fr; gap:40px; align-items:center; margin-top:48px; }
.receive .checks strong { color:var(--text); }
.plans.two { grid-template-columns:repeat(2,minmax(0,420px)); justify-content:center; }
.files { display:grid; gap:8px; }
.flabel { font-size:13px; font-weight:600; color:var(--text-2); }
.flabel small { font-weight:400; color:var(--muted); }
input[type=file] { padding:8px 10px; font-size:13.5px; color:var(--text-2); }
input[type=file]::file-selector-button { font:inherit; font-weight:600; color:var(--on-gold); background:var(--gold); border:0; border-radius:7px; padding:6px 12px; margin-right:10px; cursor:pointer; }
@media (max-width:980px) { .brief { grid-template-columns:1fr 1fr; } .receive { grid-template-columns:1fr; } .plans.two { grid-template-columns:1fr 1fr; } .plans.two .plan.featured { grid-column:auto; order:0; } }
@media (max-width:640px) { .brief, .plans.two { grid-template-columns:1fr; } }

/* v1.02 — sélecteur de fichier aux libellés anglais (le bouton natif suit la langue du navigateur) */
.filepick { position:relative; display:flex; align-items:center; gap:12px; background:var(--page); border:1px solid var(--line-2); border-radius:9px; padding:8px 10px; cursor:pointer; min-width:0; }
.filepick:hover { border-color:rgba(247,180,4,.5); }
.filepick input { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; clip:rect(0 0 0 0); }
.filepick:focus-within { border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft); }
.fbtn { flex:none; font-size:13.5px; font-weight:650; color:var(--on-gold); background:var(--gold); border-radius:7px; padding:6px 12px; }
.fname { font-size:13.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.fname.set { color:var(--text-2); }