/* JDP Expérience : light premium translucide (maquette-v1 validée).
   Tout est scopé .jdpx-body : zéro collision avec le CSS du theme. */

.jdpx-body{
	--bg:#FBFAF6; --bg2:#EFEDE4; --surface:#FFFFFF; --surface2:#FAF8F3; --line:#E8E5DC; --line2:#DEDACE;
	--t1:#1B1B1A; --t2:#56544C; --t3:#8B897F;
	--accent:#E68A1C; --accent2:#FBA532; --grad:linear-gradient(135deg,#FBA532,#F0467D);
	--green:#0FA573; --red:#E0335E; --blue:#2D7FF0; --violet:#7C5CE0;
	--ig:linear-gradient(135deg,#F09433,#DC2743 55%,#BC1888);
	--r:16px; --ease:cubic-bezier(.23,1,.32,1);
	margin:0;padding:0;
	background:var(--bg);color:var(--t1);
	font-family:Poppins,system-ui,sans-serif;font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
.jdpx-body *{box-sizing:border-box}
.jdpx-body a{color:inherit;text-decoration:none}
.jdpx-body h1,.jdpx-body h2,.jdpx-body h3,.jdpx-body h4,.jdpx-body p,.jdpx-body ul{margin:0;padding:0}
.jdpx-wrap{max-width:1240px;margin:0 auto;padding:0 28px}
.jdpx-body .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- topbar ---------- */
.jdpx-top{position:sticky;top:0;z-index:50;background:rgba(251,250,246,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.jdpx-top .jdpx-wrap{display:flex;align-items:center;gap:32px;height:64px}
.jdpx-logo{display:flex;align-items:flex-end;gap:8px;font-weight:800}
.jdpx-logo img{height:34px;display:block}
.jdpx-logo em{font-style:normal;font-size:13px;margin-bottom:2px;color:var(--accent)}
.jdpx-nav{display:flex;gap:26px;font-size:13.5px;color:var(--t2)}
.jdpx-nav a:hover{color:var(--t1)}
.jdpx-right{margin-left:auto;display:flex;gap:12px;align-items:center}
.jdpx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:11px;padding:10px 20px;font-weight:600;font-size:14px;cursor:pointer;border:0;font-family:inherit;transition:transform .16s var(--ease),box-shadow .16s var(--ease),background .16s}
.jdpx-btn:active{transform:scale(.97)}
.jdpx-btn.grad{background:var(--accent);color:#fff;box-shadow:0 6px 18px rgba(230,138,28,.26)}
.jdpx-btn.grad:hover{box-shadow:0 10px 26px rgba(230,138,28,.36)}
.jdpx-btn.ghost{background:var(--surface);border:1px solid var(--line2);color:var(--t1);box-shadow:0 1px 2px rgba(16,20,29,.05)}
.jdpx-btn.ghost:hover{background:var(--surface2)}
.jdpx-btn[disabled]{opacity:.55;cursor:wait}
.badge-pro{font-size:11px;font-weight:700;letter-spacing:.6px;padding:4px 10px;border-radius:999px;background:rgba(230,138,28,.12);color:var(--accent);border:1px solid rgba(251,165,50,.3)}

/* ---------- app-shell (espace connecté) ---------- */
.jdpx-sidebar-toggle{display:none;border:1px solid var(--line2);background:var(--surface);border-radius:10px;width:40px;height:40px;font-size:17px;cursor:pointer;color:var(--t1)}
.jdpx-shell{display:grid;grid-template-columns:248px 1fr;max-width:1320px;margin:0 auto;min-height:calc(100vh - 64px)}
.jdpx-sidebar{position:sticky;top:64px;align-self:start;height:calc(100vh - 64px);padding:22px 16px;display:flex;flex-direction:column;gap:6px;border-right:1px solid var(--line)}
.jdpx-side-nav{display:flex;flex-direction:column;gap:4px}
.jdpx-side-item{display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:12px;font-weight:600;font-size:14px;color:var(--t2);transition:background .15s,color .15s}
.jdpx-side-item .ic{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px}
.jdpx-side-item:hover{background:var(--surface2);color:var(--t1)}
.jdpx-side-item.on{background:rgba(230,138,28,.10);color:var(--accent)}
.jdpx-side-foot{margin-top:auto;padding:14px;border-radius:14px;background:var(--pap);border:1px solid var(--line);font-size:12.5px;color:var(--t2)}
.jdpx-side-foot b{color:var(--t1)}
.jdpx-side-foot .jdpx-btn{margin-top:10px;width:100%;padding:9px;font-size:13px}
.jdpx-main{padding:28px 32px 60px;min-width:0}
.jdpx-sec{display:none;animation:jdpx-fade .4s var(--ease)}
.jdpx-sec.on{display:block}
.jdpx-main .jdpx-analyzer{max-width:none;margin:0 0 8px}
.jdpx-main .jdpx-analyzer .nets{justify-content:flex-start}
.jdpx-main .jdpx-analyzer .searchbox{box-shadow:0 1px 3px rgba(16,20,29,.06)}
.jdpx-main .jdpx-hero{display:none}
.sec-empty{text-align:center;padding:64px 24px;color:var(--t3)}
.sec-empty .ico{font-size:40px;display:block;margin-bottom:14px}
.sec-empty h3{font-size:18px;color:var(--t1);margin-bottom:8px}
.sec-empty p{font-size:13.5px;max-width:440px;margin:0 auto 18px;line-height:1.6}
.sec-title{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.2;color:var(--t1);margin-bottom:6px}
.sec-lead{font-size:13.5px;color:var(--t3);margin-top:2px;margin-bottom:24px;line-height:1.5;max-width:64ch}
@media(max-width:980px){
	.jdpx-sidebar-toggle{display:inline-grid;place-items:center}
	.jdpx-shell{grid-template-columns:1fr}
	.jdpx-sidebar{position:fixed;top:64px;left:0;width:264px;z-index:60;background:rgba(255,255,255,.97);backdrop-filter:blur(14px);transform:translateX(-100%);transition:transform .25s var(--ease);box-shadow:0 20px 60px -20px rgba(16,20,29,.4)}
	.jdpx-shell.nav-open .jdpx-sidebar{transform:none}
	.jdpx-main{padding:22px 18px 50px}
}

/* ---------- hero ---------- */
.jdpx-hero{padding:84px 0 60px;text-align:center;position:relative}
.jdpx-hero .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--t2);border:1px solid var(--line2);background:var(--surface);border-radius:999px;padding:7px 16px;margin-bottom:22px}
.jdpx-hero .pulse{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(15,165,115,.45);animation:jdpx-pulse 2s infinite}
@keyframes jdpx-pulse{70%{box-shadow:0 0 0 9px transparent}}
.jdpx-hero h1{font-size:clamp(34px,5vw,54px);font-weight:800;line-height:1.12;letter-spacing:-.02em;max-width:840px;margin:0 auto}
.jdpx-hero h1 em{font-style:normal;color:var(--accent)}
.jdpx-hero .sub{color:var(--t2);max-width:600px;margin:18px auto 36px;font-size:16.5px}
.jdpx-analyzer{max-width:680px;margin:0 auto;position:relative;z-index:2}
.jdpx-analyzer .nets{display:flex;justify-content:center;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.jdpx-analyzer .net{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;border:1px solid var(--line2);background:var(--surface);font:600 13.5px Poppins,sans-serif;color:var(--t2);cursor:pointer;transition:all .16s var(--ease)}
.jdpx-analyzer .net:hover{transform:translateY(-1px);color:var(--t1)}
.jdpx-analyzer .net.on{color:#fff;border-color:transparent;background:var(--ig);box-shadow:0 6px 18px rgba(220,39,67,.35)}
.jdpx-analyzer .net.on[data-net="tiktok"]{background:#10141D;box-shadow:0 6px 18px rgba(16,20,29,.35)}
.jdpx-analyzer .net.on[data-net="youtube"]{background:#FF4444;box-shadow:0 6px 18px rgba(255,68,68,.35)}
.jdpx-analyzer .searchbox{display:flex;gap:10px;background:var(--surface);border:1px solid var(--line2);border-radius:18px;padding:10px;box-shadow:0 2px 6px rgba(16,20,29,.05),0 24px 60px rgba(16,20,29,.12)}
.jdpx-analyzer input{flex:1;background:transparent;border:0;outline:0;color:var(--t1);font:600 17px Poppins,sans-serif;padding:8px 14px;min-width:0}
.jdpx-analyzer input::placeholder{color:var(--t3)}
.jdpx-analyzer .hint{margin-top:14px;font-size:12.5px;color:var(--t3);text-align:center}
.jdpx-analyzer .hint b{color:var(--t2)}
.jdpx-analyzer .hint.err{color:var(--red);font-weight:600}

/* ---------- sections / cartes ---------- */
.jdpx-body section{padding:34px 0}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px;gap:12px;flex-wrap:wrap}
.sec-head h2{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.2;color:var(--t1)}
.sec-head .more{font-size:13px;color:var(--t3)}
.jdpx-body .card{background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 1px 2px rgba(27,27,26,.04),0 12px 28px -20px rgba(27,27,26,.25);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.jdpx-body .card:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(16,20,29,.05),0 18px 36px -16px rgba(16,20,29,.35)}
.ai-tag{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:var(--violet);background:rgba(124,92,224,.08);border:1px solid rgba(124,92,224,.25);padding:4px 11px;border-radius:999px}

/* profil */
.profile{display:flex;gap:22px;padding:26px;align-items:center;flex-wrap:wrap}
.avatar{width:84px;height:84px;border-radius:50%;background:var(--ig);padding:3px;flex:none}
.avatar img,.avatar .in{width:100%;height:100%;border-radius:50%;object-fit:cover;background:#E9ECF2;display:grid;place-items:center;font-size:34px}
.profile .id h3{font-size:20px;font-weight:700;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* Coche de vérification : SVG blanc centré dans la pastille bleue (net, parfaitement centré). */
.vbadge{width:16px;height:16px;border-radius:50%;flex:none;vertical-align:middle;font-size:0;display:inline-block;background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center center / 10px 10px no-repeat}
.profile .bio{color:var(--t2);font-size:13.5px;max-width:430px}
.profile .quick{margin-left:auto;display:flex;gap:28px;text-align:center}
.profile .quick b{display:block;font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.profile .quick span{font-size:12px;color:var(--t3)}
.jdpx-boost-cta{flex:none;align-self:center;white-space:nowrap}
@media(max-width:880px){.jdpx-boost-cta{width:100%;margin-top:6px}}

/* KPI */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(186px,1fr));gap:16px}
.kpi{padding:18px 18px 14px;position:relative;overflow:hidden}
.kpi .lbl{font-size:12px;color:var(--t3);font-weight:600;letter-spacing:.3px;text-transform:uppercase}
.kpi .val{font-size:26px;font-weight:800;margin:4px 0 2px;font-variant-numeric:tabular-nums}
.kpi .delta{font-size:12.5px;font-weight:700}
.kpi .delta.up{color:var(--green)}.kpi .delta.dn{color:var(--red)}.kpi .delta.mid{color:var(--t3)}
.kpi svg.spark{position:absolute;right:10px;bottom:10px;opacity:.9}

/* scores */
.scores{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.score{padding:22px;display:flex;gap:18px;align-items:center}
.gauge{position:relative;width:74px;height:74px;flex:none}
.gauge svg{transform:rotate(-90deg)}
.gauge .v{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-size:18px}
.score .t b{display:block;font-weight:700;font-size:14.5px}
.score .t span{font-size:12.5px;color:var(--t3)}

/* publications */
.posts{padding:22px}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(min-width:880px){.posts .pgrid{grid-template-columns:repeat(4,1fr)}}
.post{aspect-ratio:1;border-radius:12px;position:relative;overflow:hidden;cursor:pointer;background:linear-gradient(135deg,#2c3046,#5a3d6e);border:0;padding:0;transition:transform .2s var(--ease)}
.post img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.post::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.72))}
.post .st{position:absolute;left:10px;bottom:8px;z-index:2;font-size:11.5px;font-weight:700;display:flex;gap:10px;color:#fff}
.post:hover{transform:scale(1.02)}
.post .vid{position:absolute;top:8px;right:8px;z-index:2;width:26px;height:26px;border-radius:8px;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);display:grid;place-items:center;font-size:12px;color:#fff}
.post.sel{outline:3px solid var(--accent);outline-offset:2px}
.post .check{position:absolute;top:8px;left:8px;z-index:2;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;display:none;place-items:center;font-size:12px;font-weight:800}
.post.sel .check{display:grid}
.loadmore{margin-top:12px;width:100%;padding:11px;border-radius:12px;border:1px dashed var(--line2);background:transparent;color:var(--t2);font:600 13px Poppins,sans-serif;cursor:pointer}
.loadmore:hover{border-color:var(--accent);color:var(--accent)}

/* booster */
.boost{padding:22px;display:grid;grid-template-columns:1.15fr 1fr;gap:22px}
.boost .selwrap .post{aspect-ratio:9/14;max-width:240px;width:100%}
.boost .ctx{font-size:13px;color:var(--t2);margin-top:12px}
.boost .ctx b{color:var(--green)}
.boost .ctx2{font-size:12.5px;color:var(--t3);margin-top:6px}
.boost .ctx2 b{color:var(--t1)}
.bpanel h4{font-size:15px;margin-bottom:4px}
.bpanel .for{font-size:12.5px;color:var(--t3);margin-bottom:14px;word-break:break-all}
.svc{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;margin-bottom:9px;cursor:pointer;transition:border-color .15s,background .15s;background:rgba(255,255,255,.5)}
.svc:hover{border-color:var(--line2)}
.svc.on{border-color:var(--accent);background:rgba(230,138,28,.06)}
.svc .ck{width:19px;height:19px;border-radius:6px;border:2px solid var(--line2);display:grid;place-items:center;font-size:11px;color:#fff;flex:none}
.svc.on .ck{background:var(--accent);border-color:var(--accent)}
.svc .nm{font-weight:600;font-size:13.5px}
.svc .nm small{display:block;font-weight:600;color:var(--t3);font-size:11.5px}
.svc .pr{margin-left:auto;text-align:right;font-weight:700;font-size:13.5px;flex:none}
.svc .pr small{display:block;font-weight:600;color:var(--violet);font-size:11px}
.svc select{border:1px solid var(--line2);border-radius:8px;padding:5px 8px;font:600 12.5px Poppins,sans-serif;color:var(--t1);background:#fff;flex:none}
.svc .rsel{border-color:rgba(230,138,28,.4);color:var(--accent);background:rgba(230,138,28,.05);max-width:135px}
.cmts{margin:4px 0 10px}
.cmts textarea,.cmts input[type=text]{width:100%;border:1px solid var(--line2);border-radius:12px;padding:12px;font:400 13px Poppins,sans-serif;color:var(--t1);background:#fff}
.cmts textarea{min-height:96px;resize:vertical}
.cmts input[type=text]{margin-bottom:8px;padding:9px 12px}
.cmts .genrow{display:flex;justify-content:space-between;align-items:center;margin-top:8px;gap:10px;flex-wrap:wrap}
.cmts .gen{display:inline-flex;align-items:center;gap:7px;background:rgba(124,92,224,.10);color:var(--violet);border:1px solid rgba(124,92,224,.3);border-radius:10px;padding:8px 14px;font:600 12.5px Poppins,sans-serif;cursor:pointer}
.cmts .gen:hover{background:rgba(124,92,224,.16)}
.cmts .gen[disabled]{opacity:.5;cursor:wait}
.cmts .count{font-size:11.5px;color:var(--t3)}
.upsell-chips{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0;align-items:center}
.upsell-chips .pre{font-size:12px;color:var(--t3)}
.upchip{display:inline-flex;align-items:center;gap:7px;font:600 12px Poppins,sans-serif;padding:7px 13px;border-radius:999px;border:1px dashed rgba(230,138,28,.5);color:var(--accent);cursor:pointer;background:rgba(230,138,28,.05)}
.upchip:hover{background:rgba(230,138,28,.12)}
.bpanel .total{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:14px;margin-top:6px;gap:12px;flex-wrap:wrap}
.bpanel .total b{font-size:22px}
.bpanel .total .lbl2{font-size:12.5px;color:var(--t3)}
.bpanel .total .pro-price{font-size:12px;color:var(--violet);font-weight:700}

/* diagnostic IA */
.diag{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.diag[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){.diag,.diag[data-n="2"]{grid-template-columns:1fr}}
.diag .card{padding:22px}
.diag h4{display:flex;align-items:center;gap:10px;font-size:15px;margin-bottom:12px}
.diag .pill{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-size:14px;flex:none}
.diag ul{list-style:none;display:grid;gap:10px;font-size:13.5px;color:var(--t2)}
.diag li{display:flex;gap:9px}
.diag li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--t3);flex:none;margin-top:8px}

/* authenticity */
.authy{padding:22px}
.authy .deg{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px;padding:7px 14px;border-radius:999px;margin-bottom:12px}
.authy .deg.none{background:rgba(15,165,115,.12);color:var(--green)}
.authy .deg.low{background:rgba(45,127,240,.10);color:var(--blue)}
.authy .deg.mid{background:rgba(230,138,28,.12);color:var(--accent)}
.authy .deg.high{background:rgba(224,51,94,.10);color:var(--red)}
.authy .note{font-size:12px;color:var(--t3);margin-top:10px}
.folauth{margin-top:14px;border-top:1px solid var(--line);padding-top:14px}
.fa-head{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.fa-num{font-size:32px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1;flex:none}
.fa-num small{font-size:15px}
.fa-num.none{color:var(--green)}.fa-num.low{color:var(--blue)}.fa-num.mid{color:var(--accent)}.fa-num.high{color:var(--red)}
.fa-head b{display:block;font-size:13.5px}
.fa-head span{font-size:12px;color:var(--t3)}
.fa-bd{display:flex;flex-wrap:wrap;gap:8px}
.fa-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--t2);background:var(--surface2);border:1px solid var(--line);border-radius:999px;padding:6px 12px}
.fa-chip b{color:var(--accent);font-weight:800}
.aq-cats{display:grid;gap:10px;margin:14px 0}
.aq-cat{display:grid;grid-template-columns:1fr 130px 44px;align-items:center;gap:12px;font-size:12.5px}
.aq-bar{height:9px;border-radius:99px;background:var(--bg2);overflow:hidden;order:2}
.aq-bar i{display:block;height:100%;border-radius:99px;transition:width 1s var(--ease)}
.aq-bar.green i{background:var(--green)}.aq-bar.blue i{background:var(--blue)}.aq-bar.red i{background:var(--red)}
.aq-cat .aq-l{order:1;color:var(--t2);font-weight:600}
.aq-cat .aq-v{order:3;text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
.aq-crit,.aq-ex{margin-top:12px}
.aq-t{font-size:12px;font-weight:700;color:var(--t2);display:block;margin-bottom:6px}
.aq-crit ul{list-style:none;display:grid;gap:6px;font-size:12.5px;color:var(--t2)}
.aq-crit li{display:flex;gap:8px}
.aq-crit li::before{content:"✓";color:var(--green);font-weight:800}
.aq-ex ul{list-style:none;display:grid;gap:6px;font-size:12.5px}
.aq-ex li b{color:var(--red)}
.aq-ex li span{color:var(--t3)}

/* barre de suivi (sous le profil) */
.jdpx-track-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 8px;padding:14px 18px;border-radius:var(--r);background:rgba(255,255,255,.5);border:1px dashed var(--line2)}
.jdpx-track-bar span{font-size:13px;color:var(--t2);font-weight:600}
.jdpx-track-bar .jdpx-btn{padding:9px 16px;font-size:13px}
.jdpx-btn.done{background:rgba(15,165,115,.12)!important;color:var(--green)!important;border-color:rgba(15,165,115,.3)!important;cursor:default}

/* comptes suivis + concurrents */
.acc-grid{display:grid;grid-template-columns:1fr;gap:16px}
.acc-card{padding:20px}
.acc-head{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.avatar.acc-av{width:48px;height:48px;flex:none}
.acc-id{min-width:0}
.acc-id b{font-size:15px;display:flex;align-items:center;gap:6px}
.acc-id span{font-size:12px;color:var(--t3)}
.acc-x{margin-left:auto;flex:none;border:1px solid var(--line2);background:transparent;color:var(--t3);width:30px;height:30px;border-radius:9px;cursor:pointer;font-size:13px}
.acc-x:hover{border-color:var(--red);color:var(--red)}
.acc-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:10px;margin-bottom:16px;text-align:center}
.acc-kpis .kpi-c{background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:12px 8px}
.acc-kpis .kpi-c.score{background:rgba(230,138,28,.08);border-color:rgba(230,138,28,.22)}
.acc-kpis b{display:block;font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.2}
.acc-kpis span{font-size:11px;color:var(--t3)}
.acc-spark{margin-bottom:12px}
.acc-spark-l{font-size:11.5px;color:var(--t3);display:block;margin-bottom:4px}
.spark-inline{width:100%;height:auto;display:block}
.acc-table{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:20px}
.acc-table th{text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--t2);padding:8px;border-bottom:1.5px solid var(--line2)}
.acc-table td{padding:8px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;color:var(--t2)}
.acc-table tr:last-child td{border-bottom:0}
.comp-add{padding:18px 20px;margin-bottom:16px}
.comp-add b{font-size:14px;display:block;margin-bottom:12px}
.comp-add-row{display:flex;gap:10px;flex-wrap:wrap}
.comp-add-row select,.comp-add-row input{border:1px solid var(--line2);border-radius:11px;padding:11px 13px;font:600 13.5px Poppins,sans-serif;color:var(--t1);background:#fff}
.comp-add-row input{flex:1;min-width:180px}
.comp-add-row .jdpx-btn{flex:none}

/* astuce (chemin de sortie sous un problème) */
.jdpx-tip{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding:14px 16px;border-radius:14px;background:linear-gradient(100deg,rgba(251,165,50,.12),rgba(240,70,125,.06));border:1px solid rgba(251,165,50,.3)}
.jdpx-tip .tip-l{flex:none;display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800;color:#fff;background:var(--grad);padding:5px 11px;border-radius:999px;white-space:nowrap;box-shadow:0 4px 12px -4px rgba(240,70,125,.5)}
.jdpx-tip p{font-size:13px;color:var(--t1);line-height:1.55;margin:0}

/* barre engagement vs secteur */
.er-card{padding:22px}
.er-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.er-head b{font-size:15px}
.er-head span{font-size:13.5px;font-weight:800;font-variant-numeric:tabular-nums}
.er-head em{font-style:normal;color:var(--t3);font-weight:600;font-size:12.5px}
.er-track{position:relative;height:14px;border-radius:99px;background:var(--bg2);overflow:visible}
.er-fill{height:100%;border-radius:99px;transition:width 1s var(--ease)}
.er-fill.up{background:var(--green)}
.er-fill.dn{background:linear-gradient(90deg,#F6A04B,var(--red))}
.er-mark{position:absolute;top:-4px;width:2px;height:22px;background:var(--t1);opacity:.55;transform:translateX(-1px)}
.er-mark::after{content:"";position:absolute;top:-4px;left:-3px;width:8px;height:8px;border-radius:50%;background:var(--t1)}
.er-legend{display:flex;justify-content:space-between;font-size:11px;color:var(--t3);margin-top:7px}

/* chargement analyse followers (barre indéterminée) */
.folauth-loading{margin-top:14px;border-top:1px solid var(--line);padding-top:14px;display:grid;gap:9px}
.folauth-loading span{font-size:12.5px;color:var(--t3)}
.fl-bar{height:8px;border-radius:99px;background:var(--bg2);overflow:hidden;position:relative}
.fl-bar i{position:absolute;left:0;top:0;height:100%;width:40%;border-radius:99px;background:var(--grad);animation:jdpx-indet 1.4s var(--ease) infinite}
@keyframes jdpx-indet{0%{left:-40%}100%{left:100%}}

/* outils Pro */
.protools{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:16px}
.protool{padding:22px}
.protool h4{font-size:15px;margin-bottom:14px}
.protool-hl{font-size:13px;color:var(--t2);margin-bottom:12px}
.protool-hl b{color:var(--accent)}
.protool-list{list-style:none;display:grid;gap:8px;font-size:13px;color:var(--t2);margin-top:10px}
.protool-list li{display:flex;gap:8px}
.protool-list li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;margin-top:6px;box-shadow:0 0 0 3px rgba(230,138,28,.15)}
.protool .note{font-size:11.5px;color:var(--t3);margin-top:12px;line-height:1.5}
.sb-gauge{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.sb-num{font-size:34px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.sb-num small{font-size:16px;font-weight:700}
.sb-num.none{color:var(--green)}.sb-num.mid{color:var(--accent)}.sb-num.high{color:var(--red)}
.sb-bar{flex:1;height:9px;border-radius:99px;background:var(--bg2);overflow:hidden}
.sb-bar i{display:block;height:100%;border-radius:99px;transition:width 1s var(--ease)}
.sb-bar i.none{background:var(--green)}.sb-bar i.mid{background:var(--accent)}.sb-bar i.high{background:var(--red)}
.protool .deg{display:inline-flex;font-weight:700;font-size:13px;padding:6px 13px;border-radius:999px;margin-bottom:4px}
.protool .deg.none{background:rgba(15,165,115,.12);color:var(--green)}
.protool .deg.mid{background:rgba(230,138,28,.12);color:var(--accent)}
.protool .deg.high{background:rgba(224,51,94,.10);color:var(--red)}
.bars{display:grid;gap:7px}
.bars+.bars{margin-top:16px}
.bar-row{display:grid;grid-template-columns:88px 1fr 64px;align-items:center;gap:10px;font-size:12.5px}
.bar-row .bl{color:var(--t2)}
.bar-row .bl small{color:var(--t3)}
.bar-row .bar{height:8px;border-radius:99px;background:var(--bg2);overflow:hidden}
.bar-row .bar i{display:block;height:100%;border-radius:99px;background:var(--line2);transition:width .8s var(--ease)}
.bar-row .bar i.hot{background:var(--grad)}
.bar-row .bv{text-align:right;color:var(--t3);font-weight:700;font-variant-numeric:tabular-nums}
.viral-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.viral{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:linear-gradient(135deg,#2c3046,#5a3d6e);display:block}
.viral img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.viral::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.7))}
.viral .vmult{position:absolute;top:6px;left:6px;z-index:2;background:var(--grad);color:#fff;font:800 11px Poppins,sans-serif;padding:3px 8px;border-radius:999px}
.viral .vst{position:absolute;left:7px;bottom:6px;z-index:2;color:#fff;font:700 11px Poppins,sans-serif}
.protools-teaser{list-style:none;display:grid;gap:12px;text-align:left}
.protools-teaser li{display:flex;gap:11px;align-items:center}
.protools-teaser b{display:block;font-size:13.5px;color:var(--t1)}
.protools-teaser span{font-size:12px;color:var(--t3)}

/* recos */
.reco-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:16px}
.reco{padding:24px;position:relative;display:flex;flex-direction:column;gap:16px}
.reco.best{border-color:rgba(251,165,50,.45);box-shadow:0 0 0 1px rgba(230,138,28,.25),0 18px 50px rgba(230,138,28,.14)}
.reco .flag{position:absolute;top:-11px;left:20px;font-size:11px;font-weight:700;background:var(--grad);color:#fff;padding:4px 12px;border-radius:999px}
.reco h4{font-size:16px;font-weight:700;display:flex;align-items:center;gap:10px}
.reco .why{font-size:13px;color:var(--t2);flex:1}
.qty{display:flex;border:1px solid var(--line2);border-radius:12px;overflow:hidden}
.qty button{flex:1;background:transparent;border:0;color:var(--t2);font:600 13px Poppins,sans-serif;padding:11px;cursor:pointer}
.qty button.on{background:var(--surface2);color:var(--t1)}
.qty button .q{display:block;font-size:16px;font-weight:800;color:var(--t1)}
.reco .price{font-size:24px;font-weight:800}
.reco .price small{font-size:12px;color:var(--t3);font-weight:600}
.reco .price .pro-p{font-size:12px;color:var(--violet);font-weight:700;display:block}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;max-width:780px;margin:0 auto}
.plan{padding:30px;display:flex;flex-direction:column;gap:18px}
.plan.pro{border-color:rgba(251,165,50,.5);background:linear-gradient(180deg,rgba(251,165,50,.10),rgba(255,255,255,.55) 45%)}
.plan h3{font-size:17px}
.plan .pr{font-size:38px;font-weight:800}
.plan .pr small{font-size:13.5px;color:var(--t3);font-weight:600}
.plan ul{list-style:none;display:grid;gap:10px;font-size:13.5px;color:var(--t2)}
.plan li{display:flex;gap:10px;align-items:flex-start}
.plan li .ok{color:var(--green);font-weight:800}
.plan li .ko{color:var(--t3)}

/* commandes */
.orders{padding:6px 0}
.order{display:grid;grid-template-columns:44px 1.4fr 1fr 2fr 110px;gap:16px;align-items:center;padding:16px 22px;border-bottom:1px solid var(--line);font-size:13.5px}
.order:last-child{border-bottom:0}
.order .ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:17px}
.order .name b{display:block;font-weight:600}
.order .name span{font-size:12px;color:var(--t3)}
.prog{height:8px;border-radius:99px;background:var(--bg2);overflow:hidden;position:relative}
.prog i{display:block;height:100%;border-radius:99px;background:var(--grad);position:relative;overflow:hidden}
.prog i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:jdpx-shine 1.8s infinite}
@keyframes jdpx-shine{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.order .pct{font-size:12px;color:var(--t2);margin-top:5px;display:flex;justify-content:space-between}
.status{font-size:11.5px;font-weight:700;padding:5px 12px;border-radius:999px;text-align:center}
.status.run{background:rgba(45,127,240,.10);color:var(--blue)}
.status.done{background:rgba(15,165,115,.12);color:var(--green)}

/* verrou Pro */
.pro-lock{position:relative;overflow:hidden}
.pro-lock .lock-blur{filter:blur(7px);user-select:none;pointer-events:none;opacity:.85}
.pro-lock .lock-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.55) 80%);z-index:3;text-align:center;padding:20px}
.pro-lock .tease{font-size:13.5px;color:var(--t1);font-weight:600;max-width:340px;background:rgba(255,255,255,.85);border:1px solid var(--line);border-radius:12px;padding:10px 16px;box-shadow:0 8px 24px -10px rgba(16,20,29,.25)}
.pro-lock .tease b{color:var(--accent)}
.lock-pill{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;background:#10141D;color:#fff;padding:5px 13px;border-radius:999px;letter-spacing:.4px}

/* split geo/posts */
.split2{display:grid;grid-template-columns:1fr 1.4fr;gap:16px}

/* footer */
.jdpx-footer{border-top:1px solid var(--line);margin-top:50px;padding:30px 0;color:var(--t3);font-size:12.5px;text-align:center}

/* ---------- assistant (bulle chat) ---------- */
.jdpx-chat{position:fixed;right:22px;bottom:22px;z-index:9000;font-family:Poppins,system-ui,sans-serif}
.jdpx-chat-toggle{position:relative;display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;border-radius:999px;padding:15px 22px 15px 18px;background:var(--grad);color:#fff;font:700 15px Poppins,sans-serif;box-shadow:0 12px 34px rgba(240,70,125,.45);transition:transform .16s var(--ease),box-shadow .16s var(--ease);animation:jdpx-chat-breathe 3s ease-in-out infinite}
@keyframes jdpx-chat-breathe{0%,100%{box-shadow:0 12px 34px rgba(240,70,125,.4)}50%{box-shadow:0 14px 42px rgba(240,70,125,.62)}}
.jdpx-chat-toggle:hover{transform:translateY(-2px);box-shadow:0 16px 46px rgba(240,70,125,.55)}
.jdpx-chat-toggle:active{transform:scale(.97)}
.jdpx-chat-toggle .ic{font-size:19px}
.jdpx-chat-ping{position:absolute;top:-3px;right:-3px;width:14px;height:14px;border-radius:50%;background:var(--green);border:2px solid #fff}
.jdpx-chat-ping::after{content:"";position:absolute;inset:-2px;border-radius:50%;background:var(--green);opacity:.6;animation:jdpx-ping 1.8s cubic-bezier(0,0,.2,1) infinite}
@keyframes jdpx-ping{0%{transform:scale(1);opacity:.6}80%,100%{transform:scale(2.4);opacity:0}}
.jdpx-chat.open .jdpx-chat-toggle{display:none}
/* Assistant réservé Pro : bulle floutée + pastille verrouillée. */
.jdpx-chat.locked .jdpx-chat-toggle .ic,
.jdpx-chat.locked .jdpx-chat-toggle .lbl{filter:blur(3px);opacity:.9}
.jdpx-chat.locked .jdpx-chat-ping{display:none}
.jdpx-chat.locked .jdpx-chat-toggle::after{content:"🔒 PRO";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:800 13px Poppins,sans-serif;letter-spacing:1px;color:#fff}
.jdpx-chat-teaser .lock-cta{margin-top:10px;display:inline-flex;width:100%;justify-content:center}
.jdpx-chat-teaser{position:absolute;right:0;bottom:64px;width:260px;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:16px;padding:14px 16px;font-size:12.5px;color:var(--t2);line-height:1.5;box-shadow:0 16px 44px -16px rgba(16,20,29,.4);animation:jdpx-chat-in .25s var(--ease)}
.jdpx-chat-teaser b{display:block;color:var(--t1);font-size:13.5px;margin-bottom:4px}
.jdpx-chat-teaser::after{content:"";position:absolute;right:26px;bottom:-7px;width:14px;height:14px;background:rgba(255,255,255,.92);border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
.jdpx-chat-teaser .teaser-x{position:absolute;top:8px;right:9px;border:0;background:transparent;color:var(--t3);font-size:12px;cursor:pointer;line-height:1}
.jdpx-chat-ava{width:30px;height:30px;border-radius:9px;background:var(--grad);display:grid;place-items:center;font-size:15px;flex:none}
.jdpx-chat-panel[hidden]{display:none}
.jdpx-chat-panel{position:absolute;right:0;bottom:0;width:min(380px,calc(100vw - 32px));height:min(560px,calc(100vh - 90px));display:flex;flex-direction:column;
	background:rgba(255,255,255,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
	border:1px solid rgba(255,255,255,.7);outline:1px solid rgba(16,20,29,.06);border-radius:20px;overflow:hidden;
	box-shadow:0 2px 6px rgba(16,20,29,.06),0 30px 70px -20px rgba(16,20,29,.45);
	transform-origin:bottom right;animation:jdpx-chat-in .22s var(--ease)}
@keyframes jdpx-chat-in{from{opacity:0;transform:scale(.92) translateY(8px)}to{opacity:1;transform:none}}
.jdpx-chat-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.5)}
.jdpx-chat-head .who{display:flex;flex-direction:column;line-height:1.25}
.jdpx-chat-head .who b{font-size:14px;display:inline-flex;align-items:center;gap:6px}
.jdpx-chat-head .who .sub{font-size:11px;color:var(--t3)}
.jdpx-chat-head .dot{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(15,165,115,.5);animation:jdpx-pulse 2s infinite}
.jdpx-chat-close{margin-left:auto;border:0;background:transparent;color:var(--t3);font-size:15px;cursor:pointer;width:28px;height:28px;border-radius:8px}
.jdpx-chat-close:hover{background:var(--surface2);color:var(--t1)}
.jdpx-chat-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.jdpx-msg{max-width:84%;padding:10px 13px;border-radius:14px;font-size:13.5px;line-height:1.5;white-space:pre-wrap;word-wrap:break-word}
.jdpx-msg.bot{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:5px;color:var(--t1)}
.jdpx-msg.me{align-self:flex-end;background:var(--grad);color:#fff;border-bottom-right-radius:5px}
.jdpx-msg.err{align-self:flex-start;background:rgba(224,51,94,.08);border:1px solid rgba(224,51,94,.25);color:var(--red)}
.jdpx-chat-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.jdpx-chat-chips button{font:600 12px Poppins,sans-serif;border:1px solid var(--line2);background:rgba(255,255,255,.7);color:var(--t2);border-radius:999px;padding:7px 12px;cursor:pointer;transition:border-color .15s,color .15s}
.jdpx-chat-chips button:hover{border-color:var(--accent);color:var(--accent)}
.jdpx-typing{align-self:flex-start;display:inline-flex;gap:4px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:14px;border-bottom-left-radius:5px}
.jdpx-typing i{width:6px;height:6px;border-radius:50%;background:var(--t3);animation:jdpx-bounce 1.2s infinite}
.jdpx-typing i:nth-child(2){animation-delay:.15s}.jdpx-typing i:nth-child(3){animation-delay:.3s}
@keyframes jdpx-bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.jdpx-chat-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:rgba(255,255,255,.5)}
.jdpx-chat-form input{flex:1;border:1px solid var(--line2);border-radius:12px;padding:11px 13px;font:400 13.5px Poppins,sans-serif;color:var(--t1);background:#fff;outline:0;min-width:0}
.jdpx-chat-form input:focus{border-color:var(--accent)}
.jdpx-chat-form button{flex:none;width:44px;padding:0;font-size:17px;border-radius:12px}
.jdpx-chat-quota{font-size:11px;color:var(--t3);text-align:center;padding:0 12px 10px}
.jdpx-chat-quota a{color:var(--accent);font-weight:600}
@media(max-width:600px){
	.jdpx-chat{right:14px;bottom:14px}
	.jdpx-chat-toggle .lbl{display:none}
	.jdpx-chat-toggle{padding:14px}
	.jdpx-chat-panel{height:min(70vh,540px)}
}

/* skeleton loading */
.jdpx-loading{display:grid;gap:16px;padding:34px 0}
.skel{border-radius:var(--r);background:linear-gradient(90deg,var(--bg2) 25%,#E4E8F0 50%,var(--bg2) 75%);background-size:200% 100%;animation:jdpx-skel 1.2s infinite linear}
@keyframes jdpx-skel{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* Attente d'analyse : on montre l'étape en cours, jamais un écran muet. */
.an-prog{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:56px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.an-spin{width:30px;height:30px;border-radius:50%;border:3px solid var(--line2);border-top-color:var(--accent);animation:jdpx-spin .8s linear infinite}
@keyframes jdpx-spin{to{transform:rotate(360deg)}}
.an-prog .an-who{font:700 16px/1.3 Poppins,sans-serif;color:var(--t1)}
.an-prog .an-step{font:400 14px/1.5 Poppins,sans-serif;color:var(--t2)}
.an-prog .an-long{font:400 13px/1.5 Poppins,sans-serif;color:var(--t3);max-width:38ch}
/* Échec d'analyse : dire ce qui s'est passé et proposer la seule action utile. */
.an-err{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:48px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.an-err b{font:700 17px/1.3 Poppins,sans-serif;color:var(--t1)}
.an-err p{margin:0;font:400 14px/1.6 Poppins,sans-serif;color:var(--t2);max-width:46ch}
@media (prefers-reduced-motion:reduce){.an-spin{animation-duration:2.4s}}

/* entrance */
.fade{opacity:0;transform:translateY(14px);animation:jdpx-fade .6s var(--ease) forwards}
@keyframes jdpx-fade{to{opacity:1;transform:none}}
.d1{animation-delay:.08s}.d2{animation-delay:.16s}.d3{animation-delay:.24s}.d4{animation-delay:.32s}
@media (prefers-reduced-motion:reduce){
	.jdpx-body *,.jdpx-body *::before,.jdpx-body *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
	.fade{opacity:1;transform:none}
}

@media(max-width:880px){
	.split2,.boost{grid-template-columns:1fr}
	.profile .quick{margin:0;width:100%;justify-content:space-between}
	.order{grid-template-columns:44px 1fr 90px;gap:10px}
	.order .name span{display:none}.order .qtycol{display:none}.order .progcol{grid-column:1/-1}
	.jdpx-nav{display:none}
	.pgrid{grid-template-columns:repeat(3,1fr)}
}

/* boutons compacts + actions de carte */
.jdpx-btn.sm{padding:8px 14px;font-size:12.5px;border-radius:10px}
.acc-actions{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 12px}

/* alerte (chute d'abonnes / engagement) */
.acc-alert{display:flex;flex-direction:column;gap:3px;padding:11px 14px;border-radius:12px;margin-bottom:12px;border:1px solid rgba(224,51,94,.22);background:linear-gradient(90deg,rgba(224,51,94,.08),rgba(224,51,94,.03))}
.acc-alert.crit{border-color:rgba(224,51,94,.4);background:linear-gradient(90deg,rgba(224,51,94,.14),rgba(224,51,94,.05))}
.acc-alert b{font-size:13px;color:var(--red)}
.acc-alert span{font-size:12.5px;color:var(--t2);line-height:1.5}

/* apercu du feed (vignettes) */
.acc-feed{margin-bottom:12px}
.acc-feed-l{font-size:11.5px;color:var(--t3);display:block;margin-bottom:6px}
/* Décryptage stratégie IA d'un concurrent */
.acc-strat{margin:14px 0;padding:14px 16px;background:linear-gradient(180deg,rgba(124,92,224,.06),rgba(240,70,125,.03));border:1px solid var(--line2);border-radius:14px}
.acc-strat:empty{display:none}
.strat-head{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:var(--t1);margin-bottom:9px}
.strat-head .jdpx-ic{width:17px;height:17px;color:var(--violet)}
.strat-load{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--t3);padding:2px 0}
.strat-syn{font-size:13px;color:var(--t2);line-height:1.55;margin:0 0 12px}
.strat-axes{display:flex;flex-direction:column;gap:9px}
.strat-axe{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:10px 12px}
.strat-axe>b{display:block;font-size:12.5px;color:var(--t1);margin-bottom:4px}
.sa-c{font-size:12.5px;color:var(--t2);line-height:1.5;margin:0}
.sa-x{display:flex;align-items:flex-start;gap:7px;font-size:12.5px;color:var(--t1);line-height:1.5;margin:8px 0 0;padding-top:8px;border-top:1px solid var(--line)}
.sa-x .jdpx-ic{width:15px;height:15px;color:var(--accent);flex:none;margin-top:2px}
.feed-thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.feed-thumbs.lg{grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px}
.feed-thumbs .ft{display:block;aspect-ratio:1;border-radius:9px;overflow:hidden;background:linear-gradient(135deg,#2c3046,#5a3d6e)}
.feed-thumbs .ft img{width:100%;height:100%;object-fit:cover;display:block}
.feed-thumbs .ft.empty{background:var(--surface2);border:1px solid var(--line)}

/* comparateur */
.cmp-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.cmp-own-lbl{font-size:13px;color:var(--t2);font-weight:600;display:inline-flex;align-items:center}
.cmp-own-lbl select{border:1px solid var(--line2);border-radius:10px;padding:8px 11px;font:600 13px Poppins,sans-serif;color:var(--t1);background:#fff}
.cmp-target{font-size:13px;color:var(--t3)}.cmp-target b{color:var(--t1)}
.cmp-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;margin-bottom:16px}
.cmp-party{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.cmp-party .avatar{width:60px;height:60px}
.cmp-party b{font-size:14.5px}
.cmp-party span{font-size:11.5px;color:var(--t3);text-transform:uppercase;letter-spacing:.4px}
.cmp-party.you b{color:var(--green)}
.cmp-vs{font-weight:800;font-size:15px;color:var(--t3);background:var(--surface2);border:1px solid var(--line);border-radius:999px;padding:8px 14px}
.cmp-card{padding:20px}
.cmp-table{width:100%;border-collapse:collapse;font-size:13.5px}
.cmp-table th{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--t2);padding:10px;border-bottom:1.5px solid var(--line2);text-align:center}
.cmp-table th:first-child{text-align:left}
.cmp-table td{padding:11px 10px;border-bottom:1px solid var(--line);text-align:center;font-weight:700;font-variant-numeric:tabular-nums;color:var(--t2)}
.cmp-table td.cmp-lbl{text-align:left;font-weight:600;color:var(--t1)}
.cmp-table td.win{color:var(--green)}
.cmp-table tr:last-child td{border-bottom:0}
.cmp-table .crown{font-size:10px}
.cmp-curve{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.spark-dual{width:100%;height:auto;display:block;margin-top:4px}
.cmp-legend{display:flex;gap:16px;margin-top:8px;font-size:11.5px;color:var(--t2)}
.cmp-legend .lg{display:inline-flex;align-items:center;gap:6px}
.cmp-legend .lg::before{content:"";width:14px;height:3px;border-radius:2px;background:var(--green)}
.cmp-legend .lg.comp::before{background:#9aa3b2}
.cmp-block{margin-top:24px}
.cmp-block h3{font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--t1);margin-bottom:14px}
.cmp-list{list-style:none;display:flex;flex-direction:column;gap:10px;padding:0;margin:0}
.cmp-list li{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--t1);line-height:1.55;padding:14px 16px;border-radius:14px;background:var(--surface);border:1px solid var(--line2);transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.cmp-list li::before{content:"↗";flex:none;width:26px;height:26px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#fff;background:var(--grad);box-shadow:0 4px 12px -4px rgba(240,70,125,.5)}
@media(hover:hover) and (pointer:fine){.cmp-list li:hover{transform:translateY(-1px);box-shadow:0 10px 22px -12px rgba(16,20,29,.32)}}
.cmp-reco{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.cmp-reco-it{padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.55);border:1px solid var(--line)}
.cmp-reco-it b{font-size:13.5px;display:block;margin-bottom:5px;color:var(--t1)}
.cmp-reco-it p{font-size:12.5px;color:var(--t2);line-height:1.55;margin:0 0 10px}
.cmp-reco-it.sell{border-color:rgba(240,70,125,.3);background:linear-gradient(135deg,rgba(251,165,50,.08),rgba(240,70,125,.06))}
.cmp-reco-it .jdpx-btn{margin-top:2px}
@media(max-width:560px){.feed-thumbs{grid-template-columns:repeat(6,1fr)}}

/* détecteur de viraux : carte cliquable + points communs */
.viral{cursor:pointer;border:0;padding:0;width:100%;font-family:inherit;text-align:left}
.viral:active{transform:scale(.97);transition:transform .14s var(--ease)}
.viral .vcollab{position:absolute;top:6px;right:6px;z-index:2;font-size:13px;background:rgba(0,0,0,.45);border-radius:999px;padding:2px 5px}
.viral-common{font-size:13px;color:var(--t2);background:linear-gradient(90deg,rgba(124,92,224,.08),rgba(240,70,125,.05));border:1px solid rgba(124,92,224,.16);border-radius:12px;padding:10px 13px;margin:0 0 12px;line-height:1.5}
.viral-common b{color:var(--t1)}
.viral-hint{margin-top:10px;text-align:center}

/* page détail virale (overlay) */
.jdpx-vmodal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
.jdpx-vmodal[hidden]{display:none}
.vmodal-scrim{position:absolute;inset:0;background:rgba(16,20,29,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:jdpx-fade .2s var(--ease)}
.vmodal-card{position:relative;z-index:1;width:min(620px,100%);max-height:90vh;overflow-y:auto;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:0 30px 80px -20px rgba(16,20,29,.5);animation:jdpx-pop .26s var(--ease)}
@keyframes jdpx-pop{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}
.vmodal-x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:10px;border:1px solid var(--line2);background:var(--surface);color:var(--t2);font-size:14px;cursor:pointer}
.vmodal-x:hover{background:var(--surface2);color:var(--t1)}
.vd-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;padding-right:40px}
.vd-mult{background:var(--grad);color:#fff;font:800 13px Poppins,sans-serif;padding:5px 12px;border-radius:999px}
.vd-when{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--t2);font-weight:600;background:var(--surface2);border:1px solid var(--line);border-radius:999px;padding:5px 12px}
.vd-when .jdpx-ic{width:14px;height:14px;color:var(--t3)}
.vd-top{display:flex;gap:16px;margin-bottom:8px}
.vd-media{flex:none;width:148px;aspect-ratio:1;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,#2c3046,#5a3d6e)}
.vd-media img{width:100%;height:100%;object-fit:cover;display:block}
.vd-noimg{display:grid;place-items:center;height:100%;font-size:34px}
.vd-metrics{flex:1;display:grid;grid-template-columns:repeat(2,1fr);gap:8px;align-content:start}
.vd-metrics>div{background:var(--surface2);border:1px solid var(--line);border-radius:11px;padding:9px 11px}
.vd-metrics b{display:block;font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--t1)}
.vd-metrics span{font-size:11px;color:var(--t3)}
.vd-h{font-size:13.5px;color:var(--t1);margin:18px 0 9px}
.vd-panel{background:var(--surface);border:1px solid var(--line2);border-radius:14px;padding:2px 16px 6px;box-shadow:0 1px 3px rgba(16,20,29,.04)}
.vd-panel .vd-h{margin:14px 0 2px}
.vd-factors{list-style:none;display:flex;flex-direction:column;padding:0;margin:0}
.vd-fct{display:flex;align-items:flex-start;gap:13px;padding:13px 2px;border-bottom:1px solid var(--line)}
.vd-fct:last-child{border-bottom:0}
.vf-ic{flex:none;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.vf-ic .jdpx-ic{width:18px;height:18px}
.vd-fct.good .vf-ic{background:rgba(15,165,115,.12);color:var(--green)}
.vd-fct.neutral .vf-ic{background:rgba(230,138,28,.12);color:var(--accent)}
.vf-t{font-size:13.5px;color:var(--t2);line-height:1.5;padding-top:7px}
.vf-t b{color:var(--t1);font-weight:600}
.vd-caption{font-size:13px;color:var(--t2);line-height:1.6;white-space:pre-line;background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:0;display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--t1);background:var(--surface2);border:1px solid var(--line2);border-radius:999px;padding:5px 11px}
.chip.hash{color:var(--blue);font-weight:700;background:rgba(45,127,240,.1);border-color:rgba(45,127,240,.28)}
.chip.collab img{width:18px;height:18px;border-radius:50%;object-fit:cover}
.chip .vbadge{color:var(--blue)}
.vd-link{margin-top:18px;width:100%}
@media(max-width:560px){.vd-top{flex-direction:column}.vd-media{width:100%;aspect-ratio:16/10}.vd-metrics{grid-template-columns:repeat(3,1fr)}.vmodal-card{padding:20px}}

/* harmonie du feed (Phase 5) */
.feed-card #jdpx-feed-btn{margin-top:6px}
.fh{margin-top:14px}
.fh-pal{display:flex;gap:0;border-radius:12px;overflow:hidden;height:46px;border:1px solid var(--line)}
.fh-sw{flex:1}
.fh-top{display:flex;align-items:center;gap:16px;margin:14px 0 8px}
.fh-num{font:800 26px Poppins,sans-serif;font-variant-numeric:tabular-nums;color:var(--t1)}
.fh-num small{font-size:13px;font-weight:600;color:var(--t3)}
.fh-num.good{color:var(--green)}.fh-num.mid{color:var(--accent)}.fh-num.low{color:var(--red)}
.fh-meta b{display:block;font-size:14px}
.fh-meta span{font-size:12.5px;color:var(--t2)}
.fh-bar{height:8px;border-radius:99px;background:var(--surface2);overflow:hidden;margin-bottom:12px}
.fh-bar i{display:block;height:100%;border-radius:99px;transition:width 1s var(--ease)}
.fh-bar i.good{background:var(--green)}.fh-bar i.mid{background:var(--accent2)}.fh-bar i.low{background:var(--red)}
.fh-advice{font-size:13px;color:var(--t2);line-height:1.55;margin:0}

/* red flags (hygiène profil) */
.rf-sec{margin-bottom:8px}
.rf-card{padding:18px 20px;border-color:rgba(224,51,94,.22)}
.rf-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.rf-head b{font-size:15px;color:var(--t1)}
.rf-head span{font-size:12.5px;color:var(--red);font-weight:600}
.rf-item{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line)}
.rf-item:first-of-type{border-top:0}
.rf-ico{flex:none;font-size:18px;line-height:1.3}
.rf-txt b{font-size:13.5px;color:var(--t1);display:block;margin-bottom:3px}
.rf-txt p{font-size:13px;color:var(--t2);line-height:1.55;margin:0}
.rf-item.crit .rf-txt b{color:var(--red)}

/* encadré info (format pédagogique) */
.note-info{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;background:linear-gradient(100deg,rgba(45,127,240,.07),rgba(124,92,224,.05));border:1px solid rgba(45,127,240,.18)}
.note-info .ni-ico{flex:none;width:30px;height:30px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:15px;background:rgba(45,127,240,.12)}
.note-info p{font-size:12.5px;color:var(--t2);line-height:1.55;margin:0}
.note-info b{color:var(--t1)}

/* pastille de comptage (orpheline depuis track-meta v0.1.33, conservée) */
.count-pill{display:inline-flex;align-items:center;font:700 12.5px Poppins,sans-serif;font-variant-numeric:tabular-nums;color:var(--accent);background:rgba(230,138,28,.1);border:1px solid rgba(251,165,50,.28);border-radius:999px;padding:2px 10px;margin-right:2px}

/* bloc capacité (jauge segments) + chip auto-update : Mes comptes / Concurrents */
.track-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:14px 0 22px}
.track-cap{display:inline-flex;align-items:center;gap:12px;padding:9px 14px;background:var(--surface);border:1px solid var(--line2);border-radius:14px;box-shadow:0 1px 3px rgba(16,20,29,.05)}
.tc-slots{display:flex;gap:4px}
.tc-seg{width:16px;height:6px;border-radius:999px;background:var(--line2);transition:background .2s var(--ease)}
.tc-seg.on{background:var(--grad)}
.tc-txt{font-size:13px;color:var(--t2);font-weight:600;white-space:nowrap}
.tc-num{font-size:15px;color:var(--t1);font-weight:800;font-variant-numeric:tabular-nums;margin-right:4px}
.tc-num span{color:var(--t3);font-weight:600;font-size:12.5px}
.track-auto{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--t2)}
.track-auto .jdpx-ic{width:16px;height:16px;color:var(--green)}
.track-auto b{color:var(--t1);font-weight:600}
.comp-err:empty{display:none}
.comp-err{margin-top:10px}

/* fraîcheur + bouton actualiser (cartes suivies) */
.acc-fresh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;font-size:12px;color:var(--t3)}
.acc-refresh{flex:none;border:1px solid var(--line2);background:var(--surface);color:var(--t1);font:600 12px Poppins,sans-serif;border-radius:9px;padding:6px 12px;cursor:pointer;transition:background .15s,transform .14s var(--ease)}
.acc-refresh:hover:not([disabled]){background:var(--surface2)}
.acc-refresh:active:not([disabled]){transform:scale(.96)}
.acc-refresh[disabled]{opacity:.5;cursor:not-allowed}

/* bandeau explicatif boost (sous le profil) */
.boost-explain{display:flex;gap:16px;align-items:center;padding:16px 20px;margin:16px 0;background:linear-gradient(100deg,rgba(251,165,50,.1),rgba(240,70,125,.07));border:1px solid rgba(240,70,125,.22)}
.boost-explain .be-ico{flex:none;font-size:26px}
@keyframes jdpx-point{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.boost-explain .be-txt b{font-size:15px;color:var(--t1);display:block;margin-bottom:3px}
.boost-explain .be-txt p{font-size:13px;color:var(--t2);line-height:1.5;margin:0}

/* harmonie du feed : carte pleine largeur mise en avant */
.feed-card{padding:24px;margin-top:16px;border:1px solid rgba(124,92,224,.22);background:linear-gradient(135deg,var(--surface),rgba(124,92,224,.05))}
.feed-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.feed-head h3{font-size:18px;color:var(--t1)}
.feed-head span{font-size:12.5px;color:var(--t3)}
.feed-lead{font-size:13.5px;color:var(--t2);line-height:1.55;margin:0 0 16px;max-width:60ch}

/* modal viral : hero redesign */
.vd-hero{display:flex;gap:18px;margin-bottom:6px}
.vd-hero .vd-media{flex:none;width:128px;aspect-ratio:1;border-radius:16px;overflow:hidden;position:relative;background:linear-gradient(135deg,#2c3046,#5a3d6e)}
.vd-hero .vd-media img{width:100%;height:100%;object-fit:cover;display:block}
.vd-fmt{position:absolute;left:8px;bottom:8px;font:700 10.5px Poppins,sans-serif;color:#fff;background:rgba(0,0,0,.55);padding:3px 8px;border-radius:999px}
.vd-hero-r{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.vd-mult{display:inline-flex;align-items:baseline;gap:7px;align-self:flex-start;background:var(--grad);color:#fff;font:800 20px Poppins,sans-serif;padding:7px 14px;border-radius:12px}
.vd-mult small{font-size:11px;font-weight:600;opacity:.9}
.vd-when{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--t2);font-weight:600;background:var(--surface2);border:1px solid var(--line);border-radius:999px;padding:5px 12px}
.vd-when .jdpx-ic{width:14px;height:14px;color:var(--t3)}
.vd-stats{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.vd-stat{flex:1;min-width:64px;background:var(--surface2);border:1px solid var(--line);border-radius:11px;padding:8px 10px;text-align:center}
.vd-stat b{display:block;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--t1)}
.vd-stat span{font-size:10.5px;color:var(--t3)}
@media(max-width:560px){.vd-hero{flex-direction:column}.vd-hero .vd-media{width:100%;aspect-ratio:16/10}}

/* CTA stories + module vues de story */
.story-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 22px;margin-top:20px;background:linear-gradient(100deg,rgba(124,92,224,.1),rgba(240,70,125,.07));border:1px solid rgba(124,92,224,.22)}
.story-cta .sc-l{flex:1;min-width:200px}
.story-cta .sc-l b{font-size:15px;color:var(--t1);display:block;margin-bottom:3px}
.story-cta .sc-l p{font-size:13px;color:var(--t2);line-height:1.5;margin:0}
.st-h{font-size:18px;color:var(--t1);margin:0 0 12px;padding-right:38px}
.st-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin:14px 0}
.st-card{position:relative;aspect-ratio:9/16;border-radius:12px;overflow:hidden;border:2px solid var(--line2);background:linear-gradient(135deg,#2c3046,#5a3d6e);cursor:pointer;padding:0;transition:border-color .15s,transform .14s var(--ease)}
.st-card:active{transform:scale(.97)}
.st-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.st-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.65))}
.st-card.on{border-color:var(--accent2)}
.st-check{position:absolute;top:6px;right:6px;z-index:2;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.25);border:1.5px solid #fff;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800}
.st-card.on .st-check{background:var(--grad);border-color:transparent}
.st-exp{position:absolute;top:8px;left:8px;z-index:2;font:700 10px Poppins,sans-serif;color:#fff;background:rgba(0,0,0,.5);padding:2px 7px;border-radius:999px}
.st-alloc{position:absolute;left:6px;bottom:6px;z-index:2;font:800 11px Poppins,sans-serif;color:#fff;background:var(--grad);padding:3px 8px;border-radius:999px}
.st-controls{display:flex;gap:12px;flex-wrap:wrap;margin:6px 0 14px}
.st-field{font-size:12.5px;color:var(--t2);font-weight:600;display:inline-flex;flex-direction:column;gap:5px}
.st-field select{border:1px solid var(--line2);border-radius:10px;padding:9px 12px;font:600 13.5px Poppins,sans-serif;color:var(--t1);background:#fff}
.st-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 16px;border-radius:13px;background:var(--surface2);border:1px solid var(--line);margin-bottom:14px;font-size:13.5px;color:var(--t2)}
.st-summary b{color:var(--t1);font-variant-numeric:tabular-nums}
.st-price{font-size:16px}.st-price s{color:var(--t3);font-size:13px;font-weight:600}.st-price b{color:var(--accent)}
.st-buy{width:100%}

/* labels de zone dans le menu latéral */
.jdpx-side-zone{font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--t3);padding:0 14px;margin:14px 0 4px}
.jdpx-side-zone:first-child{margin-top:2px}

/* Booster : achat direct */
.bo-nets{display:flex;gap:8px;margin:4px 0 16px;flex-wrap:wrap}
.bo-net{border:1px solid var(--line2);background:var(--surface);color:var(--t2);font:600 13.5px Poppins,sans-serif;border-radius:999px;padding:9px 18px;cursor:pointer;transition:all .15s var(--ease)}
.bo-net:hover{color:var(--t1)}
.bo-net.on{background:var(--grad);color:#fff;border-color:transparent}
.bo-objs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.bo-obj{border:1px solid var(--line2);background:var(--surface);color:var(--t1);font:600 13.5px Poppins,sans-serif;border-radius:12px;padding:10px 16px;cursor:pointer;transition:all .15s var(--ease)}
.bo-obj:hover{background:var(--surface2)}
.bo-obj.on{border-color:var(--accent2);background:rgba(251,165,50,.1);color:var(--accent)}
.bo-cfg{padding:20px}
.bo-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.bo-field{flex:1;min-width:200px;font-size:12.5px;color:var(--t2);font-weight:600;display:flex;flex-direction:column;gap:6px}
.bo-field input,.bo-field select{border:1px solid var(--line2);border-radius:11px;padding:11px 13px;font:600 14px Poppins,sans-serif;color:var(--t1);background:#fff}
.bo-field input:focus,.bo-field select:focus{outline:2px solid rgba(251,165,50,.4);border-color:var(--accent2)}
.bo-cfg .st-buy{margin-top:4px}

/* aperçu outils dans le rapport (foyer = onglet Outils) */
.ip-card{padding:20px}
.ip-lead{font-size:13px;color:var(--t2);line-height:1.55;margin:0 0 14px}
.ip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.ip-cell{display:flex;align-items:center;gap:10px;padding:12px 13px;border-radius:13px;background:var(--surface2);border:1px solid var(--line)}
.ip-ic{font-size:18px;flex:none}
.ip-tx b{display:block;font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--t1);line-height:1.1}
.ip-tx span{font-size:11px;color:var(--t3)}
.ip-card .jdpx-btn{width:100%}
@media(max-width:560px){.ip-grid{grid-template-columns:repeat(2,1fr)}}

/* foyer Outils : onglets + page détaillée par outil */
.ot-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 16px}
.ot-tab{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line2);background:var(--surface);color:var(--t2);font:600 13px Poppins,sans-serif;border-radius:999px;padding:9px 15px;cursor:pointer;transition:all .15s var(--ease)}
.ot-tab:hover{color:var(--t1)}
.ot-tab.on{background:var(--grad);color:#fff;border-color:transparent}
.ot-tab .ot-ic{font-size:14px}
.ot-page{padding:22px}
.ot-page h3{font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--t1);margin:0 0 16px;display:flex;align-items:center;gap:9px}
.ot-page h3 .jdpx-ic{width:19px;height:19px;color:var(--accent)}
.ot-method{margin-top:18px;padding:13px 15px;border-radius:13px;background:var(--surface2);border:1px solid var(--line)}
.ot-method b{font-size:12.5px;color:var(--t1);display:block;margin-bottom:4px}
.ot-method p{font-size:12.5px;color:var(--t2);line-height:1.6;margin:0}
.ot-tips{margin-top:16px;padding:16px;border-radius:14px;background:linear-gradient(100deg,rgba(15,165,115,.09),rgba(45,127,240,.04));border:1px solid rgba(15,165,115,.22)}
.ot-tips b{font-size:13px;font-weight:800;color:var(--green);display:block;margin-bottom:10px}
.ot-tips ul{list-style:none;display:flex;flex-direction:column;gap:7px;padding:0;margin:0}
.ot-tips li{position:relative;font-size:13px;color:var(--t2);line-height:1.55;padding-left:22px}
.ot-tips li::before{content:"✓";position:absolute;left:0;top:0;color:var(--green);font-weight:800}

/* autocomplétion de recherche de compte */
.jdpx-ac{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:40;background:var(--surface);border:1px solid var(--line2);border-radius:14px;box-shadow:0 16px 40px -12px rgba(16,20,29,.34);overflow:hidden;max-height:340px;overflow-y:auto;transform-origin:top center;opacity:0;transform:translateY(-6px) scale(.985);transition:opacity .16s var(--ease),transform .16s var(--ease)}
.jdpx-ac.in{opacity:1;transform:none}
.ac-state{display:flex;align-items:center;gap:9px;padding:14px 16px;font-size:13px;color:var(--t2)}
.ac-hint{color:var(--t3);font-size:12.5px}
.ac-spin{width:15px;height:15px;border-radius:50%;border:2px solid var(--line2);border-top-color:var(--accent);flex:none;animation:jdpx-spin .7s linear infinite}
@keyframes jdpx-spin{to{transform:rotate(360deg)}}
.ac-item{display:flex;align-items:center;gap:11px;width:100%;border:0;background:transparent;padding:10px 14px;cursor:pointer;text-align:left;font-family:inherit;border-bottom:1px solid var(--line)}
.ac-item:last-child{border-bottom:0}
.ac-item:hover,.ac-item.on{background:var(--surface2)}
.ac-item img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none}
.ac-item .ac-noav{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--surface2);flex:none;font-size:18px}
.ac-id{min-width:0;display:flex;flex-direction:column}
.ac-id b{font-size:14px;color:var(--t1);display:flex;align-items:center;gap:5px}
.ac-id span{font-size:12.5px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bo-search{max-width:none;margin-bottom:6px}
.bo-search input{flex:1;background:transparent;border:0;outline:0;color:var(--t1);font:600 16px Poppins,sans-serif;padding:8px 12px;min-width:0}
.bo-hint{margin-top:4px}

/* resultats achat dans la page Booster */
#jdpx-booster-results{margin-top:20px}

/* repli avatar (image qui ne charge pas) */
.jdpx-av-fb{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:55%;line-height:1}

/* recherche : centrée, plus large, propre, couleur réseau selon l'onglet */
.jdpx-main .jdpx-analyzer{max-width:720px;margin:0 auto 8px}
.jdpx-main .jdpx-analyzer .nets{justify-content:center}
.jdpx-main .jdpx-analyzer .searchbox{box-shadow:0 2px 8px rgba(16,20,29,.06),0 18px 44px -16px rgba(16,20,29,.2)}
/* booster : nets + recherche centrés et larges, look carte comme l'analyser */
.bo-nets{justify-content:center}
.bo-search{max-width:720px;margin:0 auto 6px;display:flex;gap:10px;align-items:center;background:var(--surface);border:1px solid var(--line2);border-radius:16px;padding:10px;box-shadow:0 2px 8px rgba(16,20,29,.06),0 18px 44px -16px rgba(16,20,29,.2)}
#jdpx-booster .bo-hint{text-align:center;max-width:640px;margin-left:auto;margin-right:auto}
/* bouton de recherche aux couleurs du réseau choisi */
.jdpx-analyzer[data-net="instagram"] .jdpx-btn.grad,.bo-search[data-net="instagram"] .jdpx-btn.grad{background:var(--ig);box-shadow:0 6px 20px rgba(220,39,67,.32)}
.jdpx-analyzer[data-net="tiktok"] .jdpx-btn.grad,.bo-search[data-net="tiktok"] .jdpx-btn.grad{background:linear-gradient(135deg,#25F4EE,#FE2C55);box-shadow:0 6px 20px rgba(254,44,85,.3)}
.jdpx-analyzer[data-net="youtube"] .jdpx-btn.grad,.bo-search[data-net="youtube"] .jdpx-btn.grad{background:#FF0000;box-shadow:0 6px 20px rgba(255,0,0,.3)}
/* anneau de focus aux couleurs du réseau */
.jdpx-analyzer[data-net="instagram"] .searchbox:focus-within,.bo-search[data-net="instagram"]:focus-within{border-color:#DC2743;box-shadow:0 0 0 3px rgba(220,39,67,.14),0 18px 44px -16px rgba(16,20,29,.2)}
.jdpx-analyzer[data-net="tiktok"] .searchbox:focus-within,.bo-search[data-net="tiktok"]:focus-within{border-color:#FE2C55;box-shadow:0 0 0 3px rgba(254,44,85,.14),0 18px 44px -16px rgba(16,20,29,.2)}
.jdpx-analyzer[data-net="youtube"] .searchbox:focus-within,.bo-search[data-net="youtube"]:focus-within{border-color:#FF0000;box-shadow:0 0 0 3px rgba(255,0,0,.12),0 18px 44px -16px rgba(16,20,29,.2)}
/* onglet réseau actif (Booster) aux couleurs du réseau */
.bo-net.on[data-bonet="instagram"]{background:var(--ig)}
.bo-net.on[data-bonet="tiktok"]{background:linear-gradient(135deg,#25F4EE,#FE2C55)}
.bo-net.on[data-bonet="youtube"]{background:#FF0000}

/* ---------- Métriques pro (grade, valeur média, projection, partenariats) ---------- */
.jdpx-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.mx-card{display:flex;align-items:center;gap:16px;padding:16px 18px}
.mx-card.mx-wide{grid-column:span 2}
.mx-grade{flex:0 0 auto;width:58px;height:58px;border-radius:16px;display:flex;align-items:center;justify-content:center;font:800 26px Poppins,sans-serif;color:#fff;box-shadow:0 6px 18px rgba(16,20,29,.18)}
.mx-ico{flex:0 0 auto;width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:22px;background:var(--surface2);border:1px solid var(--line)}
.mx-body{min-width:0;flex:1}
.mx-lbl{font-size:12.5px;font-weight:600;color:var(--t2);display:flex;align-items:center;gap:6px}
.mx-val{font:800 21px Poppins,sans-serif;color:var(--t1);margin-top:2px;line-height:1.15}
.mx-val.up{color:#0FA573}
.mx-val.dn{color:#E0335E}
.mx-sub{font-size:12.5px;color:var(--t3);margin-top:2px}
.mx-i{font-size:11px;color:var(--t3);cursor:help;border:1px solid var(--line2);border-radius:999px;width:15px;height:15px;display:inline-flex;align-items:center;justify-content:center}
.mx-rank{margin-top:3px;font-size:13.5px;font-weight:700;color:var(--t1)}
.mx-rank.top10{color:#0FA573}
.mx-rank.top25{color:#2D7FF0}
.mx-rank.above{color:#0FA573}
.mx-rank.below{color:#E0335E}
.mx-proj{display:flex;gap:18px;margin-top:6px}
.mx-proj span{font-size:12px;color:var(--t2);display:flex;flex-direction:column;gap:2px}
.mx-proj b{font:800 18px Poppins,sans-serif;color:var(--t1)}
.mx-note-box{margin-top:6px;font-size:12.5px;line-height:1.5;color:var(--t2);background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
@media(max-width:560px){.mx-card.mx-wide{grid-column:span 1}}

/* ---------- Teaser métriques dans le rapport ---------- */
.mt-teaser{display:flex;align-items:center;gap:16px;padding:15px 18px}
.mt-teaser .mx-grade{width:48px;height:48px;border-radius:14px;font-size:21px}
.mt-body{flex:1;min-width:0}
.mt-sub{font-size:12.5px;color:var(--t3);margin-top:2px;line-height:1.4}
.mt-mv{display:flex;flex-direction:column;gap:2px;text-align:right}
.mt-mv span{font-size:11px;color:var(--t3)}
.mt-mv b{font:800 16px Poppins,sans-serif;color:var(--t1)}
.mt-cta{flex:0 0 auto}
@media(max-width:560px){.mt-teaser{flex-wrap:wrap}.mt-mv{text-align:left;flex:1 0 auto}.mt-cta{width:100%}}

/* ---------- Page Métriques dédiée : stagger d'entrée + lift au survol ---------- */
.jdpx-metrics.mxp{margin-top:4px}
.jdpx-metrics.mxp .mx-card.fade:nth-child(1){animation-delay:0ms}
.jdpx-metrics.mxp .mx-card.fade:nth-child(2){animation-delay:45ms}
.jdpx-metrics.mxp .mx-card.fade:nth-child(3){animation-delay:90ms}
.jdpx-metrics.mxp .mx-card.fade:nth-child(4){animation-delay:135ms}
.jdpx-metrics.mxp .mx-card.fade:nth-child(5){animation-delay:180ms}
@media(hover:hover) and (pointer:fine){
	.jdpx-metrics .mx-card:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(16,20,29,.04),0 14px 28px -16px rgba(16,20,29,.34)}
}
@media (prefers-reduced-motion:reduce){
	.jdpx-metrics.mxp .mx-card.fade{animation-delay:0ms!important}
}

/* ---------- Courbe interactive (jchart) : aire + ligne + survol précis ---------- */
.jch{margin-top:10px}
.jch-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px}
.jch-title{font-size:13.5px;font-weight:700;letter-spacing:-.01em;color:var(--t1)}
.jch-range{font-size:11.5px;color:var(--t3);font-variant-numeric:tabular-nums}
.jch-plot{position:relative;width:100%}
.jch-svg{display:block;width:100%;height:auto;overflow:visible}
.jch-dot{opacity:.45}
.jch-cursor{stroke:var(--line2);stroke-width:1;stroke-dasharray:3 3;transition:opacity .12s var(--ease)}
.jch-focus{transition:opacity .12s var(--ease);filter:drop-shadow(0 1px 3px rgba(16,20,29,.25))}
.jch-tip{position:absolute;transform:translate(-50%,calc(-100% - 10px));background:var(--surface);border:1px solid var(--line2);border-radius:10px;padding:7px 10px;box-shadow:0 8px 22px -8px rgba(16,20,29,.4);font-size:12px;pointer-events:none;white-space:nowrap;z-index:5}
.jch-tip[hidden]{display:none}
.jt-date{font-size:10.5px;color:var(--t3);margin-bottom:3px;text-transform:capitalize}
.jt-row{display:flex;align-items:center;gap:6px;line-height:1.55}
.jt-row i{width:8px;height:8px;border-radius:2px;flex:0 0 auto}
.jt-row span{color:var(--t2)}
.jt-row b{margin-left:auto;color:var(--t1);font-variant-numeric:tabular-nums}
.jt-row em{font-style:normal;font-size:11px;font-weight:700;margin-left:4px}
.jt-row em.up{color:#0FA573}
.jt-row em.dn{color:#E0335E}
.jch-axis{display:flex;justify-content:space-between;font-size:10.5px;color:var(--t3);margin-top:3px;text-transform:capitalize}
.jch-legend{display:flex;gap:16px;margin-top:8px;font-size:11.5px;color:var(--t2)}
.jch-lg{display:inline-flex;align-items:center;gap:6px}
.jch-lg i{width:15px;height:3px;border-radius:2px}
.acc-chart{margin-top:8px}

/* ---------- Tableau historique : variation par ligne ---------- */
.acc-num{font-variant-numeric:tabular-nums}
.acc-d{display:inline-block;margin-left:7px;font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.acc-d.up{color:#0FA573}
.acc-d.dn{color:#E0335E}

/* ---------- Comparateur : bulles profil en-tête + colonne écart ---------- */
.cmp-th{display:flex;align-items:center;gap:7px;justify-content:center}
.cmp-th-av{width:22px;height:22px;border-radius:50%;overflow:hidden;flex:0 0 auto;background:var(--surface2);display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line)}
.cmp-th-av img{width:100%;height:100%;object-fit:cover}
.cmp-th-av .in{font-size:12px}
.cmp-th-n{font-size:12px;font-weight:700;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmp-table td.cmp-ecart,.cmp-table th.cmp-ecart{text-align:center;font-variant-numeric:tabular-nums}
.cmp-gap{font-size:12px;font-weight:700}
.cmp-gap.up{color:#0FA573}
.cmp-gap.dn{color:#E0335E}
.cmp-eq{color:var(--t3)}

/* ---------- Icônes SVG (sprite #ic-*) : remplacent les emoji du menu et des titres d'outils ---------- */
.jdpx-ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block;flex:none}

/* ---------- Bento page Métriques : casse la grille uniforme (note en héros) ---------- */
.jdpx-metrics.mxp .mx-card:first-child{grid-column:span 2;background:linear-gradient(120deg,rgba(251,165,50,.07),rgba(240,70,125,.04))}
.jdpx-metrics.mxp .mx-card:first-child .mx-grade{width:60px;height:60px;border-radius:17px;font-size:27px}
@media(max-width:560px){.jdpx-metrics.mxp .mx-card:first-child{grid-column:span 1}}

/* ---------- Mes comptes : tableau de suivi multi-métriques + synthèse de période ---------- */
.acc-synth{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px 20px;margin-top:18px;padding:13px 15px;border-radius:12px;background:var(--surface2);border:1px solid var(--line)}
.acc-syn-l{width:100%;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--t3)}
.acc-syn-it{display:inline-flex;flex-direction:column;gap:1px}
.acc-syn-it em{font-style:normal;font-size:10.5px;color:var(--t3)}
.acc-syn-it b{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--t2)}
.acc-syn-it b.up{color:#0FA573}
.acc-syn-it b.dn{color:#E0335E}
.acc-table-wrap{margin-top:18px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.acc-table-wrap .acc-table{margin-top:0;min-width:max-content}
.acc-table th,.acc-table td{white-space:nowrap}

/* ---------- Booster : intro centrée, cohérente avec le bloc de recherche centré ---------- */
#jdpx-booster .sec-title{text-align:center}
#jdpx-booster .sec-lead{text-align:center;margin-left:auto;margin-right:auto}

/* ---------- Page Analyser : bloc explicatif "Comment ça marche" avant analyse ---------- */
.jdpx-intro{margin-top:36px;max-width:1000px;margin-left:auto;margin-right:auto}
.intro-head{text-align:center;margin-bottom:24px}
.intro-head h2{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--t1)}
.intro-head p{font-size:14px;color:var(--t2);margin:8px auto 0;max-width:60ch;line-height:1.55}
.intro-head-sub{margin-top:44px;margin-bottom:20px}
.intro-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:0;margin:0;counter-reset:none}
.intro-step{display:flex;gap:14px;align-items:flex-start;padding:20px;border-radius:16px;background:var(--surface);border:1px solid var(--line);box-shadow:0 1px 2px rgba(16,20,29,.04),0 10px 24px -16px rgba(16,20,29,.2);animation:jdpx-fade .5s var(--ease) both}
.is-num{flex:none;width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;font:800 16px Poppins,sans-serif;color:#fff;background:var(--grad);box-shadow:0 5px 14px -4px rgba(240,70,125,.5)}
.is-b h3{font-size:15px;font-weight:700;color:var(--t1);margin:3px 0 5px}
.is-b p{font-size:13px;color:var(--t2);line-height:1.5;margin:0}
.intro-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.intro-feat{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:14px;background:var(--surface2);border:1px solid var(--line);animation:jdpx-fade .5s var(--ease) both}
.if-ic{flex:none;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--line2);color:var(--accent)}
.if-ic .jdpx-ic{width:20px;height:20px}
.if-b{display:flex;flex-direction:column;gap:3px;min-width:0}
.if-b b{font-size:13.5px;font-weight:700;color:var(--t1)}
.if-b span{font-size:12.5px;color:var(--t2);line-height:1.5}
.intro-steps .intro-step:nth-child(2){animation-delay:50ms}
.intro-steps .intro-step:nth-child(3){animation-delay:100ms}
.intro-feats .intro-feat:nth-child(2){animation-delay:40ms}
.intro-feats .intro-feat:nth-child(3){animation-delay:80ms}
.intro-feats .intro-feat:nth-child(4){animation-delay:120ms}
.intro-feats .intro-feat:nth-child(5){animation-delay:160ms}
.intro-feats .intro-feat:nth-child(6){animation-delay:200ms}
@media(max-width:1080px){.intro-feats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.intro-steps{grid-template-columns:1fr}}
@media(max-width:640px){.intro-feats{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.intro-step,.intro-feat{animation:none}}

/* ===== Stats visuelles enrichies : KPI couleur + barres + radar + secteur (v0.1.52) ===== */
.acc-kpis .kpi-c.score b{color:var(--accent)}
.acc-kpis .kpi-c.eng b{color:var(--green)}
.acc-kpis .kpi-c.grow b{color:var(--green)}
.acc-viz{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:14px;margin-top:16px}
.viz-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column}
.viz-card.viz-grow{grid-column:1/-1}
.viz-h{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--t1);margin-bottom:12px}
.viz-h svg{width:16px;height:16px;flex:none}
.gbars{width:100%;height:auto;display:block}
.gb-base{stroke:var(--line2);stroke-width:1}
.gb-bar.up{fill:var(--green)}
.gb-bar.dn{fill:var(--red)}
.gb-v{font-size:11px;font-weight:700}
.gb-v.up{fill:var(--green)}
.gb-v.dn{fill:var(--red)}
.gb-x{font-size:10px;fill:var(--t3)}
.radar{width:100%;height:auto;display:block;max-width:230px;margin:0 auto}
.rd-ring,.rd-spoke{fill:none;stroke:var(--line2);stroke-width:1}
.rd-area{fill:rgba(230,138,28,.15);stroke:var(--accent);stroke-width:2}
.rd-dot{fill:var(--accent)}
.rd-l{font-size:10.5px;font-weight:600;fill:var(--t2)}
.bench{display:flex;flex-direction:column;gap:9px}
.bench-row{display:flex;align-items:center;gap:10px}
.bench-l{flex:0 0 96px;font-size:12px;color:var(--t3)}
.bench-track{flex:1;height:9px;background:var(--line2);border-radius:999px;overflow:hidden}
.bench-fill{display:block;height:100%;border-radius:999px}
.bench-fill.up{background:var(--green)}
.bench-fill.dn{background:var(--red)}
.bench-fill.med{background:var(--t3);opacity:.5}
.bench-v{flex:0 0 auto;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;min-width:48px;text-align:right}
.bench-v.med{color:var(--t3);font-weight:600}
.bench-note{display:flex;align-items:center;gap:6px;font-size:12px;margin:4px 0 0}
.bench-note svg{width:14px;height:14px;flex:none}
.bench-note.up{color:var(--green)}
.bench-note.dn{color:var(--red)}

/* Croissance multi-métriques depuis le 1er relevé (mini-cartes + sparkline) - v0.1.53 */
.acc-growth{margin-top:18px;padding:14px 16px;border-radius:14px;background:var(--surface2);border:1px solid var(--line)}
.gs-head{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--t3);margin-bottom:12px}
.gs-head svg{width:14px;height:14px;flex:none;color:var(--green)}
.gs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px}
.gs-card{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:10px 12px}
.gs-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.gs-l{font-size:12px;color:var(--t2);font-weight:600}
.gs-top .spark{flex:none;width:54px;height:20px}
.gs-d{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
.gs-card.up .gs-d{color:var(--green)}
.gs-card.dn .gs-d{color:var(--red)}
.gs-card.flat .gs-d{color:var(--t3)}

/* Craft emil-design-eng : hover lift + transitions + stagger sur les cartes stats - v0.1.54 */
.acc-kpis .kpi-c,.gs-card,.viz-card{transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
@media (hover:hover) and (pointer:fine){
.acc-kpis .kpi-c:hover{transform:translateY(-2px);border-color:var(--line2)}
.gs-card:hover,.viz-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px -14px rgba(16,20,29,.30);border-color:var(--line2)}
}
@media (prefers-reduced-motion:no-preference){
.gs-grid .gs-card{opacity:0;animation:jdpxRise .42s var(--ease) forwards}
.gs-grid .gs-card:nth-child(1){animation-delay:.02s}
.gs-grid .gs-card:nth-child(2){animation-delay:.06s}
.gs-grid .gs-card:nth-child(3){animation-delay:.10s}
.gs-grid .gs-card:nth-child(4){animation-delay:.14s}
.gs-grid .gs-card:nth-child(5){animation-delay:.18s}
.acc-viz .viz-card{opacity:0;animation:jdpxRise .42s var(--ease) forwards}
.acc-viz .viz-card:nth-child(2){animation-delay:.08s}
@keyframes jdpxRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}

/* ===== Système éditorial crème (partagé tout le module) ===== */
.jdpx-body{ --bg:#FAF8F3; --cr:#FFFFFF; --cr2:#F4F1E8; --ink:#1B1B1A; --ink2:#46453F; --ink3:#8B897F; --hair:#E3DFD4; --pap:#FFFFFF; --ig:#DC2743; --tk:#25F4EE; --yt:#FF0000; }
#jdpx-analyse .sec-title{color:var(--ink)}
.an-picker{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.an-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 7px;border-radius:999px;border:1px solid var(--hair);background:var(--pap);color:var(--ink2);font:600 13px Poppins,sans-serif;cursor:pointer;transition:transform .16s var(--ease),border-color .16s var(--ease),color .16s}
.an-chip img{width:22px;height:22px;border-radius:50%;object-fit:cover}
.an-chip:hover{transform:translateY(-1px);color:var(--ink)}
.an-chip:active{transform:scale(.98)}
.an-chip.on{border-color:transparent;background:var(--ink);color:#fff}
.an-loading{display:flex;align-items:center;gap:10px;color:var(--ink3);font-size:14px;padding:36px 4px}
.an-ico{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* Panneau crème */
.an-stage{background:var(--cr);border:1px solid var(--hair);border-radius:26px;padding:38px 42px;margin-bottom:18px;box-shadow:0 1px 2px rgba(27,27,26,.04),0 20px 44px -24px rgba(27,27,26,.30)}

/* En-tête identité + score */
.an-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}
.an-who{display:flex;align-items:center;gap:13px;min-width:0}
.an-av{width:50px;height:50px;border-radius:50%;object-fit:cover;flex:none}
.an-av--ph{display:inline-flex;align-items:center;justify-content:center;background:var(--ink);color:#fff;font:800 20px Poppins,sans-serif}
.an-who b{display:flex;align-items:center;gap:7px;font-size:21px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.an-who>div>span{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--ink3);margin-top:3px}
.an-who>div>span .an-ico{font-size:15px;opacity:.85}
.an-vf{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--blue);color:#fff;font-size:12px}
.an-score{display:inline-flex;align-items:center;gap:11px;background:var(--pap);border:1px solid var(--hair);border-radius:999px;padding:7px 9px 7px 18px;flex:none}
.an-score>span{font-size:12.5px;font-weight:600;color:var(--ink3);white-space:nowrap}
.an-score-ring{position:relative;width:42px;height:42px;border-radius:50%;background:conic-gradient(var(--accent) calc(var(--p,0)*1%),var(--hair) 0);display:grid;place-items:center}
.an-score-ring::before{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--pap)}
.an-score-ring b{position:relative;font:800 14px Poppins,sans-serif;color:var(--ink)}

/* Verdict */
.an-kick{display:inline-flex;align-items:center;gap:7px;font:700 12px Poppins,sans-serif;letter-spacing:.7px;text-transform:uppercase;color:var(--accent);margin-top:28px}
.an-kick .an-ico{font-size:15px}
.an-head{font:800 clamp(26px,3.4vw,40px)/1.12 Poppins,sans-serif;letter-spacing:-.025em;color:var(--ink);margin:11px 0 24px;max-width:20ch}
.an-diag{background:var(--pap);border:1px solid var(--hair);border-radius:18px;padding:24px 28px}
.an-diag p{font-size:17.5px;line-height:1.72;color:var(--ink2)}
.an-pill{padding:.06em .42em;border-radius:6px;font-weight:600;white-space:nowrap}
.an-pill--blue{background:#E9EEFB;color:#2C62D6}
.an-pill--green{background:#E3F4EA;color:#0E9460}
.an-pill--red{background:#FBE7EC;color:#D32F4C}

/* Deux colonnes */
.an-two{display:grid;grid-template-columns:1fr 1fr;gap:38px;margin-top:30px}
.an-h4{display:flex;align-items:center;gap:9px;font:700 16px Poppins,sans-serif;color:var(--ink);margin-bottom:6px}
.an-h4 .an-ico{font-size:18px;color:var(--accent)}
.an-prio{list-style:none}
.an-prio li{display:flex;gap:15px;align-items:baseline;padding:14px 2px;border-top:1px solid var(--hair)}
.an-prio .n{font:700 13.5px Poppins,sans-serif;color:var(--ink3);font-variant-numeric:tabular-nums;flex:none}
.an-prio p{font-size:15px;color:var(--ink);line-height:1.45}
.an-ok{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink2);line-height:1.55;background:var(--cr2);border:1px solid var(--hair);border-radius:12px;padding:14px 16px;margin-top:10px}
.an-ok .an-ico{font-size:17px;color:var(--green);flex:none}
.an-levs{display:flex;flex-direction:column;gap:9px;margin-top:10px}
.an-lev{display:flex;gap:12px;align-items:flex-start;background:var(--pap);border:1px solid var(--hair);border-radius:13px;padding:13px 15px;transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.an-lev .ic{font-size:18px;color:var(--accent);flex:none;margin-top:1px;display:inline-flex}
.an-lev p{font-size:14px;color:var(--ink);line-height:1.5}
.an-lev b{font-weight:700}

/* Plan timeline */
.an-plan{margin-top:30px}
.an-tl{list-style:none;position:relative;margin-top:8px}
.an-tl li{position:relative;display:flex;gap:16px;padding-bottom:20px}
.an-tl li:last-child{padding-bottom:0}
.an-tl li:not(:last-child)::before{content:"";position:absolute;left:15px;top:30px;bottom:0;width:2px;background:var(--hair)}
.an-tl .node{position:relative;z-index:1;width:30px;height:30px;border-radius:50%;border:2px solid var(--accent);background:var(--cr);color:var(--accent);display:grid;place-items:center;font:800 13px Poppins,sans-serif;flex:none}
.an-tl .day{font-size:12.5px;font-weight:600;color:var(--ink3)}
.an-tl p{font-size:14.5px;color:var(--ink);line-height:1.55;margin-top:2px}

/* Panneau concurrents */
.an-hd--ideas{align-items:center}
.an-h3{display:flex;align-items:center;gap:10px;font:800 18px Poppins,sans-serif;letter-spacing:-.01em;color:var(--ink)}
.an-h3 .an-ico{font-size:20px;color:var(--accent)}
.an-meta{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink3);white-space:nowrap}
.an-meta .an-ico{font-size:16px}
.an-lead{font-size:14px;color:var(--ink3);line-height:1.55;margin:10px 0 20px;max-width:66ch}
.an-ideas{display:flex;flex-direction:column;gap:14px}
.an-idea{border:1px solid var(--hair);border-radius:16px;overflow:hidden;background:var(--pap);transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.an-idea-top{display:flex;gap:12px;align-items:center;padding:15px 18px;background:var(--cr2)}
.an-idea-av{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:none}
.an-idea-av--ph{display:inline-flex;align-items:center;justify-content:center;color:#fff;font:800 14px Poppins,sans-serif}
.an-idea-top p{font-size:14.5px;color:var(--ink2);line-height:1.5}
.an-idea-top b{color:var(--ink);font-weight:700}
.an-idea-play{border-top:1px solid var(--hair);padding:14px 18px}
.an-play-k{display:inline-flex;align-items:center;gap:6px;font:700 11px Poppins,sans-serif;letter-spacing:.6px;text-transform:uppercase;color:var(--accent)}
.an-play-k .an-ico{font-size:14px}
.an-idea-play>p{font-size:14.5px;color:var(--ink);line-height:1.55;margin-top:7px;font-weight:500}
.an-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.an-tag{font:600 12px Poppins,sans-serif;color:#6B5FC7;background:#ECEBFB;border-radius:7px;padding:3px 9px}
.an-lock{position:relative}

@media(hover:hover){
	.an-lev:hover{transform:translateY(-2px);box-shadow:0 10px 22px -16px rgba(27,27,26,.4)}
	.an-idea:hover{transform:translateY(-2px);box-shadow:0 14px 30px -20px rgba(27,27,26,.4)}
}
@media(max-width:820px){
	.an-stage{padding:26px 20px;border-radius:20px}
	.an-two{grid-template-columns:1fr;gap:26px}
	.an-head{margin-bottom:18px}
}
@media(prefers-reduced-motion:reduce){.an-chip,.an-lev,.an-idea{transition:none}}

/* ===== Mes comptes / Concurrents - éditorial crème ===== */
.jdpx-body .acc-card{background:var(--cr);border:1px solid var(--hair);border-radius:22px;box-shadow:0 1px 2px rgba(27,27,26,.04),0 20px 44px -24px rgba(27,27,26,.30);padding:26px 28px}
.acc-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}
.acc-who{display:flex;align-items:center;gap:13px;min-width:0}
.acc-who b{display:flex;align-items:center;gap:7px;font-size:18px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.acc-who>div>span{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink3);margin-top:3px}
.acc-who>div>span .an-ico{font-size:15px;opacity:.85}
.acc-hd-r{display:flex;align-items:center;gap:12px;flex:none}
.acc-x{width:30px;height:30px;border-radius:50%;border:1px solid var(--hair);background:var(--pap);color:var(--ink3);cursor:pointer;font-size:13px;line-height:1;transition:color .15s,border-color .15s}
.acc-x:hover{color:var(--red);border-color:var(--red)}
.jdpx-body .acc-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px;margin-bottom:16px}
.jdpx-body .acc-kpis .kpi-c{background:var(--pap);border:1px solid var(--hair);border-radius:14px;padding:13px 16px}
.jdpx-body .acc-kpis .kpi-c b{display:block;font-size:20px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.jdpx-body .acc-kpis .kpi-c span{font-size:12px;color:var(--ink3)}
.jdpx-body .acc-kpis .kpi-c.eng b{color:var(--green)}
.jdpx-body .acc-kpis .kpi-c.grow b{color:var(--blue)}
.acc-fresh{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12.5px;color:var(--ink3);margin:4px 0 14px}
.acc-refresh{border:1px solid var(--hair);background:var(--pap);color:var(--ink2);border-radius:9px;padding:6px 12px;font:600 12.5px Poppins,sans-serif;cursor:pointer;transition:transform .15s var(--ease),color .15s}
.acc-refresh:hover:not(:disabled){transform:translateY(-1px);color:var(--ink)}
.acc-refresh:disabled{opacity:.5;cursor:default}
.jdpx-body .acc-chart,.jdpx-body .acc-viz .viz-card{background:var(--pap);border:1px solid var(--hair);border-radius:16px}
.acc-chart{padding:16px 18px;margin-bottom:14px}
.viz-h{display:flex;align-items:center;gap:8px;font:700 12px Poppins,sans-serif;letter-spacing:.5px;text-transform:uppercase;color:var(--ink2)}
.viz-h .jdpx-ic{color:var(--accent)}
.jch-title{font:700 12px Poppins,sans-serif!important;letter-spacing:.5px;text-transform:uppercase;color:var(--ink2)!important}
.jdpx-body .acc-table th{color:var(--ink3);border-bottom-color:var(--hair)}
.jdpx-body .acc-table td{border-bottom-color:var(--hair);color:var(--ink)}
.acc-actions{margin:14px 0}
.acc-actions .jdpx-btn.ghost{background:var(--pap);border-color:var(--hair);color:var(--ink)}

/* =================================================================
   REDESIGN ÉDITORIAL CRÈME - tout le plugin (workflow wu6nd8wor)
   ================================================================= */


/* ---------- hero_public ---------- */
/* ========== TOKENS DESIGN SYSTEM CRÈME (unifié .jdpx-body) ========== */


/* ========== ANIMATIONS KEYFRAMES ========== */
@keyframes jdpx-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(15, 165, 115, 0.45);
	}
	70% {
		box-shadow: 0 0 0 10px rgba(15, 165, 115, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(15, 165, 115, 0);
	}
}

@keyframes jdpx-ac-in {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(-6px);
	}
	to {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

@keyframes jdpx-spin {
	to { 
		transform: rotate(360deg); 
	}
}

/* ========== HERO (ACCUEIL PUBLIC) ========== */
.jdpx-body .jdpx-hero {
	padding: 84px 0 60px;
	text-align: center;
	position: relative;
}

.jdpx-body .jdpx-hero .eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink2);
	border: 1px solid var(--hair);
	background: var(--cr2);
	border-radius: 999px;
	padding: 7px 16px;
	margin-bottom: 22px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
}

.jdpx-body .jdpx-hero .pulse {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--green);
	box-shadow: 0 0 0 0 rgba(15, 165, 115, 0.45);
	animation: jdpx-pulse 2s infinite;
	flex: none;
}

.jdpx-body .jdpx-hero h1 {
	font-size: clamp(34px, 5vw, 54px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.02em;
	max-width: 840px;
	margin: 0 auto;
	color: var(--ink);
}

.jdpx-body .jdpx-hero h1 em {
	font-style: normal;
	color: var(--accent);
}

.jdpx-body .jdpx-hero .sub {
	color: var(--ink2);
	max-width: 600px;
	margin: 18px auto 36px;
	font-size: 16.5px;
	line-height: 1.55;
	font-weight: 400;
}

/* ========== ANALYZER (FORMULAIRE RECHERCHE) ========== */
.jdpx-body .jdpx-analyzer {
	max-width: 680px;
	margin: 0 auto;
	position: relative;
	z-index: 2;
	padding: 0 16px;
}

.jdpx-body .jdpx-analyzer .nets {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-bottom: 18px;
	flex-wrap: wrap;
}

.jdpx-body .jdpx-analyzer .net {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border-radius: 999px;
	border: 1px solid var(--hair);
	background: var(--pap);
	font: 600 13.5px Poppins, sans-serif;
	color: var(--ink2);
	cursor: pointer;
	transition: color 0.16s var(--ease), border-color 0.16s var(--ease), transform 0.16s var(--ease);
}

@media (hover: hover) {
	.jdpx-body .jdpx-analyzer .net:hover {
		transform: translateY(-1px);
		color: var(--ink);
		border-color: var(--accent);
	}
}

.jdpx-body .jdpx-analyzer .net:active {
	transform: scale(0.97);
}

.jdpx-body .jdpx-analyzer .net.on {
	color: var(--pap);
	border-color: transparent;
	background: var(--ig);
	box-shadow: 0 6px 18px rgba(220, 39, 67, 0.35);
}

.jdpx-body .jdpx-analyzer .net.on[data-net="tiktok"] {
	background: #10141D;
	box-shadow: 0 6px 18px rgba(16, 20, 29, 0.35);
}

.jdpx-body .jdpx-analyzer .net.on[data-net="youtube"] {
	background: var(--yt);
	box-shadow: 0 6px 18px rgba(255, 0, 0, 0.35);
}

.jdpx-body .jdpx-analyzer .searchbox {
	display: flex;
	gap: 10px;
	background: var(--pap);
	border: 1px solid var(--hair);
	border-radius: 18px;
	padding: 10px;
	box-shadow: 0 2px 6px rgba(16, 20, 29, 0.05), 0 24px 60px rgba(16, 20, 29, 0.12);
	transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}

.jdpx-body .jdpx-analyzer .searchbox:focus-within {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(230, 138, 28, 0.12), 0 24px 60px rgba(16, 20, 29, 0.12);
}

.jdpx-body .jdpx-analyzer input {
	flex: 1;
	background: transparent;
	border: 0;
	color: var(--ink);
	font: 600 17px Poppins, sans-serif;
	padding: 8px 14px;
	min-width: 0;
	font-variant-numeric: tabular-nums;
}

.jdpx-body .jdpx-analyzer input:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.jdpx-body .jdpx-analyzer input::placeholder {
	color: var(--ink3);
	font-weight: 400;
}

.jdpx-body .jdpx-analyzer .hint {
	margin-top: 14px;
	font-size: 12.5px;
	color: var(--ink3);
	text-align: center;
	line-height: 1.5;
}

.jdpx-body .jdpx-analyzer .hint b {
	color: var(--ink2);
	font-weight: 600;
}

.jdpx-body .jdpx-analyzer .hint.err {
	color: var(--red);
	font-weight: 600;
}

/* ========== AUTOCOMPLETE (AC) ========== */
.jdpx-body .jdpx-ac {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: calc(100% + 20px);
	margin-top: 8px;
	max-height: 320px;
	overflow-y: auto;
	background: var(--pap);
	border: 1px solid var(--hair);
	border-radius: 14px;
	box-shadow: 0 4px 16px rgba(16, 20, 29, 0.12);
	z-index: 100;
	display: none;
	animation: jdpx-ac-in 0.2s var(--ease);
}

.jdpx-body .jdpx-ac.in {
	display: block;
}

.jdpx-body .ac-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	cursor: pointer;
	transition: background 0.12s, color 0.12s;
	border-bottom: 1px solid var(--cr2);
	color: var(--ink2);
}

.jdpx-body .ac-item:last-child {
	border-bottom: 0;
}

@media (hover: hover) {
	.jdpx-body .ac-item:hover {
		background: var(--cr2);
		color: var(--ink);
	}
}

.jdpx-body .ac-item.on {
	background: var(--cr2);
	color: var(--ink);
}

.jdpx-body .ac-item:active {
	transform: scale(0.98);
}

.jdpx-body .ac-item .ac-av {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
	background: var(--hair);
}

.jdpx-body .ac-item .ac-info {
	min-width: 0;
	flex: 1;
}

.jdpx-body .ac-item .ac-handle {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	font-size: 14px;
	color: var(--ink);
}

.jdpx-body .ac-item .ac-badge {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--blue);
	flex: none;
	font-size: 0;
}

.jdpx-body .ac-item .ac-name {
	display: block;
	font-size: 12.5px;
	color: var(--ink3);
	margin-top: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.jdpx-body .ac-spin {
	width: 16px;
	height: 16px;
	border: 2px solid var(--hair);
	border-top-color: var(--accent);
	border-radius: 50%;
	animation: jdpx-spin 0.8s linear infinite;
	flex: none;
}

.jdpx-body .ac-empty {
	padding: 20px 16px;
	text-align: center;
	font-size: 13.5px;
	color: var(--ink3);
}

/* ========== RESPONSIVE HERO/ANALYZER ========== */
@media (max-width: 880px) {
	.jdpx-body .jdpx-hero {
		padding: 64px 0 48px;
	}

	.jdpx-body .jdpx-hero h1 {
		font-size: clamp(28px, 4vw, 40px);
	}

	.jdpx-body .jdpx-hero .sub {
		font-size: 15px;
		margin: 14px auto 28px;
	}

	.jdpx-body .jdpx-analyzer {
		max-width: 100%;
	}

	.jdpx-body .jdpx-analyzer .nets {
		margin-bottom: 14px;
	}

	.jdpx-body .jdpx-analyzer input {
		font-size: 16px;
	}

	.jdpx-body .jdpx-ac {
		width: calc(100vw - 32px);
		max-width: 600px;
	}
}

@media (max-width: 480px) {
	.jdpx-body .jdpx-hero {
		padding: 48px 0 36px;
	}

	.jdpx-body .jdpx-hero h1 {
		font-size: clamp(26px, 6vw, 34px);
	}

	.jdpx-body .jdpx-hero .sub {
		font-size: 14.5px;
		margin: 12px 0 24px;
	}

	.jdpx-body .jdpx-analyzer .searchbox {
		padding: 8px;
		gap: 8px;
	}

	.jdpx-body .jdpx-analyzer .jdpx-btn {
		padding: 10px 14px;
		font-size: 13px;
	}
}

/* ========== REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce) {
	.jdpx-body .jdpx-hero .pulse {
		animation: none;
		box-shadow: 0 0 0 0 rgba(15, 165, 115, 0.45);
	}

	.jdpx-body .jdpx-ac {
		animation: none;
	}

	.jdpx-body .jdpx-analyzer .net,
	.jdpx-body .jdpx-analyzer .searchbox,
	.jdpx-body .ac-item {
		transition: none;
	}
}


/* ---------- analyser_report ---------- */
/* ===== AUDIT ÉDITORIAL : Rapport d'analyse scope section[data-sec=analyser] ===== */
/* Mise au niveau crème + collisions/débordements résolus + zéro gradient. */

/* KPI section : espacement + hiérarchie renforcie */
section:has(#jdpx-results) .sec-head h2 {
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--t1);
}

section:has(#jdpx-results) .sec-head .more {
	font-size: 13px;
	color: var(--t3);
	font-weight: 600;
}

/* Section KPI : minmax au lieu de repeat auto-fit casse les colonnes sur mobile */
.kpis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
	gap: 16px;
	margin-bottom: 12px;
}

.kpi {
	padding: 18px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(27, 27, 26, 0.04);
	transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
	overflow: hidden;
	position: relative;
}

@media (hover: hover) {
	.kpi:hover {
		transform: translateY(-2px);
		box-shadow: 0 2px 4px rgba(16, 20, 29, 0.05), 0 18px 36px -16px rgba(16, 20, 29, 0.35);
	}
}

.kpi .lbl {
	font-size: 12px;
	color: var(--t3);
	font-weight: 600;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	margin-bottom: 8px;
}

.kpi .val {
	font-size: 26px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--t1);
	margin: 4px 0 2px;
	line-height: 1.2;
}

.kpi .delta {
	font-size: 12.5px;
	font-weight: 700;
	margin-top: 6px;
	white-space: nowrap;
}

.kpi .delta.up {
	color: var(--green);
}

.kpi .delta.dn {
	color: var(--red);
}

.kpi .delta.mid {
	color: var(--t3);
}

.kpi svg.spark {
	position: absolute;
	right: 10px;
	bottom: 10px;
	opacity: 0.9;
	max-width: 64px;
}

/* Section Engagement vs secteur : barre propre + legend alignee */
.er-card {
	padding: 22px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(27, 27, 26, 0.04);
}

.er-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}

.er-head b {
	font-size: 15px;
	font-weight: 700;
	color: var(--t1);
}

.er-head span {
	font-size: 13.5px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--t2);
}

.er-head em {
	font-style: normal;
	color: var(--t3);
	font-weight: 600;
	font-size: 12.5px;
}

.er-track {
	position: relative;
	height: 14px;
	border-radius: 99px;
	background: var(--bg2);
	overflow: visible;
	margin: 12px 0 8px;
}

.er-fill {
	height: 100%;
	border-radius: 99px;
	transition: width 1s var(--ease);
}

.er-fill.up {
	background: var(--green);
}

.er-fill.dn {
	background: var(--red);
}

.er-mark {
	position: absolute;
	top: -4px;
	width: 2px;
	height: 22px;
	background: var(--t1);
	opacity: 0.55;
	transform: translateX(-1px);
}

.er-mark::after {
	content: "";
	position: absolute;
	top: -4px;
	left: -3px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--t1);
}

.er-legend {
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	color: var(--t3);
	margin-top: 7px;
}

/* Section Scores : grille 4 colonnes min, collapse responsive */
.scores {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 16px;
	margin-top: 16px;
}

.score {
	padding: 22px;
	display: flex;
	gap: 18px;
	align-items: center;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(27, 27, 26, 0.04);
	transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

@media (hover: hover) {
	.score:hover {
		transform: translateY(-2px);
		box-shadow: 0 2px 4px rgba(16, 20, 29, 0.05), 0 18px 36px -16px rgba(16, 20, 29, 0.35);
	}
}

.gauge {
	position: relative;
	width: 74px;
	height: 74px;
	flex: none;
}

.gauge svg {
	transform: rotate(-90deg);
}

.gauge .v {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-weight: 800;
	font-size: 18px;
	color: var(--t1);
}

.score .t b {
	display: block;
	font-weight: 700;
	font-size: 14.5px;
	color: var(--t1);
	margin-bottom: 3px;
}

.score .t span {
	font-size: 12.5px;
	color: var(--t3);
	line-height: 1.5;
}

/* Diagnostic IA : 3 colonnes avec collapse au besoin */
#jdpx-diag {
	margin-top: 8px;
}

.diag {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	align-items: start;
	margin-top: 12px;
}

.diag[data-n="2"] {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 900px) {
	.diag,
	.diag[data-n="2"] {
		grid-template-columns: 1fr;
	}
}

.diag .card {
	padding: 22px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(27, 27, 26, 0.04);
	transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

@media (hover: hover) {
	.diag .card:hover {
		transform: translateY(-2px);
		box-shadow: 0 2px 4px rgba(16, 20, 29, 0.05), 0 18px 36px -16px rgba(16, 20, 29, 0.35);
	}
}

.diag h4 {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 700;
	color: var(--t1);
	margin: 0 0 12px;
}

.diag .pill {
	width: 28px;
	height: 28px;
	border-radius: 9px;
	display: grid;
	place-items: center;
	font-size: 14px;
	flex: none;
	background: rgba(230, 138, 28, 0.12);
	color: var(--accent);
}

.diag ul {
	list-style: none;
	display: grid;
	gap: 10px;
	font-size: 13.5px;
	color: var(--t2);
	padding: 0;
	margin: 0;
}

.diag li {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	line-height: 1.55;
}

.diag li::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--t3);
	flex: none;
	margin-top: 8px;
	flex-shrink: 0;
}

/* Health section (red flags) */
.rf-sec {
	margin-bottom: 8px;
}

.rf-card {
	padding: 18px 20px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(27, 27, 26, 0.04);
}

.rf-head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.rf-head b {
	font-size: 15px;
	font-weight: 700;
	color: var(--t1);
}

.rf-head span {
	font-size: 12.5px;
	color: var(--red);
	font-weight: 600;
}

.rf-item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 12px 0;
	border-top: 1px solid var(--line);
}

.rf-item:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.rf-ico {
	flex: none;
	font-size: 18px;
	line-height: 1.3;
	margin-top: 1px;
}

.rf-txt b {
	font-size: 13.5px;
	color: var(--t1);
	display: block;
	margin-bottom: 3px;
	font-weight: 700;
}

.rf-txt p {
	font-size: 13px;
	color: var(--t2);
	line-height: 1.55;
	margin: 0;
}

.rf-item.crit .rf-txt b {
	color: var(--red);
}

/* Teaser métriques : compacte inline */
.mt-teaser {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 15px 18px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(27, 27, 26, 0.04);
}

.mt-teaser .mx-grade {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	font-size: 21px;
}

.mt-body {
	flex: 1;
	min-width: 0;
}

.mt-sub {
	font-size: 12.5px;
	color: var(--t3);
	margin-top: 2px;
	line-height: 1.4;
}

.mt-mv {
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-align: right;
	flex: 0 0 auto;
}

.mt-mv span {
	font-size: 11px;
	color: var(--t3);
}

.mt-mv b {
	font: 800 16px Poppins, sans-serif;
	color: var(--t1);
}

.mt-cta {
	flex: 0 0 auto;
}

@media (max-width: 560px) {
	.mt-teaser {
		flex-wrap: wrap;
	}
	.mt-mv {
		text-align: left;
		flex: 1 0 auto;
	}
	.mt-cta {
		width: 100%;
	}
}

/* Section apercu outils : card + grid 4 items */
.ip-card {
	padding: 20px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(27, 27, 26, 0.04);
}

.ip-lead {
	font-size: 13px;
	color: var(--t2);
	line-height: 1.55;
	margin: 0 0 14px;
	max-width: 65ch;
}

.ip-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin-bottom: 16px;
}

@media (max-width: 560px) {
	.ip-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.ip-cell {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 13px;
	border-radius: 13px;
	background: var(--surface2);
	border: 1px solid var(--line);
	transition: transform 0.15s var(--ease);
}

@media (hover: hover) {
	.ip-cell:hover {
		transform: translateY(-1px);
	}
}

.ip-ic {
	font-size: 18px;
	flex: none;
}

.ip-tx b {
	display: block;
	font-size: 17px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--t1);
	line-height: 1.1;
}

.ip-tx span {
	font-size: 11px;
	color: var(--t3);
	margin-top: 2px;
	display: block;
}

.ip-card .jdpx-btn {
	width: 100%;
}

/* Section recos + plans : grille responsive */
#recos {
	margin-top: 12px;
}

.reco-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
	gap: 16px;
	margin-top: 16px;
}

.reco {
	padding: 24px;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(27, 27, 26, 0.04);
	transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

@media (hover: hover) {
	.reco:hover {
		transform: translateY(-2px);
		box-shadow: 0 2px 4px rgba(16, 20, 29, 0.05), 0 18px 36px -16px rgba(16, 20, 29, 0.35);
	}
}

.reco.best {
	border-color: rgba(251, 165, 50, 0.45);
	box-shadow: 0 0 0 1px rgba(230, 138, 28, 0.25), 0 18px 50px rgba(230, 138, 28, 0.14);
}

.reco .flag {
	position: absolute;
	top: -11px;
	left: 20px;
	font-size: 11px;
	font-weight: 700;
	background: var(--accent);
	color: #fff;
	padding: 4px 12px;
	border-radius: 999px;
	box-shadow: 0 4px 12px -4px rgba(240, 70, 125, 0.5);
}

.reco h4 {
	font-size: 16px;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--t1);
	margin: 0;
}

.reco .why {
	font-size: 13px;
	color: var(--t2);
	flex: 1;
	line-height: 1.55;
}

.qty {
	display: flex;
	border: 1px solid var(--line2);
	border-radius: 12px;
	overflow: hidden;
}

.qty button {
	flex: 1;
	background: transparent;
	border: 0;
	color: var(--t2);
	font: 600 13px Poppins, sans-serif;
	padding: 11px;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}

.qty button.on {
	background: var(--surface2);
	color: var(--t1);
}

.qty button .q {
	display: block;
	font-size: 16px;
	font-weight: 800;
	color: var(--t1);
}

.reco .price {
	font-size: 24px;
	font-weight: 800;
	color: var(--t1);
	margin: 0;
}

.reco .price small {
	font-size: 12px;
	color: var(--t3);
	font-weight: 600;
	margin-left: 6px;
}

.reco .price .pro-p {
	font-size: 12px;
	color: var(--violet);
	font-weight: 700;
	display: block;
	margin-top: 4px;
}

/* Section plans pricing */
#pro {
	margin-top: 12px;
}

.plans {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 16px;
	max-width: 780px;
	margin: 16px auto 0;
}

.plan {
	padding: 30px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(27, 27, 26, 0.04);
}

.plan.pro {
	border-color: rgba(251, 165, 50, 0.5);
	background: rgba(251, 165, 50, 0.1);
	box-shadow: 0 0 0 1px rgba(230, 138, 28, 0.25), 0 18px 50px rgba(230, 138, 28, 0.14);
}

.plan h3 {
	font-size: 17px;
	font-weight: 700;
	color: var(--t1);
	margin: 0;
}

.plan .pr {
	font-size: 38px;
	font-weight: 800;
	color: var(--t1);
	margin: 0;
}

.plan .pr small {
	font-size: 13.5px;
	color: var(--t3);
	font-weight: 600;
	margin-left: 6px;
}

.plan ul {
	list-style: none;
	display: grid;
	gap: 10px;
	font-size: 13.5px;
	color: var(--t2);
	padding: 0;
	margin: 0;
}

.plan li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	line-height: 1.55;
}

.plan li .ok {
	color: var(--green);
	font-weight: 800;
	flex: none;
	margin-top: 1px;
}

.plan li .ko {
	color: var(--t3);
	flex: none;
	margin-top: 1px;
}


/* ---------- booster ---------- */
/* ========== Booster section - mise à niveau editorial ========== */
.jdpx-body section[data-sec="booster"] .boost-explain {
	background: rgba(230, 138, 28, 0.08);
	border: 1px solid rgba(230, 138, 28, 0.22);
	border-radius: 14px;
}

.jdpx-body section[data-sec="booster"] .svc {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 14px;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.jdpx-body section[data-sec="booster"] .svc:hover {
	border-color: var(--line2);
	box-shadow: 0 2px 4px rgba(16, 20, 29, 0.04);
}

.jdpx-body section[data-sec="booster"] .svc.on {
	border-color: var(--accent);
	background: rgba(230, 138, 28, 0.06);
}

.jdpx-body section[data-sec="booster"] .svc .nm small {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--t3);
	display: block;
}

.jdpx-body section[data-sec="booster"] .bpanel .for {
	font-size: 12.5px;
	color: var(--t3);
	margin-bottom: 14px;
	max-width: calc(100% - 20px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.jdpx-body section[data-sec="booster"] .bpanel h4 {
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--t1);
	margin-bottom: 12px;
}

.jdpx-body section[data-sec="booster"] .cmts {
	margin: 4px 0 10px;
	padding-top: 10px;
}

.jdpx-body section[data-sec="booster"] .cmts textarea {
	margin-bottom: 12px;
	min-height: 96px;
	resize: vertical;
	width: 100%;
	border: 1px solid var(--line2);
	border-radius: 12px;
	padding: 12px;
	font: 400 13px Poppins, sans-serif;
	color: var(--t1);
	background: #fff;
}

.jdpx-body section[data-sec="booster"] .cmts .genrow {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 8px;
	gap: 10px;
	flex-wrap: wrap;
}

.jdpx-body section[data-sec="booster"] .upsell-chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: flex-start;
	margin: 14px 0 12px;
	padding-top: 12px;
	border-top: 1px solid var(--line);
}

.jdpx-body section[data-sec="booster"] .upsell-chips .pre {
	font-size: 12px;
	color: var(--t3);
	font-weight: 600;
	white-space: nowrap;
}

.jdpx-body section[data-sec="booster"] .upchip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font: 600 12px Poppins, sans-serif;
	padding: 7px 13px;
	border-radius: 999px;
	border: 1px solid rgba(230, 138, 28, 0.28);
	color: var(--accent);
	background: rgba(230, 138, 28, 0.06);
	cursor: pointer;
	transition: all 0.15s var(--ease);
}

.jdpx-body section[data-sec="booster"] .upchip:hover {
	background: rgba(230, 138, 28, 0.12);
	transform: translateY(-1px);
}

.jdpx-body section[data-sec="booster"] .bpanel .total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid var(--line);
	padding-top: 14px;
	margin-top: 16px;
	gap: 12px;
	flex-wrap: wrap;
}

.jdpx-body section[data-sec="booster"] .bpanel .total b {
	font-size: 22px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.jdpx-body section[data-sec="booster"] .bpanel .total .lbl2 {
	font-size: 12.5px;
	color: var(--t3);
	font-weight: 600;
}

.jdpx-body section[data-sec="booster"] .bpanel .total .pro-price {
	font-size: 12px;
	color: var(--violet);
	font-weight: 700;
	display: block;
}

.jdpx-body section[data-sec="booster"] .sec-title {
	text-align: center;
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--t1);
	margin-bottom: 6px;
}

.jdpx-body section[data-sec="booster"] .sec-lead {
	text-align: center;
	margin: 2px auto 24px;
	max-width: 64ch;
	font-size: 13.5px;
	color: var(--t3);
	line-height: 1.5;
}

@media (max-width: 600px) {
	.jdpx-body section[data-sec="booster"] .boost {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.jdpx-body section[data-sec="booster"] .bpanel .total {
		flex-direction: column;
		align-items: stretch;
	}
	.jdpx-body section[data-sec="booster"] .bpanel .total > div {
		width: 100%;
	}
	.jdpx-body section[data-sec="booster"] .bpanel .total .jdpx-btn {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jdpx-body section[data-sec="booster"] .svc,
	.jdpx-body section[data-sec="booster"] .upchip {
		transition: none;
	}
}


/* ---------- metriques ---------- */
/* ========== ZONE MÉTRIQUES : REFONTE ÉDITORIALE CORRIGÉE ========== */

/* Grille cartes : 8px base, gap harmonisé */
.jdpx-body .jdpx-metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin-top: 0;
}

/* Carte unité : padding harmonisé, ombre accent */
.jdpx-body .mx-card {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 18px 20px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(27, 27, 26, .04), 0 12px 28px -20px rgba(27, 27, 26, .25);
	transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}

/* Label : hiérarchie renforcée, MAJUSCULE + espacement lettre */
.jdpx-body .mx-lbl {
	font-size: 13px;
	font-weight: 700;
	color: var(--t2);
	display: flex;
	align-items: center;
	gap: 6px;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	margin-bottom: 4px;
}

/* Valeur : 24px, line-height 1.2 */
.jdpx-body .mx-val {
	font: 800 24px Poppins, sans-serif;
	color: var(--t1);
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	margin: 0;
}

.jdpx-body .mx-val.up {
	color: var(--green);
}

.jdpx-body .mx-val.dn {
	color: var(--red);
}

/* Sous-texte : cohérent, line-height 1.4 */
.jdpx-body .mx-sub {
	font-size: 12px;
	color: var(--t3);
	margin-top: 2px;
	line-height: 1.4;
}

/* Icône info : 16x16 */
.jdpx-body .mx-i {
	font-size: 11px;
	color: var(--t3);
	cursor: help;
	border: 1px solid var(--line2);
	border-radius: 999px;
	width: 16px;
	height: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

/* Grade badge : parfaitement flexing */
.jdpx-body .mx-grade {
	flex: 0 0 auto;
	width: 58px;
	height: 58px;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	font: 800 26px Poppins, sans-serif;
	color: #fff;
	box-shadow: 0 6px 18px rgba(16, 20, 29, .18);
	flex-shrink: 0;
}

/* Icône emoji : cohérent */
.jdpx-body .mx-ico {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	background: var(--surface2);
	border: 1px solid var(--line);
	flex-shrink: 0;
}

/* Corps : text-overflow control */
.jdpx-body .mx-body {
	min-width: 0;
	flex: 1;
}

/* Classement : couleurs tokens */
.jdpx-body .mx-rank {
	font-size: 14px;
	font-weight: 800;
	color: var(--t1);
	line-height: 1.2;
	margin-top: 4px;
	font-variant-numeric: tabular-nums;
}

.jdpx-body .mx-rank.top10 {
	color: var(--green);
}

.jdpx-body .mx-rank.top25 {
	color: var(--blue);
}

.jdpx-body .mx-rank.above {
	color: var(--green);
}

.jdpx-body .mx-rank.below {
	color: var(--red);
}

/* Projection 30/90j : grille serrée, nombres corrects */
.jdpx-body .mx-proj {
	display: flex;
	gap: 16px;
	margin-top: 8px;
	align-items: center;
}

.jdpx-body .mx-proj span {
	font-size: 11.5px;
	color: var(--t2);
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.jdpx-body .mx-proj b {
	font: 800 20px Poppins, sans-serif;
	color: var(--t1);
	font-variant-numeric: tabular-nums;
}

/* Boîte note : surface cohérente, AUCUN gradient */
.jdpx-body .mx-note-box {
	margin-top: 8px;
	font-size: 12px;
	line-height: 1.55;
	color: var(--t2);
	background: var(--surface2);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 12px 14px;
}

/* Carte large (tendance, partenariats) */
.jdpx-body .mx-card.mx-wide {
	grid-column: span 2;
}

/* Responsif : cartes larges reviennent à 1 colonne sous 560px */
@media (max-width: 560px) {
	.jdpx-body .jdpx-metrics.mxp .mx-card:first-child {
		grid-column: span 1;
	}
	.jdpx-body .mx-card.mx-wide {
		grid-column: span 1;
	}
}

/* Bento page Métriques : carte Note en héros, SANS gradient */
.jdpx-body .jdpx-metrics.mxp .mx-card:first-child {
	grid-column: span 2;
	background: var(--surface);
	border: 1px solid rgba(251, 165, 50, 0.2);
	box-shadow: 0 1px 2px rgba(27, 27, 26, .04), 0 12px 28px -20px rgba(230, 138, 28, .15);
}

.jdpx-body .jdpx-metrics.mxp .mx-card:first-child .mx-grade {
	width: 60px;
	height: 60px;
	border-radius: 17px;
	font-size: 27px;
}

/* Stagger d'entrée : animation fluide */
.jdpx-body .jdpx-metrics.mxp .mx-card.fade:nth-child(1) {
	animation-delay: 0ms;
}
.jdpx-body .jdpx-metrics.mxp .mx-card.fade:nth-child(2) {
	animation-delay: 45ms;
}
.jdpx-body .jdpx-metrics.mxp .mx-card.fade:nth-child(3) {
	animation-delay: 90ms;
}
.jdpx-body .jdpx-metrics.mxp .mx-card.fade:nth-child(4) {
	animation-delay: 135ms;
}
.jdpx-body .jdpx-metrics.mxp .mx-card.fade:nth-child(5) {
	animation-delay: 180ms;
}

/* Survol : lift délicat, ombre renforcée */
@media (hover: hover) and (pointer: fine) {
	.jdpx-body .jdpx-metrics .mx-card:hover {
		transform: translateY(-2px);
		box-shadow: 0 1px 2px rgba(27, 27, 26, .04), 0 14px 28px -16px rgba(27, 27, 26, .34);
	}
}

/* Respect du mouvement réduit */
@media (prefers-reduced-motion: reduce) {
	.jdpx-body .jdpx-metrics.mxp .mx-card.fade {
		animation-delay: 0ms !important;
	}
}


/* ---------- outils ---------- */
/* ====== OUTILS AVANCÉS : Refonte éditoriale + corrections collisions ====== */

/* === ONGLETS : cohérence avec système design Analyse === */
.jdpx-body section[data-sec="outils"] .ot-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 20px 0 24px;
}

.jdpx-body section[data-sec="outils"] .ot-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line2);
  background: var(--surface);
  color: var(--t2);
  font: 600 13.5px Poppins,sans-serif;
  border-radius: 999px;
  padding: 10px 16px;
  cursor: pointer;
  transition: all .15s var(--ease);
}

.jdpx-body section[data-sec="outils"] .ot-tab:hover {
  color: var(--t1);
  transform: translateY(-1px);
}

.jdpx-body section[data-sec="outils"] .ot-tab.on {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(230,138,28,.25);
}

.jdpx-body section[data-sec="outils"] .ot-tab .ot-ic {
  font-size: 15px;
}

/* === PAGE DÉTAIL OUTIL : mise en page premium === */
.jdpx-body section[data-sec="outils"] .ot-page {
  padding: 28px 0;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.jdpx-body section[data-sec="outils"] .ot-page.card {
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(27,27,26,.04),0 12px 28px -20px rgba(27,27,26,.25);
}

.jdpx-body section[data-sec="outils"] .ot-page h3 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--t1);
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 11px;
}

.jdpx-body section[data-sec="outils"] .ot-page h3 .jdpx-ic {
  width: 22px;
  height: 22px;
  color: var(--accent);
  flex: none;
}

/* === BLOC METHOD : encadré pédagogique propre === */
.jdpx-body section[data-sec="outils"] .ot-method {
  margin-top: 26px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--surface2);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(16,20,29,.03);
}

.jdpx-body section[data-sec="outils"] .ot-method b {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--t1);
  display: block;
  margin-bottom: 8px;
  letter-spacing: -.01em;
}

.jdpx-body section[data-sec="outils"] .ot-method p {
  font-size: 13px;
  color: var(--t2);
  line-height: 1.6;
  margin: 0;
}

/* === BLOC TIPS : encadré conseils vert === */
.jdpx-body section[data-sec="outils"] .ot-tips {
  margin-top: 24px;
  padding: 18px;
  border-radius: 14px;
  background: rgba(15,165,115,.08);
  border: 1px solid rgba(15,165,115,.2);
  box-shadow: 0 1px 2px rgba(16,20,29,.03);
}

.jdpx-body section[data-sec="outils"] .ot-tips b {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--green);
  display: block;
  margin-bottom: 12px;
  letter-spacing: -.01em;
}

.jdpx-body section[data-sec="outils"] .ot-tips ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 0;
  margin: 0;
}

.jdpx-body section[data-sec="outils"] .ot-tips li {
  position: relative;
  font-size: 13px;
  color: var(--t2);
  line-height: 1.6;
  padding-left: 24px;
}

.jdpx-body section[data-sec="outils"] .ot-tips li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--green);
  font-weight: 800;
  font-size: 14px;
}

/* === SHADOWBAN : jauge + signaux === */
.jdpx-body section[data-sec="outils"] .sb-gauge {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 16px 0 20px;
  padding: 18px;
  background: var(--surface2);
  border-radius: 14px;
  border: 1px solid var(--line);
}

.jdpx-body section[data-sec="outils"] .sb-num {
  font-size: 42px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  flex: none;
}

.jdpx-body section[data-sec="outils"] .sb-num small {
  font-size: 16px;
  font-weight: 700;
  display: block;
  margin-top: 4px;
}

.jdpx-body section[data-sec="outils"] .sb-num.none {
  color: var(--green);
}

.jdpx-body section[data-sec="outils"] .sb-num.mid {
  color: var(--accent);
}

.jdpx-body section[data-sec="outils"] .sb-num.high {
  color: var(--red);
}

.jdpx-body section[data-sec="outils"] .sb-bar {
  flex: 1;
  height: 11px;
  border-radius: 99px;
  background: var(--line2);
  overflow: hidden;
}

.jdpx-body section[data-sec="outils"] .sb-bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  transition: width .8s var(--ease);
}

.jdpx-body section[data-sec="outils"] .sb-bar i.none {
  background: var(--green);
}

.jdpx-body section[data-sec="outils"] .sb-bar i.mid {
  background: var(--accent);
}

.jdpx-body section[data-sec="outils"] .sb-bar i.high {
  background: var(--red);
}

.jdpx-body section[data-sec="outils"] .deg {
  display: inline-flex;
  font-weight: 700;
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 999px;
  margin: 8px 0 14px;
}

.jdpx-body section[data-sec="outils"] .deg.none {
  background: rgba(15,165,115,.12);
  color: var(--green);
}

.jdpx-body section[data-sec="outils"] .deg.mid {
  background: rgba(230,138,28,.12);
  color: var(--accent);
}

.jdpx-body section[data-sec="outils"] .deg.high {
  background: rgba(224,51,94,.1);
  color: var(--red);
}

/* === PROTOOL-LIST : signaux avec puces accent === */
.jdpx-body section[data-sec="outils"] .protool-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  color: var(--t2);
  margin: 14px 0 0;
  padding: 0;
}

.jdpx-body section[data-sec="outils"] .protool-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.55;
}

.jdpx-body section[data-sec="outils"] .protool-list li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  margin-top: 5px;
  box-shadow: 0 0 0 3px rgba(230,138,28,.12);
}

/* === BARRES : meilleur moment + formats === */
.jdpx-body section[data-sec="outils"] .bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 18px 0;
}

.jdpx-body section[data-sec="outils"] .bars+.bars {
  margin-top: 20px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.jdpx-body section[data-sec="outils"] .bar-row {
  display: grid;
  grid-template-columns: 110px 1fr 70px;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

.jdpx-body section[data-sec="outils"] .bar-row .bl {
  color: var(--t2);
  font-weight: 600;
  line-height: 1.4;
  word-break: break-word;
}

.jdpx-body section[data-sec="outils"] .bar-row .bl small {
  color: var(--t3);
  font-weight: 500;
  font-size: 12px;
  display: block;
  margin-top: 2px;
}

.jdpx-body section[data-sec="outils"] .bar-row .bar {
  height: 10px;
  border-radius: 99px;
  background: var(--line2);
  overflow: hidden;
}

.jdpx-body section[data-sec="outils"] .bar-row .bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--accent);
  transition: width .7s var(--ease);
}

.jdpx-body section[data-sec="outils"] .bar-row .bar i.hot {
  background: var(--accent);
}

.jdpx-body section[data-sec="outils"] .bar-row .bv {
  text-align: right;
  color: var(--t2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
}

/* === VIRAUX : grille 3 colonnes + multiplicateur === */
.jdpx-body section[data-sec="outils"] .viral-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
  margin: 18px 0;
}

.jdpx-body section[data-sec="outils"] .viral {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface2);
  display: block;
  border: 1px solid var(--line);
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: transform .14s var(--ease),box-shadow .14s var(--ease);
}

.jdpx-body section[data-sec="outils"] .viral:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -4px rgba(16,20,29,.3);
}

.jdpx-body section[data-sec="outils"] .viral:active {
  transform: scale(.97);
}

.jdpx-body section[data-sec="outils"] .viral img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jdpx-body section[data-sec="outils"] .viral::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,transparent 50%,rgba(0,0,0,.6));
}

.jdpx-body section[data-sec="outils"] .viral .vmult {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  background: var(--accent);
  color: #fff;
  font: 800 12px Poppins,sans-serif;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(230,138,28,.35);
}

.jdpx-body section[data-sec="outils"] .viral .vcollab {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  font-size: 13px;
  background: rgba(0,0,0,.5);
  border-radius: 999px;
  padding: 2px 6px;
}

.jdpx-body section[data-sec="outils"] .viral .vst {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  color: #fff;
  font: 700 12px Poppins,sans-serif;
  white-space: nowrap;
}

.jdpx-body section[data-sec="outils"] .viral-common {
  font-size: 13px;
  color: var(--t2);
  background: rgba(15,165,115,.08);
  border: 1px solid rgba(15,165,115,.2);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 0 0 16px;
  line-height: 1.55;
}

.jdpx-body section[data-sec="outils"] .viral-common b {
  color: var(--t1);
  font-weight: 700;
}

.jdpx-body section[data-sec="outils"] .viral-hint {
  margin: 12px 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--t3);
}

/* === HARMONIE FEED : palette + score + jauge === */
.jdpx-body section[data-sec="outils"] .fh {
  margin: 18px 0 0;
  padding: 20px;
  background: var(--surface2);
  border-radius: 14px;
  border: 1px solid var(--line);
}

.jdpx-body section[data-sec="outils"] .fh-pal {
  display: flex;
  gap: 0;
  border-radius: 12px;
  overflow: hidden;
  height: 50px;
  border: 1px solid var(--line);
  margin-bottom: 16px;
}

.jdpx-body section[data-sec="outils"] .fh-sw {
  flex: 1;
}

.jdpx-body section[data-sec="outils"] .fh-top {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 12px;
}

.jdpx-body section[data-sec="outils"] .fh-num {
  font: 800 32px Poppins,sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--t1);
  line-height: 1;
}

.jdpx-body section[data-sec="outils"] .fh-num small {
  font-size: 13px;
  font-weight: 600;
  color: var(--t3);
  display: block;
  margin-top: 4px;
}

.jdpx-body section[data-sec="outils"] .fh-num.good {
  color: var(--green);
}

.jdpx-body section[data-sec="outils"] .fh-num.mid {
  color: var(--accent);
}

.jdpx-body section[data-sec="outils"] .fh-num.low {
  color: var(--red);
}

.jdpx-body section[data-sec="outils"] .fh-meta b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 2px;
}

.jdpx-body section[data-sec="outils"] .fh-meta span {
  font-size: 13px;
  color: var(--t2);
  line-height: 1.4;
}

.jdpx-body section[data-sec="outils"] .fh-bar {
  height: 10px;
  border-radius: 99px;
  background: var(--line2);
  overflow: hidden;
  margin-bottom: 14px;
}

.jdpx-body section[data-sec="outils"] .fh-bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  transition: width 1s var(--ease);
}

.jdpx-body section[data-sec="outils"] .fh-bar i.good {
  background: var(--green);
}

.jdpx-body section[data-sec="outils"] .fh-bar i.mid {
  background: var(--accent);
}

.jdpx-body section[data-sec="outils"] .fh-bar i.low {
  background: var(--red);
}

.jdpx-body section[data-sec="outils"] .fh-advice {
  font-size: 13px;
  color: var(--t2);
  line-height: 1.6;
  margin: 0;
}

/* === UTILITAIRES : note, protool-hl === */
.jdpx-body section[data-sec="outils"] .note {
  font-size: 12px;
  color: var(--t3);
  line-height: 1.6;
  margin: 12px 0 0;
}

.jdpx-body section[data-sec="outils"] .protool-hl {
  font-size: 13.5px;
  color: var(--t2);
  margin: 0 0 14px;
  line-height: 1.5;
}

.jdpx-body section[data-sec="outils"] .protool-hl b {
  color: var(--t1);
  font-weight: 700;
}

/* === FEED CARD : container pleine largeur === */
.jdpx-body section[data-sec="outils"] .feed-card {
  padding: 22px;
  margin-top: 20px;
  border: 1px solid rgba(124,92,224,.18);
  background: rgba(124,92,224,.04);
  border-radius: 14px;
}

.jdpx-body section[data-sec="outils"] .feed-card #jdpx-feed-btn {
  margin-top: 8px;
}

.jdpx-body section[data-sec="outils"] .feed-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.jdpx-body section[data-sec="outils"] .feed-head h3 {
  font-size: 17px;
  color: var(--t1);
  font-weight: 700;
}

.jdpx-body section[data-sec="outils"] .feed-head span {
  font-size: 12.5px;
  color: var(--t3);
}

.jdpx-body section[data-sec="outils"] .feed-lead {
  font-size: 13px;
  color: var(--t2);
  line-height: 1.6;
  margin: 0 0 12px;
  max-width: 65ch;
}

/* === RESPONSIVE : barres étroites !== collisions === */
@media (max-width: 640px) {
  .jdpx-body section[data-sec="outils"] .bar-row {
    grid-template-columns: 80px 1fr 60px;
    gap: 8px;
  }

  .jdpx-body section[data-sec="outils"] .viral-grid {
    grid-template-columns: repeat(2,1fr);
  }

  .jdpx-body section[data-sec="outils"] .fh {
    padding: 16px;
  }

  .jdpx-body section[data-sec="outils"] .bars {
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jdpx-body section[data-sec="outils"] .sb-bar i,
  .jdpx-body section[data-sec="outils"] .bar-row .bar i,
  .jdpx-body section[data-sec="outils"] .fh-bar i {
    transition: none;
  }

  .jdpx-body section[data-sec="outils"] .ot-tab:hover {
    transform: none;
  }

  .jdpx-body section[data-sec="outils"] .viral:hover {
    transform: none;
  }
}


/* ---------- commandes ---------- */
/* ============================================================
   Mise à niveau design system éditorial CRÈME + fix collisions (v0.1.51)
   Scope : .jdpx-body (réutilise tokens + patterns page Analyse)
   VALIDÉ : zéro gradient, motion <300ms, spécificité OK, FR sans cadratin
   ============================================================ */

/* Titre et lead de la section commandes */
.jdpx-body .sec-title {
	color: var(--t1);
	font: 800 24px / 1.12 Poppins, sans-serif;
	letter-spacing: -0.025em;
	margin-bottom: 6px;
}

.jdpx-body .sec-lead {
	color: var(--t3);
	font-size: 13.5px;
	font-weight: 400;
	margin-bottom: 24px;
	max-width: 70ch;
	line-height: 1.5;
}

/* Conteneur principal : réutilise .card premium */
.jdpx-body .card.orders {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 0;
	overflow: hidden;
}

/* Rangée commande : layout + espacements harmonieux */
.jdpx-body .order {
	display: grid;
	grid-template-columns: 44px 1.4fr 1fr 2fr 110px;
	gap: 16px;
	align-items: center;
	padding: 18px 24px;
	border-bottom: 1px solid var(--line);
	font-size: 14px;
	transition: background-color 0.2s var(--ease);
}

.jdpx-body .order:last-child {
	border-bottom: 0;
}

.jdpx-body .order:hover {
	background-color: rgba(27, 27, 26, 0.03);
}

/* Icône de statut : badge soigné sans emoji brut */
.jdpx-body .order .ic {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	font-size: 18px;
	flex-shrink: 0;
	/* Les émojis sont temporairement acceptés en attendant sprite SVG ;
	   la bgcolor est posée en JS inline (rgba orange 14% = var(--accent) alpha .14) */
}

/* Libellé commande */
.jdpx-body .order .name {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	overflow: hidden;
}

.jdpx-body .order .name b {
	display: block;
	font-weight: 600;
	color: var(--t1);
	font-size: 14.5px;
	word-break: break-word;
}

.jdpx-body .order .name span {
	font-size: 13px;
	color: var(--t3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Quantité livrée */
.jdpx-body .order .qtycol {
	text-align: right;
	color: var(--t2);
	font-weight: 500;
	font-size: 14px;
	flex-shrink: 0;
}

/* Colonne progression (barre + pct) */
.jdpx-body .order .progcol {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Barre de progression : APLAT orange, zéro gradient (Emil Kowalski) */
.jdpx-body .prog {
	height: 8px;
	border-radius: 99px;
	background: var(--line);
	overflow: hidden;
	position: relative;
}

.jdpx-body .prog i {
	display: block;
	height: 100%;
	border-radius: 99px;
	background: var(--accent);
	position: relative;
	transition: width 0.6s var(--ease);
}

/* Animation de brillance : opacity/transform uniquement, pas de gradient */
.jdpx-body .prog i::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.3);
	opacity: 0;
	animation: jdpx-shine-pulse 0.6s var(--ease) infinite;
}

@keyframes jdpx-shine-pulse {
	0%, 100% { opacity: 0; }
	50% { opacity: 0.6; }
}

/* Texte pct : layout clean */
.jdpx-body .order .pct {
	font-size: 12.5px;
	color: var(--t3);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.jdpx-body .order .pct span {
	font-weight: 500;
}

/* Pastille statut : élégante comme .an-pill */
.jdpx-body .status {
	font-size: 12px;
	font-weight: 700;
	padding: 8px 16px;
	border-radius: 999px;
	text-align: center;
	flex-shrink: 0;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	transition: all 0.2s var(--ease);
	white-space: nowrap;
}

.jdpx-body .status.run {
	background: rgba(45, 127, 240, 0.1);
	color: var(--blue);
	border: 1px solid rgba(45, 127, 240, 0.2);
}

.jdpx-body .status.done {
	background: rgba(15, 165, 115, 0.12);
	color: var(--green);
	border: 1px solid rgba(15, 165, 115, 0.2);
}

/* État vide : réutilise le pattern Analyse */
.jdpx-body .sec-empty {
	text-align: center;
	padding: 40px 24px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 18px;
	color: var(--t1);
}

.jdpx-body .sec-empty .ico {
	font-size: 44px;
	display: block;
	margin-bottom: 16px;
}

.jdpx-body .sec-empty h3 {
	font-size: 17px;
	font-weight: 700;
	color: var(--t1);
	margin-bottom: 8px;
}

.jdpx-body .sec-empty p {
	font-size: 14px;
	color: var(--t3);
	line-height: 1.6;
}

/* Responsive : collapse sur mobile */
@media (max-width: 900px) {
	.jdpx-body .order {
		grid-template-columns: 44px 1fr 90px;
		gap: 12px;
		padding: 16px 18px;
	}
	
	.jdpx-body .order .name span {
		display: none;
	}
	
	.jdpx-body .order .qtycol {
		display: none;
	}
	
	.jdpx-body .order .progcol {
		grid-column: 1 / -1;
	}
}

/* Réduit animations sur préférence utilisateur */
@media (prefers-reduced-motion: reduce) {
	.jdpx-body .order {
		transition: none;
	}
	
	.jdpx-body .prog i,
	.jdpx-body .status {
		transition: none;
	}
	
	.jdpx-body .prog i::after {
		animation: none;
		opacity: 0;
	}
}


/* ---------- abonnement ---------- */
/* CORRECTION INTÉGRALE : tokens réels + zéro gradient + spécificité claire + sélecteurs scoped */

/* Abonnement (plans) : utilise les tokens EXISTANTS du système */
.jdpx-body section[data-sec="abonnement"]{padding:34px 0}
.jdpx-body section[data-sec="abonnement"] .sec-head{margin-bottom:24px}
.jdpx-body section[data-sec="abonnement"] h2{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.2;color:var(--t1)}
.jdpx-body section[data-sec="abonnement"] .sec-lead{font-size:13.5px;color:var(--t3);margin-top:2px;margin-bottom:24px;line-height:1.5;max-width:64ch}

/* Plans grille */
.jdpx-body section[data-sec="abonnement"] .plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;max-width:780px;margin:0 auto}

/* Carte plan : fond OPAQUE surface, pas de gradient */
.jdpx-body section[data-sec="abonnement"] .plan{padding:30px;display:flex;flex-direction:column;gap:18px;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 1px 2px rgba(27,27,26,.04),0 12px 28px -20px rgba(27,27,26,.25);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}

.jdpx-body section[data-sec="abonnement"] .plan:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(16,20,29,.05),0 18px 36px -16px rgba(16,20,29,.35)}

/* Plan Pro surligné : background surface2, border accent opacity */
.jdpx-body section[data-sec="abonnement"] .plan.pro{background:var(--surface2);border-color:rgba(230,138,28,.35);border-width:1.5px}

/* Titre plan */
.jdpx-body section[data-sec="abonnement"] .plan h3{font-size:18px;font-weight:700;color:var(--t1);margin-bottom:2px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* Prix */
.jdpx-body section[data-sec="abonnement"] .plan .pr{font-size:38px;font-weight:800;color:var(--t1);line-height:1;font-variant-numeric:tabular-nums;margin:4px 0}

.jdpx-body section[data-sec="abonnement"] .plan .pr small{display:block;font-size:13.5px;color:var(--t3);font-weight:600;margin-top:4px}

/* Liste features */
.jdpx-body section[data-sec="abonnement"] .plan ul{list-style:none;display:grid;gap:10px;font-size:13.5px;color:var(--t2);margin:8px 0}

.jdpx-body section[data-sec="abonnement"] .plan li{display:flex;gap:10px;align-items:flex-start;line-height:1.5}

.jdpx-body section[data-sec="abonnement"] .plan li .ok{color:var(--green);font-weight:800;flex:none}

.jdpx-body section[data-sec="abonnement"] .plan li .ko{color:var(--t3);flex:none}

.jdpx-body section[data-sec="abonnement"] .plan li b{font-weight:700;color:var(--t1)}

/* CTA button */
.jdpx-body section[data-sec="abonnement"] .plan .jdpx-btn{width:100%;margin-top:8px}

/* Badge Pro chip */
.jdpx-body section[data-sec="abonnement"] .badge-pro{font-size:11px;font-weight:700;letter-spacing:.6px;padding:4px 10px;border-radius:999px;background:rgba(230,138,28,.12);color:var(--accent);border:1px solid rgba(251,165,50,.3)}

/* Statut Pro actif : fond OPAQUE, pas de gradient */
.jdpx-body section[data-sec="abonnement"] .pro-status{display:flex;gap:16px;align-items:center;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 1px 2px rgba(27,27,26,.04),0 12px 28px -20px rgba(27,27,26,.25);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}

.jdpx-body section[data-sec="abonnement"] .pro-status:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(16,20,29,.05),0 18px 36px -16px rgba(16,20,29,.35)}

.jdpx-body section[data-sec="abonnement"] .pro-status .emoji{font-size:30px;flex:none;line-height:1}

.jdpx-body section[data-sec="abonnement"] .pro-status b{display:block;font-size:16px;font-weight:700;color:var(--t1);margin-bottom:4px}

.jdpx-body section[data-sec="abonnement"] .pro-status span{font-size:13.5px;color:var(--t2);line-height:1.5}

/* Responsive */
@media(max-width:880px){
	.jdpx-body section[data-sec="abonnement"] .plans{grid-template-columns:1fr}
}

/* Respect reduced-motion */
@media(prefers-reduced-motion:reduce){
	.jdpx-body section[data-sec="abonnement"] .plan,
	.jdpx-body section[data-sec="abonnement"] .pro-status{
		transition:none!important;
		transform:none!important
	}
}


/* ---------- chat ---------- */
/* --- WIDGET CHAT : Editorial polish + design system alignment --- */

/* 1. Keyframe animation : fix couleur rose → orange (CRITICAL MISSING) */
@keyframes jdpx-chat-breathe{
	0%,100%{box-shadow:0 12px 34px rgba(230,138,28,.4)}
	50%{box-shadow:0 14px 42px rgba(230,138,28,.62)}
}

/* 2. Toggle button : passer du gradient à l'orange APLAT per design system */
.jdpx-body .jdpx-chat-toggle {
	background: var(--accent);
	box-shadow: 0 12px 34px rgba(230, 138, 28, .45);
}
.jdpx-body .jdpx-chat-toggle:hover {
	box-shadow: 0 16px 46px rgba(230, 138, 28, .55);
}

/* 3. Label "IA JDP + dot" prevent wrap & improve vertical centering */
.jdpx-body .jdpx-chat-head .who b {
	white-space: nowrap;
	font-size: 14px;
	font-weight: 700;
}

/* 4. Dot vert : ensure perfect vertical alignment (inline-block + flex-baseline) */
.jdpx-body .jdpx-chat-head .dot {
	display: inline-block;
	flex: none;
	vertical-align: middle;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--green);
	box-shadow: 0 0 0 0 rgba(15, 165, 115, .5);
	animation: jdpx-pulse 2s infinite;
}

/* 5. Teaser lock-cta button : full width with proper spacing */
.jdpx-body .jdpx-chat-teaser .lock-cta {
	display: block;
	width: 100%;
	margin-top: 12px;
	padding: 11px 20px;
	text-align: center;
	white-space: nowrap;
}

/* 6. Teaser body text : improve contrast on semi-transparent background */
.jdpx-body .jdpx-chat-teaser {
	background: rgba(255, 255, 255, .95);
	color: var(--t1);
	font-size: 13px;
	line-height: 1.6;
}
.jdpx-body .jdpx-chat-teaser b {
	display: block;
	color: var(--t1);
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 8px;
}

/* 7. Messages : improve readability on narrow panel */
.jdpx-body .jdpx-msg {
	max-width: 85%;
	padding: 11px 14px;
	font-size: 13px;
	line-height: 1.55;
	word-break: break-word;
}
.jdpx-body .jdpx-msg.bot {
	background: var(--surface);
	border: 1px solid var(--line);
	color: var(--t1);
}
.jdpx-body .jdpx-msg.me {
	background: var(--accent);
	color: #fff;
}

/* 8. Chat chips : expand padding for better touchability */
.jdpx-body .jdpx-chat-chips button {
	padding: 8px 14px;
	font-size: 12px;
	font-weight: 600;
	border: 1px solid var(--line2);
	background: rgba(255, 255, 255, .75);
	color: var(--t2);
	border-radius: 999px;
	cursor: pointer;
	transition: border-color .15s, color .15s;
}
.jdpx-body .jdpx-chat-chips button:hover {
	border-color: var(--accent);
	color: var(--accent);
}

/* 9. Log/scroll area : proper flex sizing */
.jdpx-body .jdpx-chat-log {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* 10. Form : proper spacing & alignment */
.jdpx-body .jdpx-chat-form {
	display: flex;
	gap: 8px;
	padding: 12px;
	border-top: 1px solid var(--line);
	background: var(--surface2);
}
.jdpx-body .jdpx-chat-form input {
	flex: 1;
	border: 1px solid var(--line2);
	border-radius: 12px;
	padding: 11px 13px;
	font: 400 13px Poppins, system-ui, sans-serif;
	color: var(--t1);
	background: #fff;
}
.jdpx-body .jdpx-chat-form input:focus {
	border-color: var(--accent);
	outline: 0;
}
.jdpx-body .jdpx-chat-form button {
	flex: none;
	width: 44px;
	padding: 0;
	font-size: 17px;
	border-radius: 12px;
}

/* 11. Quota : improve legibility & link color */
.jdpx-body .jdpx-chat-quota {
	font-size: 11px;
	color: var(--t3);
	text-align: center;
	padding: 10px 12px 0;
	line-height: 1.4;
}
.jdpx-body .jdpx-chat-quota a {
	color: var(--accent);
	font-weight: 600;
	text-decoration: none;
}

/* 12. Typing indicator : match message style */
.jdpx-body .jdpx-typing {
	display: inline-flex;
	gap: 4px;
	padding: 11px 14px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 14px;
	border-bottom-left-radius: 5px;
}
.jdpx-body .jdpx-typing i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--t3);
	animation: jdpx-bounce 1.2s infinite;
}

/* 13. Avatar (IA emoji) : ensure it stands out */
.jdpx-body .jdpx-chat-ava {
	width: 32px;
	height: 32px;
	border-radius: 10px;
	background: var(--accent);
	display: grid;
	place-items: center;
	font-size: 16px;
	flex: none;
	color: #fff;
}

/* 14. Close button : better hover state */
.jdpx-body .jdpx-chat-close {
	margin-left: auto;
	border: 0;
	background: transparent;
	color: var(--t3);
	font-size: 16px;
	cursor: pointer;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	transition: background .15s, color .15s;
	display: flex;
	align-items: center;
	justify-content: center;
}
.jdpx-body .jdpx-chat-close:hover {
	background: var(--surface2);
	color: var(--t1);
}

/* 15. Teaser close X button : prevent text selection */
.jdpx-body .jdpx-chat-teaser .teaser-x {
	user-select: none;
	-webkit-user-select: none;
}

/* 16. Panel : remove glass, use opaque premium look */
.jdpx-body .jdpx-chat-panel {
	background: var(--surface);
	border: 1px solid var(--line);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
.jdpx-body .jdpx-chat-panel::backdrop {
	background: transparent;
}

/* 17. Head section : match page style */
.jdpx-body .jdpx-chat-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--line);
	background: var(--surface2);
}
.jdpx-body .jdpx-chat-head .who {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
	min-width: 0;
}
.jdpx-body .jdpx-chat-head .sub {
	font-size: 12px;
	color: var(--t3);
	margin-top: 2px;
}


