/* ═══════════════════════════════════════════════════════════════════
   Section « Le bon niveau de puissance » — remplace `.audiences`.

   LES ONGLETS FONCTIONNENT SANS JAVASCRIPT
   Trois radios masquées et le sélecteur `~` : cocher une radio affiche
   le panneau correspondant. L'ancienne version passait par script.js,
   qui réécrivait le contenu d'un panneau unique. Ce code JS devient
   inerte de lui-même — il interroge `.audience-tabs button`, qui
   n'existe plus, et une NodeList vide ne fait rien.

   LES RADIOS NE SONT PAS `display: none`
   Elles sont réduites à 1 px et transparentes, mais restent dans le flux
   et donc ACCESSIBLES AU CLAVIER. Les masquer réellement retirerait
   toute possibilité de changer d'onglet sans souris.

   L'ÉCHELLE DU TITRE suit celle du reste de la page — voir
   titres-sections.css, qui vise `.pw-section h2`.
   ═══════════════════════════════════════════════════════════════════ */

.pw-section {
  --pw-edge:  #0B2418;   /* contour — la signature de la DA */
  /* Teinte du logo (#49A25E, 134°), assombrie à 31 % de clarté.

     POURQUOI PAS LE #49A25E EXACT
     Mesuré : 2,60:1 sur le panneau, 2,85:1 sur la pastille, 3,18:1 sur
     blanc. Un logo est exempté des règles de contraste — il peut être
     clair. Des traits, des coches et des libellés ne le sont pas : sous
     3:1, un trait fin devient invisible pour beaucoup de gens.

     #316D3F garde la teinte ET la saturation du logo, et passe partout :
     5,07:1 sur le panneau, 6,20:1 sur blanc, 5,55:1 sur la pastille.
     L'ancien #245F38 était à 141° — une famille voisine, pas celle de
     la marque. Ce vert-ci est donc PLUS proche du logo, pas seulement
     plus sombre. */
  --pw-green: #316D3F;
  --pw-panel: #D8EFD2;   /* fond du panneau */
  --pw-tint:  #E8F6EC;   /* surfaces douces dans la maquette */
  --pw-line:  #E7EDE9;   /* filet du contenu interne */
  --pw-muted: #4A6558;   /* 5,22:1 sur le panneau */
  /* #5F7268 et non #6D8177 : l'original donnait 4,15:1 sur blanc et
     3,40:1 sur la pastille #E8F6EC — sous le seuil dans les deux cas.
     Ici 5,13:1 et 4,60:1. Mesuré, pas estimé. */
  --pw-soft:  #5F7268;
  --pw-font:  inherit;   /* hérite du Hanken Grotesk du site */
  --pw-max:   1180px;

  container-type: inline-size;
  display: block;
  padding: 72px 24px;
  font-family: var(--pw-font);
  color: var(--pw-edge);
  -webkit-font-smoothing: antialiased;
}
.pw-inner { max-width: var(--pw-max); margin-inline: auto; }

/* ── En-tête ────────────────────────────────────────────────────── */
.pw-eyebrow {
  text-align: center;
  font-size: 11.5px; font-weight: 800; letter-spacing: .16em;
  color: var(--pw-soft);
}
.pw-h2 {
  margin: 14px 0 0;
  text-align: center;
  font-weight: 700;
  text-wrap: balance;
  /* taille, interligne et approche : titres-sections.css */
}

