/* SoldTrack app — thème graphite (repris d'Azimute), accent vert #22C55E. Grille de 4 px. */
:root{
 --s0:#0f0f10;--bg:#141415;--card:#19191b;--raised:#232325;--hover:#1d1d1f;
 --line:rgba(237,237,237,.08);--line2:rgba(237,237,237,.05);--line3:rgba(237,237,237,.16);
 --tx:#ededed;--tx2:#a1a1a6;--faint:#85858b;--acc:#ededed;
 --green:#22C55E;--greenbg:rgba(34,197,94,.12);--in:#4cc38a;--inbg:rgba(76,195,138,.1);
 --out:#e5484d;--outbg:rgba(229,72,77,.1);--warn:#e8913a;--warnbg:rgba(232,145,58,.1);
 --input:#0f0f10;--hov3:rgba(255,255,255,.06);--pri-tx:#141415;--pri-h:#fff;--ombre:rgba(0,0,0,.5);
 --grille:rgba(237,237,237,.05);--scroll:#2c2c2f;
 --ease:cubic-bezier(.22,1,.36,1);--mono:'Geist Mono',ui-monospace,monospace;
}
:root[data-theme="light"]{
 --s0:#f7f7f8;--bg:#fafafa;--card:#fff;--raised:#ececee;--hover:#f0f0f2;
 --line:rgba(23,23,23,.09);--line2:rgba(23,23,23,.06);--line3:rgba(23,23,23,.18);
 --tx:#171717;--tx2:#525252;--faint:#737373;--acc:#171717;
 --green:#16a34a;--greenbg:rgba(22,163,74,.1);--in:#16a34a;--inbg:rgba(22,163,74,.1);--out:#dc2626;--outbg:rgba(220,38,38,.08);
 --warn:#c2410c;--warnbg:rgba(194,65,12,.08);--input:#fff;--hov3:rgba(0,0,0,.05);--pri-tx:#fff;--pri-h:#000;
 --ombre:rgba(0,0,0,.12);--grille:rgba(23,23,23,.06);--scroll:#d4d4d8;color-scheme:light}
*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:dark;scrollbar-color:var(--scroll) transparent}
:root[data-theme="light"]{color-scheme:light}
body{background:var(--bg);color:var(--tx);font-family:'Geist',system-ui,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;line-height:20px}
.mono,.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
button,input,select{font-family:inherit;font-size:inherit;color:inherit}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
[hidden]{display:none!important}

/* ---------- Marque ---------- */
.marque{display:flex;align-items:center;gap:10px;font-size:17px;line-height:24px;font-weight:600;letter-spacing:-.02em;color:var(--tx)}
.marque svg{width:22px;height:22px;color:var(--tx);flex:0 0 auto}

