/* Design system PPCAssist : Geist, accent #398fed, encre #212121, fonds slate,
   arrondis généreux. Thème clair uniquement, comme le produit. */
:root{
  color-scheme:light;
  --ground:#f1f5f9; --surface:#fff; --surface-2:#f8fafc;
  --ink:#212121; --ink-2:#6a7282; --ink-3:#94a3b8;
  --line:#e2e8f0; --line-soft:#eef2f6;
  --accent:#398fed; --accent-deep:#0a59da; --accent-wash:#ddedfc; --accent-tint:#eff6ff;
  --track:#e8eef4;
  --good:#0f9d58; --good-tint:#f0fdf4; --bad:#e02424; --bad-tint:#fef2f2;
  --warn:#b07d05; --warn-tint:#fffbeb;
  --dark:#212121;
  /* une teinte par audience, du coeur de cible vers le froid */
  --a1:#0d366b; --a2:#1c64f2; --a3:#398fed; --a4:#76a9fa; --a5:#a4cafe;
  /* les deux mesures ont chacune leur teinte, partout dans la page */
  --m-click:#398fed; --m-sale:#059669;
  /* la publicité a sa propre couleur, jamais confondue avec l'organique */
  --ads:#c9a84c; --ads-tint:#fdf8ec;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:15px;line-height:1.5;letter-spacing:-.011em;-webkit-font-smoothing:antialiased;
  padding-bottom:56px}
.shell{max-width:1200px;margin:0 auto;padding:22px 20px 56px;display:flex;flex-direction:column;gap:14px}
/* Le conteneur revele apres la construction porte lui aussi les blocs : sans
   cette regle il est un div ordinaire, le gap du shell ne l'atteint pas et
   toute la page se retrouve collee, ecarts a zero. */
#audit{display:flex;flex-direction:column;gap:14px}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.04em;text-wrap:balance;line-height:1.1}
h1{font-size:34px} h2{font-size:24px} h3{font-size:19px}
p{margin:0;color:var(--ink-2);letter-spacing:-.005em}
.mono{font-family:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
.block{background:var(--surface);border-radius:28px;overflow:hidden}

.btn{border:none;border-radius:15px;padding:12px 20px;font-family:inherit;font-size:14px;font-weight:500;
  letter-spacing:-.02em;cursor:pointer;display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  text-decoration:none}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.btn-ghost{background:var(--surface-2);color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{background:var(--accent-tint);border-color:var(--accent-wash)}
.btn-main{background:var(--accent-deep);color:#fff;position:relative;overflow:hidden;
  font-size:15.5px;font-weight:600;letter-spacing:-.025em;padding:15px 26px;border-radius:17px;
  box-shadow:0 2px 5px rgba(10,89,218,.28),0 10px 22px -6px rgba(10,89,218,.52);
  transition:box-shadow .18s,background .18s,transform .18s}
.btn-main:hover{background:#0847b0;transform:translateY(-1px);
  box-shadow:0 3px 7px rgba(8,71,176,.34),0 14px 30px -6px rgba(8,71,176,.62)}
.btn-main .pulse{width:9px;height:9px;border-radius:50%;background:#fff;flex:none;
  animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
.btn-main:after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);
  animation:sheen 3.6s ease-in-out infinite}
@keyframes sheen{0%,70%{left:-120%}100%{left:180%}}
@media (prefers-reduced-motion:reduce){
  .btn-main:after,.btn-main .pulse{animation:none}
  .btn-main:hover{transform:none}
}

/* en-tête */
.topbar{display:flex;align-items:center;gap:14px;padding:2px 6px 0;flex-wrap:wrap}
.brand{height:26px;width:auto;display:block}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--accent-tint);color:var(--accent);
  border-radius:999px;padding:5px 13px;font-size:12.5px;font-weight:500}
.chip .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.hero{background:var(--surface);border-radius:28px;padding:30px 30px;display:flex;flex-direction:column;gap:26px}
.hero .who{display:flex;gap:20px;align-items:center;min-width:0}
.shot{width:104px;height:104px;flex:none;border-radius:22px;object-fit:cover;background:#fff;
  border:1px solid var(--line);padding:6px}