/* ---------- modals ---------- */
/* ========== MODALE VIRALE + STORIES : level-up éditorial (CORRIGÉ) ========== */

/* Scrim modal : glassmorphism OK (backdrop-filter sans gradient bg) */
.jdpx-body .vmodal-scrim {
	position: absolute;
	inset: 0;
	background: rgba(16, 20, 29, .5);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	animation: jdpx-fade .2s var(--ease);
	z-index: 1;
}

/* Carte modale : padding, ombre, radius conformes design system */
.jdpx-body .vmodal-card {
	position: relative;
	z-index: 2;
	width: min(640px, 100%);
	max-height: 90vh;
	overflow-y: auto;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 20px;
	padding: 26px;
	box-shadow: 0 30px 80px -20px rgba(16, 20, 29, .5);
	animation: jdpx-pop .26s var(--ease);
}

/* Bouton fermer : radius, hover, cursor OK */
.jdpx-body .vmodal-x {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	border: 1px solid var(--line2);
	background: var(--surface);
	color: var(--t2);
	font-size: 14px;
	cursor: pointer;
	transition: background .15s, color .15s;
}

.jdpx-body .vmodal-x:hover {
	background: var(--surface2);
	color: var(--t1);
}

/* VIRAL DETAIL : Hero redesign */

