/* ═══════════════════════════════════════════════════════════════════════════
   L'onglet « Penseurs » des fiches (penseurs_fiche.js). Même grammaire que les
   fiches au standard NVIDIA : cartes blanches à filet léger, titre 15 px noir +
   complément gris, une carte seule = pleine largeur, une paire = même hauteur.
   Couleurs de la page : vert #00AB49 (convaincu), rouge #E5342E (sceptique),
   gris neutre au milieu — toujours DOUBLÉES d'un libellé écrit (contraste < 3:1
   sur blanc : la couleur seule ne porte jamais le sens).
   ═══════════════════════════════════════════════════════════════════════════ */
.per-page .fs-pane > .pf-racine,
.per-page .cry-pane > .pf-racine,
.pf-racine {
  background: none !important; border: 0 !important; box-shadow: none !important;
  border-radius: 0 !important; padding: 0 !important;
  display: flex; flex-direction: column; gap: 18px;
  --pf-pos: #00AB49; --pf-pos-t: #007A34; --pf-pos-f: rgba(0,171,73,.07);
  --pf-neg: #E5342E; --pf-neg-t: #B42520; --pf-neg-f: rgba(229,52,46,.07);
  --pf-mid: #9E9E9E; --pf-mid-t: #5F5F5F;
  --pf-encre: #0D0D0D; --pf-gris: #4D4D4D; --pf-pale: #6B6B6B; --pf-filet: rgba(13,13,13,.10);
  --pf-bleu: #1B4FD8;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--pf-encre);
}
/* Un débat VOISIN ne dit pas « convaincu / sceptique » : ses deux pôles n'ont pas de
   valence (« bulle IA » en vert se lisait comme une bonne nouvelle). Bleu et orange,
   validés daltonisme (ΔE 31) et contraste ≥ 3:1 ; le vert et le rouge restent
   réservés au verdict sur la fiche. */