.idline{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:9px}
.idline .code{background:var(--surface-2);border-radius:9px;padding:3px 9px;font-size:12.5px;color:var(--ink-2)}
.idline .sep{color:var(--ink-3);font-size:13px}
.kpirow{display:grid;grid-template-columns:repeat(auto-fit,minmax(198px,1fr));gap:14px}
.kpibox{background:var(--surface-2);border-radius:18px;padding:17px 20px}
.kpibox.blue{background:var(--accent-tint)}
.kpibox .lab{font-size:12.5px;color:var(--ink-2)}
.kpibox .val{font-size:26px;font-weight:600;letter-spacing:-.045em;margin-top:3px;font-variant-numeric:tabular-nums}
.kpibox.blue .val{color:var(--accent)}
.kpibox .val .u{font-size:13px;font-weight:500;color:var(--ink-3);margin-left:3px;letter-spacing:-.01em}
.kpibox .sub{font-size:12px;color:var(--ink-3);margin-top:5px;line-height:1.45}

/* têtes de section */
.shead{display:flex;gap:14px;align-items:flex-start;padding:40px 4px 4px}
.shead .n{flex:none;width:30px;height:30px;border-radius:11px;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600}
.shead .tx{min-width:0}
.shead p{font-size:14.5px;margin-top:7px;max-width:78ch;line-height:1.55}