/* Hero container : flex wrap, gap cohérent 20px */
.jdpx-body .vd-hero {
	display: flex;
	gap: 20px;
	margin-bottom: 16px;
}

/* Médias : placeholder solide (vs gradient), radius 16px */
.jdpx-body .vd-hero .vd-media {
	flex: none;
	width: 140px;
	aspect-ratio: 1;
	border-radius: 16px;
	overflow: hidden;
	position: relative;
	background: var(--surface2);
	border: 1px solid var(--line);
}

.jdpx-body .vd-hero .vd-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.jdpx-body .vd-noimg {
	display: grid;
	place-items: center;
	height: 100%;
	font-size: 48px;
	line-height: 1;
}

/* Format badge : position, font, contrast */
.jdpx-body .vd-fmt {
	position: absolute;
	left: 8px;
	bottom: 8px;
	font: 700 10.5px Poppins, sans-serif;
	color: #fff;
	background: rgba(0, 0, 0, .62);
	padding: 4px 10px;
	border-radius: 999px;
	z-index: 2;
}

/* Hero-right : flex column, min-width 0, gap serré 10px */
.jdpx-body .vd-hero-r {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

/* Multiplicateur : ACCENT SOLIDE (pas gradient), inline-flex, align-baseline */
.jdpx-body .vd-mult {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	align-self: flex-start;
	background: var(--accent);
	color: #fff;
	font: 800 22px Poppins, sans-serif;
	font-variant-numeric: tabular-nums;
	padding: 8px 16px;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(230, 138, 28, .22);
}

.jdpx-body .vd-mult small {
	font-size: 12px;
	font-weight: 600;
	opacity: .85;
}

/* When (date/heure) : pill serré, icône 14px */
.jdpx-body .vd-when {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: var(--t2);
	font-weight: 600;
	background: var(--surface2);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 7px 14px;
	white-space: nowrap;
}

.jdpx-body .vd-when .jdpx-ic {
	width: 14px;
	height: 14px;
	color: var(--t3);
	flex: none;
}

/* Stats boxes : 4 colonnes, gap 8px, min-width 64px */
.jdpx-body .vd-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}

