/* Le Point IA hebdo (scripts/point_ia_weekly.py) - pages /blog/ et SPA (app.html).
   Direction artistique bento en noir et blanc : mêmes jetons que les fiches
   (--card, --hair, --ink, --soft, --muted de satellite.css), avec repli sur les
   jetons de la SPA (--bg-surface, --border-subtle, --text-*). Aucune couleur :
   les écarts se lisent aux flèches ▲ ▼ et à l'intensité du gris. */

.piav2 {
  --piav2-card: var(--card, var(--bg-surface, #101010));
  --piav2-line: var(--hair, var(--border-subtle, rgba(255, 255, 255, .09)));
  --piav2-ink: var(--ink, var(--text-strong, #f4f7f5));
  --piav2-soft: var(--soft, var(--text-primary, #d7ddd7));
  --piav2-muted: var(--muted, var(--text-secondary, #aeb8b4));
  display: grid;
  gap: 16px;
  color: var(--piav2-soft);
}
.piav2 p { margin: 0; }
.piav2 a { color: var(--piav2-ink); text-decoration: underline; text-decoration-color: var(--piav2-line); text-underline-offset: 3px; }
.piav2 a:hover { text-decoration-color: currentColor; }
.piav2 a:focus-visible { outline: 2px solid var(--piav2-ink); outline-offset: 2px; border-radius: 2px; }

.piav2-panel {
  min-width: 0;
  padding: 22px 24px;
  border: 1px solid var(--piav2-line);
  border-radius: 14px;
  background: var(--piav2-card);
}
.piav2-kicker {
  margin: 0 0 10px !important;
  color: var(--piav2-muted);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.piav2-title {
  margin: 0 0 16px !important;
  color: var(--piav2-ink);
  font-size: 1.06rem !important;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.3;
}
.piav2-muted { display: block; color: var(--piav2-muted); font-size: .84rem; line-height: 1.5; }
.piav2-note { color: var(--piav2-muted); font-size: .78rem; line-height: 1.55; }
.piav2-text { margin-bottom: 14px !important; line-height: 1.65; }

/* Chapeau */
.piav2-hero { padding: 28px 30px; }
.piav2-lede { color: var(--piav2-ink); font-size: clamp(1.1rem, 2vw, 1.28rem); font-weight: 500; line-height: 1.6; letter-spacing: -.01em; }

/* Chiffres clés */
.piav2-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.piav2-kpi { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 20px 22px; border: 1px solid var(--piav2-line); border-radius: 14px; background: var(--piav2-card); }
.piav2-kpi .piav2-kicker { margin-bottom: 2px !important; }
.piav2-kpi-value,
.piav2-stat-value { color: var(--piav2-ink); font-size: clamp(2.2rem, 5vw, 2.9rem); font-weight: 760; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.piav2-stat-value { font-size: 1.9rem; }
.piav2-kpi-ref { color: var(--piav2-muted); font-size: .84rem; }
.piav2-kpi-read { margin-top: auto !important; padding-top: 10px; border-top: 1px solid var(--piav2-line); color: var(--piav2-soft); font-size: .84rem; line-height: 1.45; }
.piav2-delta { color: var(--piav2-ink); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.piav2-spark { display: flex; align-items: flex-end; gap: 3px; height: 34px; color: var(--piav2-ink); }
.piav2-bar { flex: 1; min-width: 0; border-radius: 2px 2px 0 0; background: currentColor; opacity: .2; }
.piav2-bar.is-now { opacity: 1; }

/* Bento */
.piav2-bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.piav2-bento > .is-wide { grid-column: 1 / -1; }

.piav2-rows { display: grid; margin: 0 0 12px; padding: 0; list-style: none; }
.piav2-row,
.piav2-amount-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 11px 0; border-top: 1px solid var(--piav2-line); margin: 0; }
.piav2-rows > li:first-child { border-top: 0; padding-top: 2px; }
.piav2-row-main { display: grid; gap: 3px; min-width: 0; }
.piav2-row-main strong { color: var(--piav2-ink); font-weight: 650; }
.piav2-row-main a { overflow-wrap: anywhere; }
.piav2-kicker + .piav2-rows { margin-top: -2px; }
.piav2-rows + .piav2-kicker { margin-top: 14px !important; }

.piav2-amount-row { justify-content: flex-start; }
.piav2-amount { flex: 0 0 9.5rem; color: var(--piav2-ink); font-size: 1.05rem; font-weight: 760; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

.piav2-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 12px; }
.piav2-stat { display: grid; gap: 6px; padding: 16px 18px; border: 1px solid var(--piav2-line); border-radius: 10px; }
.piav2-stats + .piav2-note { margin-bottom: 18px; }

@media (max-width: 900px) {
  .piav2-bento { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .piav2-kpis { grid-template-columns: 1fr; }
  .piav2-panel, .piav2-hero { padding: 18px; }
  .piav2-amount-row { display: grid; gap: 4px; }
  .piav2-amount { flex: none; }
}

/* Page statique : gabarit large du Point IA, en-tête sans dek (le chapeau est dans le bento). */
.point-ia-article .piav2 { margin-top: 8px; }
.point-ia-article .pia-hero.is-hebdo { margin-bottom: 28px; }
.point-ia-article .pia-hero.is-hebdo h1 { margin-bottom: 0; }

/* « À lire aussi » : satellite-modern.css le peint en or (--color-gold) ; sur le
   Point IA, la DA est noir et blanc. */
html body.satellite-modern .section-related .section-kicker,
html body.satellite-modern .section-related .post-card .post-date {
  color: var(--muted, var(--text-secondary, #aeb8b4)) !important;
}
html body.satellite-modern .section-related .post-card:hover .post-title { text-decoration: underline; text-underline-offset: 3px; }

/* Halo doré du fond commun (satellite-modern.css) retiré sur les articles du
   blog : ce fichier n'est chargé que par eux et par app.html. */
html body.satellite-modern:has(.article-wrap) { background-image: none !important; }