@font-face{
  font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('/font/inter-latin.woff2') format('woff2');
}
:root{
  --black:#0b0d13; --ink:#11141c; --panel:#161a24; --panel-2:#1a1f2b; --raise:#222736;
  /* structure = neutre. L'or est un ACCENT, pas la charpente. */
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.14); --line-3:rgba(255,255,255,.22);
  --txt:#e9ecf1; --dim:#98a0ad; --faint:#646c7a;
  --gold:#d6b46c; --gold-b:#f4e6b0; --gold-d:#9a7226;
  --cyan:#6fd2e8; /* les yeux du robot — accent froid, à petite dose */
  --sans:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:var(--sans);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--black); color:var(--txt); font-family:var(--sans); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden}
body::before{content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(800px 460px at 18% -8%, rgba(90,162,255,.14), transparent 60%),
    radial-gradient(760px 480px at 82% 4%, rgba(139,140,247,.12), transparent 62%),
    radial-gradient(700px 520px at 8% 62%, rgba(45,212,191,.07), transparent 60%),
    radial-gradient(820px 620px at 96% 88%, rgba(240,180,41,.07), transparent 62%);}
.wrap{position:relative; z-index:1; max-width:1120px; margin:0 auto; padding:0 26px}
a{color:inherit; text-decoration:none}