.jdpx-body .vd-stat {
	flex: 1;
	min-width: 60px;
	background: var(--surface2);
	border: 1px solid var(--line);
	border-radius: 11px;
	padding: 10px;
	text-align: center;
}

.jdpx-body .vd-stat b {
	display: block;
	font-size: 16px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--t1);
}

.jdpx-body .vd-stat span {
	font-size: 11px;
	color: var(--t3);
	display: block;
	margin-top: 4px;
}

/* Panel "Pourquoi ça a percé" : padding nettoyé, ombre légère */
.jdpx-body .vd-panel {
	background: var(--surface);
	border: 1px solid var(--line2);
	border-radius: 14px;
	padding: 16px;
	box-shadow: 0 1px 3px rgba(16, 20, 29, .04);
	margin-top: 16px;
}

.jdpx-body .vd-panel .vd-h {
	font-size: 14px;
	font-weight: 800;
	color: var(--t1);
	margin: 0 0 12px;
	padding: 0;
}

/* Facteurs de viralité : liste propre, puces icônes */
.jdpx-body .vd-factors {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0;
	margin: 0;
}

.jdpx-body .vd-fct {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	padding: 14px 0;
	border-bottom: 1px solid var(--line);
}

.jdpx-body .vd-fct:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

/* Icône facteur : puce 34px carrée, flex pour l'icône */
.jdpx-body .vf-ic {
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--surface2);
	color: var(--t2);
}

