/* BlockPulseNews — styles communs des widgets (lib/widgets.php) : pages
   /widget/…, section calculatrice de /outils, aperçus de /widgets.
   Thèmes : .bpw--dark (par défaut) et .bpw--light ; .bpw--inline retire la
   carte quand le composant est posé dans une section du site.
   Aucun style en ligne : la CSP des widgets (.htaccess) les interdit. */
.bpw {
  --bpw-bg: #111a2e;
  --bpw-border: rgba(142, 68, 173, .35);
  --bpw-text: #e6e9ef;
  --bpw-muted: #9ba5b7;
  --bpw-input: rgba(255, 255, 255, .06);
  --bpw-accent: #8E44AD;
  --bpw-accent-2: #6c5ce7;
  --bpw-link: #c4b5fd;
  --bpw-good: #34d399;
  --bpw-warn: #fbbf24;
  --bpw-bad: #f87171;
  box-sizing: border-box;
  container-type: inline-size;
  width: 100%;
  padding: 16px;
  border: 1px solid var(--bpw-border);
  border-radius: 16px;
  background: var(--bpw-bg);
  color: var(--bpw-text);
  font: 15px/1.45 system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
.bpw--light {
  --bpw-bg: #ffffff;
  --bpw-border: rgba(108, 92, 231, .28);
  --bpw-text: #1a1f2b;
  --bpw-muted: #556072;
  --bpw-input: #f6f4fb;
  --bpw-link: #5b3fd1;
  --bpw-good: #047857;
  --bpw-warn: #8a4b00;
  --bpw-bad: #b91c1c;
}
.bpw--inline { padding: 0; border: 0; background: transparent; font-family: inherit; }
.bpw *, .bpw *::before, .bpw *::after { box-sizing: border-box; }

/* Page du widget encadré (widget/calculatrice.php). */
.bpw-body { margin: 0; background: transparent; }
.bpw-page { padding: 2px; }
.bpw-title { margin: 0 0 12px; color: var(--bpw-text); font-size: 17px; line-height: 1.3; font-weight: 700; }

.bpw-form { margin: 0; }
.bpw-side { margin: 0 0 12px; padding: 0; border: 0; min-width: 0; }
.bpw-label { display: block; margin-bottom: 5px; color: var(--bpw-muted); font-size: 13px; font-weight: 600; }
.bpw-label em { font-style: normal; font-weight: 400; }
.bpw-seg { display: flex; gap: 6px; }
.bpw-seg label { position: relative; flex: 1 1 0; min-width: 0; cursor: pointer; }
.bpw-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bpw-seg span {
  display: block; padding: 9px 8px; border: 1px solid var(--bpw-border); border-radius: 10px;
  background: var(--bpw-input); color: var(--bpw-muted); font-size: 14px; font-weight: 700; text-align: center;
}
.bpw-seg input:checked + span {
  border-color: transparent; color: #fff;
  background: linear-gradient(90deg, var(--bpw-accent), var(--bpw-accent-2));
}
.bpw-seg input:focus-visible + span { outline: 3px solid var(--bpw-link); outline-offset: 2px; }

.bpw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bpw-field { display: block; min-width: 0; }
.bpw-field--wide { grid-column: 1 / -1; }
.bpw-field input {
  width: 100%; min-width: 0; padding: 9px 11px; border: 1px solid var(--bpw-border); border-radius: 10px;
  background: var(--bpw-input); color: var(--bpw-text); font: inherit; font-size: 16px;
}
.bpw-field input:focus { outline: 2px solid var(--bpw-accent-2); outline-offset: 1px; }

.bpw-result { margin-top: 14px; min-height: 64px; }
.bpw-muted { margin: 0; color: var(--bpw-muted); font-size: 14px; }
.bpw-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bpw-fig {
  min-width: 0; padding: 10px 12px; border: 1px solid var(--bpw-border); border-radius: 12px; background: var(--bpw-input);
}
.bpw-fig span { display: block; color: var(--bpw-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.bpw-fig strong { display: block; margin: 2px 0; font-size: 20px; line-height: 1.2; overflow-wrap: anywhere; }
.bpw-fig small { display: block; color: var(--bpw-muted); font-size: 12px; }
.bpw-fig.is-bad strong { color: var(--bpw-bad); }
.bpw-fig.is-good strong { color: var(--bpw-good); }
.bpw-msg { margin: 10px 0 0; font-size: 14px; }
.bpw-msg.is-good { color: var(--bpw-good); }
.bpw-msg.is-warn { color: var(--bpw-warn); }
.bpw-msg.is-bad { color: var(--bpw-bad); }

.bpw-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px;
  margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--bpw-border); font-size: 13px;
}
.bpw-foot a { color: var(--bpw-link); text-decoration: none; }
.bpw-foot a:hover { text-decoration: underline; }
.bpw-brand { color: var(--bpw-muted) !important; }
.bpw-brand strong { color: var(--bpw-text); }

/* Largeur du composant (et non de la page) : iframe étroite ou colonne. */
@container (min-width: 560px) {
  .bpw-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container (max-width: 400px) {
  .bpw-figs { gap: 6px; }
  .bpw-fig { padding: 8px; }
  .bpw-fig span { font-size: 10.5px; letter-spacing: .02em; }
  .bpw-fig strong { font-size: 16px; }
  .bpw-fig small { font-size: 11px; }
}

/* Listes déroulantes (simulateur de staking). */
.bpw-field select {
  width: 100%; min-width: 0; padding: 9px 11px; border: 1px solid var(--bpw-border); border-radius: 10px;
  background: var(--bpw-input); color: var(--bpw-text); font: inherit; font-size: 16px;
}
.bpw--dark .bpw-field select option { background: #111a2e; color: #e6e9ef; }
.bpw-field select:focus { outline: 2px solid var(--bpw-accent-2); outline-offset: 1px; }
.bpw-note { margin: 10px 0 0; color: var(--bpw-muted); font-size: 12px; }

/* Graphique des simulateurs (widget/simulateurs.js). */
.bpw-chart-wrap { margin-top: 12px; }
.bpw-chart { display: block; width: 100%; height: auto; }
.bpw-chart-axis { stroke: var(--bpw-border); stroke-width: 1; }
.bpw-chart-label { fill: var(--bpw-muted); font-size: 9px; }
.bpw-line { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.bpw-line.is-main { stroke: var(--bpw-accent-2); }
.bpw-line.is-alt { stroke: var(--bpw-muted); stroke-dasharray: 4 4; }
.bpw-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 4px 0 0; color: var(--bpw-muted); font-size: 12px; }
.bpw-legend span::before { content: ""; display: inline-block; width: 14px; height: 0; margin-right: 6px; vertical-align: middle; border-top: 2px solid var(--bpw-accent-2); }
.bpw-legend span.is-alt::before { border-top: 2px dashed var(--bpw-muted); }

/* Fear & Greed (bp_widget_fng_markup) : couleurs de /indices/fear-greed. */
.bpw { --fng-extreme-fear: #ef4444; --fng-fear: #f59e0b; --fng-neutral: #a78bfa; --fng-greed: #10b981; --fng-extreme-greed: #22d3ee; }
.bpw--light { --fng-extreme-fear: #c81e1e; --fng-fear: #b45309; --fng-neutral: #6d4fd6; --fng-greed: #047857; --fng-extreme-greed: #0e7490; }
.bpw-fng { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 18px; }
.bpw-gauge { width: 200px; max-width: 100%; height: auto; }
.bpw-arc { fill: none; stroke-width: 16; }
.bpw-arc--extreme-fear { stroke: var(--fng-extreme-fear); }
.bpw-arc--fear { stroke: var(--fng-fear); }
.bpw-arc--neutral { stroke: var(--fng-neutral); }
.bpw-arc--greed { stroke: var(--fng-greed); }
.bpw-arc--extreme-greed { stroke: var(--fng-extreme-greed); }
.bpw-needle { stroke: var(--bpw-text); stroke-width: 3; stroke-linecap: round; }
.bpw-hub { fill: var(--bpw-text); }
.bpw-fng-value { text-align: center; }
.bpw-fng-value strong { display: block; font-size: 44px; line-height: 1; }
.bpw-fng-value span { display: block; margin-top: 4px; font-size: 16px; font-weight: 700; }
.bpw-zone--extreme-fear { color: var(--fng-extreme-fear); }
.bpw-zone--fear { color: var(--fng-fear); }
.bpw-zone--neutral { color: var(--fng-neutral); }
.bpw-zone--greed { color: var(--fng-greed); }
.bpw-zone--extreme-greed { color: var(--fng-extreme-greed); }
.bpw-fng-ago { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; }
.bpw-fng-ago div { min-width: 0; padding: 8px 10px; border: 1px solid var(--bpw-border); border-radius: 10px; background: var(--bpw-input); }
.bpw-fng-ago dt { color: var(--bpw-muted); font-size: 12px; font-weight: 700; }
.bpw-fng-ago dd { margin: 2px 0 0; font-size: 13px; font-weight: 600; }
.bpw-source { margin: 10px 0 0; color: var(--bpw-muted); font-size: 12px; }
.bpw-source a { color: var(--bpw-link); }

/* Lexique (bp_widget_lexique_markup). */
.bpw-kicker { margin: 0; color: var(--bpw-link); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.bpw-term { margin: 4px 0 8px; color: var(--bpw-text); font-size: 22px; line-height: 1.25; }
.bpw-def { margin: 0; font-size: 15px; line-height: 1.55; }

@container (max-width: 400px) {
  .bpw-fng-ago { grid-template-columns: 1fr; gap: 6px; }
  .bpw-fng-ago div { display: flex; justify-content: space-between; gap: 8px; }
  .bpw-fng-ago dd { margin: 0; text-align: right; }
}