/* Roue des biais cognitifs — biais-psychologiques.com */
.bp-roue {
  --bp-tmi: #00897b;
  --bp-nem: #3b63d6;
  --bp-fast: #4a8a00;
  --bp-mem: #7a6f62;
  --bp-ink: #1d1d1f;
  --bp-muted: #7a7a7a;
  --bp-line: #e3e3e3;
  --bp-bg: transparent;
  --bp-hub: #ffffff;
  --bp-font-biais: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
  max-width: 1100px;
  margin: 2rem auto;
  padding: 0;
  color: var(--bp-ink);
  background: var(--bp-bg);
  font-family: inherit;
}
/* Variante sombre : [roue_biais theme="sombre"] */
.bp-roue.bp-roue--sombre {
  --bp-tmi: #3cc7b4;
  --bp-nem: #8ea9ff;
  --bp-fast: #a6d65a;
  --bp-mem: #c9bfae;
  --bp-ink: #f4f4f5;
  --bp-muted: #9aa0a6;
  --bp-line: #2b2f36;
  --bp-bg: #111317;
  --bp-hub: #1a1d22;
  padding: 1.5rem 1rem;
  border-radius: 16px;
}
.bp-roue .q-tmi  { --c: var(--bp-tmi); }
.bp-roue .q-nem  { --c: var(--bp-nem); }
.bp-roue .q-fast { --c: var(--bp-fast); }
.bp-roue .q-mem  { --c: var(--bp-mem); }

.bp-roue__svg { display: block; width: 100%; height: auto; font-family: inherit; overflow: visible; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.bp-roue.is-link-hot .bp-roue__svg { cursor: pointer; }

/* Rendu animé (JS actif) : biais et branches dessinés sur un canvas au-dessus du SVG.
   Le SVG d'origine reste présent (liens, clavier, SEO) mais n'est plus peint. */
.bp-roue__stage { position: relative; }
.bp-roue__canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.bp-roue.bp-js .leaves,
.bp-roue.bp-js .fans { opacity: 0; }
.bp-roue__svg text { font-family: inherit; }

/* Branches */
.bp-roue .fan { fill: none; stroke: var(--c); stroke-width: .7; opacity: .45; transition: opacity .25s, stroke-width .25s; }

/* Biais */
.bp-roue .leaf { transition: opacity .25s; }
.bp-roue .leaf .lt { fill: var(--c); dominant-baseline: central; font-family: var(--bp-font-biais); opacity: .85; }
.bp-roue .leaf.has-link .lt { opacity: 1; font-weight: 700; }
.bp-roue .leaf.has-link { cursor: pointer; }
.bp-roue .leaf:focus { outline: none; }
.bp-roue .hit { pointer-events: stroke; }
.bp-roue .dot { fill: var(--c); }
.bp-roue .dot-in { fill: #fff; pointer-events: none; }
.bp-roue .leaf.is-hot .lt { fill: var(--bp-ink); font-weight: 800; opacity: 1; }
.bp-roue .leaf.is-hot .dot { fill: var(--bp-ink); }
.bp-roue .leaf.is-hot .dot-in { fill: var(--bp-hub); }
.bp-roue .leaf.has-link.is-hot .lt { text-decoration: underline; }

/* Familles (stratégies) */
.bp-roue .ring { fill: none; stroke: var(--bp-line); }
.bp-roue .gnode { cursor: pointer; }
.bp-roue .gnode:focus { outline: none; }
.bp-roue .gnode circle { fill: var(--bp-hub); stroke: var(--c); stroke-width: 2.5; transition: fill .2s; }
.bp-roue .gnode text { fill: var(--c); font-size: 15px; font-weight: 700; transition: fill .2s; }
.bp-roue .gnode:hover circle,
.bp-roue .gnode.is-on circle { fill: var(--c); }
.bp-roue .gnode.is-on text { fill: var(--bp-ink); }
.bp-roue .gnode:focus-visible circle { stroke: var(--bp-ink); }

/* Quadrants */
.bp-roue .qname { fill: var(--c); font-size: 30px; font-weight: 800; cursor: default; }

/* Centre */
.bp-roue .hub { fill: var(--bp-hub); stroke: var(--bp-line); stroke-width: 1.5; }
.bp-roue .hub-num { font-size: 46px; font-weight: 800; text-anchor: middle; fill: var(--bp-ink); transition: opacity .2s; }
.bp-roue .hub-sub { font-size: 13px; letter-spacing: .25em; text-anchor: middle; fill: var(--bp-muted); transition: opacity .2s; }
.bp-roue .hub-fam { opacity: 0; transition: opacity .2s; pointer-events: none; }
.bp-roue .hf-name { font-size: 19px; font-weight: 800; text-anchor: middle; fill: var(--bp-ink); }
.bp-roue .hf-meta { font-size: 12px; font-weight: 600; text-anchor: middle; fill: var(--c); }

/* État actif */
.bp-roue.is-active .hub-num,
.bp-roue.is-active .hub-sub { opacity: 0; }
.bp-roue.is-active .hub-fam { opacity: 1; }
.bp-roue.is-active .leaf:not(.is-on) { opacity: .5; }
.bp-roue.is-active .fan:not(.is-on) { opacity: .25; }
.bp-roue.is-active .fan.is-on { opacity: .9; stroke-width: 1; }
.bp-roue .fan.is-hot { stroke: var(--bp-ink); stroke-width: 1.6; opacity: 1; }

/* Légende + liste */
.bp-roue__legende { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem;
  margin-top: .75rem; font-size: .85rem; color: var(--bp-muted); }
.bp-roue__legende a { color: inherit; }
.bp-roue__liste { margin-top: 1.5rem; border-top: 1px solid var(--bp-line); padding-top: 1rem; }
.bp-roue__liste summary { cursor: pointer; font-weight: 700; }
.bp-roue__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin-top: 1rem; }
.bp-roue__quad h3 { color: var(--c); font-size: 1.15rem; margin: 0 0 .5rem; }
.bp-roue__quad h4 { font-size: .95rem; margin: 1rem 0 .2rem; color: var(--bp-ink); }
.bp-roue__quad p { font-size: .85rem; color: var(--bp-muted); margin: 0 0 .3rem; }
.bp-roue__quad ul { margin: 0; padding-left: 1.1rem; font-size: .9rem; line-height: 1.5; }
.bp-roue__quad a { color: var(--c); font-weight: 600; }

@media (max-width: 640px) {
  .bp-roue { margin: 1rem -12px; }
  .bp-roue__legende { padding: 0 12px; }
  .bp-roue__liste { padding: 1rem 12px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bp-roue * { transition: none !important; }
}