.jdpx-body .vf-ic .jdpx-ic {
	width: 18px;
	height: 18px;
}

/* Facteur bon (vert clair, icône verte) */
.jdpx-body .vd-fct.good .vf-ic {
	background: rgba(15, 165, 115, .12);
	color: var(--green);
}

/* Facteur neutre (ambre clair, icône accent) */
.jdpx-body .vd-fct.neutral .vf-ic {
	background: rgba(230, 138, 28, .12);
	color: var(--accent);
}

/* Texte du facteur : 13px, line-height 1.55, top padding pour align icône */
.jdpx-body .vf-t {
	font-size: 13.5px;
	color: var(--t2);
	line-height: 1.55;
	padding-top: 2px;
}

.jdpx-body .vf-t b {
	color: var(--t1);
	font-weight: 600;
}

/* Légende (caption) : 4 lignes max, no-wrap fix, texte pré-séparé */
.jdpx-body .vd-h {
	font-size: 14px;
	font-weight: 800;
	color: var(--t1);
	margin: 18px 0 12px;
	padding: 0;
}

.jdpx-body .vd-caption {
	font-size: 13px;
	color: var(--t2);
	line-height: 1.6;
	white-space: pre-line;
	background: var(--surface2);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 12px 14px;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Chips (hashtags, tags, collabs) */
.jdpx-body .chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

.jdpx-body .chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--t1);
	background: var(--surface2);
	border: 1px solid var(--line2);
	border-radius: 999px;
	padding: 7px 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Hashtags en bleu */ 
