/* ═══════════════════════════════════════════════════════════════════════════
   PROSPECTING MANUAL — ADDITIF CSS vs
   Sections 152 à 156. À charger après pm-global.css.

   CRÉATION DU 21 SEPTEMBRE 2026 (étape 3.7, décision 114) : les 108 duels /compare/a-vs-b/.
   Ce que le socle porte n'est pas écrit ici : cartes, en-têtes de bloc (pm-bh), verdict et
   ligne de faits (pm-vd, pm-vd-meta), carte de score (pm-pod, section 151 du socle, promue
   de decision-ranking), côte à côte (pm-ct, pm-cell, pm-mb, pm-take, pm-tog, pm-cmp-foot),
   notes (pm-fn), sommaire et sections (pm-toc, pm-sec), FAQ (pm-faq-h), liens (pm-nl),
   fil d'Ariane. Plancher typographique à 12 px (décision 46). Les encres sont écrites en
   clair ; seules les surfaces lisent une variable (décision 38). Aucune classe du socle
   n'est redéfinie ; les rares règles qui en ciblent une sont scopées par `.pm-vs`.
   MISE À JOUR DU 22 SEPTEMBRE 2026 (étape 3.8, chantier B, décision 129) — la règle d'encre forcée de la
   v6.2 n'existe plus sur les pages de la v8 : le socle pose l'encre de base des paragraphes en section 184,
   sans !important. La garde contextuelle de ce fichier a perdu son !important et gagne par ses trois
   classes ; un composant neuf stylise un paragraphe avec deux classes, jamais avec !important.

   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ 152. OUVERTURE — la ligne de scores : deux pastilles identiques, aucun score mis en
   avant (décision 119 : ne pas orienter le lecteur dès l'ouverture) ; le reste de la carte est
   le socle (pm-hd, pm-vd, pm-vd-meta, pm-by)                                              */