.gold{background:linear-gradient(120deg,var(--gold-d),var(--gold-b) 46%,#f8efc8 52%,var(--gold) 62%,var(--gold-d));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.kicker{font-size:11.5px; letter-spacing:.36em; text-transform:uppercase; color:var(--faint); font-weight:600}
.kicker.acc{color:var(--gold)}
.serif{font-family:var(--serif)}
.rule{height:1px; background:linear-gradient(90deg,transparent,var(--line-2),transparent); border:0; margin:0}

/* logo */
.logo{display:flex; align-items:center; gap:13px}
.seal{flex:0 0 auto; display:block}
img.seal, img.seal-xl{filter:drop-shadow(0 4px 18px rgba(214,180,108,.18))}
.logo:hover img.seal{filter:drop-shadow(0 4px 22px rgba(214,180,108,.34))}
.wordmark{font-size:19px; letter-spacing:.22em; text-transform:uppercase; font-weight:600; color:var(--txt)}
.wordmark b{font-weight:600}

/* nav */
header{position:sticky; top:0; z-index:30; backdrop-filter:blur(10px);
  background:linear-gradient(180deg,rgba(9,9,11,.9),rgba(9,9,11,.55)); border-bottom:1px solid var(--line)}
nav{display:flex; align-items:center; height:74px}
.nav-links{display:flex; gap:30px; margin-left:52px}
.nav-links a{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); transition:color .2s}
.nav-links a:hover, .nav-links a.on{color:var(--gold)}
.nav-cta{margin-left:auto}
.btn{display:inline-flex; align-items:center; gap:9px; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  font-weight:600; cursor:pointer; padding:13px 24px; border:1px solid var(--line-2); transition:all .22s; background:transparent; color:var(--txt)}
.btn-gold{border-color:transparent; color:#231a06; position:relative;
  background:linear-gradient(120deg,#b98a2c,#e6cf82 48%,#f7ecc4 54%,#c9a556 64%,#b98a2c)}
.btn-gold:hover{transform:translateY(-2px); box-shadow:0 12px 30px -12px rgba(214,180,108,.5)}
.btn-line:hover{border-color:var(--gold); color:var(--gold)}
.btn-sm{padding:10px 18px; font-size:11px; letter-spacing:.16em}

/* hero */
.hero{text-align:center; padding:84px 0 66px}
.hero .seal-xl{margin:0 auto 30px; display:block}
.hero .kicker{display:block; margin-bottom:22px}
h1{font-family:var(--serif); font-weight:500; font-size:clamp(40px,7vw,78px); line-height:1.06; letter-spacing:-.01em; margin:0 0 24px}
h1 em{font-style:italic}
.lede{font-size:clamp(16px,2vw,19px); color:var(--dim); max-width:600px; margin:0 auto 38px; line-height:1.7}
.hero-cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.facts{display:flex; justify-content:center; flex-wrap:wrap; gap:0; margin-top:64px; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.fact{padding:26px 40px; position:relative}
.fact + .fact::before{content:""; position:absolute; left:0; top:22%; height:56%; width:1px; background:var(--line)}
.fact .n{font-family:var(--serif); font-size:32px; color:var(--gold); line-height:1}
.fact .l{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); margin-top:8px}

/* sections */
section{padding:80px 0; position:relative}
.sec-head{text-align:center; max-width:620px; margin:0 auto 52px}
.sec-head .kicker{display:block; margin-bottom:16px}
.sec-head h2{font-family:var(--serif); font-weight:500; font-size:clamp(28px,4vw,44px); margin:0 0 14px; letter-spacing:-.01em}
.sec-head p{color:var(--dim); font-size:15.5px; margin:0}

/* bots (liste accueil) */
.bots{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:0; border:1px solid var(--line)}
.bot{display:flex; gap:18px; padding:26px 28px; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  transition:background .25s; position:relative; background:transparent}
.bot:hover{background:linear-gradient(180deg,rgba(214,180,108,.05),transparent)}
.bot .idx{font-family:var(--serif); font-size:20px; color:var(--gold); flex:0 0 auto; width:38px; line-height:1.2; opacity:.9}
.bot .body h3{font-size:14px; letter-spacing:.14em; text-transform:uppercase; margin:2px 0 8px; font-weight:600; color:var(--txt)}
.bot .body p{margin:0; color:var(--dim); font-size:13.5px; line-height:1.55}
.bot::after{content:""; position:absolute; left:0; top:0; width:2px; height:0; background:linear-gradient(180deg,var(--gold),transparent); transition:height .3s}
.bot:hover::after{height:100%}

/* pricing */
.price-wrap{display:grid; grid-template-columns:1.15fr .85fr; gap:24px; align-items:stretch}
.price{position:relative; border:1px solid var(--line-2); padding:44px 40px; background:linear-gradient(180deg,var(--panel),var(--ink))}
.price.hero-card{border-color:var(--line-3)}
.corner{position:absolute; width:16px; height:16px; border:1px solid var(--gold); opacity:.8}
.corner.tl{top:12px; left:12px; border-right:0; border-bottom:0}
.corner.tr{top:12px; right:12px; border-left:0; border-bottom:0}
.corner.bl{bottom:12px; left:12px; border-right:0; border-top:0}
.corner.br{bottom:12px; right:12px; border-left:0; border-top:0}
.price .tier{font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin-bottom:20px}
.amount{display:flex; align-items:baseline; gap:8px; margin-bottom:8px}
.amount .n{font-family:var(--serif); font-size:66px; line-height:1; letter-spacing:-.02em}
.amount .per{color:var(--dim); font-size:15px; letter-spacing:.05em}
.promo{display:inline-flex; align-items:center; gap:10px; font-size:12px; letter-spacing:.08em; color:var(--gold);
  border:1px solid var(--line-2); padding:9px 15px; margin:18px 0 26px}
.promo code{font-family:var(--serif); font-style:italic; letter-spacing:.05em; background:rgba(214,180,108,.12); padding:2px 9px; color:var(--gold-b)}
.feats{list-style:none; padding:0; margin:0 0 30px; display:grid; gap:14px}
.feats li{display:flex; gap:13px; align-items:flex-start; font-size:14.5px; color:var(--dim)}
.feats li b{color:var(--txt); font-weight:600}
.dia{color:var(--gold); flex:0 0 auto; font-size:11px; margin-top:4px}
.price .btn{width:100%; justify-content:center}
.alt{display:flex; flex-direction:column; justify-content:center}
.alt h4{font-family:var(--serif); font-weight:500; font-size:24px; margin:0 0 12px}
.alt p{color:var(--dim); font-size:14.5px; margin:0 0 22px; line-height:1.7}

/* dashboard teaser */
.dash{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center}
.dash .txt .kicker{display:block; margin-bottom:16px}
.dash .txt h2{font-family:var(--serif); font-weight:500; font-size:clamp(26px,3.4vw,38px); margin:0 0 16px; letter-spacing:-.01em}
.dash .txt p{color:var(--dim); font-size:15.5px; margin:0 0 24px; line-height:1.7}
.steps{list-style:none; padding:0; margin:0; display:grid; gap:16px}
.steps li{display:flex; gap:16px; align-items:baseline; font-size:14.5px; color:var(--dim)}
.steps .s{font-family:var(--serif); color:var(--gold); font-size:15px; flex:0 0 auto}
.frame{border:1px solid var(--line-2); background:var(--ink); overflow:hidden}
.frame-bar{display:flex; align-items:center; gap:8px; padding:13px 16px; border-bottom:1px solid var(--line)}
.frame-bar i{width:9px; height:9px; border-radius:50%; border:1px solid var(--line-2)}
.frame-url{margin-left:12px; font-size:12px; letter-spacing:.1em; color:var(--faint)}
.frame-body{padding:16px}
.drow{display:flex; align-items:center; gap:14px; padding:15px; border:1px solid var(--line); margin-bottom:10px; background:rgba(255,255,255,.01)}
.drow .di{font-family:var(--serif); color:var(--gold); font-size:16px; width:26px; text-align:center; flex:0 0 auto}
.drow .dm{flex:1; min-width:0}
.drow .dm b{display:block; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase}
.drow .dm span{font-size:11.5px; color:var(--faint); letter-spacing:.04em}
.sw{width:40px; height:22px; border:1px solid var(--line-2); position:relative; flex:0 0 auto; background:rgba(214,180,108,.1)}
.sw::after{content:""; position:absolute; top:2px; right:2px; width:16px; height:16px; background:linear-gradient(120deg,#b98a2c,#f4e6b0); }
.sw.off{background:transparent} .sw.off::after{left:2px; right:auto; background:#3a3730}
.drow .days{font-size:11.5px; color:var(--gold); letter-spacing:.06em}

/* ===== page « à la carte » ===== */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:20px}
.card{position:relative; border:1px solid var(--line); background:linear-gradient(180deg,var(--panel),var(--ink));
  padding:30px 28px 28px; display:flex; flex-direction:column; transition:border-color .25s, transform .25s}
.card:hover{border-color:var(--line-2); transform:translateY(-3px)}
.card .idx{font-family:var(--serif); font-size:15px; color:var(--gold); opacity:.75; letter-spacing:.06em}
.card h3{font-size:15px; letter-spacing:.16em; text-transform:uppercase; margin:10px 0 10px; font-weight:600}
.card .tag{color:var(--dim); font-size:14px; margin:0 0 20px; line-height:1.6; min-height:44px}
.card ul{list-style:none; padding:0; margin:0 0 24px; display:grid; gap:10px}
.card ul li{display:flex; gap:11px; font-size:13.5px; color:var(--dim); line-height:1.5}
.card .foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:16px;
  border-top:1px solid var(--line); padding-top:20px}
.card .cost{display:flex; align-items:baseline; gap:5px}
.card .cost .n{font-family:var(--serif); font-size:32px; line-height:1; color:var(--gold)}
.card .cost .per{font-size:12px; color:var(--faint); letter-spacing:.06em}
.flag{position:absolute; top:0; right:0; font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); border-left:1px solid var(--line); border-bottom:1px solid var(--line); padding:7px 13px; background:rgba(214,180,108,.06)}
.card.premium{border-color:var(--line-2)}
.band{border:1px solid var(--line-2); background:linear-gradient(180deg,var(--panel),var(--ink)); padding:34px 38px;
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; position:relative; margin-top:56px}
.band h4{font-family:var(--serif); font-weight:500; font-size:26px; margin:0 0 8px}
.band p{margin:0; color:var(--dim); font-size:14.5px; max-width:520px}
.note{color:var(--faint); font-size:12.5px; text-align:center; margin-top:34px; line-height:1.7}

/* footer */
footer{border-top:1px solid var(--line); padding:52px 0 64px}
.foot{display:flex; justify-content:space-between; gap:34px; flex-wrap:wrap; align-items:flex-start}
.foot .tag{color:var(--faint); font-size:13px; margin-top:14px; max-width:280px; line-height:1.6}
.foot-links{display:flex; gap:28px; flex-wrap:wrap}
.foot-links a{color:var(--dim); font-size:12px; letter-spacing:.16em; text-transform:uppercase}
.foot-links a:hover{color:var(--gold)}

@media(max-width:860px){
  .nav-links{display:none}
  .price-wrap{grid-template-columns:1fr}
  .dash{grid-template-columns:1fr; gap:32px}
  .bots{grid-template-columns:1fr}
  .hero{padding:56px 0 44px}
  .cards{grid-template-columns:1fr}
  .band{padding:28px 24px}
}
/* ===== typo (Inter) — plus de serif : les gros titres sont en sans, serrés ===== */
h1{font-weight:700; letter-spacing:-.035em; line-height:1.04}
h1 em{font-style:normal; font-weight:700}
.sec-head h2{font-weight:650; letter-spacing:-.03em; line-height:1.12}
.dash .txt h2{font-weight:650; letter-spacing:-.03em; line-height:1.14}
.alt h4, .band h4{font-weight:650; letter-spacing:-.02em; line-height:1.2}
.card h3, .bot .body h3{letter-spacing:.13em; font-weight:600}
.card .tag{min-height:0}
.lede{line-height:1.65}
.kicker{font-size:11px; letter-spacing:.26em; font-weight:600}
.fact .n, .amount .n, .card .cost .n{font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.bot .idx, .card .idx, .drow .di, .steps .s{font-weight:600; letter-spacing:.02em; font-variant-numeric:tabular-nums}
.bot .idx{font-size:13px; width:30px; opacity:.85; padding-top:3px}
.card .idx{font-size:12px}
.promo code{font-style:normal; font-weight:700; letter-spacing:.08em}
.wordmark{font-weight:650; letter-spacing:.2em}

/* ===== icônes (Tabler) — neutres par défaut, l'or est réservé aux accents ===== */
.ico{width:22px; height:22px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; display:block; color:#c8cedb}
.ico-gold{stroke:url(#ig)}
.ico-cyan{color:var(--cyan)}
.ico-sm{width:15px; height:15px; stroke-width:2}
.ico-lg{width:30px; height:30px; stroke-width:1.5}
.ico-box{width:52px; height:52px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,rgba(214,180,108,.10),rgba(214,180,108,.02)); flex:0 0 auto; transition:border-color .25s}
.bot:hover .ico-box, .card:hover .ico-box{border-color:var(--line-2)}
.bot .head, .card .head{display:flex; align-items:center; gap:14px}
.card .head{margin-bottom:14px}
.feats li .ico-sm, .card ul li .ico-sm{margin-top:3px}
.nav-links a{display:inline-flex; align-items:center; gap:7px}
.nav-links .ico-sm{stroke-width:1.8}
.foot-links a{display:inline-flex; align-items:center; gap:7px}

/* ===== une couleur par bot : on repère le bot à sa teinte ===== */
.b-coins{--c:#f0b429; --c-soft:rgba(240,180,41,.13); --c-line:rgba(240,180,41,.32)}
.b-protect{--c:#ff6b6b; --c-soft:rgba(255,107,107,.13); --c-line:rgba(255,107,107,.32)}
.b-tickets{--c:#5aa2ff; --c-soft:rgba(90,162,255,.13); --c-line:rgba(90,162,255,.32)}
.b-leaderboard{--c:#a78bfa; --c-soft:rgba(167,139,250,.13); --c-line:rgba(167,139,250,.32)}
.b-stats{--c:#4ad6e8; --c-soft:rgba(74,214,232,.13); --c-line:rgba(74,214,232,.32)}
.b-sanction{--c:#ff9247; --c-soft:rgba(255,146,71,.13); --c-line:rgba(255,146,71,.32)}
.b-blacklist{--c:#f45b6c; --c-soft:rgba(244,91,108,.13); --c-line:rgba(244,91,108,.32)}
.b-utils{--c:#4ade80; --c-soft:rgba(74,222,128,.13); --c-line:rgba(74,222,128,.32)}
.b-rolesperso{--c:#f472b6; --c-soft:rgba(244,114,182,.13); --c-line:rgba(244,114,182,.32)}
.b-voicemaster{--c:#8b8cf7; --c-soft:rgba(139,140,247,.13); --c-line:rgba(139,140,247,.32)}
.b-antimove{--c:#2dd4bf; --c-soft:rgba(45,212,191,.13); --c-line:rgba(45,212,191,.32)}

.bot .ico-box, .card .ico-box{background:var(--c-soft,rgba(255,255,255,.03)); border-color:var(--c-line,var(--line))}
.bot .ico, .card .ico-lg{color:var(--c,#c8cedb); stroke:currentColor}
.bot:hover .ico-box, .card:hover .ico-box{background:var(--c-soft); border-color:var(--c-line);
  box-shadow:0 0 22px -6px var(--c-line)}
.bot::after{background:linear-gradient(180deg,var(--c,var(--gold)),transparent)}
.card:hover{border-color:var(--c-line,var(--line-2))}

/* ===== palette : l'or devient un accent (CTA, prix, premium), le reste est neutre ===== */
img.seal, img.seal-xl{filter:drop-shadow(0 6px 22px rgba(0,0,0,.6))}
.logo:hover img.seal{filter:drop-shadow(0 6px 22px rgba(111,210,232,.22))}
.nav-links a{color:var(--dim)}
.nav-links a:hover{color:var(--txt)}
.nav-links a.on{color:var(--txt)}
.btn-line:hover{border-color:var(--line-3); color:var(--txt); background:rgba(255,255,255,.03)}
.btn-buy:hover{border-color:rgba(214,180,108,.5); color:var(--gold-b); background:rgba(214,180,108,.06)}
.fact .n{color:var(--txt)}
.bot:hover{background:rgba(255,255,255,.022)}
.bot::after{background:linear-gradient(180deg,var(--gold),transparent)}
.ico-box{background:rgba(255,255,255,.03); border-color:var(--line)}
.bot:hover .ico-box, .card:hover .ico-box{border-color:var(--line-2); background:rgba(255,255,255,.05)}
.card.premium .ico-box{background:linear-gradient(160deg,rgba(214,180,108,.14),rgba(214,180,108,.03)); border-color:rgba(214,180,108,.28)}
.feats li .ico, .card ul li .ico{color:var(--cyan); opacity:.85}
.steps li .ico{color:var(--cyan); opacity:.85}
.price .tier{color:var(--dim)}
.amount .n{color:var(--txt)}
.amount .per{color:var(--faint)}
.promo{color:var(--dim); border-color:var(--line-2)}
.promo code{background:rgba(214,180,108,.14); color:var(--gold-b)}
.card .cost .n{color:var(--txt)}
.flag{color:var(--gold); border-color:rgba(214,180,108,.25); background:rgba(214,180,108,.07)}
.band .corner{border-color:var(--line-3); opacity:.6}
.drow .days{color:var(--cyan)}
.drow .ico{color:var(--c,#c8cedb)}
.drow{border-color:var(--c-line,var(--line)); background:linear-gradient(90deg,var(--c-soft,transparent),transparent 55%)}
.sw{background:var(--c-soft,rgba(255,255,255,.06)); border-color:var(--c-line,var(--line-2))}
.sw::after{background:var(--c,var(--gold))}
.sw.off{background:transparent} .sw.off::after{background:#3b4150}
.facts{border-color:var(--line)}
.frame{background:linear-gradient(180deg,var(--panel),var(--ink))}

/* ===== vignettes premium (rendus image, un par bot) ===== */
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.bots{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:20px; border:0}
.bot{display:block; padding:0; border:1px solid var(--line); border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg,var(--panel),var(--ink)); transition:border-color .25s, transform .25s, box-shadow .25s}
.bot:hover{transform:translateY(-3px); border-color:var(--c-line,var(--line-2)); background:linear-gradient(180deg,var(--panel),var(--ink));
  box-shadow:0 22px 50px -28px var(--c-line)}
.bot .thumb, .card .thumb{width:100%; height:auto; display:block; border-bottom:1px solid var(--line)}
.card .thumb{border:1px solid var(--line); border-radius:12px; margin-bottom:18px}
.bot .body{padding:20px 22px 24px}
.bot .body h3{margin:0 0 9px}
.bot::after{display:none}
.card h3{margin:0 0 10px}

/* ===== vrai rendu : les cartes sorties des bots ===== */
.shots{columns:2; column-gap:20px}
.shot{margin:0 0 20px; break-inside:avoid; border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:linear-gradient(180deg,var(--panel),var(--ink)); transition:border-color .25s, box-shadow .25s}
.shot:hover{border-color:var(--c-line,var(--line-2)); box-shadow:0 22px 50px -30px var(--c-line)}
.shot img{width:100%; height:auto; display:block}
.shot figcaption{padding:12px 16px; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint); border-top:1px solid var(--line)}
.shot figcaption code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:0;
  color:var(--c,var(--dim)); text-transform:none; font-size:12.5px}
@media(max-width:820px){ .shots{columns:1} }

/* arrondis : la grille carrée façon papier glacé faisait vieillot */
.btn{border-radius:9px}
.ico-box{border-radius:11px}
.card, .price, .band, .frame, .drow, .promo, .flag{border-radius:14px}
.flag{border-radius:0 13px 0 13px}
.card{overflow:hidden}
.bots{border-radius:16px; overflow:hidden}
.sw{width:42px; height:23px; border-radius:999px}
.sw::after{width:15px; height:15px; border-radius:50%; top:3px; right:3px}
.sw.off::after{left:3px; right:auto}
.frame-url{color:var(--faint)}
.foot-links a:hover{color:var(--txt)}
.price.alt{background:linear-gradient(180deg,rgba(255,255,255,.018),transparent)}

@media(max-width:520px){
  nav{height:64px}
  img.seal{width:36px; height:36px}
  .logo{gap:9px}
  .wordmark{font-size:14.5px; letter-spacing:.13em}
  .btn{padding:11px 15px; font-size:10.5px; letter-spacing:.12em}
  .ico-box{width:44px; height:44px}
  .ico-lg{width:24px; height:24px}
  .bot{padding:22px 20px}
  .price{padding:32px 24px}
  .amount .n{font-size:52px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}