/* ---------- Structure ---------- */
#app{display:flex;min-height:100vh}
.nav{flex:0 0 264px;background:var(--s0);color:var(--tx2);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;border-right:1px solid var(--line)}
.nav-tete{height:64px;padding:0 20px;display:flex;align-items:center;border-bottom:1px solid var(--line)}
.nav-corps{flex:1;overflow-y:auto;padding:16px 12px}
.nav-grp{font:12px/16px var(--mono);color:var(--faint);margin:28px 8px 8px}
.nav-grp:first-child{margin-top:4px}
.nav-lien{display:flex;align-items:center;gap:12px;width:100%;height:36px;padding:0 10px;margin-bottom:2px;border:1px solid transparent;border-radius:8px;color:var(--tx2);font-size:15px;cursor:pointer;transition:background-color .15s var(--ease),color .15s var(--ease)}
.nav-lien:hover{background:var(--hover);color:var(--tx)}
.nav-lien.on{background:var(--raised);border-color:var(--line);color:var(--tx);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.nav-ic{width:24px;height:24px;border-radius:6px;margin-left:-3px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;background:color-mix(in srgb,currentColor 12%,transparent)}
.nav-ic svg{width:15px;height:15px}
.nav-lien b{margin-left:auto;font:400 12px/16px var(--mono);color:var(--faint)}
.nav-plan{margin:24px 8px 0;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.nav-plan p{font-size:13px;color:var(--tx2);margin:4px 0 12px}
.nav-plan .btn{width:100%}
.nav-pied{padding:12px 16px;border-top:1px solid var(--line);display:flex;align-items:center;gap:8px;font-size:12px;color:var(--faint)}
.nav-pied .email{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-pied button{background:none;border:1px solid var(--line);color:var(--tx2);height:28px;min-width:28px;padding:0 8px;border-radius:6px;font-size:12px;cursor:pointer}
.nav-pied button:hover{background:var(--raised);color:var(--tx)}
main.zone{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{background:var(--bg);border-bottom:1px solid var(--line);height:64px;padding:0 32px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:10}
.topbar .fil{font-size:14px;color:var(--tx2);display:flex;align-items:center;gap:8px;min-width:0}
.topbar .fil a:hover{color:var(--tx)}
.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.maj{font:12px/16px var(--mono);color:var(--faint);display:flex;align-items:center;gap:6px}
.maj i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--greenbg)}
.btn.burger{display:none;width:32px;padding:0}
.page{padding:32px 40px;width:100%;max-width:none}
.page-titre{font-size:40px;line-height:48px;font-weight:300;letter-spacing:-.02em;margin:4px 0 8px}
.page-sous{color:var(--tx2);margin-bottom:28px;max-width:720px}

/* ---------- KPI ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:12px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px}
.kpi .lab{font-size:14px;color:var(--tx2)}
.kpi .val{font-size:30px;line-height:36px;font-weight:500;margin-top:12px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.kpi .pied{font:12px/16px var(--mono);color:var(--faint);margin-top:8px}

/* ---------- Blocs ---------- */
.rangee{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-bottom:12px}
.bloc{background:var(--card);border:1px solid var(--line);border-radius:14px;margin-bottom:12px;overflow:hidden}
.rangee>.bloc{margin-bottom:0}
.bloc-tete{padding:16px 20px;min-height:64px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bloc-tete h2{font-size:15px;line-height:20px;font-weight:500}
.bloc-tete p{font-size:13px;color:var(--faint)}
.bloc-tete .droite{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bloc-corps{padding:20px}

/* ---------- Tableaux ---------- */
.tab-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse}
th{font:12px/16px var(--mono);color:var(--faint);text-align:left;font-weight:400;padding:12px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:10px 16px;border-bottom:1px solid var(--line2);vertical-align:middle}
tr:last-child td{border-bottom:none}
th.r,td.r{text-align:right}
tbody tr{cursor:pointer;transition:background-color .12s var(--ease)}
tbody tr:hover{background:var(--hov3)}
.rang{font:12px/16px var(--mono);color:var(--faint);width:40px}
.prod{display:flex;align-items:center;gap:12px;min-width:220px;max-width:520px}
.prod img,.thumb{width:44px;height:44px;border-radius:8px;object-fit:cover;background:var(--raised);flex:0 0 auto;border:1px solid var(--line)}
.prod .t{min-width:0}
.prod .t b{display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prod .t span{font-size:12px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.up{color:var(--in)}.down{color:var(--out)}.zero{color:var(--faint)}
.etoile{background:none;border:none;cursor:pointer;color:var(--faint);width:32px;height:32px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center}
.etoile:hover{background:var(--hov3);color:var(--tx)}
.etoile.on{color:#f5b84b}
.etoile svg{width:16px;height:16px}

/* ---------- Étiquettes, boutons, champs ---------- */
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;line-height:16px;padding:2px 8px;border-radius:6px;border:1px solid var(--line);background:var(--raised);color:var(--tx2);white-space:nowrap}
.tag.in{background:var(--inbg);color:var(--in);border-color:transparent}
.tag.green{background:var(--greenbg);color:var(--green);border-color:transparent}
.tag.warn{background:var(--warnbg);color:var(--warn);border-color:transparent}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 12px;border:1px solid var(--line);background:transparent;color:var(--tx);border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;white-space:nowrap;transition:background-color .15s var(--ease),border-color .15s var(--ease)}
.btn:hover{background:var(--hov3);border-color:var(--line3)}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.5;cursor:default}
.btn.pri{background:var(--tx);color:var(--pri-tx);border-color:transparent}
.btn.pri:hover{background:var(--pri-h)}
.btn.vert{background:var(--green);color:#052e14;border-color:transparent}
.btn.vert:hover{filter:brightness(1.08)}
.btn.dgr{color:var(--out);border-color:rgba(229,72,77,.3)}
input,select{min-height:32px;border:1px solid var(--line);border-radius:8px;padding:6px 10px;background:var(--input);color:var(--tx);font-size:13px}
input::placeholder{color:var(--faint)}
input:focus,select:focus{outline:none;border-color:color-mix(in srgb,var(--acc) 60%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 15%,transparent)}
.seg{display:inline-flex;height:32px;padding:2px;gap:2px;border:1px solid var(--line);border-radius:8px;background:var(--card)}
.seg button{background:none;border:none;padding:0 10px;border-radius:6px;font-size:13px;color:var(--tx2);cursor:pointer}
.seg button:hover{color:var(--tx)}
.seg button.on{background:var(--raised);color:var(--tx);font-weight:500}
.filtres{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:12px 20px;border-bottom:1px solid var(--line)}
.filtres input[type=search]{width:240px}
.filtres input.prix{width:96px}

/* ---------- Verrou (paywall) ---------- */
.verrou{display:flex;align-items:center;gap:16px;padding:20px;border-top:1px solid var(--line);background:linear-gradient(180deg,transparent,var(--greenbg))}
.verrou .ic{width:40px;height:40px;border-radius:10px;background:var(--greenbg);color:var(--green);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.verrou .ic svg{width:18px;height:18px}
.verrou b{display:block;font-weight:500}
.verrou p{font-size:13px;color:var(--tx2)}
.verrou .btn{margin-left:auto}
.flou{filter:blur(5px);pointer-events:none;user-select:none;opacity:.6}

/* ---------- Graphiques ---------- */
.graf{position:relative}
.graf svg{display:block;width:100%;height:240px;overflow:visible}
.graf .axe{font:11px/14px var(--mono);fill:var(--faint)}
.graf .grille{stroke:var(--grille)}
.graf .courbe{fill:none;stroke:var(--green);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.graf .aire{fill:url(#gvert)}
.graf .barre{fill:var(--green);opacity:.75}
.graf .pt{fill:var(--green);stroke:var(--card);stroke-width:2}
.barres-h .l{display:grid;grid-template-columns:150px minmax(0,1fr) 90px;gap:12px;align-items:center;padding:6px 0;font-size:13px;cursor:pointer}
.barres-h .l:hover .nom{color:var(--tx)}
.barres-h .nom{color:var(--tx2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barres-h .piste{height:8px;border-radius:4px;background:var(--raised);overflow:hidden}
.barres-h .piste i{display:block;height:100%;background:var(--green);border-radius:4px}
.barres-h .v{text-align:right;font:12px/16px var(--mono);color:var(--tx2)}

/* ---------- Fiche produit ---------- */
.fiche{display:grid;grid-template-columns:320px minmax(0,1fr);gap:24px;margin-bottom:24px}
.fiche-img{width:100%;aspect-ratio:1;border-radius:14px;object-fit:cover;background:var(--raised);border:1px solid var(--line)}
.fiche h1{font-size:24px;line-height:32px;font-weight:500;letter-spacing:-.01em;margin-bottom:8px}
.fiche .loja{color:var(--tx2);margin-bottom:16px;display:inline-flex;gap:6px;align-items:center}
.fiche .loja:hover{color:var(--tx)}
.fiche .actions{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.mini-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.mini-kpis div{border:1px solid var(--line);border-radius:10px;padding:12px;background:var(--card)}
.mini-kpis span{display:block;font-size:12px;color:var(--faint)}
.mini-kpis b{display:block;font-size:20px;line-height:28px;font-weight:500;margin-top:4px;font-variant-numeric:tabular-nums}
.cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.carte{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card);cursor:pointer;transition:border-color .15s var(--ease),transform .15s var(--ease)}
.carte:hover{border-color:var(--line3);transform:translateY(-2px)}
.carte img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--raised);display:block}
.carte div{padding:10px 12px}
.carte b{display:block;font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.carte span{font:12px/16px var(--mono);color:var(--faint)}

/* ---------- Vide, chargement, toast ---------- */
.vide{text-align:center;padding:48px 20px;color:var(--faint)}
.vide b{display:block;font-size:15px;color:var(--tx);margin-bottom:8px;font-weight:500}
.charge{padding:48px;text-align:center;color:var(--faint)}
.squelette{height:44px;border-radius:8px;background:linear-gradient(90deg,var(--raised),var(--hover),var(--raised));background-size:200% 100%;animation:sq 1.2s infinite}
@keyframes sq{to{background-position:-200% 0}}

.pager{display:flex;gap:8px;align-items:center;justify-content:flex-end;padding:12px 20px;border-top:1px solid var(--line);font-size:13px;color:var(--faint)}

/* ---------- Modale (onboarding) ---------- */
.voile{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:80;display:flex;align-items:center;justify-content:center;padding:16px}
.modale{background:var(--card);border:1px solid var(--line);border-radius:16px;width:100%;max-width:560px;max-height:90vh;overflow:auto;padding:28px;box-shadow:0 24px 64px var(--ombre)}
.modale h2{font-size:24px;line-height:32px;font-weight:500;letter-spacing:-.01em}
.modale .sous{color:var(--tx2);margin:6px 0 20px}
.choix{display:grid;gap:8px;margin-bottom:20px}
.choix button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--bg);cursor:pointer}
.choix button span{font-size:12px;color:var(--faint)}
.choix button.on{border-color:var(--green);background:var(--greenbg)}
.puces{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.puces button{padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--bg);cursor:pointer;font-size:13px;color:var(--tx2)}
.puces button.on{border-color:var(--green);color:var(--tx);background:var(--greenbg)}
.etape{font:12px/16px var(--mono);color:var(--faint);margin-bottom:8px}

/* ---------- Connexion ---------- */
body.cx{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(800px 400px at 50% -10%,var(--greenbg),transparent),var(--bg)}
.cx-carte{width:100%;max-width:400px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:32px;box-shadow:0 24px 64px var(--ombre)}
.cx-logo{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:600;letter-spacing:-.02em;margin-bottom:28px}
.cx-logo svg{width:24px;height:24px;color:var(--tx)}
.cx-carte h1{font-size:24px;line-height:32px;font-weight:500;letter-spacing:-.01em}
.cx-sous{color:var(--tx2);margin:6px 0 0}
.cx-form{margin-top:24px}
.cx-form label{display:block;font-size:13px;color:var(--tx2);margin-bottom:6px}
.cx-form input{width:100%;height:44px;font-size:15px}
.cx-form .btn{width:100%;height:44px;margin-top:16px;font-size:14px}
.cx-msg{margin-top:16px;font-size:13px;padding:10px 12px;border-radius:8px}
.cx-msg.ok{background:var(--inbg);color:var(--in)}
.cx-msg.err{background:var(--outbg);color:var(--out)}
.cx-pied{margin-top:24px;font-size:12px;color:var(--faint);text-align:center}
.cx-pied a{text-decoration:underline}

/* ---------- Mobile ---------- */
@media(max-width:1000px){
 .rangee,.fiche{grid-template-columns:1fr}
 .fiche-img{max-width:320px}
}
@media(max-width:640px){
 html,body{overflow-x:hidden}
 .topbar{padding:8px 16px;height:56px}
 .maj span{display:none}
 .page{padding:20px 16px}
 .page-titre{font-size:28px;line-height:36px}
 .kpis{grid-template-columns:1fr 1fr;gap:8px}
 .kpi{padding:16px}.kpi .val{font-size:22px;line-height:28px}
 .bloc-tete{padding:12px 16px}
 .filtres{padding:12px 16px}.filtres input[type=search]{width:100%}
 .prod{min-width:220px}
 input,select{font-size:16px}
 .barres-h .l{grid-template-columns:110px minmax(0,1fr) 70px}
 .verrou{flex-wrap:wrap}.verrou .btn{margin-left:0;width:100%}
}

/* ---------- Finitions premium ---------- */
.page.entre{animation:entre .35s var(--ease)}
@keyframes entre{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.page.entre{animation:none}}
.sur-titre{font:12px/16px var(--mono);color:var(--faint);margin-top:4px}
.sur-titre::first-letter{text-transform:uppercase}
.nav-pied button svg{display:block}
.spark{display:inline-block;vertical-align:middle;overflow:visible}
.spark polyline{fill:none;stroke:var(--faint);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.spark.up polyline{stroke:var(--green)}
.medaille{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;font:500 12px/1 var(--mono)}
.medaille.m1{background:rgba(245,184,75,.16);color:#f5b84b}
.medaille.m2{background:rgba(200,200,210,.14);color:#c9c9d1}
.medaille.m3{background:rgba(205,127,50,.16);color:#d8955a}
:root[data-theme="light"] .medaille.m1{color:#a16207}:root[data-theme="light"] .medaille.m2{color:#52525b}:root[data-theme="light"] .medaille.m3{color:#9a3412}
.prod img,.thumb{width:48px;height:48px;border-radius:10px;transition:transform .2s var(--ease)}
tbody tr:hover .prod img{transform:scale(1.06)}
.kpi{position:relative;overflow:hidden;transition:border-color .2s var(--ease)}
.kpi:hover{border-color:var(--line3)}
.kpi:first-child::after{content:"";position:absolute;inset:auto -40px -60px auto;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,var(--greenbg),transparent 70%);pointer-events:none}
/* Produit du jour */
.vedette{display:grid;grid-template-columns:120px minmax(0,1fr) 180px;gap:20px;align-items:center;padding:16px;margin-bottom:12px;border:1px solid var(--line);border-radius:16px;
 background:linear-gradient(120deg,var(--greenbg),transparent 55%),var(--card);transition:border-color .2s var(--ease),transform .2s var(--ease)}
.vedette:hover{border-color:color-mix(in srgb,var(--green) 45%,transparent);transform:translateY(-1px)}
.vedette img,.vedette .vimg{width:120px;height:120px;border-radius:12px;object-fit:cover;background:var(--raised);display:block}
.vedette h2{font-size:20px;line-height:28px;font-weight:500;letter-spacing:-.01em;margin:8px 0 2px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.vedette p{color:var(--faint);font-size:13px}
.vstats{display:flex;gap:24px;margin-top:12px;flex-wrap:wrap}
.vstats span{display:block;font-size:12px;color:var(--faint)}
.vstats b{font-size:18px;line-height:24px;font-weight:500;font-variant-numeric:tabular-nums}
.vspark .spark{width:180px;height:64px}
.vspark .spark polyline{stroke-width:2.2}
/* Encart d'offre (barre latérale) */
.nav-plan{position:relative;background:linear-gradient(160deg,var(--greenbg),transparent 60%),var(--card);border-color:color-mix(in srgb,var(--green) 25%,var(--line))}
/* Connexion : page en deux colonnes avec mosaïque de vrais produits */
body.cx.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);padding:0;align-items:stretch}
.cx-gauche{display:flex;align-items:center;justify-content:center;padding:32px}
.cx-droite{position:relative;overflow:hidden;border-left:1px solid var(--line);background:var(--s0)}
.mosaique{position:absolute;inset:-40px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;transform:rotate(-6deg) scale(1.08);opacity:.9;animation:defile 60s linear infinite}
.mosaique img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px;border:1px solid var(--line);background:var(--raised)}
@keyframes defile{to{transform:rotate(-6deg) scale(1.08) translateY(-25%)}}
@media (prefers-reduced-motion:reduce){.mosaique{animation:none}}
.cx-droite::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,15,16,.2),rgba(15,15,16,.85) 75%)}
.cx-preuve{position:absolute;left:40px;right:40px;bottom:40px;z-index:1;color:#ededed}
.cx-preuve .live{display:inline-flex;align-items:center;gap:8px;font:12px/16px var(--mono);color:#a1a1a6;margin-bottom:12px}
.cx-preuve .live i{width:6px;height:6px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 3px rgba(34,197,94,.2);animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(34,197,94,0)}}
.cx-preuve h2{font-size:32px;line-height:40px;font-weight:500;letter-spacing:-.02em;max-width:460px}
.cx-preuve p{color:#a1a1a6;margin-top:8px;max-width:420px}
.cx-chiffres{display:flex;gap:32px;margin-top:20px}
.cx-chiffres b{display:block;font-size:24px;line-height:32px;font-weight:500;font-variant-numeric:tabular-nums}
.cx-chiffres span{font-size:12px;color:#85858b}
@media(max-width:900px){body.cx.split{display:flex;align-items:center;justify-content:center;padding:24px}.cx-droite{display:none}.cx-gauche{padding:0;width:100%;justify-content:center}}
@media(max-width:640px){.vedette{grid-template-columns:72px minmax(0,1fr);gap:12px}.vedette img,.vedette .vimg{width:72px;height:72px}.vspark{display:none}.vedette h2{font-size:16px;line-height:22px}}

.rangee .prod{min-width:180px;max-width:300px}
.rangee td,.rangee th{padding-left:12px;padding-right:12px}
:root[data-theme="light"] .cx-droite::after{background:linear-gradient(180deg,rgba(15,15,16,.15),rgba(15,15,16,.85) 75%)}
:root[data-theme="light"] body.cx{background:radial-gradient(800px 400px at 50% -10%,rgba(34,197,94,.10),transparent),var(--bg)}
:root[data-theme="light"] .nav-plan{background:linear-gradient(160deg,rgba(22,163,74,.08),transparent 60%),var(--card)}
:root[data-theme="light"] .vedette{background:linear-gradient(120deg,rgba(22,163,74,.08),transparent 55%),var(--card)}

/* ---------- Verrous Pro et plans ---------- */
.cadenas{display:inline-flex;align-items:center;gap:4px;color:var(--faint);font:500 11px/1 var(--mono)}
.cadenas svg{width:12px;height:12px}
.cadenas i{font-style:normal;color:var(--green);background:var(--greenbg);padding:2px 5px;border-radius:4px}
.mini-pro{font:600 10px/1 var(--mono);color:var(--green);background:var(--greenbg);padding:2px 4px;border-radius:4px;margin-left:4px;vertical-align:1px}
.kpi .val .cadenas{font-size:14px}.kpi .val .cadenas svg{width:16px;height:16px}
.periode{display:flex;justify-content:center;margin-bottom:20px}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
.plan{position:relative;border:1px solid var(--line);border-radius:16px;padding:24px;background:var(--card)}
.plan.star{border:1.5px solid var(--green);box-shadow:0 12px 40px -12px color-mix(in srgb,var(--green) 35%,transparent);background:linear-gradient(180deg,var(--greenbg),transparent 40%),var(--card)}
.plan-badge{position:absolute;top:-11px;left:24px;background:var(--green);color:#052e14;font:600 11px/1 var(--mono);padding:5px 8px;border-radius:999px}
.plan-nom{font-size:16px;font-weight:600}
.plan-pitch{font-size:13px;color:var(--tx2);margin:4px 0 16px;min-height:40px}
.plan-prix{font-size:36px;line-height:44px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.plan-prix small{font-size:14px;font-weight:400;color:var(--faint);margin-left:4px}
.plan-fact{font:12px/16px var(--mono);color:var(--faint);margin:4px 0 16px;min-height:16px}
.plan .btn{height:40px}
.plan-l{list-style:none;display:grid;gap:8px;font-size:13px;color:var(--tx2);margin-top:20px}
.plan-l li.off{color:var(--faint);text-decoration:line-through;text-decoration-color:var(--line3)}
.plan-bonus{margin-top:16px;padding:12px;border-radius:10px;background:var(--bg);border:1px dashed color-mix(in srgb,var(--green) 40%,var(--line));display:grid;gap:6px;font-size:13px}
.plan-bonus b{font-size:12px;font-family:var(--mono);color:var(--green)}
.plan-garantie{text-align:center;margin-top:20px;font-size:13px;color:var(--tx2)}
@media(max-width:1000px){.plans{grid-template-columns:1fr}.plan.star{order:-1}}

/* ---------- Onboarding plein écran ---------- */
.ob{position:fixed;inset:0;z-index:90;background:var(--s0);overflow:auto;display:flex;flex-direction:column;align-items:center;padding:24px 16px 40px}
.ob-top{margin:8px 0 24px}
.ob-box{width:100%;max-width:1100px;min-height:min(640px,calc(100vh - 120px));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid var(--line);border-radius:24px;background:var(--card);overflow:hidden;box-shadow:0 30px 80px -40px var(--ombre)}
.ob-box.wide{grid-template-columns:1fr;max-width:1200px}
.ob-main{display:flex;flex-direction:column;padding:40px 48px}
.ob-prog{height:4px;border-radius:2px;background:var(--raised);overflow:hidden;margin-bottom:auto}
.ob-prog i{display:block;height:100%;background:var(--green);border-radius:2px;transition:width .4s var(--ease)}
.ob-body{margin:48px 0;animation:entre .35s var(--ease)}
.ob-box.wide .ob-body{margin:32px 0}
.ob-body h2{font-size:30px;line-height:38px;font-weight:600;letter-spacing:-.02em}
.ob-body .sous{color:var(--tx2);margin:6px 0 24px}
.ob-l{display:block;font-size:13px;color:var(--tx2);margin-bottom:16px}
.ob-l small{color:var(--faint)}
.ob-l input{display:block;width:100%;height:44px;margin-top:6px;font-size:15px}
.ob-q{font-weight:500;margin:20px 0 10px}
.ob-chips{display:flex;flex-wrap:wrap;gap:8px}
.ob-chip{padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:var(--bg);cursor:pointer;font-size:14px;color:var(--tx2);transition:all .15s var(--ease)}
.ob-chip:hover{border-color:var(--line3);color:var(--tx)}
.ob-chip.on{border-color:var(--green);background:var(--greenbg);color:var(--tx);font-weight:500}
.ob-nav{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ob-nav .btn{height:42px;padding:0 18px;font-size:14px}
.ob-side{display:flex;align-items:center;justify-content:center;padding:32px;border-left:1px solid var(--line);
 background:radial-gradient(circle at 1px 1px,var(--line) 1px,transparent 0) 0 0/18px 18px,var(--s0)}
.ob-card{width:100%;max-width:380px;border:1px solid var(--line);border-radius:20px;background:var(--card);padding:32px 24px;text-align:center;box-shadow:0 20px 50px -30px var(--ombre)}
.ob-ava{width:88px;height:88px;margin:0 auto 16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:600;color:var(--green);background:var(--greenbg)}
.ob-card b{display:block;font-size:18px}
.ob-card>span{display:block;font-size:13px;color:var(--faint);margin-top:4px}
.ob-tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:18px;min-height:32px}
.ob-tags span{font-size:12px;padding:5px 10px;border-radius:999px;border:1px solid var(--line);background:var(--bg)}
.ob-tags i{font-size:12px;color:var(--faint)}
@media(max-width:860px){.ob-box{grid-template-columns:1fr;min-height:0}.ob-side{display:none}.ob-main{padding:28px 20px}.ob-body{margin:32px 0}.ob-body h2{font-size:24px;line-height:32px}}
.ob-box.wide .ob-nav{position:sticky;bottom:0;background:var(--card);padding:16px 0 0;margin-bottom:-8px;border-top:1px solid var(--line)}
.ob-box.wide .ob-body{margin-bottom:16px}
/* CTA de plans (style TrendTrack) */
.plan-cta{width:100%;height:42px;font-size:14px;gap:8px}
.plan-cta.blanc{background:var(--card);border-color:var(--line3);color:var(--tx)}
.plan-cta.blanc:hover{background:var(--hov3)}
.plan-cta.actuel{cursor:default;background:var(--greenbg);color:var(--green);border-color:transparent}
.plan-cta span{font-size:15px}
.perdas{list-style:none;display:grid;gap:8px;margin:0 0 16px;font-size:14px}
.perdas li::before{content:"✕";color:var(--out);margin-right:8px}
.modale textarea{border:1px solid var(--line);border-radius:8px;padding:8px 12px;background:var(--input);color:var(--tx);font:inherit;resize:vertical}
/* Conseils produit */
.conselhos{border-color:color-mix(in srgb,var(--green) 30%,var(--line))}
.ins{list-style:none;display:grid;gap:10px;margin-bottom:20px}
.ins li{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.ins li .ins-ic{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--greenbg);color:var(--green)}
.ins li .ins-ic svg{width:16px;height:16px}
.hook .btn-ic svg{width:15px;height:15px}
.plan-bonus span svg{width:14px;height:14px;display:inline-block;vertical-align:-2px;color:var(--green)}
.ins li p{color:var(--tx2);line-height:22px}
.ins li b{color:var(--tx)}
.hooks{display:grid;gap:8px}
.hooks>b{font-size:13px;font-family:var(--mono);color:var(--green);margin-bottom:2px}
.hook{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;background:var(--greenbg)}
.hook span{font-weight:500}
.aviso{font-size:12px;color:var(--faint);margin-top:14px}
/* Radar */
.radar-teaser{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:12px}
.radar-teaser .val{filter:none}
.radar-expl{padding:12px 20px;font-size:13px;color:var(--tx2);border-bottom:1px solid var(--line)}
.seg button small{font:11px var(--mono);color:var(--faint);margin-left:4px}
.sub-num{font-size:11px;color:var(--faint);text-decoration:line-through}
@media(max-width:820px){.radar-teaser{grid-template-columns:1fr}}
/* Checklist « Comece aqui » */
.comecar{border-color:color-mix(in srgb,var(--green) 35%,var(--line))}
.cprog{width:160px;height:6px;border-radius:3px;background:var(--raised);overflow:hidden}
.cprog i{display:block;height:100%;background:var(--green)}
.csteps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:16px 20px}
.cstep{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);font-size:14px;transition:border-color .15s var(--ease)}
.cstep:hover{border-color:var(--line3)}
.cstep span{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line3);display:flex;align-items:center;justify-content:center;font-size:12px;flex:none}
.cstep.ok{color:var(--faint);text-decoration:line-through}
.cstep.ok span{background:var(--green);border-color:var(--green);color:#052e14}
@media(max-width:820px){.csteps{grid-template-columns:1fr}}
/* ---------- Conecte sua IA ---------- */
.ai-link{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.ai-link code{flex:1 1 280px;min-width:0;font-family:var(--mono);font-size:13px;color:var(--tx);word-break:break-all}
.ai-link .btn svg{display:inline-block;vertical-align:-2px;margin-right:4px}
.ai-warn{margin-top:10px;font-size:13px;color:var(--green)}
.ai-meta{margin-top:10px;font-size:13px;color:var(--faint)}
.ai-acts{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.ai-apps{display:grid;gap:12px}
.ai-app{padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.ai-app>b{display:block;margin-bottom:4px}
.ai-app p b{color:var(--tx)}
.ai-app p{color:var(--tx2);font-size:14px;line-height:22px}
.ai-app code{font-family:var(--mono);font-size:12px;background:var(--raised);padding:2px 6px;border-radius:6px;word-break:break-all}
.ai-ex{display:grid;gap:8px}

/* ---------- Barre latérale façon TrendTrack (rail d'icônes) ---------- */
.rail{flex:0 0 84px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 0;background:var(--s0);border-right:1px solid var(--line);z-index:20}
.rail-logo{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--raised);border:1px solid var(--line);margin-bottom:18px;color:var(--tx)}
.rail-logo svg{width:24px;height:24px}
.rail-corps{display:flex;flex-direction:column;gap:4px;width:100%;padding:0 6px}
.rail-lien{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 2px;border-radius:12px;color:var(--faint);font-size:11.5px;font-weight:500;transition:color .15s,background .15s}
.rail-lien svg{width:21px;height:21px}
.rail-lien:hover{color:var(--tx);background:var(--hover)}
.rail-lien.on{color:var(--tx);background:var(--raised)}
.rail-lien.on svg{color:var(--green)}
.rail-pro{position:absolute;top:4px;right:6px;font:600 8.5px/1 var(--mono);color:var(--green);background:var(--greenbg);padding:2px 4px;border-radius:4px}
.rail-pied{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:12px}
.rail-btn{width:38px;height:38px;border-radius:10px;border:0;background:none;color:var(--faint);cursor:pointer;display:grid;place-items:center}
.rail-btn:hover{color:var(--tx);background:var(--hover)}
.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--raised);border:1px solid var(--line);color:var(--tx2);font:600 13px var(--mono)}
.avatar.on,.avatar:hover{border-color:var(--green);color:var(--tx)}
.btn-sm{height:32px;padding:0 12px;font-size:13px}
#top-cta:empty{display:none}

/* ---------- Início ---------- */
.inicio{display:flex;flex-direction:column;align-items:center;text-align:center;padding:28px 0 8px}
.inicio-logo{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--green);color:#052e16;box-shadow:0 10px 40px -10px color-mix(in srgb,var(--green) 70%,transparent)}
.inicio-logo svg{width:32px;height:32px}
.inicio-titre{font-size:32px;line-height:40px;font-weight:500;letter-spacing:-.02em;margin:18px 0 22px}
.ask{display:flex;align-items:center;gap:8px;width:100%;max-width:780px;padding:6px 6px 6px 16px;border:1px solid var(--line);border-radius:14px;background:var(--card);box-shadow:0 10px 40px -24px rgba(0,0,0,.6);transition:border-color .15s}
.ask:focus-within{border-color:color-mix(in srgb,var(--green) 60%,var(--line))}
.ask-ic{color:var(--faint);display:grid}.ask-ic svg{width:18px;height:18px}
.ask input{flex:1;min-width:0;height:44px;border:0;background:none;color:var(--tx);font:inherit;font-size:16px;outline:none}
.ask .btn{height:40px}
.ask-ex{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px;max-width:820px}
.ask-ex a{font-size:13px;color:var(--tx2);border:1px solid var(--line);border-radius:999px;padding:5px 12px;background:var(--bg)}
.ask-ex a:hover{color:var(--tx);border-color:var(--faint)}
.recents{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:22px;font-size:13px;color:var(--faint)}
.recents-lab{display:inline-flex;align-items:center;gap:6px;margin-right:4px}.recents-lab svg{width:14px;height:14px}
.recent{display:inline-flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border:1px solid var(--line);border-radius:999px;color:var(--tx2);background:var(--card);max-width:240px}
.recent span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recent:hover{color:var(--tx)}
.rimg{width:24px;height:24px;border-radius:50%;object-fit:cover;background:var(--raised);flex:none}
.hcards{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:12px;overflow-x:auto;padding:28px 0 8px;scrollbar-width:thin}
.hcard{position:relative;display:flex;flex-direction:column;min-height:250px;border:1px solid var(--line);border-radius:16px;background:var(--card);overflow:hidden}
.hcard-in{flex:1;margin:10px;padding:14px;border-radius:12px;background:var(--bg);display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.hcard-in>b{font-size:14px}
.hcard-pied{display:flex;justify-content:space-between;align-items:center;padding:4px 16px 14px;font:500 11.5px var(--mono);letter-spacing:.06em;color:var(--faint)}
.hcard-pied a{display:inline-flex;align-items:center;gap:4px;letter-spacing:0;color:var(--tx2)}.hcard-pied a:hover{color:var(--tx)}
.hcard-pied svg{width:13px;height:13px}
.hcard.promo{padding:20px;gap:10px;justify-content:flex-end;background:radial-gradient(120% 90% at 0% 0%,color-mix(in srgb,var(--green) 22%,transparent),transparent 60%),var(--card)}
.hcard.promo h3{font-size:19px;line-height:25px;font-weight:600;letter-spacing:-.01em}
.hcard.promo p{font-size:13.5px;color:var(--tx2)}
.hcard.promo .tag{align-self:flex-start}.hcard.promo .btn{align-self:flex-start}
.hx{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:50%;border:0;background:var(--raised);color:var(--tx2);cursor:pointer;display:grid;place-items:center}
.hx svg{width:14px;height:14px}
.hlist{list-style:none;width:100%;display:grid;gap:2px}
.hlist a{display:flex;align-items:center;gap:10px;padding:7px 6px;border-radius:8px;font-size:13.5px;color:var(--tx2)}
.hlist a:hover{background:var(--hover);color:var(--tx)}
.hlist svg{width:16px;height:16px;flex:none;color:var(--green)}
.hlist span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.hlist em{font:500 12px var(--mono);font-style:normal;color:var(--faint)}
.hnote{font-size:12px;color:var(--faint)}
.csteps.mini{display:grid;gap:2px;width:100%;grid-template-columns:1fr}
.csteps.mini .cstep{font-size:12.5px;padding:5px 6px}
.hcard .cprog{width:100%}
.hoje-tete{display:flex;align-items:baseline;gap:12px;margin:28px 0 14px}
.hoje-tete h2{font-size:20px;font-weight:500;letter-spacing:-.01em}
.hoje-tete span{font:12px var(--mono);color:var(--faint)}

/* ---------- Pergunte (résultats) ---------- */
.busca-tete{display:flex;justify-content:center;margin:4px 0 16px}
.ask-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.ask-note{font-size:13px;color:var(--faint);margin:8px 0}

/* ---------- Explorar ---------- */
.xtabs{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:12px;background:var(--card);margin-bottom:18px}
.xtabs a{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:9px;font-size:14px;color:var(--tx2)}
.xtabs a svg{width:16px;height:16px}
.xtabs a:hover{color:var(--tx)}
.xtabs a.on{background:var(--raised);color:var(--tx)}
.xtabs a.on svg{color:var(--green)}
.loja-acts{margin:-12px 0 20px}

/* ---------- Dossiês ---------- */
.fnew{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.fnew input{flex:1 1 260px;min-width:0;height:40px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--tx);font:inherit}
.fnew .btn svg,.fpick .btn svg,[data-save] svg{display:inline-block;vertical-align:-2px;margin-right:4px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.fcard{position:relative;border:1px solid var(--line);border-radius:16px;background:var(--card);padding:12px;transition:border-color .15s}
.fcard:hover{border-color:var(--faint)}
.fcard>a{display:block}
.fthumbs{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:4px;aspect-ratio:1;border-radius:10px;overflow:hidden;margin-bottom:12px}
.fthumbs img,.fthumbs span{width:100%;height:100%;object-fit:cover;background:var(--raised);display:block}
.fcard b{display:block;font-size:15px}.fcard span{font-size:12.5px;color:var(--faint)}
.fact{position:absolute;right:10px;bottom:12px;display:flex;gap:4px}
.fact .btn{width:30px;height:30px;padding:0}.fact svg{width:14px;height:14px}
.fpick{display:grid;gap:6px;margin:12px 0 16px;max-height:280px;overflow:auto}
.fpick .btn{justify-content:flex-start;width:100%}.fpick small{margin-left:auto;color:var(--faint);font-family:var(--mono)}

/* ---------- Academia ---------- */
.acad-cat{font-size:13px;font-family:var(--mono);color:var(--faint);font-weight:500;letter-spacing:.04em;text-transform:uppercase;margin:24px 0 10px}
.acad{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.guia{display:flex;flex-direction:column;gap:6px;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--card);transition:border-color .15s,transform .15s}
.guia:hover{border-color:color-mix(in srgb,var(--green) 50%,var(--line));transform:translateY(-1px)}
.guia.soon{opacity:.6;pointer-events:none}
.guia-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--greenbg);color:var(--green);margin-bottom:6px}.guia-ic svg{width:18px;height:18px}
.guia b{font-size:15.5px}.guia p{font-size:13.5px;color:var(--tx2);flex:1}
.guia-pied{font:12px var(--mono);color:var(--faint);margin-top:6px}
.guia-art{max-width:720px}
.guia-art h3{font-size:18px;font-weight:600;margin:26px 0 6px}
.guia-art p{color:var(--tx2);line-height:1.7;margin-bottom:10px}
.guia-art b,.guia-art i{color:var(--tx)}
.guia-aviso{border-left:3px solid var(--green);padding-left:12px;font-size:14px}
.guia-next{display:flex;align-items:center;gap:12px;margin-top:32px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.guia-next span{font:12px var(--mono);color:var(--faint)}.guia-next b{flex:1}.guia-next svg{width:18px;height:18px;color:var(--green)}

/* ---------- Mobile : le rail devient une barre d'onglets en bas ---------- */
@media(max-width:900px){
 #app{flex-direction:column}
 .rail{position:fixed;top:auto;bottom:0;left:0;right:0;height:auto;flex-direction:row;padding:6px 4px calc(6px + env(safe-area-inset-bottom));border-right:0;border-top:1px solid var(--line);z-index:60}
 .rail-logo,.rail-pied .rail-btn{display:none}
 .rail-corps{flex-direction:row;padding:0;gap:0;flex:1}
 .rail-lien{flex:1;padding:6px 0;font-size:10.5px;gap:3px}
 .rail-lien svg{width:20px;height:20px}
 .rail-pied{margin:0;padding:0 6px}
 .avatar{width:32px;height:32px;font-size:11px}
 main.zone{padding-bottom:76px}
 .hcards{grid-auto-columns:78%}
}
@media(max-width:640px){
 .inicio-titre{font-size:26px;line-height:32px}
 .ask .btn{display:none}
 .ask-ex a:nth-child(n+4){display:none}
}
.csteps.mini .cstep{border:0;background:none;padding:4px 0;min-height:0;font-size:12.5px;gap:8px}
.csteps.mini .cstep span{width:16px;height:16px;flex:none}
.hcard-in .btn svg{width:14px;height:14px;display:inline-block;vertical-align:-2px;margin-right:2px}
/* ---------- Início : en-tête vivant ---------- */
.inicio{position:relative;isolation:isolate}
.inicio:before{content:"";position:absolute;inset:-32px -40px -10px;z-index:-1;background-image:radial-gradient(color-mix(in srgb,var(--tx) 9%,transparent) 1px,transparent 1.3px);background-size:22px 22px;-webkit-mask-image:radial-gradient(ellipse 55% 70% at 50% 30%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 55% 70% at 50% 30%,#000 20%,transparent 75%);animation:drift 40s linear infinite}
.inicio:after{content:"";position:absolute;left:50%;top:10px;width:520px;height:260px;transform:translateX(-50%);z-index:-1;background:radial-gradient(closest-side,color-mix(in srgb,var(--green) 22%,transparent),transparent);filter:blur(10px);animation:breathe 6s ease-in-out infinite}
@keyframes drift{to{background-position:220px 110px}}
@keyframes breathe{0%,100%{opacity:.55;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.08)}}
.inicio-logo{position:relative;animation:float 5s ease-in-out infinite}
@keyframes ring{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.55)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.inicio-titre{margin-bottom:10px}
.ticker{position:relative;height:26px;width:100%;max-width:780px;margin-bottom:18px;font-size:14px;color:var(--tx2)}
.ticker span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ticker span.on{opacity:1;transform:none}
.ticker b{color:var(--tx);font-weight:500}
.ticker i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 60%,transparent);animation:ping 1.8s infinite;flex:none}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 55%,transparent)}100%{box-shadow:0 0 0 8px transparent}}
@media(prefers-reduced-motion:reduce){.inicio:before,.inicio:after,.inicio-logo,.ticker i{animation:none}.ticker span{transition:none}}
@media(max-width:640px){.ticker{font-size:12.5px}}
@keyframes lg-ring{0%,8%{r:2.5;opacity:.9}70%,100%{r:8.5;opacity:0}}@keyframes lg-dot{0%,100%{transform:scale(1)}14%{transform:scale(1.22)}}@keyframes lg-curve{0%,10%{stroke-dashoffset:23}42%,100%{stroke-dashoffset:0}}
.lg-ring{animation:lg-ring 2s cubic-bezier(.2,.6,.4,1) infinite}.lg-dot{transform-box:view-box;transform-origin:20px 12px;animation:lg-dot 2s ease-in-out infinite}.lg-cut{stroke-dasharray:23;animation:lg-curve 1.6s cubic-bezier(.6,0,.2,1) 1 both}
@media(prefers-reduced-motion:reduce){.lg-ring,.lg-dot,.lg-cut{animation:none}.lg-ring{opacity:0}}
.sub-info{display:grid;gap:10px;justify-items:start}
.sub-info p{color:var(--tx2);font-size:14px}
.sub-alerta{color:var(--out)!important;background:var(--outbg);padding:10px 12px;border-radius:10px}

/* ---------- Direction pro (10.11) : neutre d'abord, vert réservé aux données et aux signaux ---------- */
:root{
 --s0:#111113;--bg:#161618;--card:#1c1c1f;--raised:#27272b;--hover:#212124;
 --line:rgba(255,255,255,.09);--line2:rgba(255,255,255,.06);--line3:rgba(255,255,255,.2);
 --tx:#f4f4f5;--tx2:#b8b8c0;--faint:#92929b;--input:#131315;
 --green:#46c985;--greenbg:rgba(70,201,133,.1);--in:#46c985;--inbg:rgba(70,201,133,.1);
 --pri-tx:#111113;--pri-h:#fff;--scroll:#34343a
}
:root[data-theme="light"]{--green:#15803d;--greenbg:rgba(21,128,61,.08);--faint:#6b6b73}
.maj,.kpi .pied,.nav-grp,.mini-pro{font-size:12.5px}
/* Boutons : l'action principale est blanche (noire en thème clair), plus d'aplat vert */
.btn.vert{background:var(--tx);color:var(--pri-tx);border-color:transparent}
.btn.vert:hover{background:var(--pri-h);filter:none}
/* Plus de dégradés ni de halos verts */
.verrou{background:var(--card)}
.verrou .ic,.ins li .ins-ic,.guia-ic,.ob-ava{background:var(--raised);color:var(--tx)}
.kpi:first-child::after{display:none}
.vedette,:root[data-theme="light"] .vedette{background:var(--card)}
.vedette:hover,.guia:hover{border-color:var(--line3)}
.nav-plan,:root[data-theme="light"] .nav-plan{background:var(--card);border-color:var(--line)}
body.cx,:root[data-theme="light"] body.cx{background:radial-gradient(800px 400px at 50% -10%,rgba(255,255,255,.04),transparent),var(--bg)}
.hcard.promo{background:radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.06),transparent 60%),var(--card)}
.inicio:after{background:radial-gradient(closest-side,rgba(255,255,255,.05),transparent)}
.inicio-logo{background:#0b0b0c;color:#fff;border:1px solid var(--line3);box-shadow:0 10px 30px -14px rgba(0,0,0,.8)}
/* Plans */
.plan.star{border:1px solid var(--line3);box-shadow:none;background:var(--card)}
.plan-badge{background:var(--tx);color:var(--pri-tx)}
.plan-cta.actuel{background:transparent;border:1px solid var(--line3);color:var(--tx)}
.plan-bonus{border:1px dashed var(--line3)}
.plan-bonus b,.hooks>b{color:var(--tx2)}
.plan-bonus span svg,.hlist svg,.guia-next svg{color:var(--tx2)}
/* Badges PRO et sélections : neutres */
.mini-pro,.rail-pro,.cadenas i{color:var(--tx);background:var(--raised);border:1px solid var(--line)}
.choix button.on,.puces button.on,.ob-chip.on{border-color:var(--tx);background:var(--raised);color:var(--tx)}
.ask:focus-within{border-color:var(--line3)}
.rail-lien.on svg,.xtabs a.on svg{color:var(--tx)}
.avatar.on,.avatar:hover{border-color:var(--line3)}
.conselhos,.comecar{border-color:var(--line)}
.hook{background:var(--raised)}
.guia-aviso{border-left-color:var(--line3)}
.ai-warn{color:var(--tx2)}
.ob-prog i,.cprog i{background:var(--tx)}
.barres-h .piste i{background:var(--tx2);opacity:.75}

/* ---------- Vie : notifications, modales, paiement (10.11) ---------- */
:root{--spring:cubic-bezier(.34,1.4,.64,1);--blue:#7aa7ff}
#toasts{position:fixed;left:50%;top:18px;transform:translateX(-50%);width:min(560px,calc(100vw - 32px));z-index:200;display:flex;flex-direction:column;gap:10px;align-items:stretch;pointer-events:none}
.toast{pointer-events:auto;cursor:pointer;position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;padding:14px 12px 14px 14px;border-radius:14px;
 background:color-mix(in srgb,var(--raised) 92%,transparent);backdrop-filter:blur(10px);border:1px solid var(--line3);color:var(--tx);font-size:15px;line-height:21px;font-weight:500;
 box-shadow:0 16px 40px -12px var(--ombre);animation:t-in .45s var(--spring) both}
.toast.sai{animation:t-out .26s var(--ease) forwards}
.toast-tx{flex:1}.toast-x{all:unset;flex:none;cursor:pointer;width:28px;height:28px;display:grid;place-items:center;border-radius:8px;color:var(--tx3,#a1a1aa);font-size:20px;line-height:1}.toast-x:hover{background:var(--raised);color:var(--tx)}
.toast.pause .toast-bar{animation-play-state:paused}
.toast.ok{border-color:color-mix(in srgb,var(--green) 40%,var(--line3))}.toast.err{border-color:color-mix(in srgb,var(--out) 45%,var(--line3))}
.toast-ic{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--greenbg);color:var(--green)}
.toast-ic svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.toast.ok .toast-ic svg path{stroke-dasharray:24;stroke-dashoffset:24;animation:draw .4s .15s var(--ease) forwards}
.toast.err .toast-ic{background:var(--outbg);color:var(--out)}
.toast.info .toast-ic{background:color-mix(in srgb,var(--blue) 14%,transparent);color:var(--blue)}
.toast-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--green);opacity:.7;transform-origin:left;animation:t-bar var(--d,3200ms) linear forwards}
.toast.err .toast-bar{background:var(--out)}.toast.info .toast-bar{background:var(--blue)}
@keyframes t-in{from{opacity:0;transform:translateY(-14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes t-out{to{opacity:0;transform:translateY(-12px) scale(.98)}}
@keyframes t-bar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes draw{to{stroke-dashoffset:0}}
@media (max-width:760px){#toasts{top:12px;width:calc(100vw - 24px)}.toast{font-size:14px}}

.voile{animation:v-in .22s var(--ease) both}
.modale{animation:m-in .4s var(--spring) both}
.modale.suite{animation:m-step .32s var(--ease) both}
@keyframes v-in{from{opacity:0}to{opacity:1}}
@keyframes m-in{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes m-step{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.btn{transition:background-color .15s var(--ease),border-color .15s var(--ease),transform .12s var(--ease),filter .15s}
.btn:active:not(:disabled){transform:scale(.97)}
.choix button,.puces button,.ob-chip{transition:border-color .15s,background-color .15s,transform .12s}
.choix button:active,.puces button:active{transform:scale(.98)}
.plan{transition:border-color .2s var(--ease),transform .25s var(--ease)}
.plan:hover{border-color:var(--line3);transform:translateY(-2px)}
.page.entre .kpis>.kpi,.page.entre .plans>.plan{animation:entre .45s var(--ease) both}
.page.entre .kpis>.kpi:nth-child(2),.page.entre .plans>.plan:nth-child(2){animation-delay:.05s}
.page.entre .kpis>.kpi:nth-child(3),.page.entre .plans>.plan:nth-child(3){animation-delay:.1s}
.page.entre .kpis>.kpi:nth-child(4){animation-delay:.15s}

/* Attente (ouverture du paiement, confirmation) */
.attente{text-align:center;padding:8px 4px 0}
.attente h2{margin-top:4px}
.att-ic{width:56px;height:56px;margin:4px auto 18px;border-radius:16px;display:grid;place-items:center;background:var(--raised);border:1px solid var(--line3)}
.att-ic svg{width:24px;height:24px}
.att-ic.cadeado svg{color:var(--green);animation:float 2s ease-in-out infinite}
.att-ic.info svg{color:var(--blue)}
.att-barra{height:3px;border-radius:3px;background:var(--raised);overflow:hidden;margin:4px 0 8px}
.att-barra i{display:block;height:100%;width:40%;border-radius:3px;background:linear-gradient(90deg,transparent,var(--green),transparent);animation:glisse 1.1s ease-in-out infinite}
@keyframes glisse{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
.att-anneau{position:relative;width:64px;height:64px;margin:4px auto 18px}
.att-anneau svg:first-child{width:64px;height:64px;animation:spin 1s linear infinite}
.att-anneau circle{fill:none;stroke:var(--green);stroke-width:3;stroke-linecap:round;stroke-dasharray:90 200}
.att-anneau>svg:last-child{position:absolute;inset:20px;width:24px;height:24px;color:var(--faint)}
@keyframes spin{to{transform:rotate(360deg)}}
.att-etapas{list-style:none;display:grid;gap:10px;text-align:left;max-width:300px;margin:0 auto 8px;font-size:14px;color:var(--tx2)}
.att-etapas li{display:flex;align-items:center;gap:10px}
.att-etapas i{width:10px;height:10px;border-radius:50%;flex:none;background:var(--raised);border:1px solid var(--line3)}
.att-etapas li.ok{color:var(--tx)}.att-etapas li.ok i{background:var(--green);border-color:var(--green)}
.att-etapas li.enc i{border-color:var(--green);animation:ping 1.4s infinite}

/* Célébration du paiement */
.festa{text-align:center;padding:6px 4px 0;position:relative}
.festa:before{content:"";position:absolute;left:50%;top:-40px;width:340px;height:200px;transform:translateX(-50%);z-index:-1;pointer-events:none;
 background:radial-gradient(closest-side,color-mix(in srgb,var(--green) 22%,transparent),transparent)}
.festa-badge{position:relative;width:76px;height:76px;margin:6px auto 18px}
.festa-badge svg{position:relative;width:76px;height:76px;animation:pop .55s var(--spring) both}
.festa-badge circle{fill:var(--green);stroke:none}
.festa-badge path{fill:none;stroke:#062a14;stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;animation:draw .45s .35s var(--ease) forwards}
.festa-badge .ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--green);opacity:0;animation:onda 1.6s .2s var(--ease) 2}
.festa-badge .ring.r2{animation-delay:.6s}
@keyframes pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes onda{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}
.festa h2{font-size:28px;line-height:36px}
.festa-l{list-style:none;display:grid;gap:8px;text-align:left;margin:0 0 22px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.festa-l li{display:flex;gap:10px;align-items:flex-start;font-size:14px;opacity:0;animation:entre .4s calc(.55s + var(--i) * .09s) var(--ease) forwards}
.festa-l svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--green)}
.confetti{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:300}
@media (prefers-reduced-motion:reduce){
 .toast,.toast.sai,.voile,.modale,.modale.suite,.festa-badge svg,.festa-l li,.page.entre .kpis>.kpi,.page.entre .plans>.plan{animation:none;opacity:1}
 .festa-badge path,.toast.ok .toast-ic svg path{animation:none;stroke-dashoffset:0}.toast-bar,.att-ic.cadeado svg{animation:none}
}

/* ---------- Minha conta, palette Cmd+K, barre de chargement, courbes animées (10.11) ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:12.5px;font-weight:500;border:1px solid var(--line);background:var(--raised);color:var(--tx2)}
.pill i{width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.ok{color:var(--green);background:var(--greenbg);border-color:transparent}.pill.ok i{animation:ping 1.8s infinite}
.pill.warn{color:var(--warn);background:var(--warnbg);border-color:transparent}
.pill.err{color:var(--out);background:var(--outbg);border-color:transparent}
.pill.info{color:var(--blue);background:color-mix(in srgb,var(--blue) 12%,transparent);border-color:transparent}
.conta-hero{position:relative;display:grid;grid-template-columns:1fr auto;gap:20px 24px;padding:28px;margin-bottom:12px;border:1px solid var(--line);border-radius:16px;overflow:hidden;
 background:radial-gradient(600px 220px at 0% 0%,rgba(255,255,255,.05),transparent 70%),var(--card);animation:entre .45s var(--ease) both}
.conta-hero.ok:before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--green) 70%,transparent),transparent)}
.conta-hero.warn{border-color:color-mix(in srgb,var(--warn) 35%,var(--line))}
.conta-hero.err{border-color:color-mix(in srgb,var(--out) 40%,var(--line))}
.ch-top{display:flex;align-items:center;gap:12px}.ch-top .etape{margin:0}
.ch-nom{font-size:44px;line-height:52px;font-weight:500;letter-spacing:-.03em;margin:10px 0 6px}
.ch-line{color:var(--tx2);font-size:15px}.ch-line b{color:var(--tx);font-weight:500}
.ch-acts{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap;justify-content:flex-end}
.ch-acts .btn{height:40px;padding:0 16px}.ch-acts .btn svg{width:15px;height:15px}
.ch-lims{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);padding-top:18px;margin-top:4px}
.ch-lims div{display:grid;gap:2px;padding:0 16px;border-left:1px solid var(--line)}.ch-lims div:first-child{padding-left:0;border-left:0}
.ch-lims span{font-size:13px;color:var(--tx2)}.ch-lims b{font-size:22px;line-height:30px;font-weight:500;font-variant-numeric:tabular-nums}.ch-lims small{font:12px var(--mono);color:var(--faint)}
.conta-fim{margin:20px 0 8px;text-align:center;font-size:13px;color:var(--faint)}
.lien{background:none;border:0;color:var(--tx2);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:13px}.lien:hover{color:var(--out)}
@media (max-width:760px){.conta-hero{grid-template-columns:1fr;padding:20px}.ch-acts{justify-content:flex-start}.ch-nom{font-size:34px;line-height:40px}
 .ch-lims{grid-template-columns:repeat(2,1fr);gap:14px 0}.ch-lims div:nth-child(3){padding-left:0;border-left:0}}

#loadbar{position:fixed;top:0;left:0;height:2px;width:0;z-index:400;background:linear-gradient(90deg,var(--green),#a7f3d0);box-shadow:0 0 8px color-mix(in srgb,var(--green) 60%,transparent);opacity:0;pointer-events:none}
#loadbar.run{opacity:1;animation:lb 2.5s cubic-bezier(.1,.7,.2,1) forwards}
#loadbar.done{opacity:0;width:100%;transition:width .2s var(--ease),opacity .3s .2s}
@keyframes lb{from{width:0}to{width:85%}}

.pal-btn{display:flex;align-items:center;gap:8px;height:32px;padding:0 6px 0 10px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--faint);font-size:13px;cursor:pointer;transition:border-color .15s,color .15s}
.pal-btn:hover{border-color:var(--line3);color:var(--tx)}.pal-btn svg{width:14px;height:14px}
kbd{font:500 11px/1 var(--mono);padding:4px 6px;border-radius:5px;border:1px solid var(--line);background:var(--raised);color:var(--tx2)}
#pal{position:fixed;inset:0;z-index:150;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:flex-start;padding:14vh 16px 16px;animation:v-in .15s var(--ease)}
#pal.sai{animation:t-out .16s var(--ease) forwards}
.pal-box{width:100%;max-width:620px;background:var(--card);border:1px solid var(--line3);border-radius:14px;box-shadow:0 30px 80px -20px #000;overflow:hidden;animation:m-in .3s var(--spring)}
.pal-in{display:flex;align-items:center;gap:10px;padding:0 16px;height:56px;border-bottom:1px solid var(--line)}
.pal-in svg{width:18px;height:18px;color:var(--faint)}
.pal-in input{flex:1;border:0;background:none;outline:none;font-size:16px;color:var(--tx)}
.pal-l{max-height:340px;overflow:auto;padding:6px}
.pal-it{display:flex;align-items:center;gap:12px;width:100%;height:42px;padding:0 12px;border:0;border-radius:8px;background:none;color:var(--tx2);cursor:pointer;text-align:left;font-size:14px}
.pal-it svg{width:16px;height:16px}.pal-it span{flex:1}.pal-it small{font:12px var(--mono);color:var(--faint);opacity:0}
.pal-it.on{background:var(--raised);color:var(--tx)}.pal-it.on small{opacity:1}
.pal-vide{padding:16px;color:var(--faint);font-size:14px}
.pal-pied{display:flex;gap:16px;padding:10px 14px;border-top:1px solid var(--line);font-size:12px;color:var(--faint)}.pal-pied kbd{margin-right:3px}
@media (max-width:760px){.pal-btn span,.pal-btn kbd{display:none}.pal-btn{padding:0 9px}}

.spark polyline{stroke-dasharray:1;stroke-dashoffset:1;animation:trace .9s .1s var(--ease) forwards}
.graf .courbe,.graf .aire{animation:revele 1s var(--ease) both}
@keyframes trace{to{stroke-dashoffset:0}}
@keyframes revele{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){.spark polyline{animation:none;stroke-dashoffset:0}.graf .courbe,.graf .aire,.conta-hero,#loadbar.run{animation:none}}

/* ---------- Ajuda (widget), boîte de support, tour guiado (10.11) ---------- */
#toasts{bottom:84px}
.rail-lien{position:relative}
.rail-badge{position:absolute;top:2px;right:8px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--out);color:#fff;font:600 10px/16px var(--mono);text-align:center}
#sup-fab{position:fixed;right:20px;bottom:20px;z-index:90;display:flex;align-items:center;gap:8px;height:44px;padding:0 16px 0 14px;border-radius:22px;border:1px solid var(--line3);
 background:var(--raised);color:var(--tx);font-size:14px;font-weight:500;cursor:pointer;box-shadow:0 12px 30px -10px rgba(0,0,0,.7);transition:transform .2s var(--spring),background-color .15s}
#sup-fab:hover{transform:translateY(-2px);background:color-mix(in srgb,var(--raised) 80%,#fff 6%)}
#sup-fab.on{background:var(--tx);color:var(--pri-tx)}
#sup-fab svg{width:18px;height:18px}
#sup-fab b{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--out);color:#fff;font:600 11px/20px var(--mono);text-align:center;animation:pop .4s var(--spring)}
#sup{position:fixed;right:20px;bottom:76px;z-index:95;width:380px;max-width:calc(100vw - 24px);height:min(600px,calc(100vh - 110px));display:flex;flex-direction:column;
 background:var(--card);border:1px solid var(--line3);border-radius:16px;box-shadow:0 30px 70px -20px #000;overflow:hidden;transform-origin:bottom right;animation:m-in .35s var(--spring)}
#sup[hidden]{display:none}
#sup.sai{animation:t-out .2s var(--ease) forwards}
.sup-tete{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);background:radial-gradient(300px 120px at 0 0,rgba(255,255,255,.05),transparent),var(--card)}
.sup-tete b{display:block;font-size:15px}.sup-tete span{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--faint)}
.sup-tete span i{width:7px;height:7px;border-radius:50%;background:var(--green);animation:ping 1.8s infinite}
.sup-ava{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:#0b0b0c;border:1px solid var(--line3);color:var(--tx)}.sup-ava svg{width:18px;height:18px}
.sup-x{margin-left:auto;width:32px;height:32px;border-radius:8px;border:0;background:none;color:var(--faint);cursor:pointer;display:grid;place-items:center}.sup-x:hover{background:var(--raised);color:var(--tx)}.sup-x svg{width:16px;height:16px}
.sup-corps{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px}
.bul{max-width:86%;padding:10px 12px;border-radius:14px;font-size:14px;line-height:20px;white-space:pre-wrap;word-wrap:break-word;animation:entre .3s var(--ease) both}
.bul small{display:block;font:11.5px var(--mono);color:var(--faint);margin-bottom:3px;white-space:normal}
.bul.moi small{margin:4px 0 0;text-align:right}
.bul.bot,.bul.equipe{align-self:flex-start;background:var(--raised);border-bottom-left-radius:4px}
.bul.equipe{border:1px solid color-mix(in srgb,var(--green) 35%,var(--line))}
.bul.moi{align-self:flex-end;background:var(--tx);color:var(--pri-tx);border-bottom-right-radius:4px}.bul.moi small{color:color-mix(in srgb,var(--pri-tx) 60%,transparent)}
.sup-chips{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 6px}
.sup-chips button,.sup-acts button{padding:7px 11px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--tx2);font-size:13px;cursor:pointer;transition:border-color .15s,color .15s,transform .12s;text-align:left}
.sup-chips button:hover,.sup-acts button:hover{border-color:var(--line3);color:var(--tx)}.sup-chips button:active{transform:scale(.97)}
.sup-chips .eq{display:inline-flex;align-items:center;gap:6px;color:var(--tx);border-color:var(--line3)}.sup-chips .eq svg{width:14px;height:14px}
.sup-acts{display:flex;gap:6px;flex-wrap:wrap}.sup-merci{font-size:13px;color:var(--green)}
.sup-note{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--tx2);padding:10px 12px;border-radius:10px;background:var(--greenbg)}.sup-note svg{width:16px;height:16px;color:var(--green);flex:none;margin-top:2px}
.sup-sug:empty{display:none}
.sup-sug button{display:flex;align-items:center;gap:8px;width:100%;padding:10px 16px;border:0;border-top:1px solid var(--line);background:color-mix(in srgb,var(--blue) 8%,var(--card));color:var(--tx2);font-size:13px;cursor:pointer;text-align:left;animation:entre .25s var(--ease)}
.sup-sug svg{width:16px;height:16px;color:var(--blue);flex:none}.sup-sug b{color:var(--tx);font-weight:500}
.sup-pied{display:flex;gap:8px;align-items:flex-end;padding:12px;border-top:1px solid var(--line)}
.sup-pied textarea{flex:1;resize:none;border:1px solid var(--line);border-radius:10px;padding:9px 12px;background:var(--input);color:var(--tx);font:inherit;font-size:14px;line-height:20px;max-height:120px;outline:none}
.sup-pied textarea:focus{border-color:var(--line3)}
.sup-pied .btn{height:40px;min-width:40px;padding:0 12px}.sup-pied .btn svg{width:16px;height:16px}
@media (max-width:900px){#sup-fab{bottom:84px;right:12px;height:44px;width:44px;padding:0;justify-content:center}#sup-fab span{display:none}
 #sup{right:8px;left:8px;width:auto;bottom:136px;height:calc(100vh - 160px)}#toasts{bottom:140px}}

.inbox{display:grid;grid-template-columns:320px 1fr;min-height:560px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card)}
.inbox-l{border-right:1px solid var(--line);overflow-y:auto;max-height:70vh}
.inbox-t{display:grid;gap:3px;padding:12px 14px;border-bottom:1px solid var(--line2);transition:background-color .15s}
.inbox-t:hover{background:var(--hover)}.inbox-t.on{background:var(--raised)}
.inbox-t div{display:flex;justify-content:space-between;gap:8px}.inbox-t b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inbox-t i{font:600 11px/18px var(--mono);font-style:normal;min-width:18px;padding:0 5px;border-radius:9px;background:var(--out);color:#fff;text-align:center}
.inbox-t span{font-size:13px;color:var(--tx2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.inbox-t small{font:11.5px var(--mono);color:var(--faint)}
.inbox-c{display:flex;flex-direction:column;min-width:0}
.inbox-h{padding:14px 18px;border-bottom:1px solid var(--line);display:grid;gap:2px}.inbox-h span{font-size:13px;color:var(--faint)}
.inbox-m{flex:1;overflow-y:auto;max-height:56vh;padding:18px;display:flex;flex-direction:column;gap:8px}
@media (max-width:900px){.inbox{grid-template-columns:1fr}.inbox-l{max-height:240px;border-right:0;border-bottom:1px solid var(--line)}}

#tour{position:fixed;inset:0;z-index:250}
#tour.sai{animation:t-out .2s var(--ease) forwards}
.tour-spot{position:fixed;border-radius:12px;box-shadow:0 0 0 9999px rgba(0,0,0,.66),0 0 0 2px var(--green),0 0 24px 4px color-mix(in srgb,var(--green) 40%,transparent);
 transition:left .35s var(--ease),top .35s var(--ease),width .35s var(--ease),height .35s var(--ease);pointer-events:none}
.tour-card{position:fixed;padding:18px;border-radius:14px;background:var(--card);border:1px solid var(--line3);box-shadow:0 24px 60px -16px #000;transition:left .35s var(--ease),top .35s var(--ease)}
.tour-card.anim>*{animation:entre .35s var(--ease) both}
.tour-card b{display:block;font-size:17px;line-height:24px;font-weight:500;margin:10px 0 4px}
.tour-card p{font-size:14px;line-height:21px;color:var(--tx2)}
.tour-prog{display:flex;align-items:center;gap:4px}.tour-prog i{width:14px;height:3px;border-radius:2px;background:var(--line3);transition:background-color .2s,width .2s}
.tour-prog i.vu{background:var(--tx2)}.tour-prog i.on{width:22px;background:var(--green)}
.tour-prog span{margin-left:auto;font:12px var(--mono);color:var(--faint)}
.tour-acts{display:flex;align-items:center;justify-content:space-between;margin-top:16px}.tour-acts span{display:flex;gap:6px}.tour-acts .lien:hover{color:var(--tx)}
@media (prefers-reduced-motion:reduce){#sup,.bul,.tour-card.anim>*,.tour-spot,.tour-card{animation:none;transition:none}}
body[data-route="/suporte"] #sup-fab{display:none}
.pal-in input,.pal-in input:focus{border:0;background:none;box-shadow:none;outline:none;padding:0;height:auto;border-radius:0}

/* ---------- Marque dans la barre du haut + largeur de lecture (10.11) ---------- */
.top-marque{display:flex;align-items:center;gap:8px;color:var(--tx);flex:none}
.top-marque b{font-size:15px;font-weight:600;letter-spacing:-.02em}
.top-marque svg{display:none;width:20px;height:20px}
.top-sep{width:1px;height:18px;background:var(--line3);flex:none;margin:0 4px}
@media(max-width:900px){.top-marque svg{display:block}.top-marque b{font-size:15px}}
@media(max-width:480px){.top-sep,.topbar .fil{display:none}}
.page{max-width:1480px;margin:0 auto}
body[data-route="/conta"] .page,body[data-route="/ia"] .page,body[data-route="/academia"] .page{max-width:1160px}

/* ---------- Dispositions (10.11) ---------- */
/* Fiche produit : conseils à gauche, accroches à droite sur grand écran */
@media(min-width:1100px){
 .conselhos>.bloc-corps{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px 24px;align-items:start}
 .conselhos .ins{grid-column:1}.conselhos .hooks{grid-column:2;grid-row:1;margin-top:0}
 .conselhos .aviso{grid-column:1/-1}
}
/* Courbe vide : moins haute */
.bloc .vide{padding:28px 20px}
/* Boutique : 20 lignes, puis « Ver todos » */
table.court tbody tr:nth-child(n+21){display:none}
.voir-tout{display:flex;justify-content:center;padding:14px;border-top:1px solid var(--line)}
/* Início : cartes plus denses, durées jamais coupées */
.hlist li,.hlist a{min-width:0}
.hlist em,.hlist small{flex:none}
/* Mobile : bouton Perguntar visible (icône), suggestions et vus récemment en rangée défilante */
@media(max-width:900px){
 .ask .btn{display:inline-flex;padding:0 12px;font-size:13px}
 .ask input{font-size:15px}
 .ask-ex,.recents{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;max-width:100%;padding-bottom:4px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent)}
 .ask-ex::-webkit-scrollbar,.recents::-webkit-scrollbar{display:none}
 .ask-ex a,.recents a{flex:none;white-space:nowrap}
 .ask-ex a:nth-child(n+4){display:inline-flex}
}
.voir-tout{gap:14px;align-items:center}.voir-tout span{font:12.5px var(--mono);color:var(--faint)}
.guia-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.guia-top .guia-ic{margin-bottom:6px}
.guia-cat{font:11.5px var(--mono);color:var(--faint);text-transform:uppercase;letter-spacing:.04em}
.acad{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.fsug{margin-top:16px}.fsug b{display:block;font-size:15px;margin-bottom:2px}.fsug p{color:var(--tx2);font-size:13.5px;margin-bottom:12px}
.fsug .sup-chips button{display:inline-flex;align-items:center;gap:6px}.fsug .sup-chips svg{width:14px;height:14px}

/* ---------- Pastille « Dados atualizados » (10.11) ---------- */
.maj{height:32px;padding:0 12px 0 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--green) 30%,var(--line));
 background:color-mix(in srgb,var(--green) 8%,var(--card));font:500 12.5px/1 'Geist',system-ui,sans-serif;color:var(--tx2);gap:8px;cursor:default;white-space:nowrap}
.maj:empty{display:none}
.maj b{font:500 12.5px/1 var(--mono);color:var(--tx)}
.maj i{position:relative;width:7px;height:7px;box-shadow:none;background:var(--green)}
.maj i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--green);opacity:0;animation:onda 2.2s var(--ease) infinite}
.maj.velho{border-color:color-mix(in srgb,var(--warn) 35%,var(--line));background:var(--warnbg)}
.maj.velho i,.maj.velho i::after{background:var(--warn);border-color:var(--warn)}
@media(max-width:1100px){.maj .maj-lab{display:none}}
@media(max-width:900px){.maj{padding:0 8px}.maj b{display:none}}
@media (prefers-reduced-motion:reduce){.maj i::after{animation:none}}
/* Início sans logo central (la marque est dans la barre du haut) */
.inicio{padding-top:40px}.inicio-titre{margin-top:0;font-size:36px;line-height:44px}
/* Pastille de mise à jour : sobre, sans pulsation ni halo */
.maj{border-color:var(--line);background:var(--card)}
.maj i{width:6px;height:6px}.maj i::after{display:none}
.maj.velho{border-color:color-mix(in srgb,var(--warn) 35%,var(--line));background:var(--warnbg)}
@media(max-width:900px){.inicio{padding-top:20px}.inicio-titre{font-size:28px;line-height:34px}}

/* ---------- Raio-X produit + Categorias (10.11) ---------- */
.rx{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1px;background:var(--line)}
.rx-t{position:relative;display:flex;flex-direction:column;gap:4px;padding:16px 18px;background:var(--card);min-height:118px}
.rx-ic{position:absolute;top:16px;right:16px;color:var(--faint)}.rx-ic svg{width:16px;height:16px}
.rx-l{font-size:13px;color:var(--tx2)}
.rx-t b{font-size:21px;line-height:28px;font-weight:500;letter-spacing:-.01em}
.rx-t small{font-size:12.5px;color:var(--faint);line-height:17px}
.rx-t em{font:normal 12px var(--mono);color:var(--green)}
.rx-bar{display:block;height:4px;border-radius:2px;background:var(--raised);overflow:hidden;margin:2px 0 2px}
.rx-bar i{display:block;height:100%;background:var(--tx2);border-radius:2px}
.rx-t.pro b{font-size:16px;color:var(--tx2)}.rx-t.pro .btn{align-self:flex-start;margin-top:6px}
.bloc-tete p a{color:var(--tx2);text-decoration:underline;text-underline-offset:3px}
.rx-note{margin-top:14px;font-size:13.5px;color:var(--tx2);line-height:20px}
.barres-h .l.top .nom,.barres-h .l.top .v{color:var(--tx);font-weight:500}
.barres-h .l.top .piste i{background:var(--green);opacity:1}
.barres-h .v{white-space:nowrap}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.ccard{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--card);transition:border-color .15s,transform .2s var(--ease)}
.ccard:hover{border-color:var(--line3);transform:translateY(-2px)}
.ccard-imgs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.ccard-imgs img,.ccard-imgs span{width:100%;aspect-ratio:1;border-radius:8px;object-fit:cover;background:var(--raised)}
.ccard-t{display:flex;align-items:baseline;gap:8px}.ccard-t small{font:12px var(--mono);color:var(--faint)}.ccard-t b{font-size:16px;font-weight:500}
.ccard-bar{height:4px;border-radius:2px;background:var(--raised);overflow:hidden}.ccard-bar i{display:block;height:100%;background:var(--tx2)}
.ccard dl{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 10px;margin:0}
.ccard dt{font-size:11.5px;color:var(--faint)}.ccard dd{margin:0;font:500 13.5px var(--mono);color:var(--tx)}
@media(max-width:900px){.rx{grid-template-columns:1fr 1fr}.rx-t{padding:14px;min-height:0}.rx-t b{font-size:18px}}
.rx{gap:10px;padding:16px;background:none}
.rx-t{border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.barres-h .l:has(.v){grid-template-columns:130px minmax(0,1fr) 150px}

/* ---------- Vidéos et créateurs (10.11) ---------- */
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.vcard{display:flex;flex-direction:column;gap:8px}
.vcard-img{position:relative;display:block;aspect-ratio:9/14;border-radius:12px;overflow:hidden;background:var(--raised);border:1px solid var(--line)}
.vcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s var(--ease)}
.vcard-img:hover img{transform:scale(1.03)}
.vcard-views{position:absolute;left:8px;bottom:8px;display:flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;background:rgba(0,0,0,.65);color:#fff;font:500 12px var(--mono)}
.vcard-views svg{width:11px;height:11px;fill:currentColor}
.vcard-by{display:flex;align-items:center;gap:8px;min-width:0}.vcard-by span{display:grid;min-width:0}
.vcard-by b{font-size:13.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vcard-by small{font-size:12px;color:var(--faint)}
.vcard-by:hover b{text-decoration:underline}
.vcard-cap{font-size:12.5px;color:var(--tx2);line-height:17px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:34px}
.vcard-st{display:flex;flex-wrap:wrap;gap:4px 10px;font:11.5px var(--mono);color:var(--faint)}
.ava{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:none;display:grid;place-items:center;background:var(--raised);font-size:13px;font-weight:600;color:var(--tx2)}
.ava-r{border-radius:50%!important}
.ava-xl{width:84px;height:84px;font-size:32px}
.cr-head{display:flex;gap:20px;align-items:center;margin:4px 0 24px}
.cats-mini{display:flex;flex-wrap:wrap;gap:4px}.cats-mini .tag{font-size:11.5px}
.vprod{display:flex;gap:8px;align-items:center;margin-top:6px;padding:6px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.vprod .thumb{width:32px;height:32px}.vprod span{display:grid;min-width:0}.vprod b{font-size:12px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vprod small{font-size:11.5px;color:var(--faint)}
@media(max-width:900px){.vgrid{grid-template-columns:repeat(2,1fr);gap:10px}.cr-head{flex-direction:column;align-items:flex-start}}

/* ---------- Menu large avec rubriques (10.11) ---------- */
.rail{display:none}
.side{flex:0 0 236px;width:236px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;background:var(--s0);border-right:1px solid var(--line);z-index:40;transition:width .2s var(--ease),flex-basis .2s var(--ease)}
.side-tete{height:64px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 12px 0 18px;border-bottom:1px solid var(--line)}
.side-marque{display:flex;align-items:center;gap:10px;color:var(--tx);font-size:16px;font-weight:600;letter-spacing:-.02em;min-width:0}
.side-marque svg{width:24px;height:24px;flex:none}
.side-mini,.side-btn{width:32px;height:32px;flex:none;border-radius:8px;border:0;background:none;color:var(--faint);cursor:pointer;display:grid;place-items:center}
.side-mini svg,.side-btn svg{width:18px;height:18px}
.side-mini:hover,.side-btn:hover{color:var(--tx);background:var(--hover)}
.side-corps{flex:1;overflow-y:auto;padding:10px 10px 16px;scrollbar-width:thin}
.side-grp{padding-top:6px}
.side-grp+.side-grp{margin-top:10px}
.side-titre{display:flex;align-items:center;gap:8px;height:24px;padding:0 10px;font:500 11px/16px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.side-lien{position:relative;display:flex;align-items:center;gap:11px;height:36px;padding:0 10px;border-radius:8px;color:var(--tx2);font-size:14px;transition:background-color .15s var(--ease),color .15s var(--ease)}
.side-lien svg{width:18px;height:18px;flex:none;color:var(--faint);transition:color .15s}
.side-lien .sl-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-lien:hover{background:var(--hover);color:var(--tx)}
.side-lien:hover svg{color:var(--tx2)}
.side-lien.on{background:var(--raised);color:var(--tx);font-weight:500}
.side-lien.on svg{color:var(--green)}
.side-lien.on:before{content:"";position:absolute;left:-10px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--green)}
.sl-pro,.sl-novo{font:600 9.5px/1 var(--mono);padding:3px 5px;border-radius:4px;letter-spacing:.02em;text-transform:uppercase;flex:none}
.sl-pro{color:var(--tx2);background:var(--raised);border:1px solid var(--line)}
.sl-novo{color:var(--green);background:var(--greenbg)}
.side-titre .sl-pro{margin-left:auto}
.side-lien .rail-badge{position:static;margin-left:auto}
.side-pied{flex:none;display:flex;align-items:center;gap:6px;padding:10px;border-top:1px solid var(--line)}
.side-conta{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:6px;border-radius:10px}
.side-conta:hover,.side-conta.on{background:var(--hover)}
.side-conta .avatar{width:32px;height:32px;font-size:11px;flex:none}
.sc-t{min-width:0;display:flex;flex-direction:column}
.sc-t b{font-size:13px;font-weight:500;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-t small{font-size:12px;color:var(--faint)}
.fil-grp{color:var(--faint)}
/* Menu replié : seulement les icônes */
@media(min-width:901px){
body.nav-mini .side{flex-basis:68px;width:68px}
body.nav-mini .side-tete{padding:0;justify-content:center;flex-direction:column;gap:0}
body.nav-mini .side-marque span,body.nav-mini .sl-t,body.nav-mini .sl-novo,body.nav-mini .side-lien .sl-pro,body.nav-mini .sc-t,body.nav-mini .side-titre span{display:none}
body.nav-mini .side-tete{height:auto;padding:14px 0 10px;gap:10px}
body.nav-mini .side-titre{height:1px;padding:0;margin:4px 12px 6px;background:var(--line)}
body.nav-mini .side-titre .sl-pro{display:none}
body.nav-mini .side-grp:first-child .side-titre{display:none}
body.nav-mini .side-lien{justify-content:center;padding:0}
body.nav-mini .side-pied{flex-direction:column}
body.nav-mini .side-conta{flex:none;padding:4px}
}
/* Barre du haut : la marque est dans le menu sur ordinateur */
@media(min-width:901px){.top-marque,.top-sep{display:none}.tabbar,.side-voile{display:none}}
/* Mobile : barre d'onglets en bas + menu complet en tiroir */
.tabbar{display:none}
@media(max-width:900px){
 .side{position:fixed;left:0;top:0;bottom:0;height:100%;width:280px;flex-basis:auto;transform:translateX(-105%);transition:transform .25s var(--ease);z-index:80;box-shadow:0 0 40px var(--ombre)}
 body.menu-ouvert .side{transform:none}
 .side-mini{display:none}
 .side-voile{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .2s;z-index:79}
 body.menu-ouvert .side-voile{opacity:1;pointer-events:auto}
 .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--s0);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
 .tabbar a,.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;border:0;background:none;color:var(--faint);font-size:10.5px;font-weight:500;cursor:pointer;border-radius:10px}
 .tabbar svg{width:20px;height:20px}
 .tabbar a.on{color:var(--tx)}.tabbar a.on svg{color:var(--green)}
 main.zone{padding-bottom:76px}
}
@media (prefers-reduced-motion:reduce){.side,.side-voile{transition:none}}

/* ---------- Courbes de tendance (10.11) ---------- */
.tc .bloc-tete{flex-wrap:wrap;row-gap:10px}
.tc-ctl{display:flex;gap:8px;flex-wrap:wrap}
.tc-ctl .seg button{height:28px}
.tc-hero{display:flex;flex-wrap:wrap;gap:12px 36px;margin-bottom:18px}
.tc-hero>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.tc-lab{font-size:12.5px;color:var(--tx2)}
.tc-hero b{font:500 22px/30px var(--mono);font-variant-numeric:tabular-nums;color:var(--tx);letter-spacing:-.02em}
.tc-sub,.tc-var{font:12px/16px var(--mono);color:var(--faint)}
.tc-var.up{color:var(--in)}.tc-var.down{color:var(--out)}
.tc-plot{position:relative;width:100%;outline:none;border-radius:8px;touch-action:pan-y}
.tc-plot:focus-visible{box-shadow:0 0 0 2px var(--acc)}
.tc-plot svg{display:block;overflow:visible}
.tc-g{stroke:var(--grille);stroke-width:1;shape-rendering:crispEdges}
.tc-ax{font:11px var(--mono);fill:var(--faint)}
.tc-bar{fill:var(--green);opacity:.85;transition:opacity .12s}
.tc-plot:hover .tc-bar{opacity:.55}
.tc-plot .tc-bar.on{opacity:1}
.tc-ma{fill:none;stroke:var(--tx2);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.tc-ligne{fill:none;stroke:var(--green);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.tc-st0{stop-color:var(--green);stop-opacity:.22}.tc-st1{stop-color:var(--green);stop-opacity:0}
.tc-fin{fill:var(--green);stroke:var(--card);stroke-width:2}
.tc-x{stroke:var(--line3);stroke-width:1;pointer-events:none}
.tc-pt{fill:var(--card);stroke:var(--tx);stroke-width:2;pointer-events:none}
.tc-tip{position:absolute;pointer-events:none;min-width:168px;padding:10px 12px;border-radius:10px;background:var(--raised);border:1px solid var(--line3);box-shadow:0 8px 24px var(--ombre);z-index:5}
.tt-d{font-size:12px;color:var(--tx2);margin-bottom:6px;text-transform:capitalize}
.tt-l{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--faint);line-height:20px}
.tt-l b{font:500 13px var(--mono);color:var(--tx);font-variant-numeric:tabular-nums}
.k-bar,.k-ma{display:inline-block;flex:none}
.k-bar{width:9px;height:9px;border-radius:2px;background:var(--green)}
.k-ma{width:14px;height:2px;border-radius:1px;background:var(--tx2)}
.k-ma.k-acc{background:var(--green)}
.tc-pied{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-top:12px;flex-wrap:wrap}
.tc-leg{display:flex;gap:18px;font-size:12px;color:var(--tx2)}
.tc-leg span{display:inline-flex;align-items:center;gap:8px}
.tc-tab summary{cursor:pointer;font-size:12px;color:var(--faint);list-style:none}
.tc-tab summary::-webkit-details-marker{display:none}
.tc-tab summary:hover{color:var(--tx)}
.tc-tab[open]{flex-basis:100%}
.tc-tab[open] summary{margin-bottom:10px}
.tc-tab-in{max-height:280px;overflow:auto;border:1px solid var(--line);border-radius:8px}
.tc-tab-in table{width:100%}
.tc-tab-in td:first-child{text-transform:capitalize}
.tc svg.anim .tc-bar{transform-box:fill-box;transform-origin:50% 100%;animation:tcgrow .55s var(--ease) both}
.tc svg.anim .tc-ligne,.tc svg.anim .tc-ma{stroke-dasharray:1;stroke-dashoffset:1;animation:trace .9s .1s var(--ease) forwards}
.tc svg.anim .tc-aire{animation:revele .9s var(--ease) both}
@keyframes tcgrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.tc svg.anim .tc-bar,.tc svg.anim .tc-ligne,.tc svg.anim .tc-ma,.tc svg.anim .tc-aire{animation:none;stroke-dashoffset:0}}
@media(max-width:640px){.tc-hero{gap:10px 22px}.tc-hero b{font-size:18px;line-height:24px}.tc-hero>div:nth-child(n+4){display:none}}

/* ---------- Mini-tendance des tableaux : ventes par jour ---------- */
.spk{display:inline-flex;align-items:center;gap:6px;vertical-align:middle}
.spk .spark rect{fill:var(--faint);opacity:.45}
.spk .spark rect.rec{opacity:.9}
.spk.up .spark rect.rec{fill:var(--green);opacity:1}
.spk-l{font:12px var(--mono);color:var(--faint);width:10px}
.spk.up .spk-l{color:var(--in)}.spk.down .spk-l{color:var(--out)}
.spk .spark{animation:none}
.vspark .spk .spark{width:180px;height:64px}

/* ---------- Page Vídeos ---------- */
.vcard-eng{position:absolute;right:8px;bottom:8px;font:500 11px var(--mono);padding:3px 6px;border-radius:6px;background:rgba(0,0,0,.65);color:#fff}
.vcard-x .vprod{margin-top:8px}
#fv{flex-wrap:wrap}
.tab-wrap .prod{max-width:340px}

/* ---------- Avis clients (10.11) ---------- */
.av-res{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:28px;align-items:center;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.av-note{display:flex;flex-direction:column;gap:4px}
.av-note b{font:500 40px/44px var(--mono);letter-spacing:-.03em}
.av-note span:last-child{font-size:12.5px;color:var(--faint)}
.etoiles{display:inline-flex;gap:1px;font-size:14px;line-height:1;color:var(--line3)}
.etoiles i{font-style:normal}.etoiles i.on{color:#f5b301}
.av-dist{display:grid;gap:5px;max-width:420px}
.av-dist .l{display:grid;grid-template-columns:28px 1fr 40px;gap:10px;align-items:center;font:12px var(--mono);color:var(--tx2)}
.av-dist .piste{height:6px;border-radius:3px;background:var(--raised);overflow:hidden}
.av-dist .piste i{display:block;height:100%;border-radius:3px;background:#f5b301}
.av-dist .v{text-align:right;color:var(--faint)}
.av-mini{display:grid;gap:6px;font-size:12.5px;color:var(--tx2)}
.av-mini b{font:500 14px var(--mono);color:var(--tx)}
.av-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:18px}
.av-cols h3,.av-obj b{display:block;font-size:13px;font-weight:500;color:var(--tx2);margin-bottom:10px}
.av-chips{display:flex;flex-wrap:wrap;gap:8px}
.av-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:13px;border:1px solid var(--line);background:var(--raised)}
.av-chip small{font:11.5px var(--mono);color:var(--faint)}
.av-chip.bon{border-color:rgba(34,197,94,.3);background:var(--greenbg)}
.av-chip.mau{border-color:rgba(232,145,58,.35);background:var(--warnbg)}
.av-vide{font-size:13px;color:var(--faint)}
.av-attrs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-bottom:18px}
.av-attrs>div{padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--bg);display:flex;flex-direction:column;gap:4px}
.av-attrs span{font-size:12px;color:var(--faint)}
.av-attrs b{font-size:13.5px;font-weight:500;line-height:20px}
.av-attrs small{font:11px var(--mono);color:var(--faint)}
.av .hooks{margin-bottom:18px}
.av-obj{margin-bottom:18px}
.av-obj p{font-size:13.5px;color:var(--tx2);padding:8px 12px;border-left:2px solid var(--warn);margin-bottom:6px;background:var(--warnbg);border-radius:0 8px 8px 0}
.av-liste summary{cursor:pointer;font-size:13px;color:var(--tx2);padding:8px 0;list-style:none}
.av-liste summary::-webkit-details-marker{display:none}
.av-liste summary:hover{color:var(--tx)}
.av-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;margin-top:8px}
.av-it{padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.av-it-t{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font:12px var(--mono);color:var(--faint);margin-bottom:6px}
.av-sku{font-size:12px;color:var(--faint);margin-bottom:4px}
.av-it p{font-size:13.5px;line-height:20px;white-space:pre-line;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:760px){.av-res{grid-template-columns:1fr;gap:16px}.av-cols{grid-template-columns:1fr}}

/* ---------- Cartes à partager ---------- */
.titre-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.titre-actions .btn svg,.bloc-tete .btn svg{width:14px;height:14px}
.modale:has(.sh){max-width:560px;width:calc(100vw - 32px)}
.sh-tete{display:flex;justify-content:space-between;gap:12px;margin-bottom:14px}
.sh-tete .sous{margin:4px 0 0}
.sh #sh-fmt{margin-bottom:14px}
.sh-prev{display:flex;align-items:center;justify-content:center;height:min(58vh,520px);background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px;overflow:hidden}
.sh-prev .sh-canvas{height:100%;width:auto;max-width:100%;object-fit:contain;border-radius:8px;box-shadow:0 10px 30px var(--ombre);min-height:0}
.sh-tete .btn-ic svg{width:16px;height:16px}
.sh-tete .btn-ic{flex:none}
.sh-acts{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}

/* ---------- Afiliados ---------- */
.aff-regras{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.aff-regras>div{padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--card);display:flex;flex-direction:column;gap:4px}
.aff-regras b{font:500 24px/30px var(--mono);letter-spacing:-.02em}
.aff-regras span{font-size:13px;color:var(--tx2)}
.aff-form{display:grid;gap:14px;max-width:720px}
.aff-form label{display:grid;gap:6px;font-size:13px;color:var(--tx2)}
.aff-form small{font-size:12px;color:var(--faint)}
.aff-form textarea{resize:vertical}
.aff-2{display:grid;grid-template-columns:200px 1fr;gap:12px}
.aff-code{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;background:var(--input);overflow:hidden}
.aff-code span{padding:0 4px 0 12px;font:13px var(--mono);color:var(--faint);white-space:nowrap}
.aff-code input{border:0!important;background:none!important;box-shadow:none!important;padding-left:0!important;font-family:var(--mono)}
.aff-ok{display:flex!important;grid-template-columns:none;align-items:flex-start;gap:10px!important}
.aff-ok input{margin-top:3px}
.aff-ok a{text-decoration:underline}
.aff-note{font-size:13px;color:var(--warn)}
.aff-lien{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.aff-lien code{flex:1;min-width:240px;padding:10px 14px;border:1px solid var(--line);border-radius:8px;background:var(--bg);font:14px var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
td.neg{color:var(--out)}
.aff-ch{max-width:260px;white-space:normal;font-size:13px}
.aff-pay{font-size:13px;white-space:nowrap}
.aff-acts{display:flex;gap:6px;justify-content:flex-end}
@media(max-width:900px){.aff-regras{grid-template-columns:1fr 1fr}.aff-2{grid-template-columns:1fr}}
.aff-form textarea{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--input);color:var(--tx);font:13px/20px inherit;font-family:inherit}
.aff-form textarea::placeholder{color:var(--faint);font-family:inherit}
.aff-form input[type=checkbox]{min-height:0;width:16px;height:16px;flex:none}
.aff-sub{font-size:12px;color:var(--faint);margin-top:2px;white-space:normal}
.pref-l{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.pref-l input{width:18px;height:18px;min-height:0;margin-top:2px;flex:none;accent-color:var(--green)}
.pref-l span{display:grid;gap:2px}.pref-l b{font-weight:500}.pref-l small{font-size:13px;color:var(--tx2)}

/* ---------- Vert = action (10.11.2026) : boutons principaux et sélecteur de langue ---------- */
.btn.pri,.btn.vert,.plan-cta.vert{background:var(--green);color:#052e14;border-color:transparent;font-weight:600}
.btn.pri:hover,.btn.vert:hover,.plan-cta.vert:hover{background:var(--green);filter:brightness(1.08)}
.lang-sw{display:inline-flex;align-items:center;gap:2px;height:32px;padding:2px;border-radius:999px;border:1px solid color-mix(in srgb,var(--green) 45%,var(--line));background:var(--greenbg)}
.lang-sw button{height:26px;min-width:34px;padding:0 10px;border:0;border-radius:999px;background:transparent;color:var(--tx2);font:600 12px/26px var(--mono);cursor:pointer;transition:background-color .15s var(--ease),color .15s var(--ease)}
.lang-sw button:hover{color:var(--green)}
.lang-sw button.on{background:var(--green);color:#052e14;cursor:default}
.lang-sw button:focus-visible{outline:2px solid var(--green);outline-offset:1px}
.side-lang{color:var(--green)}
.lang-choix{display:grid;grid-template-columns:repeat(2,minmax(0,220px));gap:12px}
.lang-choix button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--tx);cursor:pointer;text-align:left;transition:border-color .15s var(--ease),background-color .15s var(--ease)}
.lang-choix button b{font-size:14px;font-weight:600}.lang-choix button small{font-size:12px;color:var(--faint)}
.lang-choix button:hover{border-color:color-mix(in srgb,var(--green) 60%,var(--line))}
.lang-choix button.on{border-color:var(--green);background:var(--greenbg);cursor:default}
.lang-choix button.on b::after{content:" \2713";color:var(--green)}
.ob-lang{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 18px;padding:10px 12px;border:1px solid var(--line);border-radius:12px}
.ob-lang>span{font-size:12px;color:var(--faint)}
.ob-lang .lang-sw button{font-family:inherit;padding:0 12px}
@media(max-width:600px){.topbar .lang-sw button{min-width:30px;padding:0 7px}.lang-choix{grid-template-columns:1fr 1fr}}
/* Téléphone : l'indicateur « Dados atualizados » réduit à un point vert ressemblait à un bouton -> masqué (la date reste sur Início) */
@media(max-width:600px){.maj{display:none}}
.side-lang{display:none}
/* ---------- Connexion : Google, séparateur, mot de passe ---------- */
.btn-google{width:100%;height:44px;margin-top:20px;gap:10px;background:#fff;color:#1f1f1f;border:1px solid #dadce0;font-weight:600;font-size:14px;text-decoration:none}
.btn-google:hover{background:#f7f8f8;border-color:#c6c9cc}
.btn-google .g-ic{width:18px;height:18px;flex:0 0 auto}
.cx-ou{display:flex;align-items:center;gap:12px;margin:16px 0 4px;color:var(--faint);font-size:12px}
.cx-ou::before,.cx-ou::after{content:"";flex:1;height:1px;background:var(--line)}
.cx-alt{margin-top:8px;background:none;border:0;padding:6px 0;color:var(--tx2);font-size:13px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.cx-alt:hover{color:var(--green)}
#pw-zone{display:flex;flex-direction:column;gap:0;margin-top:14px}
#pw-zone[hidden]{display:none}
.pw-form{display:grid;gap:10px;max-width:420px}
.pw-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--tx2)}
.pw-etat{font-size:13px;color:var(--tx2)}
.ob-q small{font-weight:400;color:var(--faint)}
.ob-ck{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:13px;color:var(--tx2);cursor:pointer}
.ob-ck input{margin-top:2px;accent-color:var(--green)}
/* ---------- Menu du compte (options séparées, déconnexion visible) ---------- */
.acc-menu{position:fixed;z-index:80;width:280px;padding:6px;border:1px solid var(--line);border-radius:14px;background:var(--card);box-shadow:0 12px 40px var(--ombre);animation:am-in .14s var(--ease)}
@keyframes am-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.acc-menu{animation:none}}
.am-tete{display:flex;align-items:center;gap:10px;padding:10px 10px 12px}
.am-tete .avatar{width:34px;height:34px;font-size:12px;flex:none}
.am-tete div{min-width:0;flex:1}.am-tete b{display:block;font-size:14px;line-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.am-tete small{display:block;font-size:12px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.am-grp{border-top:1px solid var(--line);padding:4px 0}
.am-it,.am-up{display:flex;align-items:center;gap:10px;width:100%;height:36px;padding:0 10px;border:0;border-radius:8px;background:none;color:var(--tx);font:inherit;font-size:13px;text-align:left;cursor:pointer;text-decoration:none}
.am-it svg,.am-up svg{width:16px;height:16px;color:var(--tx2);flex:none}
.am-it:hover,.am-it:focus-visible{background:var(--hover);outline:none}
.am-up{color:var(--green);font-weight:600}.am-up svg{color:var(--green)}.am-up:hover{background:var(--greenbg)}
.am-out{color:var(--out)}.am-out svg{color:var(--out)}
/* Sous-pages du compte */
.conta-tabs{display:flex;gap:4px;margin:4px 0 24px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.conta-tabs::-webkit-scrollbar{display:none}
.conta-tabs a{flex:none;padding:10px 14px;margin-bottom:-1px;border-bottom:2px solid transparent;color:var(--tx2);font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap}
.conta-tabs a:hover{color:var(--tx)}
.conta-tabs a.on{color:var(--tx);border-bottom-color:var(--green)}
.conta-une{max-width:720px;display:grid;gap:16px}

/* Équipe : croissance */
.gr-tabs{display:flex;gap:8px;margin:0 0 16px}.gr-tabs .chip-f{padding:6px 12px;border-radius:999px;border:1px solid var(--line);font-size:13px}.gr-tabs .chip-f.on{background:var(--g,#22C55E);color:#052e14;border-color:transparent;font-weight:600}
.gr-funil{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border-radius:12px;overflow:hidden}.gr-funil div{background:var(--card,#19191b);padding:16px}.gr-funil span{display:block;font-size:12.5px;color:var(--tx2)}.gr-funil b{display:block;font-size:26px;margin:4px 0 2px}.gr-funil em{font-style:normal;font-size:12.5px;color:var(--g,#22C55E)}
.gr-note{font-size:13px;color:var(--tx2);margin:12px 2px 0}.gr-chart{width:100%;height:160px;display:block}.gr-ax{display:flex;justify-content:space-between;font-size:12px;color:var(--tx2);margin-top:6px}
@media(max-width:760px){.gr-funil{grid-template-columns:1fr 1fr}}

.cc-box{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;padding:12px 14px;border:1px dashed var(--line);border-radius:12px;font-size:14px;color:var(--tx2)}.cc-box input{height:36px;padding:0 10px;border-radius:9px;border:1px solid var(--line);background:var(--bg);color:var(--tx);text-transform:uppercase;width:140px}.cc-box b{color:var(--tx)}.cc-box svg{width:16px;height:16px;color:var(--g,#22C55E)}

/* ---------- Mobile (11.11) : rien ne déborde, rien ne se chevauche ---------- */
@media(max-width:900px){
 /* Onglets segmentés : une seule ligne qui défile au doigt, au lieu de passer sur deux lignes et d'être coupés */
 .seg{display:flex;max-width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;height:auto;min-height:34px}
 .seg::-webkit-scrollbar{display:none}
 .seg button{flex:none;white-space:nowrap;min-height:30px}
 /* Bouton d'aide flottant : il couvrait les chiffres et les boutons. Sur mobile, l'aide est dans le menu du compte */
 #sup-fab{display:none}
 #sup{bottom:72px}
 /* « Vistos recentemente » vide : inutile sur petit écran */
 .recents.vide{display:none}
 .recents-lab{white-space:nowrap;flex:none}
 .hoje-tete{flex-wrap:wrap;gap:4px 12px}
 .hcard.promo{min-height:0;justify-content:flex-start;padding-top:44px}
 .hcard{min-height:210px}
}
@media(max-width:640px){
 /* Tableaux : produit plus étroit pour que le premier chiffre reste visible sans faire défiler */
 th,td{padding-left:10px;padding-right:10px}
 .rang{width:28px}
 .prod,.tab-wrap .prod{min-width:150px;max-width:56vw;gap:10px}
 .prod img,.thumb{width:38px;height:38px}
 .tab-wrap{-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)}
 /* Cartes vidéo : vues et engagement l'un au-dessus de l'autre au lieu de se chevaucher */
 .vcard-eng{left:8px;right:auto;bottom:36px}
 .vgrid{gap:12px}
 .vcard-st{flex-wrap:wrap;gap:2px 10px}
 /* Champs avec préfixe (lien d'affilié) : le champ se rétrécit au lieu de dépasser */
 .aff-code input{min-width:0;flex:1;width:auto}
 .aff-code span{font-size:12px;max-width:52%;overflow:hidden;text-overflow:ellipsis}
 .aff-lien{flex-wrap:wrap;gap:10px}.aff-lien code{min-width:0;overflow-wrap:anywhere;word-break:break-all}
 .aff-regras{gap:8px}
 /* Boutons et blocs : un peu d'air entre éléments collés */
 .bloc{margin-bottom:12px}
 .kpis{margin-bottom:12px}
 .btn-row,.acts,.ch-acts{flex-wrap:wrap;gap:8px}
}

/* ---------- Onboarding et plans : vert, animé, barre du bas toujours visible (11.11) ---------- */
.ob{background:radial-gradient(900px 520px at 50% -12%,color-mix(in srgb,var(--green) 16%,transparent),transparent 70%),var(--s0)}
.ob-box{border-color:color-mix(in srgb,var(--green) 18%,var(--line));animation:m-in .45s var(--spring)}
.ob-prog{height:6px;border-radius:3px;margin-bottom:0}
.ob-prog i{position:relative;overflow:hidden;background:linear-gradient(90deg,#16a34a,#4ade80);box-shadow:0 0 18px color-mix(in srgb,var(--green) 55%,transparent);transition:width .6s var(--spring)}
.ob-prog i::after{content:"";position:absolute;inset:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:glisse 1.8s ease-in-out infinite}
.ob-etapa{font:12px var(--mono);color:var(--faint);margin:10px 0 auto;letter-spacing:.04em}
.ob-body{animation:m-step .45s var(--spring)}
.ob-body h2{background:linear-gradient(180deg,var(--tx),color-mix(in srgb,var(--tx) 75%,var(--green)));-webkit-background-clip:text;background-clip:text}
.ob-chip{transition:border-color .15s,background-color .15s,transform .15s var(--spring)}
.ob-chip:hover{transform:translateY(-1px)}
.ob-chip:active{transform:scale(.96)}
.ob-chip.on{border-color:var(--green);background:var(--greenbg);color:var(--tx);font-weight:500;animation:ob-pop .35s var(--spring)}
.ob-chip.on::before{content:"✓";color:var(--green);font-weight:700;margin-right:6px}
@keyframes ob-pop{0%{transform:scale(.94)}60%{transform:scale(1.05)}100%{transform:none}}
.ob-ava{background:var(--greenbg);color:var(--green);box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 45%,transparent);animation:ping 2.2s ease-out infinite}
.ob-card{border-color:color-mix(in srgb,var(--green) 25%,var(--line));animation:float 4s ease-in-out infinite}
.ob-side{background:radial-gradient(500px 400px at 50% 40%,color-mix(in srgb,var(--green) 10%,transparent),transparent 70%)}
.ob-tags span{animation:pop .3s var(--spring);border-color:color-mix(in srgb,var(--green) 30%,var(--line))}
#ob-next:not(:disabled),.ob .btn.vert,.ob .btn.pri{background:var(--green);color:#052e14;border-color:transparent;font-weight:600;transition:transform .15s var(--spring),filter .15s,box-shadow .2s}
#ob-next:not(:disabled):hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 10px 26px -10px color-mix(in srgb,var(--green) 70%,transparent)}
#ob-next:disabled{opacity:.45}
.ob-box.wide #ob-next{background:transparent;color:var(--tx2);border:1px solid var(--line3);font-weight:500}
.ob-box.wide #ob-next:hover{color:var(--tx);box-shadow:none}
/* Étape des plans : la boîte ne coupe plus le bas, la barre Voltar / Decidir depois reste collée en bas avec de l'air */
.ob-box.wide{overflow:clip;min-height:0}
.ob-box.wide .ob-main{padding-bottom:0}
.ob-box.wide .ob-body{margin:24px 0 8px}
.ob-box.wide .ob-nav{position:sticky;bottom:0;z-index:3;margin:0 -48px;padding:16px 48px 20px;background:color-mix(in srgb,var(--card) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line)}
@media(max-width:860px){.ob-box.wide .ob-nav{margin:0 -20px;padding:12px 20px 16px}.ob-nav .btn{padding:0 14px;font-size:13px}}
/* Plans en vert (l'offre recommandée doit sauter aux yeux) */
.plan{transition:transform .2s var(--spring),border-color .2s,box-shadow .2s}
.plan:hover{transform:translateY(-3px);border-color:var(--line3)}
.plan.star,:root[data-theme="light"] .plan.star{border:1.5px solid var(--green);box-shadow:0 18px 50px -18px color-mix(in srgb,var(--green) 45%,transparent);background:linear-gradient(180deg,var(--greenbg),transparent 45%),var(--card)}
.plan.star:hover{border-color:var(--green)}
.plan-badge{background:var(--green);color:#052e14;box-shadow:0 6px 16px -6px color-mix(in srgb,var(--green) 70%,transparent)}
.plan-cta.vert,.plan .btn.vert{background:var(--green);color:#052e14;border-color:transparent;font-weight:600}
.plan-cta.vert:hover{filter:brightness(1.08);background:var(--green)}
.plan-cta.actuel{background:var(--greenbg);color:var(--green);border:1px solid color-mix(in srgb,var(--green) 35%,transparent)}
.plan-bonus{border:1px dashed color-mix(in srgb,var(--green) 45%,var(--line))}
.plan-bonus b,.plan-bonus span svg{color:var(--green)}
.periode .seg button.on{background:var(--greenbg);color:var(--tx)}
.periode .mini-pro{color:var(--green);border-color:color-mix(in srgb,var(--green) 35%,var(--line));background:transparent}

/* Cases à cocher : propres et vertes, sans cadre qui apparaît autour après un clic */
input[type=checkbox]{-webkit-appearance:none;appearance:none;width:18px;height:18px;min-height:0;padding:0;margin:0;border:1.5px solid var(--line3);border-radius:5px;background:var(--input);display:inline-grid;place-content:center;flex:none;cursor:pointer;transition:background-color .15s,border-color .15s;box-shadow:none}
input[type=checkbox]::before{content:"";width:10px;height:10px;transform:scale(0);transition:transform .2s var(--spring);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%);background:#052e14}
input[type=checkbox]:checked{background:var(--green);border-color:var(--green)}
input[type=checkbox]:checked::before{transform:scale(1)}
input[type=checkbox]:hover{border-color:var(--green)}
input[type=checkbox]:focus{outline:none;box-shadow:none;border-color:var(--line3)}
input[type=checkbox]:checked:focus{border-color:var(--green)}
input[type=checkbox]:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.ob-ck{align-items:center}.ob-ck input{margin-top:0}
@media (prefers-reduced-motion:reduce){.ob-prog i::after,.ob-ava,.ob-card,.ob-box,.ob-body,.ob-chip.on,.ob-tags span{animation:none}}

/* Pastille d'essai Pro (11.11) */
.trial-pill{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px 0 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--green) 45%,var(--line));background:var(--greenbg);color:var(--tx);font:500 12.5px/1 'Geist',system-ui,sans-serif;white-space:nowrap;text-decoration:none;margin-right:8px;transition:transform .15s var(--spring),box-shadow .2s}
.trial-pill:hover{transform:translateY(-1px);box-shadow:0 8px 20px -10px color-mix(in srgb,var(--green) 70%,transparent)}
.trial-pill i{width:7px;height:7px;border-radius:50%;background:var(--green);animation:ping 2s ease-out infinite}
.trial-pill b{font:500 12.5px/1 var(--mono);color:var(--green)}
.trial-pill.fin{border-color:color-mix(in srgb,var(--warn) 45%,var(--line));background:var(--warnbg)}.trial-pill.fin b{color:var(--warn)}.trial-pill.fin i{background:var(--warn)}
@media(max-width:640px){.trial-pill span{display:none}.trial-pill{padding:0 10px;margin-right:4px}}
.ob ~ #sup-fab,body:has(#modal-root .ob) #sup-fab{display:none}
.ob-main{min-width:0}
@media(max-width:640px){.ob-nav .btn{white-space:normal;line-height:1.25;height:auto;min-height:42px;padding:8px 14px;text-align:center}.ob-box.wide #ob-next{flex:1}.ob-body .sous{font-size:14px}}
.ob-box{flex-shrink:0}

/* Équipe (plan Agência) */
.tm p{color:var(--tx2);margin:0 0 14px;max-width:640px}
.tm-l{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:8px;max-width:640px}
.tm-l li{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.tm-l li.pend{border-style:dashed}
.tm-l li div{flex:1;min-width:0}.tm-l b{display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tm-l small{color:var(--faint);font-size:12px}
.tm-ava{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--greenbg);color:var(--green);font-weight:600;flex:none}.tm-ava svg{width:16px;height:16px}
.tm-f{display:flex;gap:8px;max-width:640px}.tm-f input{flex:1;min-width:0}

/* Afiliados : pedido enviado (11.11) */
.aok{text-align:center;padding:8px 4px}.aok h2{font-size:24px;font-weight:600;margin:14px 0 6px}.aok .sous{color:var(--tx2);max-width:420px;margin:0 auto}
.aok-ic{width:64px;height:64px;margin:4px auto 0;border-radius:50%;display:grid;place-items:center;background:var(--greenbg);color:var(--green);box-shadow:0 0 0 8px color-mix(in srgb,var(--green) 10%,transparent);animation:ob-pop .5s var(--spring)}.aok-ic svg{width:30px;height:30px}
.aok-acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.aff-wait{display:flex;gap:16px;align-items:flex-start;padding:22px;border-color:color-mix(in srgb,var(--green) 40%,var(--line));background:linear-gradient(180deg,var(--greenbg),transparent 70%),var(--card)}
.aw-ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--greenbg);color:var(--green);flex:none}.aw-ic svg{width:22px;height:22px}
.aff-wait b{font-size:17px}.aff-wait p{color:var(--tx2);margin:6px 0 14px;max-width:620px}
.aw-steps{list-style:none;padding:0;margin:0;display:flex;gap:8px;flex-wrap:wrap}
.aw-steps li{font-size:13px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);color:var(--faint)}
.aw-steps li.ok{border-color:color-mix(in srgb,var(--green) 45%,var(--line));color:var(--green)}.aw-steps li.ok:before{content:"✓ "}
.aw-steps li.cur{border-color:var(--line3);color:var(--tx)}.aw-steps li.cur:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--warn);margin-right:7px;vertical-align:1px;animation:ping 2s infinite}
/* Onboarding : la barre du bas colle vraiment au bas de l'écran */
.ob{padding-bottom:0}.ob-box{margin-bottom:40px}
.ob-cc{margin-top:18px;justify-content:center}
/* Connexion : choix de la langue bien visible */
.cx-lsw{margin-left:auto;display:inline-flex;gap:2px;padding:2px;border-radius:999px;border:1px solid color-mix(in srgb,var(--green) 40%,var(--line));background:color-mix(in srgb,var(--green) 8%,transparent)}
.cx-lsw button{border:0;background:none;color:var(--tx2);font:600 12px/1 var(--mono);padding:6px 10px;border-radius:999px;cursor:pointer}
.cx-lsw button.on{background:var(--green);color:#052e14}
.cx-lsw button:not(.on):hover{color:var(--tx)}

/* Code créateur visible (11.11) */
.cc-box{margin:0 0 18px}.cc-box.on{border-style:solid;border-color:color-mix(in srgb,var(--green) 45%,var(--line));background:var(--greenbg);color:var(--tx)}.cc-box.on svg{width:18px;height:18px;flex:none;color:var(--green);stroke:currentColor;fill:none;stroke-width:2.4}
.plan-cc{display:flex;gap:6px;align-items:flex-start;margin:-8px 0 14px;font-size:12.5px;line-height:18px;color:var(--green)}.plan-cc b{color:var(--tx)}.plan-cc svg{width:14px;height:14px;flex:none;margin-top:2px;stroke:currentColor;fill:none;stroke-width:2.6}
.ob-cc{margin:4px 0 18px}

/* Conteúdo do dia (envoi dans les brouillons TikTok) */
.cd-conn{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cd-txt{margin:0;max-width:560px;color:var(--tx2);line-height:1.55}
.cd-acc{display:flex;align-items:center;gap:12px}.cd-acc img{width:44px;height:44px;border-radius:50%;object-fit:cover}.cd-acc b{display:block}.cd-acc small{color:var(--tx3,var(--tx2))}
.cd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.cd-card{border:1px solid var(--line3);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.cd-media{background:#0A0A0B;display:flex;justify-content:center}.cd-media video{width:100%;max-height:380px;aspect-ratio:9/16;object-fit:contain;background:#000}
.cd-photos{display:flex;gap:6px;overflow-x:auto;padding:8px;scroll-snap-type:x mandatory;width:100%}.cd-photos img{height:340px;aspect-ratio:9/16;object-fit:cover;border-radius:8px;scroll-snap-align:start;flex:none}
.cd-body{padding:14px;display:flex;flex-direction:column;gap:10px}
.cd-kind{color:var(--tx3,var(--tx2));font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.cd-cap{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.5}.cd-cap span{flex:1;max-height:84px;overflow:auto}
.cd-ok{margin:0;font-size:13px;color:#22c55e}
.cd-cap .btn-ic{flex:none}.cd-cap .btn-ic svg{width:15px;height:15px}
/* Ganchos par famille, avec la première scène à filmer */
.hook-f span{display:flex;flex-direction:column;gap:3px}.hk-f{font:600 10.5px/1 var(--mono,ui-monospace,monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--green,#16a34a)}
.hk-v{font-weight:400;font-size:12.5px;color:var(--tx2)}.hk-tip{margin:2px 0 6px;font-size:13px;color:var(--tx2)}
.hk-more summary{cursor:pointer;font-size:13px;font-weight:600;margin:6px 0;color:var(--tx2)}.hk-more .hook{margin-top:8px}
.busca-ord{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--tx2)}.busca-ord select{background:var(--s1,transparent);color:var(--tx);border:1px solid var(--line3);border-radius:8px;padding:5px 8px}