.pm-vs .pm-hd{max-width:760px}
.pm-vs-sl{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 16px}
.pm-vs-sl-t{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 10px;border-radius:14px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.pm-vs-sl-t img{width:26px;height:26px;border-radius:8px}
.pm-vs-sl-t b{font-size:var(--pm-fs-sm);font-weight:700;color:#fff}
.pm-vs-sl-t i{font-family:var(--pm-fd);font-style:normal;font-size:var(--pm-fs-2xl);font-weight:800;letter-spacing:-.02em;line-height:1;
  color:#fff}
.pm-vs-sl-vs{font-family:var(--pm-fm);font-size:var(--pm-fs-xs);letter-spacing:.12em;text-transform:uppercase;color:rgba(238,244,255,.5)}


/* ═══ 153. FACE À FACE — score en gros en haut à droite (vert sur la carte du score le plus
   haut), étiquettes, trois faits étiquetés avec le chiffre clé en gras, encart « Pick … if »,
   prix en gros avec pastilles plan gratuit / essai ; les cartes elles-mêmes sont pm-pod is-duo
   (socle, section 151) et la carte du score le plus haut porte is-lead. Dessin des décisions
   115 et 116.                                                                          */
/* la v6.2 force l'encre de tout paragraphe du conteneur en !important (défaut 10, socle
   section 79) : la ligne de divulgation, sur carte claire, reprend une encre sombre */
/* les deux cartes ont la hauteur de la plus haute ; le prix et les boutons sont poussés au bas de chaque carte, donc
   alignés à l'horizontale (décision 118) */
.pm-vs .pm-pod-c{padding:20px 20px 18px;align-items:stretch}
.pm-vs .pm-pod-c>div{display:flex;flex-direction:column;min-height:100%}
/* plus spécifique que `.pm-pod:not(.is-ranked) .pm-pod-n` du socle : la place du score en haut à droite */
.pm-vs .pm-pod:not(.is-ranked) .pm-pod-n{padding-right:96px;font-size:var(--pm-fs-h3)}
.pm-vs-score{position:absolute;top:16px;right:18px;display:flex;align-items:baseline;gap:3px;padding:6px 12px;
  border-radius:12px;background:#334155;color:#fff}
.pm-vs-score b{font-family:var(--pm-fd);font-size:var(--pm-fs-xl);font-weight:800;letter-spacing:-.02em;line-height:1}
.pm-vs-score i{font-family:var(--pm-fm);font-style:normal;font-size:var(--pm-fs-meta);letter-spacing:.06em;color:rgba(255,255,255,.7)}
.pm-pod-c.is-lead .pm-vs-score{background:#15803D}
.pm-vs-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.pm-vs-tags .pm-pod-tag{margin-top:0}
.pm-vs-dims{display:inline-block;padding:2px 9px;border-radius:var(--pm-r-pill);background:#E2E8F0;border:1px solid #CBD5E1;
  font-size:var(--pm-fs-meta);font-weight:600;color:#0F172A}
.pm-vs-dims.is-lead{background:#15803D;border-color:#15803D;color:#fff;font-weight:600}
/* les trois faits : une étiquette en capitales, le fait, le chiffre clé en gras */
.pm-vs-facts{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.pm-vs-facts li{position:relative;padding-left:16px;font-size:var(--pm-fs-meta);line-height:1.5;color:#1E293B}
.pm-vs-facts li::before{content:'';position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:#4338CA}
.pm-vs-facts li i{display:block;font-family:var(--pm-fm);font-style:normal;font-size:var(--pm-fs-xs);letter-spacing:.08em;
  text-transform:uppercase;color:#4338CA}
.pm-vs-facts li b{font-weight:800;color:#0F172A}
.pm-page-wrap .pm-card-l .pm-vs-pick{margin:14px 0 0;padding:9px 12px;border-radius:0 10px 10px 0;border-left:3px solid #4338CA;
  background:rgba(67,56,202,.07);font-size:var(--pm-fs-meta);color:#1E293B}
.pm-page-wrap .pm-card-l .pm-vs-pick b{color:#3730A3}
/* le prix en gros, les pastilles plan gratuit et essai (valeurs fermées du contrat), la date de relevé */
.pm-vs-price{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:auto;padding-top:16px}
.pm-vs-price>b{font-family:var(--pm-fd);font-size:var(--pm-fs-h3);font-weight:800;letter-spacing:-.03em;line-height:1;color:#0F172A}
.pm-vs-price>b i{font-family:var(--pm-fm);font-style:normal;font-size:var(--pm-fs-meta);font-weight:600;letter-spacing:0;color:var(--pm-ink-l2);margin-left:2px}
/* pastilles franches (décision 117) : vert = plan gratuit, indigo = essai, rouge sobre = « No … » ; contraste AA */
.pm-vs-tag{display:inline-block;padding:4px 10px;border-radius:var(--pm-r-pill);background:#E2E8F0;border:1px solid #CBD5E1;
  font-size:var(--pm-fs-meta);line-height:1.3;font-weight:600;color:#0F172A}
.pm-vs-tag[data-v="Free plan"]{background:#DCFCE7;border-color:#4ADE80;color:#14532D}
.pm-vs-tag[data-v$="free trial"]:not([data-v^="No "]),.pm-vs-tag[data-v^="Free trial"]{background:#E0E7FF;border-color:#A5B4FC;color:#3730A3}
/* rouge : le « non » que l'editeur ecrit ; « No free plan stated » et « No free trial stated » (rien de publie) gardent le gris
   de base (decision 141, lot 2, regle 16 bis, point 11 b) */
.pm-vs-tag[data-v="No free plan"],.pm-vs-tag[data-v="No free trial"]{background:#FEE2E2;border-color:#FCA5A5;color:#991B1B}
.pm-vs-price small{flex-basis:100%;font-size:var(--pm-fs-meta);font-weight:500;color:var(--pm-ink-l3)}


/* ═══ 154. CÔTE À CÔTE SUR CARTE SOMBRE — deux colonnes seulement ; le score en plus gros ═ */
.pm-vs .pm-ct{min-width:520px}
.pm-vs .pm-ct th:first-child{width:34%}
.pm-vs .pm-ct tr[data-pm-row="num"] .pm-cell b{font-size:var(--pm-fs-lead)}


/* ═══ 155. OÙ ALLER ENSUITE — les liens du socle sur deux colonnes ; le bloc complet de
   divulgation ferme la carte (décisions 111 et 114)                                     */
.pm-vs-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px}


/* ═══ 156. RESPONSIVE DU TEMPLATE ══════════════════════════════════════════ */
@media (max-width:768px){
  .pm-vs-links{grid-template-columns:minmax(0,1fr)}
  .pm-vs .pm-pod:not(.is-ranked) .pm-pod-n{padding-right:0}
  .pm-vs-score{position:static;align-self:start;margin-top:8px}
}
@media (max-width:480px){
  /* séance 246 : les deux pastilles de score l'une sous l'autre, de même largeur, « vs » centré entre elles (la seconde passait
     seule dessous, « vs » flottant à droite de la première) */
  .pm-vs-sl{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
  .pm-vs-sl-t{display:flex;min-width:0}
  .pm-vs-sl-t i{margin-left:auto}
  .pm-vs-sl-vs{justify-self:center}
}
/* Séance 246 : quand le côte à côte ne tient plus dans sa boîte (requête de conteneur sur `.pm-tw`, socle section 192 : sous ses
   520 px), il ne défile plus — comme celui à onglets sous 480 px (socle, section 109), le libellé d'une ligne passe au-dessus de
   ses deux valeurs, qui se partagent la largeur. `:where()` laisse ces sélecteurs sous le poids de `.pm-ct tr.is-hide`
   (« Only the differences ») ; la colonne figée de la section 191 n'a plus d'objet. */
@container (max-width:519px){
  .pm-vs .pm-ct{min-width:0}
  :where(.pm-vs) .pm-tw>.pm-ct,:where(.pm-vs) .pm-tw>.pm-ct thead,:where(.pm-vs) .pm-tw>.pm-ct tbody{display:block}
  :where(.pm-vs) .pm-tw>.pm-ct tr{display:flex;flex-wrap:wrap}
  :where(.pm-vs) .pm-tw>.pm-ct tbody th{flex:0 0 100%;width:auto}
  :where(.pm-vs) .pm-tw>.pm-ct tbody tr:not(.is-sec)>th{border-bottom:none;padding-bottom:0}
  :where(.pm-vs) .pm-tw>.pm-ct td,:where(.pm-vs) .pm-tw>.pm-ct thead th[data-pm-col]{flex:1 1 0;min-width:0}
  :where(.pm-vs) .pm-tw>.pm-ct thead th:not([data-pm-col]){flex:0 0 100%;height:0;padding:0;border:0;overflow:hidden}
  body .pm-wide .pm-card .pm-tw>.pm-ct :is(th,td):first-child{position:static;background:none;box-shadow:none}
}