.jdpx-body .chip.hash {
	color: var(--blue);
	font-weight: 700;
	background: rgba(45, 127, 240, .1);
	border-color: rgba(45, 127, 240, .28);
}

/* Collab avec avatar + badge vérifié */
.jdpx-body .chip.collab {
	gap: 7px;
	padding-left: 8px;
	padding-right: 13px;
}

.jdpx-body .chip.collab img {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}

.jdpx-body .chip .vbadge {
	color: var(--blue);
}

/* Lien "Voir la publication" */
.jdpx-body .vd-link {
	display: inline-block;
	margin-top: 20px;
	width: 100%;
}

/* STORIES MODAL */

/* Titre stories modal */
.jdpx-body .st-h {
	font-size: 17px;
	font-weight: 800;
	color: var(--t1);
	margin: 0 0 14px;
	line-height: 1.2;
}

/* Grille stories : 96px carré, gap cohérent 10px */
.jdpx-body .st-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 10px;
	margin: 16px 0;
}

/* Carte story : aspect 9/16, border accent, transitions */
.jdpx-body .st-card {
	position: relative;
	aspect-ratio: 9 / 16;
	border-radius: 12px;
	overflow: hidden;
	border: 2px solid var(--line2);
	background: var(--surface2);
	cursor: pointer;
	padding: 0;
	transition: border-color .16s var(--ease), transform .14s var(--ease), box-shadow .16s var(--ease);
}