.pf-racine .pf-mode-debat {
  --pf-pos: #1B4FD8; --pf-pos-t: #1B4FD8; --pf-pos-f: rgba(27,79,216,.06);
  --pf-neg: #D46A0A; --pf-neg-t: #A8520A; --pf-neg-f: rgba(212,106,10,.07);
}
.pf-racine .pf-carte {
  background: #FFFFFF; border: 1px solid var(--pf-filet); border-radius: 11px;
  padding: 16px 18px; min-width: 0;
}
.pf-racine .pf-charge { color: var(--pf-pale); font-size: 13px; }
.pf-racine .pf-titre {
  font-size: 15.5px; font-weight: 650; letter-spacing: -.1px; color: var(--pf-encre);
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 0 0 12px;
}
.pf-racine .pf-titre > span { font-size: 12px; font-weight: 400; color: #9E9E9E; letter-spacing: 0; }
.pf-racine .pf-intro { font-size: 13px; line-height: 1.55; color: var(--pf-gris); margin: -4px 0 12px; max-width: 880px; }
.pf-racine .pf-intro a, .pf-racine .pf-groupe a { color: var(--pf-bleu); text-decoration: none; border-bottom: 1px solid rgba(27,79,216,.3); }
.pf-racine .pf-note { font-size: 12px; line-height: 1.55; color: var(--pf-gris); margin: 12px 0 0; }
.pf-racine .pf-vide { font-size: 13px; color: var(--pf-pale); margin: 0; }

/* ── Les trois camps + la jauge ── */
/* En flux, pas en grille : les pôles d'un débat voisin sont parfois longs
   (« risque de plateforme / gouvernance amateur (« FTX 2.0 ») ») et une grille à
   colonnes « max-content » débordait de 31 px sur Perp DEX. */
.pf-racine .pf-camps {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin: 0 0 14px;
}
.pf-racine .pf-camp { display: flex; align-items: baseline; gap: 7px; min-width: 0; max-width: 100%; }
.pf-racine .pf-camp span { white-space: normal; line-height: 1.3; }
.pf-racine .pf-camps .pf-jauge { flex: 1 1 200px; }
.pf-racine .pf-camp b { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.pf-racine .pf-camp span { font-size: 13px; color: var(--pf-gris); }
.pf-racine .pf-camp::before { content: ""; flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; align-self: center; }
.pf-racine .pf-camp.pf-c-pos::before { background: var(--pf-pos); }
.pf-racine .pf-camp.pf-c-mid::before { background: var(--pf-mid); }
.pf-racine .pf-camp.pf-c-neg::before { background: var(--pf-neg); }
.pf-racine .pf-camp.pf-c-pos b { color: var(--pf-pos-t); }
.pf-racine .pf-camp.pf-c-neg b { color: var(--pf-neg-t); }
.pf-racine .pf-camp.pf-c-mid b { color: var(--pf-mid-t); }
.pf-racine .pf-jauge { display: flex; gap: 2px; height: 8px; min-width: 0; }
.pf-racine .pf-jauge i { display: block; height: 100%; border-radius: 4px; min-width: 0; flex-grow: 0; flex-shrink: 0; }
.pf-racine .pf-jauge i[style*="flex-basis:0.00%"] { display: none; }
.pf-racine .pf-jauge .pf-c-pos { background: var(--pf-pos); }
.pf-racine .pf-jauge .pf-c-mid { background: #D6D6D6; }
.pf-racine .pf-jauge .pf-c-neg { background: var(--pf-neg); }

/* ── La ligne de visages ── */
.pf-racine .pf-bande { position: relative; }
.pf-racine .pf-poles { display: flex; justify-content: space-between; gap: 16px; font-size: 12px; margin: 0 0 6px; }
.pf-racine .pf-pole { max-width: 46%; line-height: 1.35; }
.pf-racine .pf-pole-neg { color: var(--pf-neg-t); }
.pf-racine .pf-pole-pos { color: var(--pf-pos-t); text-align: right; }
.pf-racine .pf-zone { position: relative; min-height: 40px; }
.pf-racine .pf-fond {
  position: absolute; inset: 0; border-radius: 8px;
  background: linear-gradient(90deg, var(--pf-neg-f), rgba(255,255,255,0) 42%, rgba(255,255,255,0) 58%, var(--pf-pos-f));
}
.pf-racine .pf-milieu { position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px dashed rgba(13,13,13,.18); }
.pf-racine .pf-visages { position: absolute; inset: 0; }
.pf-racine .pf-axe {
  display: flex; justify-content: space-between; border-top: 1px solid rgba(13,13,13,.14);
  padding-top: 4px; font-size: 10.5px; color: #9E9E9E; font-variant-numeric: tabular-nums;
}

/* Un visage est un bouton : la page impose à TOUT bouton 14 px gras, pilule et
   marges (`.per-page button:not(.fs-tabbtn)` en !important) — on les défait ici. */
body .per-page .pf-racine button.pf-v,
body .pf-racine button.pf-v {
  /* Le site impose aussi 44 px de hauteur MINIMALE à tout bouton sur mobile (cible
     tactile) : sans ce `min-height: 0`, les visages devenaient des ovales de 24 × 44
     qui se chevauchaient (mesuré à 400 px le 30/09). */
  min-height: 0 !important; min-width: 0 !important; max-width: none !important;
  position: absolute; padding: 0 !important; margin: 0; border: 0; background: #FFFFFF;
  border-radius: 50% !important; font-size: 12px !important; cursor: pointer;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3.5px var(--pf-mid);
  transition: transform .12s ease, box-shadow .12s ease; z-index: 1;
}
body .pf-racine button.pf-v.pf-c-pos { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3.5px var(--pf-pos); }
body .pf-racine button.pf-v.pf-c-neg { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3.5px var(--pf-neg); }
body .pf-racine button.pf-v:hover, body .pf-racine button.pf-v:focus-visible { transform: scale(1.18); z-index: 3; outline: none; }
body .pf-racine button.pf-v.pf-sel { transform: scale(1.22); z-index: 4; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4.5px var(--pf-encre); }
.pf-racine .pf-face {
  display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; position: relative;
  background: #ECEEF3; flex: 0 0 auto;
}
.pf-racine .pf-face::before {
  content: attr(data-ini); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #6B6B6B;
}
.pf-racine .pf-face img { position: relative; width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-racine .pf-lecture {
  min-height: 20px; margin: 10px 0 0; font-size: 12.5px; color: var(--pf-gris); line-height: 1.5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pf-racine .pf-lecture b { color: var(--pf-encre); }
.pf-racine .pf-lecture-cit { color: var(--pf-pale); font-style: italic; }

/* ── Sa pensée, au clic ── */
.pf-racine .pf-pensee {
  margin: 14px 0 0; padding: 14px 16px; border-radius: 10px; background: #F7F8FA;
  border: 1px solid var(--pf-filet);
}
.pf-racine .pf-pensee-tete { display: flex; gap: 12px; align-items: flex-start; }
.pf-racine .pf-face-l { width: 52px; height: 52px; }
.pf-racine .pf-pensee-id { flex: 1 1 auto; min-width: 0; }
.pf-racine .pf-pensee-nom { font-size: 15px; font-weight: 650; }
.pf-racine .pf-pensee-metier { font-size: 12px; color: var(--pf-pale); margin-top: 1px; }
.pf-racine .pf-pensee-pos { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 6px; }
.pf-racine .pf-pensee-sur { font-size: 12px; color: var(--pf-pale); }
.pf-racine .pf-puce {
  display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px;
  background: #EFEFEF; color: var(--pf-mid-t);
}
.pf-racine .pf-puce.pf-c-pos { background: color-mix(in srgb, var(--pf-pos) 11%, #fff); color: var(--pf-pos-t); }
.pf-racine .pf-puce.pf-c-neg { background: color-mix(in srgb, var(--pf-neg) 11%, #fff); color: var(--pf-neg-t); }
body .per-page .pf-racine button.pf-x, body .pf-racine button.pf-x {
  min-height: 0 !important;
  border: 0; background: none; color: var(--pf-pale); cursor: pointer;
  font-size: 15px !important; font-weight: 400 !important; padding: 2px 6px !important; border-radius: 6px !important;
}
body .pf-racine button.pf-x:hover { background: rgba(13,13,13,.06); color: var(--pf-encre); }
.pf-racine .pf-cit {
  margin: 12px 0 0; padding: 0 0 0 12px; border-left: 3px solid rgba(13,13,13,.12);
  font-size: 13.5px; line-height: 1.55; color: var(--pf-encre);
}
.pf-racine .pf-verb { display: block; margin-top: 5px; font-size: 12.5px; font-style: italic; color: var(--pf-pale); }
.pf-racine .pf-cit-src { display: block; margin-top: 6px; }
.pf-racine .pf-video { font-size: 12px; font-weight: 600; color: var(--pf-bleu); text-decoration: none; white-space: nowrap; }
.pf-racine .pf-video:hover { text-decoration: underline; }
.pf-racine .pf-synthese { margin-top: 12px; }
.pf-racine .pf-attente { font-size: 12.5px; color: var(--pf-pale); }
.pf-racine .pf-syn-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pf-racine .pf-syn h6 {
  margin: 0 0 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--pf-pale);
}
.pf-racine .pf-syn p { margin: 0; font-size: 12.8px; line-height: 1.55; color: var(--pf-gris); }
.pf-racine .pf-syn-src { margin-top: 10px; font-size: 11.5px; color: #9E9E9E; }
.pf-racine .pf-lien {
  display: inline-block; margin-top: 12px; font-size: 12.5px; font-weight: 600; color: var(--pf-bleu); text-decoration: none;
}
.pf-racine .pf-lien:hover { text-decoration: underline; }

/* ── Les arguments des deux camps : une paire = même hauteur ── */
.pf-racine .pf-paire { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.pf-racine .pf-args { display: flex; flex-direction: column; }
.pf-racine .pf-args-pos { border-top: 3px solid var(--pf-pos); }
.pf-racine .pf-args-neg { border-top: 3px solid var(--pf-neg); }
.pf-racine .pf-arg { padding: 12px 0; border-top: 1px solid rgba(13,13,13,.07); }
.pf-racine .pf-arg:first-of-type { border-top: 0; padding-top: 2px; }
/* Carte fusionnée : deux colonnes en flux, filets en haut de chaque argument. */
.pf-racine .pf-args-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 26px; }
.pf-racine .pf-args-grille .pf-arg { border-top: 1px solid rgba(13,13,13,.07); padding: 12px 0; }
.pf-racine .pf-args-grille .pf-arg:nth-child(-n+2) { border-top: 0; padding-top: 2px; }
/* Filet bicolore en FOND (un border-image casserait les coins arrondis). */
.pf-racine .pf-args-melees { background: linear-gradient(90deg, var(--pf-neg) 0 50%, var(--pf-pos) 50% 100%) top / 100% 3px no-repeat, #FFFFFF; }
body .per-page .pf-racine button.pf-arg-qui, body .pf-racine button.pf-arg-qui {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 11px;
  align-items: center; width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
  padding: 0 !important; border-radius: 6px !important; font-size: 13px !important; font-weight: 400 !important;
}
.pf-racine .pf-arg-qui .pf-face { width: 36px; height: 36px; grid-row: 1 / span 2; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--pf-mid); }
.pf-racine .pf-arg-qui.pf-c-pos .pf-face { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--pf-pos); }
.pf-racine .pf-arg-qui.pf-c-neg .pf-face { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--pf-neg); }
.pf-racine .pf-arg-nom { font-size: 13.5px; font-weight: 650; color: var(--pf-encre); }
.pf-racine .pf-arg-qui:hover .pf-arg-nom { color: var(--pf-bleu); }
.pf-racine .pf-arg-pos { font-size: 11.5px; color: var(--pf-pale); }
.pf-racine .pf-arg-cit { margin: 8px 0 0; font-size: 13.2px; line-height: 1.55; color: var(--pf-encre); }
.pf-racine .pf-arg-src { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-top: 5px; }
.pf-racine .pf-arg-deb { font-size: 11.5px; color: #9E9E9E; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* ── Débat par débat ── */
.pf-racine .pf-debat { padding: 14px 0 12px; border-top: 1px solid rgba(13,13,13,.07); }
.pf-racine .pf-debat:first-of-type { border-top: 0; padding-top: 2px; }
.pf-racine .pf-debat-tete { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; }
.pf-racine .pf-debat-nom { font-size: 14px; font-weight: 650; }
.pf-racine .pf-debat-n { font-size: 12px; color: #9E9E9E; margin-left: auto; }
.pf-racine .pf-badge-portee { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; }
.pf-racine .pf-direct { background: rgba(27,79,216,.10); color: var(--pf-bleu); }
.pf-racine .pf-voisin { background: #EFEFEF; color: var(--pf-mid-t); }
.pf-racine .pf-pourquoi { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--pf-pale); }
.pf-racine .pf-pourquoi b { color: var(--pf-gris); font-weight: 600; }
.pf-racine .pf-groupe {
  margin: 16px 0 4px; padding-top: 12px; border-top: 1px solid rgba(13,13,13,.10);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--pf-pale);
}
.pf-racine .pf-groupe a { text-transform: none; letter-spacing: 0; font-size: 12.5px; }

/* ── Ce qu'ils en disent ── */
.pf-racine .pf-ment-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; }
.pf-racine .pf-ment { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 11px; padding: 11px 0; border-top: 1px solid rgba(13,13,13,.07); }
.pf-racine .pf-ment .pf-face { width: 34px; height: 34px; }
.pf-racine .pf-ment-qui { display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
.pf-racine .pf-ment-qui span { font-size: 11.5px; color: #9E9E9E; }
.pf-racine .pf-ment p { margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: var(--pf-encre); }

/* ── Qui en parle (aucun débat) ── */
.pf-racine .pf-parleurs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pf-racine .pf-parleur { display: block; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(13,13,13,.12); }
.pf-racine .pf-parleur .pf-face { width: 100%; height: 100%; }

.pf-racine .pf-pied { font-size: 11.5px; line-height: 1.55; color: #7A7A7A; margin: -4px 2px 0; }
.pf-racine .pf-pied a { color: var(--pf-bleu); text-decoration: none; }

/* Le nombre de penseurs sur le bouton de l'onglet. */
.pf-nb {
  display: inline-block; margin-left: 6px; padding: 0 6px; min-width: 18px; border-radius: 999px;
  background: rgba(27,79,216,.10); color: #1B4FD8; font-size: 11px; font-weight: 600; line-height: 17px;
  text-align: center; vertical-align: 1px; font-variant-numeric: tabular-nums;
}

/* La page grossit tout paragraphe sur mobile (règle `.per-page p`) : l'onglet garde
   ses tailles, celles des autres cartes de la fiche. */
.per-page .pf-racine p.pf-note, .per-page .pf-racine p.pf-pourquoi { font-size: 12px !important; line-height: 1.5 !important; }
.per-page .pf-racine p.pf-intro, .per-page .pf-racine p.pf-vide, .per-page .pf-racine .pf-ment p { font-size: 13px !important; line-height: 1.55 !important; }
.per-page .pf-racine p.pf-arg-cit { font-size: 13.2px !important; line-height: 1.55 !important; }
.per-page .pf-racine .pf-syn p { font-size: 12.8px !important; line-height: 1.55 !important; }
.per-page .pf-racine p.pf-pied { font-size: 11.5px !important; line-height: 1.55 !important; }

@media (max-width: 860px) {
  .pf-racine .pf-camps .pf-jauge { flex-basis: 100%; }
  .pf-racine .pf-syn-grille { grid-template-columns: minmax(0, 1fr); }
  .pf-racine .pf-ment-liste { grid-template-columns: minmax(0, 1fr); }
  .pf-racine .pf-args-grille { grid-template-columns: minmax(0, 1fr); }
  .pf-racine .pf-args-grille .pf-arg:nth-child(2) { border-top: 1px solid rgba(13,13,13,.07); padding-top: 12px; }
}
@media (max-width: 720px) {
  .pf-racine .pf-paire { grid-template-columns: minmax(0, 1fr); }
  .pf-racine .pf-camps { gap: 6px 16px; }
  .pf-racine .pf-camp b { font-size: 20px; }
  .pf-racine .pf-lecture { white-space: normal; }
}

/* Téléphone : « Voir les N visages » sous une figure abrégée. */
body .per-page .pf-racine button.pf-plus, body .pf-racine button.pf-plus {
  display: block; margin: 8px auto 0; padding: 5px 12px !important; min-height: 0 !important;
  font-size: 12px !important; font-weight: 600 !important; border-radius: 999px !important;
  border: 1px solid rgba(27,79,216,.3); background: rgba(27,79,216,.05); color: #1B4FD8; cursor: pointer;
}