/* ═══════════════════════════════════════════════════════════════════════════
PROSPECTING MANUAL — 02-CSS-additif-pricing.css
Additif du template `pricing`. À charger APRÈS `pm-global.css`.
Sections 72 à 78, à la suite de decision-ranking (65–71, vidées depuis).
PÉRIMÈTRE — ce fichier ne contient que ce qui ne sert qu'aux pages de prix.
Tout ce qui est partagé vit dans `pm-global.css` et n'est pas redéfini ici :
`.pm-card*`, `.pm-hero-g`, `.pm-vc*`, `.pm-vd*`, `.pm-by`, `.pm-bh*`,
`.pm-fresh`, `.pm-stale`, `.pm-fn`, `.pm-toc`, `.pm-sec`, `.pm-faq*`,
`.pm-sc-row`, `.pm-ednote`, `.pm-btns`, `.pm-btn*`, `.pm-sm`, `.pm-acts`,
`.pm-nl`, `.pm-ss`, `.pm-stick`, `.pm-slist`, `.pm-drawer`, `.pm-aff`,
`.pm-paid-line`.
NUMÉROTATION — 72 à 78. Aucun numéro ne recule, aucun trou n'est comblé.
Les sections 79 à 81 vivent dans `pm-global.css` depuis le 14 septembre
2026 (décision 33).
REPRISE DU 22 SEPTEMBRE 2026 (décision 122) — le template passe sur le
conteneur `pm-wide` (police de lecture, décision 54), le hero du socle
(`pm-hero-g`, décision 59) et les en-têtes `pm-bh` en h2. Ici : la ligne de
fraîcheur propre disparaît au profit de `pm-fresh` / `pm-fn` + `pm-stale`
du socle ; les tuiles de chiffres et la barre de confiance disparaissent
(leurs faits sont sur la carte de prix) ; les profils passent sur des
cartes propres à cet additif au lieu de `.pm-pricing-card` de la v6.2 ;
les étiquettes en `--pm-lt4` sur carte claire passent en `--pm-lt3` (audit
global I16) ; plancher à 12 px hors étiquettes en capitales espacées
(décision 46) ; la rampe des paliers lit les jetons du `:root` là où ils
existent (M10) ; encres écrites en clair (décision 38).
SOUS-ESPACE DE NOMS — toutes les classes propres portent `pm-pr-`.
GRILLES — dimensionnées en conteneur (`auto-fit` + `minmax`), jamais en
largeur de fenêtre. Les seuls points de rupture sont 1100 / 768 / 480.
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.
═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
72. OUVERTURE PRIX — la carte de prix du hero et la pastille de la barre fixe
Le hero est celui du socle : à gauche le H1, la réponse (`pm-vd`), la ligne
de faits (`pm-vd-meta`), la ligne de divulgation, les boutons ; à droite la
carte `pm-vc` du socle, sans jauge. Ce que cet additif ajoute : l'étiquette
« Entry price », les pastilles plan gratuit / essai (les couleurs franches
de la décision 117, contraste AA) et la ligne « N published plans ».
La pastille de la barre fixe affiche un prix hors de toute carte datée :
elle porte le même attribut de date, et passe en ambre au-delà du seuil,
sans texte — il n'y a pas la place —, mais la règle « aucun prix affiché
sans son état de fraîcheur » vaut là aussi (décision 29).
═══════════════════════════════════════════════════════════════════════════ */
.pm-pr-from{display:block;margin:0 0 8px;font-size:var(--pm-fs-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
color:var(--pm-ink-d2)}
.pm-vc-price .pm-pr-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:12px}
/* decision 141, lot 2, regle 23 (« go » du 2 octobre 2026) : la ligne d'essai va jusqu'a 60 caracteres — la pastille peut
faire deux lignes ; un rayon de 14 px dessine la meme pilule sur une ligne (26 px de haut) et un rectangle arrondi sur deux */
.pm-pr-tag{display:inline-block;padding:4px 10px;border-radius:14px;font-style:normal;font-size:var(--pm-fs-meta);font-weight:700;
line-height:1.3;background:#E2E8F0;border:1px solid #CBD5E1;color:#1E293B}
.pm-pr-tag[data-v="Free plan"]{background:#DCFCE7;border-color:#4ADE80;color:#14532D}
/* la pastille d'essai se colore par le fait, jamais par les mots de la ligne (second « go » de la seance 45, 2 octobre 2026) :
`data-trial` porte le drapeau d'essai de la page — `1`, un essai publie : indigo, quels que soient les mots (« 14-day trial, no
credit card required ») ; `0`, l'editeur ecrit qu'il n'y en a pas : rouge ; vide, rien de publie ou un essai non releve : le gris
de base (controle F50, et contrôle 7 de verifier_donnees.py : la ligne et le drapeau ne se contredisent pas) */
.pm-pr-tag[data-trial="1"]{background:#E0E7FF;border-color:#A5B4FC;color:#3730A3}
/* rouge : le « non » que l'editeur ecrit ; « No free plan stated » (rien de publie) garde le gris de base (decision 141, lot 2,
regle 16 bis, point 11 b) */
.pm-pr-tag[data-v="No free plan"],.pm-pr-tag[data-trial="0"]{background:#FEE2E2;border-color:#FCA5A5;color:#991B1B}
.pm-vc-price .pm-pr-plans{margin-top:12px;font-size:var(--pm-fs-meta);color:var(--pm-ink-d2)}
.pm-vc-price .pm-pr-plans b{color:#EEF4FF;font-weight:700}
.pm-vc-price .pm-fresh a{color:var(--pm-ink-d2);text-decoration:underline;text-underline-offset:3px}
/* la pastille de la barre fixe, au-delà du seuil de 180 jours */
.pm-stick .pm-pill.is-stale{background:rgba(217,119,6,.16);border-color:rgba(217,119,6,.34)}
.pm-stick .pm-pill.is-stale b,.pm-stick .pm-pill.is-stale i{color:#FCD34D}
/* ═══════════════════════════════════════════════════════════════════════════
73. ÉCHELLE DES PALIERS — le bloc que le lecteur doit comprendre d'un regard
POURQUOI PAS UN TABLEAU (décision 32)
Un tableau à six colonnes se lit, il ne se saisit pas : l'œil doit parcourir
chaque cellule pour reconstituer la progression. Sur téléphone il défile
latéralement, ce qui est exactement l'inverse du but. Il est remplacé par
une échelle : une ligne par palier, quatre zones alignées d'une ligne à
l'autre, et une barre proportionnelle qui rend la progression des quotas
visible avant d'être lue.
LA BARRE — sa largeur est le quota du palier rapporté au plus élevé de la
page. Elle ne compare rien entre éditeurs, ne chiffre rien et n'affiche
aucun nombre qu'elle aurait calculé : c'est une mise en forme du nombre
déjà affiché à côté d'elle. L'échelle est linéaire, donc un petit palier
donne une barre minuscule — c'est l'information, pas un défaut.
ALIGNEMENT — les colonnes sont déclarées une seule fois, dans une variable
locale `--pm-pr-cols`, que l'en-tête et toutes les lignes partagent.
LA BASCULE mensuel / annuel vit dans `pm-bh-side` de l'en-tête du socle ;
elle n'existe que s'il y a un prix publié.
═══════════════════════════════════════════════════════════════════════════ */
.pm-pr-tog{display:inline-flex;align-items:center;gap:3px;padding:3px;border-radius:var(--pm-r-pill);
background:var(--pm-l0);border:1px solid var(--pm-l3);flex-shrink:0}
.pm-pr-tog button{border:none;background:none;cursor:pointer;white-space:nowrap;
padding:6px 15px;border-radius:var(--pm-r-pill);
font-family:var(--pm-fb);font-size:var(--pm-fs-meta);font-weight:600;color:var(--pm-ink-l2);
transition:background var(--pm-t2),color var(--pm-t2)}
.pm-pr-tog button:hover{color:var(--pm-lt1)}
.pm-pr-tog button[aria-pressed="true"]{background:var(--pm-grad);color:#fff;font-weight:700}
/* ── l'échelle ── */
.pm-pr-lad{--pm-pr-cols:minmax(124px,1.05fr) minmax(108px,.85fr) minmax(150px,1.35fr) minmax(190px,1.7fr);
display:flex;flex-direction:column;gap:8px}
.pm-pr-lad-hd{display:grid;grid-template-columns:var(--pm-pr-cols);gap:16px;align-items:end;
padding:0 18px 11px;margin-bottom:2px;border-bottom:1px solid rgba(110,128,200,.22)}
/* étiquettes en capitales espacées : exemptées du plancher de 12 px (décision 46) */
.pm-pr-lad-hd span{font-family:var(--pm-fm);font-size:var(--pm-fs-xs);font-weight:600;letter-spacing:.11em;
text-transform:uppercase;color:var(--pm-ink-l2)}
.pm-pr-lad-r{position:relative;display:grid;grid-template-columns:var(--pm-pr-cols);gap:16px;
align-items:center;padding:17px 18px;border-radius:var(--pm-r4);overflow:hidden;
background:rgba(255,255,255,.55);border:1px solid rgba(110,128,200,.18);
transition:border-color var(--pm-t2),background var(--pm-t2)}
.pm-pr-lad-r:hover{background:rgba(255,255,255,.78);border-color:rgba(99,102,241,.34)}
/* zone 1 — le palier */
.pm-pr-lad-p{min-width:0;font-family:var(--pm-fb);font-size:var(--pm-fs-body);font-weight:700;
letter-spacing:normal;color:var(--pm-lt1)}
.pm-pr-lad-p i{display:block;margin-top:5px;font-family:var(--pm-fm);font-size:var(--pm-fs-xs);
font-style:normal;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--pm-ink-l2)}
.pm-pr-lad-tag{display:inline-block;margin-top:6px;padding:2px 9px;border-radius:var(--pm-r-pill);
background:rgba(79,70,229,.1);border:1px solid rgba(79,70,229,.22);
font-family:var(--pm-fm);font-size:var(--pm-fs-xs);font-weight:600;letter-spacing:.07em;text-transform:uppercase;
color:var(--pm-v4)}
/* zone 2 — le prix, l'élément le plus lourd de la ligne */
.pm-pr-lad-c{min-width:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:0 4px}
.pm-pr-amt{font-family:var(--pm-fd);font-size:var(--pm-fs-2xl);font-weight:800;letter-spacing:-.02em;
line-height:1.05;color:var(--pm-lt1);white-space:nowrap}
/* séance 130 : la période passe à la ligne dans sa case (« /mo (billing period not stated) » débordait sur la colonne du quota à 1 280 px) */
.pm-pr-per{font-family:var(--pm-fb);font-size:var(--pm-fs-meta);font-weight:500;color:var(--pm-ink-l2);white-space:normal;min-width:0}
.pm-pr-quote{font-family:var(--pm-fd);font-size:var(--pm-fs-h3);font-weight:800;letter-spacing:-.03em;
color:var(--pm-ink-l2)}
/* zone 3 — le quota et sa barre */
.pm-pr-lad-q{min-width:0}
.pm-pr-lad-q b{display:block;margin-bottom:8px;font-family:var(--pm-fd);font-size:var(--pm-fs-h3);
font-weight:800;letter-spacing:-.02em;color:var(--pm-lt1)}
.pm-pr-lad-q b span{margin-left:5px;font-family:var(--pm-fb);font-size:var(--pm-fs-meta);font-weight:500;
letter-spacing:0;color:var(--pm-ink-l2)}
.pm-pr-lad-bar{display:block;height:6px;border-radius:3px;overflow:hidden;
background:rgba(110,128,200,.15)}
.pm-pr-lad-bar i{display:block;height:100%;width:0;border-radius:3px;background:var(--pm-grad);
transition:width 1s cubic-bezier(.22,1,.36,1)}
.pm-pr-lad-none{font-family:var(--pm-fm);font-size:var(--pm-fs-meta);font-weight:600;color:var(--pm-ink-l2)}
/* zone 4 — ce que le palier ajoute */
.pm-pr-lad-s{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
/* decision 141, lot 2, regle 23 (« go » du 2 octobre 2026, point 4) : une mention recopiee de la page de l'editeur reste telle
quelle, meme longue — la pastille va a la ligne (elle debordait de la carte au-dela de 44 caracteres a 375 px) ; rayon de 14 px :
la meme pilule sur une ligne, un rectangle arrondi sur deux ; le point reste sur la premiere ligne */
.pm-pr-lad-s span{display:inline-flex;align-items:flex-start;gap:6px;min-width:0;padding:5px 11px;
border-radius:14px;background:rgba(110,128,200,.11);
font-size:var(--pm-fs-meta);line-height:1.3;color:var(--pm-ink-l1);overflow-wrap:anywhere}
.pm-pr-lad-s span::before{content:'';width:4px;height:4px;margin-top:.48em;border-radius:50%;flex-shrink:0;
background:rgba(79,70,229,.55)}
.pm-pr-lad-s .pm-pr-lad-no{background:rgba(110,128,200,.055);color:var(--pm-ink-l2)}
.pm-pr-lad-s .pm-pr-lad-no::before{background:rgba(110,128,200,.42)}
/* la pastille d'essai gratuit passe au vert : elle dit qu'on peut entrer sans
payer, ce qui n'est pas de même nature que « 5 sièges » */
.pm-pr-lad-s .pm-pr-lad-yes{background:rgba(21,128,61,.08);color:#126B33}
.pm-pr-lad-s .pm-pr-lad-yes::before{background:#15803D}
/* ── COULEUR PORTEUSE DE SENS ──────────────────────────────────────────────
Le socle a déjà ce mécanisme : `.pm-sc-fil[data-band]` change de teinte
selon ce que la note vaut. Même principe ici, appliqué au rang du palier.
La rampe monte du cyan au violet. Les trois premiers rangs lisent les
jetons du `:root` (`--pm-info`, `--pm-b3`, `--pm-v3` et leurs clairs) ; les
deux derniers sont les violets de `--pm-grad-text`, que le `:root` ne
nomme pas séparément. Un palier sans quota publié — un palier sur devis —
ne reçoit aucune teinte et reste gris. L'absence de couleur y est
l'information.
Le rang n'est pas un champ du contrat : il est déduit de la position de la
ligne par le JS, comme la largeur de la barre (décision 32).
Les encres de texte sont écrites en clair (décision 38), variantes foncées
de chaque teinte, au-dessus de 4,5 de contraste sur la carte claire. */
.pm-pr-lad-r[data-tier="1"] .pm-pr-lad-bar i{background:linear-gradient(90deg,var(--pm-info),var(--pm-info-l));box-shadow:0 0 10px rgba(34,211,238,.34)}
.pm-pr-lad-r[data-tier="2"] .pm-pr-lad-bar i{background:linear-gradient(90deg,var(--pm-b3),var(--pm-b2));box-shadow:0 0 10px rgba(96,165,250,.34)}
.pm-pr-lad-r[data-tier="3"] .pm-pr-lad-bar i{background:linear-gradient(90deg,var(--pm-v3),var(--pm-v1));box-shadow:0 0 10px rgba(129,140,248,.34)}
.pm-pr-lad-r[data-tier="4"] .pm-pr-lad-bar i{background:linear-gradient(90deg,#7C3AED,#A78BFA);box-shadow:0 0 10px rgba(167,139,250,.34)}
.pm-pr-lad-r[data-tier="5"] .pm-pr-lad-bar i{background:linear-gradient(90deg,#6D28D9,#C084FC);box-shadow:0 0 11px rgba(192,132,252,.36)}
.pm-pr-lad-r[data-tier="1"] .pm-pr-lad-q b{color:#0E7490}
.pm-pr-lad-r[data-tier="2"] .pm-pr-lad-q b{color:#1D4ED8}
.pm-pr-lad-r[data-tier="3"] .pm-pr-lad-q b{color:#4338CA}
.pm-pr-lad-r[data-tier="4"] .pm-pr-lad-q b{color:#6D28D9}
.pm-pr-lad-r[data-tier="5"] .pm-pr-lad-q b{color:#7E22CE}
/* la piste reprend la teinte de son remplissage, en très pâle */
.pm-pr-lad-r[data-tier="1"] .pm-pr-lad-bar{background:rgba(8,145,178,.13)}
.pm-pr-lad-r[data-tier="2"] .pm-pr-lad-bar{background:rgba(37,99,235,.13)}
.pm-pr-lad-r[data-tier="3"] .pm-pr-lad-bar{background:rgba(79,70,229,.13)}
.pm-pr-lad-r[data-tier="4"] .pm-pr-lad-bar{background:rgba(124,58,237,.13)}
.pm-pr-lad-r[data-tier="5"] .pm-pr-lad-bar{background:rgba(109,40,217,.13)}
/* le bord gauche de chaque ligne reprend sa teinte : l'échelle se lit dans la
marge, même quand les barres sortent du champ de vision */
.pm-pr-lad-r[data-tier]::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px}
.pm-pr-lad-r[data-tier="1"]::before{background:linear-gradient(180deg,var(--pm-info),var(--pm-info-l))}
.pm-pr-lad-r[data-tier="2"]::before{background:linear-gradient(180deg,var(--pm-b3),var(--pm-b2))}
.pm-pr-lad-r[data-tier="3"]::before{background:linear-gradient(180deg,var(--pm-v3),var(--pm-v1))}
.pm-pr-lad-r[data-tier="4"]::before{background:linear-gradient(180deg,#7C3AED,#A78BFA)}
.pm-pr-lad-r[data-tier="5"]::before{background:linear-gradient(180deg,#6D28D9,#C084FC)}
/* le palier le plus cité dans les avis retenus (`is-feat`, calculé) — un lavis violet très léger, pas un aplat */
.pm-pr-lad-r.is-feat{background:
linear-gradient(104deg,rgba(79,70,229,.075) 0%,rgba(124,58,237,.035) 58%,rgba(255,255,255,0) 100%),#fff;
border-color:rgba(79,70,229,.34);box-shadow:0 6px 24px rgba(79,70,229,.10)}
.pm-pr-lad-r.is-feat:hover{background:
linear-gradient(104deg,rgba(79,70,229,.11) 0%,rgba(124,58,237,.05) 58%,rgba(255,255,255,0) 100%),#fff}
@media (prefers-reduced-motion: reduce){
.pm-pr-lad-bar i{transition:none}
}
/* ═══════════════════════════════════════════════════════════════════════════
74. DÉCLENCHEURS DE FACTURE — ce que le prix affiché ne dit pas
Une tuile par mécanisme de facturation. Chaque tuile porte une valeur
chiffrée issue de la page publique de l'éditeur, jamais une estimation, et
la date de son relevé en attribut (P3, décision 90) ; la carte porte la plus
ancienne de ces dates sur sa ligne de fraîcheur du socle. Grille en
conteneur : deux colonnes tant que la place existe, une sinon.
═══════════════════════════════════════════════════════════════════════════ */
.pm-pr-drv{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:11px}
.pm-pr-drv-c{padding:16px 18px;border-radius:var(--pm-r4);min-width:0;
background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1)}
.pm-pr-drv-v{font-family:var(--pm-fd);font-size:var(--pm-fs-h3);font-weight:800;letter-spacing:-.02em;
line-height:1.1;color:#EEF4FF;margin-bottom:6px}
.pm-pr-drv-l{display:block;font-family:var(--pm-fm);font-size:var(--pm-fs-xs);font-weight:600;letter-spacing:.11em;
text-transform:uppercase;color:#93C5FD;margin-bottom:9px}
.pm-pr-drv-t{margin:0;font-size:var(--pm-fs-ui);line-height:1.68;color:var(--pm-ink-d1)}
/* ═══════════════════════════════════════════════════════════════════════════
75. RAPPORT PRIX / VALEUR — le seul bloc dont la source est le jeu d'avis
Il est isolé pour que sa source se voie, et découpé en deux zones qui
répondent à deux questions différentes : « ça vaut combien » à gauche,
« qu'est-ce qui revient » à droite.
RÉUTILISATION — la note reprend `.pm-sc-row`, `.pm-sc-v`, `.pm-sc-trk` et
`.pm-sc-fil` du socle, restylés en contexte et jamais redéfinis. Les
fonctions `bands()` et `paint()` de `pm-global.js` les prennent en charge :
la teinte de la note vient de la même échelle que partout ailleurs.
LA BARRE D'UN THÈME (P1, décision 90, révisée au lot 6.3, partie 2) — son
remplissage est le compte de mentions du thème, rapporté au plus grand
compte de la carte (le JS prend le maximum du groupe) ; la cellule écrit
« 254 negative mentions », jamais « 20 % », et l'en-tête dit « Mentions,
bar scaled to the most-raised theme ». Le contrôle F47 refuse tout « % ».
═══════════════════════════════════════════════════════════════════════════ */
.pm-pr-vm{display:grid;grid-template-columns:minmax(210px,.62fr) minmax(300px,1.38fr);gap:14px}
/* ── zone gauche : la note ── */
.pm-pr-vm-sc{display:flex;flex-direction:column;justify-content:center;
padding:20px 22px;border-radius:var(--pm-r4);min-width:0;
background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1)}
.pm-pr-vm-l{font-family:var(--pm-fm);font-size:var(--pm-fs-xs);font-weight:600;letter-spacing:.11em;
text-transform:uppercase;color:#93C5FD;margin-bottom:12px}
.pm-pr-vm-sc .pm-sc-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px;padding:0}
.pm-pr-vm-sc .pm-sc-v{font-family:var(--pm-fd);font-size:var(--pm-fs-h1);font-weight:800;
letter-spacing:-.02em;line-height:.95;min-width:0;text-align:left}
.pm-pr-vm-o{font-family:var(--pm-fb);font-size:var(--pm-fs-body);font-weight:700;letter-spacing:normal;
color:var(--pm-ink-d2)}
.pm-pr-vm-sc .pm-sc-trk{flex:1 1 100%;height:9px;margin-top:15px;border-radius:5px}
.pm-pr-vm-sc .pm-sc-fil{border-radius:5px}
/* séance 246 (audit) : la grille de la ligne de note du socle v9 (section 191, « lab v » / « trk trk ») battait la ligne ci-dessus et
posait « / 10 » avant la note, à toutes les largeurs ; la note, puis « / 10 », puis la jauge dessous */
body .pm-wide .pm-pr-vm-sc .pm-sc-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px;padding:0}
body .pm-wide .pm-pr-vm-sc .pm-sc-v{min-width:0;text-align:left}
body .pm-wide .pm-pr-vm-sc .pm-sc-trk{flex:1 1 100%;width:100%}
.pm-pr-vm-n{display:block;margin-top:14px;font-size:var(--pm-fs-meta);line-height:1.6;color:var(--pm-ink-d2)}
.pm-pr-vm-n b{color:var(--pm-ink-d1);font-weight:700}
/* ── zone droite : ce qui revient ── */
.pm-pr-vm-th{padding:18px 20px;border-radius:var(--pm-r4);min-width:0;
background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1)}
.pm-pr-vm-hd{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
flex-wrap:wrap;padding-bottom:12px;margin-bottom:4px;
border-bottom:1px solid rgba(255,255,255,.09)}
.pm-pr-vm-hd span{font-family:var(--pm-fm);font-size:var(--pm-fs-xs);font-weight:600;letter-spacing:.11em;
text-transform:uppercase;color:#93C5FD}
.pm-pr-vm-hd span+span{color:var(--pm-ink-d2);letter-spacing:.07em}
.pm-pr-vm-r{display:grid;grid-template-columns:minmax(0,1fr) minmax(84px,132px) auto;
gap:6px 14px;align-items:center;padding:13px 0;
border-bottom:1px solid rgba(255,255,255,.07)}
.pm-pr-vm-r:last-of-type{border-bottom:none}
.pm-pr-vm-t{min-width:0;font-size:var(--pm-fs-ui);line-height:1.5;color:var(--pm-ink-d1)}
.pm-pr-vm-tag{display:block;margin-top:5px;font-family:var(--pm-fm);font-size:var(--pm-fs-xs);font-weight:600;
letter-spacing:.09em;text-transform:uppercase}
.pm-pr-vm-r[data-sent="minus"] .pm-pr-vm-tag{color:#FCD34D}
.pm-pr-vm-r[data-sent="plus"] .pm-pr-vm-tag{color:#86EFAC}
.pm-pr-vm-b{display:block;height:7px;border-radius:4px;overflow:hidden;min-width:0;
background:rgba(255,255,255,.08)}
.pm-pr-vm-b i{display:block;height:100%;width:0;border-radius:4px;
transition:width 1.1s cubic-bezier(.22,1,.36,1)}
.pm-pr-vm-r[data-sent="minus"] .pm-pr-vm-b i{background:linear-gradient(90deg,#D97706,#FBBF24);
box-shadow:0 0 10px rgba(251,191,36,.34)}
.pm-pr-vm-r[data-sent="plus"] .pm-pr-vm-b i{background:linear-gradient(90deg,#16A34A,#4ADE80);
box-shadow:0 0 10px rgba(74,222,128,.34)}
.pm-pr-vm-c{font-family:var(--pm-fm);font-size:var(--pm-fs-meta);color:var(--pm-ink-d2);white-space:nowrap}
.pm-pr-vm-c b{font-family:var(--pm-fb);font-size:var(--pm-fs-lead);font-weight:700;letter-spacing:normal;
color:#EEF4FF;margin-right:3px}
@media (prefers-reduced-motion: reduce){
.pm-pr-vm-b i{transition:none}
}
/* ═══════════════════════════════════════════════════════════════════════════
76. PROFILS ET PALIERS — deux ou trois situations, chacune sur un palier
Cartes propres à cet additif (décision 122), à la place de `.pm-pricing-card`
de la v6.2 : étiquettes à 12 px, coche en tracé SVG, aucun profil mis en
avant — une situation n'est pas un rang. Le prix de la carte est celui du
palier, et il suit la bascule mensuel / annuel. Les paragraphes posés sur
carte claire sont rattrapés en clair, avec la force du socle (défaut 10).
═══════════════════════════════════════════════════════════════════════════ */
.pm-pr-profs{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.pm-pr-prof{display:flex;flex-direction:column;min-width:0;padding:20px 20px 18px;border-radius:var(--pm-r4);
background:#fff;border:1px solid rgba(110,128,200,.22);box-shadow:0 2px 10px rgba(30,40,100,.05)}
.pm-pr-prof-l{display:block;margin-bottom:10px;font-family:var(--pm-fb);font-size:var(--pm-fs-lead);font-weight:700;
letter-spacing:normal;line-height:1.2;color:#0A1428}
.pm-pr-prof-p{display:flex;align-items:baseline;gap:4px;margin-bottom:3px}
.pm-pr-prof-p b{font-family:var(--pm-fd);font-size:var(--pm-fs-h2);font-weight:800;letter-spacing:-.02em;line-height:1;color:#0A1428}
.pm-pr-prof-p i{font-style:normal;font-size:var(--pm-fs-meta);font-weight:500;color:var(--pm-ink-l2)}
.pm-pr-prof-plan{display:block;margin-bottom:12px;font-family:var(--pm-fm);font-size:var(--pm-fs-xs);font-weight:600;
letter-spacing:.06em;text-transform:uppercase;color:#3730A3}
.pm-pr-prof-w{margin:0 0 14px;font-size:var(--pm-fs-ui);line-height:1.58;color:var(--pm-ink-l2)}
.pm-pr-prof-list{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:7px}
.pm-pr-prof-list li{display:flex;align-items:flex-start;gap:8px;font-size:var(--pm-fs-meta);line-height:1.5;color:var(--pm-ink-l1)}
.pm-pr-prof-list li::before{content:'';flex-shrink:0;width:16px;height:16px;margin-top:1px;border-radius:5px;
background-color:#DCFCE7;background-repeat:no-repeat;background-position:center;background-size:10px;
background-image:url("data:image/svg+xml;utf8,")}
.pm-pr-prof-list li.pm-pr-prof-na{color:#5B729A}
.pm-pr-prof-list li.pm-pr-prof-na::before{background-color:#E2E8F0;
background-image:url("data:image/svg+xml;utf8,")}
.pm-pr-prof-lim{display:flex;align-items:flex-start;gap:8px;margin:0 0 15px;
padding:10px 12px;border-radius:var(--pm-r2);
background:rgba(217,119,6,.07);border:1px solid rgba(180,83,9,.2);
font-size:var(--pm-fs-meta);line-height:1.55;color:#8A4C09}
.pm-pr-prof-lim::before{content:'→';font-family:var(--pm-fm);font-size:var(--pm-fs-meta);flex-shrink:0;
color:#B45309;margin-top:1px}
.pm-pr-prof .pm-acts{margin-top:auto;padding-top:14px;border-top:1px solid rgba(110,128,200,.18)}
.pm-page-wrap .pm-card-l .pm-pr-prof-w{color:var(--pm-ink-l2)}
.pm-page-wrap .pm-card-l .pm-pr-prof-lim{color:#8A4C09}
/* ═══════════════════════════════════════════════════════════════════════════
77. LA CARTE DE FIN — concurrents et liens, deux colonnes titrées
À gauche les trois concurrents avec leur seul prix d'entrée et « + Compare »
(décision 31) ; leurs `data-*` alimentent le tiroir du socle (décision 22),
qui porte leur Try. À droite les liens de sortie sur la liste du socle
(`pm-nl`). Les titres de colonne sont des h3.
═══════════════════════════════════════════════════════════════════════════ */
.pm-pr-nx{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;margin-bottom:22px}
.pm-pr-nx-c{padding:18px 20px;border-radius:var(--pm-r4);min-width:0;
background:rgba(255,255,255,.5);border:1px solid rgba(110,128,200,.2)}
.pm-pr-nx-h{display:block;margin:0 0 13px;font-family:var(--pm-fm);font-size:var(--pm-fs-xs);font-weight:600;letter-spacing:.11em;
text-transform:uppercase;color:var(--pm-ink-l2)}
.pm-pr-peer{display:flex;align-items:center;gap:11px;padding:10px 0;min-width:0;
border-bottom:1px solid rgba(110,128,200,.16)}
.pm-pr-peer:last-of-type{border-bottom:none}
.pm-pr-peer>img{width:30px;height:30px;border-radius:9px;flex-shrink:0;object-fit:contain;
background:var(--pm-l0);padding:3px}
.pm-pr-peer-b{flex:1;min-width:0}
.pm-pr-peer-n{display:block;font-family:var(--pm-fb);font-size:var(--pm-fs-ui);font-weight:700;
letter-spacing:normal;color:#0A1428;text-decoration:none}
.pm-pr-peer-n:hover{color:var(--pm-v4)}
.pm-pr-peer-p{display:block;font-size:var(--pm-fs-meta);color:var(--pm-ink-l2);margin-top:2px}
.pm-pr-peer-p b{color:#0A1428;font-weight:700}
.pm-pr-peer .pm-sm{flex-shrink:0}
.pm-pr-nx-c .pm-fn{margin-top:12px}
.pm-pr-nx-links{display:grid;gap:10px}
/* ═══════════════════════════════════════════════════════════════════════════
78. RESPONSIVE DU TEMPLATE — 1100 / 768 / 480, aucun autre seuil
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:1100px){
.pm-pr-drv{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.pm-pr-lad{--pm-pr-cols:minmax(108px,1fr) minmax(96px,.8fr) minmax(128px,1.2fr) minmax(160px,1.5fr)}
.pm-pr-amt{font-size:var(--pm-fs-xl)}
}
@media (max-width:768px){
.pm-pr-tog{align-self:stretch;display:flex}
.pm-pr-tog button{flex:1}
.pm-pr-drv{grid-template-columns:minmax(0,1fr)}
.pm-pr-nx{grid-template-columns:minmax(0,1fr)}
.pm-pr-vm{grid-template-columns:minmax(0,1fr)}
.pm-pr-vm-sc .pm-sc-v{font-size:var(--pm-fs-h1)}
.pm-pr-profs{grid-template-columns:minmax(0,1fr)}
/* l'échelle se replie en deux zones par ligne : le palier et son prix en
tête, le quota et les mentions dessous. Aucun défilement latéral. */
.pm-pr-lad-hd{display:none}
.pm-pr-lad{--pm-pr-cols:minmax(0,1fr) minmax(0,1fr)}
.pm-pr-lad-r{gap:13px 14px;align-items:start}
.pm-pr-lad-c{justify-content:flex-end;text-align:right} /* séance 130 : la période coupée suit le montant */
.pm-pr-lad-q,.pm-pr-lad-s{grid-column:1 / -1}
}
@media (max-width:480px){
.pm-pr-peer>img{width:26px;height:26px}
/* séance 246 : le bouton « + Compare » passe sous le texte du concurrent, qui reprend la largeur (il tenait dans 150 px) */
.pm-pr-peer{flex-wrap:wrap;row-gap:8px}
.pm-pr-peer-b{flex:1 1 calc(100% - 37px)}
.pm-pr-peer .pm-sm{margin-left:37px}
.pm-pr-drv-c{padding:14px 15px}
.pm-pr-lad{--pm-pr-cols:minmax(0,1fr)}
.pm-pr-lad-r{padding:15px 15px}
.pm-pr-lad-c{justify-content:flex-start;text-align:left}
.pm-pr-amt{font-size:var(--pm-fs-xl)}
.pm-pr-vm-r{grid-template-columns:minmax(0,1fr) auto}
.pm-pr-vm-t{grid-column:1 / -1}
}