@media (hover: hover) {
	.jdpx-body .st-card:hover {
		box-shadow: 0 4px 12px rgba(16, 20, 29, .15);
	}
}

.jdpx-body .st-card:active {
	transform: scale(.96);
}

.jdpx-body .st-card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Overlay sombre sur story (pour lisibilité badges) */
.jdpx-body .st-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .55));
	z-index: 1;
	pointer-events: none;
}

/* Story sélectionnée : border accent */
.jdpx-body .st-card.on {
	border-color: var(--accent2);
	box-shadow: 0 0 0 1px var(--accent2), 0 4px 12px rgba(251, 165, 50, .25);
}

/* Checkbox story */
.jdpx-body .st-check {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .25);
	border: 2px solid #fff;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 800;
	transition: background .15s, border-color .15s;
}

.jdpx-body .st-card.on .st-check {
	background: var(--accent);
	border-color: var(--accent);
	box-shadow: 0 2px 6px rgba(230, 138, 28, .35);
}

/* Badge expiration story */
.jdpx-body .st-exp {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
	font: 700 10px Poppins, sans-serif;
	color: #fff;
	background: rgba(0, 0, 0, .62);
	padding: 4px 8px;
	border-radius: 999px;
}

/* Badge allocation (vues réparties) */
.jdpx-body .st-alloc {
	position: absolute;
	left: 8px;
	bottom: 8px;
	z-index: 2;
	font: 800 11px Poppins, sans-serif;
	color: #fff;
	background: var(--accent);
	padding: 4px 10px;
	border-radius: 999px;
	box-shadow: 0 2px 6px rgba(230, 138, 28, .35);
}

/* Contrôles (sélecteurs) */
.jdpx-body .st-controls {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin: 12px 0 16px;
	align-items: flex-end;
}

.jdpx-body .st-field {
	font-size: 12.5px;
	color: var(--t2);
	font-weight: 600;
	display: flex;
	flex-direction: column;
	gap: 7px;
	white-space: nowrap;
}

.jdpx-body .st-field select {
	border: 1px solid var(--line2);
	border-radius: 10px;
	padding: 10px 12px;
	font: 600 13.5px Poppins, sans-serif;
	color: var(--t1);
	background: var(--surface);
	cursor: pointer;
	transition: border-color .15s;
}

.jdpx-body .st-field select:focus {
	outline: 2px solid rgba(230, 138, 28, .4);
	border-color: var(--accent);
}

/* Résumé (compte + prix) */
.jdpx-body .st-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 14px 16px;
	border-radius: 13px;
	background: var(--surface2);
	border: 1px solid var(--line);
	margin-bottom: 14px;
	font-size: 13.5px;
	color: var(--t2);
}