/* ── Onglets : radios masquées, zéro JS ─────────────────────────── */
.pw-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pw-tabs { margin: 30px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pw-tab {
  cursor: pointer; user-select: none;
  padding: 12px 20px; border-radius: 999px;
  background: #fff; border: 1.5px solid var(--pw-edge);
  font-size: 14.5px; font-weight: 600; color: var(--pw-edge);
  transition: background-color .16s ease, color .16s ease;
}
.pw-tab:hover { background: var(--pw-tint); }
#pw-t1:checked ~ .pw-tabs [for="pw-t1"],
#pw-t2:checked ~ .pw-tabs [for="pw-t2"],
#pw-t3:checked ~ .pw-tabs [for="pw-t3"] { background: var(--pw-edge); color: #fff; }
/* Contour de 3 px, comme partout ailleurs sur la page. */
#pw-t1:focus-visible ~ .pw-tabs [for="pw-t1"],
#pw-t2:focus-visible ~ .pw-tabs [for="pw-t2"],
#pw-t3:focus-visible ~ .pw-tabs [for="pw-t3"] { outline: 3px solid var(--pw-green); outline-offset: 3px; }

/* ── Panneaux ───────────────────────────────────────────────────── */
.pw-panels { margin-top: 30px; }
.pw-panel { display: none; }
#pw-t1:checked ~ .pw-panels .pw-panel--1,
#pw-t2:checked ~ .pw-panels .pw-panel--2,
#pw-t3:checked ~ .pw-panels .pw-panel--3 { display: grid; }

.pw-panel {
  box-sizing: border-box;
  background: var(--pw-panel);
  border: 1.5px solid var(--pw-edge);
  border-radius: 24px;
  padding: 40px 28px;
  grid-template-columns: 1fr;
  gap: 40px; align-items: center;
}
@container (min-width: 900px) {
  .pw-panel { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: 44px; padding: 44px 40px; }
}

.pw-kicker { font-size: 11px; font-weight: 800; letter-spacing: .16em; color: var(--pw-green); }
.pw-h3 {
  margin: 14px 0 0;
  font-size: clamp(24px, 2.6cqw, 34px);
  font-weight: 700; line-height: 1.14; letter-spacing: -0.025em;
  text-wrap: balance;
}
.pw-text { margin: 16px 0 0; font-size: 14.5px; line-height: 1.62; color: var(--pw-muted); text-wrap: pretty; }
.pw-list { margin: 22px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.pw-list li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; }
.pw-list svg { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: var(--pw-green); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pw-cta {
  margin-top: 28px; display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 22px; border-radius: 10px;
  background: var(--pw-edge); color: #fff; border: 1.5px solid var(--pw-edge);
  font-size: 14.5px; font-weight: 600; text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease;
}
.pw-cta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.pw-cta:hover { background: var(--pw-green); border-color: var(--pw-green); }
.pw-cta:hover svg { transform: translateX(3px); }
.pw-cta:focus-visible { outline: 3px solid var(--pw-green); outline-offset: 3px; }

/* ══ Maquette : dessin de 620×400 mis à l'échelle par --u ════════════
   `--u` vaut 100cqw / 620 : toutes les cotes du dessin sont exprimées
   en multiples de cette unité, donc la maquette se réduit sans jamais
   se déformer.

   `container-type` est posé sur `.pw-fig`, et `--u` n'est utilisé
   QUE dans ses descendants. Une valeur en `cqw` appliquée au conteneur
   lui-même se résoudrait contre un ANCÊTRE, pas contre lui — piège
   classique, et l'écart se compte en centaines de pixels. */
.pw-fig { container-type: inline-size; width: 100%; --u: 1px; }
@supports (container-type: inline-size) { .pw-fig { --u: max(calc(100cqw / 620), 0.6px); } }
.pw-stage { position: relative; width: calc(620 * var(--u)); height: calc(400 * var(--u)); margin-inline: auto; }
.pw-wires { position: absolute; inset: 0; width: 100%; height: 100%; }

.pw-tag {
  position: absolute; left: 0; top: calc(18 * var(--u));
  height: calc(24 * var(--u)); box-sizing: border-box;
  background: #fff; border: 1.5px solid var(--pw-edge); border-radius: calc(8 * var(--u));
  padding: 0 calc(9 * var(--u)); display: flex; align-items: center; gap: calc(5 * var(--u));
  font-size: calc(9 * var(--u)); font-weight: 800; letter-spacing: .08em; white-space: nowrap;
}
.pw-tag em { font-style: normal; color: var(--pw-green); }

.pw-pin {
  position: absolute; left: calc(244 * var(--u)); top: calc(28 * var(--u));
  width: calc(180 * var(--u)); box-sizing: border-box; z-index: 2;
  background: #fff; border: 1.5px solid var(--pw-edge); border-radius: calc(12 * var(--u));
  padding: calc(9 * var(--u)) calc(11 * var(--u)) calc(9 * var(--u)) calc(9 * var(--u));
  display: flex; align-items: center; gap: calc(9 * var(--u));
}
.pw-pin__i { width: calc(26 * var(--u)); height: calc(26 * var(--u)); flex-shrink: 0; border-radius: calc(7 * var(--u)); background: var(--pw-tint); display: grid; place-items: center; }
.pw-pin__i svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); fill: none; stroke: var(--pw-green); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pw-pin__t { font-size: calc(10 * var(--u)); font-weight: 600; line-height: 1.35; }

.pw-cursor { position: absolute; left: calc(230 * var(--u)); top: calc(58 * var(--u)); width: calc(17 * var(--u)); height: calc(19 * var(--u)); z-index: 3; }

.pw-side {
  position: absolute; box-sizing: border-box;
  background: #fff; border: 1.5px solid var(--pw-edge); border-radius: calc(14 * var(--u));
  padding: calc(12 * var(--u)); display: flex; flex-direction: column; gap: calc(9 * var(--u));
}
.pw-side--l { left: 0; top: calc(106 * var(--u)); width: calc(146 * var(--u)); }
.pw-side--r { right: 0; top: calc(190 * var(--u)); width: calc(150 * var(--u)); }
.pw-side__h { display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(8 * var(--u)); font-weight: 800; letter-spacing: .12em; color: var(--pw-green); }
.pw-side__h svg { width: calc(11 * var(--u)); height: calc(11 * var(--u)); fill: none; stroke: var(--pw-green); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pw-row { display: flex; align-items: center; gap: calc(7 * var(--u)); font-size: calc(9 * var(--u)); font-weight: 600; white-space: nowrap; overflow: hidden; }
.pw-row span { overflow: hidden; text-overflow: ellipsis; }
.pw-chk { width: calc(12 * var(--u)); height: calc(12 * var(--u)); flex-shrink: 0; border-radius: 50%; background: var(--pw-tint); display: grid; place-items: center; }
.pw-chk svg { width: calc(7 * var(--u)); height: calc(7 * var(--u)); fill: none; stroke: var(--pw-green); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.pw-chk--off { background: #EEF1EF; }
.pw-row--off { color: var(--pw-soft); }

.pw-win {
  position: absolute; left: calc(168 * var(--u)); top: calc(56 * var(--u));
  width: calc(280 * var(--u)); height: calc(318 * var(--u)); box-sizing: border-box;
  background: #fff; border: 1.5px solid var(--pw-edge); border-radius: calc(16 * var(--u));
  overflow: hidden; display: flex; flex-direction: column;
}
.pw-win__bar { height: calc(26 * var(--u)); flex-shrink: 0; border-bottom: 1.5px solid var(--pw-edge); display: flex; align-items: center; gap: calc(5 * var(--u)); padding: 0 calc(11 * var(--u)); }
.pw-win__bar i { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; border: 1.5px solid var(--pw-edge); box-sizing: border-box; }
.pw-win__body { flex-grow: 1; min-height: 0; padding: calc(12 * var(--u)); display: flex; flex-direction: column; gap: calc(10 * var(--u)); }

.pw-kpi { border: 1px solid var(--pw-line); border-radius: calc(11 * var(--u)); padding: calc(10 * var(--u)); display: flex; flex-direction: column; gap: calc(7 * var(--u)); }
.pw-kpi__top { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(8 * var(--u)); }
.pw-kpi__lbl { font-size: calc(7.5 * var(--u)); font-weight: 800; letter-spacing: .12em; color: var(--pw-soft); }
.pw-kpi__val { margin-top: calc(3 * var(--u)); font-size: calc(17 * var(--u)); font-weight: 800; letter-spacing: -0.02em; }
.pw-kpi__chip { display: flex; align-items: center; gap: calc(4 * var(--u)); background: var(--pw-tint); color: var(--pw-edge); border-radius: 999px; padding: calc(3 * var(--u)) calc(7 * var(--u)); font-size: calc(8 * var(--u)); font-weight: 700; white-space: nowrap; }
.pw-kpi__chip svg { width: calc(9 * var(--u)); height: calc(9 * var(--u)); fill: none; stroke: var(--pw-edge); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pw-bar { height: calc(5 * var(--u)); border-radius: 999px; background: #ECF1EE; overflow: hidden; }
.pw-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--pw-green); }

.pw-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(7 * var(--u)); }
.pw-col__h { font-size: calc(6.8 * var(--u)); font-weight: 800; letter-spacing: .05em; color: var(--pw-green); background: var(--pw-tint); border-radius: calc(5 * var(--u)); padding: calc(4 * var(--u)) calc(5 * var(--u)); text-align: center; margin-bottom: calc(6 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-col--on .pw-col__h { background: var(--pw-green); color: #fff; }
.pw-mini { border: 1px solid var(--pw-line); border-radius: calc(7 * var(--u)); padding: calc(5 * var(--u)); display: flex; align-items: center; gap: calc(5 * var(--u)); margin-bottom: calc(5 * var(--u)); }
.pw-mini i { width: calc(11 * var(--u)); height: calc(11 * var(--u)); flex-shrink: 0; border-radius: 50%; background: var(--pw-tint); }
.pw-mini span { font-size: calc(7.2 * var(--u)); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-mini--on { border: 1.5px solid var(--pw-green); }
.pw-mini--on i { background: var(--pw-green); }

.pw-next {
  margin-top: auto; background: var(--pw-tint); border-radius: calc(9 * var(--u));
  padding: calc(8 * var(--u)) calc(9 * var(--u)); display: flex; align-items: center; gap: calc(8 * var(--u));
}
.pw-next__i { width: calc(20 * var(--u)); height: calc(20 * var(--u)); flex-shrink: 0; border-radius: calc(6 * var(--u)); background: var(--pw-edge); display: grid; place-items: center; }
.pw-next__i svg { width: calc(11 * var(--u)); height: calc(11 * var(--u)); fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pw-next__l { font-size: calc(6.8 * var(--u)); font-weight: 800; letter-spacing: .1em; color: var(--pw-soft); }
.pw-next__v { font-size: calc(9 * var(--u)); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (prefers-reduced-motion: reduce) {
  .pw-tab, .pw-cta, .pw-cta svg { transition: none; }
}

@media (prefers-contrast: more) {
  .pw-panel, .pw-tab, .pw-side, .pw-win, .pw-pin, .pw-tag { border-width: 2px; }
  .pw-text { color: #2A3B33; }
  .pw-eyebrow, .pw-row--off, .pw-kpi__lbl, .pw-next__l { color: #3D4A44; }
}

/* ── Une seule source pour la couleur des traits ────────────────────
   Le SVG des liaisons porte `stroke="#245F38"` en ATTRIBUT de
   présentation. Un attribut ne suit pas une variable CSS : sans cette
   règle, changer `--pw-green` recolorerait les coches, les libellés et
   les barres, mais laisserait les traits à l'ancienne teinte — un écart
   discret et d'autant plus long à diagnostiquer.

   Une déclaration CSS l'emporte sur l'attribut. La variable redevient
   donc la seule source, et le curseur (`fill="#0B2418"`) garde sa
   couleur propre : il représente un pointeur de souris, pas la marque. */
.pw-wires g { stroke: var(--pw-green); }