/* carte des audiences */
.map{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(310px,.9fr)}
.map-plot{padding:24px 18px 14px;min-width:0}
.axis{display:flex;align-items:center;gap:10px;padding:0 12px 6px;font-size:12px;color:var(--ink-3)}
.axis .ln{flex:1;height:1px;background:linear-gradient(90deg,var(--accent),var(--line))}
svg.orbits{width:100%;height:auto;display:block}
.node{cursor:pointer} .node:focus{outline:none}
.node .hit{fill:transparent}
.node .disc{transition:fill-opacity .14s}
.node .ring-bg{fill:none;stroke:var(--track)}
.node .ring-bg.click{stroke-width:4}
.node .ring-bg.sale{stroke-width:5;opacity:.55}
.node .ring{fill:none;stroke-linecap:round}
.node .ring.click{stroke-width:4;stroke:var(--m-click)}
.node .ring.sale{stroke-width:5;stroke:var(--m-sale)}
.node .idx{font-size:11px;font-weight:600;text-anchor:middle;dominant-baseline:central}
.node.on .idx{fill:var(--ink)}
.node.on .idx.inv{fill:#fff}
.node .lab{font-size:12.5px;font-weight:600;fill:var(--ink);text-anchor:middle;letter-spacing:-.02em}
.node .sub{font-size:11px;fill:var(--ink-3);text-anchor:middle}
.node .sub .c{fill:var(--m-click);font-weight:600}
.node .sub .s{fill:var(--m-sale);font-weight:600}
.node:hover .disc{fill-opacity:.6}
.node.on .disc{fill-opacity:1}
.orbit-ring{fill:none;stroke:var(--line);stroke-width:1}
.orbit-ring.dim{stroke-dasharray:2 6}
.core-disc{fill:var(--dark)}
.core-t1{font-size:13px;font-weight:600;fill:#fff;text-anchor:middle;letter-spacing:-.03em}
.core-t2{font-size:10px;fill:#9aa4b0;text-anchor:middle}
.plegend{display:flex;flex-wrap:wrap;gap:16px;padding:6px 12px 4px;font-size:12.5px;color:var(--ink-2)}
.plegend span{display:inline-flex;align-items:center;gap:7px}
.lgd{width:14px;height:14px;border-radius:50%;background:var(--a3);opacity:.45;flex:none}
.lgr{width:12px;height:12px;border-radius:50%;border:2.5px solid var(--m-click);
  border-right-color:var(--track);border-bottom-color:var(--track);flex:none}
.lgs{width:16px;height:16px;border-radius:50%;border:3px solid var(--m-sale);
  border-right-color:var(--track);border-bottom-color:var(--track);flex:none}

/* panneau de detail */
.panel{background:var(--surface-2);padding:28px 30px;display:flex;flex-direction:column;gap:16px;min-width:0}
.panel .pk{font-size:12.5px;font-weight:500}
.panel h3{margin-top:4px}
.panel .psub{font-size:13.5px;color:var(--ink-3);margin-top:4px}
.pk3{display:flex;gap:10px;flex-wrap:wrap}
.pkb{background:var(--surface);border-radius:16px;padding:12px 15px;flex:1 1 92px}
.pkb .l{font-size:12px;color:var(--ink-2);display:flex;align-items:center;gap:6px}
.pkb .l i{width:8px;height:8px;border-radius:50%;flex:none}
.pkb .v{font-size:19px;font-weight:600;letter-spacing:-.04em;margin-top:2px;font-variant-numeric:tabular-nums}
/* La valeur reste en encre : la pastille du libelle porte deja la couleur de
   la mesure, et un chiffre vert se lit comme un jugement plutot que comme une
   part de ventes. */
.pkb .v.up,.pkb .v.down{color:var(--ink)}
.pverdict{background:var(--surface);border-radius:16px;padding:14px 16px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.pverdict b{color:var(--ink);font-weight:600}
.plist-h{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;color:var(--ink-3)}
.plist{display:flex;flex-direction:column;gap:9px;max-height:262px;overflow-y:auto;margin-right:-8px;padding-right:8px}
.qrow{background:var(--surface);border-radius:14px;padding:11px 14px}
.qrow .qt{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.qrow .q{font-size:12.5px;color:var(--ink);word-break:break-word}
.qrow .qv{font-size:12px;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.qrow .qb{display:flex;align-items:center;gap:9px;margin-top:8px}
.qrow .trk{flex:1;display:block;height:6px;border-radius:999px;background:var(--track);overflow:hidden}
.qrow .fil{display:block;height:100%;border-radius:999px}
.qrow .qp{font-size:11.5px;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.qrow .qp b{font-weight:600}
.qrow .qp .c{color:var(--m-click)} .qrow .qp .s{color:var(--m-sale)}

/* bandeau revenu */
/* La note se lit contre le chiffre, elle ne part pas se coller au bord droit :
   space-between creusait 350 px de vide entre les deux sur un ecran large. */
.revbar{background:var(--surface);border-radius:28px;padding:26px 30px;display:grid;
  grid-template-columns:minmax(220px,max-content) minmax(0,1fr);gap:20px 36px;align-items:center}
.rv-main{min-width:0}
.rv-l{font-size:12.5px;color:var(--ink-2)}
.rv-v{font-size:32px;font-weight:600;letter-spacing:-.05em;margin-top:2px;font-variant-numeric:tabular-nums}
.rv-s{font-size:12.5px;color:var(--ink-3);margin-top:3px}
.rv-note{font-size:12.5px;color:var(--ink-2);max-width:52ch;line-height:1.5;
  border-left:3px solid var(--line);padding-left:14px}

/* parts de ventes par audience */
.split2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.card{background:var(--surface);border-radius:28px;padding:28px 30px;min-width:0}
.card.ads{background:var(--ads-tint)}
.card-h{font-size:18px;font-weight:600;letter-spacing:-.035em}
.card-s{font-size:13.5px;color:var(--ink-3);margin-top:4px}
.bigshare{display:flex;flex-direction:column;gap:16px;margin-top:22px}
.bs-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.bs-n{font-size:14.5px;font-weight:600;letter-spacing:-.025em;display:flex;align-items:center;gap:9px}
.bs-sw{width:12px;height:12px;border-radius:4px;flex:none}
.bs-v{font-size:21px;font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.bs-trk{display:block;height:24px;border-radius:12px;background:var(--track);overflow:hidden;margin-top:7px}
.bs-fil{display:block;height:100%;border-radius:12px}
.bs-sub{font-size:12.5px;color:var(--ink-3);margin-top:5px}
.locked{position:relative}
.locked .blurred{filter:blur(5px);opacity:.4;pointer-events:none;user-select:none}
.lockbox{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;text-align:center;padding:24px}
.lockbox .lk{width:44px;height:44px;border-radius:15px;background:var(--ads);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:19px}
.lockbox .lt{font-size:15.5px;font-weight:600;letter-spacing:-.03em;max-width:26ch}
.lockbox .ls{font-size:13px;color:var(--ink-2);max-width:34ch}

/* audiences a exploiter */
.opp{display:flex;flex-direction:column}
/* Une ligne ouverte est un seul bloc : l'en-tête et le corps partagent le
   même fond et une barre à la couleur de l'audience, sinon l'aplat s'arrête
   au milieu et coupe visuellement l'ensemble en deux. */
.oprow{border-top:1px solid var(--line-soft);position:relative;transition:background .14s}
.oprow:first-child{border-top:none}
.oprow.open{background:var(--surface-2)}
.oprow.open:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--audience,var(--accent))}
.ophead{display:grid;grid-template-columns:34px 1fr auto 18px;gap:16px;align-items:center;
  padding:18px 26px;cursor:pointer;transition:background .12s;width:100%;background:none;border:none;
  font-family:inherit;text-align:left;color:inherit}
.oprow:not(.open) .ophead:hover{background:var(--surface-2)}
.ophead:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.op-pos{width:28px;height:28px;border-radius:10px;background:var(--accent-tint);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600}
.oprow.open .op-pos{background:var(--audience,var(--accent));color:#fff}
.op-n{font-size:15.5px;font-weight:600;letter-spacing:-.03em}
.op-w{font-size:13px;color:var(--ink-2);margin-top:3px}
.op-m{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.op-m .b{font-size:15px;font-weight:600;letter-spacing:-.03em}
.op-m .s{font-size:12px;color:var(--ink-3)}
.op-chev{color:var(--ink-3);font-size:12px;transition:transform .16s}
.oprow.open .op-chev{transform:rotate(90deg)}
.opbody{display:none;padding:4px 26px 22px;grid-template-columns:1fr 1fr;gap:18px}
.oprow.open .opbody{display:grid}
.opkw{display:flex;flex-direction:column;gap:8px;min-width:0}
.opkw-h{font-size:12.5px;color:var(--ink-3)}
.kw{display:flex;justify-content:space-between;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line-soft);
  border-radius:12px;padding:9px 13px}
.kw .k{font-size:12.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kw .v{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.optgt{background:var(--ads-tint);border-radius:18px;padding:18px;position:relative;min-height:156px}

/* audiences absentes */
.brow{display:grid;grid-template-columns:1fr auto 220px;gap:20px;align-items:start;padding:18px 26px;border-top:1px solid var(--line-soft)}
.brow:first-child{border-top:none}
.brow .bn{font-size:15px;font-weight:600;letter-spacing:-.025em}
.brow .bq{font-size:12.5px;color:var(--ink-3);margin-top:4px}
.brow .bv{text-align:right;font-variant-numeric:tabular-nums}
.brow .bv .big{font-size:17px;font-weight:600;letter-spacing:-.035em}
.brow .bv .small{font-size:12px;color:var(--ink-3)}
.brow .bw{font-size:12.5px;color:var(--ink-2);margin-top:7px;line-height:1.45}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 11px;font-size:12.5px;font-weight:500;white-space:nowrap}
.pill.up{background:var(--good-tint);color:var(--good)}
.pill.flat{background:var(--surface-2);color:var(--ink-2)}
.pill.down{background:var(--bad-tint);color:var(--bad)}
.pill.opp{background:var(--good-tint);color:var(--good)}
.pill.off{background:var(--surface-2);color:var(--ink-2)}
.pill.leak{background:var(--bad-tint);color:var(--bad)}
.pill.adsp{background:var(--ads-tint);color:var(--warn)}

/* evolution */
.evo{padding:28px 30px}
.evo-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.tab{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);
  border-radius:999px;padding:8px 14px;font-family:inherit;font-size:13.5px;font-weight:500;
  letter-spacing:-.02em;cursor:pointer;color:var(--ink-2);transition:border-color .12s,background .12s}
.tab:hover{background:var(--surface-2)}
.tab.on{background:var(--audience);border-color:var(--audience);color:#fff}
.tab:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.tab i{width:9px;height:9px;border-radius:50%;background:var(--audience);flex:none}
.tab.on i{background:#fff}
.tab .n{font-variant-numeric:tabular-nums;opacity:.75;font-size:12px}
.evo-note{font-size:12.5px;color:var(--ink-3);margin:14px 0 4px}
.evo svg{width:100%;height:auto;display:block}
.ln-grid{stroke:var(--line-soft);stroke-width:1}
.ln-axis{stroke:var(--line);stroke-width:1}
.ln-tick{font-size:10.5px;fill:var(--ink-3)}
.ln-tick.vol{fill:var(--ink-3);opacity:.85}
.ax-title{font-size:11.5px;fill:var(--ink-2);font-weight:500}
.ax-title.vol{fill:var(--ink-3)}
.ln-area{fill:var(--ink-3);opacity:.13}
.ln-path{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.ln-dot{stroke:#fff;stroke-width:2}
.ln-gap{stroke-dasharray:3 4;opacity:.4}
.evo-legend{display:flex;gap:20px;flex-wrap:wrap;margin-top:14px;font-size:13px;color:var(--ink-2)}
.evo-legend span{display:inline-flex;align-items:center;gap:8px}
.el-sw{width:22px;height:3px;border-radius:2px;flex:none}
.el-sw.area{height:12px;border-radius:3px;opacity:.28}
.evo-reads{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:18px}
.rd{background:var(--surface-2);border-radius:16px;padding:13px 15px}
.rd .l{font-size:12px;color:var(--ink-2)}
.rd .v{font-size:19px;font-weight:600;letter-spacing:-.04em;margin-top:2px;font-variant-numeric:tabular-nums}
.rd .s{font-size:11.5px;color:var(--ink-3);margin-top:2px}

/* concurrents */
.riv{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px;padding:22px 26px}
.rc{background:var(--surface-2);border-radius:20px;padding:15px;display:flex;flex-direction:column;gap:12px;
  text-decoration:none;color:inherit;border:1px solid transparent;transition:border-color .12s,background .12s}
.rc:hover{background:var(--surface);border-color:var(--line)}
.rc:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rc.self{background:var(--accent-tint);border-color:var(--accent-wash)}
.rc-top{display:flex;gap:12px;align-items:flex-start}
.rc-img{width:56px;height:56px;flex:none;border-radius:14px;object-fit:contain;background:#fff;
  border:1px solid var(--line);padding:4px}
.rc-tx{min-width:0;flex:1}
.rc-n{font-size:13.5px;font-weight:600;letter-spacing:-.025em;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rc-a{font-size:11.5px;color:var(--ink-3);margin-top:3px}
.rc-bar{display:block;height:9px;border-radius:999px;background:var(--track);overflow:hidden}
.rc-fil{display:block;height:100%;border-radius:999px;background:var(--a2)}
.rc.self .rc-fil{background:var(--accent)}
.rc-f{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.rc-v{font-size:17px;font-weight:600;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.rc-s{font-size:11.5px;color:var(--ink-3)}
.rc-link{font-size:11.5px;color:var(--accent);font-weight:500;white-space:nowrap}

/* roadmap */
.road{display:flex;flex-direction:column}
.step{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:24px 28px;border-top:1px solid var(--line-soft);
  position:relative}
/* Un liseré à gauche donne la gravité de l'étape avant même de lire le tag. */
.step:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:transparent}
.step.tone-bad:before{background:var(--bad)}
.step.tone-warn:before{background:var(--warn)}
.step.tone-good:before{background:var(--good)}
.step.tone-neutral:before{background:var(--line)}
.step.tone-bad .num i{background:var(--bad)}
.step.tone-warn .num i{background:var(--warn)}
.step.tone-good .num i{background:var(--good)}
.step:first-child{border-top:none}
.step .num{position:relative;display:flex;flex-direction:column;align-items:center}
.step .num i{width:34px;height:34px;border-radius:12px;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;font-style:normal;flex:none;z-index:1}
.step .num:after{content:"";position:absolute;top:34px;bottom:-20px;width:2px;background:var(--line);border-radius:2px}
.step:last-child .num:after{display:none}
.step .st{font-size:16px;font-weight:600;letter-spacing:-.03em}
.step .sw2{font-size:14px;color:var(--ink-2);margin-top:5px;max-width:74ch;line-height:1.5}
.step .stags{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.step .when{font-size:12px;color:var(--ink-3);margin-top:6px}

/* L'étape publicitaire n'est pas un constat mais une invitation : elle se
   distingue du reste de la liste sans crier plus fort que les blocages. */
.ads-step{background:linear-gradient(90deg,var(--accent-tint),transparent 70%)}
.ads-step:before{background:var(--accent)}
.ads-step .num i.ads-i{background:var(--accent);font-size:19px;font-weight:500}
.ads-step .st{color:var(--accent-deep)}
.pill.ads{background:var(--accent-wash);color:var(--accent-deep)}
.step-cta{margin-top:14px}

footer{font-size:12px;color:var(--ink-3);padding:6px 6px 0;line-height:1.6;max-width:100ch}
.toast{position:fixed;left:50%;bottom:100px;transform:translateX(-50%) translateY(12px);z-index:60;
  background:var(--dark);color:#fff;border-radius:14px;padding:11px 18px;font-size:13.5px;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:940px){
  .map,.evo,.split2,.revbar{grid-template-columns:1fr}
  .opbody{grid-template-columns:1fr}
  .ophead{grid-template-columns:30px 1fr 18px;gap:12px}
  .ophead .op-m{grid-column:2/-1;text-align:left}
  .brow{grid-template-columns:1fr auto}
  .brow .bwrap{grid-column:1/-1}
}
@media (max-width:640px){
  .shell{padding:16px 12px 40px}
  h1{font-size:25px} h2{font-size:20px}
  .hero,.card,.panel,.evo-plot,.evo-side,.brow,.step,.ophead,.opbody,.riv{padding-left:18px;padding-right:18px}
  .btn{flex:1;justify-content:center}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* page d'entree : coller une URL */
.gate{background:var(--surface);border-radius:28px;padding:48px 40px;display:flex;
  flex-direction:column;gap:16px;max-width:760px;margin:40px auto 0}
.gate h1{font-size:34px}
.gate p{font-size:15px;max-width:62ch}
.gate-form{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.gate-in{flex:1 1 320px;min-width:0;font-family:inherit;font-size:15px;color:var(--ink);
  background:var(--surface-2);border:1px solid var(--line);border-radius:17px;padding:15px 18px}
.gate-in:focus{outline:2px solid var(--accent);outline-offset:1px;background:var(--surface)}
.gate-in::placeholder{color:var(--ink-3)}
.gate-err{color:var(--bad);background:var(--bad-tint);border-radius:14px;padding:12px 16px;
  font-size:14px;max-width:none}
.gate-note{font-size:12.5px;color:var(--ink-3);margin-top:4px}

/* chargement : la page est a l'ecran, le travail se fait derriere */
/* [hidden] doit gagner : une regle display: flex l'emporte sinon sur la
   feuille du navigateur et le bloc reste a l'ecran une fois masque. */
[hidden]{display:none !important}
.loader{background:var(--surface);border-radius:28px;padding:34px 36px;display:flex;
  flex-direction:column;gap:20px;margin-top:8px}
.ld-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap}
.ld-t{font-size:20px;font-weight:600;letter-spacing:-.035em}
.ld-s{font-size:14px;color:var(--ink-2);margin-top:5px}
.ld-pct{font-size:30px;font-weight:600;letter-spacing:-.045em;color:var(--accent);
  font-variant-numeric:tabular-nums;line-height:1}
.ld-bar{height:8px;border-radius:999px;background:var(--track);overflow:hidden}
.ld-fil{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent-deep));
  transition:width .5s cubic-bezier(.22,.61,.36,1)}
.ld-steps{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:9px 26px}
.ld-step{display:flex;align-items:center;gap:11px;font-size:13.5px;color:var(--ink-3);
  transition:color .2s}
.ld-step .ld-dot{width:9px;height:9px;border-radius:50%;background:var(--track);flex:none;
  transition:background .2s,box-shadow .2s,transform .2s}
.ld-step.done{color:var(--ink-2)}
.ld-step.done .ld-dot{background:var(--good)}
.ld-step.on{color:var(--ink);font-weight:500}
.ld-step.on .ld-dot{background:var(--accent);box-shadow:0 0 0 4px var(--accent-tint);
  animation:ld-pulse 1.4s ease-in-out infinite}
@keyframes ld-pulse{0%,100%{transform:scale(.85)}50%{transform:scale(1.15)}}
.ld-note{font-size:12.5px;color:var(--ink-3)}
@media (prefers-reduced-motion:reduce){
  .ld-step.on .ld-dot{animation:none}
  .ld-fil{transition:none}
}

.failed{background:var(--surface);border-radius:28px;padding:34px 36px;display:flex;
  flex-direction:column;gap:12px;align-items:flex-start;margin-top:8px}
.fl-t{font-size:20px;font-weight:600;letter-spacing:-.035em}
.fl-s{font-size:14.5px;color:var(--ink-2);max-width:62ch}
.failed .btn{margin-top:8px}

/* une requete se clique pour voir la page de resultats Amazon */
.qlink{color:inherit;text-decoration:none;display:inline-flex;align-items:baseline;gap:4px;
  border-bottom:1px dashed transparent;transition:color .14s,border-color .14s}
.qlink:hover{color:var(--accent-deep);border-bottom-color:var(--accent-wash)}
.qlink-i{font-style:normal;font-size:.82em;opacity:0;transition:opacity .14s;font-family:inherit}
.qlink:hover .qlink-i{opacity:.75}
.qlink:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.bq .qlink{color:var(--ink-3)}
.bq .qlink:hover{color:var(--accent-deep)}
.bq-sep{color:var(--ink-3);margin:0 7px;opacity:.6}
.qrow .qt .qlink{font-size:12.5px;color:var(--ink);word-break:break-word}
.kw .qlink.k{min-width:0}

/* barre du haut : actions et fraicheur */
.topbar-act{margin-left:auto;display:flex;gap:16px;flex-wrap:wrap}
.tlink{font-size:13px;color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line);
  padding-bottom:1px;transition:color .14s,border-color .14s}
.tlink:hover{color:var(--accent-deep);border-bottom-color:var(--accent-wash)}
.chip.quiet{background:var(--surface-2);color:var(--ink-3)}

/* sommaire : sept sections, il faut pouvoir sauter dedans */
html{scroll-behavior:smooth}
:target{scroll-margin-top:92px}

/* Un seul bandeau, en haut : les sections a gauche, les deux actions a droite.
   Il y avait une barre flottante en bas et un sommaire en haut, ce qui faisait
   deux endroits ou chercher la meme chose. */
.actionbar{position:sticky;top:10px;z-index:40;display:flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border:1px solid var(--line);
  border-radius:999px;padding:7px 7px 7px 9px;
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 26px -12px rgba(15,23,42,.3)}
.actionbar-btns{margin-left:auto;display:flex;gap:8px;flex:none}
.secnav{display:flex;gap:3px;min-width:0;overflow-x:auto;scrollbar-width:none}
.secnav::-webkit-scrollbar{display:none}
.secnav a{font-size:12.5px;color:var(--ink-2);text-decoration:none;padding:7px 13px;
  border-radius:999px;white-space:nowrap;transition:background .14s,color .14s}
.secnav a:hover{background:var(--surface-2);color:var(--ink)}
.secnav a.on{background:var(--accent-tint);color:var(--accent-deep);font-weight:500}
.btn-sm{font-size:13.5px;padding:9px 15px;border-radius:13px}
.btn-main.btn-sm{font-size:13.5px;font-weight:600;padding:9px 16px;border-radius:13px;
  box-shadow:0 1px 3px rgba(10,89,218,.26),0 6px 14px -5px rgba(10,89,218,.46)}
.btn-main.btn-sm:hover{box-shadow:0 2px 5px rgba(8,71,176,.3),0 9px 20px -5px rgba(8,71,176,.55)}
.btn-main.btn-sm .pulse{width:7px;height:7px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media (max-width:860px){
  .actionbar{flex-wrap:wrap;border-radius:22px;padding:9px}
  .actionbar-btns{margin-left:0;width:100%}
  .actionbar-btns .btn{flex:1;justify-content:center}
}

/* audits deja construits, sur la page d'entree */
.recent{margin-top:34px;display:flex;flex-direction:column;gap:10px}
.recent-h{font-size:13px;font-weight:600;letter-spacing:-.02em;color:var(--ink-2)}
.recent-l{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.rec{display:flex;flex-direction:column;gap:3px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:16px;padding:12px 15px;text-decoration:none;color:inherit;transition:border-color .14s,background .14s}
.rec:hover{border-color:var(--accent-wash);background:var(--accent-tint)}
.rec-t{font-size:13.5px;font-weight:500;letter-spacing:-.02em;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.rec-s{font-size:12px;color:var(--ink-3)}

/* le prix du concurrent, a cote de sa part de clics */
.rc-p{display:flex;align-items:baseline;gap:9px;margin-top:9px;padding-top:9px;
  border-top:1px solid var(--line-soft)}
.rc-price{font-size:15px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.rc-sold{font-size:12px;color:var(--ink-3)}
.btn.busy{opacity:.75;cursor:progress}

/* une autre fiche de la marque n'est pas une alerte, c'est le catalogue */
.pill.own{background:var(--accent-tint);color:var(--accent-deep)}

/* une fiche sans image porte une vignette neutre : un trou se lit comme un bug */
.rc-void{display:flex;align-items:center;justify-content:center;background:var(--surface-2);
  border:1px solid var(--line);color:var(--ink-3);font-size:20px;font-weight:600;
  letter-spacing:-.03em;border-radius:14px}
.lockbox .btn{margin-top:4px}

/* le lanceur du chat, et la fleche qui le designe */
.ask{position:fixed;right:24px;bottom:24px;z-index:2147483000;display:flex;
  flex-direction:column;align-items:center;gap:2px}
.ask-hint{display:flex;flex-direction:column;align-items:center;gap:0;pointer-events:none;
  opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.ask-hint.on{opacity:1;transform:translateY(0)}
.ask-hint-t{font-size:15px;font-weight:500;letter-spacing:-.02em;color:var(--ink-2);
  white-space:nowrap;transform:rotate(-5deg);margin-right:14px}
.ask-hint-a{width:34px;height:42px;color:var(--ink-3);margin-right:2px}

.ask-btn{position:relative;width:58px;height:58px;border-radius:50%;border:none;cursor:pointer;
  background:var(--accent-deep);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 8px rgba(10,89,218,.3),0 12px 26px -8px rgba(10,89,218,.55);
  transition:transform .18s,box-shadow .18s,background .18s}
.ask-btn svg{width:26px;height:26px;position:relative;z-index:1}
.ask-btn:hover{background:#0847b0;transform:translateY(-2px);
  box-shadow:0 4px 10px rgba(8,71,176,.34),0 16px 32px -8px rgba(8,71,176,.6)}
.ask-btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* Un halo qui part du bouton, comme la pulsation du bouton principal : il
   appelle le clic sans bouger la mise en page. */
.ask-ring{position:absolute;inset:0;border-radius:50%;background:var(--accent-deep);
  animation:ask-ring 2.6s cubic-bezier(.22,.61,.36,1) infinite}
@keyframes ask-ring{0%{transform:scale(1);opacity:.45}70%,100%{transform:scale(1.65);opacity:0}}
@media (max-width:640px){.ask{right:16px;bottom:16px}.ask-hint{display:none}}
@media (prefers-reduced-motion:reduce){.ask-ring{animation:none}.ask-hint{transition:none}}