.jdpx-body .st-summary b {
	color: var(--t1);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

/* Prix : strike si Pro */
.jdpx-body .st-price {
	font-size: 16px;
	font-weight: 700;
	color: var(--accent);
}

.jdpx-body .st-price s {
	color: var(--t3);
	font-size: 13px;
	font-weight: 600;
	margin-right: 6px;
	text-decoration: line-through;
}

/* Bouton commander */
.jdpx-body .st-buy {
	width: 100%;
}

/* Note info modal */
.jdpx-body .note-info {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 14px 16px;
	border-radius: 14px;
	background: rgba(45,127,240,.05);
	border: 1px solid rgba(45, 127, 240, .18);
	margin-bottom: 14px;
}

.jdpx-body .note-info .ni-ico {
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	background: rgba(45, 127, 240, .12);
}

.jdpx-body .note-info p {
	font-size: 12.5px;
	color: var(--t2);
	line-height: 1.55;
	margin: 0;
}

.jdpx-body .note-info b {
	color: var(--t1);
	font-weight: 600;
}

/* Empty state (pas de stories) */
.jdpx-body .sec-empty {
	text-align: center;
	padding: 48px 24px;
	color: var(--t3);
}

.jdpx-body .sec-empty .ico {
	font-size: 48px;
	display: block;
	margin-bottom: 14px;
	line-height: 1;
}

.jdpx-body .sec-empty h3 {
	font-size: 18px;
	color: var(--t1);
	margin-bottom: 8px;
}

.jdpx-body .sec-empty p {
	font-size: 13.5px;
	max-width: 440px;
	margin: 0 auto;
	line-height: 1.55;
}

/* Responsive : stories grid serré sur mobile */
@media (max-width: 640px) {
	.jdpx-body .vmodal-card {
		padding: 20px;
		border-radius: 16px;
	}
	
	.jdpx-body .vd-hero {
		flex-direction: column;
		gap: 16px;
	}
	
	.jdpx-body .vd-hero .vd-media {
		width: 100%;
		aspect-ratio: 16 / 10;
	}
	
	.jdpx-body .vd-stats {
		gap: 6px;
	}
	
	.jdpx-body .vd-stat {
		min-width: 48px;
		padding: 8px;
		font-size: 11px;
	}
	
	.jdpx-body .vd-stat b {
		font-size: 14px;
	}
	
	.jdpx-body .st-grid {
		grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
		gap: 8px;
	}
	
	.jdpx-body .st-controls {
		gap: 10px;
		flex-direction: column;
		width: 100%;
	}
	
	.jdpx-body .st-field {
		width: 100%;
	}
	
	.jdpx-body .st-field select {
		width: 100%;
	}
	
	.jdpx-body .st-summary {
		flex-direction: column;
		align-items: flex-start;
		padding: 12px 14px;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.jdpx-body .vmodal-card {
		animation: none;
	}
	
	.jdpx-body .vmodal-scrim {
		animation: none;
	}
	
	.jdpx-body .st-card,
	.jdpx-body .vd-when,
	.jdpx-body .vd-mult {
		transition: none;
	}
}


/* ---------- concurrents_strat ---------- */
/* Corrections design editorial zone Concurrents + Comparateur
   Emil Kowalski + impeccable rules. Tous les changements scopés .jdpx-body pour battre spécificité. */

/* 1. STRATÉGIE CONCURRENTS : retrait gradient, fond uniforme crème */
.jdpx-body .acc-strat {
  background: var(--cr2);
  border: 1px solid var(--hair);
}

/* 2. TABLE COMPARATEUR : meilleure lisibilité des en-têtes + labels */
.jdpx-body .cmp-table th {
  background: var(--cr2);
  color: var(--ink2);
}

.jdpx-body .cmp-table td.cmp-lbl {
  color: var(--ink);
  font-weight: 700;
}

/* 3. INFOS COMPTE COMPARÉ : meilleur contraste sur fond blanc */
.jdpx-body .cmp-party span {
  color: var(--ink2);
}

/* 4. RECOS CONCURRENTS : retrait gradient, fond uniforme */
.jdpx-body .cmp-reco-it.sell {
  background: var(--cr2);
  border: 1px solid var(--hair);
}

/* 5. ESPACEMENTS COHÉRENTS (grille 8px, norme 16px) */
.jdpx-body .strat-axes {
  gap: 16px;
}

/* 6. PROTECTION CONTRE LES DÉBORDEMENTS LABELS */
.jdpx-body .cmp-th-n {
  max-width: 140px;
}

.jdpx-body .cmp-own-lbl select {
  max-width: 220px;
}

/* 7. SYNTHÈSE STRATÉGIE : clarté visuelle, spacing norme */
.jdpx-body .strat-syn {
  line-height: 1.6;
  margin-bottom: 16px;
}

.jdpx-body .strat-axe {
  padding: 12px 14px;
  background: var(--pap);
  border: 1px solid var(--hair);
}

/* 8. CTA STRATÉGIE : clarté visuelle */
.jdpx-body .strat-head {
  color: var(--ink);
  margin-bottom: 12px;
}

/* 9. AXES STRATÉGIE : en-tête vert accent pour « Exploiter » */
.jdpx-body .sa-x {
  color: var(--ink);
  border-top: 1px solid var(--hair);
  padding-top: 10px;
  margin-top: 9px;
}

/* fix collision rapport : delta long passait sous la sparkline absolue (white-space:nowrap) */
.jdpx-body .kpi .delta{white-space:normal;padding-right:74px;line-height:1.4}

/* ===== Contraste : cartes internes blanches détachées du panneau crème ===== */
.jdpx-body .an-diag,
.jdpx-body .an-idea,
.jdpx-body .an-lev,
.jdpx-body .acc-kpis .kpi-c,
.jdpx-body .acc-viz .viz-card,
.jdpx-body .an-block,
.jdpx-body .an-panel{box-shadow:0 1px 2px rgba(27,27,26,.03),0 8px 20px -16px rgba(27,27,26,.22)}

/* ===== Tableau historique (Mes comptes + Concurrents) : conteneur bordé éditorial ===== */
.jdpx-body .acc-table-wrap{border:1px solid var(--line2);border-radius:12px;overflow:hidden;background:var(--pap);box-shadow:0 1px 2px rgba(27,27,26,.04);margin-top:18px}
.jdpx-body .acc-table{border-collapse:collapse;margin:0;width:100%}
.jdpx-body .acc-table th{background:var(--cr2);text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--ink2);padding:12px 14px;border-bottom:1.5px solid var(--line2);font-variant-numeric:tabular-nums;white-space:nowrap}
.jdpx-body .acc-table td{padding:12px 14px;font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums;border-bottom:1px solid var(--hair);background:transparent;white-space:nowrap}
.jdpx-body .acc-table tbody tr:nth-child(even) td{background:rgba(237,234,225,.4)}
.jdpx-body .acc-table tbody tr:last-child td{border-bottom:0}
.jdpx-body .acc-table .acc-d{display:inline-block;margin-left:7px;font-size:10.5px;font-weight:700;white-space:nowrap}
.jdpx-body .acc-table .acc-d.up{color:var(--green)}
.jdpx-body .acc-table .acc-d.dn{color:var(--red)}

/* ===== Titres de page agrandis (échelle éditoriale, demande Sofian) ===== */
.jdpx-body .sec-title{font:800 clamp(30px,3.4vw,40px)/1.1 Poppins,sans-serif;letter-spacing:-.025em;color:var(--ink);margin-bottom:10px}
.jdpx-body .sec-head h2,
.jdpx-body section:has(#jdpx-results) .sec-head h2{font:800 clamp(22px,2.2vw,28px)/1.15 Poppins,sans-serif;letter-spacing:-.022em;color:var(--ink);margin:0}
.jdpx-body .sec-lead{font-size:14.5px;margin-bottom:26px;max-width:66ch}

/* ===== Contraste décisif (demande Sofian) : cartes blanches sur page beige ===== */
/* Page Analyse : on supprime le conteneur crème redondant -> cartes blanches directement sur le beige */
.jdpx-body .an-stage{background:none;border:0;box-shadow:none;padding:0;margin-bottom:26px}
.jdpx-body .an-stage--ideas{margin-top:30px}
/* Carte compte = carte blanche franche sur le beige */
.jdpx-body .acc-card{background:#FFFFFF}
/* Sous-boîtes internes des cartes compte : crème léger pour ressortir sur le blanc */
.jdpx-body .acc-kpis .kpi-c,
.jdpx-body .acc-viz .viz-card{background:var(--cr2);border-color:#EAE5DB}
/* le tableau interne garde son conteneur blanc bordé, en-tête crème (déjà --cr2) */

/* ===== Boîte de confirmation (suppression de compte, etc.) ===== */
.jdpx-confirm{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;background:rgba(27,27,26,.42);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0;transition:opacity .2s var(--ease)}
.jdpx-confirm.in{opacity:1}
.jdpx-confirm-box{width:min(420px,100%);background:var(--pap);border:1px solid var(--hair);border-radius:20px;padding:28px;text-align:center;box-shadow:0 24px 60px -20px rgba(27,27,26,.5);transform:scale(.96);transition:transform .2s var(--ease)}
.jdpx-confirm.in .jdpx-confirm-box{transform:scale(1)}
.jc-ic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;background:rgba(224,51,94,.1);color:var(--red)}
.jc-ic .an-ico{width:24px;height:24px}
.jdpx-confirm-box h3{font:800 19px Poppins,sans-serif;color:var(--ink);margin-bottom:8px;letter-spacing:-.01em}
.jdpx-confirm-box p{font-size:14px;color:var(--ink2);line-height:1.55;margin-bottom:22px}
.jc-actions{display:flex;gap:10px;justify-content:center}
.jc-actions .jdpx-btn{min-width:120px}
.jdpx-btn.jc-ok.danger{background:var(--red);color:#fff;box-shadow:0 6px 18px rgba(224,51,94,.28)}
@media(hover:hover){.jdpx-btn.jc-ok.danger:hover{box-shadow:0 10px 26px rgba(224,51,94,.4)}}
@media(prefers-reduced-motion:reduce){.jdpx-confirm{transition:opacity .15s}.jdpx-confirm-box{transition:none;transform:none}}

/* ===== Menu vertical balisé : contour fin sombre AUTOUR DU MENU SEUL (pas de fond blanc, pas la section Pro) ===== */
@media(min-width:981px){
	.jdpx-body .jdpx-sidebar{border:0;border-radius:0;margin:0;background:none;box-shadow:none;padding:22px 16px;height:calc(100vh - 64px)}
	.jdpx-body .jdpx-side-nav{border:1px solid #1B1B1A;border-radius:14px;padding:10px;background:transparent}
}
/* ========== ICON SYSTEM STANDARDIZATION ========== */
/* Base rule: all svgIc sprites are 20px/1.8 stroke; overrides below harmonize per context */

/* 1. STANDARDIZE INLINE ICON SIZES (text-adjacent, eyebrows, labels) */
.jdpx-hero .eyebrow .jdpx-ic {
	width: 16px;
	height: 16px;
}

/* Track auto-update chip: 16px green icon */
.track-auto .jdpx-ic {
	width: 16px;
	height: 16px;
}

/* Viral detail modal: "when" timestamp pill, icon should be muted (context: time label) */
.vd-when .jdpx-ic {
	width: 14px;
	height: 14px;
	color: var(--t2);
}

/* Strat decode header: violet context, icon = 17px (compact header) */
.strat-head .jdpx-ic {
	flex:none;
}

/* Exploit action line (.sa-x): target icon inline, accent color, 15px */
.sa-x .jdpx-ic {
	flex:none;
	margin-top: 2px;
}

/* 2. STANDARDIZE METRICS CARD ICONS */
.mx-ico {
	color: var(--accent);
	font-size: 22px;
}

/* When SVG refactor includes icon, use 20px with proper accent inheritance */
.mx-ico .jdpx-ic {
	width: 20px;
	height: 20px;
}

/* 3. TOOLS TABS & OUTILS PAGES: ICON SIZING HARMONY */
.ot-tab .ot-ic {
	width: 14px;
	height: 14px;
}

.ot-tab .jdpx-ic {
	width: 14px;
	height: 14px;
}

/* Tool page section header (h3): title + icon, icon 19px accent */
.ot-page h3 .jdpx-ic {
	color: var(--accent);
}

/* 4. INSIGHTS PREVIEW CARDS (.ip-cell): ICON SIZING & COLOR */
.ip-ic {
	color: var(--accent);
	width: 18px;
	height: 18px;
}

.ip-cell .jdpx-ic {
	width: 18px;
	height: 18px;
	color: var(--accent);
}

/* 5. BOOST EXPLAINER CARD: ICON CONSISTENCY */
.boost-explain .be-ico {
	width: 26px;
	height: 26px;
	flex:none;
	color: var(--accent);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 6. FACTOR ICONS IN VIRAL MODAL (vf-ic): SIZING & COLOR COHESION */
.vf-ic {
	flex:none;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.vf-ic .jdpx-ic {
	width: 18px;
	height: 18px;
}

/* 7. INTRO FEATURES (.if-ic): ICON SIZING & COLOR */
.if-ic {
	width: 38px;
	height: 38px;
	flex:none;
	border-radius: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--surface);
	border: 1px solid var(--line2);
	color: var(--accent);
}

.if-ic .jdpx-ic {
	width: 20px;
	height: 20px;
}

/* 8. VISUALIZATION HEADER ICONS (.viz-h): ACCENT COLOR */
.viz-h .jdpx-ic {
	width: 20px;
	height: 20px;
	color: var(--accent);
	flex:none;
	margin-right: 6px;
}

/* 9. INLINE ANALYSE PAGE ICONS (.an-ico): STROKE CONSISTENCY */
.an-ico {
	width: 1em;
	height: 1em;
	flex:none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.an-who > div > span .an-ico,
.acc-who > div > span .an-ico {
	font-size: 15px;
	opacity: 0.85;
}

.an-vf {
	font-size: 14px;
	flex:none;
}

.an-h4 .an-ico {
	font-size: 18px;
	color: var(--accent);
	margin-right: 6px;
	flex:none;
}

.an-h3 .an-ico {
	font-size: 20px;
	color: var(--accent);
	margin-right: 8px;
	flex:none;
}

.an-ok .an-ico {
	font-size: 17px;
	color: var(--green);
	flex:none;
	margin-right: 4px;
}

/* 10. REFRESH BUTTON & COMPARE BUTTON ICONS */
button[data-refresh] .jdpx-ic,
button[data-compare] .jdpx-ic {
	width: 16px;
	height: 16px;
	margin-right: 6px;
}

/* 11. REDUCE MOTION: ICON ANIMATIONS (none native, but future-proof) */
@media (prefers-reduced-motion: reduce) {
	.jdpx-ic,
	.an-ico {
		animation: none !important;
	}
}

/* ========== END ICON STANDARDIZATION ========== */
/* ===== Outil Hashtags IA ===== */
.ht-formula{display:flex;flex-direction:column;gap:4px;background:var(--cr2);border:1px solid var(--hair);border-radius:14px;padding:14px 16px;margin:16px 0}
.ht-formula-l{font:700 11px Poppins,sans-serif;letter-spacing:.6px;text-transform:uppercase;color:var(--accent)}
.ht-formula p{font-size:14px;color:var(--ink);line-height:1.55}
.ht-tiers{display:flex;flex-direction:column;gap:16px}
.ht-tier-h{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.ht-tier-h b{font-size:14.5px;color:var(--ink);font-weight:700}
.ht-tier-h span{font-size:12.5px;color:var(--ink3);line-height:1.45}
.ht-chips{display:flex;flex-wrap:wrap;gap:8px}
.ht-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:10px;border:1px solid var(--hair);background:var(--pap);cursor:pointer;font-family:inherit;transition:transform .15s var(--ease),border-color .15s var(--ease),background .15s}
.ht-chip:hover{transform:translateY(-1px);border-color:var(--accent)}
.ht-chip:active{transform:scale(.97)}
.ht-tag{font:700 13.5px Poppins,sans-serif;color:var(--ink)}
.ht-vol{font:600 11.5px Poppins,sans-serif;color:var(--ink3);font-variant-numeric:tabular-nums}
.ht-chip.copied{border-color:var(--green);background:rgba(15,165,115,.08)}
.ht-chip.copied .ht-tag{color:var(--green)}
.ht-copyall{margin:18px 0 4px}
.ht-copyall.copied{border-color:var(--green);color:var(--green)}
.ht-strat{margin-top:20px;background:var(--cr2);border:1px solid var(--hair);border-radius:14px;padding:18px 20px}
.ht-strat-h{display:flex;align-items:center;gap:9px;font:800 15px Poppins,sans-serif;color:var(--ink);margin-bottom:12px}
.ht-strat-h .jdpx-ic{width:18px;height:18px;color:var(--accent)}
.ht-strat ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.ht-strat li{position:relative;padding-left:22px;font-size:13.5px;color:var(--ink2);line-height:1.55}
.ht-strat li::before{content:"";position:absolute;left:4px;top:7px;width:7px;height:7px;border-radius:50%;background:var(--accent)}

/* ---------- Abonnements : 3 paliers + palier Agence + modale PayPal ---------- */
.jdpx-body .plans-3,
.jdpx-body section[data-sec="abonnement"] .plans-3{max-width:1040px}
.jdpx-body .plan{position:relative}
.jdpx-body .plan .jdpx-btn{margin-top:auto}
/* Palier Agence : look plat premium (encre douce), distinct du Pro, sans dégradé. */
.jdpx-body .plan.agency{background:var(--cr2);border-color:#1B1B1A;border-width:1.5px}
.jdpx-body section[data-sec="abonnement"] .plan.agency{background:var(--cr2);border-color:#1B1B1A;border-width:1.5px}
.jdpx-body .plan.agency h3{color:var(--ink)}
.jdpx-body .plan-current{margin-top:auto;text-align:center;font-size:12.5px;font-weight:700;color:var(--ink2);background:var(--cr2);border:1px solid var(--hair);border-radius:999px;padding:9px 12px}
.jdpx-body .plan.agency .plan-current{background:rgba(255,255,255,.6)}

/* État de l'abonnement actif. */
.jdpx-body .sub-status{display:flex;gap:16px;align-items:flex-start;padding:24px}
.jdpx-body .ss-badge{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:rgba(230,138,28,.12);color:var(--accent)}
.jdpx-body .ss-badge .jdpx-ic{width:22px;height:22px}
.jdpx-body .ss-body{display:flex;flex-direction:column;gap:4px}
.jdpx-body .ss-body b{font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.jdpx-body .ss-body span{font-size:13.5px;color:var(--ink2);line-height:1.55}
.jdpx-body .ss-bill{font-weight:600;color:var(--ink)}
.jdpx-body .sub-actions{margin-top:16px}

/* Modale de paiement in-dashboard (abonnement). */
.jdpx-pp-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;background:rgba(27,27,26,.42);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0;transition:opacity .2s var(--ease)}
.jdpx-pp-modal.in{opacity:1}
.jdpx-pp-box{position:relative;width:min(440px,100%);background:var(--pap);border:1px solid var(--hair);border-radius:20px;padding:30px 28px 26px;box-shadow:0 24px 60px -20px rgba(27,27,26,.5);transform:scale(.96);transition:transform .2s var(--ease)}
.jdpx-pp-modal.in .jdpx-pp-box{transform:scale(1)}
.jdpx-pp-box h3{font:800 19px Poppins,sans-serif;color:var(--ink);margin-bottom:6px;letter-spacing:-.01em}
.jdpx-pp-box .pp-lead{font-size:13.5px;color:var(--ink2);line-height:1.55;margin-bottom:18px}
.jdpx-pp-box .pp-x{position:absolute;top:14px;right:14px;width:30px;height:30px;border:0;border-radius:50%;background:var(--cr2);color:var(--ink2);font-size:14px;cursor:pointer;line-height:1}
.jdpx-pp-box .pp-x:hover{background:var(--hair)}
.jdpx-pp-box .pp-buttons{min-height:60px}
.jdpx-pp-box .pp-msg{font-size:13px;color:var(--ink2);margin-top:12px;min-height:18px;text-align:center}
@media(prefers-reduced-motion:reduce){.jdpx-pp-modal{transition:opacity .15s}.jdpx-pp-box{transition:none;transform:none}}

/* ---------- Stories : bulles inline (vues + impressions réparties) ---------- */
.jdpx-body .stories-inline{margin-top:20px;padding:22px 24px}
.jdpx-body .st-head{margin-bottom:14px}
.jdpx-body .st-head .st-h{display:flex;align-items:center;gap:8px;font:800 18px Poppins,sans-serif;color:var(--ink);letter-spacing:-.01em;margin:0 0 4px}
.jdpx-body .st-head .st-h .jdpx-ic{width:20px;height:20px;color:var(--accent)}
.jdpx-body .st-sub{display:block;font-size:13px;color:var(--ink2);line-height:1.5}
/* Grille de bulles */
.jdpx-body .stb-grid{display:flex;flex-wrap:wrap;gap:16px 14px;margin:6px 0 12px}
.jdpx-body .stb{display:flex;flex-direction:column;align-items:center;gap:7px;width:78px;border:0;background:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
/* Ring façon story Instagram (dégradé = affordance de marque, volontaire) */
.jdpx-body .stb-ring{position:relative;width:72px;height:72px;border-radius:50%;padding:3px;background:linear-gradient(45deg,#f09433,#dc2743 45%,#bc1888);transition:transform .16s var(--ease)}
.jdpx-body .stb-img{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;background:var(--cr2);border:2px solid var(--pap)}
.jdpx-body .stb-img img{width:100%;height:100%;object-fit:cover;display:block}
.jdpx-body .stb-noav{display:grid;place-items:center;width:100%;height:100%;font-size:24px}
.jdpx-body .stb:hover .stb-ring{transform:scale(1.05)}
.jdpx-body .stb:active .stb-ring{transform:scale(.95)}
/* Non sélectionnée : ring atténué pour faire ressortir la sélection */
.jdpx-body .stb:not(.on) .stb-ring{filter:saturate(.55) opacity(.78)}
/* Sélectionnée : ring accent plein + halo */
.jdpx-body .stb.on .stb-ring{background:var(--accent);box-shadow:0 0 0 1px rgba(230,138,28,.25),0 6px 16px -6px rgba(230,138,28,.5)}
.jdpx-body .stb-check{position:absolute;right:-2px;bottom:-2px;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;border:2px solid var(--pap)}
.jdpx-body .stb-meta{min-height:16px;text-align:center}
.jdpx-body .stb-exp{font:600 11px Poppins,sans-serif;color:var(--ink3)}
.jdpx-body .stb-alloc{font:800 12px Poppins,sans-serif;color:var(--accent);font-variant-numeric:tabular-nums}
/* Ligne de plafond min-100 */
.jdpx-body .st-cap{font-size:12.5px;color:var(--ink2);line-height:1.5;margin:2px 0 14px;padding:9px 12px;background:var(--cr2);border:1px solid var(--hair);border-radius:10px;transition:background .2s var(--ease),border-color .2s var(--ease)}
.jdpx-body .st-cap b{color:var(--ink);font-variant-numeric:tabular-nums}
.jdpx-body .st-cap.flash{background:rgba(230,138,28,.12);border-color:rgba(230,138,28,.4)}

/* ---------- Bandeau invité (analyse offerte -> créer un compte) ---------- */
.jdpx-body .guest-banner{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:18px 22px;margin-bottom:18px;background:var(--cr2);border:1px solid var(--hair)}
.jdpx-body .guest-banner .gb-l{flex:1;min-width:220px}
.jdpx-body .guest-banner .gb-l b{display:block;font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.01em;margin-bottom:3px}
.jdpx-body .guest-banner .gb-l p{font-size:13px;color:var(--ink2);line-height:1.5;margin:0}
.jdpx-body .guest-banner .jdpx-btn{flex:none}

/* ---------- Boost ciblé contextuel sur chaque stat ---------- */
.jdpx-body .kpi-boost{display:inline-flex;align-items:center;justify-content:center;gap:5px;width:100%;margin-top:10px;border:1px solid var(--hair);background:var(--cr2);color:var(--accent);font:700 12px Poppins,sans-serif;padding:7px 10px;border-radius:9px;cursor:pointer;transition:background .16s var(--ease),border-color .16s var(--ease),transform .12s var(--ease)}
.jdpx-body .kpi-boost .jdpx-ic{width:14px;height:14px}
.jdpx-body .kpi-boost:hover{background:rgba(230,138,28,.1);border-color:rgba(230,138,28,.42)}
.jdpx-body .kpi-boost:active{transform:scale(.97)}
.jdpx-body .boost-explain.flash{box-shadow:0 0 0 2px rgba(230,138,28,.5)}

/* ---------- Mon pulse : bandeau de rétention en tête de Métriques ---------- */
.jdpx-body .pulse-strip{margin-bottom:18px;padding:18px 20px}
.jdpx-body .ps-head{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.jdpx-body .ps-head .jdpx-ic{width:18px;height:18px;color:var(--accent)}
.jdpx-body .ps-head b{font:700 15px Poppins,sans-serif;color:var(--ink)}
.jdpx-body .ps-head span{font-size:12px;color:var(--ink3)}
.jdpx-body .ps-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
@media(max-width:560px){.jdpx-body .ps-tiles{grid-template-columns:1fr}}
.jdpx-body .ps-tile{display:flex;flex-direction:column;gap:3px;padding:13px 15px;background:var(--cr2);border:1px solid var(--hair);border-radius:13px}
.jdpx-body .pt-lbl{font:600 10.5px Poppins,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3)}
.jdpx-body .pt-val{font:800 24px Poppins,sans-serif;color:var(--ink2);line-height:1.05;display:flex;align-items:center;gap:5px}
.jdpx-body .pt-val.up{color:var(--green)}
.jdpx-body .pt-val.down{color:var(--red)}
.jdpx-body .pt-flame{font-size:18px;line-height:1}
.jdpx-body .pt-sub{font-size:11.5px;color:var(--ink3)}
.jdpx-body .ps-goalset{margin-bottom:4px}
.jdpx-body .ps-goalset .pg-row{display:flex;gap:8px;margin-bottom:10px}
.jdpx-body .ps-goalset .pg-row input{flex:1;min-width:0;border:1px solid var(--hair);background:var(--pap);color:var(--ink);font:600 14px Poppins,sans-serif;padding:9px 13px;border-radius:10px}
.jdpx-body .ps-goalset .pg-row input:focus{outline:none;border-color:var(--accent)}
.jdpx-body .ps-goalset .pg-bar{height:8px;border-radius:6px;background:var(--cr2);overflow:hidden;border:1px solid var(--hair);margin-bottom:8px}
.jdpx-body .ps-goalset .pg-bar span{display:block;height:100%;background:var(--accent);border-radius:6px;transition:width .5s var(--ease)}
.jdpx-body .pg-eta{font-size:12.5px;color:var(--ink2);margin:0}
.jdpx-body .pg-msg{font-size:12.5px;margin:6px 0 0}
.jdpx-body .ps-jalons{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.jdpx-body .pj-badge{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;background:var(--cr2);border:1px solid var(--hair);border-radius:10px;font:700 13px Poppins,sans-serif;color:var(--ink)}
.jdpx-body .pj-badge .jdpx-ic{width:14px;height:14px;color:var(--accent)}
.jdpx-body .pj-badge small{font-weight:500;font-size:11px;color:var(--ink3)}
.jdpx-body .ps-comp{font-size:13px;color:var(--ink2);margin:14px 0 0}
.jdpx-body .ps-comp b{white-space:nowrap}
.jdpx-body .ps-comp b.up{color:var(--green)}
.jdpx-body .ps-comp b.down{color:var(--red)}
.jdpx-body .ps-value{margin-top:16px}
.jdpx-body .ps-value .pt-lbl{display:block;margin-bottom:8px}
.jdpx-body .pulse-strip.locked .ps-lock{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.jdpx-body .pulse-strip.locked .ps-lock p{font-size:13px;color:var(--ink2);margin:0;max-width:52ch}

/* ---------- Achat ciblé sur les cartes de suivi (Mes comptes) ---------- */
.jdpx-body .acc-boost{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 2px;padding-top:13px;border-top:1px solid var(--hair)}
.jdpx-body .acc-boost .ab-l{display:inline-flex;align-items:center;gap:6px;font:700 12px Poppins,sans-serif;color:var(--ink2)}
.jdpx-body .acc-boost .ab-l .jdpx-ic{width:15px;height:15px;color:var(--accent)}
.jdpx-body .ab-chips{display:flex;flex-wrap:wrap;gap:7px}
.jdpx-body .ab-chip{border:1px solid var(--hair);background:var(--cr2);color:var(--ink);font:600 12px Poppins,sans-serif;padding:6px 12px;border-radius:999px;cursor:pointer;transition:background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease),transform .12s var(--ease)}
.jdpx-body .ab-chip:hover{background:rgba(230,138,28,.1);border-color:rgba(230,138,28,.45);color:var(--accent)}
.jdpx-body .ab-chip:active{transform:scale(.97)}
.jdpx-body .boost-target-flash{box-shadow:0 0 0 2px rgba(230,138,28,.55);border-radius:14px;transition:box-shadow .2s var(--ease)}

/* ---------- Outil Tendances locales (lieux Instagram) ---------- */
.jdpx-body .loc-bar{margin:14px 0 12px}
.jdpx-body .loc-bar input[type=search]{width:100%;max-width:420px;margin-top:6px;border:1px solid var(--hair);background:var(--pap);color:var(--ink);font:400 14px Poppins,sans-serif;padding:10px 14px;border-radius:10px}
.jdpx-body .loc-bar input[type=search]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(230,138,28,.16)}
.jdpx-body .loc-h{font:800 15px Poppins,sans-serif;color:var(--ink);margin:22px 0 10px}
.jdpx-body .loc-accs{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.jdpx-body .loc-acc{display:flex;align-items:center;gap:11px;border:1px solid var(--hair);background:var(--pap);border-radius:12px;padding:9px 12px}
.jdpx-body .loc-acc img,.jdpx-body .loc-acc .loc-av-fb{width:34px;height:34px;border-radius:50%;flex:none;object-fit:cover;background:var(--cr2);display:inline-flex;align-items:center;justify-content:center;font-size:16px}
.jdpx-body .loc-acc-id{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.jdpx-body .loc-acc-id b{font:700 13.5px Poppins,sans-serif;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jdpx-body .loc-acc-id small{font:400 12px Poppins,sans-serif;color:var(--ink3)}
.jdpx-body .jdpx-btn.small{padding:7px 14px;font-size:12.5px;flex:none}
@media (max-width:520px){
	.jdpx-body .loc-acc{gap:9px;padding:8px 10px}
	.jdpx-body .loc-acc-id b{font-size:13px}
}
.jdpx-body .loc-alt{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:10px 0 4px}
.jdpx-body .ac-state .ac-login{color:var(--accent);font-weight:700;text-decoration:underline;margin-left:4px}

/* ---------- Tunnel déconnecté : compte reconnu, analyse verrouillée ---------- */
.jdpx-body .gg{max-width:560px;margin:0 auto;text-align:center}
.jdpx-body .gg-head{display:flex;align-items:center;justify-content:center;gap:14px;margin:14px 0 4px}
.jdpx-body .gg-av{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none;background:var(--cr2);display:inline-flex;align-items:center;justify-content:center;font-size:28px}
.jdpx-body .gg-id{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.jdpx-body .gg-id b{font:800 18px Poppins,sans-serif;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px}
.jdpx-body .gg-name{font:400 13px Poppins,sans-serif;color:var(--ink3)}
.jdpx-body .gg-stats{display:flex;justify-content:center;gap:22px;margin:10px 0 20px;font:400 13.5px Poppins,sans-serif;color:var(--ink2)}
.jdpx-body .gg-stats b{font-weight:800;color:var(--ink)}
.jdpx-body .gg-h{font:800 22px Poppins,sans-serif;color:var(--ink);margin:18px 0 8px}
.jdpx-body .gg-lead{font:400 14.5px/1.6 Poppins,sans-serif;color:var(--ink2);max-width:44ch;margin:0 auto 22px}
.jdpx-body .gg-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.jdpx-body .gg-note{margin-top:16px;font-size:12.5px}
@media (max-width:520px){
	.jdpx-body .gg-head{flex-direction:column;gap:10px}
	.jdpx-body .gg-id{align-items:center}
	.jdpx-body .gg-actions .jdpx-btn{width:100%}
}